/* backend>static>dogs>css>cookie-consent.css */
:root{
  --cc-bg:#0f1115; --cc-fg:#e7e7e7; --cc-muted:#9aa0a6;
  --cc-border:#2a2f3a; --cc-primary:#ffffff; 
  --cc-primary-ink:#0b2d20;
  --cc-btn:#1f2430; --cc-btn-border:#373c47; --cc-focus:#ffffff;
  --cc-shadow:0 12px 32px rgba(0,0,0,.35);
}

#cc-banner{
  position:fixed; left:0; right:0; bottom:0; z-index:2147483646;
  background:var(--cc-bg); color:var(--cc-fg); border-top:1px solid var(--cc-border);
  transform:translateY(100%); opacity:0; visibility:hidden; transition:all .35s ease;
  box-shadow:var(--cc-shadow);
}
#cc-banner.cc-show{ transform:translateY(0); opacity:1; visibility:visible; }
#cc-banner .cc-container{
  max-width:1100px; margin:0 auto; padding:18px 16px; display:flex; gap:18px; align-items:center; justify-content:space-between;
}
#cc-banner .cc-text h2{ margin:0 0 6px; font-size:1.05rem; }
#cc-banner .cc-text p{ margin:0; color:var(--cc-muted); line-height:1.5; }
.cc-link{ color:var(--cc-fg); text-decoration:underline; background:none; border:none; padding:0; cursor:pointer; }

.cc-actions{ display:flex; gap:10px; flex-shrink:0; }
.cc-btn{
  background:var(--cc-btn); color:var(--cc-fg); border:1px solid var(--cc-btn-border); border-radius:10px;
  padding:10px 14px; cursor:pointer; font-weight:600;
}
.cc-btn:hover{ filter:brightness(1.05); }
.cc-btn:focus{ outline:2px solid var(--cc-focus); outline-offset:2px; }
.cc-primary{ background:var(--cc-primary); color:#0b1f17; border-color:transparent; }
.cc-outline{ background:transparent; }
.cc-secondary{ opacity:.9; }

.cc-hidden{ display:none; }

/* Modal */
.cc-modal{
  position:fixed; inset:0; z-index:2147483647; background:rgba(0,0,0,.55);
  opacity:0; visibility:hidden; transition:all .25s ease;
}
.cc-modal.cc-show{ opacity:1; visibility:visible; }
.cc-modal-card{
  width:min(720px, 92vw); background:var(--cc-bg); color:var(--cc-fg);
  border:1px solid var(--cc-border); border-radius:14px; margin:8vh auto; box-shadow:var(--cc-shadow);
}
.cc-modal-header{ display:flex; align-items:center; justify-content:space-between; padding:16px 18px; border-bottom:1px solid var(--cc-border); }
.cc-modal-body{ padding:16px 18px; }
.cc-modal-footer{ padding:14px 18px; display:flex; gap:10px; justify-content:flex-end; border-top:1px solid var(--cc-border); }
.cc-icon-btn{ background:transparent; border:0; color:var(--cc-fg); font-size:18px; cursor:pointer; }

.cc-muted{ color:var(--cc-muted); }
.cc-cat{ border:1px solid var(--cc-border); border-radius:12px; padding:12px 14px; margin:12px 0; }
.cc-cat-row{ display:flex; align-items:center; justify-content:space-between; gap:14px; }
.cc-cat-desc{ color:var(--cc-muted); font-size:.95rem; margin-top:3px; max-width:56ch; }

/* Toggle switch */
.cc-switch{ position:relative; width:48px; height:28px; }
.cc-switch input{ display:none; }
.cc-switch label{
  position:absolute; inset:0; background:#2a2f3a; border-radius:20px; cursor:pointer; border:1px solid var(--cc-btn-border);
}
.cc-switch label::after{
  content:""; position:absolute; top:3px; left:3px; width:22px; height:22px; background:#cccaca; border-radius:50%;
  transition:transform .2s ease; box-shadow:0 1px 2px rgba(0,0,0,.35);
}
.cc-switch input:checked + label{ background:var(--cc-primary); border-color:var(--cc-primary); }
.cc-switch input:checked + label::after{ transform:translateX(20px); }
.cc-switch input:disabled + label{ opacity:.55; cursor:not-allowed; }

/* Advanced */
.cc-advanced details{ margin-top:10px; }
.cc-check{ display:flex; align-items:center; gap:8px; margin-top:8px; color:var(--cc-muted); }

/* --- MOBILE LAYOUT: testo centrato + 3 bottoni su una riga sotto --- */
@media (max-width: 600px){
  #cc-banner .cc-container{
    display: block;          /* stacca testo e bottoni in due righe */
    padding: 14px 12px;
  }
  #cc-banner .cc-text{
    text-align: center;      /* centra il testo */
    margin-bottom: 10px;
  }
  #cc-banner .cc-actions{
    display: grid; 
    grid-template-columns: repeat(3, 1fr); /* 3 colonne uguali */
    gap: 8px;
  }
  #cc-banner .cc-actions .cc-btn{
    width: 100%;
    padding: 10px 8px;       /* bottoni più compatti */
    font-size: 0.95rem;
    border-radius: 9px;
  }
}

/* Schermi piccolissimi: se i 3 bottoni non ci stanno, vai su 2+1 */
@media (max-width: 340px){
  #cc-banner .cc-actions{
    grid-template-columns: repeat(2, 1fr);
  }
  #cc-banner .cc-actions .cc-primary{
    grid-column: 1 / -1;     /* il tasto "Accetta tutti" occupa la riga intera sotto */
  }
}