/* =========================================================
   COOKIE-BANNER.CSS — Cookie banner GDPR-compliant nativo
   Brand:   Martesana Milano (miraiweb.it/martesana/gelato-al-panettone/)
   Tema:    LIGHT / cream — coerente con la palette del brand book
   Conforme: Google Consent Mode v2 + Garante Prov. 231/2021 + 284/2026
            + EDPB dark patterns (CTA equipollenti)
   Generato da: cookie-banner-builder skill — non modificare a mano
   ========================================================= */

:root {
  --cb-gold:        #D4B27E;   /* Oro — accento principale */
  --cb-gold-deep:   #A8854E;   /* Oro scuro — testo/contrasto */
  --cb-acqua:       #739AAA;   /* Acqua — secondario */
  --cb-acqua-deep:  #5B8294;   /* Acqua scuro — link/testo */
  --cb-terra:       #D86654;   /* Terra rossa — accento caldo */
  --cb-terra-cta:   #BE4733;   /* Terra rossa CTA (WCAG ~4:1 su bianco) */
  --cb-terra-cta-h: #A53C2D;   /* hover CTA */
  --cb-cream:       #FAF4EC;   /* fondo card */
  --cb-cream-2:     #F3E9DA;   /* fondo soft */
  --cb-line:        #E7DCCB;   /* bordi */
  --cb-ink:         #141414;   /* titoli */
  --cb-body:        #333333;   /* testo */
  --cb-muted:       #6E6453;   /* testo secondario */
  --cb-font: 'Futura PT','Jost',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
}

/* ====== OVERLAY (primo accesso) ====== */
.cb-overlay{position:fixed;inset:0;z-index:99000;display:none;align-items:center;justify-content:center;padding:24px;background:rgba(20,20,20,.42);backdrop-filter:blur(8px) saturate(115%);-webkit-backdrop-filter:blur(8px) saturate(115%);font-family:var(--cb-font);color:var(--cb-body);animation:cbOverlayIn .35s cubic-bezier(.22,.61,.36,1) both}
.cb-overlay.is-open{display:flex}
.cb-overlay.is-fading-out{animation:cbOverlayOut .3s cubic-bezier(.22,.61,.36,1) both}
@keyframes cbOverlayIn{from{opacity:0}to{opacity:1}}
@keyframes cbOverlayOut{from{opacity:1}to{opacity:0}}

/* ====== CARD principale ====== */
.cb-card{width:100%;max-width:760px;max-height:88vh;background:var(--cb-cream);border:1px solid var(--cb-line);border-top:3px solid var(--cb-gold);border-radius:18px;box-shadow:0 40px 100px -28px rgba(20,20,20,.45);display:flex;flex-direction:column;overflow:hidden;animation:cbCardIn .4s cubic-bezier(.22,.61,.36,1) both}
@keyframes cbCardIn{from{opacity:0;transform:scale(.97) translateY(8px)}to{opacity:1;transform:scale(1) translateY(0)}}

/* ====== HEADER: logo brand + X close ====== */
.cb-head{display:flex;justify-content:space-between;align-items:center;padding:22px 26px 0;flex-shrink:0}
.cb-logo{display:flex;align-items:center;gap:11px}
.cb-logo svg,.cb-logo img{display:block;width:40px;height:40px}
.cb-logo-text{font-family:var(--cb-font);font-size:18px;font-weight:700;color:var(--cb-ink);letter-spacing:.01em;line-height:1}
.cb-logo-text small{display:block;font-size:9px;letter-spacing:.16em;color:var(--cb-gold-deep);text-transform:uppercase;margin-top:4px;font-weight:600}
.cb-close{background:#fff;border:1px solid var(--cb-line);color:var(--cb-terra-cta);width:34px;height:34px;border-radius:10px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.2s;flex-shrink:0}
.cb-close:hover{background:var(--cb-cream-2);border-color:var(--cb-terra)}

/* ====== TABS NAV ====== */
.cb-tabs{display:flex;border-bottom:1px solid var(--cb-line);padding:0 26px;margin-top:18px;flex-shrink:0}
.cb-tab{flex:1;padding:14px 8px;background:transparent;border:none;color:var(--cb-muted);font-family:var(--cb-font);font-size:13px;font-weight:600;cursor:pointer;transition:.2s;position:relative;letter-spacing:.01em}
.cb-tab:hover{color:var(--cb-ink)}
.cb-tab.is-active{color:var(--cb-terra-cta)}
.cb-tab.is-active::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--cb-gold)}
@media (max-width:560px){.cb-tab{font-size:11px;padding:12px 4px}}

