/* ============================================================
   The Brainbox² — Brand stylesheet
   Single source of truth for tokens + shared components.
   Derived from BrainboxDesignSystem.md (verified 19 Jun 2026).
   ============================================================ */

@font-face{font-family:'Playkidz';src:url('../assets/fonts/Playkidz.woff2') format('woff2'),url('../assets/fonts/Playkidz.ttf') format('truetype');font-weight:normal;font-display:swap;}
@font-face{font-family:'KG Summer Sunshine';src:url('../assets/fonts/KGSummerSunshine.woff2') format('woff2'),url('../assets/fonts/KGSummerSunshine.ttf') format('truetype');font-weight:normal;font-display:swap;}

:root{
  /* brand */
  --bx-pink:#EE5592; --bx-pink-deep:#E03177;
  --bx-blue:#7FCEDC; --bx-blue-deep:#3E92A6;
  --bx-yellow:#FBD509; --bx-orange:#F8A420; --bx-coral:#F38185;
  --bx-ink:#222632; --bx-charcoal:#58585A; --bx-ink-soft:#444B5A;
  /* neutrals */
  --bx-white:#FFFFFF; --bx-cream:#FBFAF5;
  --bx-grey-100:#F1F2F4; --bx-grey-300:#D6D9DE; --bx-grey-500:#7A8190;
  /* status */
  --bx-status-notopened:#7A8190; --bx-status-opened:#F8A420;
  --bx-status-completed:#3BA776; --bx-danger:#E0413B;
  /* radius */
  --r-sm:8px; --r-md:14px; --r-lg:22px; --r-pill:999px;
  /* shadow */
  --shadow-sm:0 1px 3px rgba(34,38,50,.08);
  --shadow-md:0 4px 14px rgba(34,38,50,.10);
  --shadow-lg:0 10px 30px rgba(34,38,50,.12);
  /* type */
  --font-display:'Fredoka',sans-serif;
  --font-body:'Nunito',sans-serif;
  --font-hand:'KG Summer Sunshine','Fredoka',cursive;
  --font-chunk:'Playkidz','Fredoka',sans-serif;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{margin:0;font-family:var(--font-body),system-ui,sans-serif;color:var(--bx-ink);
  background:var(--bx-white);-webkit-font-smoothing:antialiased;}
img{display:block;max-width:100%;}
button{font-family:inherit;}
a{color:var(--bx-blue-deep);}
:focus-visible{outline:3px solid var(--bx-pink);outline-offset:3px;border-radius:8px;}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto;}*{animation-duration:.001s!important;}}

/* ---------- buttons ---------- */
.bx-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--font-body);font-weight:800;font-size:1rem;line-height:1;
  padding:13px 22px;border-radius:var(--r-md);border:none;cursor:pointer;
  text-decoration:none;transition:background .18s,transform .18s,box-shadow .18s,border-color .18s,filter .15s;}
