/* ===========================================================================
   POPUP DI USCITA — vestito col Flashmac Design System, senza smettere di
   funzionare col tema vecchio.

   Questo foglio gira in DUE contesti: su flashmac.com col tema Flatsome, dove
   i token del design system NON esistono, e sul tema a blocchi, dove esistono
   e cambiano col tema chiaro/scuro.

   Percio' ogni colore e' scritto `var(--token, <il valore di prima>)`, col
   ripiego DENTRO la var() e mai come dichiarazione precedente. Il motivo sta
   nella Regola 1.11 del tema: una `var()` senza ripiego non "cade" al valore
   di prima — rende la dichiarazione invalida al momento del calcolo e la
   proprieta' prende `unset`, che per un `background-color` vuol dire
   TRASPARENTE. E' cosi' che il pannello del modale FPS e' diventato
   trasparente in produzione. Qui la stessa regola e' usata al contrario, come
   garanzia: dove i token non ci sono, resta esattamente il valore di prima.

   Il tema scuro non ha quasi regole proprie: l'overlay e' figlio di <body>,
   quindi eredita `.theme-dark` e i token semantici si ribaltano da soli.
   Niente `prefers-color-scheme` — il tema lo decide il server, non il sistema
   operativo. Col tema vecchio quella classe non esiste e le poche regole
   `.theme-dark` non si applicano mai.
   =========================================================================== */

.fmac-overlay {
    position: fixed;
    inset: 0;
    background: var(--glass-scrim, rgba(0, 0, 0, .55));
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    backdrop-filter: blur(2px);
    overflow-y: auto;
}

