/* ==========================================================================
   BOOK MY ARENA — DESIGN SYSTEM
   Colors sampled directly from the master brand logo (assets/), not
   invented: green-500 and green-900 are the icon's shield-fill and
   wordmark-dark tones; lime is the "Arena" wordmark / ring-highlight tone.
   ========================================================================== */

:root {
  --green-50:#f0f6f2;  --green-100:#dceae1; --green-200:#b8d5c4;
  --green-300:#8dbca0; --green-400:#4e966b; --green-500:#02692b;
  --green-600:#025a28; --green-700:#014d25; --green-900:#012816;
  --lime:#3caf08;

  /* Bright theme. --accent is the TEXT-safe green (5.0:1 on white); bright
     fills use --cta, always with dark --cta-fg text (6.5:1) — white text on
     a bright green fails contrast (2.3:1). All pairs measured, see README. */
  --bg:#f5fbf7;        --bg-soft:#eef8f2;   --surface:#ffffff;
  --border:#dcebe2;    --text:#0f2a1c;      --text-soft:#4b6356;
  --text-faint:#5d7567;
  --cta:#22c55e; --cta-2:#4ade80; --cta-fg:#052e16;
  --shadow: 0 1px 2px rgba(11,27,17,.04), 0 8px 24px -12px rgba(11,27,17,.12);
  --glow: 0 12px 34px -14px rgba(34,197,94,.45);
  --radius:18px;
  --accent:#15803d;
  --accent-fg:#ffffff;

  /* Semantic aliases — same tokens above, named per the requested design-
     system convention. One source of truth: change a value once above and
     both naming schemes stay in sync. */
  --primary: #15803d;
  --primary-dark: var(--green-700);
  --primary-light: #86efac;
  --primary-soft: #e7f8ee;
  --background: var(--bg);
  --surface-alt: var(--bg-soft);
  --text-secondary: var(--text-soft);
  --text-muted: var(--text-faint);
  --success: #17793f;
  --warning: #9c6208;
  --danger: #c23b3b;
  --info: #1c6fb0;
}

.dark {
  --bg:#060d09;        --bg-soft:#0a140e;   --surface:#0e1a13;
  --border:#1c2f22;    --text:#eaf5ee;      --text-soft:#9db0a4;
  --text-faint:#6e8377;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6);
  --glow: 0 10px 32px -12px rgba(60,175,8,.28);
  --accent:var(--lime);
  --accent-fg:#06210f;
  --cta:#3caf08; --cta-2:#4ade80; --cta-fg:#06210f;

  --primary: var(--lime);
  --primary-dark: var(--green-300);
  --primary-light: var(--green-600);
  --primary-soft: rgba(60,175,8,.12);
  --background: var(--bg);
  --surface-alt: var(--bg-soft);
  --text-secondary: var(--text-soft);
  --text-muted: var(--text-faint);
  --success: #3ecb7a;
  --warning: #e0a934;
  --danger: #e8615f;
  --info: #5aa8e0;
}

* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body {
  margin:0;
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  transition:background .2s,color .2s;
}

h1,h2,h3,h4 { font-family:'Outfit',system-ui,sans-serif; margin:0; line-height:1.2; font-weight:600; }
h1 { font-size:clamp(1.75rem,4vw,2.5rem); font-weight:700; }
h2 { font-size:clamp(1.25rem,3vw,1.6rem); }
h3 { font-size:1.05rem; }
p { margin:0; }
a { color:inherit; text-decoration:none; }
img { max-width:100%; display:block; }

.hidden { display:none !important; }
.wrap { max-width:1140px; margin:0 auto; padding:0 20px; }
.wrap-narrow { max-width:620px; margin:0 auto; padding:0 20px; }
.wrap-narrow.gate-wide { max-width:900px; }

/* Subtle brand-color background behind login/register screens (§2) —
   a CSS gradient, not an image, so it's crisp at any size and free. */
.gate-bg {
  min-height:100vh;
  background:
    radial-gradient(ellipse 800px 500px at 15% -10%, color-mix(in srgb, var(--green-500) 10%, transparent), transparent),
    radial-gradient(ellipse 700px 500px at 100% 110%, color-mix(in srgb, var(--lime) 12%, transparent), transparent),
    var(--bg);
}

/* Password field with an eye-icon show/hide toggle */
.password-field { position:relative; }
.password-field .input { padding-right:44px; }
.password-toggle {
  position:absolute; right:6px; top:50%; transform:translateY(-50%);
  width:32px; height:32px; border:none; background:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  color:var(--text-faint); border-radius:8px; font-size:1rem;
}
.password-toggle:hover { background:var(--bg-soft); color:var(--text); }

.terms-row {
  display:flex; align-items:flex-start; gap:9px; font-size:.8rem;
  color:var(--text-soft); line-height:1.5;
}
.terms-row input[type="checkbox"] { margin-top:3px; flex-shrink:0; width:16px; height:16px; accent-color:var(--accent); }
.terms-row a { color:var(--accent); font-weight:600; }
.stack > * + * { margin-top:16px; }
.row { display:flex; align-items:center; gap:12px; }
.row-between { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.grid { display:grid; gap:16px; }
.muted { color:var(--text-soft); font-size:.875rem; }
.faint { color:var(--text-faint); font-size:.8rem; }
.center { text-align:center; }
.mt-lg { margin-top:32px; }
.mt-sm { margin-top:8px; }

/* ------------------------------------------------------------------ buttons */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border:none; border-radius:999px; padding:12px 22px;
  font-size:.9rem; font-weight:600; font-family:inherit;
  cursor:pointer; transition:.15s; white-space:nowrap;
  min-height:44px; /* §41 touch target */
}
.btn:active { transform:scale(.98); }
.btn:disabled { opacity:.5; cursor:not-allowed; transform:none; }
.btn-primary { background:var(--cta); color:var(--cta-fg); }
.btn-primary:hover:not(:disabled) { filter:brightness(1.08); }
.btn-secondary { background:transparent; color:var(--text); border:1px solid var(--border); }
.btn-secondary:hover:not(:disabled) { background:var(--bg-soft); }
.btn-danger { background:#dc2626; color:#fff; }
.btn-ghost { background:transparent; color:var(--text-soft); padding:8px 12px; min-height:36px; }
.btn-sm { padding:8px 16px; font-size:.8rem; min-height:36px; }
.btn-block { width:100%; }

/* -------------------------------------------------------------------- cards */
.card {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); box-shadow:var(--shadow);
}
.card-pad { padding:20px; }
.card-hover { transition:.18s; cursor:pointer; }
.card-hover:hover { transform:translateY(-2px); box-shadow:0 12px 28px -14px rgba(11,27,17,.25); }