/* ====== TAB CONTENT ====== */
.cb-content{flex:1;overflow-y:auto;padding:22px 26px 16px;font-size:14px;line-height:1.6;background:#fff}
.cb-content::-webkit-scrollbar{width:6px}
.cb-content::-webkit-scrollbar-track{background:var(--cb-cream)}
.cb-content::-webkit-scrollbar-thumb{background:var(--cb-gold);border-radius:3px}

.cb-pane{display:none}
.cb-pane.is-active{display:block;animation:cbPaneIn .25s cubic-bezier(.22,.61,.36,1) both}
@keyframes cbPaneIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}

.cb-pane h3{font-family:var(--cb-font);font-size:22px;color:var(--cb-ink);font-weight:700;letter-spacing:-.01em;line-height:1.15;margin:0 0 14px}
.cb-pane p{margin:0 0 13px;color:var(--cb-body)}
.cb-pane p:last-child{margin-bottom:0}
.cb-pane a{color:var(--cb-acqua-deep);text-decoration:underline;text-decoration-color:rgba(91,130,148,.4);font-weight:600}
.cb-pane a:hover{text-decoration-color:var(--cb-acqua-deep)}

/* ====== CATEGORIA collassabile ====== */
.cb-cat{border-bottom:1px solid var(--cb-line);padding:14px 0}
.cb-cat:first-child{padding-top:0}
.cb-cat:last-child{border-bottom:none}
.cb-cat-head{display:flex;align-items:center;gap:12px;cursor:pointer;user-select:none}
.cb-cat-toggle-arrow{width:18px;height:18px;flex-shrink:0;color:var(--cb-gold-deep);transition:transform .25s cubic-bezier(.22,.61,.36,1)}
.cb-cat.is-expanded .cb-cat-toggle-arrow{transform:rotate(180deg)}
.cb-cat-name{flex:1;font-family:var(--cb-font);font-size:14px;font-weight:700;color:var(--cb-ink);display:flex;align-items:center;gap:8px}
.cb-cat-count{font-size:10px;letter-spacing:.04em;color:var(--cb-gold-deep);background:var(--cb-cream-2);padding:2px 8px;border-radius:5px;font-weight:600}
.cb-cat-desc{margin-top:10px;padding-left:30px;font-size:13px;line-height:1.55;color:var(--cb-muted);display:none}
.cb-cat.is-expanded .cb-cat-desc{display:block;animation:cbPaneIn .25s ease-out}

