/* ============================================================================
   BELEEF GEMEENTE - BESPREKINGSTELSEL
   Public styling, in the 2026 beleef.org.za design language:
   warm paper, near-black ink, gold accent under 3 percent, mono buttons.
   Built by HiveCliq | hivecliq.com
   ========================================================================== */

:root{
  /* the approved prototype palette (beleefshop.netlify.app), dark first */
  --bg:#0B0B0C;
  --raised:#141417;
  --sunken:#08080A;
  --fg:#F7F5F1;
  --fg-muted:#A9A49A;
  --fg-faint:#6E6A63;
  --line:rgba(197,167,101,.20);
  --line-strong:rgba(197,167,101,.42);
  --gold:#C5A765;
  --gold-lift:#E0C588;
  --teal:#10B3A1;
  --seat-free:#16A192;
  --seat-free-fg:#04322C;
  --seat-free-edge:#4FD6C4;
  --seat-taken:#26262C;
  --seat-taken-fg:#56565F;
  --danger:#D06A4E;
  --ok:#4FB286;
  --btn-fg:#17130A;
  --body-c:rgba(247,245,241,.68);
  --shadow:0 18px 50px rgba(0,0,0,.45);
  /* legacy aliases used across app + admin sheets */
  --ink:var(--fg);
  --paper:var(--bg);
  --tan:var(--sunken);
  --mid:var(--fg-muted);
  --sans:'Urbanist',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'IBM Plex Mono','SFMono-Regular',Consolas,monospace;
  --r:18px;
  --wrap:1100px;
  --pad:24px;
  --ease:cubic-bezier(.22,1,.36,1);
}
@media (prefers-color-scheme:light){
  :root{
    --bg:#EFEBE3;
    --raised:#F8F6F1;
    --sunken:#E4DFD4;
    --fg:#17171A;
    --fg-muted:#5F5B53;
    --fg-faint:#8E8B84;
    --line:rgba(122,100,52,.22);
    --line-strong:rgba(122,100,52,.45);
    --gold:#8A6E2E;
    --gold-lift:#A98842;
    --teal:#0B7A6E;
    --seat-free:#17A093;
    --seat-free-fg:#FFFFFF;
    --seat-free-edge:#0B6B60;
    --seat-taken:#D3CEC2;
    --seat-taken-fg:#9A958A;
    --danger:#A8442A;
    --ok:#2F7D5B;
    --btn-fg:#FFF8E9;
    --body-c:rgba(23,23,26,.66);
    --shadow:0 18px 50px rgba(80,66,40,.14);
  }
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; }
body{
  font-family:var(--sans);
  background:var(--paper);
  color:var(--ink);
  font-size:17px;
  line-height:1.5;
  letter-spacing:.01em;
  min-height:100vh;
  display:flex;
  flex-direction:column;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }

/* --- topbar ---------------------------------------------------------------- */
.bs-topbar{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:14px var(--pad);
  background:#0B0B0C;
  border-bottom:1px solid rgba(197,167,101,.25);
}
.bs-topbar-logo img{ height:34px; width:auto; }
.bs-topbar-tag{
  font-family:var(--mono); font-size:12px; letter-spacing:.1em;
  text-transform:uppercase; color:#C5A765;
}

/* --- shell ----------------------------------------------------------------- */
.bs-main{
  flex:1;
  width:100%;
  max-width:var(--wrap);
  margin:0 auto;
  padding:32px var(--pad) 72px;
}
.bs-footer{
  padding:28px var(--pad);
  text-align:center;
  color:var(--mid);
  font-size:14px;
}
.bs-footer-credit a{
  color:var(--mid); text-decoration:none;
  font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase;
}
.bs-footer-credit a:hover{ color:var(--gold); }

