/* =================================================================
   DishFlow — cookie.css
   Stili aggiuntivi per la Cookie Policy
   Importa termini.css + privacy.css come base
   ================================================================= */

/* ── COOKIE CATEGORY ─────────────────────────────────────────── */
.cookie-category {
    background: var(--card);
    border: 1px solid var(--brd2);
    border-radius: 16px;
    overflow: hidden;
    margin: 20px 0;
}

.cc-header {
    display: flex; align-items: center; gap: 14px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--brd2);
}
.cc-header p, .cc-header + p {
    padding: 14px 20px 0;
    font-size: .84rem;
    color: var(--gray);
    margin: 0;
}
.cookie-category > p {
    padding: 14px 20px 0;
    font-size: .84rem;
    color: var(--gray);
}

.cc-header--green { background: rgba(34,197,94,.05); }
.cc-header--blue  { background: rgba(59,130,246,.05); }
.cc-header--gold  { background: rgba(201,168,76,.05); }

.cc-badge {
    width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
}
.cc-badge svg { width: 16px; height: 16px; }
.cc-badge--green { background: rgba(34,197,94,.12); border: 1px solid rgba(34,197,94,.25); }
.cc-badge--green svg { stroke: #22c55e; }
.cc-badge--blue  { background: rgba(59,130,246,.12); border: 1px solid rgba(59,130,246,.25); }
.cc-badge--blue  svg { stroke: #60a5fa; }
.cc-badge--gold  { background: rgba(201,168,76,.12); border: 1px solid var(--border); }
.cc-badge--gold  svg { stroke: var(--gold); fill: var(--gold); width: 14px; height: 14px; }

.cc-header > div strong {
    display: block; font-size: .88rem; color: var(--white); font-weight: 600;
    margin-bottom: 2px;
}
.cc-header > div span {
    font-size: .70rem; color: var(--gray2); font-weight: 500;
}

/* ── COOKIE TABLE ────────────────────────────────────────────── */
.cookie-table {
    margin: 14px 0 0;
}
.ct-head {
    display: grid; grid-template-columns: 1.4fr 2.5fr 1fr;
    padding: 10px 20px;
    font-size: .65rem; font-weight: 800;
    text-transform: uppercase; letter-spacing: 1px;
    color: var(--gray2);
    background: rgba(255,255,255,.02);
    border-top: 1px solid var(--brd2);
}
.ct-row {
    display: grid; grid-template-columns: 1.4fr 2.5fr 1fr;
    padding: 12px 20px;
    border-top: 1px solid rgba(255,255,255,.04);
    align-items: center;
}
.ct-row span { font-size: .82rem; color: rgba(255,255,255,.65); }
.ct-row span:last-child { color: var(--gray2); font-size: .76rem; }
.ct-row code {
    background: rgba(255,255,255,.07);
    border: 1px solid var(--brd2);
    border-radius: 5px; padding: 2px 7px;
    font-size: .75rem; color: var(--gold);
    font-family: 'Courier New', monospace;
}

/* ── THIRD PARTY GRID ────────────────────────────────────────── */
.third-party-grid {
    display: grid; grid-template-columns: 1fr;
    gap: 14px; margin-top: 16px;
}
.tp-card {
    background: var(--card); border: 1px solid var(--brd2);
    border-radius: 14px; padding: 20px 22px;
    transition: border-color .25s;
}
.tp-card:hover { border-color: rgba(255,255,255,.12); }

.tp-header {
    display: flex; align-items: center; gap: 12px;
    margin-bottom: 12px;
}
.tp-logo {
    width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: .88rem; font-weight: 900; color: white;
}
.tp-logo--stripe   { background: linear-gradient(135deg,#635bff,#4b44cc); }
.tp-logo--whatsapp { background: linear-gradient(135deg,#25d366,#1aaa50); }
.tp-logo--google   { background: linear-gradient(135deg,#ea4335,#fbbc05); }

.tp-header > div { flex: 1; }
.tp-header > div strong { display: block; font-size: .88rem; margin-bottom: 2px; }
.tp-header > div span   { font-size: .72rem; color: var(--gray); }

.tp-type {
    font-size: .62rem; font-weight: 800;
    text-transform: uppercase; letter-spacing: .5px;
    padding: 3px 10px; border-radius: 50px; flex-shrink: 0;
}
.tp-type--necessary { background: rgba(34,197,94,.10); border: 1px solid rgba(34,197,94,.25); color: #22c55e; }
.tp-type--functional{ background: rgba(59,130,246,.10); border: 1px solid rgba(59,130,246,.25); color: #60a5fa; }

.tp-card p { font-size: .82rem; color: var(--gray); line-height: 1.7; margin-bottom: 12px; }
.tp-link {
    font-size: .78rem; color: var(--gold); font-weight: 600;
    transition: opacity .2s;
}
.tp-link:hover { opacity: .72; }

/* ── CONSENT DEMO BANNER ─────────────────────────────────────── */
.consent-demo {
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 16px; padding: 22px 24px;
    margin: 20px 0;
    position: relative; overflow: hidden;
}
.consent-demo::before {
    content: 'ANTEPRIMA';
    position: absolute; top: 10px; right: 14px;
    font-size: .58rem; font-weight: 800; color: var(--gray2);
    text-transform: uppercase; letter-spacing: 1.5px;
    background: rgba(255,255,255,.05); border: 1px solid var(--brd2);
    border-radius: 4px; padding: 2px 7px;
}

.cd-header {
    display: flex; align-items: center; gap: 12px;
    margin-bottom: 12px;
}
.cd-icon { font-size: 1.4rem; flex-shrink: 0; }
.cd-header > div strong { display: block; font-size: .88rem; margin-bottom: 2px; }
.cd-header > div span   { font-size: .72rem; color: var(--gray2); }

.consent-demo > p {
    font-size: .84rem; color: var(--gray);
    line-height: 1.7; margin-bottom: 16px;
}

.cd-btns { display: flex; gap: 10px; flex-wrap: wrap; }
.cd-btn {
    padding: 10px 18px; border-radius: 9px;
    font-size: .80rem; font-weight: 700;
    transition: all .2s ease; cursor: default;
}
.cd-btn--accept {
    background: linear-gradient(135deg, #e8c96a, #c9a84c);
    color: #07090f;
}
.cd-btn--manage {
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.12);
    color: var(--white);
}
.cd-btn--reject {
    background: transparent;
    border: 1px solid var(--brd2);
    color: var(--gray);
}

/* ── BROWSER GRID ────────────────────────────────────────────── */
.browser-grid {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 12px; margin: 20px 0;
}
.browser-item {
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    background: var(--card); border: 1px solid var(--brd2);
    border-radius: 14px; padding: 20px 12px;
    text-align: center;
    transition: border-color .25s, transform .25s;
}
.browser-item:hover { border-color: rgba(201,168,76,.28); transform: translateY(-3px); }
.browser-item svg { width: 13px; height: 13px; stroke: var(--gray2); margin-top: auto; }
.browser-item span { font-size: .76rem; font-weight: 600; color: var(--gray); }

.br-icon {
    width: 44px; height: 44px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1rem; font-weight: 900; color: white;
}
.br-chrome  { background: linear-gradient(135deg, #4285f4, #34a853); }
.br-firefox { background: linear-gradient(135deg, #ff6611, #e31587); }
.br-safari  { background: linear-gradient(135deg, #006cff, #00c7ff); }
.br-edge    { background: linear-gradient(135deg, #0078d4, #00adef); }

/* ── RESPONSIVE ──────────────────────────────────────────────── */
@media (max-width: 700px) {
    .browser-grid { grid-template-columns: repeat(2, 1fr); }
    .ct-head, .ct-row { grid-template-columns: 1fr 1.5fr; }
    .ct-head span:last-child,
    .ct-row  span:last-child { display: none; }
    .cd-btns { flex-direction: column; }
    .cd-btn { text-align: center; }
}