/* ============================================================================
   Cookie consent — banner + preferences modal. Mobile-first, reverent,
   faithful to the Vespers system. Hidden until consent.js decides.
   ========================================================================== */
.ckc{position:fixed; left:0; right:0; bottom:0; z-index:1200; pointer-events:none;}
.ckc[hidden]{display:none !important;}

/* ── Banner ──────────────────────────────────────────────────────────────── */
.ckc-bar{pointer-events:auto; position:relative; display:flex; flex-direction:column; gap:14px;
  margin:0 auto; max-width:1120px; padding:18px clamp(16px,4vw,24px);
  background:var(--surface); border-top:1px solid var(--hairline-gold);
  box-shadow:0 -10px 40px rgba(20,22,46,.14);
  transform:translateY(115%); opacity:0; transition:transform .5s var(--ease), opacity .5s var(--ease);}
.ckc.is-in .ckc-bar{transform:translateY(0); opacity:1;}
.ckc-bar::before{content:""; position:absolute; left:0; top:-1px; height:2px; width:100%;
  background:linear-gradient(90deg, transparent, var(--gilt-500), transparent); opacity:.6;}
.ckc-bar-ic{flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center;
  width:42px; height:42px; border-radius:50%; color:var(--gilt-500);
  background:var(--surface-warm); border:1px solid var(--hairline-gold);}
.ckc-bar-copy{min-width:0;}
.ckc-bar-title{margin:0; font:600 1.05rem/1.3 var(--font-display); color:var(--fg1);}
.ckc-bar-desc{margin:5px 0 0; font:400 .9rem/1.55 var(--font-body); color:var(--fg2);}
.ckc-bar-link{color:var(--accent-strong); font-weight:600; text-decoration:underline; text-underline-offset:2px; white-space:nowrap;}
.ckc-bar-acts{display:flex; flex-wrap:wrap; gap:10px;}