/* --- type ------------------------------------------------------------------ */
.bs-h1{ font-size:clamp(38px,6vw,60px); font-weight:800; letter-spacing:-.04em; line-height:1.05; }
.bs-h2{ font-size:clamp(28px,4.4vw,40px); font-weight:800; letter-spacing:-.03em; line-height:1.1; }
.bs-h3{ font-size:clamp(24px,3.4vw,30px); font-weight:800; letter-spacing:-.025em; line-height:1.12; }
.bs-h4{ font-size:20px; font-weight:700; letter-spacing:-.02em; }
.bs-eyebrow{
  font-family:var(--mono); font-size:12px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--gold); margin-bottom:10px;
}
.bs-lead{ font-size:19px; color:var(--body-c); max-width:56ch; margin-top:14px; }
.bs-body{ color:var(--body-c); margin-top:12px; max-width:64ch; }
.bs-meta{ color:var(--mid); font-size:15px; margin-top:10px; }
.bs-meta-more{ color:var(--gold); }
.bs-link{ color:var(--fg); text-decoration-color:var(--gold); text-underline-offset:3px; }
.bs-link:hover{ color:var(--gold-lift); }
.bs-smallprint{ font-size:13.5px; color:var(--mid); margin-top:16px; }
.bs-optional{ color:var(--mid); font-weight:400; }
.bs-hint{ font-size:13px; color:var(--mid); margin-top:5px; }

