/* ─────────────────────────────────────────────────────────────
   assets/css/cookies.css — tonirulislam.tech
   Mirrors privacy.css structure exactly; same design system.
   ───────────────────────────────────────────────────────────── */

/* ── Hero ─────────────────────────────────────────────────── */
.cook-hero {
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border);
  padding: clamp(52px, 8vw, 110px) max(24px, 5vw) clamp(40px, 6vw, 72px);
  position: relative;
  overflow: hidden;
}

/* Decorative ambient blob — same technique as priv-hero */
.cook-hero::before {
  content: '';
  position: absolute;
  width: 520px; height: 520px;
  background: radial-gradient(circle, var(--accent-glow) 0%, transparent 70%);
  top: -160px; right: -80px;
  pointer-events: none;
}

.cook-hero-inner {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
}

.ch-kicker {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 14px;
  background: var(--accent-light);
  border: 1px solid rgba(232, 103, 58, 0.25);
  border-radius: 100px;
  font-size: .72rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent-color);
  margin-bottom: 20px;
}

.ch-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(2.6rem, 5.5vw, 4.2rem);
  font-weight: 700; line-height: 1.08;
  color: var(--text-black);
  letter-spacing: -.03em;
  margin-bottom: 20px;
  transition: color .35s;
}
.ch-title em {
  font-style: italic;
  color: var(--accent-color);
}

.ch-meta {
  display: flex; align-items: center;
  flex-wrap: wrap; gap: 14px;
}
.ch-date {
  font-size: .85rem; color: var(--text-muted);
}
.ch-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 14px;
  background: var(--accent-light);
  border: 1px solid rgba(232, 103, 58, .2);
  border-radius: 100px;
  font-size: .75rem; font-weight: 600;
  color: var(--accent-color);
}

/* ── Page wrapper ─────────────────────────────────────────── */
.cook-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(40px, 6vw, 72px) max(24px, 5vw) clamp(48px, 7vw, 96px);
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 52px;
  align-items: start;
}

/* ── Acceptance / preamble banner ────────────────────────── */
.acceptance-banner {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  padding: 22px 24px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent-color);
  border-radius: 16px;
  box-shadow: var(--shadow-sm);
}
.ab-icon {
  font-size: 1.6rem;
  flex-shrink: 0;
  margin-top: 2px;
}
.ab-title {
  font-size: 1rem; font-weight: 700;
  color: var(--text-black);
  margin-bottom: 6px;
}
.ab-sub {
  font-size: .88rem; line-height: 1.7;
  color: var(--text-muted);
}
.ab-sub strong { color: var(--text-dark); }

/* ── Main content ─────────────────────────────────────────── */
.cook-main { min-width: 0; }

/* ── Section ──────────────────────────────────────────────── */
.cook-section {
  scroll-margin-top: calc(var(--nav-height) + 16px);
}
.cs-header {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 20px;
}
.cs-num {
  font-family: 'Playfair Display', serif;
  font-size: 2.8rem; font-weight: 700;
  color: var(--accent-light);
  /* Use a border-painted look, matching ps-num in privacy.css */
  -webkit-text-stroke: 1.5px var(--accent-color);
  color: transparent;
  line-height: 1;
  flex-shrink: 0;
  user-select: none;
}
.cs-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.5rem, 2.8vw, 2rem);
  font-weight: 700;
  color: var(--text-black);
  line-height: 1.2;
  transition: color .35s;
}
.cs-title em { font-style: italic; color: var(--accent-color); }

