/**
 * MC-Manager — Promo: strumenti promozionali front-end
 *
 * Stile di barra e popup sul sito pubblico. Questo stesso foglio viene
 * accodato anche nella pagina admin del pannello strumenti: l'anteprima usa
 * il markup e lo stile veri, non una riproduzione. È l'unico modo perché
 * "in anteprima sembrava diverso" non possa succedere.
 *
 * COMBINAZIONI DI COLORI:
 * ogni palette definisce due sole variabili, --mc-promo-bg e --mc-promo-fg.
 * Tutto il resto del foglio le usa senza sapere quale palette sia attiva, così
 * aggiungerne una nuova significa aggiungere tre righe qui e una voce nella
 * select, senza toccare nient'altro.
 *
 * La palette "custom" non definisce niente: i suoi due valori arrivano da
 * wp_add_inline_style() al momento del rendering.
 */

/* --------------------------------------------------------------------------
 * Combinazioni di colori
 * -------------------------------------------------------------------------- */

.mc-promo-palette-dark {
    --mc-promo-bg: #111111;
    --mc-promo-fg: #ffffff;
}

.mc-promo-palette-racing {
    --mc-promo-bg: #b00016;
    --mc-promo-fg: #ffffff;
}

.mc-promo-palette-light {
    --mc-promo-bg: #f4f4f5;
    --mc-promo-fg: #16161a;
}

.mc-promo-palette-contrast {
    --mc-promo-bg: #ffe000;
    --mc-promo-fg: #111111;
}

/* --------------------------------------------------------------------------
 * Barra
 * -------------------------------------------------------------------------- */

/* position: relative anche in modalità "in cima": serve come riferimento
   all'area cliccabile estesa e al pulsante di chiusura. */