/* --- buttons --------------------------------------------------------------- */
.bs-btn{
  display:inline-block;
  font-family:var(--mono); font-size:14px; letter-spacing:.06em; text-transform:uppercase;
  background:var(--gold); color:var(--btn-fg);
  border:1px solid transparent; border-radius:10px;
  padding:13px 26px;
  text-decoration:none; cursor:pointer;
  transition:filter .2s var(--ease), background .2s var(--ease), transform .2s var(--ease);
}
.bs-btn:hover{ filter:brightness(1.08); transform:translateY(-1px); }
.bs-btn:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }
.bs-btn:disabled{ opacity:.4; cursor:not-allowed; transform:none; filter:none; }
.bs-btn-lg{ padding:16px 34px; }
.bs-btn-ghost{ background:transparent; color:var(--fg); border-color:var(--line-strong); }
.bs-btn-ghost:hover{ filter:none; border-color:var(--gold); }
.bs-btn-danger{ background:transparent; color:var(--danger); border-color:var(--danger); }
.bs-btn-danger:hover{ background:var(--danger); border-color:var(--danger); color:#FFF8E9; filter:none; }
.bs-btn-disabled{ opacity:.4; pointer-events:none; }

/* --- flash ----------------------------------------------------------------- */
.bs-flash{
  border-radius:12px; padding:14px 18px; margin-bottom:22px; font-size:15.5px;
}
.bs-flash-ok{ background:rgba(79,178,134,.12); color:var(--ok); border:1px solid rgba(79,178,134,.35); }
.bs-flash-err{ background:rgba(208,106,78,.12); color:var(--danger); border:1px solid rgba(208,106,78,.35); }

/* --- hero ------------------------------------------------------------------ */
.bs-hero{ padding:34px 0 26px; }
.bs-hero-tight{ padding:18px 0 8px; }

/* --- event cards ----------------------------------------------------------- */
.bs-cards{ display:grid; gap:22px; margin-top:12px; }
.bs-card{
  background:var(--raised);
  border:1px solid var(--line);
  border-radius:var(--r);
  overflow:hidden;
  display:grid;
}
@media(min-width:760px){
  .bs-card{ grid-template-columns:minmax(0,2fr) minmax(0,3fr); }
  .bs-card:not(:has(.bs-card-media)){ grid-template-columns:1fr; }
}
.bs-card-media{ background:var(--tan); min-height:200px; }
.bs-card-media img{ width:100%; height:100%; object-fit:cover; }
.bs-card-body{ padding:26px; }
.bs-card-body .bs-btn{ margin-top:18px; }

.bs-empty{ padding:40px 0; }

/* --- date list ------------------------------------------------------------- */
.bs-dates{ margin-top:26px; }
.bs-date-list{ list-style:none; margin-top:16px; display:grid; gap:12px; }
.bs-date-item{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  background:var(--raised); border:1px solid var(--line);
  border-radius:var(--r); padding:18px 22px;
  flex-wrap:wrap;
}
.bs-date-text{ display:grid; gap:2px; }
.bs-date-when{ font-weight:700; letter-spacing:-.01em; }
.bs-date-doors{ color:var(--mid); font-size:14px; }
.bs-date-left{ font-family:var(--mono); font-size:12.5px; letter-spacing:.04em; color:var(--teal); }
.bs-date-full{ color:var(--mid); }

/* --- seat picker ----------------------------------------------------------- */
.bs-picker{ margin-top:18px; }
.bs-picker-bar{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:16px 0;
}
.bs-qty-label{ font-weight:700; font-size:15.5px; }
.bs-qty{
  font-family:var(--mono); font-size:15px;
  padding:9px 14px; border-radius:10px;
  border:1px solid var(--line-strong); background:var(--raised); color:var(--fg);
}
.bs-pick-status{
  flex-basis:100%;
  font-size:14.5px; color:var(--body-c); min-height:22px;
}

.bs-legend{ display:flex; gap:20px; flex-wrap:wrap; margin:4px 0 14px; }
.bs-leg{ display:inline-flex; align-items:center; gap:7px; font-size:13.5px; color:var(--mid); }
.bs-dot{ width:14px; height:14px; border-radius:4px; display:inline-block; }
.bs-dot-free{ background:var(--seat-free); box-shadow:inset 0 2px 0 var(--seat-free-edge); }
.bs-dot-picked{ background:var(--gold); }
.bs-dot-taken{ background:var(--seat-taken); }

.bs-stage{
  font-family:var(--mono); font-size:12px; letter-spacing:.35em; text-transform:uppercase;
  text-align:center; color:var(--fg-muted);
  background:var(--sunken); border:1px solid var(--line); border-radius:10px;
  padding:10px; margin-bottom:20px;
}

/* The hall scrolls sideways on small screens rather than shrinking seats
   below tappable size. */
.bs-map{ overflow-x:auto; padding-bottom:10px; }
.bs-map-inner{ min-width:660px; }

.bs-tbl-row{ display:flex; justify-content:center; gap:18px; margin-bottom:16px; }
.bs-tbl{
  display:grid;
  grid-template-columns:auto auto auto;
  grid-template-rows:auto auto auto auto auto;
  gap:3px;
  align-items:center; justify-items:center;
  position:relative;
}
.bs-tbl-surface{
  grid-column:2; grid-row:2 / span 3;
  width:44px; height:44px; border-radius:50%;
  background:var(--raised);
  border:1px solid var(--line-strong);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-size:11px; color:var(--mid);
}
.bs-seat{
  width:26px; height:26px;
  border-radius:7px;
  border:0;
  font-family:var(--mono); font-size:10.5px; line-height:1;
  cursor:pointer;
  color:var(--seat-free-fg);
  background:var(--seat-free);
  box-shadow:inset 0 2px 0 var(--seat-free-edge), 0 1px 2px rgba(0,0,0,.3);
  transition:transform .15s var(--ease), background .15s var(--ease), opacity .15s var(--ease);
}
.bs-seat:hover:not(:disabled){ transform:translateY(-2px) scale(1.1); z-index:2; position:relative; }
.bs-seat:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; z-index:2; position:relative; }
.bs-seat[data-state="taken"]{
  background:var(--seat-taken); color:var(--seat-taken-fg);
  box-shadow:inset 0 1px 3px rgba(0,0,0,.35);
  cursor:not-allowed;
}
.bs-seat[data-state="picked"]{
  background:var(--gold); color:var(--btn-fg); font-weight:700;
  box-shadow:inset 0 2px 0 var(--gold-lift), 0 2px 6px rgba(197,167,101,.45);
}
.bs-seat[data-state="dimmed"]{ opacity:.35; cursor:not-allowed; }

