/* ═══════════════════════════════════════════════════════════
   Rollerskating Disco — Stylesheet
   Responsive: phone / tablet portrait / tablet landscape / desktop
   ═══════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&family=Righteous&display=swap');

/* ── Tokens ─────────────────────────────────────────────── */
:root {
  --dark:           #07000f;
  --dark2:          #110025;
  --dark3:          #1c0038;
  --pink:           #ff2d78;
  --pink-light:     #ff6b9d;
  --blue:           #00d4ff;
  --gold:           #ffd700;
  --green:          #39ff14;
  --purple:         #8b00ff;
  --glass:          rgba(255,255,255,0.055);
  --glass-h:        rgba(255,255,255,0.10);
  --glass-b:        rgba(255,255,255,0.11);
  --text:           #ffffff;
  --text-secondary: rgba(255,255,255,0.68);
  --text-muted:     rgba(255,255,255,0.38);
  --radius:         14px;
  --radius-lg:      20px;
  --shadow-pink:    0 8px 30px rgba(255,45,120,0.3);
  --sidebar-w:      255px;
}

/* ── Reset / Base ────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  font-family: 'Nunito', sans-serif;
  background-color: var(--dark);
  color: var(--text);
  min-height: 100vh;
  overflow-x: hidden;
  line-height: 1.6;
  -webkit-tap-highlight-color: transparent;
}

/* ── Ambient glow ────────────────────────────────────────── */
.hero-glow {
  position: fixed;
  border-radius: 50%;
  filter: blur(100px);
  pointer-events: none;
  z-index: 0;
  opacity: .35;
}
.hero-glow-pink  { background: var(--pink);  width: 500px; height: 500px; top: -150px; left: -150px; }
.hero-glow-blue  { background: var(--blue);  width: 400px; height: 400px; bottom: -100px; right: -100px; }
.hero-glow-green { background: var(--green); width: 400px; height: 400px;
                   top: 50%; left: 50%; transform: translate(-50%,-50%); opacity: .25; }

/* ── Scrollbar ───────────────────────────────────────────── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,45,120,.4); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,45,120,.65); }

/* ═══════════════════════════════════════════════════════════
   NAVBAR
   ═══════════════════════════════════════════════════════════ */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 500;
  background: rgba(7,0,15,.92);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--glass-b);
  padding: .85rem 0;
}
.site-logo {
  font-family: 'Righteous', cursive;
  font-size: 1.4rem;
  text-decoration: none;
  background: linear-gradient(135deg, var(--pink) 0%, var(--gold) 50%, var(--blue) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: flex;
  align-items: center;
  gap: .4rem;
  line-height: 1;
}
.skate-icon { -webkit-text-fill-color: initial; }
.nav-privacy-link {
  color: var(--text-muted);
  text-decoration: none;
  font-size: .85rem;
  font-weight: 700;
  transition: color .2s;
  white-space: nowrap;
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: .3rem;
}
.nav-privacy-link:hover { color: var(--pink); }

/* ═══════════════════════════════════════════════════════════
   HERO
   ═══════════════════════════════════════════════════════════ */
.hero {
  position: relative;
  padding: 4.5rem 0 2.5rem;
  overflow: hidden;
}
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  background: var(--glass);
  border: 1px solid var(--glass-b);
  border-radius: 50px;
  padding: .35rem 1rem;
  font-size: .8rem;
  font-weight: 700;
  color: var(--gold);
  backdrop-filter: blur(8px);
  letter-spacing: .5px;
}
.hero-title {
  font-family: 'Righteous', cursive;
  font-size: clamp(1.9rem, 5.5vw, 4.5rem);
  line-height: 1.15;
  background: linear-gradient(135deg, var(--pink) 0%, var(--gold) 45%, var(--blue) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: .6rem;
}
.hero-sub {
  font-size: clamp(.95rem, 2.5vw, 1.2rem);
  font-weight: 700;
  color: var(--text-secondary);
  max-width: 580px;
  margin: 0 auto .5rem;
}
.hero-desc {
  color: var(--text-muted);
  max-width: 640px;
  margin: 0 auto;
  font-size: .95rem;
}

/* Age schedule pills */
.age-schedule-row {
  display: flex;
  gap: .65rem;
  justify-content: center;
  flex-wrap: wrap;
}
.age-info-pill {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  border-radius: 50px;
  padding: .4rem 1rem;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .3px;
  text-align: center;
}
.age-kids   { background: rgba(57,255,20,.12);  border: 1px solid rgba(57,255,20,.35);  color: var(--green); }
.age-adults { background: rgba(255,215,0,.12);  border: 1px solid rgba(255,215,0,.35);  color: var(--gold); }
.age-info-pill small { font-weight: 600; opacity: .8; }

/* ═══════════════════════════════════════════════════════════
   SECTION TITLE
   ═══════════════════════════════════════════════════════════ */
.section-title {
  font-family: 'Righteous', cursive;
  font-size: clamp(1.3rem, 3vw, 1.65rem);
  color: var(--text-secondary);
}

/* ═══════════════════════════════════════════════════════════
   SLOTS GRID
   ═══════════════════════════════════════════════════════════ */
.slots-section { padding: 2rem 0 5rem; }
.slots-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
  gap: 1.25rem;
}

