/* ============================================================
   cookie-consent.css
   Banner + pannello preferenze cookie (GDPR/ePrivacy).
   Riusa le variabili CSS già definite in styles.css (:root) —
   va caricato DOPO styles.css nell'head.
   ============================================================ */

.dg-consent-banner{
    position:fixed; left:0; right:0; bottom:0; z-index:99998;
    background:var(--white);
    border-top:0.5px solid var(--gray-300);
    box-shadow:0 -8px 28px rgba(0,0,0,0.10);
    padding:24px var(--space-md);
    display:flex; align-items:center; justify-content:space-between;
    gap:var(--space-sm); flex-wrap:wrap;
    font-family:var(--font);
    transform:translateY(0);
    transition:transform 0.35s ease, opacity 0.35s ease;
}
.dg-consent-banner[hidden]{ display:none; }
.dg-consent-banner.is-leaving{ transform:translateY(12px); opacity:0; }

.dg-consent-text{
    flex:1 1 380px; font-size:13px; line-height:1.75; color:var(--gray-700);
}
.dg-consent-text strong{ color:var(--black); font-weight:600; }
.dg-consent-text a{ color:var(--black); border-bottom:0.5px solid var(--gray-300); text-decoration:none; }
.dg-consent-text a:hover{ border-color:var(--black); }

/* --- Pulsanti Banner Cookie --- */
.dg-consent-actions {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    align-items: center;
}

.dg-consent-actions button {
    cursor: pointer;
    font-family: var(--font);
    border-radius: 0;
    white-space: nowrap;
    transition: all var(--transition);
}

/* Accetta tutti: compatto, pulito e leggibile */
.dg-consent-actions .btn-main {
    padding: 10px 22px;
    font-size: 9px;
    font-weight: 500;
    letter-spacing: 2px;
    background: var(--black);
    color: var(--white);
    border: 1px solid var(--black);
}
.dg-consent-actions .btn-main:hover {
    background: transparent;
    color: var(--black);
}

/* Rifiuta non necessari: contorno sottile e discreto */
.dg-consent-actions .btn-secondary {
    padding: 10px 20px;
    font-size: 9px;
    font-weight: 500;
    letter-spacing: 2px;
    background: transparent;
    color: var(--gray-700);
    border: 0.5px solid var(--gray-300);
}
.dg-consent-actions .btn-secondary:hover {
    border-color: var(--black);
    color: var(--black);
}

/* Personalizza: link testuale sobrio con sottolineatura sottile */
.dg-consent-actions .btn-ghost {
    background: transparent;
    border: none;
    border-bottom: 0.5px solid var(--gray-300);
    padding: 2px 0;
    font-size: 9px;
    font-weight: 500;
    letter-spacing: 1.5px;
    color: var(--gray-500);
}
.dg-consent-actions .btn-ghost:hover {
    color: var(--black);
    border-color: var(--black);
}

/* --- Overlay + pannello preferenze --- */
.dg-consent-overlay{
    position:fixed; inset:0; z-index:99999;
    background:rgba(17,17,17,0.55);
    display:flex; align-items:center; justify-content:center;
    padding:20px;
}
.dg-consent-overlay[hidden]{ display:none; }

.dg-consent-modal{
    background:var(--white); width:100%; max-width:600px;
    max-height:85vh; overflow-y:auto;
    border:0.5px solid var(--gray-300);
    padding:var(--space-md) var(--space-md) var(--space-sm);
    font-family:var(--font);
}
.dg-consent-modal h2{
    font-size:22px; font-weight:300; letter-spacing:-0.5px; margin-bottom:10px;
}
.dg-consent-modal > p{
    font-size:13px; color:var(--gray-600); line-height:1.8; margin-bottom:var(--space-sm);
}
.dg-consent-category{
    display:flex; justify-content:space-between; align-items:flex-start;
    gap:var(--space-sm); padding:18px 0; border-top:0.5px solid var(--gray-300);
}
.dg-consent-category:last-of-type{ border-bottom:0.5px solid var(--gray-300); }
.dg-consent-category-info h3{
    font-size:14px; font-weight:600; color:var(--black); margin-bottom:4px;
}
.dg-consent-category-info p{
    font-size:12px; color:var(--gray-600); line-height:1.7; max-width:400px;
}
.dg-consent-switch{
    flex-shrink:0; display:flex; align-items:center; gap:8px; padding-top:2px;
}
.dg-consent-switch input[type="checkbox"]{
    width:17px; height:17px; accent-color:var(--black); cursor:pointer;
}
.dg-consent-switch input[type="checkbox"]:disabled{ cursor:default; opacity:0.5; }
.dg-consent-switch-label{
    font-size:10px; font-weight:500; letter-spacing:1.5px; text-transform:uppercase;
    color:var(--gray-500);
}

.dg-consent-modal-footer{
    display:flex; justify-content:flex-end; gap:10px; flex-wrap:wrap;
    padding-top:var(--space-sm);
}

/* --- Placeholder per contenuti bloccati finché manca il consenso
       (es. mappa Google Maps) --- */
.dg-consent-placeholder{
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:12px; text-align:center; padding:var(--space-md);
    background:var(--gray-100); border:0.5px dashed var(--gray-300);
    width:100%; height:100%; min-height:200px;
}
.dg-consent-placeholder p{
    font-size:12px; color:var(--gray-600); line-height:1.7; max-width:320px;
}
.dg-consent-placeholder button{
    font-family:var(--font);
}

@media (max-width:768px){
    .dg-consent-banner{
        padding:20px var(--space-sm);
        flex-direction:column;
        align-items:stretch;
        justify-content:flex-start; /* con flex-direction:column, "space-between" della regola base spingerebbe testo e bottoni ai due estremi del contenitore invece di tenerli vicini */
    }
    .dg-consent-text{
        flex-basis:auto; /* "flex:1 1 380px" della regola base è un vincolo di LARGHEZZA per il layout desktop (row); con flex-direction:column diventa un'altezza minima di 380px, creando il grande spazio vuoto sotto il testo */
    }
    .dg-consent-actions{ width:100%; }
    .dg-consent-actions .btn-main,
    .dg-consent-actions .btn-secondary,
    .dg-consent-actions .btn-ghost{ flex:1; text-align:center; }
}