.bs-seat[data-pos="top"]{ grid-column:2; grid-row:1; }
.bs-seat[data-pos="bot"]{ grid-column:2; grid-row:5; }
.bs-seat[data-pos="l1"]{ grid-column:1; grid-row:2; }
.bs-seat[data-pos="l2"]{ grid-column:1; grid-row:3; }
.bs-seat[data-pos="l3"]{ grid-column:1; grid-row:4; }
.bs-seat[data-pos="r1"]{ grid-column:3; grid-row:2; }
.bs-seat[data-pos="r2"]{ grid-column:3; grid-row:3; }
.bs-seat[data-pos="r3"]{ grid-column:3; grid-row:4; }

.bs-gallery-wrap{ margin-top:30px; border-top:1px dashed var(--line-strong); padding-top:22px; }
.bs-gallery-head{
  display:flex; align-items:center; justify-content:center; gap:12px; margin-bottom:14px;
}
.bs-gallery-tag{
  font-family:var(--mono); font-size:11px; letter-spacing:.3em; text-transform:uppercase; color:var(--mid);
}
.bs-gal-row{ display:flex; justify-content:center; align-items:center; gap:22px; margin-bottom:8px; }
.bs-gal-label{
  font-family:var(--mono); font-size:11px; color:var(--mid); width:24px; text-align:right;
}
.bs-gal-block{ display:flex; gap:3px; }
.bs-gal-gap{
  width:208px; text-align:center;
  font-family:var(--mono); font-size:10px; letter-spacing:.25em; text-transform:uppercase;
  color:var(--fg-muted); background:var(--sunken); border:1px solid var(--line); border-radius:8px; padding:6px 0;
}

.bs-continue{ margin-top:26px; text-align:center; }

/* --- checkout -------------------------------------------------------------- */
.bs-checkout{
  display:grid; gap:30px; margin-top:20px;
}
@media(min-width:860px){ .bs-checkout{ grid-template-columns:2fr 3fr; align-items:start; } }
.bs-summary{
  background:var(--raised); border:1px solid var(--line);
  border-radius:var(--r); padding:24px;
}
.bs-summary-list{
  display:grid; grid-template-columns:auto 1fr; gap:9px 18px; margin-top:16px;
}
.bs-summary-list dt{
  font-family:var(--mono); font-size:12px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--mid); padding-top:2px;
}
.bs-summary-list dd{ color:var(--ink); }
.bs-countdown{
  margin-top:18px;
  font-family:var(--mono); font-size:14px;
  color:var(--teal);
}
.bs-countdown.bs-count-low{ color:var(--danger); }

.bs-form{ display:grid; gap:18px; }
.bs-field label{ display:block; font-weight:700; font-size:15px; margin-bottom:7px; }
.bs-field input, .bs-field textarea, .bs-field select{
  width:100%;
  font-family:var(--sans); font-size:16px; color:var(--ink);
  background:var(--raised);
  border:1px solid var(--line-strong); border-radius:12px;
  padding:12px 15px;
}
.bs-field input:focus, .bs-field textarea:focus, .bs-field select:focus{
  outline:2px solid var(--gold); outline-offset:1px; border-color:var(--gold);
}

/* --- confirmation ---------------------------------------------------------- */
.bs-confirm{ margin-top:16px; max-width:640px; }
.bs-ref-card{
  background:var(--raised); color:var(--fg);
  border:1px solid var(--line-strong);
  border-radius:var(--r); padding:30px; text-align:center; margin-bottom:26px;
  box-shadow:var(--shadow);
}
.bs-ref-label{
  font-family:var(--mono); font-size:12px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--gold);
}
.bs-ref{
  font-family:var(--mono); font-size:clamp(34px,7vw,48px); font-weight:500;
  letter-spacing:.06em; margin:8px 0 6px; color:var(--gold-lift);
}
.bs-ref-card .bs-body{ color:var(--body-c); }
.bs-manage-link{ margin-top:8px; word-break:break-all; font-size:14px; }
.bs-cancel-form{ margin-top:26px; }
.bs-status-badge{
  display:inline-block; margin-top:12px;
  font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase;
  border-radius:999px; padding:6px 14px;
  background:var(--sunken); color:var(--fg); border:1px solid var(--line);
}
.bs-status-confirmed{ background:rgba(16,179,161,.14); color:var(--teal); border-color:rgba(16,179,161,.35); }
.bs-status-cancelled{ background:transparent; color:var(--fg-muted); }
.bs-status-checked_in{ background:rgba(197,167,101,.16); color:var(--gold); border-color:var(--line-strong); }

