:root {
    --bs-body-font-family: "Roobert ENEL", Arial, sans-serif;
    /*--bs-body-bg: #F7F8FB;*/
    --bs-body-bg: #EFF2F7;
    --bs-body-color: #0E141A;
    --bs-body-color-rgb: 14,20,26;
    --bs-white: #FFFFFF;
    --bs-border-color-translucent: rgba(0, 0, 0, 0.175);
    --bs-border-width: 1px;

    --bs-link-color: var(--bs-enel);
    --bs-link-color-rgb: var(--bs-enel-rgb);
    --bs-link-hover-color: var(--bs-enel-shade-10);
    --bs-link-hover-color-rgb: var(--bs-enel-shade-20);

    --bs-secondary: #6c757d;
    --bs-secondary-rgb: 108, 117, 125;

    --bs-enel: #d3145a;
    --bs-enel-rgb: 211, 20, 90;
    --bs-enel-shade-10: #be1251;
    --bs-enel-shade-10-rgb: 190, 18, 81;
    --bs-enel-shade-20: #a91048;
    --bs-enel-shade-20-rgb: 169, 16, 72;
    --bs-enel-rgb-gradient-1: rgba(136, 14, 79, 0.4);
    --bs-enel-rgb-gradient-2: rgba(214, 21, 92, 1);
    --bs-vantaggio-verde: rgba(0, 133, 93, 1);
    /* stati non attivi -- valori stimati dal mockup, da allineare ai token di design */
    --bs-vantaggio-utilizzato-bg: rgba(178, 230, 205, 1);
    --bs-vantaggio-utilizzato-color: rgba(19, 20, 22, 1);
    --bs-vantaggio-scaduto-bg: rgba(194, 205, 221, 1);
    --bs-vantaggio-scaduto-color: rgba(28, 30, 32, 1);

    --bs-vantaggio-verde-shade-10: rgba(0, 116, 81, 1);
    --bs-vantaggio-verde-shade-20: rgba(0, 99, 69, 1);

    /* variante "premio speciale" (status premio): badge oro, valore
       e CTA in tonalita' calde -- valori stimati dal mockup */
    --bs-premio-value-from: #B85C1A;
    --bs-premio-value-to: #E0852E;
    --bs-premio-badge-bg: #F6C63C;
    --bs-premio-badge-color: #12321E;
    --bs-premio-cta-bg: #F5B301;
    --bs-premio-cta-color: #12321E;
    --bs-premio-cta-shade-10: #E0A400;
    --bs-premio-cta-shade-20: #C99300;
    --bs-enel-rgb-gradient-3: rgba(104, 3, 40, 0.1);
    --bs-enel-rgb-gradient-3-transparent: rgba(104, 3, 40, 0);
    --background-surface-elevation: #d3145a;

    --bs-mission: #0047CC;
    --bs-mission-rgb: 0, 71, 204;

    --bs-badge: #0047CC;
    --bs-badge-rgb: 0, 71, 204;

    --bs-coupon: #0047CC;
    --bs-coupon-rgb: 0, 71, 204;
    --bs-blue: #3B80FF;

    --bs-expired: #6c757d;
    --bs-expired-rgb: 108, 117, 125;

    --bs-avvento: var(--bs-enel);
    --bs-avvento-rgb: var(--bs-enel-rgb);

    --bs-marketflex: #F4F8FF;
    --bs-marketflex-rgb: 244, 248, 255;
    --bs-border-color-marketflex: #CBDAF6;

    --bs-tier_1: #55BE5A;
    --bs-tier_1-rgb: 85, 190, 90;
    --bs-tier_2: #0047CC;
    --bs-tier_2-rgb: 0, 71, 204;
    --bs-tier_3: #D3135A;
    --bs-tier_3-rgb: 211, 19, 90;

    --header-height: 0px;
    --navbar-top-height: 0px;
    --navbar-bottom-height: 0px;

    --bs-danger-rgb: 220, 53, 69;

    --btn-primary-bg: var(--bs-enel);
    --bs-bg-gray: rgb(239, 242, 247);
    --bs-bg-light-gray: rgb(247, 248, 251);
    --btn-bs-dismiss: rgb(247, 248, 251);
    --text-gray: rgb(39, 44, 52);
}





