/* ================================
   ATLAS-style cookie banner theme
   (glassmorphism + blue→cyan gradient)
   Drop-in replacement for your styles.css
===================================*/

:root{
  --navy:#0a0f1f;
  --white:#ffffff;
  --silver:#f1f3f6;
  --accent:#2ecc71;         /* success highlight */
  --blue:#2249d7;           /* royal blue */
  --cyan:#00e5ff;           /* electric cyan */
  --text:#e8ecf7;
  --muted:#9fb3d8;
  --shadow:0 12px 34px rgba(0,0,0,.35);
  --glow:0 0 0 1px rgba(0,229,255,.18), 0 10px 30px rgba(0,229,255,.12);
}

/* ========= Container ========= */
.cookie-banner{
  position:fixed;
  left:50%; bottom:22px;
  transform:translateX(-50%);
  width:min(700px, 92vw);
  padding:18px 18px 16px;
  border-radius:18px;
  z-index:9999;

  /* Glass card */
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  color:var(--text);
  border:1px solid rgba(255,255,255,.14);
  backdrop-filter:saturate(140%) blur(10px);
  box-shadow:var(--shadow);

  /* Subtle reveal */
  opacity:1;
  transform-origin:bottom center;
  transition:opacity .35s ease, transform .35s ease;
}

/* Gradient ring */
.cookie-banner::before{
  content:"";
  position:absolute; inset:0; border-radius:inherit;
  padding:1px;
  background:linear-gradient(135deg, var(--blue), var(--cyan));
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask-composite:exclude;
  pointer-events:none; opacity:.55;
}

/* Hidden state helper (toggle via JS) */
.cookie-banner.is-hidden{
  opacity:0; transform:translate(-50%, 8px); pointer-events:none;
}

/* ========= Header / Tabs ========= */
.cookie-header{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px;
  padding-bottom:10px; margin-bottom:12px;
  border-bottom:1px solid rgba(255,255,255,.12);
}

.cookie-header a{
  text-decoration:none;
  color:var(--muted);
  font-weight:800; font-size:13.5px;
  padding:6px 8px; border-radius:10px;
  transition:color .25s ease, background .25s ease, box-shadow .25s ease;
}

.cookie-header a:hover{
  color:var(--text);
  background:rgba(255,255,255,.06);
}

.cookie-header a.active{
  color:#001221;
  background:linear-gradient(135deg, var(--blue), var(--cyan));
  box-shadow:var(--glow);
}

/* ========= Content ========= */
.cookie-content h3{
  margin:0 0 2px;
  font-size:16px; font-weight:900; letter-spacing:.2px;
  color:var(--white);
}

.cookie-content p{
  margin:4px 0 0;
  color:#d9e1f2; line-height:1.5;
  font-size:14px;
}

/* Optional: tiny “success/outcome” highlight */
.cookie-content .success{ color:var(--accent); font-weight:800 }

/* ========= Buttons ========= */
.cookie-buttons{
  display:flex; gap:10px; flex-wrap:wrap;
  margin-top:14px;
}

.cookie-buttons button{
  flex:1 1 140px;
  border:0;
  font-weight:900; letter-spacing:.25px;
  padding:12px 14px;
  border-radius:12px;
  cursor:pointer;
  transition:transform .15s ease, box-shadow .25s ease, background .25s ease, color .25s ease, border-color .25s ease;
}

/* Outline (first) = Manage / Reject / Preferences */
.cookie-buttons button:first-child{
  background:transparent;
  color:var(--text);
  border:1px solid rgba(255,255,255,.22);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.05);
}
.cookie-buttons button:first-child:hover{
  background:rgba(255,255,255,.07);
  border-color:rgba(255,255,255,.35);
  transform:translateY(-1px);
}

/* Primary (last) = Accept All */
.cookie-buttons button:last-child{
  background:linear-gradient(135deg, var(--blue), var(--cyan));
  color:#001221;
  box-shadow:var(--glow);
}
.cookie-buttons button:last-child:hover{
  transform:translateY(-1px);
  box-shadow:0 14px 36px rgba(0,229,255,.24);
}

/* ========= Preferences (if you have switches) ========= */
.cookie-preferences{ margin-top:10px }
.cookie-preferences .row{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 12px; border-radius:12px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.05);
  margin-top:8px;
}
.cookie-preferences .row small{ color:var(--muted) }

/* Pretty toggle for checkbox inputs (optional markup) */
.cookie-toggle{
  position:relative; width:46px; height:26px;
  background:#1a2238; border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
  transition:background .25s ease, border-color .25s ease;
}
.cookie-toggle::after{
  content:""; position:absolute; top:3px; left:3px;
  width:20px; height:20px; border-radius:50%;
  background:linear-gradient(135deg, var(--blue), var(--cyan));
  transition:left .25s ease;
  box-shadow:0 2px 8px rgba(0,229,255,.35);
}
.cookie-toggle.is-on{ background:#0e1a36; border-color:rgba(0,229,255,.35) }
.cookie-toggle.is-on::after{ left:23px }

/* ========= Links inside banner ========= */
.cookie-banner a.link{
  color:#bdefff; text-decoration:underline; text-underline-offset:2px;
}
.cookie-banner a.link:hover{ color:#e6fbff }

/* ========= Close (optional .cookie-close button) ========= */
.cookie-close{
  appearance:none; border:0; background:transparent; color:var(--muted);
  width:34px; height:34px; border-radius:10px; cursor:pointer;
}
.cookie-close:hover{ background:rgba(255,255,255,.06); color:var(--text) }

/* ========= Mobile tweaks ========= */
@media (max-width:540px){
  .cookie-content p{ font-size:13.5px }
  .cookie-buttons{ gap:8px }
  .cookie-buttons button{ padding:11px 12px; border-radius:11px }
}

/* ========= Reduced motion ========= */
@media (prefers-reduced-motion:reduce){
  .cookie-banner{ transition:none }
  .cookie-buttons button{ transition:none }
}