.widget-saints {
    padding: 0;
    margin-bottom: 0;
    border: 1px solid #e5e5e5;
    border-radius: 4px;
    background-color: rgba(var(--bs-emphasis-color-rgb), 0.01);
}

.widget-saints .saints-body {
    padding: 0.5rem;

    padding: calc(var(--bs-card-spacer-y)*0.5) calc(var(--bs-card-spacer-x)*0.5);
}

.saint-title {
    display: inline-block;
    line-height: 1;
    vertical-align: middle;
    margin: 0; /* override any h6 default spacing */
    word-break: break-word;
}

.saint-link {
    color: var(--bs-primary, #2c5282);
    text-decoration: none;
    transition: color 0.2s;
}

.saint-link:hover {
    color: var(--bs-primary-dark, #1a365d);
}

.saint-description {
    margin: 0; /* override p default spacing */
}

.saint-button {
    padding: 0.25rem 0.5rem;
    margin: auto;
    min-width: 1rem;
    height: 1.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.25rem;
}

.saint-counter {
    padding: 0.25rem 0rem;
}

/* show only first character by default */
.badge-expandable .badge-text {
    display: inline-block;
    /*max-width: 1ch;           /* keep first character visible */
    white-space: nowrap;
    overflow: hidden;
    vertical-align: middle;
    transition: max-width .18s ease;
}

/* hidden part initially collapsed and transparent */
.badge-expandable .badge-hidden {
    display: inline-block;
    opacity: 0;
    max-width: 0;
    margin-left: 0;
    vertical-align: middle;
    transition: opacity .18s ease, max-width .18s ease, margin-left .18s ease;
}

/* reveal on hover or focus (keyboard accessible) */
.badge-expandable:hover .badge-text,
.badge-expandable:focus-within .badge-text {
    max-width: 80ch; /* large enough to show the full word */
}

.badge-expandable:hover .badge-hidden,
.badge-expandable:focus-within .badge-hidden {
    opacity: 1;
    max-width: 80ch;
    padding-left: .25rem;
}

/* small tweak so badge and title align nicely */
.saints-widget .badge-expandable {
    margin-bottom: 0; /* remove bottom margin used elsewhere */
    vertical-align: middle;
}

/* force-hide non-active items (override Bootstrap) */
.saint-carousel-container .saint-carousel-item {
    display: none !important;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .18s ease, transform .18s ease;
}
.saint-carousel-container .saint-carousel-item.active {
    display: block !important;
    opacity: 1;
    transform: translateY(0);
}

/* fixed width for the carousel (change 320px to desired fixed width) */
.saint-carousel-container {
    width: 320px;        /* fixed width */
    max-width: 100%;     /* keep responsive on very small screens */
    overflow: hidden;    /* hide non-active item overflow */
    margin: 0 auto;      /* center container if needed */
}

/* ensure each item fills the fixed width and doesn't overflow */
.saint-carousel-container .saint-carousel-item {
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

/* colorized badge (override Bootstrap bg-* when used with .badge-expandable) */
.badge-expandable {
    background-color: var(--badge-bg, #0d6efd); /* default primary */
    color: #fff !important;
    padding: 0.25rem 0.45rem;
    border-radius: 0.375rem;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    vertical-align: middle;
}

/* per-level colors using the badge title attribute already present in the template */
.badge-expandable[title="majeur"] {
    background-color: #dc3545; /* red / danger */
    color: #fff !important;
}
.badge-expandable[title="important"] {
    background-color: #ffc107; /* yellow / warning */
    color: #000 !important;
}
.badge-expandable[title="mineur"],
.badge-expandable[title="inconnu"] {
    background-color: #6c757d; /* gray */
    color: #fff !important;
}

/* Fix badge alignment and force per-level colors (override Bootstrap if loaded after) */
.saint-carousel-container .badge-expandable {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    padding: 0.25rem 0.45rem;
    height: 1.6rem;
    line-height: 1;
    border: none !important;
    vertical-align: middle;
    text-transform: capitalize; /* affiche "Majeur" plutôt que "majeur" */
}

/* ensure first-letter + hidden-part are vertically centered */
.saint-carousel-container .badge-expandable .badge-text {
    display: inline-flex;
    align-items: center;
    overflow: hidden;
}

/* keep hidden part behaviour */
.saint-carousel-container .badge-expandable .badge-hidden {
    opacity: 0;
    max-width: 0;
    margin-left: 0;
    transition: opacity .38s ease, max-width .38s ease, margin-left .38s ease;
}
.saint-carousel-container .badge-expandable:hover .badge-hidden,
.saint-carousel-container .badge-expandable:focus-within .badge-hidden {
    opacity: 1;
    max-width: 80ch;
    margin-left: -.25rem;
    text-transform: none; /* keep original casing on expanded part */
}

/* explicit per-level colors with high specificity and !important to override Bootstrap classes */
.saint-carousel-container .badge-expandable[title="majeur"] {
    background-color: #dc3545 !important; /* rouge */
    color: #fff !important;
}
.saint-carousel-container .badge-expandable[title="important"] {
    background-color: #ffc107 !important;
    color: #000 !important;
}
.saint-carousel-container .badge-expandable[title="mineur"],
.saint-carousel-container .badge-expandable[title="inconnu"] {
    background-color: #6c757d !important;
    color: #fff !important;
}

/* ensure navigation arrows are horizontal and compact */
.carousel-navigation,
.saint-carousel-container .carousel-navigation {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    gap: .5rem;
    justify-content: flex-end;
}

/* compact arrow buttons */
.carousel-navigation .btn {
    padding: .25rem .5rem;
    min-width: 36px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: .25rem;
}

/* visual state for disabled attribute (shouldn't be used with looping) */
.carousel-navigation .btn:disabled {
    opacity: 0.6;
    cursor: default;
}
/* small spacing to separate counter and buttons */
.carousel-navigation .current-saint,
.carousel-navigation .total-saints {
    min-width: 1.5rem;
    text-align: center;
}