.mc-promo-bar {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 10px 48px;
    background-color: var(--mc-promo-bg, #111);
    color: var(--mc-promo-fg, #fff);
    background-size: cover;
    background-position: center;
    font-size: 15px;
    line-height: 1.35;
    text-align: center;
}

/* --------------------------------------------------------------------------
 * LIVELLI DI SOVRAPPOSIZIONE
 *
 * I valori sono scelti sulla scala del tema, non a caso:
 *
 *   100   sottomenu di navigazione
 *   900   barra filtri agganciata (pagine negozio)
 *   950   ← barra promo
 *   1000  intestazione del sito  ← CONTESTO DI IMPILAMENTO
 *   2000  velo dei pannelli laterali
 *   2001  pannello laterale (mini-carrello)
 *   2500  ← popup promo
 *
 * PERCHÉ LA BARRA STA SOTTO 1000, che a prima vista sembra troppo basso:
 * il menu mobile è stampato DENTRO l'elemento <header> del tema, che essendo
 * posizionato con z-index crea un contesto di impilamento. Tutto ciò che sta
 * dentro resta confinato a quel livello, qualunque z-index dichiari: il drawer
 * del menu vale 2001 al suo interno, ma 1000 rispetto al resto della pagina.
 * Una barra a 1500 gli passava sopra, e alzare il numero del drawer non
 * avrebbe cambiato niente. Il mini-carrello invece è stampato fuori
 * dall'header, e infatti il suo 2001 vale davvero.
 *
 * Stare sotto 1000 non costa nulla: la barra vive in fondo allo schermo e
 * l'intestazione in cima, non si sovrappongono mai. Continua comunque a stare
 * sopra tutto il contenuto normale della pagina, che non ha z-index.
 *
 * Il popup sta SOPRA tutto, perché è una finestra modale con il focus
 * catturato: lasciarlo sotto un pannello significherebbe intrappolare la
 * tastiera dentro qualcosa di mezzo coperto.
 *
 * Dipendono da valori del tema, quindi se un giorno la scala del tema cambia
 * vanno riviste. È un accoppiamento numerico e dichiarato, non nascosto.
 * -------------------------------------------------------------------------- */

/* Fissa in fondo allo schermo.
 *
 * In fondo alla pagina non c'è nient'altro di fisso, quindi non serve nessun
 * accordo con il tema sul posizionamento — al contrario di quanto servirebbe in
 * cima, dove il tema ha già intestazione sticky e barra filtri agganciata.
 *
 * Lo spazio in fondo al body, perché la barra non copra le ultime righe della
 * pagina, lo aggiunge il JS: solo a quel punto si conosce l'altezza reale della
 * barra, che dipende da quanto va a capo il testo. */
.mc-promo-bar-bottom {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 950;
    box-shadow: 0 -2px 12px rgba(0, 0, 0, .18);
}

.mc-promo-bar-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px 16px;
    max-width: 1100px;
}

.mc-promo-bar-text {
    margin: 0;
    font-weight: 600;
}

/* Il pulsante prende i colori invertiti rispetto alla barra: sempre leggibile,
   qualunque sia la combinazione scelta, senza doverne definire un terzo. */
.mc-promo-bar-cta {
    display: inline-block;
    padding: 6px 16px;
    border-radius: 999px;
    background: var(--mc-promo-fg, #fff);
    color: var(--mc-promo-bg, #111);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.mc-promo-bar-cta:hover,
.mc-promo-bar-cta:focus {
    opacity: .88;
    color: var(--mc-promo-bg, #111);
}

/* Tutta la barra è cliccabile.
 *
 * Non con un gestore JS su un contenitore, ma estendendo l'area del link vero
 * fino ai bordi della barra: resta un <a> a tutti gli effetti, quindi funziona
 * da tastiera, viene annunciato dagli screen reader, si apre in una scheda
 * nuova col clic centrale e mostra la destinazione nella barra di stato.
 * Un div reso cliccabile dal JS non fa niente di tutto questo. */
.mc-promo-bar.has-cta {
    cursor: pointer;
}

.mc-promo-bar.has-cta .mc-promo-bar-cta::after {
    content: "";
    position: absolute;
    inset: 0;
}


/* z-index: sopra l'area cliccabile estesa del pulsante promozionale,
   altrimenti chiudere la barra porterebbe alla pagina della promozione. */
.mc-promo-bar-close {
    position: absolute;
    top: 50%;
    right: 8px;
    z-index: 1;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: inherit;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    opacity: .7;
}

.mc-promo-bar-close:hover,
.mc-promo-bar-close:focus {
    opacity: 1;
    background: rgba(127, 127, 127, .25);
}

/* --------------------------------------------------------------------------
 * Countdown
 * -------------------------------------------------------------------------- */

.mc-promo-countdown {
    margin: 0;
    padding: 3px 10px;
    border: 1px solid currentColor;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* --------------------------------------------------------------------------
 * Popup
 * -------------------------------------------------------------------------- */

.mc-promo-popup-overlay {
    position: fixed;
    inset: 0;
    /* Sopra i pannelli laterali del tema (2001): vedi la nota sui livelli. */
    z-index: 2500;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(0, 0, 0, .6);
}

.mc-promo-popup-overlay[hidden] {
    display: none;
}

.mc-promo-popup {
    position: relative;
    width: 100%;
    max-width: 440px;
    max-height: 90vh;
    overflow-y: auto;
    border-radius: 10px;
    background: var(--mc-promo-bg, #fff);
    color: var(--mc-promo-fg, #111);
    box-shadow: 0 18px 50px rgba(0, 0, 0, .35);
    animation: mc-promo-pop .22s ease-out;
}

@keyframes mc-promo-pop {
    from { opacity: 0; transform: translateY(12px) scale(.98); }
    to   { opacity: 1; transform: none; }
}

/* Chi ha chiesto meno animazioni non deve vedersele comparire addosso. */
@media (prefers-reduced-motion: reduce) {
    .mc-promo-popup {
        animation: none;
    }
}

.mc-promo-popup-media {
    line-height: 0;
}

.mc-promo-popup-image {
    width: 100%;
    height: auto;
    border-radius: 10px 10px 0 0;
}

.mc-promo-popup-body {
    padding: 24px;
    text-align: center;
}

.mc-promo-popup-title {
    margin: 0 0 10px;
    font-size: 24px;
    line-height: 1.2;
    color: inherit;
}

.mc-promo-popup-text {
    margin: 0 0 16px;
    font-size: 15px;
    line-height: 1.5;
}

.mc-promo-popup .mc-promo-countdown {
    display: inline-block;
    margin-bottom: 16px;
}

.mc-promo-popup-cta {
    display: inline-block;
    padding: 12px 28px;
    border-radius: 999px;
    background: var(--mc-promo-fg, #111);
    color: var(--mc-promo-bg, #fff);
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
}

.mc-promo-popup-cta:hover,
.mc-promo-popup-cta:focus {
    opacity: .88;
    color: var(--mc-promo-bg, #fff);
}

.mc-promo-popup-close {
    position: absolute;
    top: 8px;
    right: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, .85);
    color: #111;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
}

.mc-promo-popup-close:hover,
.mc-promo-popup-close:focus {
    background: #fff;
}

/* --------------------------------------------------------------------------
 * Schermi stretti
 * -------------------------------------------------------------------------- */

@media (max-width: 600px) {
    .mc-promo-bar {
        padding: 10px 40px;
        font-size: 14px;
    }

    .mc-promo-bar-inner {
        gap: 6px 10px;
    }

    .mc-promo-popup-body {
        padding: 20px 18px;
    }

    .mc-promo-popup-title {
        font-size: 20px;
    }
}