/* FutsalRange — Sporty Redesign Tokens + Scoped Styles
   All admin-profile sporty rules live here.
   Token scope: :root (global, safe to reference anywhere)
   Style scope: :is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) = admin only
*/

/* ── Featured Indoor Courts — overlay card (isolated fc-* classes) ───────── */
.classes-slider .classes-item { padding-bottom: 10px; }
.fc-card {
  position: relative;
  display: block;
  border-radius: 20px;
  overflow: hidden;
  aspect-ratio: 4 / 3;   /* landscape card for landscape images — less dead space */
  background: #0a0d11;   /* dark backdrop behind the (contained) photo + letterbox */
  box-shadow: 0 20px 50px -24px rgba(0,0,0,.9);
  border: 1px solid rgba(255,255,255,.06);
  color: #f4f6f8;
}
/* Stretched link: clicking the card (anywhere but Book Now) opens venue details */
.fc-cardlink { position: absolute; inset: 0; z-index: 1; }
/* Show the WHOLE image (wide side-by-side collages included) — never crop/split.
   Letterbox areas fall back to the dark card bg; overlay text stays legible. */
.fc-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: top center; display: block; }
.fc-photo--empty { background: linear-gradient(160deg,#1c2733,#0a0d11); }
/* Overlays don't intercept clicks — they pass through to .fc-cardlink (details);
   only .fc-book re-enables pointer events (booking). */
.fc-grad, .fc-pills, .fc-content { pointer-events: none; }
.fc-grad {
  position: absolute; left: 0; right: 0; bottom: 0; height: 62%;
  background: linear-gradient(to top, rgba(6,8,11,.96) 12%, rgba(6,8,11,.72) 45%, rgba(6,8,11,0) 100%);
}
.fc-pills {
  position: absolute; top: 14px; right: 14px;
  display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; max-width: 62%;
}
.fc-pill {
  width: 34px; height: 34px; border-radius: 9px;
  display: grid; place-items: center; font-size: 17px;
  background: rgba(0,0,0,.42); border: 1px solid rgba(255,255,255,.2);
}
.fc-content { position: absolute; left: 0; right: 0; bottom: 0; padding: 20px 18px; }
.fc-addr { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: #c3c9d2; margin-bottom: 7px; }
.fc-addr svg { flex: none; color: #e11d2a; }
.fc-name { display: block; font-size: 25px; font-weight: 850; letter-spacing: -.01em; margin-bottom: 4px; color: #f4f6f8; line-height: 1.15; }
.fc-meta { display: block; font-size: 13px; color: #c3c9d2; font-weight: 600; margin-bottom: 15px; }
.fc-book {
  display: block; text-align: center; text-decoration: none;
  background: #e11d2a; color: #fff; font-size: 15px; font-weight: 800;
  padding: 14px; border-radius: 13px;
  position: relative; z-index: 2; pointer-events: auto; /* above the card link */
}

/* Booking + home widget panels must match. Booking uses .booking-location-wrapper;
   home uses .banner-booking-card.banner-booking-card-center (whose -center rule
   set a translucent-light bg). Force both to the same dark panel so the location
   selection looks identical on both pages. */
.booking-location-wrapper,
.banner-booking-card.banner-booking-card-center {
  background: #15171c;
  border: 1px solid #232830;
  border-radius: 20px;
  padding: 18px 15px 20px;
}

/* Accessible visually-hidden utility (screen-reader only) */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

/* Social icon links: 44×44px minimum tap target */
.newsletter-social li a{display:inline-flex;align-items:center;justify-content:center;padding:12px;}

:root {
  --fr-bg:          #eef0f4;
  --fr-card:        #fff;
  --fr-dark:        #0e0f12;
  --fr-ink:         #14161c;
  --fr-muted:       #6b7280;
  --fr-muted2:      #9aa0ab;
  --fr-line:        #e7e9ee;
  --fr-red:         #ec2b34;
  --fr-red-2:       #c0101f;
  --fr-red-soft:    #fdecec;
  --fr-green:       #15a85a;
  --fr-green-soft:  #e6f7ee;
  --fr-green-ink:   #0c7a40;
  --fr-amber:       #f0930f;
  --fr-amber-soft:  #fdf1de;
  --fr-amber-ink:   #a3640a;
  --fr-orange:      #f0760f;
  --fr-blue:        #2f6fed;
  --fr-radius:      16px;
  --fr-shadow:      0 6px 18px -10px rgba(20,22,28,.25);
}
/* ═══════════════════════════════════════════════════════════════
   ADMIN PROFILE — BOLD & SPORTY THEME
   Scope: :is(body:has(#super-settings-btn),body:has(#fr-sporty-profile))
   Tokens — red:var(--fr-red)  green:var(--fr-green)  amber:var(--fr-amber)  blue:var(--fr-blue)
═══════════════════════════════════════════════════════════════ */

/* ── Page shell ── */
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .admin-dashboard-wrap {
  background: #e8ecf0 !important;
}
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .admin-dashboard {
  border-radius: 14px;
  box-shadow: 0 3px 14px rgba(15,23,42,0.11);
  border: none;
}

/* ── Dashboard & section titles — italic 900 ── */
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .admin-dashboard-title {
  font-style: italic;
  font-weight: 900;
  font-size: 1.2rem;
}
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .admin-section-title {
  font-style: italic;
  font-weight: 900;
  color: #111827;
  letter-spacing: 0.01em;
}
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .admin-section-title i { color: var(--fr-red); }

/* ── Stat cards — 4 px accent bar + bolder type ── */
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .admin-stat-card {
  border-left-width: 4px;
}
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .admin-stat-card--primary { border-left-color: var(--fr-blue); }
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .admin-stat-card--success { border-left-color: var(--fr-green); }
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .admin-stat-card--danger  { border-left-color: var(--fr-red); }
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .admin-stat-card--warning { border-left-color: var(--fr-amber); }
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .admin-stat-card--info    { border-left-color: var(--fr-blue); }
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .admin-stat-card--cyan    { border-left-color: #0891b2; }
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .admin-stat-card--purple  { border-left-color: #7c3aed; }
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .admin-stat-card__label {
  font-style: italic;
  font-weight: 800;
}
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .admin-stat-card__value { font-weight: 900; }

/* ── Pending section title ── */
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .owner-pending-section__title {
  font-style: italic;
  font-weight: 900;
  font-size: 0.85rem;
  color: #111827;
}
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .owner-pending-section__title i { color: var(--fr-amber); }

/* ── Pending tiles ── */
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .owner-pending-card {
  border-left-width: 4px;
  border-radius: 12px;
}
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .owner-pending-card--idle {
  background: #f1f5f9;
  border-left-color: #94a3b8;
}
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .owner-pending-card--active {
  border-left-color: var(--fr-amber);
  box-shadow: 0 3px 10px rgba(240,147,15,0.25);
}
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .owner-pending-card--active:hover {
  box-shadow: 0 5px 16px rgba(240,147,15,0.35);
}
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .owner-pending-card__name {
  font-style: italic;
  font-weight: 800;
}
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .owner-pending-card__value { font-weight: 900; }

/* ── Auto-cancelled section title & pills ── */
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .owner-autocancel-section__title {
  font-style: italic;
  font-weight: 900;
  color: var(--fr-red);
}
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .owner-autocancel-section__title i { color: var(--fr-red); }
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .owner-autocancel-pills .owner-autocancel-pill {
  font-weight: 700;
}
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .owner-autocancel-pills .owner-pending-pill__count {
  background: var(--fr-red);
}

/* ── Filter panel ── */
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .owner-filters-panel {
  border-color: var(--fr-red) !important;
  border-radius: 12px !important;
}
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .owner-filters-panel .owner-filters-title {
  font-style: italic;
  font-weight: 900;
  color: var(--fr-red);
}
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .owner-filter-pills .nav-item.bg-danger .nav-link,
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .owner-filter-pills .nav-item.bg-danger .nav-link:hover {
  background: var(--fr-red) !important;
  border-color: var(--fr-red) !important;
  color: #fff !important;
}
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .owner-filter-pills .nav-link:hover {
  background: #fee2e2;
  color: var(--fr-red);
  border-color: #fca5a5;
}

/* ── Date load-all button ── */
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .owner-date-load-all {
  font-style: italic;
  font-weight: 800;
}

/* ── Per-futsal card head ── */
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .owner-futsal-card__title {
  font-style: italic;
  font-weight: 900;
  font-size: 1.15rem;
  color: #111827;
}

/* ── Quick summary section title ── */
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .owner-futsal-quick-summary__title {
  font-style: italic;
  font-weight: 900;
  font-size: 0.875rem;
  color: #111827;
}

/* ── Quick summary tiles — 4 px bar ── */
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .owner-futsal-quick-tile {
  border-left-width: 4px;
  border-radius: 10px;
}
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .owner-futsal-quick-tile--primary { border-left-color: var(--fr-blue); }
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .owner-futsal-quick-tile--success { border-left-color: var(--fr-green); }
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .owner-futsal-quick-tile--teal    { border-left-color: #0d9488; }
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .owner-futsal-quick-tile--danger  { border-left-color: var(--fr-red); }
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .owner-futsal-quick-tile--warning { border-left-color: var(--fr-amber); }
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .owner-futsal-quick-tile__label {
  font-style: italic;
  font-weight: 800;
}
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .owner-futsal-quick-tile__value { font-weight: 900; }

/* ── Per-futsal booking stat boxes — 4 px bar ── */
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .admin-booking-stat-box { border-left-width: 4px; }
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .admin-booking-stat-box--primary { border-left-color: var(--fr-blue); }
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .admin-booking-stat-box--warning { border-left-color: var(--fr-amber); }
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .admin-booking-stat-box--danger  { border-left-color: var(--fr-red); }
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .admin-booking-stat-box--success { border-left-color: var(--fr-green); }
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .admin-booking-stat-box__label {
  font-style: italic;
  font-weight: 800;
}

/* ── Per-futsal income stat boxes — 4 px bar ── */
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .admin-income-stat-box { border-left-width: 4px; }
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .admin-income-stat-box--primary { border-left-color: var(--fr-blue); }
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .admin-income-stat-box--success { border-left-color: var(--fr-green); }
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .admin-income-stat-box--danger  { border-left-color: var(--fr-amber); }
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .admin-income-stat-box--profit  { border-left-color: var(--fr-green); }
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .admin-income-stat-box--loss    { border-left-color: var(--fr-red); }
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .admin-income-stat-box__label {
  font-style: italic;
  font-weight: 800;
}
/* Profit/loss label: old gradient-era rule (.owner-futsal-card .owner-futsal-summary-section
   .admin-income-stat-box--profit .admin-income-stat-box__label) has specificity (0,4,0) and
   sets white text. Beat it with !important to restore readability. */
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .admin-income-stat-box--profit .admin-income-stat-box__label,
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .admin-income-stat-box--loss .admin-income-stat-box__label {
  color: var(--fr-muted) !important;
}
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .admin-income-stat-box--profit .admin-income-stat-box__value,
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .admin-income-stat-box--loss .admin-income-stat-box__value {
  color: var(--fr-ink) !important;
}

/* ═══════════════════════════════════════════════════════════════
   ADMIN PROFILE — BOLD & SPORTY FIX PASS (7 items)
═══════════════════════════════════════════════════════════════ */

/* ── Fix 1: Pending venue cards ── */
/* Idle = white card, hairline all-round border (no accent bar) */
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .owner-pending-card {
  background: #fff;
  border: 1px solid #e3e6ec;
  border-left-width: 1px;
  box-shadow: 0 1px 5px rgba(14,15,18,0.07);
}
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .owner-pending-card--idle {
  background: #f8fafc;
  border-color: #e3e6ec;
  border-left-color: #e3e6ec;
  border-left-width: 1px;
}
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .owner-pending-card--idle:hover {
  background: #f1f5f9;
  box-shadow: 0 3px 10px rgba(14,15,18,0.10);
}
/* Active = white card, red 3px left accent, soft red shadow */
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .owner-pending-card--active {
  background: #fff;
  border-color: #fca5a5;
  border-left-color: var(--fr-red);
  border-left-width: 3px;
  box-shadow: 0 2px 10px rgba(236,43,52,0.14);
}
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .owner-pending-card--active:hover {
  background: #fff;
  box-shadow: 0 4px 16px rgba(236,43,52,0.22);
}
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .owner-pending-card--idle .owner-pending-card__name {
  color: var(--fr-muted);
}
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .owner-pending-card--idle .owner-pending-card__value {
  color: #c2c6cf;
}
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .owner-pending-card--active .owner-pending-card__name {
  color: var(--fr-red);
}
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .owner-pending-card--active .owner-pending-card__value {
  color: var(--fr-red);
}
/* Full-width split button row at card bottom edge */
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .owner-pending-card__actions {
  padding: 0;
  gap: 0;
  border-top: 1px solid #e3e6ec;
  margin-top: auto;
}
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .owner-pending-card__action {
  flex: 1;
  border: none;
  border-radius: 0;
  min-height: 34px;
  font-size: 1rem;
}
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .owner-pending-card__action--expense {
  background: #fef2f2;
  color: var(--fr-red);
  border-right: 1px solid #fecaca;
}
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .owner-pending-card__action--expense:hover {
  background: var(--fr-red);
  color: #fff;
}
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .owner-pending-card__action--onspot {
  background: #f0fdf4;
  color: var(--fr-green);
}
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .owner-pending-card__action--onspot:hover {
  background: var(--fr-green);
  color: #fff;
}

/* ── Fix 2: Date heading — remove blue, apply ink italic-900 ── */
/* Single-futsal path: <h5 class="text-primary mb-0" id="date-range">
   Bootstrap text-primary uses !important so we need !important here too */
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) h5#date-range,
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) #date-range {
  color: #f4f4f6 !important;
  font-style: italic;
  font-weight: 900;
}
/* Multi-futsal path: owner-date-load-all button — base rule has color:#0d6efd */
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .owner-date-load-all {
  color: #f4f4f6 !important;
  font-style: italic;
  font-weight: 900;
}
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .owner-date-load-all:hover {
  color: #f4f4f6 !important;
  opacity: 0.8;
}
/* Eye icon stays red */
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .owner-date-load-all__icon {
  color: var(--fr-red) !important;
}

/* ── Fix 3: DUE quick-summary tile — remove solid red gradient ── */
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .owner-futsal-card .owner-futsal-quick-tile--danger {
  background: #fef2f2;
  border-left: 4px solid var(--fr-red);
}
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .owner-futsal-card .owner-futsal-quick-tile--danger .owner-futsal-quick-tile__label {
  color: var(--fr-muted);
}
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .owner-futsal-card .owner-futsal-quick-tile--danger .owner-futsal-quick-tile__value {
  color: var(--fr-ink);
}

/* ── Fix 4: "Bookings" / "Summary" section labels inside venue card ── */
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .owner-futsal-section-head {
  display: flex;
  align-items: center;
  gap: 0;
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid #e3e6ec;
}
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .owner-futsal-section-head h6,
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .owner-futsal-section-head .fw-bold {
  font-style: italic;
  font-weight: 900;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--fr-ink);
  position: relative;
  padding-left: 10px;
  margin: 0;
}
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .owner-futsal-section-head h6::before,
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .owner-futsal-section-head .fw-bold::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  border-radius: 2px;
  background: var(--fr-red);
}

/* ── Fix 5: Expense Details panel header — dark bar + amber tag ── */
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .owner-futsal-card .owner-expense-panel__head {
  background: var(--fr-dark);
  position: relative;
  padding-left: 20px;
}
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .owner-futsal-card .owner-expense-panel__head::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--fr-amber);
}
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .owner-futsal-card .owner-expense-panel__title {
  font-style: italic;
  font-weight: 900;
  font-size: 0.9rem;
}

/* ── Fix 6: Income by Field panel header — dark bar + green tag ── */
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .owner-futsal-card .owner-hourly-panel__head {
  background: var(--fr-dark);
  position: relative;
  padding-left: 20px;
}
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .owner-futsal-card .owner-hourly-panel__head::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--fr-green);
}
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .owner-futsal-card .owner-hourly-panel__title {
  font-style: italic;
  font-weight: 900;
  font-size: 0.9rem;
}
/* Table: field links → red; tfoot → flat green tint */
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .owner-futsal-card .owner-hourly-table__field {
  color: var(--fr-red);
  font-weight: 700;
}
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .owner-futsal-card .owner-hourly-table tfoot td {
  background: var(--fr-green-soft);
  color: var(--fr-green-ink);
  font-weight: 700;
  font-style: italic;
  border-top: 1px solid #a7f3d0;
}
/* Outer panel-head title — sporty italic-900, colour kept by status */
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .owner-futsal-panel-head__title {
  font-style: italic;
  font-weight: 900;
  font-size: 0.95rem;
}