/* --- responsive + motion --------------------------------------------------- */
@media(max-width:640px){
  .bs-main{ padding:22px 16px 56px; }
  .bs-date-item{ padding:16px; }
  .bs-date-item .bs-btn{ width:100%; text-align:center; }
}
@media (prefers-reduced-motion:reduce){
  *{ transition:none !important; animation:none !important; }
}

/* ---- Landing page (2026-08-31, image hero 31/08 pm) --------------------- */
.bs-land-hero{
  color:#F7F5F1;
  border-radius:var(--r);
  padding:0;
  margin:10px 0 40px;
  position:relative;
  overflow:hidden;
  background:#0B0B0C;
  box-shadow:var(--shadow);
}
.bs-land-hero-img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
}
.bs-land-hero::after{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(285deg, rgba(11,11,12,.05) 30%, rgba(11,11,12,.82) 78%),
             linear-gradient(0deg, rgba(11,11,12,.78) 0%, transparent 45%);
  pointer-events:none;
}
.bs-land-hero-inner{
  position:relative; z-index:1;
  max-width:640px;
  padding:170px 40px 8px;
}
.bs-land-eyebrow{ color:var(--gold-lift); }
.bs-land-h1{
  font-size:clamp(46px, 8.5vw, 84px);
  font-weight:800;
  line-height:.95;
  letter-spacing:-.045em;
  margin:14px 0 18px;
  text-shadow:0 2px 24px rgba(0,0,0,.45);
}
.bs-land-accent{ color:var(--gold-lift); }
.bs-land-lead{ color:rgba(247,245,241,.82); max-width:46ch; text-shadow:0 1px 12px rgba(0,0,0,.5); }
.bs-land-cta{ margin-top:26px; }
/* The hero is a photograph and always dark, whatever the scheme - its CTA
   keeps the bright gold so contrast never depends on the viewer's theme. */
.bs-land-hero .bs-btn{ background:#C5A765; color:#17130A; }
.bs-land-stats{
  position:relative; z-index:1;
  list-style:none;
  display:flex;
  gap:34px;
  flex-wrap:wrap;
  margin:44px 0 0;
  padding:22px 40px 30px;
  border-top:1px solid rgba(245,242,234,.16);
}
.bs-land-stat-n{
  display:block;
  font-family:var(--mono);
  font-size:26px;
  color:#F7F5F1;
}
.bs-land-stat-l{
  font-family:var(--mono);
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.1em;
  color:rgba(245,242,234,.6);
}
.bs-land-how{ margin:0 0 44px; }
.bs-land-steps{
  list-style:none;
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:16px;
  margin-top:18px;
}
.bs-land-step{
  background:var(--raised);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:22px 20px 20px;
}
.bs-land-step .bs-h4{ margin:10px 0 6px; }
.bs-land-step-n{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:32px; height:32px;
  border-radius:50%;
  background:var(--sunken);
  border:1px solid var(--line-strong);
  color:var(--gold);
  font-family:var(--mono);
  font-size:13px;
}
.bs-land-events{ scroll-margin-top:24px; }
.bs-land-events > .bs-h3{ margin-bottom:18px; }
.bs-card-foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
.bs-card-price{
  font-family:var(--mono);
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--mid);
}
.bs-card-free{ color:var(--ok); }
.bs-price-line{ color:var(--gold-lift); font-weight:600; }
.bs-pay-note{ margin-top:10px; }
.bs-narrow{ max-width:560px; margin:40px auto; }
.bs-narrow .bs-btn{ margin-top:6px; }
@media (max-width:760px){
  .bs-land-hero-inner{ padding:120px 22px 6px; }
  .bs-land-stats{ gap:22px; padding:18px 22px 24px; }
  .bs-land-steps{ grid-template-columns:1fr; }
}