/* =====================================================================
   elm-consenso-cookie.css
   Banner cookie, finestra preferenze e riquadri dei contenuti esterni.
   Markup: App_UserControls/ConsensoCookie.ascx. Logica:
   App_Script/elm-consenso-cookie.js.

   Usa i token di guidelines.css (--ink, --gold, --cta-gold, --r-card,
   --font-display...). Ogni var() ha il valore di riserva perche' la
   landing (MasterPage-Landing) non carica guidelines.css.
   I bottoni hanno le classi del sito "cta cta--gold": qui sotto
   .elm-cc-btn ripete lo stesso aspetto, cosi' sono identici anche
   sulla landing, dove .cta non esiste.
   NB: mai la sequenza slash-star dentro un commento CSS.
   ===================================================================== */

.elm-cc[hidden], .elm-cc-dlg[hidden] { display: none !important; }

/* Livelli: sopra il logo dell'header mobile (elm-mobile-nav.css, z-index 99999,
   congelato) e sopra le barre fisse in basso delle schede. */

/* ---------- BOTTONI ---------- */
.elm-cc-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .5em;
    min-height: 44px; padding: 11px 22px;
    font-family: var(--font-body, 'Jost', system-ui, sans-serif); font-weight: 500; font-size: 15px; line-height: 1.1;
    background: var(--cta-gold, #8a6a38); color: var(--cta-gold-ink, #fff);
    border: 1.5px solid var(--cta-gold, #8a6a38); border-radius: var(--r-btn, 8px);
    cursor: pointer; text-decoration: none; white-space: nowrap;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.elm-cc-btn:hover, .elm-cc-btn:focus-visible { background: #fff; color: var(--cta-gold, #8a6a38); }
.elm-cc-btn:active { transform: translateY(1px); }
.elm-cc-btn:focus-visible, .elm-cc-link:focus-visible, .elm-cc-x:focus-visible, .elm-cc-sw input:focus-visible + .elm-cc-sw-ui {
    outline: 2px solid var(--gold-dk, #8c6d3c); outline-offset: 3px;
}

/* bottone secondario: testo sottolineato, area di tocco 44px */
.elm-cc-link {
    display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px;
    background: none; border: 0; cursor: pointer;
    font-family: var(--font-body, 'Jost', system-ui, sans-serif); font-size: 15px; font-weight: 500;
    color: var(--ink, #18140f); text-decoration: underline; text-underline-offset: 3px;
    text-decoration-color: var(--gold, #c9a96b);
}
.elm-cc-link:hover { color: var(--gold-dk, #8c6d3c); }

/* ---------- BANNER (in basso, non blocca la pagina) ---------- */
.elm-cc {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 100000;
    padding: 0 16px 16px; pointer-events: none;
}
.elm-cc-bar {
    pointer-events: auto; position: relative;
    max-width: 1180px; margin: 0 auto;
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px 32px; align-items: center;
    background: #fff; color: var(--ink, #18140f);
    border: 1px solid var(--line, #e6dfd0); border-radius: var(--r-card, 12px);
    box-shadow: 0 18px 48px -12px rgba(24, 20, 15, .28);
    padding: 22px 56px 22px 26px;
    font-family: var(--font-body, 'Jost', system-ui, sans-serif);
    animation: elmCcSu .35s cubic-bezier(.16, 1, .3, 1);
}
.elm-cc-tit {
    font-family: var(--font-display, 'Lora', Georgia, serif); font-size: 1.15rem; font-weight: 600;
    line-height: 1.3; margin: 0 0 6px; color: var(--ink, #18140f);
}
.elm-cc-p { font-size: .95rem; line-height: 1.6; color: var(--ink-md, #3a3228); margin: 0; max-width: 78ch; }
.elm-cc-p a, .elm-cc-dlg a { color: var(--ink, #18140f); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--gold, #c9a96b); }
.elm-cc-p a:hover, .elm-cc-dlg a:hover { color: var(--gold-dk, #8c6d3c); }
.elm-cc-btns { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; justify-content: flex-end; }

.elm-cc-x {
    position: absolute; top: 8px; right: 8px;
    width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
    background: none; border: 0; border-radius: 50%; cursor: pointer;
    color: var(--ink-md, #3a3228); font-size: 1.05rem;
}
.elm-cc-x:hover { background: var(--sand, #f4efe6); color: var(--ink, #18140f); }

@keyframes elmCcSu { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* ---------- FINESTRA PREFERENZE (modale) ---------- */
.elm-cc-dlg {
    position: fixed; inset: 0; z-index: 100001;
    display: flex; align-items: center; justify-content: center; padding: 16px;
    background: rgba(24, 20, 15, .55);
    font-family: var(--font-body, 'Jost', system-ui, sans-serif);
}
.elm-cc-box {
    width: 100%; max-width: 660px; max-height: calc(100dvh - 32px);
    display: flex; flex-direction: column;
    background: #fff; color: var(--ink, #18140f);
    border-radius: var(--r-card, 12px); box-shadow: 0 30px 70px -20px rgba(24, 20, 15, .45);
    animation: elmCcSu .3s cubic-bezier(.16, 1, .3, 1);
}
.elm-cc-box-hd { position: relative; padding: 24px 60px 14px 26px; border-bottom: 1px solid var(--line, #e6dfd0); }
.elm-cc-box-hd .elm-cc-tit { font-size: 1.35rem; margin-bottom: 8px; }
.elm-cc-box-hd .elm-cc-p { font-size: .93rem; }
.elm-cc-box-bd { padding: 6px 26px; overflow-y: auto; }
.elm-cc-box-ft {
    display: flex; flex-wrap: wrap; gap: 10px 12px; justify-content: flex-end; align-items: center;
    padding: 16px 26px 20px; border-top: 1px solid var(--line, #e6dfd0);
}

.elm-cc-cat { padding: 18px 0; border-bottom: 1px solid var(--line, #e6dfd0); }
.elm-cc-cat:last-child { border-bottom: 0; }
.elm-cc-cat-hd { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
/* 16/10/2026 (audit P5): da h3 a p role=heading. Peso 400 e interlinea 1.2 sono i valori
   che si vedevano a video da h3 (il tema forzava il peso dei titoli): restano identici. */
.elm-cc-cat-t { font-family: var(--font-display, 'Lora', Georgia, serif); font-size: 1.05rem; font-weight: 400; line-height: 1.2; margin: 0; color: var(--ink, #18140f); }
.elm-cc-cat-d { font-size: .92rem; line-height: 1.6; color: var(--ink-md, #3a3228); margin: 8px 0 0; }
.elm-cc-cat-s { font-size: .82rem; line-height: 1.55; color: var(--ink-3, #4a4d54); margin: 6px 0 0; }
.elm-cc-sempre {
    flex-shrink: 0; font-size: .8rem; font-weight: 600; color: var(--emerald, #3f7d62);
    background: #eef6f1; border-radius: var(--r-pill, 999px); padding: 5px 12px;
}

/* interruttore: checkbox vera (tastiera e screen reader) con aspetto a levetta */
.elm-cc-sw { position: relative; flex-shrink: 0; display: inline-flex; align-items: center; min-height: 44px; min-width: 52px; cursor: pointer; }
/* la casella vera sta SOPRA la levetta disegnata (z-index), cosi' riceve lei il tocco */
.elm-cc-sw input { position: absolute; inset: 0; z-index: 1; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.elm-cc-sw-ui {
    width: 46px; height: 26px; border-radius: 999px; background: var(--sand-dk, #d8cfc0);
    position: relative; transition: background-color .2s ease; pointer-events: none;
}
.elm-cc-sw-ui::after {
    content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%;
    background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform .2s cubic-bezier(.16, 1, .3, 1);
}
.elm-cc-sw input:checked + .elm-cc-sw-ui { background: var(--cta-gold, #8a6a38); }
.elm-cc-sw input:checked + .elm-cc-sw-ui::after { transform: translateX(20px); }

/* pagina sotto bloccata solo con la modale aperta (il banner non blocca) */
html.elm-cc-modale, html.elm-cc-modale body { overflow: hidden; }

/* ---------- RIQUADRO AL POSTO DI VIDEO E WIDGET ---------- */
/* aspect-ratio senza min-height fisso: se il testo non ci sta (telefono),
   il riquadro cresce invece di far uscire i bottoni */
.elm-cc-ph {
    width: 100%; aspect-ratio: 16 / 9;
    display: flex; align-items: center; justify-content: center; text-align: center;
    background: var(--ivory, #faf8f3); border: 1px solid var(--line, #e6dfd0); border-radius: var(--r-card, 12px);
    margin: 0 0 1rem; padding: 20px;
    font-family: var(--font-body, 'Jost', system-ui, sans-serif);
}
.elm-cc-ph--alto { aspect-ratio: auto; min-height: 320px; }
.elm-cc-ph-in { max-width: 460px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.elm-cc-ph-in > i { font-size: 2rem; color: var(--gold-dk, #8c6d3c); line-height: 1; }
.elm-cc-ph-txt { margin: 0; font-size: .95rem; line-height: 1.55; color: var(--ink-md, #3a3228); }

/* ---------- TABLET E TELEFONO ---------- */
@media (max-width: 991.98px) {
    .elm-cc-bar { grid-template-columns: minmax(0, 1fr); padding: 20px 20px 18px; gap: 14px; }
    .elm-cc-txt { padding-right: 36px; }
    .elm-cc-btns { justify-content: flex-start; }
}
@media (max-width: 575.98px) {
    .elm-cc { padding: 0 8px 8px; }
    .elm-cc-bar { padding: 18px 16px 14px; }
    .elm-cc-tit { font-size: 1.05rem; }
    .elm-cc-p { font-size: .9rem; }
    /* Rifiuta e Accetta affiancati, stessa larghezza; Personalizza sotto */
    .elm-cc-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
    .elm-cc-btns .elm-cc-btn { width: 100%; padding: 11px 10px; }
    .elm-cc-btns .elm-cc-link { grid-column: 1 / -1; justify-content: center; order: 3; }
    .elm-cc-dlg { padding: 0; align-items: flex-end; }
    .elm-cc-box { max-height: 92dvh; border-radius: var(--r-card, 12px) var(--r-card, 12px) 0 0; }
    .elm-cc-box-hd { padding: 20px 56px 12px 18px; }
    .elm-cc-box-bd { padding: 4px 18px; }
    .elm-cc-box-ft { display: grid; grid-template-columns: 1fr 1fr; padding: 14px 18px 18px; }
    .elm-cc-box-ft .elm-cc-btn { width: 100%; padding: 11px 10px; }
    .elm-cc-box-ft .elm-cc-btn--salva { grid-column: 1 / -1; order: 3; }
}
@media (prefers-reduced-motion: reduce) {
    .elm-cc-bar, .elm-cc-box { animation: none; }
    .elm-cc-sw-ui, .elm-cc-sw-ui::after, .elm-cc-btn { transition: none; }
}
@media print { .elm-cc, .elm-cc-dlg { display: none !important; } }

/* ---------- LINK ALLA PRIVACY NELLE CASELLE DEI MODULI ----------
   (preventivo e newsletter del footer, 26/09/2026): il tema toglie la
   sottolineatura ai link nelle label e "informativa" non sembrava un link. */
.label-privacy a { text-decoration: underline; text-underline-offset: 3px; }