/* ─── Slot Card ─────────────────────────────────────────── */
.slot-card {
  background: var(--glass);
  border: 1px solid var(--glass-b);
  border-radius: var(--radius-lg);
  padding: 1.4rem;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
  position: relative;
  overflow: hidden;
}
.slot-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, rgba(255,45,120,0) 0%, rgba(255,45,120,0.06) 100%);
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
}
.slot-card:hover            { transform: translateY(-4px); border-color: rgba(255,45,120,.4); box-shadow: var(--shadow-pink); }
.slot-card:hover::after     { opacity: 1; }
.slot-card.slot-full        { opacity: .55; pointer-events: none; }

/* Age badges */
.age-badge {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  border-radius: 50px;
  padding: .25rem .75rem;
  font-size: .75rem;
  font-weight: 800;
  margin-bottom: .7rem;
  letter-spacing: .3px;
}
.age-badge-kids   { background: rgba(57,255,20,.12);  border:1px solid rgba(57,255,20,.35);  color: var(--green); }
.age-badge-adults { background: rgba(255,215,0,.12);  border:1px solid rgba(255,215,0,.35);  color: var(--gold); }

.slot-time {
  font-family: 'Righteous', cursive;
  font-size: 2rem;
  color: var(--pink);
  line-height: 1;
  margin-bottom: .2rem;
}
.slot-date {
  color: var(--text-muted);
  font-size: .8rem;
  margin-bottom: .7rem;
  display: flex;
  align-items: center;
  gap: .3rem;
  flex-wrap: wrap;
}
.slot-name  { font-weight: 800; font-size: .97rem; margin-bottom: .3rem; }
.slot-desc  { color: var(--text-secondary); font-size: .8rem; margin-bottom: .7rem; line-height: 1.4; }