/* ── Fix 7: Low-contrast tap-hint links — chip-style, legible on light tints ── */
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .admin-income-stat-box__tap-hint,
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .owner-futsal-card .owner-futsal-summary-section .admin-income-stat-box--profit .admin-income-stat-box__tap-hint,
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .owner-futsal-card .owner-futsal-summary-section .admin-income-stat-box--loss .admin-income-stat-box__tap-hint {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 6px;
  background: rgba(255,255,255,0.72);
  border: 1px solid #e3e6ec;
  font-size: 0.68rem;
  font-weight: 800;
  color: var(--fr-muted);
  opacity: 1;
  margin-top: auto;
}
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .admin-income-stat-box__tap-hint i,
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .owner-futsal-card .owner-futsal-summary-section .admin-income-stat-box--profit .admin-income-stat-box__tap-hint i,
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .owner-futsal-card .owner-futsal-summary-section .admin-income-stat-box--loss .admin-income-stat-box__tap-hint i {
  color: var(--fr-muted);
  font-size: 0.75rem;
}
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .admin-income-stat-box--clickable:hover .admin-income-stat-box__tap-hint,
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .owner-futsal-card .owner-futsal-summary-section .admin-income-stat-box--clickable:hover .admin-income-stat-box__tap-hint {
  background: #fff;
  color: var(--fr-ink);
  border-color: #d1d5db;
}

/* ═══════════════════════════════════════════════════════════════
   ADMIN SUMMARY TILES — COMPACT AMOUNTS
   Scope: :is(body:has(#super-settings-btn),body:has(#fr-sporty-profile))
═══════════════════════════════════════════════════════════════ */

/* Prevent tiles from forcing the grid wider than the screen */
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .quick-summary-tiles .owner-futsal-quick-tile { min-width: 0; }
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .admin-stat-grid .col { min-width: 0; }

/* Smaller responsive tile values — avoids 7-digit numbers overflowing */
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .owner-futsal-quick-tile__value {
  font-size: clamp(13px, 3.8vw, 18px) !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Venue-summary big cards */
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .owner-futsal-card .owner-futsal-summary-section .admin-income-stat-box__value {
  font-size: clamp(13px, 3.5vw, 1.3rem) !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Top Income/Expense stat cards */
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .admin-stat-card__value {
  font-size: clamp(16px, 4vw, 1.6rem) !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ═══════════════════════════════════════════════════════════════
   BOOKING STAT BOXES + QUICK TILE TAPPABLE CUES
═══════════════════════════════════════════════════════════════ */

/* Change 2: Bookings boxes always 3 across, equal width */
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .admin-booking-stats__grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
/* Slightly smaller value font so 3-up doesn't overflow */
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .admin-booking-stat-box__value {
  font-size: clamp(12px, 3.2vw, 1.1rem) !important;
}

/* Change 1: › tappable cue on CONFIRMED booking stat box */
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) button.admin-booking-stat-box {
  position: relative;
  cursor: pointer;
}
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) button.admin-booking-stat-box::after {
  content: '›';
  position: absolute;
  top: 6px;
  right: 8px;
  font-size: 15px;
  color: var(--fr-muted);
  opacity: 0.6;
  transition: opacity 0.15s;
}
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) button.admin-booking-stat-box:hover::after {
  opacity: 1;
}

/* Change 1: › tappable cue on Quick-Summary BOOKINGS tile */
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .owner-futsal-quick-tile--clickable {
  position: relative;
  cursor: pointer;
}
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .owner-futsal-quick-tile--clickable::after {
  content: '›';
  position: absolute;
  top: 4px;
  right: 6px;
  font-size: 13px;
  color: var(--fr-muted);
  opacity: 0.6;
  transition: opacity 0.15s;
}
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .owner-futsal-quick-tile--clickable:hover::after {
  opacity: 1;
  color: var(--fr-ink);
}

/* ═══════════════════════════════════════════════════════════════
   BOOKING FLOW — BOLD & SPORTY RESTYLE
   Scope: GLOBAL — component classes only, no role/page ancestor
   Parts: 1=booking card  2=Confirm/Payment modal  3=Add-ons modal
═══════════════════════════════════════════════════════════════ */

/* ── Parts 1A–1C: Booking card tints, headers, status pills ──
   Keyed off component classes only (no container ancestor) so rules
   apply identically in modal and inline div. ── */
.owner-modal-booking-wrap {
  border-radius: 12px;
  overflow: hidden;
}
.owner-modal-booking-wrap--pending {
  background: #fffbeb !important;
  border: 1px solid #fde68a !important;
}
.owner-modal-booking-wrap--confirmed {
  background: #f0fdf4 !important;
  border: 1px solid #bbf7d0 !important;
}
.owner-modal-booking-wrap--cancelled {
  background: #fff5f5 !important;
  border: 1px solid #fecaca !important;
}
.owner-modal-booking-wrap--autocancel {
  background: #fff7ed !important;
  border: 1px solid #fed7aa !important;
}
.owner-modal-booking-wrap--pending .owner-modal-booking-card__header {
  background: #fef9c3 !important;
  border-bottom: 1px solid rgba(245,158,11,0.3) !important;
}
.owner-modal-booking-wrap--confirmed .owner-modal-booking-card__header {
  background: #dcfce7 !important;
  border-bottom: 1px solid rgba(22,163,74,0.25) !important;
}
.owner-modal-booking-wrap--cancelled .owner-modal-booking-card__header {
  background: #fee2e2 !important;
  border-bottom: 1px solid rgba(220,38,38,0.25) !important;
}
.owner-modal-booking-wrap--autocancel .owner-modal-booking-card__header {
  background: #ffedd5 !important;
  border-bottom: 1px solid rgba(249,115,22,0.25) !important;
}
.owner-modal-booking-card__status--warning {
  background: #fef08a;
  color: #854d0e;
  font-style: italic;
  font-weight: 900;
}
.owner-modal-booking-card__status--success {
  background: #bbf7d0;
  color: #14532d;
  font-style: italic;
  font-weight: 900;
}
.owner-modal-booking-card__status--danger {
  background: #fecaca;
  color: #7f1d1d;
  font-style: italic;
  font-weight: 900;
}
.owner-modal-booking-card__status--muted {
  background: #e2e8f0;
  color: #334155;
  font-style: italic;
  font-weight: 900;
}

/* ── Part 1D: Action buttons — flat, no gradients ──
   :not(#\9) boosts specificity to (1,1,0) to beat the #PendingBookingsModal
   gradient rules in style-1.97.css without adding any role/page ancestor. ── */
.owner-modal-booking-grid__btn--green:not(#\9) {
  background: var(--fr-green) !important;
  color: #fff !important;
  border: none;
}
.owner-modal-booking-grid__btn--blue:not(#\9) {
  background: var(--fr-blue) !important;
  color: #fff !important;
}
.owner-modal-booking-grid__btn--yellow:not(#\9) {
  background: var(--fr-amber) !important;
  color: #fff !important;
}
.owner-modal-booking-grid__btn--yellow:not(#\9) i {
  color: #fff;
}
.owner-modal-booking-grid__btn--red:not(#\9) {
  background: var(--fr-red) !important;
  color: #fff !important;
}
.owner-modal-booking-grid__btn--red:not(#\9):hover {
  background: var(--fr-red-2) !important;
}
.owner-modal-booking-grid__btn--orange:not(#\9) {
  background: var(--fr-amber) !important;
  color: #fff !important;
}
.owner-modal-booking-grid__btn--orange:not(#\9):disabled {
  background: var(--fr-amber) !important;
  color: #fff !important;
  opacity: 0.75;
}

/* ── Part 1E: WA confirm button — neutral blue outline ── */
.owner-modal-booking-card__wa-btn--confirm {
  border-color: var(--fr-blue);
  color: var(--fr-blue);
}

/* ── Part 1F: Money rows — balance red, paid-in-full green ── */
.owner-booking-payments__balance-amount {
  color: var(--fr-red) !important;
  font-style: italic;
  font-weight: 900;
}

/* ── Part 2: DeleteBookingModal (Confirm Booking / Add Payment / Cancel) ── */
#DeleteBookingModal .login-modal-header {
  background: var(--fr-red);
}
/* Neutral input borders, red on focus only */
#confirm-fields .cf-select-wrap { border-color: #d1d5db !important; }
#confirm-fields .cf-select-wrap:focus-within { border-color: var(--fr-red) !important; }
#confirm-fields .cf-row2 .login-input-wrap { border-color: #d1d5db !important; }
#confirm-fields .cf-row2 .login-input-wrap:focus-within { border-color: var(--fr-red) !important; }
#confirm-fields .cf-amount-highlight { border-color: #d1d5db !important; }
#confirm-fields .cf-amount-highlight:focus { border-color: var(--fr-red) !important; }
/* Balance — red when owing, green when zero */
#DeleteBookingModal .text-warning { color: var(--fr-red) !important; }
#DeleteBookingModal .text-success.cf-balance-ok { color: var(--fr-green) !important; }
/* Info/hint note — amber tint */
#DeleteBookingModal .cf-group-helper {
  background: #fef3c7;
  border-color: #fcd34d;
  color: #92400e;
}
/* Footer primary buttons — flat colours */
#DeleteBookingModal #confirmbtn-booking,
#DeleteBookingModal #confirmadd-time,
#DeleteBookingModal #confirm-restore,
#DeleteBookingModal #add-payment,
#DeleteBookingModal #update-payment {
  background: var(--fr-green) !important;
}
#DeleteBookingModal #deletebtn-booking,
#DeleteBookingModal #deletebtn-screenshot,
#DeleteBookingModal #confirmbtn-addon-remove {
  background: var(--fr-red) !important;
}

/* ── Fix A: Secondary buttons → neutral; primary colours kept only where spec says ── */