.bg-enel-gradient {
    --bs-bg-opacity: 1;
    /* fallback per browser che non supportano i gradient multipli */
    background: rgba(var(--bs-enel-rgb), var(--bs-bg-opacity, 1));
    background:
        radial-gradient(19.99% 27.02% at 73.85% 61.76%, var(--bs-enel-rgb-gradient-3) 35.15%, var(--bs-enel-rgb-gradient-3-transparent) 100%),
        linear-gradient(288deg, var(--bs-enel-rgb-gradient-1) 20.62%, var(--bs-enel-rgb-gradient-2) 59.38%),
        var(--background-surface-elevation);
}
.bg-gray{
    --bs-bg-opacity: 1;
    background-color: var(--bs-bg-gray);
}
.bg-light-gray{
    --bs-bg-opacity: 1;
    background-color: var(--bs-bg-light-gray);
}
.bg-green{
    --bs-bg-opacity: 1;
    background-color: var(--bs-vantaggio-verde);
}
.bg-more-advantages{
    background: linear-gradient(40deg, #F4F8FF 0%, rgb(203, 218, 246) 100%);
}
.text-enel{
    color: var(--bs-enel);
}
.text-gradient-blue{
    background: linear-gradient(90deg, var(--bs-coupon) 0%, var(--bs-blue) 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.text-gray{
    color: var(--text-gray);
}
.btn-close.white{
    filter: invert(1);
    opacity: 1;
}
/* contenitore della card "more advantages": riferimento per l'immagine
   decorativa posizionata in absolute, ritagliata agli angoli arrotondati */
.moreAdvantages{
    position: relative;
    overflow: hidden;
}
.bg-gradient-blue{
    background: linear-gradient(90deg, var(--bs-coupon) 0%, var(--bs-blue) 100%);
}
/* /fixOld */

/* ============================================================
   Card Vantaggio -- components/cardVantaggi.twig
   ============================================================ */

.moreAdvantages{
    box-shadow: 0 2px 4px 0 rgba(14, 30, 37, 0.12), 0 2px 16px 0 rgba(14, 30, 37, 0.24);
}

.item-Vantaggio_Card {
    /* raggio delle tacche laterali stile ticket */
    --item-vantaggio-notch: 16px;
    /* proporzione dell'artwork: le grafiche hanno logo partner e
       testi gia' impressi, quindi non devono essere ritagliate */
    --item-vantaggio-hero-ratio: 312 / 163;
    --item-vantaggio-radius: 1.25rem;

    position: relative;
    border: 0;
    color: var(--bs-body-color);
    /* l'ombra segue la sagoma ritagliata (tacche comprese) grazie
       al filtro, che rispetta il canale alpha delle mask sottostanti */
    filter: drop-shadow(0 2px 8px rgba(102, 119, 144, 0.2));
}

/* blocco superiore: mezza tacca sul bordo INFERIORE (sinistra + destra) */
.item-Vantaggio_Card .item-Vantaggio_Top {
    overflow: hidden;
    border-radius: var(--item-vantaggio-radius) var(--item-vantaggio-radius) 0 0;
    -webkit-mask:
        radial-gradient(circle var(--item-vantaggio-notch) at left  100%, #0000 98%, #000 100%) left  / 51% 100% no-repeat,
        radial-gradient(circle var(--item-vantaggio-notch) at right 100%, #0000 98%, #000 100%) right / 51% 100% no-repeat;
    mask:
        radial-gradient(circle var(--item-vantaggio-notch) at left  100%, #0000 98%, #000 100%) left  / 51% 100% no-repeat,
        radial-gradient(circle var(--item-vantaggio-notch) at right 100%, #0000 98%, #000 100%) right / 51% 100% no-repeat;
}

/* blocco inferiore: mezza tacca sul bordo SUPERIORE (sinistra + destra) */
.item-Vantaggio_Card .item-Vantaggio_Bottom {
    overflow: hidden;
    border-radius: 0 0 var(--item-vantaggio-radius) var(--item-vantaggio-radius);
    -webkit-mask:
        radial-gradient(circle var(--item-vantaggio-notch) at left  0, #0000 98%, #000 100%) left  / 51% 100% no-repeat,
        radial-gradient(circle var(--item-vantaggio-notch) at right 0, #0000 98%, #000 100%) right / 51% 100% no-repeat;
    mask:
        radial-gradient(circle var(--item-vantaggio-notch) at left  0, #0000 98%, #000 100%) left  / 51% 100% no-repeat,
        radial-gradient(circle var(--item-vantaggio-notch) at right 0, #0000 98%, #000 100%) right / 51% 100% no-repeat;
}

/* linea tratteggiata al confine tra i due blocchi */
.item-Vantaggio_Card .item-Vantaggio_Bottom::before {
    content: "";
    display: block;
    height: 0;
    margin: 0 var(--item-vantaggio-notch);
    border-top: 1px dashed rgba(203, 218, 246, 1);
    background-color: var(--bs-white);
}

.item-Vantaggio_Card .item-Vantaggio_Hero {
    position: relative;
    padding: 4px;
    border: 0;
    background-color: transparent;
}

.item-Vantaggio_Card .item-Vantaggio_Img {
    display: block;
    aspect-ratio: var(--item-vantaggio-hero-ratio);
    object-fit: cover;
    border-radius: var(--item-vantaggio-radius);
}

.item-Vantaggio_Card .item-Vantaggio_Chip {
    position: absolute;
    top: 1rem;
    right: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 4.5rem;
    padding: .375rem .75rem;
    border-radius: 5rem;
    background-color: var(--bs-white);
    box-shadow: 0 2px 8px rgba(var(--bs-body-color-rgb), .15);
}

.item-Vantaggio_Card .item-Vantaggio_Chip img {
    display: block;
    max-height: 1.25rem;
    width: auto;
}

/* badge "PREMIO SPECIALE" in alto a sinistra sull'artwork */
.item-Vantaggio_Card .item-Vantaggio_Badge {
    position: absolute;
    top: 4px;
    left: 4px;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    padding: .375rem .75rem;
    border-radius: 12px 0;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--bs-premio-badge-color);
    background-color: var(--bs-premio-badge-bg);
    box-shadow: 0 2px 8px rgba(var(--bs-body-color-rgb), .15);
}

.item-Vantaggio_Card .item-Vantaggio_Title {
    font-size: 1.25rem; /* 20px */
    /* due righe massimo, poi ellissi */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.item-Vantaggio_Card .item-Vantaggio_Label {
    font-size: 0.875rem;
    letter-spacing: .05em;
    font-weight: 300;
    color: var(--bs-body-color);
}

.item-Vantaggio_Card .item-Vantaggio_Value {
    background: linear-gradient(90deg, var(--bs-coupon) 0%, var(--bs-blue) 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 2rem;
}

/* variante "premio speciale": valore in gradiente caldo (arancio) */
.item-Vantaggio_Card--ACTIVE_SP .item-Vantaggio_Value {
    background: linear-gradient(90deg, var(--bs-premio-value-from) 0%, var(--bs-premio-value-to) 100%);
    background-clip: text;
    -webkit-background-clip: text;
}


/* stati non azionabili (bloccato / scaduto / utilizzato): valore desaturato */
.item-Vantaggio_Card .item-Vantaggio_Value--grayscale {
    filter: grayscale(1);
}

.item-Vantaggio_Card .item-Vantaggio_Card .card-footer-button {
    padding: 0;
    border: 0;
    background-color: rgba(31, 108, 249, 1);
}

/* base comune a tutte le varianti di colore della CTA */
.item-Vantaggio_Card .btn-vantaggio,
.item-Vantaggio_Card .btn-vantaggio-ASSIGNED{
    --bs-btn-color: var(--bs-white)!important;
    --bs-btn-hover-color: var(--bs-white);
    --bs-btn-active-color: var(--bs-white);
    --bs-btn-disabled-color: var(--bs-white);
    --bs-btn-disabled-bg: var(--bs-secondary);
    --bs-btn-disabled-border-color: var(--bs-secondary);
    --bs-btn-border-radius: 0;
    --bs-btn-padding-y: .75rem;
    opacity: 1!important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    font-size: 0.875rem;
    font-weight: 300!important;
    /* la CTA e' solo presentazionale: la navigazione e' sull'<a> della card.
       Senza pointer-events il cursore/hover derivano dal contenitore:
       pointer se la card e' un link, default se non lo e'. */
    pointer-events: none;
    cursor: default;
}

/* variante di default (status "active") */
.item-Vantaggio_Card .btn-vantaggio {
    --bs-btn-bg: var(--bs-coupon);
    --bs-btn-border-color: var(--bs-coupon);
    --bs-btn-hover-bg: #003BAD;
    --bs-btn-hover-border-color: #003BAD;
    --bs-btn-active-bg: #003399;
    --bs-btn-active-border-color: #003399;
}

.item-Vantaggio_Card .item-Vantaggio_CtaIcon {
    display: block;
    height: 1.25rem;
    width: auto;
}

/* status "da_utilizzare": CTA attiva, verde piena */
.item-Vantaggio_Card .btn-vantaggio-ASSIGNED {
    --bs-btn-bg: var(--bs-vantaggio-verde);
    --bs-btn-border-color: var(--bs-vantaggio-verde);
    --bs-btn-hover-bg: var(--bs-vantaggio-verde-shade-10);
    --bs-btn-hover-border-color: var(--bs-vantaggio-verde-shade-10);
    --bs-btn-active-bg: var(--bs-vantaggio-verde-shade-20);
    --bs-btn-active-border-color: var(--bs-vantaggio-verde-shade-20);
    opacity: 1!important;
}

/* status "premio": CTA azionabile, oro pieno con testo scuro */
.item-Vantaggio_Card .btn-vantaggio-ACTIVE_SP {
    --bs-btn-color: var(--bs-premio-cta-color)!important;
    --bs-btn-hover-color: var(--bs-premio-cta-color);
    --bs-btn-active-color: var(--bs-premio-cta-color);
    --bs-btn-bg: var(--bs-premio-cta-bg);
    --bs-btn-border-color: var(--bs-premio-cta-bg);
    --bs-btn-hover-bg: var(--bs-premio-cta-shade-10);
    --bs-btn-hover-border-color: var(--bs-premio-cta-shade-10);
    --bs-btn-active-bg: var(--bs-premio-cta-shade-20);
    --bs-btn-active-border-color: var(--bs-premio-cta-shade-20);
    opacity: 1!important;
}
.item-Vantaggio_Card.redStyle .btn-vantaggio {
    --bs-btn-bg: var(--bs-enel);
    --bs-btn-border-color: var(--bs-enel);
    --bs-btn-hover-bg: var(--bs-enel);
    --bs-btn-hover-border-color: var(--bs-enel);
    --bs-btn-active-bg: var(--bs-enel);
    --bs-btn-active-border-color: var(--bs-enel);
    color: var(--bs-white)!important;
}
.item-Vantaggio_Card.redStyle .btn-vantaggio .item-Vantaggio_CtaIcon {
    filter: invert(1);
}

/* Stati non attivi ------------------------------------------------------
   Il bottone e' disabilitato, quindi Bootstrap legge le variabili
   --bs-btn-disabled-* e applica opacity .65: la si riporta a 1
   altrimenti i colori risultano slavati. */
.item-Vantaggio_Card .btn-vantaggio-USED,
.item-Vantaggio_Card .btn-vantaggio-GIFTED,
.item-Vantaggio_Card .btn-vantaggio-EXPIRED,
.item-Vantaggio_Card .btn-vantaggio-LOCKED {
    --bs-btn-disabled-opacity: 1!important;
}

.item-Vantaggio_Card .btn-vantaggio-USED,
.item-Vantaggio_Card .btn-vantaggio-GIFTED {
    --bs-btn-bg: var(--bs-vantaggio-utilizzato-bg);
    --bs-btn-border-color: var(--bs-vantaggio-utilizzato-bg);
    --bs-btn-disabled-bg: var(--bs-vantaggio-utilizzato-bg)!important;
    --bs-btn-disabled-border-color: var(--bs-vantaggio-utilizzato-bg)!important;
    --bs-btn-disabled-color: var(--bs-vantaggio-utilizzato-color)!important;
    --bs-btn-hover-bg: var(--bs-vantaggio-utilizzato-bg)!important;
    --bs-btn-hover-border-color: var(--bs-vantaggio-utilizzato-bg)!important;
    --bs-btn-active-bg: var(--bs-vantaggio-utilizzato-bg)!important;
    --bs-btn-active-border-color: var(--bs-vantaggio-utilizzato-bg)!important;
    color: var(--bs-dark)!important;
}

.item-Vantaggio_Card .btn-vantaggio-EXPIRED {
    --bs-btn-bg: var(--bs-vantaggio-scaduto-bg);
    --bs-btn-border-color: var(--bs-vantaggio-scaduto-bg);
    --bs-btn-disabled-bg: var(--bs-vantaggio-scaduto-bg)!important;
    --bs-btn-disabled-border-color: var(--bs-vantaggio-scaduto-bg)!important;
    --bs-btn-disabled-color: var(--bs-vantaggio-scaduto-color)!important;
    color: var(--bs-dark)!important;
}

.item-Vantaggio_Card .btn-vantaggio-LOCKED {
    --bs-btn-bg: var(--bs-vantaggio-scaduto-bg);
    --bs-btn-border-color: var(--bs-vantaggio-scaduto-bg);
    --bs-btn-disabled-bg: var(--bs-vantaggio-scaduto-bg)!important;
    --bs-btn-disabled-border-color: var(--bs-vantaggio-scaduto-bg)!important;
    --bs-btn-disabled-color: var(--bs-vantaggio-scaduto-color)!important;
    color: var(--bs-dark)!important;
}

/* immagine desaturata quando il vantaggio non e' piu' azionabile */
.item-Vantaggio_Card--inattivo .item-Vantaggio_Img {
    filter: grayscale(1);
}
.item-Vantaggio_Hero {
    box-shadow: 0 -4px 8px -4px rgba(102, 119, 144, 0.2);
}

/* ============================================================
   Sticky Button Full -- block-sticky-button-full.twig
   ============================================================ */

.block-Sticky-Button {
    z-index: 1020;
    box-shadow: 0 -4px 8px -4px rgba(102, 119, 144, 0.2);
}

/* ============================================================
   Counter Vantaggi -- block-counter-vantaggi (homepage)
   ============================================================ */

.radial-bg-red-border-white {
    border-radius: 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.50);
    background:
            linear-gradient(0deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0.02) 100.37%),
            linear-gradient(180deg, rgba(211, 19, 90, 0.00) 0%, rgba(211, 19, 90, 0.50) 23.67%);
    -webkit-backdrop-filter: blur(2.9px);
    backdrop-filter: blur(2.9px);
}

.counter-Vantaggi_Icon {
    border-radius: 1rem;
    color: var(--bs-white);
    padding: 0.5rem;
    background: rgba(181, 17, 86, 0.40);
}

.counter-Vantaggi_Level {
    font-size: 0.875rem;
    letter-spacing: 2px;
    font-weight: 300;
}

.counter-Vantaggi_Count {
    font-size: 20px;
    line-height: 34px;
}
.counter-Vantaggi_Count span{
    font-size: 32px;
    line-height: 1.2;
}

.counter-Vantaggi_Deadline {
    font-size: 0.875rem;
}

/* variante inline (wallet): tutto su una riga, icona decorativa a destra */
.counter-Vantaggi--inline .counter-Vantaggi_Level {
    font-size: 0.875rem;
}
.counter-Vantaggi--inline .counter-Vantaggi_Count,
.counter-Vantaggi--inline .counter-Vantaggi_Count span {
    font-size: 1.5rem;
}
.counter-Vantaggi--inline .counter-Vantaggi_Deco {
    right: -0.5rem;
    width: 66px;
    height: 66px;
    opacity: 0.8;
    pointer-events: none;
}

/* ============================================================
   TabLink -- tabLink.twig
   ============================================================ */

.tabLink{
    box-shadow: 0 2px 8px 0 rgba(102, 119, 144, 0.2);
}
.tabLink .tab{
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    font-size: 1rem;
}
   .tabLink .tab.active{
       background-color: var(--btn-primary-bg);
       font-size: 1rem;
       font-weight: 700;
       color: var(--bs-white)!important;
   }

/* ============================================================
   Copy to clipboard -- pulsanti/link con attributo [data-copy]
   (handler in js/sources/project/commons/_general.js)
   ============================================================ */
[data-copy],
[data-js-action="copyAndPasteText"] {
    position: relative;
}
[data-copy]::after,
[data-js-action="copyAndPasteText"]::after {
    content: "Copiato!";
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    background-color: #1f2530;
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 400;
    white-space: nowrap;
    padding: 4px 8px;
    border-radius: 6px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease, transform 0.15s ease;
}
[data-copy].is-copied::after,
[data-js-action="copyAndPasteText"].is-copied::after {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* ============================================================
   Examples playground -- components/examples.twig
   ============================================================ */
.example-Card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    height: 100%;
}

.example-Preview {
    display: flex;
    /* Occupa lo spazio rimanente e centra il componente verticalmente,
       cosi' il blocco codice resta ancorato in fondo alla card. */
    flex: 1 1 auto;
    align-items: center;
    justify-content: center;
}

.example-Code {
    /* Ancorato in fondo: non si allunga ne' si comprime. */
    flex: 0 0 auto;
    margin-top: auto;
    background-color: #1f2530;
    color: #e7ebf3;
    border-radius: 12px;
    padding: 14px 16px;
    font-size: 0.8125rem;
}

.example-Code_Head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}

.example-Code.is-collapsed .example-Code_Head {
    margin-bottom: 0;
}

.example-Code_Toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    padding: 0;
    text-align: left;
}

.example-Code_Chevron {
    display: inline-block;
    flex-shrink: 0;
    font-size: 0.75rem;
    color: #aeb7c6;
    transition: transform 0.15s ease;
}
.example-Code_Toggle[aria-expanded="true"] .example-Code_Chevron {
    transform: rotate(90deg);
}

.example-Code_Title {
    font-weight: 700;
    font-size: 0.9375rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.example-Code_Body {
    overflow: hidden;
}
.example-Code.is-collapsed .example-Code_Body {
    display: none;
}

.example-Code_Actions {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.example-Code_ColSelect {
    background: rgba(255, 255, 255, 0.08);
    color: #e7ebf3;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 6px;
    font-size: 0.75rem;
    line-height: 1;
    padding: 3px 6px;
    cursor: pointer;
}
.example-Code_ColSelect:disabled {
    opacity: 0.5;
    cursor: default;
}
.example-Code_ColSelect option {
    color: #1f2530;
}

.example-Code_IconBtn {
    border: 0;
    background: transparent;
    color: #aeb7c6;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    padding: 4px;
    border-radius: 6px;
}
.example-Code_IconBtn:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.08);
}

.example-Code_View {
    margin: 0;
    white-space: pre-wrap;
    word-break: break-word;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    color: #cdd6e6;
}
.example-Code_View code {
    color: inherit;
    background: transparent;
    font-family: inherit;
}

.example-Code_Error {
    margin: 0 0 8px;
    color: #ffb4b4;
    font-size: 0.75rem;
}

.example-Code_Textarea {
    width: 100%;
    min-height: 220px;
    resize: vertical;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 8px;
    background: #11151d;
    color: #e7ebf3;
    padding: 10px 12px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.8125rem;
    line-height: 1.4;
}

.example-Code_EditActions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.example-Btn {
    border: 0;
    border-radius: 8px;
    padding: 6px 14px;
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    background: #ffffff;
    color: #12321e;
}
.example-Btn--ghost {
    background: transparent;
    color: #aeb7c6;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.example-Code_Msg {
    margin: 10px 0 0;
    font-size: 0.75rem;
    color: #9fe0b4;
}
.example-Code_Msg.is-error {
    color: #ffb4b4;
}

/* Modale custom "Inserisci componente" -- examples.twig */
.example-Modal {
    position: fixed;
    inset: 0;
    z-index: 1080;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.example-Modal[hidden] {
    display: none;
}
.example-Modal_Backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
}
.example-Modal_Panel {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 720px;
    max-height: 90vh;
    background: #ffffff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}
.example-Modal_Head,
.example-Modal_Foot {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    flex-shrink: 0;
}
.example-Modal_Head {
    justify-content: space-between;
    border-bottom: 1px solid #e5e7eb;
}
.example-Modal_Foot {
    justify-content: flex-end;
    border-top: 1px solid #e5e7eb;
}
.example-Modal_Body {
    padding: 20px;
    overflow: auto;
}
.example-Modal_Close {
    border: 0;
    background: transparent;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    color: #6b7280;
}
.example-Modal_Close:hover {
    color: #111827;
}

.example-DragHandle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 4px;
    border-radius: 6px;
    font-size: 0.6875rem;
    letter-spacing: 0.04em;
    color: #9aa3b2;
    background: #f1f3f6;
    cursor: grab;
    user-select: none;
    touch-action: none;
}
.example-DragHandle:hover {
    color: #444;
    background: #e5e8ee;
}
.example-Col.is-dragging {
    opacity: 0.35;
}

.example-Toast {
    position: fixed;
    bottom: 24px;
    right: 24px;
    background: #1f2530;
    color: #ffffff;
    padding: 10px 16px;
    border-radius: 8px;
    font-size: 0.875rem;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.15s ease, transform 0.15s ease;
    pointer-events: none;
    z-index: 2000;
}
.example-Toast.is-visible {
    opacity: 1;
    transform: translateY(0);
}
.example-Toast.is-error {
    background: #7a1f1f;
}

/* ===== Splide Coupons - paginatore ===== */
#splide-Coupons .splide__pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0;
    margin: 0;
    bottom: 0;
}

#splide-Coupons .splide__pagination__page {
    width: 4px;
    height: 4px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.5);
    opacity: 1;
    transform: none;
    transition: width 0.25s ease, background-color 0.25s ease;
}

#splide-Coupons .splide__pagination__page.is-active {
    width: 32px;
    background: #ffffff;
    transform: none;
}
#footer {
    --bs-footer-bg: var(--bs-bg-gray);
    background-color: var(--bs-bg-gray)!important;
}