/* EVZO — the consent chooser
   =========================================================================
   Deliberately plain. A consent dialogue is not a place for persuasion: the
   "reject" button is the same size, weight and colour as "accept", because a
   prominent accept next to a faint reject is the dark pattern EU regulators
   have fined most often.

   It sits at the bottom rather than covering the page. A full-screen overlay
   that cannot be dismissed without choosing is a cookie wall, and cookie
   walls are not valid consent.
   ====================================================================== */

.cc {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  background: var(--raised);
  border-top: 2px solid var(--yellow);
  box-shadow: 0 -18px 48px rgba(0, 0, 0, .45);
  transform: translateY(100%);
  transition: transform .3s cubic-bezier(.22, .61, .36, 1);
  max-height: 86vh; overflow-y: auto;
}
.cc.on { transform: none; }

.cc-in {
  max-width: 720px; margin: 0 auto; text-align: left;
  padding: clamp(20px, 3.4vw, 28px) var(--pad) calc(clamp(20px, 3.4vw, 28px) + env(safe-area-inset-bottom));
}

.cc-copy h2 {
  font-size: clamp(19px, 2.6vw, 23px); margin: 0 0 8px;
  font-family: var(--display); text-transform: uppercase; letter-spacing: .01em;
}
.cc-copy p { margin: 0; color: var(--bone-dim); font-size: 15px; line-height: 1.55; }

/* ---- the switches ------------------------------------------------------ */
.cc-rows { margin: 18px 0 0; border-top: 1px solid var(--raised-2); }
.cc-row {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  padding: 13px 0; border-bottom: 1px solid var(--raised-2);
}
label.cc-row { cursor: pointer; }
.cc-row b { display: block; font-size: 15px; font-weight: 600; }
.cc-row span {
  display: block; color: var(--muted); font-size: 13.5px;
  line-height: 1.45; margin-top: 3px; max-width: 52ch;
}
.cc-fixed {
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted); white-space: nowrap; flex: none;
  margin-top: 2px;
}

/* A real checkbox, sized to be tappable. Nothing is checked by default —
   silence is not consent. */
.cc-row input[type="checkbox"] {
  appearance: none; -webkit-appearance: none;
  width: 44px; height: 26px; flex: none; margin-top: 1px;
  background: var(--raised-2); border: 1px solid var(--line);
  border-radius: 999px; position: relative; cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease;
}
.cc-row input[type="checkbox"]::after {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--muted); transition: transform .18s ease, background-color .18s ease;
}
.cc-row input[type="checkbox"]:checked {
  background: var(--yellow); border-color: var(--yellow);
}
.cc-row input[type="checkbox"]:checked::after {
  transform: translateX(18px); background: var(--ink);
}
.cc-row input[type="checkbox"]:focus-visible {
  outline: 3px solid var(--yellow); outline-offset: 2px;
}

/* ---- the buttons ------------------------------------------------------- */
/* Reject and accept are identical. That is the requirement, not a style
   choice: refusing must be exactly as easy as agreeing. */
.cc-act { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.cc-act .btn { flex: 1 1 150px; min-height: 46px; justify-content: center; }
.cc-act .cc-save { flex: 1 1 100%; }
@media (min-width: 560px) { .cc-act .cc-save { flex: 1 1 150px; } }

.cc-note { margin: 14px 0 0; color: var(--muted); font-size: 12.5px; line-height: 1.5; }
.cc-note a { color: var(--yellow); }

@media (prefers-reduced-motion: reduce) {
  .cc { transition: none; }
  .cc-row input[type="checkbox"], .cc-row input[type="checkbox"]::after { transition: none; }
}

/* ---- the thin bar ------------------------------------------------------
   The state almost everyone sees. One line, three buttons, out of the way.
   It sits over the content rather than pushing it, and it is narrow enough
   that the page behind stays readable while it is up. */
.cc-in.cc-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px 20px; flex-wrap: wrap;
  max-width: 980px;
  padding-top: 12px; padding-bottom: calc(12px + env(safe-area-inset-bottom));
}
.cc-bar p {
  margin: 0; flex: 1 1 260px; min-width: 0;
  color: var(--bone-dim); font-size: 14px; line-height: 1.45;
}
.cc-bar p a { color: var(--yellow); }
.cc-bar .cc-act { margin-top: 0; flex: 0 0 auto; gap: 8px; }
.cc-bar .cc-act .btn {
  flex: 0 0 auto; min-height: 38px; padding: 9px 16px; font-size: 12px;
}

/* The panel keeps its own sizing, just tighter than before. */
.cc-in h2 { font-size: 19px; margin: 0 0 12px; font-family: var(--display); text-transform: uppercase; }
.cc-in:not(.cc-bar) { max-width: 560px; padding-top: 20px; padding-bottom: calc(20px + env(safe-area-inset-bottom)); }
.cc-in:not(.cc-bar) .cc-rows { margin-top: 0; }
.cc-in:not(.cc-bar) .cc-row { padding: 11px 0; }
.cc-in:not(.cc-bar) .cc-act .btn { flex: 1 1 130px; min-height: 42px; }

@media (max-width: 560px) {
  .cc-bar { gap: 12px; }
  .cc-bar .cc-act { width: 100%; }
  .cc-bar .cc-act .btn { flex: 1 1 0; }
}