/* Availability bar */
.avail-wrap { margin: .8rem 0 1rem; }
.avail-bar {
  height: 6px;
  background: rgba(255,255,255,.08);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: .35rem;
}
.avail-fill {
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--pink), var(--blue));
  transition: width .5s ease;
}
.avail-fill.avail-low  { background: linear-gradient(90deg, #ff6b35, var(--gold)); }
.avail-fill.avail-zero { background: rgba(255,255,255,.15); }
.avail-text {
  font-size: .78rem;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: .3rem;
  flex-wrap: wrap;
}
.avail-text-warn { color: var(--gold); font-weight: 800; }

/* ─── Book button ───────────────────────────────────────── */
.btn-book {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  width: 100%;
  padding: .8rem 1rem;
  min-height: 48px;
  background: linear-gradient(135deg, var(--pink) 0%, #c9006c 100%);
  color: white;
  font-weight: 800;
  font-size: .95rem;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  letter-spacing: .4px;
  transition: transform .25s ease, box-shadow .25s ease;
  text-decoration: none;
  font-family: 'Nunito', sans-serif;
  -webkit-appearance: none;
}
.btn-book:hover              { transform: scale(1.02); box-shadow: var(--shadow-pink); color: white; }
.btn-book-disabled,
.btn-book:disabled           { background: rgba(255,255,255,.1); color: var(--text-muted); pointer-events: none; cursor: not-allowed; }

/* ═══════════════════════════════════════════════════════════
   MODAL  (booking form)
   ═══════════════════════════════════════════════════════════ */
.disco-modal {
  background: #130025;
  border: 1px solid rgba(255,45,120,.3);
  border-radius: 22px;
  color: var(--text);
}
.modal-header {
  border-bottom: 1px solid var(--glass-b);
  padding: 1.25rem 1.5rem;
}
.modal-title {
  font-family: 'Righteous', cursive;
  font-size: 1.3rem;
  display: flex;
  align-items: center;
  gap: .5rem;
}
.modal-body {
  padding: 1.25rem 1.5rem 1.5rem;
  overflow-y: auto;
  max-height: calc(100dvh - 140px);   /* scrollable on any screen */
  overscroll-behavior: contain;
}
.modal-slot-info {
  background: rgba(255,45,120,.08);
  border: 1px solid rgba(255,45,120,.2);
  border-radius: var(--radius);
  padding: .85rem 1rem;
  margin-bottom: 1.1rem;
}
.modal-slot-name { font-weight: 800; font-size: .97rem; }
.modal-slot-date { color: var(--text-secondary); font-size: .8rem; margin-top: .2rem; }

/* Form elements */
.form-label {
  font-weight: 700;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--text-secondary);
  margin-bottom: .35rem;
  display: flex;
  align-items: center;
  gap: .3rem;
}
.req { color: var(--pink); }

.disco-input {
  background: var(--glass) !important;
  border: 1px solid var(--glass-b) !important;
  color: var(--text) !important;
  border-radius: var(--radius) !important;
  padding: .65rem 1rem !important;
  min-height: 46px;
  font-family: 'Nunito', sans-serif;
  font-size: 1rem !important;   /* prevents iOS zoom on focus */
  transition: border-color .25s ease, box-shadow .25s ease;
}
.disco-input::placeholder  { color: var(--text-muted) !important; }
.disco-input:focus {
  background: var(--glass-h) !important;
  border-color: var(--pink) !important;
  box-shadow: 0 0 0 3px rgba(255,45,120,.18) !important;
  outline: none !important;
}
.disco-input option { background: #1c0038; color: var(--text); }

.field-hint {
  font-size: .75rem;
  color: var(--text-muted);
  margin-top: .3rem;
  display: flex;
  align-items: center;
  gap: .3rem;
}
.modal-divider { height: 1px; background: var(--glass-b); margin: 1rem 0; }

/* Consent blocks */
.consent-block {
  background: var(--glass);
  border: 1px solid var(--glass-b);
  border-radius: var(--radius);
  padding: .85rem 1rem;
}
.form-check-input {
  background-color: var(--glass);
  border-color: var(--glass-b);
  width: 1.2em;
  height: 1.2em;
  flex-shrink: 0;
  margin-top: .15em;
}
.form-check-input:checked { background-color: var(--pink); border-color: var(--pink); }
.form-check-label {
  font-size: .82rem;
  color: var(--text-secondary);
  line-height: 1.5;
}
.form-check-label a { color: var(--pink); text-decoration: none; }
.form-check-label a:hover { text-decoration: underline; }
.form-footer-note {
  text-align: center;
  font-size: .72rem;
  color: var(--text-muted);
  margin-top: .65rem;
  line-height: 1.5;
}

/* ═══════════════════════════════════════════════════════════
   COOKIE BANNER  (AVG / GDPR)
   ═══════════════════════════════════════════════════════════ */
.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  background: rgba(7,0,15,.97);
  border-top: 1px solid rgba(255,45,120,.4);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  transform: translateY(100%);
  transition: transform .45s cubic-bezier(.34,1.56,.64,1);
  padding: 1rem 1.25rem;
  /* leave room for iPhone home indicator */
  padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
}
.cookie-banner.visible { transform: translateY(0); }
.cookie-banner-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.cookie-icon { font-size: 1.7rem; flex-shrink: 0; line-height: 1; }
.cookie-text { flex: 1; min-width: 200px; }
.cookie-text strong { color: var(--text); display: block; margin-bottom: .2rem; font-size: .88rem; }
.cookie-text p { margin: 0; font-size: .78rem; color: var(--text-secondary); line-height: 1.5; }
.cookie-text a { color: var(--pink); text-decoration: none; }
.cookie-text a:hover { text-decoration: underline; }
.cookie-actions {
  display: flex;
  gap: .55rem;
  flex-shrink: 0;
  align-items: center;
  flex-wrap: wrap;
}
.btn-cookie-accept {
  background: linear-gradient(135deg, var(--pink), #c9006c);
  color: white;
  border: none;
  padding: .6rem 1.2rem;
  min-height: 44px;
  border-radius: 9px;
  font-weight: 800;
  font-size: .82rem;
  cursor: pointer;
  transition: transform .2s, box-shadow .2s;
  font-family: 'Nunito', sans-serif;
  display: flex;
  align-items: center;
  gap: .35rem;
}
.btn-cookie-accept:hover { transform: scale(1.04); box-shadow: 0 4px 14px rgba(255,45,120,.4); }
.btn-cookie-necessary {
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--glass-b);
  padding: .6rem 1rem;
  min-height: 44px;
  border-radius: 9px;
  font-weight: 700;
  font-size: .82rem;
  cursor: pointer;
  transition: all .2s;
  font-family: 'Nunito', sans-serif;
}
.btn-cookie-necessary:hover { background: var(--glass); color: var(--text-secondary); }
.btn-cookie-more {
  color: var(--text-muted);
  font-size: .78rem;
  text-decoration: none;
  font-weight: 600;
  min-height: 44px;
  display: flex;
  align-items: center;
}
.btn-cookie-more:hover { color: var(--pink); }

/* ═══════════════════════════════════════════════════════════
   FLASH MESSAGES
   ═══════════════════════════════════════════════════════════ */
.flash-wrap {
  position: fixed;
  top: 1rem;
  right: 1rem;
  left: 1rem;
  z-index: 8000;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  pointer-events: none;
}
.flash {
  padding: .85rem 1.1rem;
  border-radius: var(--radius);
  font-weight: 700;
  font-size: .88rem;
  display: flex;
  align-items: center;
  gap: .5rem;
  animation: slideIn .35s ease forwards;
  pointer-events: all;
  max-width: 420px;
  margin-left: auto;
}
@keyframes slideIn {
  from { opacity: 0; transform: translateX(30px); }
  to   { opacity: 1; transform: translateX(0); }
}
.flash-error   { background: rgba(255,45,120,.12); border: 1px solid rgba(255,45,120,.35); color: var(--pink-light); }
.flash-success { background: rgba(57,255,20,.1);   border: 1px solid rgba(57,255,20,.35);  color: #7dff60; }

/* ═══════════════════════════════════════════════════════════
   SUCCESS PAGE
   ═══════════════════════════════════════════════════════════ */
.success-page { min-height: 100vh; background: var(--dark); }
.success-card {
  background: var(--glass);
  border: 1px solid rgba(57,255,20,.3);
  border-radius: 26px;
  padding: 2.5rem 2rem;
  text-align: center;
  max-width: 540px;
  width: 100%;
  backdrop-filter: blur(12px);
  position: relative;
  z-index: 1;
}
.success-anim  { font-size: 3.5rem; display: block; margin-bottom: .75rem; }
.success-title { font-family: 'Righteous', cursive; font-size: 2.4rem; color: var(--green); margin-bottom: .4rem; }
.success-sub   { color: var(--text-secondary); margin-bottom: 1.25rem; font-size: .97rem; }
.booking-summary {
  background: rgba(255,255,255,.05);
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
  margin-bottom: 1.25rem;
  text-align: left;
}
.bs-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: .5rem;
  padding: .45rem 0;
  border-bottom: 1px solid rgba(255,255,255,.06);
  font-size: .85rem;
}
.bs-row:last-child { border-bottom: none; }
.bs-label { color: var(--text-muted); flex-shrink: 0; display: flex; align-items: center; gap: .3rem; }
.bs-value { font-weight: 800; text-align: right; word-break: break-word; }
.success-tip {
  background: rgba(255,215,0,.1);
  border: 1px solid rgba(255,215,0,.3);
  border-radius: var(--radius);
  padding: .8rem 1rem;
  font-size: .83rem;
  color: var(--gold);
  margin-bottom: 1.25rem;
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  text-align: left;
}
.btn-back-home {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .65rem 1.4rem;
  min-height: 46px;
  background: var(--glass);
  border: 1px solid var(--glass-b);
  border-radius: var(--radius);
  color: var(--text-secondary);
  text-decoration: none;
  font-weight: 700;
  font-size: .88rem;
  transition: all .2s;
}
.btn-back-home:hover { background: var(--glass-h); color: var(--text); border-color: var(--pink); }

/* QR ticket block on success page */
.qr-ticket-wrap {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(0,212,255,.25);
  border-radius: var(--radius);
  padding: 1.25rem 1rem 1rem;
  margin-bottom: 1.25rem;
  text-align: center;
}
.qr-ticket-label {
  font-size: .8rem;
  font-weight: 800;
  color: var(--blue);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: .75rem;
}
.qr-ticket-img {
  display: block;
  margin: 0 auto .75rem;
  border-radius: 10px;
  border: 3px solid rgba(255,255,255,.12);
}
.qr-ticket-hint {
  font-size: .75rem;
  color: var(--text-muted);
  line-height: 1.4;
}

/* ═══════════════════════════════════════════════════════════
   PRIVACY PAGE
   ═══════════════════════════════════════════════════════════ */
.privacy-page { padding: 2rem 0 5rem; position: relative; z-index: 1; }
.privacy-card {
  background: var(--glass);
  border: 1px solid var(--glass-b);
  border-radius: var(--radius-lg);
  padding: 2.5rem;
  backdrop-filter: blur(10px);
  max-width: 860px;
  margin: 0 auto;
}
.privacy-title {
  font-family: 'Righteous', cursive;
  font-size: clamp(1.6rem, 4vw, 2rem);
  background: linear-gradient(135deg, var(--pink), var(--blue));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: .3rem;
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
}
.privacy-date { color: var(--text-muted); font-size: .82rem; margin-bottom: 2rem; }
.privacy-section { margin-bottom: 2rem; }
.privacy-section h2 {
  font-size: 1rem;
  font-weight: 800;
  color: var(--pink-light);
  margin-bottom: .7rem;
  padding-bottom: .4rem;
  border-bottom: 1px solid var(--glass-b);
}
.privacy-section p, .privacy-section li { color: var(--text-secondary); font-size: .88rem; }
.privacy-section a { color: var(--pink); }
.privacy-section ul { padding-left: 1.3rem; }
.privacy-section li { margin-bottom: .3rem; }

/* ═══════════════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════════════ */
footer {
  background: rgba(7,0,15,.8);
  border-top: 1px solid var(--glass-b);
  padding: 1.75rem 0;
  text-align: center;
  color: var(--text-muted);
  font-size: .8rem;
  position: relative;
  z-index: 1;
}
footer a { color: var(--pink); text-decoration: none; }
footer a:hover { text-decoration: underline; }

/* ═══════════════════════════════════════════════════════════
   ADMIN — LOGIN
   ═══════════════════════════════════════════════════════════ */
.admin-login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: var(--dark);
}
.login-wrap {
  width: 100%;
  max-width: 420px;
  background: var(--glass);
  border: 1px solid var(--glass-b);
  border-radius: var(--radius-lg);
  padding: 2.25rem 2rem;
  backdrop-filter: blur(12px);
  position: relative;
  z-index: 1;
}
.login-logo  { text-align: center; font-size: 2.8rem; margin-bottom: .65rem; }
.login-title {
  font-family: 'Righteous', cursive;
  text-align: center;
  font-size: 1.75rem;
  background: linear-gradient(135deg, var(--pink), var(--blue));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: .2rem;
}
.login-sub   { text-align: center; color: var(--text-muted); font-size: .82rem; margin-bottom: 1.5rem; }
.login-form .form-label { color: var(--text-secondary); }

/* ═══════════════════════════════════════════════════════════
   ADMIN — LAYOUT
   ═══════════════════════════════════════════════════════════ */
.admin-layout { display: flex; min-height: 100vh; }

/* Sidebar — always rendered, hidden via transform on mobile */
.admin-sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  background: rgba(11,0,22,.97);
  border-right: 1px solid var(--glass-b);
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  overflow-y: auto;
  z-index: 400;
  display: flex;
  flex-direction: column;
  transition: transform .28s cubic-bezier(.4,0,.2,1);
  overscroll-behavior: contain;
}
.admin-brand {
  padding: 1.2rem 1.4rem 1rem;
  border-bottom: 1px solid var(--glass-b);
  flex-shrink: 0;
}
.admin-brand a {
  font-family: 'Righteous', cursive;
  font-size: 1.15rem;
  text-decoration: none;
  background: linear-gradient(135deg, var(--pink), var(--blue));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: flex;
  align-items: center;
  gap: .4rem;
}
.admin-brand small { display: block; color: var(--text-muted); font-size: .7rem; margin-top: .15rem; }
.admin-nav { padding: .6rem 0; flex: 1; overflow-y: auto; }
.admin-nav-link {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .8rem 1.4rem;
  min-height: 48px;
  color: var(--text-secondary);
  text-decoration: none;
  font-weight: 700;
  font-size: .87rem;
  transition: background .15s, color .15s;
  border-left: 3px solid transparent;
}
.admin-nav-link:hover  { background: var(--glass); color: var(--text); }
.admin-nav-link.active { background: rgba(255,45,120,.1); color: var(--pink); border-left-color: var(--pink); }
.admin-nav-logout      { color: rgba(255,100,100,.7); }
.admin-nav-logout:hover{ color: #ff6060; }
.admin-nav-sep         { height: 1px; background: var(--glass-b); margin: .4rem 0; }
.admin-user {
  padding: .9rem 1.4rem;
  border-top: 1px solid var(--glass-b);
  font-size: .76rem;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-shrink: 0;
}

/* Mobile hamburger button */
.admin-mobile-toggle {
  display: none;
  position: fixed;
  top: .65rem;
  left: .65rem;
  z-index: 500;
  background: rgba(28,0,56,.95);
  border: 1px solid var(--glass-b);
  border-radius: 10px;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  color: var(--text);
  font-size: 1.2rem;
  cursor: pointer;
  backdrop-filter: blur(10px);
  transition: background .2s;
}
.admin-mobile-toggle:hover { background: rgba(255,45,120,.2); }

/* Sidebar overlay (backdrop) */
.admin-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.65);
  z-index: 350;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  cursor: pointer;
}
.admin-overlay.open { display: block; }