.bx-btn--primary{background:var(--bx-pink);color:#fff;box-shadow:0 8px 18px rgba(238,85,146,.30);}
.bx-btn--primary:hover{background:var(--bx-pink-deep);transform:translateY(-2px);box-shadow:0 12px 24px rgba(238,85,146,.38);}
.bx-btn--secondary{background:#fff;color:var(--bx-blue-deep);border:2px solid var(--bx-blue);}
.bx-btn--secondary:hover{border-color:var(--bx-blue-deep);background:#F4FBFC;transform:translateY(-2px);}
.bx-btn--ghost{background:none;color:var(--bx-ink-soft);}
.bx-btn--ghost:hover{color:var(--bx-pink);}
.bx-btn:disabled{opacity:.55;cursor:not-allowed;transform:none;}
.bx-btn--block{width:100%;}

/* ---------- inputs ---------- */
.bx-field{display:block;}
.bx-field > span{display:block;font-size:.88rem;font-weight:700;color:var(--bx-ink-soft);margin-bottom:6px;}
.bx-input,.bx-select,.bx-textarea{width:100%;border:1.5px solid var(--bx-grey-300);border-radius:var(--r-sm);
  padding:12px 14px;font-family:var(--font-body);font-size:1rem;color:var(--bx-ink);outline:none;background:#fff;
  transition:border-color .15s,box-shadow .15s;}
.bx-input:focus,.bx-select:focus,.bx-textarea:focus{border-color:var(--bx-pink);box-shadow:0 0 0 4px rgba(238,85,146,.14);}
.bx-textarea{resize:vertical;}

/* ---------- cards ---------- */
.bx-card{background:#fff;border-radius:var(--r-md);box-shadow:var(--shadow-sm);padding:24px;border:1px solid var(--bx-grey-100);}

/* ---------- status badges ---------- */
.bx-badge{display:inline-flex;align-items:center;gap:6px;font-weight:800;font-size:.74rem;
  padding:5px 10px;border-radius:var(--r-pill);white-space:nowrap;}
.bx-badge .dot{width:7px;height:7px;border-radius:50%;}
.bx-badge--notopened{background:var(--bx-grey-100);color:#6B7280;}
.bx-badge--notopened .dot{background:#A6ABB5;}
.bx-badge--opened{background:#E5F1F4;color:#2C7080;}
.bx-badge--opened .dot{background:var(--bx-blue-deep);}
.bx-badge--completed{background:#E9F8EF;color:#2E7D5B;}
.bx-badge--completed .dot{background:var(--bx-status-completed);}
.bx-badge--overdue{background:#FDECEC;color:#B42318;}
.bx-badge--overdue .dot{background:var(--bx-danger);}

/* ---------- headings ---------- */
.bx-kicker{font-family:var(--font-hand);letter-spacing:1.2px;color:var(--bx-blue-deep);}
.bx-chunk{font-family:var(--font-chunk);font-weight:400;letter-spacing:.5px;}

/* ---------- utility ---------- */
.bx-wrap{max-width:1200px;margin:0 auto;padding-left:clamp(18px,5vw,48px);padding-right:clamp(18px,5vw,48px);}
.bx-hand-tag{font-family:var(--font-hand);}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}

/* ---------- toast ---------- */
.bx-toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(20px);opacity:0;
  background:var(--bx-ink);color:#fff;font-weight:700;font-size:.95rem;padding:13px 20px;border-radius:var(--r-md);
  box-shadow:var(--shadow-lg);z-index:2000;transition:opacity .25s,transform .25s;max-width:90vw;text-align:center;}
.bx-toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
.bx-toast--error{background:var(--bx-danger);}
.bx-toast--success{background:var(--bx-status-completed);}

/* ---------- cookie consent banner ---------- */
/* Slim, non-blocking bottom banner — no dimmed backdrop, doesn't cover the
   hero/CTA. pointer-events:none on the wrapper + auto on the card itself
   means the rest of the page stays fully clickable while it's showing. */
.cookie-backdrop{position:fixed;left:0;right:0;bottom:0;z-index:1000;
  display:flex;justify-content:center;padding:14px;pointer-events:none;}
.cookie-modal{pointer-events:auto;max-width:680px;width:100%;padding:16px 22px;border-radius:var(--r-lg);
  background:#fff;box-shadow:var(--shadow-lg);border:1px solid var(--bx-grey-100);
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;}
.cookie-modal p{margin:0;font-size:.9rem;line-height:1.5;color:var(--bx-ink-soft);flex:1;min-width:200px;}
.cookie-modal a{color:var(--bx-pink);font-weight:700;}
.cookie-banner-actions{display:flex;gap:10px;flex-wrap:wrap;flex:none;}
.cookie-banner-actions .bx-btn{padding:9px 18px;font-size:.9rem;white-space:nowrap;}
@media (max-width:480px){
  .cookie-modal{flex-direction:column;align-items:stretch;text-align:center;padding:18px 16px;}
  .cookie-banner-actions .bx-btn{flex:1;}
}

/* ---------- spinner ---------- */
@keyframes bxspin{to{transform:rotate(360deg);}}
.bx-spinner{width:22px;height:22px;border-radius:50%;border:3px solid rgba(255,255,255,.45);
  border-top-color:#fff;animation:bxspin .8s linear infinite;display:inline-block;}
.bx-spinner--pink{border:3px solid #F3DDE8;border-top-color:var(--bx-pink);}