/* ------------------------------------------------------------------- inputs */
.field { display:flex; flex-direction:column; gap:6px; }
.label { font-size:.78rem; font-weight:600; color:var(--text-soft); }
.input, select.input, textarea.input {
  width:100%; padding:12px 14px; font-size:.9rem; font-family:inherit;
  color:var(--text); background:var(--surface);
  border:1px solid var(--border); border-radius:10px;
  transition:border-color .15s; min-height:44px;
}
.input:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent); }
.input[readonly] { background:var(--bg-soft); color:var(--text-soft); cursor:not-allowed; }
textarea.input { min-height:90px; resize:vertical; }
.input-error { border-color:#dc2626; }
.error-text { color:#dc2626; font-size:.78rem; }

/* ------------------------------------------------------------------ badges */
.badge {
  display:inline-block; padding:4px 10px; border-radius:999px;
  font-size:.72rem; font-weight:600; letter-spacing:.01em; white-space:nowrap;
}
.st-green  { background:#dcfce7; color:#14532d; }
.st-amber  { background:#fef3c7; color:#78350f; }
.st-blue   { background:#dbeafe; color:#1e3a8a; }
.st-violet { background:#ede9fe; color:#4c1d95; }
.st-red    { background:#fee2e2; color:#7f1d1d; }
.st-grey   { background:#e5e7eb; color:#374151; }
.st-slate  { background:#e2e8f0; color:#1e293b; }
.dark .st-green  { background:#052e16; color:#86efac; }
.dark .st-amber  { background:#422006; color:#fcd34d; }
.dark .st-blue   { background:#172554; color:#93c5fd; }
.dark .st-violet { background:#2e1065; color:#c4b5fd; }
.dark .st-red    { background:#450a0a; color:#fca5a5; }
.dark .st-grey   { background:#1f2937; color:#d1d5db; }
.dark .st-slate  { background:#0f172a; color:#cbd5e1; }

/* ------------------------------------------------------------- skeleton/empty */
.skeleton {
  border-radius:var(--radius);
  background:linear-gradient(90deg,var(--bg-soft) 25%,var(--border) 50%,var(--bg-soft) 75%);
  background-size:200% 100%;
  animation:shimmer 1.4s infinite;
}
@keyframes shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

.empty { text-align:center; padding:48px 20px; }
.empty-icon { font-size:2.5rem; margin-bottom:12px; }
.empty-title { font-weight:600; font-size:1rem; }
.empty-body { color:var(--text-soft); font-size:.875rem; margin-top:4px; max-width:340px; margin-inline:auto; }
.empty .btn { margin-top:16px; }

/* -------------------------------------------------------------------- toast */
.toast-host { position:fixed; top:16px; left:50%; transform:translateX(-50%); z-index:600; display:flex; flex-direction:column; gap:8px; }
.toast {
  background:var(--surface); color:var(--text);
  border:1px solid var(--border); border-left:3px solid var(--accent);
  border-radius:10px; padding:12px 18px; font-size:.875rem; font-weight:500;
  box-shadow:0 8px 24px -8px rgba(0,0,0,.3);
  animation:toastIn .2s ease-out; max-width:90vw;
}
.toast-error { border-left-color:#dc2626; }
.toast-success { border-left-color:var(--green-500); }
.toast-out { opacity:0; transition:opacity .4s; }
@keyframes toastIn { from{opacity:0;transform:translateY(-8px)} to{opacity:1;transform:none} }

/* -------------------------------------------------------------------- modal */
.modal-backdrop {
  position:fixed; inset:0; background:rgba(4,12,7,.55); backdrop-filter:blur(2px);
  z-index:150; display:flex; align-items:center; justify-content:center; padding:16px;
}
.modal {
  background:var(--surface); border-radius:var(--radius);
  width:100%; max-width:560px; max-height:90vh; overflow-y:auto;
  box-shadow:0 24px 60px -20px rgba(0,0,0,.5);
  animation:toastIn .18s ease-out;
}
.modal-head { padding:20px; border-bottom:1px solid var(--border); display:flex; justify-content:space-between; align-items:center; position:sticky; top:0; background:var(--surface); border-radius:var(--radius) var(--radius) 0 0; }
.modal-body { padding:20px; }
.modal-foot { padding:16px 20px; border-top:1px solid var(--border); display:flex; gap:10px; }

/* --------------------------------------------------------------------- nav */
.topbar {
  position:sticky; top:0; z-index:50;
  background:color-mix(in srgb,var(--bg) 88%,transparent);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border);
}
.topbar-inner { display:flex; align-items:center; justify-content:space-between; min-height:62px; gap:16px; padding:8px 0; }
.brand { display:flex; align-items:center; gap:9px; font-family:'Outfit',sans-serif; font-weight:700; font-size:1.05rem; }
.brand-mark {
  width:34px; height:34px; border-radius:10px; display:grid; place-items:center;
  background:#ffffff; padding:3px; flex-shrink:0;
  box-shadow:0 0 0 1px var(--border);
}
.brand-mark img { width:100%; height:100%; object-fit:contain; display:block; }
.bma-icon { display:inline-block; vertical-align:-4px; flex-shrink:0; }
.side-link .bma-icon { vertical-align:-3px; opacity:.85; }
.side-link.active .bma-icon { opacity:1; }
.icon-btn {
  width:42px; height:42px; border-radius:50%; display:grid; place-items:center;
  border:1px solid var(--border); background:transparent; color:var(--text);
  cursor:pointer; font-size:1rem; flex-shrink:0;
}

/* Bottom tab bar — mobile (§34 customer nav) */
.tabbar {
  position:fixed; bottom:0; left:0; right:0; z-index:60;
  display:flex; background:var(--surface); border-top:1px solid var(--border);
  padding-bottom:env(safe-area-inset-bottom);
}
.tab {
  flex:1; padding:9px 4px; text-align:center; border:none; background:none;
  color:var(--text-faint); font-size:.68rem; font-weight:600; cursor:pointer;
  font-family:inherit; display:flex; flex-direction:column; align-items:center; gap:3px;
}
.tab.active { color:var(--accent); }
.tab-icon { display:flex; align-items:center; justify-content:center; line-height:1; }
.tab-badge {
  position:absolute; transform:translate(12px,-4px);
  background:#dc2626; color:#fff; border-radius:999px;
  font-size:.6rem; padding:1px 5px; font-weight:700;
}

/* Sidebar — partner/admin desktop */
.shell { display:flex; min-height:100vh; }
.sidebar {
  width:230px; flex-shrink:0; background:var(--surface);
  border-right:1px solid var(--border); padding:20px 14px;
  display:flex; flex-direction:column; gap:4px;
}
.side-link {
  display:flex; align-items:center; gap:10px; padding:11px 13px;
  border-radius:10px; font-size:.875rem; font-weight:500;
  color:var(--text-soft); cursor:pointer; border:none; background:none;
  font-family:inherit; text-align:left; width:100%;
}
.side-link:hover { background:var(--bg-soft); color:var(--text); }
.side-link.active { background:var(--cta); color:var(--cta-fg); font-weight:600; }
.main { flex:1; background:var(--bg-soft); padding:24px; min-width:0; }

/* -------------------------------------------------------------------- stats */
.stat-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px; }
.stat { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:18px; }
.stat-label { font-size:.75rem; color:var(--text-soft); font-weight:500; }
.stat-value { font-family:'Outfit',sans-serif; font-size:1.65rem; font-weight:700; margin-top:4px; }

/* --------------------------------------------------------- dashboard welcome */
.page-welcome { margin-bottom:22px; }
.page-welcome h1 { font-size:clamp(1.4rem,3vw,1.8rem); }
.page-welcome p { color:var(--text-soft); margin-top:4px; font-size:.9rem; }

/* ------------------------------------------------------- featured KPI cards */
.kpi-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:16px; margin-bottom:24px; }
.kpi-card {
  background:var(--surface); border:1px solid var(--border); border-radius:18px;
  padding:20px 22px; box-shadow:var(--glow); position:relative; overflow:hidden;
  display:flex; align-items:flex-start; justify-content:space-between; gap:12px;
  transition:transform .18s ease, box-shadow .18s ease;
}
.kpi-card:hover { transform:translateY(-2px); }
.kpi-card-icon {
  width:42px; height:42px; border-radius:12px; flex-shrink:0;
  background:var(--primary-soft); color:var(--primary);
  display:grid; place-items:center;
}
.dark .kpi-card-icon { background:rgba(60,175,8,.14); }
.kpi-card-label { font-size:.78rem; color:var(--text-soft); font-weight:600; }
.kpi-card-value { font-family:'Outfit',sans-serif; font-size:1.85rem; font-weight:700; margin-top:6px; }

/* Row-based dashboard layout — collapses to one column below 992px.
   min-width:0 on the direct children overrides CSS Grid's default
   min-width:auto, which otherwise lets a child's intrinsic content width
   (a long title, an unbroken slideshow) force the grid track — and the
   whole page — wider than the viewport instead of wrapping/shrinking. */
.dash-row { display:grid; gap:16px; margin-top:16px; }
.dash-row-2 { grid-template-columns:1.6fr 1fr; }
.dash-row-3 { grid-template-columns:1fr 1fr 1fr; }
.dash-row > * { min-width:0; }
@media (max-width:992px) {
  .dash-row-2, .dash-row-3 { grid-template-columns:1fr; }
}

/* -------------------------------------------------------------------- table */
.table-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }
table { width:100%; border-collapse:collapse; font-size:.85rem; }
th {
  text-align:left; padding:10px 14px; font-size:.72rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.04em; color:var(--text-faint);
  border-bottom:1px solid var(--border); white-space:nowrap;
}
td { padding:13px 14px; border-bottom:1px solid var(--border); vertical-align:middle; }
tbody tr:hover { background:var(--bg-soft); }

/* --------------------------------------------------------------- turf cards */
.turf-card { overflow:hidden; display:flex; flex-direction:column; }
.turf-img { aspect-ratio:16/10; background:var(--bg-soft); position:relative; overflow:hidden; }
.turf-img img { width:100%; height:100%; object-fit:cover; }
.turf-img-empty { display:grid; place-items:center; height:100%; font-size:2rem; opacity:.3; }
.turf-body { padding:16px; flex:1; display:flex; flex-direction:column; gap:7px; }
.chip-row { display:flex; flex-wrap:wrap; gap:5px; }
.chip {
  background:var(--green-50); color:var(--green-700);
  padding:3px 9px; border-radius:999px; font-size:.7rem; font-weight:600;
}
.dark .chip { background:rgba(139,197,63,.13); color:var(--lime); }
.price-tag { font-family:'Outfit',sans-serif; font-weight:700; color:var(--accent); font-size:1.05rem; }
.rating { display:inline-flex; align-items:center; gap:4px; font-size:.8rem; font-weight:600; }


/* ------------------------------------------------------------- hero (§5)
   Original sports illustration (assets/hero-sports.svg) that fades into the
   page background via CSS masks, so it blends into BOTH themes without a
   second image. Desktop: art on the right, masked to transparent under the
   headline so text sits on the page background (readable in light & dark).
   Mobile: art is a banner on top, fading into the content below. */
.hero { position:relative; overflow:hidden; }
.hero-art {
  background:url("assets/hero-sports.svg") center 60% / cover no-repeat;
  height:220px; border-radius:var(--radius); margin-top:14px;
  -webkit-mask-image:linear-gradient(to bottom, #000 55%, transparent 100%);
          mask-image:linear-gradient(to bottom, #000 55%, transparent 100%);
}
.hero-copy { position:relative; }
@media (min-width:900px) {
  .hero { min-height:440px; display:flex; align-items:center; }
  .hero-art {
    position:absolute; inset:0 0 0 32%; height:auto; margin:0; border-radius:0;
    -webkit-mask-image:linear-gradient(to right, transparent 0%, #000 38%), linear-gradient(to bottom, #000 72%, transparent 100%);
    -webkit-mask-composite:source-in;
            mask-image:linear-gradient(to right, transparent 0%, #000 38%), linear-gradient(to bottom, #000 72%, transparent 100%);
            mask-composite:intersect;
  }
  .hero-copy { max-width:46%; padding:40px 0; }
}

/* ------------------------------------------------------ sport chips (§6)
   Multi-select. Selected state uses fill + border + a visible tick, so it
   doesn't rely on colour alone; 44px min height for touch. */
.sport-chip {
  display:inline-flex; align-items:center; gap:6px; min-height:44px;
  padding:8px 16px; border-radius:999px; cursor:pointer; font:inherit;
  font-size:.85rem; font-weight:600; color:var(--text);
  background:var(--surface); border:1.5px solid var(--border);
  transition:background .15s, border-color .15s, color .15s, transform .1s;
}
.sport-chip:hover { border-color:var(--accent); }
.sport-chip:active { transform:scale(.97); }
.sport-chip-tick {
  width:0; overflow:hidden; opacity:0; font-size:.8rem;
  transition:width .15s, opacity .15s;
}
.sport-chip.selected { background:var(--primary-soft); border-color:var(--accent); color:var(--primary); }
.sport-chip.selected .sport-chip-tick { width:12px; opacity:1; }
.dark .sport-chip.selected { color:var(--lime); }

/* --------------------------------------------------------------- slot grid */
.slot-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(88px,1fr)); gap:9px; }
.slot {
  padding:11px 6px; border-radius:10px; border:1px solid var(--border);
  background:var(--surface); font-size:.78rem; font-weight:600; font-family:inherit;
  color:var(--text); cursor:pointer; position:relative; min-height:46px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
}
.slot:hover:not(:disabled) { border-color:var(--accent); }
.slot.selected { background:var(--cta); color:var(--cta-fg); border-color:var(--cta); }
.slot:disabled { opacity:.35; cursor:not-allowed; text-decoration:line-through; }
.slot-price { font-size:.66rem; font-weight:500; opacity:.75; }
.slot-peak::after { content:"⚡"; position:absolute; top:3px; right:5px; font-size:.6rem; }

/* --------------------------------------------------------------- date strip */
.date-strip { display:flex; gap:8px; overflow-x:auto; padding-bottom:6px; scrollbar-width:none; }
.date-strip::-webkit-scrollbar { display:none; }
.date-pill {
  flex-shrink:0; min-width:60px; padding:9px 12px; border-radius:12px;
  border:1px solid var(--border); background:var(--surface); cursor:pointer;
  text-align:center; font-family:inherit; color:var(--text);
}
.date-pill.selected { background:var(--cta); color:var(--cta-fg); border-color:var(--cta); }
.date-dow { font-size:.65rem; text-transform:uppercase; font-weight:600; opacity:.7; }
.date-day { font-size:1.15rem; font-weight:700; font-family:'Outfit',sans-serif; }

/* ------------------------------------------------------------------ gallery */
.gallery { display:grid; grid-template-columns:repeat(auto-fill,minmax(110px,1fr)); gap:10px; }
.gallery-item { position:relative; aspect-ratio:1; border-radius:10px; overflow:hidden; border:1px solid var(--border); }
.gallery-item img, .gallery-item video { width:100%; height:100%; object-fit:cover; }
.gallery-actions { position:absolute; top:5px; right:5px; display:flex; gap:4px; }
.gallery-btn {
  width:26px; height:26px; border-radius:6px; border:none; cursor:pointer;
  background:rgba(0,0,0,.65); color:#fff; font-size:.7rem; display:grid; place-items:center;
}
.cover-flag {
  position:absolute; bottom:5px; left:5px; background:var(--cta); color:var(--cta-fg);
  font-size:.6rem; font-weight:700; padding:2px 7px; border-radius:999px;
}

/* ----------------------------------------------------------------- QR block */
.qr-box { display:flex; flex-direction:column; align-items:center; gap:14px; padding:22px; }
.qr-canvas { padding:14px; background:#fff; border-radius:12px; border:1px solid var(--border); }
.qr-canvas img, .qr-canvas canvas { display:block; }
.pay-amount { font-family:'Outfit',sans-serif; font-size:2.1rem; font-weight:700; color:var(--accent); }
.notice {
  background:#fff7ed; border:1px solid #fed7aa; color:#7c2d12;
  border-radius:12px; padding:14px 16px; font-size:.85rem; line-height:1.5;
}
.dark .notice { background:#2a1505; border-color:#7c2d12; color:#fdba74; }
.notice strong { display:block; margin-bottom:3px; }

.countdown { font-variant-numeric:tabular-nums; font-weight:700; }
.countdown.urgent { color:#dc2626; }

/* --------------------------------------------------------------- star input */
.stars { display:flex; gap:5px; }
.star {
  background:none; border:none; cursor:pointer; font-size:1.6rem;
  padding:0; line-height:1; color:#d4d4d8; transition:transform .1s;
}
.star.on { color:#f59e0b; }
.star:active { transform:scale(1.18); }

/* -------------------------------------------------------------- responsive */
@media (max-width:900px) {
  .sidebar {
    position:fixed; inset:0 auto 0 0; z-index:100; transform:translateX(-100%);
    transition:transform .22s; box-shadow:0 0 40px rgba(0,0,0,.3);
  }
  .sidebar.open { transform:none; }
  .main { padding:16px; }
}
@media (max-width:640px) {
  .wrap, .wrap-narrow { padding:0 16px; }
  .card-pad { padding:16px; }
  .stat-value { font-size:1.4rem; }
  .has-tabbar { padding-bottom:76px; }
}

/* ------------------------------------------------------------- slideshow
   §4: hero banner carousel on the customer homepage.                     */
.slideshow {
  position:relative; border-radius:var(--radius); overflow:hidden;
  aspect-ratio:16/7; background:var(--bg-soft); outline:none;
}
.slideshow-track { display:flex; height:100%; transition:transform .5s cubic-bezier(.4,0,.2,1); }
.slideshow-slide {
  flex:0 0 100%; height:100%; position:relative; border:none; padding:0; margin:0;
  cursor:pointer; background:var(--bg-soft); display:block;
}
.slideshow-slide img { width:100%; height:100%; object-fit:cover; }
.slideshow-slide.img-broken img { display:none; }
.slideshow-slide.img-broken::after {
  content:"🖼"; position:absolute; inset:0; display:flex; align-items:center;
  justify-content:center; font-size:2rem; opacity:.3;
}
.slideshow-caption {
  position:absolute; left:0; right:0; bottom:0; padding:20px 24px 16px;
  background:linear-gradient(to top, rgba(0,0,0,.72), transparent);
  color:#fff; text-align:left; display:flex; flex-direction:column; gap:2px;
}
.slideshow-caption strong { font-family:'Outfit',sans-serif; font-size:1.1rem; }
.slideshow-caption span { font-size:.82rem; opacity:.9; }
.slideshow-nav {
  position:absolute; top:50%; transform:translateY(-50%);
  width:38px; height:38px; border-radius:50%; border:none;
  background:rgba(0,0,0,.4); color:#fff; font-size:1.3rem; cursor:pointer;
  display:flex; align-items:center; justify-content:center; z-index:2;
}
.slideshow-nav:hover { background:rgba(0,0,0,.6); }
.slideshow-nav.prev { left:12px; } .slideshow-nav.next { right:12px; }
.slideshow-dots {
  position:absolute; bottom:12px; left:50%; transform:translateX(-50%);
  display:flex; gap:6px; z-index:2;
}
.slideshow-dot {
  width:7px; height:7px; border-radius:50%; border:none; padding:0;
  background:rgba(255,255,255,.5); cursor:pointer;
}
.slideshow-dot.active { background:#fff; width:18px; border-radius:4px; }
@media (max-width:640px) { .slideshow { aspect-ratio:4/3; } .slideshow-nav { width:32px; height:32px; font-size:1.1rem; } }

.gallery-caption {
  position:absolute; left:0; right:0; bottom:0; padding:8px 10px;
  background:linear-gradient(to top, rgba(0,0,0,.7), transparent);
  color:#fff; font-size:.72rem;
}

/* -------------------------------------------------------- auth split view
   §6/§7: login/register photo panel. Purely decorative — auth works with
   or without it, so a failed image never blocks the form.                */
.auth-split { display:grid; grid-template-columns:1fr; min-height:100vh; }
.auth-photo {
  display:none; position:relative; background:var(--green-900);
  overflow:hidden;
}
.auth-photo .slideshow { border-radius:0; height:100%; aspect-ratio:auto; }
.auth-photo-overlay {
  position:absolute; inset:0; background:linear-gradient(180deg, rgba(6,15,9,.2), rgba(6,15,9,.75));
  display:flex; align-items:flex-end; padding:40px; color:#fff;
}
.auth-form-side { display:flex; align-items:center; justify-content:center; padding:32px 20px; }
@media (min-width:900px) {
  .auth-split { grid-template-columns:1fr 1fr; }
  .auth-photo { display:block; }
}

/* ------------------------------------------------------------ animations
   §7: lightweight, 200–400ms, no bounce. All respect prefers-reduced-motion
   via the blanket override at the bottom of this file.                   */
@keyframes fade-in-up {
  from { opacity:0; transform:translateY(10px); }
  to   { opacity:1; transform:none; }
}
.animate-fade-in { animation:fade-in-up .4s cubic-bezier(.2,.7,.3,1) both; }

/* Scroll-reveal: elements start hidden+offset, JS (initScrollReveal in
   bma-shared.js) adds .in-view via IntersectionObserver as they enter
   the viewport. No JS present / observer unsupported = content still
   shows (no .reveal class applied means full opacity by default). */
.reveal { opacity:0; transform:translateY(16px); transition:opacity .5s ease, transform .5s cubic-bezier(.2,.7,.3,1); }
.reveal.in-view { opacity:1; transform:none; }

/* Section/page view transitions (index.html's go()) */
.view-transition-out { opacity:0; transform:translateY(6px); }
.view-transition-in { animation:fade-in-up .3s ease both; }



/* ==========================================================================
   MODERN BRIGHT LAYER
   One place for the refreshed look: airy mint backdrop, glassy sticky
   header, floating rounded tab bar, gradient pill CTAs (dark text, see
   tokens), softer bigger cards with a green glow, roomier inputs. Applies
   to all three portals. Dark theme stays available from the toggle.
   ========================================================================== */
body {
  background:
    radial-gradient(1100px 520px at 100% -8%, #dcfce7 0%, transparent 60%),
    radial-gradient(900px 480px at -12% -4%, #e0f2fe 0%, transparent 55%),
    var(--bg);
  background-attachment:fixed;
}
.dark body { background:var(--bg); }
.dark .hero-art { background-image:url("assets/hero-sports-night.svg"); }

.topbar {
  background:rgba(255,255,255,.72);
  backdrop-filter:saturate(180%) blur(16px); -webkit-backdrop-filter:saturate(180%) blur(16px);
  border-bottom:1px solid rgba(220,235,226,.9);
}
.dark .topbar { background:rgba(6,13,9,.78); border-bottom-color:var(--border); }
.brand { font-weight:800; letter-spacing:-.01em; }

/* Buttons */
.btn { font-weight:700; letter-spacing:.005em; transition:transform .15s, box-shadow .15s, background .15s, border-color .15s; }
.btn-primary {
  background:linear-gradient(135deg, var(--cta) 0%, var(--cta-2) 100%);
  color:var(--cta-fg);
  box-shadow:0 8px 22px -10px rgba(34,197,94,.7);
}
.btn-primary:hover:not(:disabled) { filter:none; transform:translateY(-1px); box-shadow:0 12px 28px -10px rgba(34,197,94,.8); }
.btn-secondary { background:var(--surface); border:1.5px solid var(--border); box-shadow:0 1px 2px rgba(15,42,28,.05); }
.btn-secondary:hover:not(:disabled) { border-color:var(--cta); background:var(--primary-soft); }
.btn:focus-visible, .input:focus-visible, .chip:focus-visible, .sport-chip:focus-visible, .tab:focus-visible, .side-link:focus-visible {
  outline:3px solid rgba(34,197,94,.55); outline-offset:2px;
}

/* Cards & stats */
.card, .stat, .kpi-card {
  border-radius:20px; border:1px solid var(--border);
  box-shadow:0 1px 2px rgba(15,42,28,.04), 0 12px 32px -20px rgba(22,163,74,.35);
}
.card-hover:hover { transform:translateY(-4px); border-color:#bbf7d0; box-shadow:0 20px 44px -20px rgba(22,163,74,.45); }
.kpi-card-icon { background:linear-gradient(135deg,#dcfce7,#bbf7d0); color:#15803d; }
.dark .kpi-card-icon { background:rgba(60,175,8,.16); color:var(--lime); }

/* Inputs */
.input, select.input, textarea.input { min-height:48px; border-radius:14px; border-width:1.5px; background:var(--surface); }
.input:focus { border-color:var(--cta); box-shadow:0 0 0 4px rgba(34,197,94,.18); }

/* Chips (home sport filter etc.) */
.chip { border-radius:999px; font-weight:600; }
#sport-chips .chip { min-height:38px; padding:8px 16px; background:var(--surface); border:1.5px solid var(--border); }
#sport-chips .chip { cursor:pointer; color:var(--text); }
#sport-chips .chip.active { border-color:var(--cta); background:linear-gradient(135deg,var(--cta),var(--cta-2)); color:var(--cta-fg); box-shadow:0 6px 16px -10px rgba(34,197,94,.8); }

/* Arena cards */
.turf-card { border-radius:22px; }
.turf-img { aspect-ratio:16/10; }
.turf-img img { transition:transform .4s ease; }
.turf-card:hover .turf-img img { transform:scale(1.05); }
.turf-img-empty {
  display:grid; place-items:center; height:100%; opacity:1; color:#15803d;
  background:linear-gradient(135deg,#dcfce7 0%,#bbf7d0 60%,#86efac 100%);
}
.dark .turf-img-empty { background:linear-gradient(135deg,#0e1a13,#14532d); color:var(--lime); }
.price-tag { font-family:'Outfit',sans-serif; font-weight:800; color:var(--accent); }

/* Hero headline: brighter two-tone green (both stops >= 3:1, large text) */
.hero h1 span { background:linear-gradient(90deg,#15803d 0%,#16a34a 100%); -webkit-background-clip:text; background-clip:text; color:transparent !important; }
.dark .hero h1 span { background:linear-gradient(90deg,var(--lime),#4ade80); -webkit-background-clip:text; background-clip:text; }

/* Floating tab bar. The bar is fixed at every width, but space was only
   reserved for it at <=640px, so on tablet/desktop it covered the end of
   the page. Space is now reserved at every width. */
.tabbar {
  left:12px; right:12px; bottom:calc(10px + env(safe-area-inset-bottom)); padding:6px; padding-bottom:6px;
  border:1px solid rgba(220,235,226,.9); border-radius:22px;
  background:rgba(255,255,255,.86);
  backdrop-filter:saturate(180%) blur(16px); -webkit-backdrop-filter:saturate(180%) blur(16px);
  box-shadow:0 14px 34px -16px rgba(15,42,28,.35);
  max-width:560px; margin:0 auto;
}
.dark .tabbar { background:rgba(14,26,19,.9); border-color:var(--border); }
.tab { border-radius:16px; min-height:52px; justify-content:center; transition:background .15s, color .15s; }
.tab.active { background:var(--primary-soft); color:#15803d; }
.dark .tab.active { background:rgba(60,175,8,.14); color:var(--lime); }
.has-tabbar { padding-bottom:calc(96px + env(safe-area-inset-bottom)); }
@media (max-width:640px) { .has-tabbar { padding-bottom:calc(96px + env(safe-area-inset-bottom)); } }

/* Sidebar (partner/admin) */
.sidebar { background:rgba(255,255,255,.85); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); }
.dark .sidebar { background:var(--surface); }
.side-link { border-radius:12px; transition:background .15s, color .15s; }
.side-link.active { background:linear-gradient(135deg,var(--cta),var(--cta-2)); box-shadow:0 8px 20px -12px rgba(34,197,94,.8); }
.side-link:hover:not(.active) { background:var(--primary-soft); }
.main { background:transparent; }

/* Booking pickers */
.slot, .date-pill { border-radius:14px; border-width:1.5px; transition:transform .12s, background .15s, border-color .15s; }
.slot:hover:not(:disabled), .date-pill:hover { border-color:var(--cta); }
.slot.selected, .date-pill.selected { background:linear-gradient(135deg,var(--cta),var(--cta-2)); box-shadow:0 8px 18px -10px rgba(34,197,94,.8); }

/* Modals & toasts */
.modal { border-radius:24px; box-shadow:0 30px 70px -30px rgba(15,42,28,.5); }
.modal-head { border-radius:24px 24px 0 0; }
.toast { border-radius:14px; box-shadow:0 14px 34px -14px rgba(15,42,28,.35); }


/* ==========================================================================
   OCT UPDATE — slot ranges, date picker, payment option, UPI apps, entry
   pass, booking summary, login-first gate, print.
   ========================================================================== */

/* Slot ranges ("6:00 PM – 7:00 PM") need wider tiles than a single time. */
.slot-grid { grid-template-columns:repeat(auto-fill,minmax(148px,1fr)); }
.slot { min-height:58px; padding:10px 8px; font-size:.8rem; }
.slot-time { white-space:nowrap; }
.slot-state { font-size:.66rem; font-weight:700; letter-spacing:.02em; text-transform:uppercase; }
.slot.booked { background:var(--bg-soft); border-style:dashed; color:var(--text-faint); cursor:not-allowed; }
.slot.booked .slot-time { text-decoration:line-through; }
.slot.in-process { background:#fff7e6; border:1.5px dashed #e0a43a; color:#8a5a00; cursor:not-allowed; }
.slot.in-process .slot-state { color:#8a5a00; font-weight:600; }
@media (max-width:360px) { .slot-grid { grid-template-columns:1fr 1fr; } .slot { font-size:.74rem; } }

/* Date picker next to the date strip */
.date-picker-row { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.date-picker-row .input { width:auto; min-width:170px; flex:1 1 170px; max-width:260px; }

/* Payment option: full vs 50% advance */
.pay-options { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.pay-option {
  display:flex; flex-direction:column; gap:2px; text-align:left; cursor:pointer;
  padding:14px; border-radius:16px; border:1.5px solid var(--border); background:var(--surface);
  font-family:inherit; color:var(--text); transition:border-color .15s, background .15s;
}
.pay-option strong { font-family:'Outfit',sans-serif; font-size:1.15rem; }
.pay-option small { color:var(--text-soft); font-size:.75rem; }
.pay-option[aria-pressed="true"] { border-color:var(--cta); background:var(--primary-soft); box-shadow:0 0 0 3px rgba(34,197,94,.15); }
.pay-option[aria-pressed="true"]::before { content:"✓ Selected"; font-size:.68rem; font-weight:700; color:var(--accent); }
.pay-option:disabled { opacity:.6; cursor:not-allowed; }
@media (max-width:380px) { .pay-options { grid-template-columns:1fr; } }

/* Bottom sheet on phones (UPI apps) */
@media (max-width:640px) {
  .modal-backdrop:has(.sheet) { align-items:flex-end; padding:0; }
  .modal.sheet { border-radius:24px 24px 0 0; max-height:85vh; padding-bottom:env(safe-area-inset-bottom); }
}
.upi-app-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); gap:10px; }
.upi-app {
  display:flex; flex-direction:column; align-items:center; gap:6px; padding:12px 6px; min-height:84px;
  border-radius:16px; border:1.5px solid var(--border); background:var(--surface);
  font-size:.78rem; font-weight:600; color:var(--text); text-align:center;
}
.upi-app:active { transform:scale(.97); }
.upi-app-badge {
  width:40px; height:40px; border-radius:12px; display:grid; place-items:center;
  background:linear-gradient(135deg,var(--cta),var(--cta-2)); color:var(--cta-fg); font-weight:800;
}

/* Entry pass */
.pass-card { text-align:center; }
.pass-qr { display:grid; place-items:center; padding:14px; background:#fff; border-radius:18px; border:1px solid var(--border); margin:0 auto; width:fit-content; max-width:100%; }
.pass-qr canvas, .pass-qr img { width:min(240px, 70vw) !important; height:auto !important; }
.pass-steps { display:grid; grid-template-columns:1fr 1fr; gap:8px; text-align:left; }
.pass-step { padding:10px 12px; border-radius:14px; border:1px solid var(--border); background:var(--bg-soft); font-size:.8rem; }
.pass-step.done { border-color:#86efac; background:var(--primary-soft); }
.pass-step strong { display:block; font-size:.72rem; text-transform:uppercase; letter-spacing:.04em; color:var(--text-soft); }

/* Booking summary */
.sum-head { display:flex; justify-content:space-between; align-items:flex-start; gap:10px; flex-wrap:wrap; padding-bottom:12px; border-bottom:1px solid var(--border); }
.sum-block { padding:12px 0; border-bottom:1px solid var(--border); }
.sum-block:last-child { border-bottom:none; }
.sum-block h4 { font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--text-soft); margin:0 0 6px; }
.sum-row { display:flex; justify-content:space-between; gap:14px; padding:4px 0; font-size:.88rem; }
.sum-row span { color:var(--text-soft); flex-shrink:0; }
.sum-row strong { text-align:right; font-weight:600; overflow-wrap:anywhere; }
.sum-row a { color:var(--accent); }

/* Login-first gate (customer). html.gated is set before first paint by the
   inline <head> script when there is no saved session, so the landing page
   never flashes for signed-out visitors. */
#auth-gate { display:none; }
html.gated #auth-gate { display:block; }
html.gated .topbar, html.gated main.view, html.gated .tabbar { display:none !important; }
html.gated body.has-tabbar { padding-bottom:0; }
.gate-shell { min-height:100vh; min-height:100dvh; display:grid; grid-template-columns:1fr; }
.gate-art { display:none; position:relative; background:url("assets/hero-sports.svg") center/cover; }
.gate-art::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 40%, rgba(5,46,22,.55)); }
.gate-art-copy { position:absolute; left:40px; right:40px; bottom:40px; color:#fff; z-index:1; }
.gate-art-copy h2 { font-size:2rem; color:#fff; }
.gate-form-side { display:flex; flex-direction:column; justify-content:center; padding:28px 20px 40px; max-width:460px; width:100%; margin:0 auto; }
@media (min-width:960px) {
  .gate-shell { grid-template-columns:1.1fr 1fr; }
  .gate-art { display:block; }
}

/* Partner sign-in shown from static HTML (see partner.html). */
html.has-session #static-login { display:none; }
html:not(.has-session) #static-skel { display:none; }
.auth-photo-panel {
  display:none; flex:1; min-width:0; min-height:420px;
  background:var(--green-900) url("assets/hero-sports.svg") center/cover;
}
.auth-photo-panel img { width:100%; height:100%; object-fit:cover; display:block; }
@media (min-width:900px) { .auth-photo-panel { display:block; } }

.stack-sm > * + * { margin-top:6px; }

/* Entry-pass scanner (partner / admin) */
.scan-frame { position:relative; border-radius:18px; overflow:hidden; background:#0b1b11; aspect-ratio:4/3; }
.scan-frame video { width:100%; height:100%; object-fit:cover; display:block; }
.scan-target { position:absolute; inset:14% 20%; border:3px solid rgba(255,255,255,.9); border-radius:18px; box-shadow:0 0 0 100vmax rgba(0,0,0,.28); }
.scan-manual { padding-top:12px; border-top:1px solid var(--border); }
.scan-manual .row .input { flex:1; min-width:0; }
.pass-verdict { display:flex; gap:12px; align-items:flex-start; padding:14px; border-radius:16px; border:1.5px solid var(--border); }
.pass-verdict strong { display:block; }
.pass-verdict span { font-size:.84rem; color:var(--text-soft); }
.pass-verdict.ok   { background:var(--primary-soft); border-color:#86efac; color:var(--primary); }
.pass-verdict.done { background:var(--bg-soft); }
.pass-verdict.bad  { background:#fee2e2; border-color:#fca5a5; color:#991b1b; }
.pass-verdict.bad span { color:#7f1d1d; }
.dark .pass-verdict.bad { background:#450a0a; border-color:#7f1d1d; color:#fecaca; }
.dark .pass-verdict.bad span { color:#fecaca; }
.pass-balance { display:flex; gap:10px; align-items:flex-start; cursor:pointer; }
.pass-balance input { width:20px; height:20px; margin-top:2px; flex-shrink:0; accent-color:var(--accent); }
.scan-cta { display:flex; flex-wrap:wrap; gap:14px; align-items:center; justify-content:space-between; }

/* Tables become stacked cards on phones and upright tablets (cells are labelled by labelTables()
   in bma-shared.js). No sideways scrolling to read a booking. */
.td-v { display:contents; }
@media (max-width:900px) {
  .table-wrap { overflow-x:visible; }
  table.cards-on-mobile, table.cards-on-mobile tbody { display:block; width:100%; }
  table.cards-on-mobile thead { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
  table.cards-on-mobile tr { display:block; padding:12px 16px; border-bottom:1px solid var(--border); }
  table.cards-on-mobile tr:last-child { border-bottom:none; }
  table.cards-on-mobile td {
    display:flex; justify-content:space-between; align-items:flex-start; gap:14px;
    padding:5px 0; border:none; text-align:right;
  }
  table.cards-on-mobile td::before {
    content:attr(data-label); flex:0 0 38%; max-width:38%; text-align:left;
    color:var(--text-soft); font-size:.74rem; font-weight:600; padding-top:2px;
  }
  table.cards-on-mobile td[data-label=""]::before { display:none; }
  table.cards-on-mobile td[colspan] { display:block; text-align:left; }
  table.cards-on-mobile .td-v { display:block; min-width:0; overflow-wrap:anywhere; }
  table.cards-on-mobile td .btn { margin:2px 0 2px 6px; }
}

/* Print / Save PDF of a booking summary: only the summary prints. */
@media print {
  body > *:not(#modal-host) { display:none !important; }
  #modal-host .modal-backdrop { position:static; background:none; backdrop-filter:none; padding:0; display:block; }
  #modal-host .modal { max-height:none; overflow:visible; box-shadow:none; border:none; max-width:none; }
  .no-print { display:none !important; }
  body { background:#fff !important; }
}

@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

/* From / To / Apply filter row (revenue pages): never wider than the screen */
.range-filter { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; align-items: end; }
.range-filter .input { min-width: 0; width: 100%; }
@media (max-width: 520px) {
  .range-filter { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .range-filter > .btn { grid-column: 1 / -1; }
}

/* "Forgot password?" sits clearly below the password box, at its right edge */
.forgot-link { text-align:right; margin:2px 0 0; font-size:.86rem; font-weight:600; }
.forgot-link a { color:var(--accent); }

/* Sign-in / register pages on phones and tablets: the sports picture is a
   banner above the form (on wide screens it sits beside the form). */
@media (max-width:959px) {
  .gate-shell { grid-template-rows:auto 1fr; }
  .gate-art { display:block; height:clamp(170px, 30vh, 300px); }
  .gate-art-copy { left:20px; right:20px; bottom:16px; }
  .gate-art-copy h2 { font-size:1.4rem; line-height:1.2; }
  .gate-art-copy p { font-size:.86rem; }
  .gate-form-side { justify-content:flex-start; padding-top:22px; }
}
@media (max-width:899px) {
  .auth-row { flex-direction:column; gap:0 !important; }
  .auth-row > .auth-photo-panel { display:block; flex:none; width:100%; min-height:0; height:clamp(150px, 26vh, 260px); }
}

/* Get directions / Call arena */
.arena-actions { display:flex; flex-wrap:wrap; gap:8px; }
.arena-actions .btn { white-space:normal; text-align:center; }
.arena-actions-block { flex-direction:column; }

/* Offers */
.offer-arena { display:flex; justify-content:space-between; align-items:center; gap:14px; width:100%; text-align:left; cursor:pointer; font:inherit; color:inherit; }
.offer-arena:hover, .offer-arena:focus-visible { border-color:var(--accent); }
.offer-turf-list { max-height:220px; overflow-y:auto; border:1px solid var(--border); border-radius:14px; padding:6px 10px; }
.offer-turf { display:flex; align-items:center; gap:10px; padding:8px 2px; cursor:pointer; }
.offer-turf input { width:18px; height:18px; accent-color:var(--accent); flex-shrink:0; }
.slot-price s { opacity:.6; font-weight:400; }

/* ─────────────── Sports animations (football on a string, cricket hit) ─────────────── */
.sport-anim { pointer-events:none; user-select:none; }
.sport-anim svg { display:block; width:100%; height:100%; overflow:visible; }
.anim-football .ball-swing { transform-origin:60px 0; animation:ball-swing 2.6s ease-in-out infinite alternate; }
.anim-football .ball-spin { animation:ball-wobble 2.6s ease-in-out infinite alternate; }
.anim-football .ball-shadow { transform-origin:60px 144px; animation:ball-shadow 2.6s ease-in-out infinite alternate; }
@keyframes ball-swing { from { transform:rotate(-16deg); } to { transform:rotate(16deg); } }
@keyframes ball-wobble { from { transform:translate(60px,98px) rotate(-25deg); } to { transform:translate(60px,98px) rotate(25deg); } }
@keyframes ball-shadow { 0% { transform:translateX(-24px) scaleX(.8); } 50% { transform:translateX(0) scaleX(1); } 100% { transform:translateX(24px) scaleX(.8); } }

.anim-cricket .bat-swing { transform-origin:80px 20px; animation:bat-swing 2.8s cubic-bezier(.5,0,.3,1) infinite; }
.anim-cricket .cricket-ball { animation:ball-hit 2.8s linear infinite; }
.anim-cricket .hit-burst { opacity:0; animation:hit-burst 2.8s linear infinite; }
.anim-cricket .bail { animation:none; }
@keyframes bat-swing {
  0%, 30% { transform:rotate(-55deg); }
  40% { transform:rotate(-62deg); }
  47% { transform:rotate(28deg); }
  60% { transform:rotate(40deg); }
  85%, 100% { transform:rotate(-55deg); }
}
@keyframes ball-hit {
  0% { transform:translate(232px,112px); opacity:0; }
  6% { opacity:1; }
  30% { transform:translate(160px,96px); }
  46% { transform:translate(98px,96px); }
  58% { transform:translate(150px,40px); }
  72% { transform:translate(230px,-20px); opacity:1; }
  73%, 100% { transform:translate(230px,-20px); opacity:0; }
}
@keyframes hit-burst { 0%, 45% { opacity:0; } 47% { opacity:1; } 56%, 100% { opacity:0; } }

/* Where they appear */
.gate-art .sport-anim[data-anim="football"] { position:absolute; top:0; right:12%; width:clamp(64px, 9vw, 110px); height:clamp(80px, 11vw, 138px); z-index:2; }
.gate-art .sport-anim[data-anim="cricket"] { position:absolute; left:6%; bottom:16%; width:clamp(150px, 20vw, 240px); height:clamp(82px, 11vw, 130px); z-index:2; opacity:.95; }
@media (max-width:959px) {
  .gate-art .sport-anim[data-anim="football"] { right:8%; width:62px; height:78px; }
  .gate-art .sport-anim[data-anim="cricket"] { left:auto; right:30%; bottom:auto; top:8px; width:120px; height:66px; }
}
.auth-photo-panel { position:relative; }
.auth-photo-panel .sport-anim[data-anim="football"] { position:absolute; top:0; right:14%; width:86px; height:108px; z-index:2; }
.auth-photo-panel .sport-anim[data-anim="cricket"] { position:absolute; left:8%; bottom:10%; width:200px; height:108px; z-index:2; }
@media (max-width:899px) {
  .auth-photo-panel .sport-anim[data-anim="football"] { width:60px; height:76px; right:10%; }
  .auth-photo-panel .sport-anim[data-anim="cricket"] { width:130px; height:70px; bottom:6%; }
}
.anim-strip { display:flex; align-items:flex-end; justify-content:center; gap:18px; height:96px; margin:0 auto 6px; }
.anim-strip .sport-anim[data-anim="football"] { width:62px; height:80px; }
.anim-strip .sport-anim[data-anim="cricket"] { width:150px; height:82px; }
.hero-anim { position:absolute; right:3%; bottom:8px; width:170px; height:92px; opacity:.9; z-index:1; }
@media (max-width:600px) { .hero-anim { width:120px; height:66px; right:2%; bottom:4px; opacity:.75; } }
.welcome-anim { width:140px; height:76px; flex-shrink:0; }

/* Gentle entrance for cards and pages */
@keyframes rise-in { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }
.view:not(.hidden) > .wrap > .card, .view:not(.hidden) > .wrap-narrow > .card, #page > .card, #page > .stat-grid { animation:rise-in .35s ease-out both; }
.card-hover { transition:transform .18s ease, box-shadow .18s ease; }
.card-hover:hover { transform:translateY(-3px); }

@media (prefers-reduced-motion: reduce) {
  .sport-anim *, .view > .wrap > .card, .view > .wrap-narrow > .card, #page > .card, #page > .stat-grid { animation:none !important; transition:none !important; }
}

/* ------------------------------------------------------------------
   Navigation drawer: ☰ at the top-left on phones and tablets.
   Portals reuse .sidebar (slides in at ≤900px); the customer site has its
   own small drawer (.cust-drawer). Escape or tapping outside closes both. */
.menu-btn { display:none; flex-shrink:0; }
.drawer-overlay { display:none; }
@media (max-width:900px) {
  .menu-btn { display:grid; place-items:center; }
  body.drawer-open .drawer-overlay { display:block; position:fixed; inset:0; z-index:90; background:rgba(0,0,0,.35); }
  body.drawer-open { overflow:hidden; }
  .sidebar { overflow-y:auto; max-width:86vw; }
}
.topbar-inner { gap:10px; }
.topbar-inner .brand { margin-right:auto; }
.cust-drawer {
  position:fixed; inset:0 auto 0 0; z-index:100; width:min(300px,86vw);
  background:var(--surface); border-right:1px solid var(--border);
  padding:16px 12px calc(16px + env(safe-area-inset-bottom)); display:flex; flex-direction:column; gap:4px;
  box-shadow:0 0 40px rgba(0,0,0,.25); overflow-y:auto;
}
.cust-drawer[hidden] { display:none; }
.cust-drawer a.side-link { text-decoration:none; }
.cust-drawer-head { display:flex; align-items:center; justify-content:space-between; padding:4px 6px 12px; border-bottom:1px solid var(--border); margin-bottom:6px; }
.side-link:focus-visible, .menu-btn:focus-visible { outline:3px solid var(--accent); outline-offset:2px; }

/* Install / notifications card (bottom of screen, dismissible) */
.install-card {
  position:fixed; left:50%; transform:translateX(-50%); z-index:120;
  bottom:calc(84px + env(safe-area-inset-bottom)); width:min(520px, calc(100vw - 24px));
  display:flex; gap:12px; align-items:flex-start; padding:14px;
  background:var(--surface); border:1px solid var(--border); border-radius:16px;
  box-shadow:0 12px 40px rgba(0,0,0,.18); animation:install-in .25s ease;
}
.install-icon { width:44px; height:44px; border-radius:12px; flex-shrink:0; }
.install-body { flex:1; min-width:0; display:flex; flex-direction:column; gap:6px; font-size:.9rem; }
.install-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:4px; }
.install-ios { background:var(--bg-soft); border-radius:10px; padding:8px 10px; font-size:.85rem; }
.install-ios .bma-icon { vertical-align:-2px; }
@media (min-width:901px) { .install-card { bottom:24px; } }
@keyframes install-in { from { opacity:0; } to { opacity:1; } }

/* Unpaid booking: edit / cancel / continue, and the notice before paying */
/* Payment screen buttons: equal widths that always fit the screen */
.pay-choices { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.pay-choices .pay-continue { grid-column:1 / -1; }
.pay-choices .btn, .pay-quick .btn, .pay-pair .btn { width:100%; min-width:0; justify-content:center; text-align:center; padding:11px 12px; gap:6px; white-space:nowrap; }
@media (max-width:400px) { .pay-choices .btn, .pay-quick .btn, .pay-pair .btn { font-size:.84rem; padding:11px 8px; } .pay-choices, .pay-quick, .pay-pair { gap:6px; } }
.pay-choices .pay-cancel { color:var(--danger, #dc2626); }
.pay-quick { display:flex; gap:8px; max-width:440px; margin:0 auto; }
.pay-quick .btn { flex:1 1 0; }
.pay-pair { display:grid; grid-template-columns:1fr 1fr; gap:8px; width:100%; }
#pay-upi-app-btn { margin-bottom:0; }
.pay-notice {
  border:1px solid #f5c26b; background:#fff8e6; color:#5b3b00;
  border-radius:14px; padding:14px 16px; font-size:.9rem; line-height:1.5;
}
.pay-notice strong { display:block; margin-bottom:4px; }
.suspended-banner { background:#fdecec; color:#8a1c1c; border-bottom:1px solid #f3b4b4; padding:10px 0; font-size:.88rem; line-height:1.45; }

/* Advertisements (customer home page + admin preview) */
.ads-row { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr)); gap:14px; }
.ad-card {
  display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--border);
  border-radius:16px; overflow:hidden; color:inherit; text-decoration:none; min-width:0;
  transition:transform .15s, box-shadow .15s;
}
a.ad-card:hover { transform:translateY(-2px); box-shadow:0 8px 24px rgba(0,0,0,.08); }
a.ad-card:focus-visible { outline:3px solid var(--accent); outline-offset:2px; }
.ad-card img, .ad-fallback { width:100%; aspect-ratio:16/9; object-fit:cover; display:block; background:var(--bg-soft); }
.ad-fallback { display:grid; place-items:center; padding:12px; text-align:center; font-weight:600; color:var(--text-soft); }
.ad-text { padding:12px 14px; display:flex; flex-direction:column; gap:4px; min-width:0; }
.ad-text strong { overflow-wrap:anywhere; }
.ad-text span { font-size:.85rem; color:var(--text-soft); overflow-wrap:anywhere; }
.ad-thumb { width:180px; max-width:100%; }
.ad-thumb .ad-card { pointer-events:none; }
.ad-preview { border:1px dashed var(--border); border-radius:14px; padding:10px; background:var(--bg-soft); margin-inline:auto; }
.ad-preview-m { max-width:360px; }
.ad-preview-d { max-width:100%; }

/* Partner: where each arena's payments go */
.dest-row { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:10px; padding:12px 0; border-top:1px solid var(--border); }
.dest-row:first-of-type { border-top:none; }
.dest-row select { max-width:100%; }

/* Click-to-call */
.tel-link { display:inline-flex; align-items:center; gap:4px; color:var(--accent); font-weight:600; font-size:.85rem; text-decoration:none; white-space:nowrap; }
.tel-link:hover { text-decoration:underline; }
.call-btn { text-decoration:none; }
.call-btn .bma-icon { flex-shrink:0; }

/* No sideways scrolling anywhere (tables turn into cards at ≤900px above) */
html, body { max-width:100%; overflow-x:hidden; }

/* Partner portal: bottom quick menu on phones and tablets */
.ptabbar { display:none; }
@media (max-width:1024px) {
  .ptabbar { display:flex; }
  #app.shell .main { padding-bottom:calc(104px + env(safe-area-inset-bottom)); }
}
.ptab { position:relative; }
.ptab .tab-badge { position:absolute; top:4px; right:calc(50% - 22px); }

/* Segmented choice (slot manager) */
.seg { display:inline-flex; flex-wrap:wrap; gap:6px; padding:4px; border:1px solid var(--border); border-radius:14px; background:var(--bg-soft); }
.seg-btn { display:inline-flex; align-items:center; gap:6px; border:none; background:none; padding:8px 14px; border-radius:10px; font:inherit; font-weight:600; font-size:.86rem; color:var(--text-soft); cursor:pointer; }
.seg-btn[aria-pressed="true"] { background:var(--surface); color:var(--accent); box-shadow:0 2px 8px -4px rgba(15,42,28,.3); }
.slot.slot-closed { background:#fdecec; border-color:#f3b4b4; }
.slot.slot-closed .slot-price { color:#b42318; }
.slot.slot-maint { background:#fff6e0; border-color:#f5cf73; }
.slot.slot-maint .slot-price { color:#9a6700; }
.slot-legend { display:flex; flex-wrap:wrap; gap:14px; font-size:.78rem; color:var(--text-soft); }
.slot-legend .lg { display:inline-block; width:12px; height:12px; border-radius:4px; margin-right:6px; vertical-align:-1px; border:1px solid var(--border); }
.lg-open { background:var(--surface); } .lg-closed { background:#fdecec; border-color:#f3b4b4 !important; }
.lg-maint { background:#fff6e0; border-color:#f5cf73 !important; } .lg-booked { background:var(--bg-soft); }

/* Read-only fields + avatar */
.input-readonly { display:flex; align-items:center; background:var(--bg-soft); color:var(--text-soft); cursor:default; min-height:44px; }
.avatar-circle { width:52px; height:52px; border-radius:50%; display:grid; place-items:center; flex-shrink:0;
  background:linear-gradient(135deg, var(--accent), #86efac); color:#fff; font-weight:700; font-size:1.3rem; }

/* Offer applied automatically (slot page) */
.offer-applied { display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:10px 14px; border-radius:14px;
  background:var(--primary-soft); color:#14532d; font-size:.88rem; font-weight:600; }
.page-welcome-anim { position:relative; padding-right:170px; }
.page-welcome-anim .welcome-anim { position:absolute; right:4px; top:50%; transform:translateY(-50%); }
@media (max-width:600px) { .page-welcome-anim { padding-right:0; padding-top:70px; } .page-welcome-anim .welcome-anim { top:0; right:0; transform:none; width:120px; height:66px; } }

/* ------------------------------------------------------------------
   Phones/tablets after sign-in: Step 1 notifications, Step 2 install app.
   Covers the portal completely until the step is done. */
body.onboarding { overflow:hidden; }
.onboard {
  position:fixed; inset:0; z-index:500; display:grid; place-items:center; overflow-y:auto;
  padding:calc(16px + env(safe-area-inset-top)) 16px calc(16px + env(safe-area-inset-bottom));
  background:linear-gradient(160deg, #eafbe9 0%, #ffffff 55%, #e9f7ee 100%);
}
.onboard-card {
  width:min(440px, 100%); background:var(--surface); border:1px solid var(--border); border-radius:22px;
  padding:24px 20px; box-shadow:0 18px 50px rgba(2,105,43,.12);
  display:flex; flex-direction:column; gap:12px; animation:install-in .25s ease;
}
.onboard-card h2 { font-size:1.35rem; text-align:center; }
.onboard-card > .muted { text-align:center; }
.onboard-steps { display:flex; align-items:center; gap:6px; justify-content:center; }
.onboard-steps span { width:28px; height:5px; border-radius:99px; background:var(--border); }
.onboard-steps span.on { background:var(--accent); }
.onboard-steps em { font-style:normal; font-size:.75rem; color:var(--text-soft); margin-left:6px; }
.onboard-icon { width:68px; height:68px; margin:4px auto 0; border-radius:20px; display:grid; place-items:center;
  background:#e3f7e7; color:var(--accent); }
.onboard-icon.warn { background:#fff4e0; color:#b45309; }
.onboard-app { width:72px; height:72px; border-radius:18px; margin:4px auto 0; box-shadow:0 6px 18px rgba(0,0,0,.12); }
.onboard-list { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px; }
.onboard-list li { display:flex; gap:8px; align-items:flex-start; font-size:.92rem; }
.onboard-list li .bma-icon { color:var(--accent); flex-shrink:0; margin-top:2px; }
.onboard-help { background:var(--bg-soft); border-radius:12px; padding:10px 12px; font-size:.88rem; line-height:1.5; }
.onboard-howto { margin:0; padding-left:22px; display:flex; flex-direction:column; gap:6px; font-size:.92rem; }
.onboard-howto .bma-icon { vertical-align:-3px; }

/* Admin: System check */
.syscheck-row { display:flex; gap:10px; align-items:flex-start; padding:8px 0; border-top:1px solid var(--border); }
.syscheck-row:first-of-type { border-top:none; }
.syscheck-row .badge { flex-shrink:0; margin-top:2px; }
.syscheck-bad { border-color:#f3b4b4; }

/* Monthly subscriptions */
.notice-danger { background:#fdecec; border-color:#f3b4b4; color:#8a1c1c; }
.sub-pay { display:grid; grid-template-columns:240px 1fr; gap:18px; align-items:start; }
.sub-qr-wrap { display:flex; flex-direction:column; align-items:center; gap:8px; }
.sub-qr { background:#fff; padding:10px; border:1px solid var(--border); border-radius:14px; min-height:120px; }
.sub-qr img, .sub-qr canvas { display:block; max-width:100%; height:auto; }
@media (max-width:700px) { .sub-pay { grid-template-columns:1fr; } }
.sub-partners .input { min-width:0; }

/* Links for roles and arenas (copy / share) */
.link-box { display:flex; flex-direction:column; gap:6px; min-width:0; }
.link-row { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.link-url { flex:1 1 220px; min-width:0; overflow-wrap:anywhere; background:var(--bg-soft); border:1px solid var(--border);
  border-radius:10px; padding:8px 10px; font-size:.82rem; font-family:ui-monospace, SFMono-Regular, Menlo, monospace; }
.slug-row { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.slug-row .faint { overflow-wrap:anywhere; font-size:.82rem; }
.slug-row .input { flex:1 1 180px; min-width:0; }
.gate-arena { display:flex; gap:8px; align-items:flex-start; }
#gate-arena strong, #route-note strong { display:inline; margin:0; }

/* Send a link: WhatsApp / SMS / Copy */
.btn-whatsapp { background:#1fa855; color:#fff; border:1px solid #1a9149; }
.btn-whatsapp:hover { background:#1a9149; color:#fff; }
.send-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(130px, 1fr)); gap:8px; }
.send-grid .btn { justify-content:center; }
.invite-url { display:block; font-size:.78rem; }
.contact-grid { display:flex; flex-direction:column; gap:10px; }
.contact-row { display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:10px 12px; border:1px solid var(--border); border-radius:12px; background:var(--surface); }
.contact-row .contact-who { flex:1 1 140px; min-width:0; }
.contact-row .contact-who strong { display:block; }
.contact-row .contact-actions { display:flex; gap:8px; flex-wrap:wrap; }

/* Advertisements: full-width banner strip / slideshow (customer home + admin preview) */
.ad-strip { position:relative; overflow:hidden; width:100%; aspect-ratio:5/1; max-height:340px; background:var(--bg-soft); border-radius:16px; isolation:isolate; }
@media (max-width:1023px) { .ad-strip { aspect-ratio:4/1; } }
@media (max-width:599px) { .ad-strip { aspect-ratio:3/1; } }
.ad-track { display:flex; height:100%; transition:transform .45s ease; }
@media (prefers-reduced-motion:reduce) { .ad-track { transition:none; } }
.ad-cell { flex:0 0 100%; height:100%; min-width:0; }
.ad-strip > .ad-slide { height:100%; }
.ad-slide { position:relative; display:block; width:100%; height:100%; color:#fff; text-decoration:none; }
.ad-slide img, .ad-slide .ad-fallback { width:100%; height:100%; object-fit:cover; object-position:center; display:block; }
.ad-slide .ad-fallback { display:grid; place-items:center; color:var(--text-soft); font-weight:600; padding:12px; text-align:center; background:var(--bg-soft); }
a.ad-slide:focus-visible { outline:3px solid var(--accent); outline-offset:-3px; }
.ad-cap { position:absolute; left:0; right:0; bottom:0; padding:28px max(16px, 4vw) 12px; display:flex; flex-direction:column; gap:2px;
  background:linear-gradient(to top, rgba(0,0,0,.62), rgba(0,0,0,0)); pointer-events:none; }
.ad-cap strong { font-size:clamp(.9rem, 2.2vw, 1.35rem); line-height:1.2; overflow-wrap:anywhere; }
.ad-cap span { font-size:clamp(.72rem, 1.5vw, .95rem); opacity:.92; overflow-wrap:anywhere; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; }
.ad-tag { position:absolute; top:8px; right:10px; background:rgba(0,0,0,.45); color:#fff; font-size:.66rem; font-weight:600; letter-spacing:.03em; padding:2px 7px; border-radius:6px; }
.ad-nav { position:absolute; top:50%; transform:translateY(-50%); width:36px; height:36px; border-radius:50%; border:none; display:grid; place-items:center;
  background:rgba(255,255,255,.85); color:#0f2a1c; cursor:pointer; box-shadow:0 2px 8px rgba(0,0,0,.18); }
.ad-nav.prev { left:10px; } .ad-nav.next { right:10px; }
@media (max-width:599px) { .ad-nav { display:none; } }
.ad-dots { position:absolute; bottom:8px; right:12px; display:flex; gap:6px; }
.ad-dot { width:8px; height:8px; border-radius:50%; border:none; padding:0; background:rgba(255,255,255,.55); cursor:pointer; }
.ad-dot.active { background:#fff; width:20px; border-radius:4px; }
.ad-thumb .ad-strip { border-radius:10px; } .ad-thumb { width:100%; }
.ad-thumb .ad-slide { pointer-events:none; }
.ad-preview .ad-strip { border-radius:10px; }
.ad-preview-m .ad-strip { aspect-ratio:3/1; } .ad-preview-d .ad-strip { aspect-ratio:5/1; }

/* Site footer: social links + developer credit (every portal) */
.site-foot { display:flex; flex-direction:column; gap:14px; margin-top:36px; padding-bottom:28px; }
.social-links { display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }
.social-links a { width:40px; height:40px; border-radius:50%; display:grid; place-items:center; color:var(--accent);
  background:var(--surface); border:1px solid var(--border); }
.social-links a:hover { background:var(--bg-soft); }
/* Footer line (Update 11): small, quiet, one line. */
.made-by { margin: 18px 0 8px; text-align: center; font-size: .74rem; line-height: 1.4; color: var(--text-faint); }
.made-by a { color: var(--text-faint); text-decoration: none; font-weight: 500; }
.made-by a:hover, .made-by a:focus-visible { color: var(--accent); text-decoration: underline; }

/* ───────── Update 10: booking history, offers countdown, tournaments, sharing ───────── */
.history { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.history-item { display: grid; grid-template-columns: 12px 1fr; gap: 10px; align-items: start; }
.history-item > div { display: grid; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.history-dot { width: 10px; height: 10px; border-radius: 50%; margin-top: 6px; background: var(--border); }
.history-dot.st-green { background: var(--green-500, #16a34a); } .history-dot.st-red { background: var(--danger, #dc2626); }
.history-dot.st-amber { background: #d97706; } .history-dot.st-violet { background: #7c3aed; }
.history-dot.st-slate, .history-dot.st-grey { background: #64748b; }
.handled { display: inline-block; margin-top: 4px; font-size: .78rem; line-height: 1.35; max-width: 220px; background: transparent !important; padding: 0 !important; border: 0 !important; }
.handled.st-green { color: var(--green-600, #15803d); } .handled.st-red { color: var(--danger, #dc2626); }
.offer-card { display: flex; flex-direction: column; gap: 2px; }
.offer-card .row:last-child { margin-top: auto; padding-top: 8px; }
.offer-upcoming { border-style: dashed; }
.offer-price strong { font-size: 1.35rem; color: var(--accent); }
.offer-count { font-variant-numeric: tabular-nums; font-size: .9rem; }
.offer-count strong { color: var(--danger, #dc2626); }
.offer-upcoming .offer-count strong { color: var(--accent); }
.tour-card { display: grid; gap: 6px; text-align: left; width: 100%; cursor: pointer; font: inherit; color: inherit; }
.tour-card:hover { border-color: var(--accent); }
.tour-filter { flex: 1 1 150px; min-width: 0; max-width: 100%; }
.share-text { white-space: pre-wrap; font: inherit; font-size: .9rem; background: var(--surface-2, rgba(0,0,0,.04)); padding: 12px; border-radius: 10px; margin: 0; overflow-wrap: anywhere; }
.sub-due { border: 1px solid var(--border); border-radius: 12px; padding: 12px; }
#pass-extras .card { margin-top: 4px; }
.cat-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 6px 0; border-bottom: 1px solid var(--border); }
.cat-row .cat-name { flex: 1 1 180px; min-width: 0; }
.cat-row .cat-count { min-width: 64px; }
.poster-preview { background: var(--bg-soft, #f3f8f5); border-radius: 14px; padding: 12px; display: grid; place-items: center; }
.poster-preview img { width: 100%; max-width: 380px; height: auto; border-radius: 6px; box-shadow: 0 6px 24px rgba(0,0,0,.12); }