/* Main content area */
.admin-main {
  margin-left: var(--sidebar-w);
  flex: 1;
  padding: 1.75rem 2rem 3rem;
  min-height: 100vh;
  background: var(--dark);
  max-width: 100%;
}

/* Topbar */
.admin-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .75rem;
  margin-bottom: 1.5rem;
  padding-bottom: .9rem;
  border-bottom: 1px solid var(--glass-b);
}
.admin-topbar h1 {
  font-family: 'Righteous', cursive;
  font-size: clamp(1.3rem, 3.5vw, 1.65rem);
  background: linear-gradient(135deg, var(--pink), var(--blue));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin: 0;
  display: flex;
  align-items: center;
  gap: .45rem;
}

/* ── Admin Cards ─────────────────────────────────────────── */
.admin-card {
  background: var(--glass);
  border: 1px solid var(--glass-b);
  border-radius: var(--radius);
  padding: 1.25rem;
  backdrop-filter: blur(8px);
  margin-bottom: 1.25rem;
}
.admin-card-title {
  font-weight: 800;
  font-size: .88rem;
  margin-bottom: .9rem;
  padding-bottom: .6rem;
  border-bottom: 1px solid var(--glass-b);
  display: flex;
  align-items: center;
  gap: .45rem;
  flex-wrap: wrap;
}
.admin-card-action {
  margin-left: auto;
  font-size: .78rem;
  color: var(--pink);
  text-decoration: none;
  font-weight: 700;
}
.admin-card-action:hover { text-decoration: underline; }
.admin-card-hint {
  margin-left: auto;
  font-size: .74rem;
  color: var(--text-muted);
  font-weight: 400;
}

