/* ============================================================
   GWS — consent banner and settings
   The banner floats at the foot of the screen, inset like the nav and
   made of the same material: it is a control that sits over the page,
   not part of it. The settings dialog is a form, so it stays solid.

   The three choices share one button style on purpose. EU regulators
   treat a bright "Accept" beside a faint "Reject" as steering, so no
   choice here is visually easier than another.
   ============================================================ */

.cc-banner{
  position:fixed;
  left:max(var(--pad),calc(50vw - var(--wrap) / 2));
  right:max(var(--pad),calc(50vw - var(--wrap) / 2));
  bottom:calc(14px + env(safe-area-inset-bottom, 0px));
  z-index:60;
  display:flex;align-items:center;gap:18px 32px;flex-wrap:wrap;
  padding:18px clamp(18px,2.2vw,28px);
  color:var(--cream);
  animation:ccIn .45s var(--glass-ease) both;
}
@keyframes ccIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

.cc-copy{flex:1 1 420px;min-width:0}
.cc-title{margin:0 0 4px;font-weight:600;font-size:14px;letter-spacing:.01em}
.cc-text{margin:0;font-size:13.5px;line-height:1.55;color:var(--sand);max-width:78ch}
.cc-text a,.cc-dtext a{color:var(--signal);text-underline-offset:3px}

.cc-actions,.cc-dactions{display:flex;flex-wrap:wrap;gap:10px}

/* one button, three choices */
.cc-btn{
  font:inherit;font-size:14px;font-weight:500;letter-spacing:.01em;
  padding:11px 18px;min-width:118px;
  color:var(--cream);background:transparent;
  border:1px solid rgba(243,239,229,.55);
  cursor:pointer;
  transition:background-color .2s ease,color .2s ease,border-color .2s ease;
}
.cc-btn:hover{background:var(--cream);color:var(--green);border-color:var(--cream)}
.cc-btn:focus-visible,.cc-x:focus-visible,.cc-switch input:focus-visible + .cc-track{
  outline:2px solid var(--signal);outline-offset:2px}

/* ---- settings dialog -------------------------------------------- */

.cc-dialog{
  width:min(640px,calc(100vw - 32px));
  max-height:min(86vh,760px);
  padding:0;border:1px solid var(--hairline-on-green);
  background:var(--green);color:var(--cream);
  overflow:auto;
}
.cc-dialog::backdrop{background:rgba(8,20,15,.62)}
.cc-dialog > *{padding-left:clamp(20px,3vw,32px);padding-right:clamp(20px,3vw,32px)}

.cc-dhead{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding-top:24px;padding-bottom:4px}
.cc-dtitle{margin:0;font-weight:600;font-size:clamp(20px,2.2vw,24px);letter-spacing:-.01em}
.cc-x{font:inherit;font-size:26px;line-height:1;width:40px;height:40px;
  color:var(--sand);background:none;border:0;cursor:pointer}
.cc-x:hover{color:var(--cream)}
.cc-dtext{margin:8px 0 18px;font-size:14px;line-height:1.55;color:var(--sand)}

.cc-cats{border-top:1px solid var(--hairline-on-green)}
.cc-cat{padding-top:18px;padding-bottom:18px;border-bottom:1px solid var(--hairline-on-green)}
.cc-cat-text{margin:6px 0 0;font-size:13.5px;line-height:1.55;color:var(--sand);max-width:60ch}
.cc-none{margin:8px 0 0;font-size:12.5px;color:rgba(216,211,199,.6)}
.cc-services{margin:10px 0 0;padding:0;list-style:none;font-size:13px;line-height:1.5;color:var(--sand)}
.cc-services li{padding:8px 12px;background:rgba(243,239,229,.04);border-left:2px solid var(--hairline-on-green)}
.cc-services b{color:var(--cream);font-weight:600}
.cc-meta{display:block;margin-top:2px;font-size:12px;color:rgba(216,211,199,.7)}

/* the switch */
.cc-switch{display:flex;align-items:center;justify-content:space-between;gap:16px;cursor:pointer}
.cc-cat-name{font-weight:600;font-size:15px}
.cc-switch input{position:absolute;opacity:0;width:1px;height:1px}
.cc-track{position:relative;flex:0 0 auto;width:44px;height:24px;border-radius:12px;
  background:rgba(243,239,229,.16);transition:background-color .2s ease}
.cc-track::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;
  background:var(--cream);transition:transform .2s ease}
.cc-switch input:checked + .cc-track{background:var(--signal)}
.cc-switch input:checked + .cc-track::after{transform:translateX(20px);background:var(--green)}
.cc-switch input:disabled + .cc-track{opacity:.55}
.cc-switch:has(input:disabled){cursor:default}

/* pinned to the foot of the dialog, so the choice is always in reach
   however far the list has been scrolled */
.cc-dactions{position:sticky;bottom:0;padding-top:18px;padding-bottom:22px;
  background:var(--green);border-top:1px solid var(--hairline-on-green)}
.cc-dactions .cc-btn{flex:1 1 150px}

/* the footer control that reopens the choice */
.cc-open{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;
  letter-spacing:inherit;text-transform:inherit;text-decoration:underline;text-underline-offset:3px}
.cc-open:hover{color:var(--cream)}

@media (max-width:640px){
  .cc-banner{gap:14px;padding:16px}
  .cc-text{font-size:13px}
  .cc-actions{width:100%}
  .cc-actions .cc-btn{flex:1 1 0;min-width:0;padding:11px 8px}
}
@media (prefers-reduced-motion:reduce){
  .cc-banner{animation:none}
  .cc-track,.cc-track::after{transition:none}
}
@media print{.cc-banner{display:none}}