/* --blue: all secondary (View SS, Add-ons, +15 mins) → neutral */
.owner-modal-booking-grid__btn--blue:not(#\9) {
  background: #f7f8fa !important;
  color: var(--fr-ink) !important;
  border: 1px solid var(--fr-line) !important;
}
.owner-modal-booking-grid__btn--blue:not(#\9) i { color: var(--fr-muted) !important; }
.owner-modal-booking-grid__btn--blue:not(#\9):hover { background: #eef0f4 !important; color: var(--fr-ink) !important; }

/* --yellow: Screenshot/No Screenshot → neutral; Add Payment (ri-add-line icon) → green fill */
.owner-modal-booking-grid__btn--yellow:not(#\9):not(:has(i.ri-add-line)) {
  background: #f7f8fa !important;
  color: var(--fr-ink) !important;
  border: 1px solid var(--fr-line) !important;
}
.owner-modal-booking-grid__btn--yellow:not(#\9):not(:has(i.ri-add-line)) i { color: var(--fr-muted) !important; }
.owner-modal-booking-grid__btn--yellow:not(#\9):not(:has(i.ri-add-line)):hover { background: #eef0f4 !important; }
.owner-modal-booking-grid__btn--yellow:not(#\9):has(i.ri-add-line) {
  background: var(--fr-green) !important;
  color: #fff !important;
  border: none !important;
}
.owner-modal-booking-grid__btn--yellow:not(#\9):has(i.ri-add-line) i { color: #fff !important; }

/* --green: Invoice (ri-printer-fill) → neutral; Confirm (ri-check-line) + Restore (ri-refresh-line) stay green */
.owner-modal-booking-grid__btn--green:not(#\9):has(i.ri-printer-fill) {
  background: #f7f8fa !important;
  color: var(--fr-ink) !important;
  border: 1px solid var(--fr-line) !important;
}
.owner-modal-booking-grid__btn--green:not(#\9):has(i.ri-printer-fill) i { color: var(--fr-muted) !important; }
.owner-modal-booking-grid__btn--green:not(#\9):has(i.ri-printer-fill):hover { background: #eef0f4 !important; }

/* --orange: Cannot Restore (disabled) → neutral muted */
.owner-modal-booking-grid__btn--orange:not(#\9),
.owner-modal-booking-grid__btn--orange:not(#\9):disabled {
  background: #f7f8fa !important;
  color: #9ca3af !important;
  border: 1px solid var(--fr-line) !important;
  opacity: 0.75 !important;
  cursor: not-allowed !important;
}
.owner-modal-booking-grid__btn--orange:not(#\9) i { color: #9ca3af !important; }

/* ── Fix B: PendingBookingsModal (list) header → dark bar + status accent ── */
#pending-bookings-modal-header {
  background: var(--fr-dark) !important;
  border-left: 4px solid var(--fr-red); /* default = cancelled */
}
#pending-bookings-modal-header.login-modal-header--pending { border-left-color: var(--fr-amber) !important; }
#pending-bookings-modal-header.login-modal-header--success { border-left-color: var(--fr-green) !important; }
#pending-bookings-modal-header.login-modal-header--warning { border-left-color: var(--fr-orange) !important; }
#pending-bookings-modal-header .login-modal-title {
  color: #fff !important;
  font-style: italic;
  font-weight: 900;
}
#pending-bookings-modal-header .login-modal-subtitle { color: rgba(255,255,255,0.72) !important; }
#pending-bookings-modal-header .login-modal-icon {
  background: rgba(255,255,255,0.12) !important;
  color: #fff !important;
}
#pending-bookings-modal-header .login-modal-close { color: rgba(255,255,255,0.80) !important; }
#pending-bookings-modal-header .login-modal-close:hover { color: #fff !important; background: rgba(255,255,255,0.10) !important; }

/* ── Part 3: BookingAddonModal header & totals ── */
#BookingAddonModal .login-modal-header {
  background: var(--fr-red);
}
/* Section labels — sporty italic-900 with red left bar */
#BookingAddonModal .bam-block-label {
  font-style: italic;
  font-weight: 900;
  font-size: 0.78rem;
  text-transform: uppercase;
  color: var(--fr-ink);
  position: relative;
  padding-left: 12px;
}
#BookingAddonModal .bam-block-label::before {
  content: '';
  position: absolute;
  left: 0;
  top: 2px;
  bottom: 2px;
  width: 3px;
  border-radius: 2px;
  background: var(--fr-red);
}
/* Court line label (collapsible header) */
#BookingAddonModal .bam-cline-court {
  font-style: italic;
  font-weight: 900;
}
/* Prices — already red in base; reinforce */
#BookingAddonModal .bam-price,
#BookingAddonModal .bam-cline-price { color: var(--fr-red); font-weight: 800; }
/* Summary total bar */
#BookingAddonModal .bam-summary-total {
  font-style: italic;
  font-weight: 900;
  font-size: 0.95rem;
  color: var(--fr-red);
}
/* Save button — flat green */
#bam-save-btn { background: var(--fr-green) !important; }

/* ── Compact BAM rows ── */
#BookingAddonModal .bam-sec-label {
  display: flex; align-items: center; gap: 7px;
  font-size: 10.5px; font-weight: 900; letter-spacing: 1.1px; text-transform: uppercase;
  color: var(--fr-muted); margin: 16px 2px 8px;
}
#BookingAddonModal .bam-sec-label:first-child { margin-top: 4px; }
#BookingAddonModal .bam-sec-bar {
  width: 4px; height: 13px; border-radius: 3px; background: var(--fr-red); flex-shrink: 0;
}
#BookingAddonModal .bam-row {
  border: 1px solid var(--fr-line); border-radius: 13px; margin-bottom: 8px;
  overflow: hidden; background: #fff;
}
#BookingAddonModal .bam-row--added { border-color: rgba(21,168,90,.40); }
#BookingAddonModal .bam-row--customer { border-color: rgba(236,43,52,.35); background: #fff8f8; }
#BookingAddonModal .bam-row--free { border-color: rgba(21,168,90,.30); }
#BookingAddonModal .bam-rowhead {
  display: flex; align-items: center; gap: 10px; padding: 11px 12px; cursor: default;
}
#BookingAddonModal .bam-row--added .bam-rowhead,
#BookingAddonModal .bam-row--free .bam-rowhead { cursor: pointer; }
#BookingAddonModal .bam-row-ico {
  width: 36px; height: 36px; border-radius: 10px;
  display: grid; place-items: center; flex-shrink: 0; font-size: 17px;
}
#BookingAddonModal .bam-row-ico--game { background: #eaf1fe; color: var(--fr-blue); }
#BookingAddonModal .bam-row-ico--rkt  { background: var(--fr-red-soft); color: var(--fr-red); }
#BookingAddonModal .bam-row-ico--ball { background: var(--fr-green-soft); color: var(--fr-green); }
#BookingAddonModal .bam-row-ico--box  { background: var(--fr-amber-soft); color: var(--fr-amber); }
/* Emoji add-on icons (rackets = padel, ball cans = ball) — size them to sit
   like the Remix icons they replace, in the modal rows/section headers + chips. */
#BookingAddonModal .bam-emoji-ico { font-style: normal; line-height: 1; }
#BookingAddonModal .bam-row-ico .bam-emoji-ico { font-size: 19px; }
#BookingAddonModal .bam-sec-label .bam-emoji-ico { font-size: 14px; }
#booking-checkout .aib-emoji { font-style: normal; line-height: 1; font-size: 13px; }
#BookingAddonModal .bam-row-meta { flex: 1; min-width: 0; }
#BookingAddonModal .bam-row-name {
  font-size: 14.5px; font-weight: 800; line-height: 1.25;
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
#BookingAddonModal .bam-row-sub {
  font-size: 12px; color: var(--fr-muted2); font-weight: 600; margin-top: 2px;
}
#BookingAddonModal .bam-row-sub-inline {
  font-size: 12.5px; color: var(--fr-muted2); font-weight: 500;
}
/* Price/description line under the add-on name (price moved out of the Add button) */
#BookingAddonModal .bam-row-desc {
  font-size: 12px; font-weight: 700; color: var(--fr-red);
  margin-top: 3px; line-height: 1.3;
}
#BookingAddonModal .bam-row-state {
  display: flex; align-items: center; gap: 7px; flex-shrink: 0;
}
#BookingAddonModal .bam-row-addbtn {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 800; color: #fff;
  background: var(--fr-red); border: none;
  padding: 8px 12px; border-radius: 10px; cursor: pointer;
  transition: opacity .15s; white-space: nowrap;
}
#BookingAddonModal .bam-row-addbtn:hover { opacity: .85; }
#BookingAddonModal .bam-row-addbtn__price { font-weight: 900; }
#BookingAddonModal .bam-row-price {
  font-size: 14.5px; font-weight: 900; color: var(--fr-red); white-space: nowrap;
}
#BookingAddonModal .bam-row-chev {
  color: var(--fr-muted2); display: grid; place-items: center; font-size: 18px;
  transition: transform .2s;
}
#BookingAddonModal .bam-row--open > .bam-rowhead .bam-row-chev { transform: rotate(180deg); }
#BookingAddonModal .bam-freepill {
  font-size: 11.5px; font-weight: 900;
  color: var(--fr-green-ink); background: var(--fr-green-soft);
  padding: 6px 11px; border-radius: 20px; white-space: nowrap;
}
/* Expand panel */
#BookingAddonModal .bam-expand {
  border-top: 1px solid var(--fr-line); padding: 12px; background: #fbfbfc; display: none;
}
#BookingAddonModal .bam-row--open .bam-expand { display: block; }
#BookingAddonModal .bam-ctl-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 10px;
}
#BookingAddonModal .bam-ctl-row:last-child { margin-bottom: 0; }
#BookingAddonModal .bam-ctl-row--end { justify-content: flex-end; }
#BookingAddonModal .bam-ctl-label {
  font-size: 13px; color: var(--fr-muted); font-weight: 600;
}
#BookingAddonModal .bam-avail {
  font-size: 11.5px; color: var(--fr-muted2); font-weight: 500;
}
#BookingAddonModal .bam-ctl-sel {
  background: #fff; border: 1px solid var(--fr-line); border-radius: 9px;
  padding: 8px 10px; font-size: 13.5px; font-weight: 700;
  min-width: 150px; flex-shrink: 0;
}
#BookingAddonModal .bam-ctl-sel:focus { outline: none; border-color: var(--fr-red); }
#BookingAddonModal .bam-stepper {
  display: flex; align-items: center;
  border: 1px solid var(--fr-line); border-radius: 9px; overflow: hidden;
}
#BookingAddonModal .bam-stepper button {
  width: 36px; height: 36px; background: #fff; border: none;
  font-size: 18px; color: var(--fr-ink); cursor: pointer; display: grid; place-items: center;
}
#BookingAddonModal .bam-stepper button:hover { background: var(--fr-red-soft); color: var(--fr-red); }
#BookingAddonModal .bam-stepper button:disabled { opacity: .35; cursor: default; }
#BookingAddonModal .bam-stepper-val {
  min-width: 38px; text-align: center; font-weight: 900; font-size: 15px;
}
/* Override old .bam-remove-btn in this modal */
#BookingAddonModal .bam-remove-btn {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 800; color: var(--fr-red);
  background: var(--fr-red-soft); border: 1px solid rgba(236,43,52,.3);
  padding: 8px 12px; border-radius: 10px; cursor: pointer;
}
#BookingAddonModal .bam-remove-btn:hover { background: #fad7d9; }

/* Legacy .bam-add-btn — kept for any other usage */
.bam-add-btn {
  display: inline-flex; align-items: center; gap: 4px; margin-top: 6px;
  padding: 5px 14px; background: var(--fr-green); color: #fff;
  border: none; border-radius: 6px; font-size: 13px; font-weight: 600;
  cursor: pointer; transition: opacity 0.15s;
}
.bam-add-btn:hover { opacity: 0.85; }

/* ═══════════════════════════════════════════════════════
   fr-btn-neutral — secondary/utility button utility class
   Added: Part 1 (3rd attempt) neutralise secondary buttons
   ═══════════════════════════════════════════════════════ */
.fr-btn-neutral {
  background: #f7f8fa !important;
  border: 1px solid var(--fr-line) !important;
  color: var(--fr-ink) !important;
  box-shadow: none !important;
}
.fr-btn-neutral svg,
.fr-btn-neutral i,
.fr-btn-neutral .icon { color: var(--fr-muted) !important; }

/* ═══════════════════════════════════════════════════════
   Part 2 — Modal shell restyle (admin scope)
   Flatten gradients, fix anatomy, red accent on selected
   resolution option.
   ═══════════════════════════════════════════════════════ */

/* --- Flatten default (action/red) header gradient --- */
.login-modal-header {
  background: var(--fr-red) !important;
}
.login-modal-header.login-modal-header--success {
  background: var(--fr-green) !important;
}
.login-modal-header.login-modal-header--warning,
.login-modal-header.login-modal-header--pending {
  background: var(--fr-amber) !important;
}

/* --- Icon chip: 46px, lighter glass tint --- */
.login-modal-header .login-modal-icon {
  width: 46px !important;
  height: 46px !important;
  min-width: 46px !important;
  background: rgba(255,255,255,0.16) !important;
  border-radius: 12px !important;
  color: #fff !important;
}

/* --- Title: italic-900, subtitle 80% opacity --- */
.login-modal-header .login-modal-title {
  font-style: italic !important;
  font-weight: 900 !important;
  color: #fff !important;
}
.login-modal-header .login-modal-subtitle {
  color: rgba(255,255,255,0.80) !important;
}

/* --- Close X: 36px circle, glass tint --- */
.login-modal-header .login-modal-close {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  background: rgba(255,255,255,0.16) !important;
  border-radius: 50% !important;
  color: rgba(255,255,255,0.90) !important;
}
.login-modal-header .login-modal-close:hover {
  background: rgba(255,255,255,0.26) !important;
  color: #fff !important;
}

/* --- List/info modals keep the dark header already set via ID ---
       Nothing to add; #pending-bookings-modal-header already dark.  */