.fmac-modal {
    background: var(--surface-card, #fff);
    border-radius: 14px;
    max-width: 560px;
    width: 100%;
    position: relative;
    transform: translateY(24px);
    opacity: 0;
    transition: transform .32s cubic-bezier(.34,1.56,.64,1), opacity .25s ease;
    box-shadow: var(--shadow-xl, 0 24px 64px rgba(0, 0, 0, .22));
    overflow: hidden;
    max-height: 95vh;
    overflow-y: auto;
    /* su schermi alti la margin auto la centra verticalmente */
    margin: auto;
}

@media (max-height: 700px) {
    .fmac-overlay { align-items: flex-start; padding: 10px 16px; }
    .fmac-modal   { max-height: none; margin: 0 auto; }
}

.fmac-modal-body {
    padding: 36px 36px 28px;
}

.fmac-close {
    position: absolute;
    top: 14px;
    right: 16px;
    background: none;
    border: none;
    font-size: 22px;
    line-height: 1;
/* `--text-muted` non regge i 4,5:1 e per il §6 vale solo sul testo
   decorativo. La «x» e «Continua senza rispondere» sono CONTROLLI, non
   decorazione: vanno su `--text-secondary`, che e' AA in tutti e due i temi.
   Col tema vecchio il ripiego tiene il #aaa di oggi. */
    color: var(--text-secondary, #aaa);
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    transition: color .15s, background .15s;
}
.fmac-close:hover { color: var(--text-body, #333); background: var(--surface-sunken, #f5f5f5); }

.fmac-emoji {
    font-size: 44px;
    text-align: center;
    margin-bottom: 12px;
    line-height: 1;
}

.fmac-title {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: var(--text-strong, #1a1a1a) !important;
    text-align: center;
    margin: 0 0 8px !important;
    line-height: 1.3 !important;
}

.fmac-subtitle {
    font-size: 14px !important;
    color: var(--text-secondary, #666) !important;
    text-align: center;
    margin: 0 0 24px !important;
    line-height: 1.5 !important;
}

/* Griglia motivi */
.fmac-reasons {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 20px;
    border-radius: 6px;
    transition: outline .2s;
}

.fmac-reason-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 14px 8px;
    border: 2px solid var(--border-subtle, #e8e8e8);
    border-radius: 10px;
    background: var(--surface-sunken, #fafafa);
    cursor: pointer;
    transition: border-color .18s, background .18s, transform .12s;
    text-align: center;
    font-family: inherit;
}
.fmac-reason-btn:hover {
    border-color: var(--border-strong, #c0c0c0);
    background: var(--surface-raised, #f0f0f0);
    transform: translateY(-1px);
}
.fmac-reason-btn.selected {
    border-color: var(--accent, #e2401c);
    background: var(--accent-soft, #fff5f3);
}

.fmac-reason-icon { font-size: 24px; line-height: 1; }
.fmac-reason-label { font-size: 12px; font-weight: 600; color: var(--text-body, #444); line-height: 1.3; }

/* Banner incentivo coupon */
.fmac-coupon-banner {
    display: flex;
    align-items: center;
    gap: 12px;
/* Banda PIATTA, non gradiente. Sul gradiente di prima lo sconto misurava
   5,39:1 sullo stop chiaro e 4,25:1 su quello scuro: passava a sinistra e
   non passava a destra, cioe' meta' componente era conforme. Con
   `--orange-50` il fondo e' uno solo e lo sconto sta a 5,39:1 dappertutto.
   Resta arancione e non rosa: il riquadro e' un premio, non un avviso.
   Il ripiego e' il gradiente di prima, quindi col tema vecchio non cambia
   niente — per questo la var() avvolge TUTTO il valore e non i due stop. */
    background: var(--orange-50, linear-gradient(135deg, #FFF3EC 0%, #FFE6D6 100%));
    border: 1.5px dashed var(--flash-orange, #F5956F);
    border-radius: 10px;
    padding: 12px 16px;
    margin-bottom: 14px;
}
.fmac-coupon-icon { font-size: 28px; line-height: 1; flex-shrink: 0; }
.fmac-coupon-text {
    font-size: 14px;
    color: var(--text-body, #5a3a2a);
    line-height: 1.35;
    text-align: left;
}
.fmac-coupon-text strong {
    color: var(--accent-text, #E2401C);
    font-weight: 800;
    font-size: 16px;
}
.fmac-coupon-validity {
    display: inline-block;
    margin-left: 6px;
/* CORREZIONE 4 — la pillola della validita'. Bianco su --flash-orange misura
   2,23:1, a 11px peso 700: e' la stessa cosa del pulsante qui sotto, quarta
   occorrenza dello stesso difetto. Stessa medicina: il fondo arancio non si
   tocca, cambia l'etichetta, che arriva a 8,75:1. Col tema vecchio il
   ripiego tiene il bianco di oggi. */
    background: var(--flash-orange, #F5956F);
    color: var(--ink-950, #fff);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
    padding: 2px 8px;
    border-radius: 20px;
    white-space: nowrap;
}

/* Campo email */
.fmac-email-wrap { margin-bottom: 14px; }
.fmac-email-wrap label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-body, #444);
    margin-bottom: 6px;
}
/* CORREZIONE 2 — il testo del consenso. Questo selettore (0,1,2) colpisce lo
   <span> che avvolge TUTTO il testo del consenso, non un'etichetta breve:
   arancio su bianco misura 2,15:1. Va a inchiostro normale; in rosa resta
   solo il collegamento, qui sotto. Col tema vecchio il ripiego tiene
   l'arancio di oggi. */
.fmac-email-wrap label span { color: var(--text-body, #F5956F); font-weight: 600; }
.fmac-email-input {
    width: 100%;
    box-sizing: border-box;
    border: 1.5px solid var(--border-default, #ddd);
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 14px;
    font-family: inherit;
    /* Il fondo non era dichiarato: il campo prendeva il bianco del browser, e
       su pannello scuro restava un rettangolo chiaro. Col ripiego a #fff il
       risultato col tema vecchio e' identico a prima. */
    background: var(--surface-card, #fff);
    color: var(--text-body, #333);
    transition: border-color .18s;
}
.fmac-email-input:focus { border-color: var(--accent, #F5956F); outline: none; }

/* Consenso privacy */
.fmac-email-wrap label.fmac-privacy {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 8px 0 0;
    padding: 4px 2px;
    font-size: 12px;
    font-weight: 400;
    color: var(--text-secondary, #777);
    cursor: pointer;
    line-height: 1.45;
}
.fmac-privacy-check {
    width: 16px;
    height: 16px;
    margin: 1px 0 0;
    flex-shrink: 0;
    accent-color: var(--accent, #F5956F);
    cursor: pointer;
}
/* Il collegamento e' l'unica cosa che resta colorata. `--link` e' il token
   che il design system tiene apposta per i link nel testo corrente:
   --pink-650, 5,9:1 su bianco, e in scuro diventa --pink-400 da solo. */
.fmac-email-wrap label.fmac-privacy a { color: var(--link, #F5956F); text-decoration: underline; }

/* Campo commento */
.fmac-comment-wrap { margin-bottom: 20px; }
.fmac-comment-wrap label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-body, #444);
    margin-bottom: 6px;
}
.fmac-comment-wrap label span { color: var(--text-muted, #999); font-weight: 400; }

.fmac-comment {
    width: 100%;
    box-sizing: border-box;
    border: 1.5px solid var(--border-default, #ddd);
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 14px;
    font-family: inherit;
    resize: vertical;
    transition: border-color .18s;
    background: var(--surface-card, #fff);
    color: var(--text-body, #333);
}
.fmac-comment:focus { border-color: var(--accent, #e2401c); outline: none; }

/* Bottoni azione */
/* CORREZIONE 1 — "Invia feedback". Bianco su --flash-orange misura 2,15:1.
   Stessa soluzione gia' approvata per il CTA di testata (chrome.css): il fondo
   arancio non si tocca, cambia l'etichetta, che su questo arancio arriva a
   8,75:1. Col tema vecchio il ripiego tiene il bianco di oggi. */
.fmac-actions {
    display: flex;
    gap: 10px;
    flex-direction: column;
}

.fmac-submit {
    background: var(--flash-orange, #F5956F);
    color: var(--ink-950, #fff);
    border: none;
    border-radius: 8px;
    padding: 13px 20px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    transition: background .18s, transform .12s;
}
.fmac-submit:hover { background: var(--orange-600, #e07a52); transform: translateY(-1px); }

.fmac-skip {
    background: none;
    border: none;
    color: var(--text-secondary, #aaa);
    font-size: 13px;
    cursor: pointer;
    font-family: inherit;
    text-decoration: underline;
    padding: 4px;
    transition: color .15s;
}
.fmac-skip:hover { color: var(--text-body, #666); }

/* Stato successo */
.fmac-success {
    text-align: center;
    padding: 48px 36px;
}
.fmac-success-icon { font-size: 52px; margin-bottom: 16px; }
.fmac-success h3 {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: var(--text-strong, #1a1a1a) !important;
    margin: 0 0 8px !important;
}
.fmac-success p {
    font-size: 14px !important;
    color: var(--text-secondary, #888) !important;
    margin: 0 !important;
}

/* Mobile */
@media (max-width: 480px) {
    .fmac-modal-body { padding: 28px 20px 20px; }
    .fmac-reasons { grid-template-columns: repeat(2, 1fr); }
    .fmac-title { font-size: 18px !important; }
}


/* --- Tema scuro ------------------------------------------------------------
   Una regola sola. Tutto il resto si ribalta da solo, perche' i colori qui
   sopra vengono dai token semantici e sono quelli a cambiare con
   `.theme-dark` sul <body>. Col tema vecchio questa classe non esiste e
   questo blocco non si applica mai.

   Il banner del coupon e' l'eccezione: le due tinte arancio chiare
   (--orange-50 / --orange-200) sono tinte di superficie chiara e sul pannello
   scuro diventerebbero una fascia quasi bianca. Si tiene l'arancio, ma come
   velo: stessa costruzione che i token usano per --accent-soft in scuro. */
.theme-dark .fmac-coupon-banner {
    background: color-mix(in srgb, var(--flash-orange) 16%, transparent);
}