/* ── Stats Grid ──────────────────────────────────────────── */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}
.stat-card {
  background: var(--glass);
  border: 1px solid var(--glass-b);
  border-radius: var(--radius);
  padding: 1.2rem;
  backdrop-filter: blur(8px);
  transition: transform .25s, border-color .25s;
}
.stat-card:hover { transform: translateY(-3px); border-color: rgba(255,45,120,.3); }
.stat-icon  { font-size: 1.5rem; margin-bottom: .35rem; opacity: .85; }
.stat-value { font-family: 'Righteous', cursive; font-size: 2.1rem; line-height: 1; }
.stat-label { color: var(--text-muted); font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; margin-top: .2rem; }

/* ── Admin Tables ────────────────────────────────────────── */
/* Wrapper adds horizontal scroll + fade hint on overflow */
.table-scroll-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}
.admin-table-sm, .admin-table-full {
  width: 100%;
  border-collapse: collapse;
  font-size: .84rem;
  white-space: nowrap;   /* keep cells on one line; wrap is done per-cell when needed */
}
.admin-table-sm thead th,
.admin-table-full thead th {
  padding: .7rem 1rem;
  background: rgba(255,45,120,.08);
  color: var(--pink);
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 800;
  border-bottom: 1px solid var(--glass-b);
}
.admin-table-sm tbody td,
.admin-table-full tbody td {
  padding: .75rem 1rem;
  border-bottom: 1px solid rgba(255,255,255,.04);
  vertical-align: middle;
}
.admin-table-sm tbody tr:last-child td,
.admin-table-full tbody tr:last-child td { border-bottom: none; }
.admin-table-sm tbody tr:hover td,
.admin-table-full tbody tr:hover td { background: rgba(255,255,255,.02); }
.table-footer {
  padding: .65rem 1rem;
  font-size: .76rem;
  color: var(--text-muted);
  border-top: 1px solid var(--glass-b);
}
.mono          { font-family: 'Courier New', monospace; font-size: .8rem; }
.slot-mini-badge {
  display: inline-block;
  background: rgba(255,45,120,.1);
  border: 1px solid rgba(255,45,120,.2);
  border-radius: 6px;
  padding: .15rem .55rem;
  font-size: .76rem;
  line-height: 1.5;
  white-space: normal;
}