/* --- Cancel/resolution option: red accent when selected --- */
.cancel-resolve__opt:has(input:checked) {
  border-color: var(--fr-red);
  background: var(--fr-red-soft);
  border-radius: 8px;
  padding: 4px 8px;
}
.cancel-resolve__opt:has(input:checked) .cancel-resolve__title {
  color: var(--fr-red) !important;
  font-weight: 700;
}

/* ═══════════════════════════════════════════════════════
   Part 2 — Remaining gradient hunt (admin scope)
   Staff modal header, wallet panel, staff action btn
   ═══════════════════════════════════════════════════════ */

/* Staff management modal header + primary action button */
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .staff-modal-header {
  background: var(--fr-dark) !important;
}
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .staff-btn {
  background: var(--fr-dark) !important;
}

/* Wallet info panel — dark header with indigo left tag */
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .wallet-panel__header {
  background: var(--fr-dark) !important;
  position: relative;
  padding-left: 18px;
}
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .wallet-panel__header::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: #4f46e5;
}

/* ═══════════════════════════════════════════════════════════════
   CUSTOMER BOOKING SUMMARY — POLISHED DARK RESTYLE
   Scoped entirely to #booking-checkout; does NOT affect admin.
   ═══════════════════════════════════════════════════════════════ */

#booking-checkout {
  --bcs-bg:      #0c0d10;
  --bcs-surf:    #15171c;
  --bcs-surf2:   #1c1f26;
  --bcs-raise:   #23262e;
  --bcs-border:  #2c2f37;
  --bcs-border2: #383b45;
  --bcs-text:    #f4f5f7;
  --bcs-muted:   #9aa0ad;
  --bcs-muted2:  #6f7480;
  --bcs-red:     #ec3a42;
  --bcs-red-s:   rgba(236,58,66,.14);
  --bcs-red-l:   rgba(236,58,66,.5);
  --bcs-green:   #2bd07c;
  --bcs-green-s: rgba(43,208,124,.14);
  --bcs-green-l: rgba(43,208,124,.45);
  --bcs-amber:   #f5a524;
  --bcs-amber-s: rgba(245,165,36,.12);
  --bcs-amber-l: rgba(245,165,36,.45);
}

/* Panel shell */
#booking-checkout.booking-checkout-panel {
  background: var(--bcs-surf);
  border: 1px solid var(--bcs-border);
  border-radius: 18px;
  box-shadow: 0 16px 48px rgba(0,0,0,.6);
}

/* Title */
#booking-checkout .booking-charges-title {
  font-style: italic;
  font-weight: 900;
  font-size: 18px;
  letter-spacing: 0.1px;
  color: var(--bcs-text);
}

/* Slot header label — already flex/uppercase in base; just tighten */
#booking-checkout .booking-checkout-customer-label {
  color: var(--bcs-muted);
  font-size: 10px;
  letter-spacing: 0.9px;
  margin-bottom: 8px;
}
/* Calendar icon in a small red-soft chip */
#booking-checkout .booking-checkout-customer-label i.ri-calendar-check-line {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 7px;
  background: var(--bcs-red-s);
  border: 1px solid var(--bcs-red-l);
  color: var(--bcs-red);
  font-size: 13px;
  flex-shrink: 0;
}
/* Slot count badge */
#booking-checkout .checkout-slot-count-badge {
  background: var(--bcs-border2);
  color: var(--bcs-text);
  font-size: 11px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 999px;
  margin-left: 0;
}
/* "You save" green pill */
#booking-checkout .checkout-savings-badge {
  background: var(--bcs-green-s);
  border: 1px solid var(--bcs-green-l);
  color: var(--bcs-green);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 10px;
  gap: 4px;
  margin-left: auto;
}

/* Summary box — remove redundant sub-surface */
#booking-checkout .booking-checkout-summary-box.booking-checkout-customer-box {
  background: transparent;
  border: none;
  padding: 0;
  margin-top: 4px;
}
/* Slots scroll area — transparent, cards handle their own bg */
#booking-checkout .booking-checkout-summary-box .booking-checkout-summary-slots {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  margin-bottom: 6px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

/* Slot cards — raised surface-2 */
#booking-checkout .bcs-field-row {
  background: var(--bcs-surf2);
  border-radius: 10px;
  padding: 7px 10px;
  border-top: none;
  margin-top: 0;
}
#booking-checkout .bcs-field-row + .bcs-field-row {
  border-top: none;
  margin-top: 0;
  padding-top: 7px;
}
/* Date / court name */
#booking-checkout .bcs-field-date { color: var(--bcs-muted); }
#booking-checkout .bcs-field-name { color: var(--bcs-text); }
/* Time chip */
.timechip {
  color: #2bd07c;
  background: rgba(43,208,124,.14);
  border: 1px solid rgba(43,208,124,.45);
}
/* Price */
#booking-checkout .bcs-field-price { color: var(--bcs-text); }
/* Remove × */
#booking-checkout .bcs-field-remove {
  background: rgba(236,58,66,.1);
  color: var(--bcs-red);
}
#booking-checkout .bcs-field-remove:hover {
  background: var(--bcs-red);
  color: #fff;
}
/* Game pill (court games selector) */
#booking-checkout .bcs-field-games .game-pill-checkout {
  border-color: var(--bcs-border2);
  background: var(--bcs-raise);
}
#booking-checkout .bcs-field-games .game-pill-checkout.game-pill-active {
  border-color: var(--bcs-red) !important;
  background: rgba(236,58,66,.12) !important;
}

/* ——— Add-on chips ——— */
#booking-checkout .addon-info-bullets { margin: 6px 0 4px; }
#booking-checkout .aib-chip {
  background: var(--bcs-surf2);
  border-color: var(--bcs-border2);
  color: var(--bcs-muted);
  border-radius: 9px;
}
#booking-checkout .aib-chip--idle {
  border-color: var(--bcs-red-l);
  color: var(--bcs-red);
}
#booking-checkout .aib-chip--upsell {
  background: var(--bcs-amber-s);
  border-color: var(--bcs-amber-l);
  color: var(--bcs-amber);
}
#booking-checkout .aib-chip--free,
#booking-checkout .aib-chip--selected,
#booking-checkout .aib-chip--bc-added {
  background: var(--bcs-green-s);
  border-color: var(--bcs-green-l);
  color: var(--bcs-green);
}
/* Venue-wide line (VR & PS5) — bolder + reads as a tappable action, not a label. */
#booking-checkout .aib-chip--available {
  color: #fff;
  font-weight: 600;
  background: var(--bcs-raise);
  border-color: var(--bcs-border2);
}
#booking-checkout .aib-chip--available:hover {
  background: var(--bcs-border);
  border-color: var(--bcs-red-l);
}
#booking-checkout .aib-chip--available i { color: var(--bcs-red); font-size: 14px; }
#booking-checkout .aib-chip--available::after {
  content: "\203A"; /* › — affordance that it opens the venue add-ons */
  margin-left: auto;
  padding-left: 8px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  color: var(--bcs-red);
}

/* ——— Per-court add-ons under each slot-group card ——— */
/* Cards WITH per-court add-ons stack vertically: slot line full-width
   (space-between keeps sport/remove at the right), add-ons on the row below.
   Add-on-free cards keep the default single-row layout. */
#booking-checkout .bcs-field-row--has-addons {
  flex-direction: column;
  align-items: stretch;
}
#booking-checkout .bcs-court-addons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  margin-top: 7px;
  padding-top: 7px;
  border-top: 1px dashed var(--bcs-border);
}
/* ——— Slot card: games + remove pinned to the TOP-RIGHT corner ——— */
/* Anchor the games/remove cluster to the top of the line so it stays in the
   top-right corner even when the slot text wraps to two lines (mobile). Applies
   to every card — plain and add-on — for consistent placement. */
#booking-checkout .bcs-line { align-items: flex-start; }
/* Bigger, easier-to-tap remove (×), consistent on all cards. */
#booking-checkout .bcs-field-remove {
  width: 26px;
  height: 26px;
  font-size: 17px;
  border-radius: 7px;
}

/* ——— Add Add-ons button ——— */
#booking-checkout #addon-btn-wrap { margin: 8px 0 6px; }
#booking-checkout .addon-open-btn {
  background: var(--bcs-raise);
  border: none;
  border-radius: 10px;
  color: var(--bcs-muted);
  font-size: 13px;
  font-weight: 600;
  padding: 7px 12px;
  gap: 10px;
}
#booking-checkout .addon-open-btn:hover {
  background: var(--bcs-border);
  border: none;
  color: var(--bcs-text);
}
/* + icon gets a red pill */
#booking-checkout .addon-btn-idle i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: var(--bcs-red);
  color: #fff;
  font-size: 14px;
  flex-shrink: 0;
}
#booking-checkout .addon-open-btn--active {
  border: none !important;
  color: var(--bcs-green) !important;
  background: var(--bcs-green-s) !important;
}
#booking-checkout .addon-open-btn--active:hover {
  background: rgba(43,208,124,.2) !important;
}

/* ——— Totals section ——— */
#booking-checkout .booking-checkout-summary-box .booking-checkout-summary-totals {
  border-top: 1px solid var(--bcs-border);
  padding: 8px 2px 0;
  margin: 6px 0 0;
}
#booking-checkout .bct-row {
  color: var(--bcs-muted);
  font-size: 12px;
  font-weight: 600;
}
#booking-checkout .bct-muted { color: var(--bcs-muted2); }
#booking-checkout .bct-discount {
  color: var(--bcs-red);
  font-weight: 700;
}
#booking-checkout .bct-addon { color: var(--bcs-amber); }
/* Balance row */
#booking-checkout .bct-grand {
  font-size: 14px;
  font-weight: 800;
  color: var(--bcs-text);
  border-top: 1px solid var(--bcs-border);
  margin-top: 5px;
}
#booking-checkout .bct-grand > span:first-child {
  font-style: italic;
  font-size: 13px;
  font-weight: 600;
  color: var(--bcs-muted);
}
#booking-checkout .bct-grand > span:last-child {
  color: var(--bcs-green);
  font-size: 24px;
  font-weight: 900;
}

/* ——— Book Now button ——— */
#booking-checkout .booking-charges-btn {
  background: var(--bcs-green) !important;
  border: none !important;
  color: #06281a !important;
  font-weight: 800 !important;
  font-size: 15px !important;
  letter-spacing: 0.3px;
  border-radius: 12px !important;
  padding: 12px !important;
  width: 100%;
  box-shadow: 0 4px 20px rgba(43,208,124,.25);
  transition: background 0.2s, box-shadow 0.2s;
}
#booking-checkout .booking-charges-btn:hover,
#booking-checkout .booking-charges-btn:focus-visible {
  background: #35e08a !important;
  color: #06281a !important;
  box-shadow: 0 6px 24px rgba(43,208,124,.45) !important;
}

/* ═══════════════════════════════════════════════════════════════
   SELECT LOCATION — BOTTOM-SHEET POPUP
   Scoped to the customer booking flow; never appears in admin.
   ═══════════════════════════════════════════════════════════════ */

/* Scrim */
.loc-scrim {
  position: fixed;
  inset: 0;
  background: rgba(8,9,12,.82);   /* opaque enough to hide the page/hero behind */
  z-index: 99998;                 /* above the site header/nav */
}


/* Centered modal (was a bottom-sheet) */
.loc-sheet {
  position: fixed;
  left: 50%;
  top: 50%;
  width: min(430px, calc(100vw - 28px));
  max-height: 82vh;
  background: #15171c;
  border: 1px solid #2c2f37;
  border-radius: 20px;
  overflow: hidden;
  display: flex !important;
  flex-direction: column;
  box-shadow: 0 24px 60px -12px rgba(0,0,0,.75);
  z-index: 99999;                 /* above the scrim + site header/nav */
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(.96);
  transition: opacity 0.2s ease, transform 0.22s cubic-bezier(.32,1,.23,1);
}
.loc-sheet.d-none { opacity: 0; pointer-events: none; transform: translate(-50%, -50%) scale(.96); }
.loc-sheet.loc-sheet-open { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%) scale(1); }

/* Drag handle — not used in the centered modal */
.loc-sheet-handle { display: none; }