/* Toggle switch */
.cb-toggle{position:relative;display:inline-block;width:44px;height:24px;flex-shrink:0}
.cb-toggle input{opacity:0;width:0;height:0;position:absolute;margin:0}
.cb-toggle .slider{position:absolute;cursor:pointer;inset:0;background:#d8cdba;border-radius:24px;transition:.25s;border:1px solid var(--cb-line)}
.cb-toggle .slider::before{content:"";position:absolute;left:2px;top:1px;width:18px;height:18px;background:#fff;border-radius:50%;transition:.25s;box-shadow:0 2px 5px rgba(20,20,20,.25)}
.cb-toggle input:checked + .slider{background:linear-gradient(135deg,var(--cb-gold-deep),var(--cb-gold));border-color:var(--cb-gold-deep)}
.cb-toggle input:checked + .slider::before{transform:translateX(20px)}
.cb-toggle input:disabled + .slider{cursor:not-allowed}
.cb-toggle input:disabled:checked + .slider{background:linear-gradient(135deg,var(--cb-gold-deep),var(--cb-gold));opacity:.65}

/* ID consenso */
.cb-info-id{margin-top:18px !important;padding:12px 14px;background:var(--cb-cream);border:1px solid var(--cb-line);border-radius:10px;font-size:11px !important;line-height:1.55 !important;color:var(--cb-muted);letter-spacing:.01em}
.cb-info-id .lbl{color:var(--cb-gold-deep);font-weight:700;text-transform:uppercase;font-size:10px;letter-spacing:.1em}

/* ====== FOOTER bottoni — CTA EQUIPOLLENTI (Garante) ====== */
.cb-foot{display:flex;gap:10px;padding:16px 26px 20px;border-top:1px solid var(--cb-line);background:var(--cb-cream);flex-shrink:0;flex-wrap:wrap}
.cb-foot-meta{flex:1 0 100%;font-size:11px;color:var(--cb-muted);text-align:center;letter-spacing:.02em;margin:-4px 0 6px}
.cb-foot-meta a{color:var(--cb-acqua-deep);font-weight:600}
/* tutti i bottoni hanno lo STESSO peso visivo: stessa dimensione, stesso padding, stesso font.
   Differenza solo di riempimento colore — nessun bottone è depotenziato (no dark pattern). */
.cb-btn{flex:1;min-width:150px;font-family:var(--cb-font);font-size:13.5px;font-weight:700;padding:13px 18px;border-radius:9999px;border:1.5px solid transparent;cursor:pointer;transition:.25s cubic-bezier(.22,.61,.36,1);text-align:center;line-height:1.2;display:inline-flex;align-items:center;justify-content:center;gap:6px}
.cb-btn-accept{background:var(--cb-terra-cta);color:#fff;border-color:var(--cb-terra-cta)}
.cb-btn-accept:hover{background:var(--cb-terra-cta-h);border-color:var(--cb-terra-cta-h);transform:translateY(-2px);box-shadow:0 10px 24px -8px rgba(190,71,51,.45)}
/* Rifiuta e Personalizza/Salva: outline, stesso ingombro dell'accetta (equipollenza) */
.cb-btn-reject{background:#fff;color:var(--cb-ink);border-color:var(--cb-gold-deep)}
.cb-btn-reject:hover{background:var(--cb-cream-2);transform:translateY(-2px);box-shadow:0 10px 24px -10px rgba(168,133,78,.4)}
.cb-btn-custom{background:#fff;color:var(--cb-ink);border-color:var(--cb-acqua-deep)}
.cb-btn-custom:hover{background:var(--cb-acqua);color:#fff;transform:translateY(-2px);box-shadow:0 10px 24px -10px rgba(91,130,148,.45)}
@media (max-width:520px){.cb-btn{flex:1 0 100%}}

/* ====== WIDGET PERSISTENTE (bottom-left, dopo prima scelta) ====== */
.cb-widget{position:fixed;left:20px;bottom:20px;z-index:98500;width:56px;height:56px;border-radius:50%;background:var(--cb-cream);border:1.5px solid var(--cb-gold);display:none;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 8px 22px -6px rgba(20,20,20,.35);transition:.3s cubic-bezier(.22,.61,.36,1);animation:cbWidgetIn .4s cubic-bezier(.22,.61,.36,1) both}
.cb-widget.is-visible{display:flex}
.cb-widget:hover{transform:translateY(-3px) scale(1.06);border-color:var(--cb-gold-deep);box-shadow:0 12px 28px -8px rgba(168,133,78,.5)}
.cb-widget svg,.cb-widget img{display:block;width:46px;height:46px;object-fit:contain}
@keyframes cbWidgetIn{from{opacity:0;transform:translateY(20px) scale(.7)}to{opacity:1;transform:translateY(0) scale(1)}}
@media (max-width:560px){.cb-widget{left:14px;bottom:14px;width:52px;height:52px}}

/* ====== POPUP del widget ====== */
.cb-widget-popup{position:fixed;left:20px;bottom:80px;z-index:98600;width:320px;max-width:calc(100vw - 40px);background:var(--cb-cream);border:1px solid var(--cb-line);border-top:3px solid var(--cb-gold);border-radius:16px;box-shadow:0 28px 56px -16px rgba(20,20,20,.45);padding:0;display:none;flex-direction:column;font-family:var(--cb-font);color:var(--cb-body);animation:cbWPopupIn .3s cubic-bezier(.22,.61,.36,1) both}
.cb-widget-popup.is-open{display:flex}
@keyframes cbWPopupIn{from{opacity:0;transform:translateY(8px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}
@media (max-width:560px){.cb-widget-popup{left:14px;bottom:68px;width:calc(100vw - 28px)}}

.cb-wp-head{display:flex;justify-content:space-between;align-items:center;padding:15px 20px;border-bottom:1px solid var(--cb-line)}
.cb-wp-title{font-family:var(--cb-font);font-size:14px;font-weight:700;color:var(--cb-ink);letter-spacing:.01em}
.cb-wp-close{background:#fff;border:1px solid var(--cb-line);color:var(--cb-body);width:26px;height:26px;border-radius:7px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.2s;flex-shrink:0}
.cb-wp-close:hover{background:var(--cb-cream-2)}
.cb-wp-body{padding:16px 20px;background:#fff}
.cb-wp-label{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--cb-gold-deep);font-weight:700;margin-bottom:12px}
.cb-wp-state{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:9px}
.cb-wp-state li{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--cb-ink)}
.cb-wp-state .icon{width:18px;height:18px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.cb-wp-state .icon.locked,.cb-wp-state .icon.granted{color:var(--cb-gold-deep)}
.cb-wp-state .icon.denied{color:var(--cb-terra-cta)}
.cb-wp-show-details{background:none;border:none;padding:14px 0 0;cursor:pointer;color:var(--cb-acqua-deep);font-family:var(--cb-font);font-size:13px;font-weight:700;display:inline-flex;align-items:center;gap:6px;transition:.2s}
.cb-wp-show-details:hover{color:var(--cb-ink)}
.cb-wp-show-details svg{width:12px;height:12px}
.cb-wp-foot{display:flex;gap:8px;padding:12px 20px 18px;border-top:1px solid var(--cb-line);background:var(--cb-cream)}
.cb-wp-foot button{flex:1;font-family:var(--cb-font);font-size:12px;font-weight:700;padding:10px 12px;border-radius:9999px;cursor:pointer;transition:.25s;border:1.5px solid transparent}
.cb-wp-foot .cb-wp-revoke{background:#fff;color:var(--cb-ink);border-color:var(--cb-gold-deep)}
.cb-wp-foot .cb-wp-revoke:hover{background:var(--cb-terra-cta);color:#fff;border-color:var(--cb-terra-cta)}
.cb-wp-foot .cb-wp-modify{background:var(--cb-acqua);color:#fff;border-color:var(--cb-acqua)}
.cb-wp-foot .cb-wp-modify:hover{background:var(--cb-acqua-deep);border-color:var(--cb-acqua-deep);transform:translateY(-1px)}

/* =========================================================
   MOBILE OPTIMIZATION — fix overflow orizzontale (la "barra")
   - min-width:0 sui flex item: evita che tab/bottoni allarghino la card
   - overflow-wrap: spezza parole lunghe invece di sforare
   - paddings ridotti e bottoni full-width sotto i 480px
   ========================================================= */
.cb-card{box-sizing:border-box;max-width:min(760px,calc(100vw - 20px))}
.cb-tabs,.cb-tab,.cb-content,.cb-foot,.cb-btn{min-width:0}
.cb-pane h3,.cb-pane p,.cb-pane a,.cb-cat-name,.cb-tab{overflow-wrap:anywhere}
.cb-overlay{padding:16px;overflow-y:auto}

@media (max-width:480px){
  .cb-overlay{padding:10px}
  .cb-card{max-width:100%;max-height:92vh;border-radius:14px}
  .cb-head{padding:16px 16px 0}
  .cb-logo-text{font-size:16px}
  .cb-tabs{padding:0 12px;margin-top:14px}
  .cb-tab{font-size:11px;padding:11px 2px;letter-spacing:0}
  .cb-content{padding:16px 16px 12px;font-size:13.5px}
  .cb-pane h3{font-size:19px;margin-bottom:12px}
  .cb-cat-desc{padding-left:0}
  .cb-foot{padding:14px 16px 16px;gap:8px}
  .cb-btn{flex:1 0 100%;min-width:0;font-size:13px;padding:12px 14px}
  .cb-info-id{font-size:10px !important}
  .cb-widget{left:12px;bottom:12px}
  .cb-widget-popup{left:10px;right:10px;width:auto;max-width:none;bottom:64px}
}