@media (min-width:760px){
  .ckc{padding:0 18px 18px;}
  .ckc-bar{flex-direction:row; align-items:center; gap:18px; border-radius:18px;
    border:1px solid var(--hairline-gold); margin-bottom:0;}
  .ckc-bar-copy{flex:1 1 auto;}
  .ckc-bar-acts{flex:0 0 auto; flex-wrap:nowrap;}
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.ckc-btn{display:inline-flex; align-items:center; justify-content:center; gap:7px;
  font:700 .82rem/1 var(--font-body); letter-spacing:.01em; cursor:pointer;
  padding:11px 18px; border-radius:999px; border:1px solid transparent;
  transition:transform .2s var(--ease), background .25s, color .25s, border-color .25s; white-space:nowrap;}
/* [hidden] guard — .ckc-btn's display:inline-flex would otherwise override it
   (so "Decline" only ever shows where opt-in/GDPR requires it). */
.ckc-btn[hidden]{display:none !important;}
.ckc-btn vm-icon{margin-top:-1px;}
.ckc-btn-gold{background:var(--gilt-500); color:var(--ink-900); border-color:var(--gilt-500);}
.ckc-btn-ghost{background:transparent; color:var(--fg1); border-color:var(--border);}
.ckc-btn-quiet{background:transparent; color:var(--fg3); padding-inline:12px;}
.ckc-btn-quiet:hover{color:var(--fg1);}
@media (hover:hover){
  .ckc-btn-gold:hover{transform:translateY(-1px); filter:brightness(1.04);}
  .ckc-btn-ghost:hover{border-color:var(--hairline-gold); color:var(--accent-strong);}
}
.ckc-btn:focus-visible{outline:2px solid var(--gilt-500); outline-offset:2px;}
.ckc-bar-acts .ckc-btn{flex:1 1 auto;}
@media (min-width:760px){ .ckc-bar-acts .ckc-btn{flex:0 0 auto;} }

/* ── Preferences modal ───────────────────────────────────────────────────── */
.ckc-modal{position:fixed; inset:0; z-index:1300; display:grid; place-items:end center; pointer-events:auto;}
.ckc-modal[hidden]{display:none !important;}
.ckc-modal-scrim{position:absolute; inset:0; background:rgba(20,22,46,.55); backdrop-filter:blur(3px);
  opacity:0; transition:opacity .35s var(--ease);}
.ckc-modal.is-open .ckc-modal-scrim{opacity:1;}
.ckc-card{position:relative; width:100%; max-width:600px; max-height:92vh; overflow:auto;
  background:var(--surface); border:1px solid var(--hairline-gold);
  border-radius:22px 22px 0 0; box-shadow:var(--shadow-xl); padding:clamp(22px,4vw,32px);
  transform:translateY(24px); opacity:0; transition:transform .4s var(--ease), opacity .4s var(--ease);}
.ckc-modal.is-open .ckc-card{transform:translateY(0); opacity:1;}
@media (min-width:680px){
  .ckc-modal{place-items:center;}
  .ckc-card{border-radius:22px; margin:18px;}
}
.ckc-card-head{display:flex; align-items:center; gap:12px; margin-bottom:6px;}
.ckc-card-ic{display:inline-flex; align-items:center; justify-content:center; width:42px; height:48px;
  color:var(--gilt-500); border:1px solid var(--hairline-gold); background:var(--surface-warm); border-radius:var(--arch);}
.ckc-card-head h2{margin:0; font:600 clamp(1.3rem,2.4vw,1.7rem)/1.15 var(--font-display); color:var(--fg1);}
.ckc-x{margin-left:auto; display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px;
  border-radius:50%; border:1px solid var(--border); background:transparent; color:var(--fg2); cursor:pointer;
  transition:border-color .25s, color .25s;}
.ckc-x:hover{border-color:var(--hairline-gold); color:var(--accent-strong);}
.ckc-x:focus-visible{outline:2px solid var(--gilt-500); outline-offset:2px;}
.ckc-card-desc{margin:4px 0 18px; font:400 .94rem/1.6 var(--font-body); color:var(--fg2);}

.ckc-cats{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px;}
.ckc-cat{display:flex; gap:14px; align-items:flex-start; padding:16px; border:1px solid var(--border);
  border-radius:14px; background:var(--surface-warm);}
.ckc-cat-txt{min-width:0;}
.ckc-cat-name{display:flex; align-items:center; gap:8px; font:700 .92rem/1.3 var(--font-body); color:var(--fg1);}
.ckc-cat-always{font:700 .6rem/1 var(--font-body); letter-spacing:.1em; text-transform:uppercase;
  color:var(--accent-strong); padding:3px 8px; border:1px solid var(--hairline-gold); border-radius:999px;}
.ckc-cat-desc{display:block; margin-top:5px; font:400 .85rem/1.5 var(--font-body); color:var(--fg2);}

/* Switch */
.ckc-switch{flex:0 0 auto; position:relative; display:inline-flex; cursor:pointer; margin-top:2px;}
.ckc-switch input{position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer;}
.ckc-switch.is-locked, .ckc-switch.is-locked input{cursor:not-allowed;}
.ckc-switch-track{width:44px; height:26px; border-radius:999px; background:var(--border);
  border:1px solid transparent; transition:background .25s var(--ease); display:inline-flex; align-items:center; padding:0 3px;}
.ckc-switch-thumb{width:20px; height:20px; border-radius:50%; background:var(--surface);
  box-shadow:0 1px 3px rgba(20,22,46,.3); transition:transform .25s var(--ease);}
.ckc-switch input:checked + .ckc-switch-track{background:var(--gilt-500);}
.ckc-switch input:checked + .ckc-switch-track .ckc-switch-thumb{transform:translateX(18px);}
.ckc-switch input:disabled + .ckc-switch-track{opacity:.7;}
.ckc-switch input:focus-visible + .ckc-switch-track{outline:2px solid var(--gilt-500); outline-offset:2px;}

.ckc-card-acts{margin-top:20px; display:flex; flex-direction:column; gap:14px;}
.ckc-card-link{display:inline-flex; align-items:center; gap:6px; font:700 .8rem/1 var(--font-body);
  color:var(--accent-strong); align-self:flex-start;}
.ckc-card-btns{display:flex; flex-wrap:wrap; gap:10px;}
.ckc-card-btns .ckc-btn{flex:1 1 auto;}
@media (min-width:560px){
  .ckc-card-acts{flex-direction:row; align-items:center; justify-content:space-between;}
  .ckc-card-btns{flex-wrap:nowrap;}
  .ckc-card-btns .ckc-btn{flex:0 0 auto;}
}

/* Footer "Cookie settings" link */
.ftr-cookie{margin-left:10px; color:inherit; opacity:.8; text-decoration:underline; text-underline-offset:2px;}
.ftr-cookie:hover{opacity:1; color:var(--gilt-300);}

@media (prefers-reduced-motion:reduce){
  .ckc-bar, .ckc-modal-scrim, .ckc-card, .ckc-switch-track, .ckc-switch-thumb, .ckc-btn{transition:none !important;}
  .ckc-bar{transform:none;}
}