/* Header row */
.loc-sheet-head {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 8px 16px 14px;
  flex-shrink: 0;
}
.loc-sheet-pin {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: rgba(236,58,66,.13);
  border: 1px solid rgba(236,58,66,.55);
  display: grid;
  place-items: center;
  color: #ec3a42;
  font-size: 18px;
  flex-shrink: 0;
}
.loc-sheet-title {
  flex: 1;
  font-size: 20px;
  font-weight: 900;
  font-style: italic;
  color: #f4f5f7;
  margin: 0;
}
.loc-sheet-x {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #23262e;
  border: 1px solid #2c2f37;
  display: grid;
  place-items: center;
  color: #9aa0ad;
  font-size: 18px;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s, color 0.15s;
}
.loc-sheet-x:hover { background: #2c2f37; color: #f4f5f7; }

/* Scrollable list */
.loc-sheet-list {
  overflow-y: auto;
  flex: 1;
  padding-bottom: 16px;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain; /* don't chain scroll to the page behind */
}
/* Lock page scroll while a bottom-sheet is open (prevents background scrolling) */
body.fr-sheet-lock { overflow: hidden; }

/* City header (legacy — list is now flat) */
.loc-sheet .loc-city-header {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #6f7480;
  padding: 14px 16px 8px;
  background: none;
}

/* ── Venue card (dark) ─────────────────────────────────────────────────── */
.loc-sheet .loc-option.loc-card {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 11px;
  margin: 0 13px 11px;
  border-radius: 15px;
  cursor: pointer;
  position: relative;
  min-height: 0;
  background: #1b1e24;
  border: 1px solid #2a2f38;
  transition: border-color .15s, box-shadow .15s;
}
.loc-sheet .loc-option.loc-card:first-child { margin-top: 2px; }
.loc-sheet .loc-option.loc-card:hover { border-color: #3a4150; }
.loc-sheet .loc-option.loc-card.loc-option-active {
  border-color: #e11d2a;
  box-shadow: 0 0 0 2px rgba(225,29,42,.14);
}
.loc-sheet .loc-option.loc-card.loc-option-active::before { content: none; }

/* Radio */
.loc-card-radio {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid #2a2f38;
  flex: none;
  display: grid;
  place-items: center;
  margin-right: 1px;
}
.loc-sheet .loc-option-active .loc-card-radio { border-color: #e11d2a; }
.loc-sheet .loc-option-active .loc-card-radio::after {
  content: '';
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #e11d2a;
}

/* Thumb */
.loc-card-thumb {
  width: 76px;
  height: 76px;
  border-radius: 12px;
  flex: none;
  overflow: hidden;
  background: #0e1013;
  display: grid;
  place-items: center;
}
.loc-card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.loc-card-initials { color: #8b93a0; font-weight: 800; font-size: 20px; letter-spacing: 1px; }

/* Info */
.loc-card-info { flex: 1; min-width: 0; }
.loc-sheet .loc-option-name,
.loc-card-name {
  font-size: 16px;
  font-weight: 800;
  color: #f4f6f8;
  line-height: 1.25;
  white-space: normal;
}
.loc-card-addr {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12.5px;
  color: #8b93a0;
  margin-top: 3px;
}
.loc-card-addr svg { flex: none; color: #e11d2a; }
.loc-card-addr-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.loc-card-meta { font-size: 13px; color: #f4f6f8; font-weight: 600; margin-top: 7px; white-space: nowrap; }
.loc-card-meta .loc-card-price { color: #e11d2a; }
.loc-card-meta .loc-card-dot { color: #5f6773; margin: 0 6px; font-weight: 400; }

/* Hide any JS-injected check icon — the radio conveys selection */
.loc-sheet .loc-option-check { display: none; }

/* ── Shared widget: section labels + collapsed fields (dark) ────────────── */
/* Self-contained: neutralise any page-level text bleed (letter-spacing,
   transforms, centering) so the shared cards render identically on every page. */
.fr-widget { text-align: left; letter-spacing: normal; word-spacing: normal; text-transform: none; }
.fr-seclabel {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #e11d2a;
  margin: 6px 2px 10px;
}
.fr-seclabel i { font-size: 14px; }
.fr-field {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #101216;
  border: 1px solid #2a2f38;
  border-radius: 14px;
  padding: 14px 15px;
  min-height: 69px; /* match the booking filled field (40px thumb) so placeholder
                       and filled fields are the same height on both pages */
  cursor: pointer;
  margin-bottom: 18px;
  transition: border-color .15s;
}
.fr-field:hover { border-color: #3a4150; }
.fr-field-lead { color: #e11d2a; font-size: 20px; flex: none; display: grid; place-items: center; }
.fr-field-lead .fr-field-thumb {
  width: 40px;
  height: 40px;
  border-radius: 9px;
  overflow: hidden;
  display: block;
  background: #0e1013;
}
.fr-field-lead .fr-field-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fr-field-text {
  font-size: 17px;
  font-weight: 800;
  color: #f4f6f8;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fr-field:not(.fr-field--filled) .fr-field-text { color: #8b93a0; font-weight: 700; }
/* Required-location validation state */
.fr-field.fr-field--error { border-color: #e11d2a; box-shadow: 0 0 0 3px rgba(225,29,42,.20); }
.fr-field-error { color: #e11d2a; font-size: 12.5px; font-weight: 600; margin: 7px 2px 0; }
.fr-field-chev { margin-left: auto; color: #5f6773; font-size: 18px; flex: none; }
/* Belt-and-suspenders: keep the collapsed field compact no matter what text
   styling a host page (e.g. the home hero's span rules) tries to leak in.
   High-specificity so page-level bleed cannot stretch/resize it. */
.fr-widget .fr-field,
.fr-widget .fr-field .fr-field-text,
.fr-widget .fr-field .fr-field-lead { letter-spacing: normal; word-spacing: normal; text-transform: none; }
.fr-widget .fr-field .fr-field-text { font-size: 17px; line-height: 1.3; }
/* Last field sits directly above the CTA / calendar — drop its bottom margin so
   it doesn't stack with the button's top margin into an oversized gap. */
.fr-widget .fr-field:last-child,
.fr-widget #fr-loc-field { margin-bottom: 0; } /* location is the last field even with the error msg after it */

/* ── Sport row (compact, dark) ─────────────────────────────────────────── */
.fr-sport-list { padding-bottom: 10px; }
.fr-sport-list .srow {
  display: flex;
  gap: 11px;
  align-items: center;
  background: #1b1e24;
  border: 1px solid #2a2f38;
  border-radius: 12px;
  padding: 7px 12px;
  margin: 0 13px 9px;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
}
.fr-sport-list .srow:first-child { margin-top: 2px; }
.fr-sport-list .srow:hover { border-color: #3a4150; }
.fr-sport-list .srow.sel { border-color: #e11d2a; box-shadow: 0 0 0 2px rgba(225,29,42,.14); }
.fr-sport-list .stile {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  flex: none;
  display: grid;
  place-items: center;
  font-size: 20px;
  background: #0e1013;
  border: 1px solid #2a2f38;
}
.fr-sport-list .srow.sel .stile { background: rgba(225,29,42,.14); border-color: rgba(225,29,42,.4); }
.fr-sport-list .sname { font-size: 15px; font-weight: 700; flex: 1; color: #f4f6f8; }
.fr-sport-list .radio {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid #2a2f38;
  flex: none;
  display: grid;
  place-items: center;
}
.fr-sport-list .srow.sel .radio { border-color: #e11d2a; }
.fr-sport-list .srow.sel .radio::after { content: ''; width: 11px; height: 11px; border-radius: 50%; background: #e11d2a; }


/* ── Staff Performance ─────────────────────────────────────────────────────── */
/* Layout-only defaults (no colour) */
.sp-section { margin-bottom: 20px; }
.sp-list { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 12px; width: 100%; box-sizing: border-box; }
.sp-card__header { display: flex; align-items: center; gap: 8px; padding-bottom: 9px; border-bottom: 1px solid #2c2f37; margin-bottom: 9px; min-width: 0; }
.sp-role { font-size: 10px; font-weight: 700; border-radius: 999px; padding: 2px 8px; text-transform: uppercase; letter-spacing: .05em; flex-shrink: 0; }
.sp-metrics { display: flex; flex-direction: column; gap: 7px; }
.sp-mr { display: grid; grid-template-columns: minmax(0,1fr) auto; grid-template-rows: auto auto; align-items: center; column-gap: 8px; }
.sp-mlabel { grid-column: 1; grid-row: 1; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: #9ca3af; display: flex; align-items: center; gap: 5px; min-width: 0; overflow: hidden; }
.sp-mval { grid-column: 2; grid-row: 1; text-align: right; font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; color: #f3f4f6; }
.sp-bar-track { grid-column: 1 / -1; grid-row: 2; height: 5px; border-radius: 999px; overflow: hidden; margin-top: 4px; }
.sp-bar-fill { height: 100%; border-radius: 999px; transition: width .35s ease; }
.sp-fast { font-size: 9px; font-weight: 800; letter-spacing: .4px; background: #dcfce7; color: #16a34a; border-radius: 4px; padding: 1px 5px; text-transform: uppercase; }
.sp-msub { grid-column: 1 / -1; font-size: 10px; font-weight: 600; color: #9ca3af; margin-top: 2px; }
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .sp-msub { color: #9aa0ab; }
.sp-adm-divider { grid-column: 1 / -1; display: flex; align-items: center; gap: 6px; margin: 4px 0 1px; }
.sp-adm-divider::before,.sp-adm-divider::after { content: ''; flex: 1; height: 1px; background: #2c2f37; }
.sp-adm-divider span { font-size: 9px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: #6b7280; white-space: nowrap; }
.sp-self { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
.sp-card { background: #1a1c22; border: 1px solid #2c2f37; border-radius: 15px; padding: 12px 14px; box-sizing: border-box; min-width: 0; }
.sp-card--top { border-color: #ef4444; box-shadow: 0 0 0 1px rgba(239,68,68,.15), 0 4px 14px rgba(239,68,68,.12); }
.sp-bar-track { background: #2a2d36; }
.sp-self__period { color: #9ca3af; }
.sp-self__tile-val { color: #f3f4f6; }
.sp-self__tile-lbl { color: #9ca3af; }

/* Heading toggle */
.sp-section__title--toggle { cursor: pointer; user-select: none; display: flex; align-items: center; gap: 6px; }
.sp-title-dot { width: 8px; height: 8px; border-radius: 50%; background: #ec2b34; box-shadow: 0 0 0 4px rgba(236,43,52,.18); flex-shrink: 0; }
.sp-section-chevron { font-size: 16px; margin-left: auto; transition: transform .2s ease; }

/* Compact chip grid */
.sp-chip-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 8px; }
.sp-chip { display: flex; align-items: center; gap: 8px; background: #fff; border: 1px solid transparent; border-radius: 11px; padding: 8px 10px; box-shadow: 0 5px 14px -12px rgba(0,0,0,.6); cursor: pointer; box-sizing: border-box; transition: transform .12s ease, opacity .12s ease; }
.sp-chip:active { transform: scale(.97); opacity: .92; }
.sp-chip--top { background: #fdecec; border-color: #f6c9cb; }
.sp-chip-rank { width: 21px; height: 21px; border-radius: 7px; display: grid; place-items: center; font-size: 11px; font-weight: 900; flex-shrink: 0; background: #eceef2; color: #7a818d; }
.sp-chip-rank--top { background: #ec2b34; color: #fff; }
.sp-chip-mid { min-width: 0; flex: 1; }
.sp-chip-name { font-size: 14px; font-weight: 900; font-style: italic; color: #14161c; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.15; min-width: 0; }
.sp-chip-role { font-size: 9px; font-weight: 900; letter-spacing: .5px; text-transform: uppercase; }
.sp-chip-role--cs { color: #ec2b34; }
.sp-chip-role--manager { color: #2f6fed; }
.sp-chip-role--admin { color: #9aa0ab; }
.sp-chip-stat { text-align: right; flex-shrink: 0; }
.sp-chip-stat__val { font-size: 16px; font-weight: 900; color: #14161c; line-height: 1; font-variant-numeric: tabular-nums; }
.sp-chip-stat__sub { font-size: 8.5px; font-weight: 900; letter-spacing: .4px; text-transform: uppercase; color: #9aa0ab; margin-top: 3px; }
.sp-hint { text-align: center; font-size: 11px; font-weight: 600; color: #6b7280; margin-top: 11px; }

.sp-empty { color: #9ca3af; font-size: 13px; padding: 10px 0; }
.sp-name { flex: 1; font-size: 14px; font-weight: 600; color: #fff; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Admin sporty theme — scoped to light admin profile */
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .sp-section__title {
  font-size: 13px; font-weight: 900; font-style: italic; color: #fff;
  letter-spacing: .03em; margin-bottom: 10px;
}
.sp-section__title { color: #fff; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 10px; }
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .sp-empty {
  color: #6b7280; font-size: 13px; padding: 10px 0;
}
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .sp-hint {
  color: #9ca3af;
}
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .sp-card {
  background: #fff;
  border: 1px solid #e3e6ec;
  border-radius: 15px;
  padding: 14px 16px;
  box-shadow: 0 2px 8px rgba(15,23,42,0.07);
  box-sizing: border-box;
}
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .sp-card--top {
  border-color: #ef4444;
  box-shadow: 0 0 0 1px rgba(239,68,68,.15), 0 4px 16px rgba(239,68,68,.14);
}
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .sp-card__header {
  border-bottom-color: #e3e6ec;
}
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .sp-rank {
  font-size: 11px; font-weight: 800; color: #6b7280;
  background: #f1f5f9; border-radius: 6px; padding: 2px 8px;
}
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .sp-rank--top {
  color: #fff; background: var(--fr-red);
}
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .sp-name {
  flex: 1; min-width: 0; font-size: 14px; font-weight: 800; font-style: italic; color: #14161c;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .sp-role--cs {
  background: #fee2e2; color: #dc2626;
}
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .sp-role--manager {
  background: #dbeafe; color: #1d4ed8;
}
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .sp-role--admin {
  background: #f1f5f9; color: #475569;
}
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .sp-mlabel {
  color: #6b7280;
}
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .sp-mval {
  color: #14161c;
}
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .sp-bar-track {
  background: #eceef2;
}
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .sp-adm-divider::before,
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .sp-adm-divider::after {
  background: #e3e6ec;
}
/* Self-view */
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .sp-self__block {
  background: #fff; border: 1px solid #e3e6ec; border-radius: 16px;
  padding: 12px 14px; box-shadow: 0 2px 8px rgba(15,23,42,0.07);
}
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .sp-self__period {
  color: #6b7280;
}
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .sp-self__tile {
  background: #f8fafc; border-radius: 8px; padding: 8px 10px;
}
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .sp-self__tile-val {
  color: #14161c;
}
:is(body:has(#super-settings-btn),body:has(#fr-sporty-profile)) .sp-self__tile-lbl {
  color: #6b7280;
}

/* ── CS/Manager self-view (sps-*) ────────────────────────────────── */
.sps-h { font-size: 18px; font-weight: 900; font-style: italic; color: #fff; display: flex; align-items: center; gap: 9px; }
.sps-dot { width: 8px; height: 8px; border-radius: 50%; background: #ec2b34; box-shadow: 0 0 0 4px rgba(236,43,52,.18); flex-shrink: 0; }
.sps-sub { font-size: 12px; color: #8b909b; font-weight: 600; margin: 4px 0 14px 17px; }
.sps-grids { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.sps-block { background: #fff; border: 1px solid #e8eaef; border-radius: 16px; padding: 13px 12px; box-shadow: 0 8px 20px -14px rgba(0,0,0,.55); }
.sps-bhead { display: flex; align-items: center; gap: 7px; margin-bottom: 12px; }
.sps-bdot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.sps-bdot--red { background: #ec2b34; }
.sps-bdot--grey { background: #9aa0ab; }
.sps-bttl { font-size: 14px; font-weight: 900; font-style: italic; color: #14161c; }
.sps-bsub { font-size: 10.5px; font-weight: 700; color: #9aa0ab; margin-left: auto; }
.sps-tile { position: relative; padding: 9px 4px 9px 13px; }
.sps-tile + .sps-tile { border-top: 1px solid #e8eaef; }
.sps-tile::before { content: ""; position: absolute; left: 0; top: 11px; bottom: 11px; width: 3px; border-radius: 3px; }
.sps-tile--red::before { background: #ec2b34; }
.sps-tile--blue::before { background: #2f6fed; }
.sps-tile--green::before { background: #15a85a; }
.sps-tile--amber::before { background: #f0930f; }
.sps-tl { font-size: 9px; font-weight: 900; letter-spacing: .4px; text-transform: uppercase; color: #6b7280; }
.sps-tv { font-size: 19px; font-weight: 900; color: #14161c; margin-top: 4px; line-height: 1; font-variant-numeric: tabular-nums; }
.sps-tv small { font-size: 11px; color: #9aa0ab; font-weight: 800; }

/* ── Customer profile redesign (cpx-*) — tabbed offers-first, mockup v2 ────
   All styles token-based (--fr-*). Replaces the old inline style block in
   profile/customer/profile.php (survivors migrated here). */
.cpx-shell { max-width: 560px; margin: 0 auto; padding-bottom: 40px; }

/* Dark header panel */
.cpx-hdr { background: #15171c; color: #fff; padding: 20px 18px 0; border-radius: 0 0 var(--fr-radius) var(--fr-radius); }
.cpx-hdr-top { display: flex; align-items: center; gap: 13px; }
.cpx-avatar { width: 50px; height: 50px; border-radius: 50%; background: var(--fr-red); color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--headerFonts); font-weight: 600; font-size: 24px; padding-top: 3px; flex-shrink: 0; }
.cpx-who { min-width: 0; }
.cpx-who b { font-family: var(--headerFonts); font-weight: 600; font-size: 24px; display: block; line-height: 1.1; color: #fff; }
.cpx-who small { font-size: 12.5px; color: #9aa0ab; }
/* loyalty ring */
.cpx-ring-wrap { margin-left: auto; text-align: center; position: relative; cursor: pointer; flex-shrink: 0; }
.cpx-ring { width: 56px; height: 56px; transform: rotate(-90deg); display: block; margin: 0 auto; }
.cpx-ring circle { fill: none; stroke-width: 5; }
.cpx-ring-bg { stroke: rgba(255,255,255,.15); }
.cpx-ring-fg { stroke: var(--fr-red); stroke-linecap: round; stroke-dasharray: 157; stroke-dashoffset: 157; transition: stroke-dashoffset .5s ease; }
.cpx-ring-num { position: absolute; top: 24px; left: 50%; transform: translate(-50%,-50%); font-family: var(--headerFonts); font-weight: 600; font-size: 17px; color: #fff; }
.cpx-ring-lbl { font-size: 9.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: #9aa0ab; display: block; margin-top: 1px; }
/* wallet strip */
.cpx-wallet-strip { display: flex; align-items: center; justify-content: space-between; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); border-radius: 13px; padding: 10px 14px; margin: 15px 0 16px; }
.cpx-wallet-strip small { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #9aa0ab; }
.cpx-wallet-strip b { font-family: var(--headerFonts); font-weight: 600; font-size: 24px; color: #fff; }
.cpx-btn-red { background: var(--fr-red); color: #fff !important; border: none; border-radius: 12px; padding: 9px 15px; font-weight: 700; font-size: 13px; cursor: pointer; text-decoration: none; display: inline-block; }
.cpx-btn-red:active { background: var(--fr-red-2); }
/* tabs — pill strip (matches .fr-pill; horizontal scroll on phones) */
.cpx-tabs { display: flex; gap: 8px; overflow-x: auto; padding: 0 0 14px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.cpx-tabs::-webkit-scrollbar { display: none; }
.cpx-tab { flex-shrink: 0; padding: 7px 18px; border-radius: 999px; font-size: 13.5px; font-weight: 700; color: #c6cad2; background: rgba(255,255,255,.08); cursor: pointer; border: 1px solid transparent; user-select: none; }
.cpx-tab.on { background: var(--fr-red); color: #fff; }

/* Content */
.cpx-wrap { padding: 14px 14px 0; }
.cpx-hidden { display: none !important; }
.cpx-card { background: var(--fr-card); border: 1px solid var(--fr-line); border-radius: var(--fr-radius); box-shadow: var(--fr-shadow); padding: 16px; margin-bottom: 12px; }
.cpx-card-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; gap: 8px; }
.cpx-card-h b { font-family: var(--headerFonts); font-weight: 600; font-size: 21px; color: var(--fr-ink); }
.cpx-tag { font-size: 10.5px; font-weight: 700; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.cpx-tag--red   { background: var(--fr-red-soft); color: var(--fr-red-2); }
.cpx-tag--green { background: var(--fr-green-soft); color: var(--fr-green); }
.cpx-tag--amber { background: var(--fr-amber-soft); color: var(--fr-amber); }
.cpx-tag--soon  { background: var(--fr-line); color: var(--fr-muted); }
.cpx-empty { font-size: 12px; color: var(--fr-muted2); margin-bottom: 6px; }

/* Loyalty card — dark panel; restyle the AJAX fragment internals */
.cpx-loyal { background: #15171c; color: #fff; border: none; }
.cpx-loyal .cpx-card-h b { color: #fff; }
.cpx-loyal #cp-loyalty-body [style*="color:#6b7280"],
.cpx-loyal #cp-loyalty-body [style*="color:#9ca3af"] { color: #b9bec7 !important; }
.cpx-loyal #cp-loyalty-body [style*="color:#111"] { color: #fff !important; }
.cpx-loyal #cp-loyalty-body [style*="background:#f1f5f9"] { background: rgba(255,255,255,.14) !important; }
.cpx-loyal .text-muted { color: #b9bec7 !important; }
.cpx-loyal #cp-loyalty-redeem-btn { width: 100% !important; margin-top: 10px; padding: 13px !important; font-size: 14px !important; border-radius: 12px; background: var(--fr-red) !important; }

/* Coupon / offer rows (dashed code-chip pattern) */
.cpx-cpn { display: flex; align-items: center; gap: 11px; padding: 11px 0; border-top: 1px dashed var(--fr-line); }
.cpx-cpn:first-of-type { border-top: none; }
.cpx-cpn-code { font-family: var(--headerFonts); font-weight: 600; font-size: 19px; letter-spacing: .04em; background: var(--fr-red-soft); border: 1.5px dashed #f3b6ba; color: var(--fr-red-2); border-radius: 10px; padding: 4px 11px 2px; white-space: nowrap; }
.cpx-cpn-info { flex: 1; min-width: 0; }
.cpx-cpn-info b { font-size: 13.5px; display: block; line-height: 1.35; color: var(--fr-ink); }
.cpx-cpn-info small { font-size: 11.5px; color: var(--fr-muted); display: block; }
.cpx-cpn-info small.cpx-warn { color: var(--fr-red); font-weight: 700; }
.cpx-cpn-info small.cpx-amber { color: var(--fr-amber); font-weight: 700; }
.cpx-cpn-info small.cpx-reserved { color: var(--fr-green); font-weight: 700; }
.cpx-warn { color: var(--fr-red); font-weight: 700; }
.cpx-btn-sm { background: #15171c; color: #fff !important; border: none; border-radius: 10px; padding: 8px 13px; font-weight: 700; font-size: 12px; cursor: pointer; white-space: nowrap; text-decoration: none; display: inline-block; }
.cpx-auto-note { font-size: 11.5px; color: var(--fr-green); font-weight: 700; margin-top: 8px; }
.cpx-history-link { display: block; font-size: 12px; color: var(--fr-muted) !important; margin-top: 8px; text-decoration: none; }

/* Membership */
.cpx-member-meta { font-size: 12px; color: var(--fr-muted); margin-bottom: 6px; }
.cpx-member-hours { display: flex; gap: 8px; flex-wrap: wrap; font-size: 12px; margin-bottom: 6px; }
.cpx-member-hours span { background: #f3f4f6; border-radius: 6px; padding: 3px 9px; }
.cpx-member-soon { text-align: center; padding: 20px 16px; }
.cpx-member-soon i { font-style: normal; font-size: 24px; display: block; margin-bottom: 4px; }
.cpx-member-soon b { font-family: var(--headerFonts); font-weight: 600; font-size: 21px; display: block; color: var(--fr-ink); }
.cpx-member-soon p { font-size: 12.5px; color: var(--fr-muted); margin: 0; }
.cpx-member-soon .cpx-tag { margin-top: 8px; display: inline-block; }

/* Bookings pane */
.cpx-book { display: flex; gap: 12px; align-items: center; cursor: pointer; }
.cpx-book-date { background: var(--fr-red); color: #fff; border-radius: 12px; padding: 6px 12px 4px; text-align: center; flex-shrink: 0; }
.cpx-book-date b { font-family: var(--headerFonts); font-weight: 600; font-size: 23px; display: block; line-height: 1; }
.cpx-book-date small { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; }
.cpx-book-info { flex: 1; min-width: 0; }
.cpx-book-info b { font-size: 14px; display: block; color: var(--fr-ink); }
.cpx-book-info small { font-size: 12px; color: var(--fr-muted); }
.cpx-book-chev { color: var(--fr-muted2); font-size: 20px; }
.cpx-noti { display: flex; align-items: center; gap: 7px; background: var(--fr-amber-soft); color: var(--fr-amber-ink); border-radius: 12px; padding: 9px 13px; font-size: 13px; font-weight: 700; cursor: pointer; margin-bottom: 12px; }
.cpx-filters { margin-bottom: 12px; }
.cpx-flash { outline: 3px solid var(--fr-red); outline-offset: 2px; border-radius: 14px; transition: outline-color .3s; }

/* Account pane */
.cpx-acct-row { display: flex; align-items: center; gap: 11px; padding: 11px 0; border-top: 1px dashed var(--fr-line); cursor: pointer; }
.cpx-acct-row:first-of-type { border-top: none; }
.cpx-acct-row > i { color: var(--fr-muted2); font-size: 20px; }
.cpx-booknow { display: block; text-align: center; background: var(--fr-red); color: #fff !important; font-weight: 700; font-size: 15px; padding: 13px; border-radius: 12px; text-decoration: none; }
.cpx-booknow:active { background: var(--fr-red-2); }

/* Mobile (migrated from the old inline block: pills scroll strip) */
@media (max-width: 767px) {
  #customer-filters.mp-filter-pills {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  #customer-filters.mp-filter-pills::-webkit-scrollbar { display: none; }
  .cpx-hdr { border-radius: 0 0 16px 16px; }
}

/* ── Public coupon offers (fro-*) — homepage strip, card/list pills, booking chips,
   /offers page. Token-based; loaded globally via fr-sporty. ─────────────────── */
.fro-banner { margin-top: 18px; }
.fro-banner-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.fro-banner-head i { color: var(--fr-red); font-size: 20px; }
.fro-banner-head b { font-family: var(--headerFonts); font-weight: 600; font-size: 20px; color: var(--fr-ink); }
.fro-banner-head a { margin-left: auto; font-size: 12px; font-weight: 700; color: var(--fr-red); text-decoration: none; }

.fro-strip { display: flex; gap: 10px; overflow-x: auto; padding: 4px 0 8px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.fro-strip::-webkit-scrollbar { display: none; }
.fro-chip { flex-shrink: 0; display: flex; align-items: center; gap: 9px; background: var(--fr-card); border: 1px solid var(--fr-line); border-radius: 12px; box-shadow: var(--fr-shadow); padding: 8px 12px; text-decoration: none; cursor: pointer; }
.fro-chip:active { transform: scale(.98); }
.fro-chip-code { font-family: var(--headerFonts); font-weight: 600; font-size: 16px; letter-spacing: .04em; background: var(--fr-red-soft); border: 1.5px dashed #f3b6ba; color: var(--fr-red-2); border-radius: 8px; padding: 3px 9px 1px; white-space: nowrap; }
.fro-chip-desc { font-size: 12.5px; color: var(--fr-ink); font-weight: 700; white-space: nowrap; }
.fro-chip-desc small { display: block; font-size: 10.5px; color: var(--fr-muted); font-weight: 500; }

/* Small "Offer available" pill — featured card + venue-list badge (sits beside
   the existing membership badge; same pill family). */
.fr-offer-badge { display: inline-block; background: var(--fr-red-soft); color: var(--fr-red-2); font-size: .74rem; font-weight: 700; border-radius: 999px; padding: 3px 11px; text-decoration: none; line-height: 1.5; }
.fr-offer-badge i { font-size: .82rem; vertical-align: -1px; }
/* Featured-card variant (dark photo overlay context) */
.fc-content .fr-offer-badge { align-self: flex-start; margin: 2px 0; }

/* /offers page */
.fro-page { max-width: 760px; margin: 0 auto; padding: 0 14px; }
.fro-page .cpx-card { margin-bottom: 14px; }
.fro-page-empty { text-align: center; padding: 40px 16px; color: var(--fr-muted); }
.fro-page-empty i { font-size: 40px; color: var(--fr-muted2); display: block; margin-bottom: 10px; }

/* Booking checkout offer chips — tighter than the homepage strip */
.fro-checkout { margin: 2px 0 4px; }
.fro-checkout-lbl { font-size: 11px; color: var(--fr-muted); font-weight: 600; margin-bottom: 4px; }
.fro-checkout .fro-strip { padding: 0 0 4px; }
.fro-checkout .fro-chip { padding: 6px 10px; box-shadow: none; }
.fro-checkout .fro-chip-code { font-size: 14px; }

/* ── /offers full page (fro-offers) — marketing, mockup fr_offers_page ──────── */
.fro-offers { max-width: 560px; margin: 0 auto; padding-bottom: 40px; }
.fro-hero { background: #15171c; color: #fff; padding: 30px 20px 26px; text-align: center; border-radius: 0 0 22px 22px; position: relative; overflow: hidden; }
.fro-hero::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 79px, rgba(255,255,255,.04) 79px 81px); }
.fro-hero h1 { font-family: var(--headerFonts); font-weight: 600; font-size: 40px; text-transform: uppercase; position: relative; line-height: 1.02; color: #fff; }
.fro-hero h1 span { color: var(--fr-red); }
.fro-hero p { font-size: 14px; color: #b9bec7; margin-top: 6px; position: relative; }
.fro-wrap { padding: 16px; }
.fro-sec-lbl { font-family: var(--headerFonts); font-weight: 600; font-size: 15px; text-transform: uppercase; letter-spacing: .08em; color: var(--fr-muted); margin: 20px 4px 10px; }

/* loyalty card (dark) */
.fro-loyal { background: linear-gradient(135deg, #15171c, #20242c); color: #fff; border: none; text-align: center; }
.fro-loyal-big { font-family: var(--headerFonts); font-weight: 600; font-size: 30px; text-transform: uppercase; line-height: 1; }
.fro-loyal-big span { color: var(--fr-red); }
.fro-loyal p { font-size: 13.5px; color: #b9bec7; margin: 8px 0 14px; }
.fro-loyal-note { margin-top: 10px; font-size: 12px; color: #b9bec7; }
.fro-stamps { display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; }
.fro-stamp { width: 26px; height: 26px; border-radius: 50%; border: 2px solid rgba(255,255,255,.25); display: flex; align-items: center; justify-content: center; font-size: 12px; color: #8b909a; }
.fro-stamp.on { background: var(--fr-red); border-color: var(--fr-red); color: #fff; }
.fro-stamp.free { background: var(--fr-amber); border-color: var(--fr-amber); color: #fff; }

/* membership + wallet rows */
.fro-row { display: flex; align-items: center; gap: 12px; }
.fro-row > i { font-style: normal; font-size: 24px; flex-shrink: 0; }
.fro-row-t b { font-size: 15px; display: block; color: var(--fr-ink); }
.fro-row-t small { font-size: 12px; color: var(--fr-muted); }
.fro-soon { margin-left: auto; font-size: 10.5px; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: var(--fr-line); color: var(--fr-muted); white-space: nowrap; align-self: center; }

/* sign-up CTA */
.fro-cta { background: var(--fr-red); color: #fff; text-align: center; padding: 22px; border-radius: var(--fr-radius); margin-top: 6px; }
.fro-cta b { font-family: var(--headerFonts); font-weight: 600; font-size: 26px; text-transform: uppercase; display: block; }
.fro-cta p { font-size: 13px; opacity: .92; margin: 4px 0 12px; }
.fro-cta button { background: #fff; color: var(--fr-red); border: none; border-radius: 12px; padding: 12px 26px; font-weight: 700; font-size: 14px; cursor: pointer; }
.fro-cta button:active { background: #f2f3f5; }
.fro-signup-hint { font-size: 12px; color: var(--fr-muted); text-align: center; margin-top: 8px; }
.fro-signup-hint a { color: var(--fr-red); font-weight: 700; text-decoration: none; cursor: pointer; }

/* ── Homepage "Offers & Rewards" section (ho-*) — themed dark band that echoes
   the .fc-card featured-court look (20px radius, heavy dark shadow, dark tile).
   Pinned loyalty card (amber) + horizontal coupon scroller (red). ──────────── */
.ho-offers { background: #0e0f12; }
.ho-offers .section-title h2 { color: #fff; }               /* dark-section title */
.ho-offers-row { display: flex; gap: 14px; align-items: stretch; }

/* Pinned loyalty card — amber accent distinguishes it from red coupons */
.ho-loyal-card {
  flex-shrink: 0; width: 330px; position: relative;
  border-radius: 20px; overflow: hidden; padding: 24px 22px;
  background: #0a0d11; color: #f4f6f8;
  border: 1px solid rgba(240,147,15,.30);
  box-shadow: 0 20px 50px -24px rgba(0,0,0,.9);
}
.ho-loyal-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--fr-amber); }
.ho-loyal-star { color: var(--fr-amber); font-size: 26px; }
.ho-loyal-title { font-family: var(--headerFonts); font-weight: 600; font-size: 27px; line-height: 1.05; margin-top: 8px; text-transform: uppercase; }
.ho-loyal-title span { color: var(--fr-amber); }
.ho-loyal-sub { font-size: 13px; color: #c3c9d2; margin-top: 8px; line-height: 1.5; }
.ho-stamps { display: flex; gap: 5px; flex-wrap: wrap; margin: 16px 0 4px; }
.ho-stamp { width: 22px; height: 22px; border-radius: 50%; border: 2px solid rgba(255,255,255,.2); display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; color: #8b909a; }
.ho-stamp.on { background: var(--fr-red); border-color: var(--fr-red); color: #fff; }
.ho-stamp.free { background: var(--fr-amber); border-color: var(--fr-amber); color: #fff; }
.ho-loyal-link { display: inline-block; margin-top: 12px; font-size: 13px; font-weight: 700; color: var(--fr-amber); text-decoration: none; }

/* Coupon scroller — one horizontal scroll (loyalty stays pinned, no double-carousel) */
.ho-cpn-scroll { display: flex; gap: 14px; overflow-x: auto; flex: 1; min-width: 0; padding-bottom: 6px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.ho-cpn-scroll::-webkit-scrollbar { display: none; }
.ho-cpn-card {
  flex-shrink: 0; width: 236px; display: flex; flex-direction: column;
  border-radius: 20px; overflow: hidden; padding: 20px; text-decoration: none;
  background: #0a0d11; color: #f4f6f8;
  border: 1px solid rgba(255,255,255,.06);
  box-shadow: 0 20px 50px -24px rgba(0,0,0,.9);
}
.ho-cpn-code { align-self: flex-start; font-family: var(--headerFonts); font-weight: 600; font-size: 22px; letter-spacing: .04em; background: rgba(225,29,42,.14); border: 1.5px dashed rgba(225,29,42,.5); color: #ff5964; border-radius: 10px; padding: 5px 14px 2px; white-space: nowrap; }
.ho-cpn-desc { font-size: 16px; font-weight: 800; margin-top: 14px; color: #f4f6f8; line-height: 1.25; flex: 1; }
.ho-cpn-meta { font-size: 12px; color: #c3c9d2; margin-top: 4px; }
.ho-cpn-cta { display: block; text-align: center; background: #e11d2a; color: #fff; font-size: 14px; font-weight: 800; padding: 11px; border-radius: 12px; margin-top: 14px; }

@media (max-width: 767px) {
  .ho-offers-row { flex-direction: column; }
  .ho-loyal-card { width: 100%; }
}

/* ── Coupon "Copy" buttons (per-surface) + copied state ─────────────────────── */
.cpx-cpn-codewrap { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; flex-shrink: 0; }
.cpx-copy { border: none; background: transparent; color: var(--fr-muted); font-size: 11px; font-weight: 700; cursor: pointer; padding: 2px 5px; border-radius: 6px; display: inline-flex; align-items: center; gap: 3px; line-height: 1.4; }
.cpx-copy:hover { color: var(--fr-red); background: var(--fr-red-soft); }
.cpx-copy.cpx-copied { color: var(--fr-green); background: var(--fr-green-soft); }

/* /offers marketing card (light) */
.off-cpn-codewrap { display: flex; align-items: center; gap: 8px; }
.off-copy { border: none; background: #f3f4f6; color: #6b7280; font-size: 11px; font-weight: 700; cursor: pointer; padding: 5px 10px; border-radius: 8px; display: inline-flex; align-items: center; gap: 4px; }
.off-copy:hover { background: #e8192c; color: #fff; }
.off-copy.cpx-copied { background: #eafaf0; color: #1b9e4b; }

/* homepage dark card (icon) */
.ho-cpn-codewrap { display: flex; align-items: center; gap: 8px; }
.ho-copy { border: none; background: rgba(255,255,255,.1); color: #c3c9d2; cursor: pointer; padding: 6px 9px; border-radius: 8px; font-size: 12px; display: inline-flex; align-items: center; gap: 4px; }
.ho-copy:hover { background: #e11d2a; color: #fff; }
.ho-copy.cpx-copied { background: var(--fr-green); color: #fff; }

/* booking checkout chip (small icon) */
.fro-chip-copy { border: none; background: transparent; color: var(--fr-muted2); cursor: pointer; padding: 2px 5px; font-size: 13px; border-radius: 6px; display: inline-flex; align-items: center; gap: 3px; }
.fro-chip-copy:hover { color: var(--fr-red); }
.fro-chip-copy.cpx-copied { color: var(--fr-green); }

/* ── Customer profile — desktop 2-column layout (mobile stays single column) ─── */
@media (min-width: 992px) {
  .cpx-shell { max-width: 940px; }
  .cpx-2col { display: flex; gap: 16px; align-items: flex-start; }
  .cpx-2col > .cpx-col { flex: 1 1 0; min-width: 0; }
  /* Bookings: compact next-booking rail on the left, the full list on the right */
  .cpx-2col--book > .cpx-col--book-side { flex: 0 0 310px; }
  .cpx-2col--book > .cpx-col--book-list { flex: 1 1 0; }
  /* Wallet + Account are short — keep them centered and capped, not stretched */
  .cpx-pane-narrow { max-width: 560px; margin: 0 auto; }
}


/* ---- Referral / Invite card (App Sharing P1) ---- */
.cpx-invite .cpx-invite-sub{
  font-size:13px;color:#6b7280;margin:2px 0 12px;line-height:1.4;
}
.cpx-invite-code{
  display:flex;align-items:center;justify-content:space-between;
  background:#f9fafb;border:1px dashed #d1d5db;border-radius:10px;
  padding:10px 14px;margin-bottom:12px;
}
.cpx-invite-code span{
  font-size:12px;color:#6b7280;text-transform:uppercase;letter-spacing:.04em;
}
.cpx-invite-code b{
  font-size:20px;font-weight:800;letter-spacing:.12em;color:#111827;
}
.cpx-invite-actions{display:flex;gap:8px;flex-wrap:wrap;}
.cpx-invite-share{
  flex:1 1 auto;text-align:center;border:none;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
}
.cpx-invite-copy{
  flex:0 0 auto;background:#fff;border:1px solid #e5e7eb;border-radius:10px;
  padding:0 14px;min-height:40px;font-size:13px;font-weight:600;color:#374151;
  cursor:pointer;display:inline-flex;align-items:center;gap:6px;
}
.cpx-invite-copy:hover{background:#f9fafb;}

/* ===== Coupon code-chips redesign (booking summary) — scoped to #booking-checkout ===== */
#booking-checkout .cco-chips-wrap{width:100%}
#booking-checkout .cco-chips{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
#booking-checkout .cco-chips::-webkit-scrollbar{display:none}
#booking-checkout .cco-chip{flex:0 0 auto;font-family:'Teko',sans-serif;font-weight:600;font-size:18px;letter-spacing:.04em;line-height:1.15;background:#fdecec;border:1.5px dashed #f3b6ba;color:#c0101f;border-radius:10px;padding:5px 15px 2px;cursor:pointer;white-space:nowrap;transition:opacity .12s}
#booking-checkout .cco-chip.gold{background:#2a2008;border-color:#5a4410;color:#f0930f}
#booking-checkout .cco-chip.on{background:#ec2b34;border-style:solid;border-color:#ec2b34;color:#fff}
#booking-checkout .cco-chip.gold.on{background:#f0930f;border-color:#f0930f;color:#111}
#booking-checkout .cco-input{background:#fff;border:none;border-radius:10px;padding:11px 14px;font-family:'Roboto',sans-serif;font-size:14px;font-weight:600;color:#111;letter-spacing:.02em;text-transform:uppercase}
#booking-checkout .cco-input::placeholder{color:#9aa0ab;font-weight:400;letter-spacing:0}
#booking-checkout .cco-input.cco-applied{display:flex;align-items:center;justify-content:space-between;gap:8px;text-transform:none;background:#0f2e1c;color:#22c55e;border:1px solid #1f6b3f}
#booking-checkout .cco-applied .cco-applied-code{font-family:'Teko',sans-serif;font-weight:600;font-size:17px;letter-spacing:.04em}
#booking-checkout .cco-applied .cco-applied-amt{font-weight:700;white-space:nowrap}
#booking-checkout .cco-apply-btn{background:#fff;color:#ec2b34;border:1.5px solid #ec2b34;border-radius:10px;padding:0 18px;font-weight:700;font-size:14px;cursor:pointer;white-space:nowrap}
#booking-checkout .cco-remove-btn{background:#ec2b34;color:#fff;border:none;border-radius:10px;padding:0 16px;font-weight:700;font-size:14px;cursor:pointer;white-space:nowrap}

/* -- CLS: reserve the evo-calendar box on /booking so it does not jump on render --
   #calendar renders empty (0px) then evo-calendar mounts ~403px (5-row month) on
   load -> pushes content down = the 0.22-0.24 mobile CLS. Floor it at 340px: safely
   UNDER even a rare 4-row month (~343px) so it never over-reserves (no blank gap),
   while cutting ~85% of the shift. Slots render only after a date is picked
   (user-initiated -> excluded from CLS), so only the calendar needs reserving. */
#calendar { min-height: 340px; }

/* ── Google Reviews (Reviews feature) ──────────────────────────────── */
.gr-strip { background:#12151c; color:#e8eaed; padding:56px 0; }
.gr-strip .gr-head { text-align:center; margin-bottom:32px; }
.gr-agg { display:inline-flex; align-items:center; gap:16px; flex-wrap:wrap; justify-content:center; }
.gr-agg__num { font-size:52px; font-weight:800; line-height:1; }
.gr-agg__meta { text-align:left; }
.gr-stars { color:#fbbc04; font-size:18px; letter-spacing:2px; }
.gr-stars .off { color:#4a4f5a; }
.gr-agg__count { font-size:13px; color:#9aa0aa; margin-top:3px; }
.gr-agg__count b { color:#e8eaed; }
.gr-google { display:inline-flex; align-items:center; gap:6px; font-size:12px; color:#9aa0aa; margin-top:6px; }
.gr-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:4px; }
.gr-card { background:#1b1f28; border:1px solid #262b36; border-radius:14px; padding:18px; }
.gr-card__top { display:flex; align-items:center; gap:12px; margin-bottom:10px; }
.gr-avatar { width:40px; height:40px; border-radius:50%; background:#dc3545; color:#fff; font-weight:700; display:flex; align-items:center; justify-content:center; font-size:15px; flex-shrink:0; text-transform:uppercase; }
.gr-card__who { line-height:1.25; min-width:0; }
.gr-card__name { font-weight:700; font-size:14px; }
.gr-card__venue { font-size:11px; color:#9aa0aa; }
.gr-card .gr-stars { font-size:14px; }
.gr-card__text { font-size:13px; color:#c7ccd4; line-height:1.5; margin-top:8px; display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; }
.gr-card__time { font-size:11px; color:#767c86; margin-top:10px; }
.gr-disclosure { text-align:center; font-size:12px; color:#767c86; margin-top:26px; }
.gr-readall { color:#8ab4f8; font-weight:600; }
@media (max-width:767px){ .gr-cards{ grid-template-columns:1fr; } .gr-agg__num{ font-size:42px; } .gr-strip{ padding:40px 0; } }

/* Venue-page reviews block — light, matches site sections */
.gr-venue { margin-top:30px; }
.gr-venue h4 { font-weight:700; }
.gr-venue__summary { display:flex; align-items:center; gap:18px; flex-wrap:wrap; padding:16px 18px; border:1px solid #eceff3; border-radius:14px; background:#fafbfc; }
.gr-venue__num { font-size:40px; font-weight:800; color:#1a1a1a; line-height:1; }
.gr-venue__meta .gr-stars { color:#fbbc04; }
.gr-venue__meta .gr-stars .off { color:#dadce0; }
.gr-venue__count { font-size:13px; color:#666; margin-top:2px; }
.gr-venue__list { margin-top:16px; display:grid; gap:12px; }
.gr-rev { border:1px solid #eceff3; border-radius:12px; padding:14px 16px; }
.gr-rev__top { display:flex; align-items:center; gap:12px; margin-bottom:8px; }
.gr-rev__name { font-weight:700; font-size:14px; }
.gr-rev__time { font-size:11px; color:#8a8f97; }
.gr-rev .gr-stars { color:#fbbc04; font-size:13px; }
.gr-rev .gr-stars .off { color:#dadce0; }
.gr-rev__text { font-size:13.5px; color:#333; line-height:1.55; }
.gr-btn { display:inline-block; margin-top:16px; padding:9px 18px; border:1px solid #dadce0; border-radius:8px; font-weight:600; font-size:13px; color:#1a73e8; text-decoration:none; }

/* ── Google rating badge — frosted pill, TOP-LEFT (below the number) ───── */
.fc-card, .blog-item { position:relative; }
.gr-overlay { position:absolute; z-index:4; display:flex; flex-direction:column; align-items:flex-start; gap:6px; pointer-events:none; }
.fc-card .gr-overlay { top:14px; left:16px; }   /* home: top-left, where the number badge used to be */
.blog-item .gr-overlay { top:12px; left:12px; } /* /futsal list: top-left corner of the photo */
.gr-badge {
  display:inline-flex; align-items:center; gap:5px;
  background:rgba(12,13,15,.72);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.14); border-radius:999px;
  padding:6px 11px; color:#fff; font-size:.78rem; line-height:1; white-space:nowrap;
  box-shadow:0 2px 8px rgba(0,0,0,.28);
}
.gr-badge__g { width:15px; height:15px; border-radius:50%; background:#fff; color:#4285f4; font-weight:800; font-size:10px; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; }
.gr-badge__star { color:#fbbc04; font-size:.85rem; }
.gr-badge b { font-weight:800; }
.gr-badge__n { color:rgba(255,255,255,.62); font-weight:600; font-size:.72rem; }
/* Inline Offers/Membership chips on the featured card's bottom meta line */
.fc-metarow { display:flex; align-items:center; flex-wrap:wrap; gap:6px; }
.fc-sep { opacity:.45; }
.fc-chip { font-weight:800; }
.fc-chip--offer { color:#ff6b78; }
@media (max-width:400px){ .fc-card .gr-overlay{ top:12px; left:12px; } .blog-item .gr-overlay{ top:10px; left:10px; } .gr-badge{ font-size:.72rem; padding:5px 9px; } }

/* ══════════════════════════════════════════════════════════════════
   HOMEPAGE FAQ — grouped pure-CSS accordion (details/summary, no JS).
   Scoped .hf-* so it never collides with the theme's .accordion/.faq-*.
   Mockup-matched; colours mapped to site tokens (--fr-red/-ink/-line…).
   ══════════════════════════════════════════════════════════════════ */
.hf-head { text-align: center; max-width: 640px; margin: 0 auto 30px; }
.hf-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11.5px; font-weight: 600; letter-spacing: 1.6px;
  text-transform: uppercase; color: var(--fr-muted);
}
.hf-eyebrow::before { content: ""; width: 22px; height: 2px; background: var(--fr-red); border-radius: 2px; }
.hf-title {
  font-family: var(--headerFonts); font-weight: 600; text-transform: uppercase;
  font-size: clamp(32px, 4.4vw, 46px); line-height: 1; letter-spacing: .5px;
  margin: 8px 0 8px; color: var(--fr-ink);
}
.hf-title b { color: var(--fr-red); font-weight: 600; }
.hf-sub { font-size: 14.5px; line-height: 1.6; color: #4a4f55; margin: 0 auto; max-width: 56ch; }
.hf-sub a { color: var(--fr-red); font-weight: 600; text-decoration: none; }
.hf-sub a:hover { text-decoration: underline; }

.hf-groups {
  max-width: 900px; margin: 26px auto 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px 26px;
}
.hf-gtitle {
  grid-column: 1 / -1; margin: 16px 0 2px;
  font-family: var(--headerFonts); font-weight: 600; font-size: 21px;
  letter-spacing: .8px; text-transform: uppercase; color: var(--fr-muted);
  display: flex; align-items: center; gap: 10px;
}
.hf-gtitle::after { content: ""; flex: 1; height: 1px; background: var(--fr-line); }
.hf-gtitle:first-child { margin-top: 0; }

.hf-item {
  align-self: start; background: #fbfbfc; border: 1px solid var(--fr-line);
  border-radius: 12px; overflow: hidden; transition: border-color .2s, box-shadow .2s;
}
.hf-item[open] {
  border-color: rgba(236, 43, 52, .4); background: #fff;
  box-shadow: 0 6px 20px rgba(15, 17, 20, .06);
}
.hf-q {
  list-style: none; cursor: pointer; display: flex; align-items: center;
  justify-content: space-between; gap: 12px; padding: 14px 16px;
  font-size: 14.5px; font-weight: 600; color: var(--fr-ink); line-height: 1.35;
}
.hf-q::-webkit-details-marker { display: none; }
.hf-ic {
  flex: none; width: 22px; height: 22px; border-radius: 50%;
  border: 1.5px solid #d7dadd; color: var(--fr-muted);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 500; line-height: 1; transition: .2s;
}
.hf-item[open] .hf-ic { background: var(--fr-red); border-color: var(--fr-red); color: #fff; transform: rotate(45deg); }
.hf-a { padding: 0 16px 15px; font-size: 13.5px; line-height: 1.65; color: #4a4f55; }
.hf-a a { color: var(--fr-red); font-weight: 600; text-decoration: none; }
.hf-a a:hover { text-decoration: underline; }

@media (max-width: 700px) { .hf-groups { grid-template-columns: 1fr; } }

/* Google rating badge on /padel venue cards — reuse the shared .gr-overlay pill.
   .padel-venue-img needs a positioning context + a top-left anchor (it has none). */
.padel-venue-img { position: relative; }
.padel-venue-img .gr-overlay { top: 12px; left: 12px; }

/* Compact inline Google rating "★ 4.5 (181)" on the booking venue-picker meta
   line — sized to inherit the line (13px): gold star, bold rating, muted count. */
.gr-inline { display: inline-flex; align-items: baseline; gap: 3px; font-weight: 600; }
.gr-inline__star { color: #fbbc04; }
.gr-inline b { font-weight: 800; }
.gr-inline__n { color: #8b93a0; font-weight: 500; }

/* The 76px thumb leaves ~173px for the meta at 375px — not enough for courts +
   rating + price on one line (even without the count). So on mobile: drop the
   muted count, and let the meta wrap between whole segments (dots → column-gap)
   so nothing ever clips. Scoped to .has-rating: the no-rating picker is untouched. */
@media (max-width: 480px) {
  .gr-inline__n { display: none; }
  .loc-card-meta.has-rating { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 9px; row-gap: 1px; white-space: normal; }
  .loc-card-meta.has-rating .loc-card-dot { display: none; }
}

/* Manager profile — the staff-performance header ".sps-h" is white (built for a
   dark panel) but the manager area sits on a light (#f3f4f6) background →
   white-on-white. Scope a dark colour to the manager area ONLY; base .sps-h stays
   white for the CS/admin surfaces that render it on a dark backdrop. (JOB 2) */
.manager-profile-area .sps-h { color: #14161c; }

/* Manager "Manage" section (Part 1): its own block; the sheet action buttons stack
   full-width on mobile instead of crowding one row. */
.mp-manage { margin-top: 10px; }
.mp-manage__btns { display: flex; gap: 8px; flex-wrap: wrap; }
.mp-manage__btns .btn { flex: 1 1 auto; }
@media (max-width: 575px) { .mp-manage__btns .btn { flex: 1 1 100%; } }

/* Manager expense = the ADMIN look. The admin renders the owner/expense_* partials
   inside .owner-futsal-card AND under the admin-sporty scope (#fr-sporty-profile),
   which give the dark "Expense Details" header card + amber tag + italic titles. The
   manager profile has the card wrapper (added in the partial for exp_ctx=manager) but
   NOT the sporty scope, so alias those few header rules to .manager-profile-area here.
   The row/pill/amount styling comes free from the base .owner-futsal-card rules. */
.manager-profile-area .owner-futsal-card .owner-expense-panel__head {
  background: var(--fr-dark); position: relative; padding-left: 20px;
}
.manager-profile-area .owner-futsal-card .owner-expense-panel__head::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--fr-amber);
}
.manager-profile-area .owner-futsal-card .owner-expense-panel__title {
  font-style: italic; font-weight: 900; font-size: 0.9rem;
}
.manager-profile-area .owner-futsal-panel-head__title {
  font-style: italic; font-weight: 900; font-size: 0.95rem;
}

/* Manager profile: profile card and Filters each on their own full-width row —
   never side-by-side (the base theme flexed them at <=991px). */
.manager-profile-area .mp-sidebar-row { display: block; }
.manager-profile-area .mp-sidebar-row .mp-card,
.manager-profile-area .mp-sidebar-row .mp-filters { width: 100%; flex: none; }
.manager-profile-area .mp-sidebar-row .mp-filters { margin-top: 12px; }

/* Home loyalty strip: star is the REWARD (11th hour), outside the 10-stamp count.
   Group arrow+star+FREE so they never wrap with the star alone (⑩ → ⭐FREE). */
.ho-stamp-reward { display: inline-flex; align-items: center; gap: 4px; flex: 0 0 auto; }
.ho-stamp-arrow { color: #8b909a; font-weight: 800; font-size: 13px; line-height: 1; }
.ho-stamp-free-lbl { font-size: 9px; font-weight: 800; letter-spacing: .03em; color: var(--fr-amber); line-height: 1; }