/* Tags */
.tag-kids, .tag-adults, .tag-all {
  padding: .2rem .6rem;
  border-radius: 50px;
  font-size: .7rem;
  font-weight: 800;
  white-space: nowrap;
}
.tag-kids   { background: rgba(57,255,20,.12);  border: 1px solid rgba(57,255,20,.3);  color: var(--green); }
.tag-adults { background: rgba(255,215,0,.12);  border: 1px solid rgba(255,215,0,.3);  color: var(--gold); }
.tag-all    { background: rgba(0,212,255,.1);   border: 1px solid rgba(0,212,255,.25); color: var(--blue); }

/* Badges */
.badge-active   { background: rgba(57,255,20,.12);  border:1px solid rgba(57,255,20,.3);  color:var(--green);     border-radius:50px; padding:.2rem .7rem; font-size:.7rem; font-weight:800; white-space:nowrap; }
.badge-inactive { background: rgba(255,255,255,.06); border:1px solid var(--glass-b);      color:var(--text-muted); border-radius:50px; padding:.2rem .7rem; font-size:.7rem; font-weight:800; white-space:nowrap; }
.status-toggle  { background: none; border: none; padding: 0; cursor: pointer; }

/* Icon buttons */
.btn-icon-edit, .btn-icon-del {
  border: none;
  border-radius: 7px;
  padding: .4rem .6rem;
  min-width: 34px;
  min-height: 34px;
  font-size: .8rem;
  cursor: pointer;
  transition: all .2s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.btn-icon-edit { background: rgba(0,212,255,.1); border:1px solid rgba(0,212,255,.25); color:var(--blue); }
.btn-icon-edit:hover { background: rgba(0,212,255,.2); }
.btn-icon-del  { background: rgba(255,45,120,.1); border:1px solid rgba(255,45,120,.25); color:var(--pink); }
.btn-icon-del:hover  { background: rgba(255,45,120,.2); }
.btn-icon-anon { background: rgba(255,215,0,.1); border:1px solid rgba(255,215,0,.25); color:var(--gold);
                 border-radius:7px; padding:.4rem .6rem; min-width:34px; min-height:34px; font-size:.8rem;
                 cursor:pointer; transition:all .2s; display:inline-flex; align-items:center; justify-content:center; }
.btn-icon-anon:hover { background: rgba(255,215,0,.2); }

/* Bookings table — anonymized rows + badges */
.booking-row-anon { opacity: .65; }
.badge-anon {
  display: inline-flex; align-items: center; gap: .3rem;
  background: rgba(255,215,0,.1); border: 1px solid rgba(255,215,0,.3);
  color: var(--gold); border-radius: 50px; padding: .15rem .65rem;
  font-size: .7rem; font-weight: 800; white-space: nowrap;
}
.badge-scanned {
  display: inline-flex; align-items: center; gap: .3rem;
  background: rgba(0,212,255,.1); border: 1px solid rgba(0,212,255,.3);
  color: var(--blue); border-radius: 50px; padding: .15rem .65rem;
  font-size: .7rem; font-weight: 800; white-space: nowrap;
}

/* Small action buttons */
.btn-primary-sm {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .55rem 1.1rem;
  min-height: 44px;
  background: linear-gradient(135deg, var(--pink), #c9006c);
  color: white;
  border: none;
  border-radius: var(--radius);
  font-weight: 800;
  font-size: .82rem;
  cursor: pointer;
  transition: transform .2s, box-shadow .2s;
  font-family: 'Nunito', sans-serif;
  text-decoration: none;
  white-space: nowrap;
}
.btn-primary-sm:hover { transform: scale(1.03); box-shadow: 0 4px 14px rgba(255,45,120,.4); color: white; }

.btn-secondary-sm {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .55rem 1.1rem;
  min-height: 44px;
  background: var(--glass);
  border: 1px solid var(--glass-b);
  color: var(--text-secondary);
  border-radius: var(--radius);
  font-weight: 700;
  font-size: .82rem;
  cursor: pointer;
  transition: all .2s;
  font-family: 'Nunito', sans-serif;
  text-decoration: none;
  white-space: nowrap;
}
.btn-secondary-sm:hover { background: var(--glass-h); color: var(--text); }

/* Slot occupancy rows (dashboard) */
.slot-occupancy-row {
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: .6rem 0;
  border-bottom: 1px solid rgba(255,255,255,.04);
}
.slot-occupancy-row:last-child { border-bottom: none; }
.so-info     { flex: 1; min-width: 0; }
.so-name     { font-weight: 800; font-size: .83rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.so-time     { font-size: .7rem; color: var(--text-muted); }
.so-bar-wrap { display: flex; align-items: center; gap: .45rem; flex-shrink: 0; min-width: 120px; }
.so-nums     { font-size: .78rem; color: var(--text-secondary); white-space: nowrap; }

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE BREAKPOINTS
   ═══════════════════════════════════════════════════════════

   1024px  →  sidebar becomes a slide-in drawer
    768px  →  reduce padding, 2-col stats, simplify layouts
    576px  →  full single-column, full-width flash messages
   ═══════════════════════════════════════════════════════════ */

/* ── ≤ 1024px : Drawer sidebar (tablets portrait + phones) ── */
@media (max-width: 1024px) {

  /* Sidebar becomes off-screen drawer */
  .admin-sidebar {
    transform: translateX(-100%);
    box-shadow: none;
    z-index: 400;
  }
  .admin-sidebar.open {
    transform: translateX(0);
    box-shadow: 6px 0 30px rgba(0,0,0,.6);
  }

  /* Overlay is activated via JS */
  /* (display: block added by .open class in admin.js) */

  /* Show hamburger toggle */
  .admin-mobile-toggle { display: flex; }

  /* Main content fills full width */
  .admin-main {
    margin-left: 0;
    padding: 1.25rem 1.25rem 3rem;
    padding-top: 4rem;   /* clear the hamburger button */
  }

  /* Stats: 2×2 on tablets */
  .stats-grid { grid-template-columns: repeat(2, 1fr); }

  /* Topbar: wrap button below heading if needed */
  .admin-topbar { gap: .6rem; }

  /* Tables: horizontal scroll */
  .admin-card.p-0 .table-responsive,
  .admin-card .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* ── ≤ 768px : Tablets portrait + large phones ─────────────── */
@media (max-width: 768px) {

  /* Hero */
  .hero { padding: 2.5rem 0 1.75rem; }
  .hero-desc { font-size: .88rem; }
  .age-schedule-row { gap: .5rem; }
  .age-info-pill { font-size: .75rem; padding: .35rem .85rem; }

  /* Slot grid: 1-column */
  .slots-grid { grid-template-columns: 1fr; gap: 1rem; }
  .slots-section { padding: 1.5rem 0 4rem; }
  .slot-time { font-size: 1.8rem; }

  /* Modal: push to bottom as a sheet on small tablets */
  .modal-dialog {
    margin: auto 0 0 0;
    max-width: 100%;
    width: 100%;
  }
  .disco-modal {
    border-radius: 20px 20px 0 0;
    border-bottom: none;
  }
  .modal-body { max-height: 75dvh; }

  /* Cookie banner */
  .cookie-banner-inner { gap: .75rem; }
  .cookie-icon { display: none; }   /* hide emoji on small screens to save space */
  .cookie-actions { width: 100%; justify-content: flex-start; gap: .5rem; }
  .btn-cookie-accept,
  .btn-cookie-necessary { flex: 1; justify-content: center; }

  /* Flash */
  .flash { max-width: 100%; }

  /* Privacy */
  .privacy-card { padding: 1.5rem 1.25rem; }
  .privacy-title { font-size: 1.5rem; }

  /* Success */
  .success-card { padding: 2rem 1.25rem; border-radius: 20px; }
  .success-title { font-size: 2rem; }

  /* Admin login */
  .login-wrap { padding: 2rem 1.5rem; }

  /* Admin topbar: stack vertically on small tablets */
  .admin-topbar {
    flex-direction: column;
    align-items: flex-start;
    gap: .65rem;
  }
  .admin-topbar h1 { font-size: 1.35rem; }

  /* Stats: still 2×2 */
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: .75rem; }
  .stat-value { font-size: 1.75rem; }
  .stat-label { font-size: .7rem; }

  /* Admin card occupancy: hide bar on very small (keep name+nums) */
  .so-bar-wrap { min-width: 90px; }

  /* Table: give cells room to breathe */
  .admin-table-sm td,
  .admin-table-full td,
  .admin-table-sm th,
  .admin-table-full th { padding: .65rem .8rem; font-size: .8rem; }

  /* Admin settings form: full-width columns */
  .admin-card .row.g-3 > [class*="col-md"] { flex: 0 0 100%; max-width: 100%; }
}

/* ── ≤ 576px : Phones ───────────────────────────────────────── */
@media (max-width: 576px) {

  /* Nav */
  .site-logo { font-size: 1.2rem; }

  /* Hero */
  .hero { padding: 2rem 0 1.5rem; }
  .hero-sub { font-size: .92rem; }
  .hero-desc { font-size: .82rem; }
  .age-info-pill { font-size: .73rem; padding: .3rem .75rem; }
  .age-info-pill small { display: none; }   /* too long on tiny screens */

  /* Slot cards */
  .slot-card { padding: 1.1rem; }
  .slot-time { font-size: 1.65rem; }
  .section-title { font-size: 1.2rem; }

  /* Flash: full-width, left-aligned */
  .flash-wrap { top: .75rem; right: .75rem; left: .75rem; }
  .flash { max-width: 100%; margin-left: 0; font-size: .82rem; }

  /* Cookie banner: compact */
  .cookie-banner { padding: .9rem 1rem; padding-bottom: calc(.9rem + env(safe-area-inset-bottom, 0px)); }
  .cookie-text strong { font-size: .82rem; }
  .cookie-text p { display: none; }   /* hide body text, keep title + buttons */
  .cookie-actions { gap: .4rem; }
  .btn-cookie-accept,
  .btn-cookie-necessary { font-size: .78rem; padding: .55rem .85rem; }
  .btn-cookie-more { display: none; }

  /* Privacy */
  .privacy-card { padding: 1.25rem 1rem; }
  .privacy-page { padding: 1.25rem 0 3rem; }

  /* Success */
  .success-card { padding: 1.75rem 1rem; }
  .success-title { font-size: 1.75rem; }
  .success-anim { font-size: 2.8rem; }
  .bs-row { font-size: .8rem; }

  /* Admin login */
  .login-wrap { padding: 1.75rem 1.25rem; border-radius: 18px; }
  .login-title { font-size: 1.5rem; }
  .login-logo  { font-size: 2.2rem; }

  /* Admin main: minimal padding */
  .admin-main { padding: .85rem .85rem 3rem; padding-top: 3.75rem; }
  .admin-topbar { gap: .5rem; margin-bottom: 1.1rem; }
  .admin-topbar h1 { font-size: 1.2rem; }

  /* Stats: 2 cols but smaller */
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: .6rem; }
  .stat-card  { padding: .9rem; }
  .stat-icon  { font-size: 1.3rem; }
  .stat-value { font-size: 1.5rem; }
  .stat-label { font-size: .65rem; }

  /* Admin card */
  .admin-card { padding: 1rem .9rem; }
  .admin-card-title { font-size: .82rem; }

  /* Tables */
  .admin-table-sm td,
  .admin-table-full td,
  .admin-table-sm th,
  .admin-table-full th { padding: .55rem .65rem; font-size: .76rem; }

  /* Buttons */
  .btn-primary-sm,
  .btn-secondary-sm { font-size: .78rem; padding: .5rem .9rem; }
  .btn-icon-edit,
  .btn-icon-del { padding: .35rem .5rem; min-width: 30px; min-height: 30px; }

  /* Slot occupancy: truncate long names */
  .so-name { font-size: .78rem; }
  .so-time { font-size: .66rem; }
  .so-bar-wrap { display: none; }   /* hide bar on tiny screens — nums already show */

  /* Admin settings: stack all fields */
  .admin-card .col-md-4,
  .admin-card .col-md-2,
  .admin-card .col-md-3,
  .admin-card .col-lg-6 { flex: 0 0 100%; max-width: 100%; }

  /* Form check text stays readable */
  .form-check-label { font-size: .78rem; }
  .consent-block { padding: .75rem .85rem; }
}

/* ── Safe-area padding for notched phones ───────────────────── */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  footer          { padding-bottom: calc(1.75rem + env(safe-area-inset-bottom)); }
  .slots-section  { padding-bottom: calc(5rem + env(safe-area-inset-bottom)); }
}

/* ── Disable hover transforms on touch devices ──────────────── */
@media (hover: none) {
  .slot-card:hover { transform: none; box-shadow: none; }
  .btn-book:hover  { transform: none; box-shadow: none; }
}