/* ==========================================================================
   The cookie gate.

   House colours, house type, the same card as everything else, because a
   consent panel that looks like a plugin reads as somebody else's paperwork
   bolted onto the front of the site.

   Accept and Reject are deliberately identical: same size, same weight, same
   colour. Making the refusal quieter than the acceptance is the single most
   common way a cookie banner stops being lawful consent, and it is a styling
   decision, which is why the note belongs here rather than in the PHP.
   ========================================================================== */

.xzc{
  position:fixed; inset:0; z-index:9000;
  display:grid; place-items:center;
  padding:20px;
  font-family:Geist, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  color:#F2F2F5;
}
.xzc[hidden]{ display:none; }

.xzc__veil{
  position:absolute; inset:0;
  background:rgba(6,6,9,.84);
  -webkit-backdrop-filter:blur(14px) saturate(130%);
  backdrop-filter:blur(14px) saturate(130%);
}

.xzc__panel{
  position:relative;
  width:100%; max-width:520px;
  max-height:calc(100svh - 40px); overflow-y:auto;
  padding:30px 30px 26px;
  border-radius:22px;
  border:1px solid rgba(255,255,255,0.09);
  background:
    radial-gradient(620px 300px at 20% -30%, rgba(188,28,52,.22), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,0) 160px),
    #0E0E13;
  box-shadow:0 40px 90px rgba(0,0,0,.6);
}

.xzc__eye{
  margin:0 0 14px; font-size:11.5px; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:#9A9AA6;
}
.xzc__t{
  margin:0; font-size:clamp(26px,3vw,34px); line-height:1.08;
  letter-spacing:-0.032em; font-weight:600;
}
.xzc__b{
  margin:14px 0 0; font-size:15.5px; line-height:1.68;
  letter-spacing:-0.008em; color:#9A9AA6;
}

.xzc__rows{ margin-top:22px; border-top:1px solid rgba(255,255,255,0.09); }
.xzc__rows[hidden]{ display:none; }

.xzc__row{
  position:relative;
  display:grid; grid-template-columns:minmax(0,1fr) auto;
  gap:2px 16px; align-items:center;
  padding:16px 0; border-bottom:1px solid rgba(255,255,255,0.055);
  cursor:pointer;
}
.xzc__row--fixed{ cursor:default; }
.xzc__row-t{ grid-column:1; font-size:14.5px; font-weight:600; letter-spacing:-0.012em; }
.xzc__row-d{ grid-column:1; font-size:13px; line-height:1.55; color:#85858F; }
.xzc__pill{
  grid-column:2; grid-row:1 / span 2; align-self:center;
  font-size:11px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:#85858F; border:1px solid rgba(255,255,255,0.12);
  border-radius:999px; padding:4px 10px;
}

.xzc__row input{ position:absolute; opacity:0; pointer-events:none; }
.xzc__sw{
  grid-column:2; grid-row:1 / span 2; align-self:center;
  width:46px; height:26px; flex:0 0 46px;
  border-radius:999px; background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,0.12);
  transition:background-color 200ms cubic-bezier(.32,.72,0,1), border-color 200ms cubic-bezier(.32,.72,0,1);
}
.xzc__sw::after{
  content:''; display:block; width:18px; height:18px; border-radius:50%;
  background:#F2F2F5; margin:3px; opacity:.6;
  transition:transform 200ms cubic-bezier(.32,.72,0,1), opacity 200ms;
}
.xzc__row input:checked ~ .xzc__sw{ background:#BC1C34; border-color:rgba(255,90,112,.5); }
.xzc__row input:checked ~ .xzc__sw::after{ transform:translateX(20px); opacity:1; }
.xzc__row input:focus-visible ~ .xzc__sw{ outline:2px solid #FF5A70; outline-offset:2px; }

.xzc__acts{
  display:grid; grid-template-columns:1fr 1fr; gap:10px;
  margin-top:24px;
}
.xzc__acts--sub{
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:12px; margin-top:16px;
}

.xzc__btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:13px 20px; border-radius:999px; border:1px solid transparent;
  font-size:14.5px; font-weight:600; letter-spacing:-0.005em;
  cursor:pointer; text-align:center;
  transition:background-color 180ms cubic-bezier(.32,.72,0,1), border-color 180ms cubic-bezier(.32,.72,0,1);
}
.xzc__btn--p{ background:#BC1C34; color:#F2F2F5; }
.xzc__btn--g{ background:transparent; border-color:rgba(255,255,255,0.14); color:#F2F2F5; }
@media (hover:hover) and (pointer:fine){
  .xzc__btn--p:hover{ background:#7E1226; }
  .xzc__btn--g:hover{ border-color:rgba(255,255,255,.26); }
}

.xzc__link{
  background:none; border:0; padding:0; cursor:pointer;
  font-size:13px; color:#9A9AA6;
  border-bottom:1px solid rgba(255,255,255,.18); padding-bottom:1px;
  transition:color 180ms, border-color 180ms;
}
.xzc__link:hover{ color:#F2F2F5; border-bottom-color:rgba(255,90,112,.5); }

.xzc button:focus-visible, .xzc a:focus-visible{ outline:2px solid #FF5A70; outline-offset:3px; border-radius:4px; }

@media (max-width:520px){
  .xzc__panel{ padding:24px 20px 20px; border-radius:18px; }
  .xzc__acts{ grid-template-columns:1fr; }
}

@media (prefers-reduced-motion:reduce){
  .xzc__sw, .xzc__sw::after, .xzc__btn, .xzc__link{ transition:none; }
}

/* display:inline-flex on the buttons beats the hidden attribute's own UA rule,
   so Save showed up before anybody had asked to choose. Stated last, and
   loudly, because every control in here uses a display of its own. */
.xzc [hidden]{ display:none !important; }