/* ================================================
   BTB LITE - Cookie consent banner & preference center
   Reuses the dark-theme tokens defined in header.php's
   inline :root block (falls back to the same values if
   loaded standalone). Buttons, radii, focus rings and
   hover glows are matched to the site's .btn-accent /
   .card-dark / .form-control styles so the banner reads
   as a native part of the UI, not a bolted-on widget.
   ================================================ */
:root{
  --btb-bg:      var(--bg,      #0E1B28);
  --btb-bg-card: var(--bg-card, #13202e);
  --btb-accent:  var(--accent,  #D25D17);
  --btb-accent-h:var(--accent-h,#e87a3a);
  --btb-txt:     var(--txt,     #dce3ea);
  --btb-muted:   var(--muted,   #6d7f90);
  --btb-border:  var(--border,  #1b2d40);
  --btb-r:       var(--r,       10px);
  /* accent glows lifted straight from the sidebar/​form styles */
  --btb-ring:    0 0 0 2px rgba(210,93,23,.2);
  --btb-glow:    0 4px 12px rgba(210,93,23,.4);
}

.btb-consent-overlay{
  position:fixed;inset:0;background:rgba(4,9,15,.72);
  z-index:4000;opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s;
}
.btb-consent-overlay.show{opacity:1;visibility:visible}

.btb-consent-banner{
  position:fixed;left:0;right:0;bottom:0;z-index:4001;
  display:flex;justify-content:center;
  transform:translateY(100%);opacity:0;
  transition:transform .3s ease,opacity .3s ease;
  pointer-events:none;
}
.btb-consent-banner.show{transform:translateY(0);opacity:1;pointer-events:auto}

.btb-consent-inner{
  width:100%;max-width:760px;margin:0 16px 16px;
  background:var(--btb-bg-card);border:1px solid var(--btb-border);
  border-top:2px solid var(--btb-accent);
  border-radius:var(--btb-r);padding:22px 24px;
  box-shadow:0 -8px 32px rgba(0,0,0,.45);
  color:var(--btb-txt);
  font-family:'Segoe UI',system-ui,sans-serif;
  max-height:calc(100vh - 32px);overflow-y:auto;
}

.btb-consent-inner h2{
  font-size:1.15rem;font-weight:700;margin:0 0 10px;color:var(--btb-txt);
  letter-spacing:.2px;
}

.btb-consent-inner p{
  font-size:.9rem;line-height:1.55;color:var(--btb-muted);margin:0 0 16px;
}
.btb-consent-inner p a{color:var(--btb-accent);text-decoration:underline;transition:color .2s}
.btb-consent-inner p a:hover{color:var(--btb-accent-h)}
.btb-consent-inner strong{color:var(--btb-txt)}

.btb-consent-prefs{
  margin-bottom:16px;border-top:1px solid var(--btb-border);padding-top:14px;
}
.btb-pref-row{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:10px 0;border-bottom:1px solid rgba(255,255,255,.05);
}
.btb-pref-row:last-child{border-bottom:none}
.btb-pref-text{display:flex;flex-direction:column;gap:2px}
.btb-pref-text strong{font-size:.88rem;font-weight:600}
.btb-pref-text span{font-size:.78rem;color:var(--btb-muted)}

/* ── Toggle switch - mirrors the accent-on-dark treatment of the
      site's .toggle-row / .form-control:focus states ── */
.btb-switch{position:relative;display:inline-block;width:42px;height:24px;flex-shrink:0}
.btb-switch input{opacity:0;width:0;height:0}
.btb-switch-track{
  position:absolute;inset:0;background:#0a1420;border:1px solid var(--btb-border);
  border-radius:24px;cursor:pointer;transition:background .2s,border-color .2s,box-shadow .2s;
}
.btb-switch-track::before{
  content:"";position:absolute;width:16px;height:16px;left:3px;top:2px;
  background:var(--btb-muted);border-radius:50%;transition:transform .2s,background .2s;
}
.btb-switch input:checked + .btb-switch-track{background:rgba(210,93,23,.25);border-color:var(--btb-accent)}
.btb-switch input:checked + .btb-switch-track::before{transform:translateX(18px);background:var(--btb-accent)}
.btb-switch input:focus-visible + .btb-switch-track{box-shadow:var(--btb-ring)}
.btb-switch-disabled .btb-switch-track{cursor:not-allowed;opacity:.6}

.btb-consent-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end;align-items:center}

/* ── Buttons - padding/weight/radius matched to the site's .btn-accent ── */
.btb-btn{
  /* iOS Safari paints unhardened <button>s with its native white/blue
     appearance regardless of most overrides - kill that explicitly, and
     give the base class its own background/color so even a missing
     modifier class can never fall back to a white system button. */
  -webkit-appearance:none;appearance:none;
  margin:0;background:transparent;color:var(--btb-txt);
  border-radius:8px;padding:10px 22px;font-weight:600;font-size:.85rem;
  font-family:inherit;line-height:1.2;
  cursor:pointer;border:1px solid transparent;
  transition:background .2s,border-color .2s,color .2s,box-shadow .2s;
}
.btb-btn:focus-visible{outline:none;box-shadow:var(--btb-ring)}
.btb-btn-accent{background:var(--btb-accent);color:#fff}
.btb-btn-accent:hover{background:var(--btb-accent-h);box-shadow:var(--btb-glow)}
.btb-btn-outline{background:transparent;color:var(--btb-txt);border-color:var(--btb-border)}
.btb-btn-outline:hover{border-color:var(--btb-accent);color:var(--btb-accent)}
.btb-btn-ghost{background:transparent;color:var(--btb-muted);border-color:transparent;margin-right:auto}
.btb-btn-ghost:hover{color:var(--btb-txt);text-decoration:underline}

.btb-consent-reopen{
  -webkit-appearance:none;appearance:none;   /* same iOS native-button guard as .btb-btn */
  position:fixed;left:16px;bottom:16px;z-index:1200;
  width:44px;height:44px;border-radius:50%;
  background:var(--btb-bg-card);border:1px solid var(--btb-border);
  color:var(--btb-txt);font-size:1.2rem;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 14px rgba(0,0,0,.35);transition:border-color .2s,transform .2s,box-shadow .2s;
}
.btb-consent-reopen:hover{border-color:var(--btb-accent);transform:translateY(-2px)}
.btb-consent-reopen:focus-visible{outline:none;box-shadow:var(--btb-ring)}

@media(max-width:600px){
  .btb-consent-inner{margin:0 10px 10px;padding:18px}
  .btb-consent-actions{justify-content:stretch}
  .btb-consent-actions .btb-btn{flex:1 1 auto;text-align:center}
  .btb-btn-ghost{margin-right:0;flex-basis:100%;order:-1}
}

/* Touch devices (any width, incl. landscape phones/iPads): >=16px text so
   iOS Safari never auto-zooms, with slightly tighter padding so the three
   buttons still stack/wrap cleanly at 375px. Desktop pointer devices keep
   the existing compact sizing. */
@media (hover:none) and (pointer:coarse){
  .btb-btn{font-size:16px;padding:12px 18px}
}