.cs-body p {
  font-size: .96rem; line-height: 1.82;
  color: var(--text-dark);
  margin-bottom: 16px;
}
.cs-body p:last-child { margin-bottom: 0; }
.cs-body code {
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: .78rem; padding: 2px 7px;
  background: var(--code-bg);
  border-radius: 6px;
  color: var(--accent-color);
}
.cs-body a {
  color: var(--accent-color);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.cs-body a:hover { opacity: .8; }

/* ── Highlights / callouts ───────────────────────────────── */
.cs-highlight {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 16px 20px;
  border-radius: 14px;
  margin: 20px 0;
  border: 1px solid transparent;
}
.cs-highlight.info {
  background: rgba(2, 132, 199, .06);
  border-color: rgba(2, 132, 199, .2);
}
.cs-highlight.ok {
  background: rgba(5, 150, 105, .06);
  border-color: rgba(5, 150, 105, .2);
}
.cs-highlight.warn {
  background: var(--accent-light);
  border-color: rgba(232, 103, 58, .2);
}
.csh-icon { font-size: 1.05rem; flex-shrink: 0; margin-top: 2px; }
.csh-text { font-size: .88rem; line-height: 1.72; color: var(--text-dark); }
.csh-text strong { color: var(--text-black); }

/* ── Lists ────────────────────────────────────────────────── */
.cs-list {
  margin: 12px 0 16px 0;
  padding-left: 20px;
  display: flex; flex-direction: column; gap: 10px;
}
.cs-list li {
  font-size: .96rem; line-height: 1.7; color: var(--text-dark);
}
.cs-list li strong { color: var(--text-black); }
.cs-list li code {
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: .78rem; padding: 1px 6px;
  background: var(--code-bg); border-radius: 5px;
  color: var(--accent-color);
}

/* ── Cookie type grid (4 cards) ──────────────────────────── */
.cookie-type-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 20px 0;
}
.ct-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px;
  box-shadow: var(--shadow-sm);
  transition: border-color .2s, box-shadow .2s;
}
.ct-card:hover {
  border-color: rgba(232, 103, 58, .3);
  box-shadow: 0 4px 16px var(--accent-glow);
}
.ct-card-head {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 10px;
}
.ct-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
.ct-dot.essential  { background: #059669; }
.ct-dot.analytics  { background: #0284c7; }
.ct-dot.functional { background: #d97706; }
.ct-dot.marketing  { background: #e8673a; }
.ct-name { font-size: .85rem; font-weight: 700; color: var(--text-black); }
.ct-desc { font-size: .82rem; line-height: 1.6; color: var(--text-muted); }

/* ── Cookie category badges ──────────────────────────────── */
.ct-badge {
  display: inline-block;
  padding: 2px 9px; border-radius: 100px;
  font-size: .65rem; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase;
  margin-left: auto;
}
.ct-badge.required  { background: rgba(5,150,105,.1);  color: #059669; }
.ct-badge.optional  { background: rgba(232,103,58,.1); color: #e8673a; }
.ct-badge.essential { background: rgba(5,150,105,.1);  color: #059669; }
.ct-badge.analytics { background: rgba(2,132,199,.1);  color: #0284c7; }
.ct-badge.functional{ background: rgba(245,158,11,.1); color: #d97706; }
.ct-badge.marketing { background: rgba(232,103,58,.1); color: #e8673a; }

/* ── Cookie table ─────────────────────────────────────────── */
.cookie-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 14px;
  margin: 20px 0;
  box-shadow: var(--shadow-sm);
}
.cookie-table {
  width: 100%; border-collapse: collapse; font-size: .84rem;
}
.cookie-table thead { background: var(--bg-secondary); }
.cookie-table th {
  padding: 11px 16px; text-align: left;
  font-size: .68rem; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
}
.cookie-table td {
  padding: 11px 16px;
  border-bottom: 1px solid var(--divider);
  color: var(--text-dark);
  vertical-align: middle;
  line-height: 1.5;
}
.cookie-table tr:last-child td { border-bottom: none; }
.cookie-table tr:hover td { background: var(--accent-light); }
.cookie-table code {
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: .78rem; padding: 2px 7px;
  background: var(--code-bg); border-radius: 6px;
  color: var(--accent-color);
}

/* ── Consent panel ────────────────────────────────────────── */
.consent-panel {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 8px 20px;
  margin: 20px 0;
  box-shadow: var(--shadow-sm);
}
.consent-row {
  display: flex; align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  border-bottom: 1px solid var(--divider);
}
.consent-row:last-child { border-bottom: none; }
.cr-info { flex: 1; }
.cr-name { font-size: .9rem; font-weight: 600; color: var(--text-black); margin-bottom: 3px; }
.cr-desc { font-size: .8rem; color: var(--text-muted); line-height: 1.5; }
.toggle-switch {
  position: relative; width: 44px; height: 24px;
  flex-shrink: 0; margin-left: 20px;
}
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-track {
  position: absolute; inset: 0; border-radius: 100px;
  background: var(--bg-secondary);
  border: 1.5px solid var(--border);
  cursor: pointer;
  transition: background .25s, border-color .25s;
}
.toggle-track::before {
  content: ''; position: absolute;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--text-muted);
  top: 50%; left: 3px; transform: translateY(-50%);
  transition: transform .25s, background .25s;
}
.toggle-switch input:checked + .toggle-track { background: var(--accent-color); border-color: var(--accent-color); }
.toggle-switch input:checked + .toggle-track::before { transform: translate(20px, -50%); background: #fff; }
.toggle-switch input:disabled + .toggle-track { opacity: .5; cursor: not-allowed; }

/* ── Consent action buttons ──────────────────────────────── */
.consent-actions {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin-top: 4px;
}
.ca-btn {
  padding: 10px 22px; border-radius: 12px;
  font-family: 'DM Sans', sans-serif;
  font-size: .86rem; font-weight: 600;
  cursor: pointer; transition: all .2s;
  border: 1.5px solid transparent;
}
.ca-btn.primary {
  background: var(--accent-color); color: #fff;
  border-color: var(--accent-color);
  box-shadow: 0 4px 14px var(--accent-glow);
}
.ca-btn.primary:hover { opacity: .88; transform: translateY(-1px); }
.ca-btn.ghost {
  background: var(--bg-secondary); color: var(--text-dark);
  border-color: var(--border);
}
.ca-btn.ghost:hover { border-color: var(--accent-color); color: var(--accent-color); }

/* ── Divider between sections ────────────────────────────── */
.cook-divider {
  height: 1px;
  background: var(--divider);
  margin: 40px 0;
}

/* ══════════════════════════════════════════════════════════
   SIDEBAR
   ══════════════════════════════════════════════════════════ */
.cook-sidebar {
  position: sticky;
  top: calc(var(--nav-height) + 24px);
  display: flex; flex-direction: column; gap: 20px;
}

/* TOC card */
.toc-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 20px;
  box-shadow: var(--shadow-sm);
}
.toc-head {
  font-size: .68rem; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 12px;
}
.toc-list {
  list-style: none;
  display: flex; flex-direction: column; gap: 2px;
}
.toc-link {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 10px; border-radius: 10px;
  font-size: .81rem; font-weight: 500;
  color: var(--text-muted); text-decoration: none;
  transition: all .2s;
  border-left: 2px solid transparent;
}
.toc-link:hover  { color: var(--accent-color); background: var(--accent-light); }
.toc-link.active { color: var(--accent-color); background: var(--accent-light); border-left-color: var(--accent-color); }
.toc-num {
  width: 20px; height: 20px; border-radius: 6px;
  background: var(--bg-secondary); color: var(--text-muted);
  font-size: .66rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: background .2s, color .2s;
}
.toc-link.active .toc-num { background: var(--accent-color); color: #fff; }

/* Data / snapshot card */
.data-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 20px;
  box-shadow: var(--shadow-sm);
}
.data-card-head {
  font-size: .68rem; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 14px;
}
.data-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 0;
  border-bottom: 1px solid var(--divider);
  font-size: .82rem;
}
.data-row:last-child { border-bottom: none; }
.data-key { color: var(--text-muted); }
.data-val { font-weight: 700; }
.data-val.yes     { color: #059669; }
.data-val.no      { color: #dc2626; }
.data-val.neutral { color: var(--text-dark); }

/* Third-party policy links */
.tpp-list {
  display: flex; flex-direction: column; gap: 6px;
}
.tpp-link {
  display: block;
  padding: 8px 12px; border-radius: 10px;
  font-size: .82rem; font-weight: 500;
  color: var(--text-muted); text-decoration: none;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  transition: all .2s;
}
.tpp-link:hover { color: var(--accent-color); border-color: rgba(232,103,58,.3); background: var(--accent-light); }

/* Contact nudge */
.contact-nudge {
  background: linear-gradient(135deg, var(--accent-color) 0%, var(--accent-mid) 100%);
  border-radius: 16px;
  padding: 22px 20px;
  color: #fff;
}
.cn-title {
  font-size: 1rem; font-weight: 700; margin-bottom: 8px;
}
.cn-sub {
  font-size: .82rem; line-height: 1.6; opacity: .88; margin-bottom: 16px;
}
.cn-btn {
  display: inline-block;
  padding: 9px 18px; border-radius: 10px;
  background: rgba(255,255,255,.2);
  border: 1.5px solid rgba(255,255,255,.45);
  color: #fff; font-size: .84rem; font-weight: 600;
  text-decoration: none;
  transition: background .2s, border-color .2s;
  backdrop-filter: blur(4px);
}
.cn-btn:hover { background: rgba(255,255,255,.32); border-color: rgba(255,255,255,.7); }

/* ══════════════════════════════════════════════════════════
   REVEAL ANIMATION
   ══════════════════════════════════════════════════════════ */
.reveal-up {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .6s ease, transform .65s cubic-bezier(.22,1,.36,1);
}
.reveal-up.visible { opacity: 1; transform: none; }

/* ══════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════ */
@media (max-width: 960px) {
  .cook-wrap {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .cook-sidebar {
    position: static;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }
  .contact-nudge { grid-column: 1 / -1; }
}

@media (max-width: 640px) {
  .cookie-type-grid { grid-template-columns: 1fr; }
  .cook-sidebar { grid-template-columns: 1fr; }
  .consent-actions { flex-direction: column; }
  .ca-btn { width: 100%; text-align: center; }
  .ch-title { font-size: 2.4rem; }
}