/*
 * SPORTONOM visual refresh
 * Loaded after the phase styles so shared pages and role workspaces stay
 * consistent without changing their PHP contracts.
 */
:root {
  --sport-blue: #1378e8;
  --sport-blue-deep: #0e5fbb;
  --sport-mint: #b5f36d;
  --sport-ink: #0b1a2a;
  --sport-slate: #607589;
  --sport-line: #e2eaf0;
  --sport-surface: #fff;
  --sport-canvas: #f3f7fa;
  --sport-ease: cubic-bezier(.2,.75,.25,1);
}

html { scroll-padding-top: 6rem; }
body { background: var(--sport-ink); }
::selection { color: var(--sport-ink); background: var(--sport-mint); }

/* Global navigation */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1030;
  background: rgba(7, 17, 31, .94);
  border-bottom: 1px solid rgba(255,255,255,.085);
  box-shadow: 0 8px 30px rgba(0,0,0,.1);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}
.site-header .navbar { min-height: 74px; padding-block: .6rem; }
.site-header .navbar-brand { margin-right: 1.5rem; }
.brand-logo { filter: drop-shadow(0 3px 9px rgba(22,133,255,.23)); }
.brand-wordmark { font-size: .88rem; letter-spacing: .16em; }
.site-header .nav-link {
  position: relative;
  min-height: 42px;
  padding-inline: .9rem !important;
  border-radius: 10px;
  color: #a9bac8;
  font-weight: 600;
}
.site-header .nav-link:hover,
.site-header .nav-link.active { color: #fff; background: rgba(255,255,255,.07); }
.site-header .nav-link.active::after {
  position: absolute;
  right: .9rem;
  bottom: .28rem;
  left: .9rem;
  height: 2px;
  border-radius: 99px;
  background: var(--sport-mint);
  content: "";
}
.site-header .navbar-toggler {
  border: 1px solid rgba(255,255,255,.17);
  background: rgba(255,255,255,.06);
}
.site-header .navbar-toggler:focus { box-shadow: 0 0 0 3px rgba(73,163,255,.25); }
.nav-actions { gap: .5rem !important; }
.nav-actions > * { flex: 0 0 auto; }
.nav-actions .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  min-height: 42px;
  padding: .55rem .8rem;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 12px;
  font-size: .77rem;
  font-weight: 700;
}
.nav-actions .btn:hover { border-color: rgba(255,255,255,.24); }
.nav-actions .btn i { font-size: .95rem; }
.nav-actions .install-app-button { color: #cfdeea; }
.nav-actions .push-enable-button {
  color: #d8f6bd;
  background: rgba(181,243,109,.1);
  border-color: rgba(181,243,109,.22);
}
.nav-actions .push-enable-button:hover,
.nav-actions .push-enable-button.push-enabled {
  color: #10230c;
  background: var(--sport-mint);
  border-color: var(--sport-mint);
}
.nav-actions .notification-bell-button {
  width: 42px;
  min-width: 42px;
  height: 42px;
  padding: 0;
  color: #e5eef5;
  background: rgba(255,255,255,.07);
  border-radius: 12px;
}
.notification-bell-button > i { font-size: 1rem; }
.notification-bell-count {
  top: -5px;
  right: -5px;
  min-width: 18px;
  height: 18px;
  padding-inline: 4px;
  border: 2px solid #07111f;
  background: #ff5c70;
  font-size: .59rem;
}
.nav-actions .user-pill {
  min-height: 42px;
  gap: .5rem;
  padding: .25rem .65rem .25rem .3rem;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 13px;
  background: rgba(255,255,255,.055);
  color: #e2edf5;
  font-size: .78rem;
  font-weight: 700;
}
.nav-actions .avatar { width: 30px; height: 30px; }
.nav-actions .logout-button {
  color: #ffc6cb;
  background: rgba(245,91,107,.09);
  border-color: rgba(245,91,107,.19);
}
.nav-actions .logout-button:hover {
  color: #fff;
  background: #a93b4a;
  border-color: #a93b4a;
}
.nav-actions .btn-primary { border-color: transparent; }
.notification-panel {
  display: block;
  width: min(360px, calc(100vw - 24px));
  max-height: min(440px, calc(100dvh - 88px));
  padding: .55rem;
  border: 1px solid #e5edf2;
  border-radius: 17px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px) scale(.985);
  transform-origin: top right;
  transition: opacity 180ms var(--sport-ease), transform 180ms var(--sport-ease), visibility 180ms;
}
.notification-panel.is-open { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
.notification-panel-item { padding: .8rem; }
.notification-panel-item:hover { background: #f2f8fc; }
.notification-panel-item small { font-size: .67rem; }
.notification-panel-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
  padding: .6rem .7rem .75rem;
  border-bottom: 1px solid #edf2f5;
}
.notification-panel-heading strong { color: var(--sport-ink); font-size: .8rem; }
.notification-panel-heading button,
.notification-panel-mark-all {
  padding: .25rem .4rem;
  border: 0;
  background: transparent;
  color: var(--sport-blue);
  font-size: .69rem;
  font-weight: 700;
}
.notification-panel-mark-all { display: block; width: 100%; padding: .7rem; border-top: 1px solid #edf2f5; text-align: center; }
.notification-panel-heading button:hover,
.notification-panel-mark-all:hover { color: var(--sport-blue-deep); }
.notification-panel button { min-height: 40px; cursor: pointer; }
.notification-toasts {
  position: fixed;
  z-index: 1090;
  right: 1rem;
  bottom: 1rem;
  display: grid;
  width: min(360px, calc(100vw - 2rem));
  gap: .55rem;
  pointer-events: none;
}
.notification-toast {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  padding: .85rem .95rem;
  border: 1px solid #dceaf3;
  border-radius: 14px;
  background: #fff;
  color: var(--sport-ink);
  box-shadow: 0 18px 45px rgba(7,24,40,.2);
  animation: toast-enter 230ms var(--sport-ease) both;
  pointer-events: auto;
}
.notification-toast > i {
  display: grid;
  flex: 0 0 34px;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 11px;
  background: #eaf5ff;
  color: var(--sport-blue);
}
.notification-toast strong, .notification-toast span { display: block; }
.notification-toast strong { margin: .05rem 0 .15rem; font-size: .78rem; }
.notification-toast span { color: #657b8b; font-size: .72rem; line-height: 1.45; }
.notification-toast.is-leaving { opacity: 0; transform: translateY(5px); transition: opacity 200ms ease, transform 200ms ease; }

/* Landing page finish */
.hero {
  padding-block: clamp(4.5rem, 8vw, 7rem);
  background:
    radial-gradient(ellipse at 72% 19%, rgba(19,120,232,.2), transparent 34%),
    linear-gradient(145deg, #07111f 0%, #0b1d30 57%, #0c2636 100%);
}
.hero h1 { max-width: 780px; font-size: clamp(3.4rem, 7.7vw, 6.9rem); letter-spacing: -.065em; }
.hero-lede { max-width: 490px; font-size: clamp(1rem, 1.35vw, 1.15rem); line-height: 1.72; }
.search-panel {
  gap: .6rem;
  padding: .65rem;
  border-color: rgba(211,232,248,.2);
  border-radius: 17px;
  background: rgba(241,248,253,.095);
  box-shadow: 0 18px 50px rgba(0,0,0,.18);
}
.search-field { padding: .25rem .45rem; }
.search-field select { min-height: 30px; }
.search-submit { min-height: 50px; border-radius: 13px; }
.hero-trust { gap: .7rem 1.2rem; }
.hero-visual { perspective: 1000px; }
.visual-card-main { box-shadow: 25px 30px 80px rgba(0,0,0,.34); }
.court-art { box-shadow: inset 0 0 40px rgba(2,25,40,.2); }
.floating-stat { border: 1px solid rgba(7,17,31,.06); }
.section-space { padding-block: clamp(4.5rem, 7vw, 6.5rem); }
.section-heading { margin-bottom: 2.2rem; }
.section-heading h2 { letter-spacing: -.055em; }
.sport-tile {
  min-height: 184px;
  border-color: #e8eef2;
  box-shadow: 0 7px 22px rgba(19,45,68,.035);
}
.sport-tile:hover { border-color: #d3e8f8; box-shadow: 0 17px 36px rgba(16,47,71,.12); }
.sport-tile .sport-icon {
  display: block;
  width: 48px;
  height: 48px;
  margin: .85rem 0 .7rem;
  padding: .25rem;
  border-radius: 14px;
  background: #edf7ff;
  object-fit: contain;
  transition: transform 180ms var(--sport-ease);
}
.sport-tile:hover .sport-icon { transform: scale(1.06) rotate(-3deg); }
.sport-tile strong { font-size: 1.08rem; }
.sport-tile small { font-size: .8rem; }
.featured-section { background: linear-gradient(145deg, #081522, #0b1e2d); }
.dark-ground-card { box-shadow: 0 15px 40px rgba(0,0,0,.16); }
.dark-ground-card .ground-image { min-height: 210px; }
.dark-ground-card .ground-body { padding: 1.35rem; }
.location-strip { padding-block: clamp(3.5rem,6vw,4.8rem); background: #eaf2f5; }
.location-pills a { transition: transform 180ms var(--sport-ease), box-shadow 180ms var(--sport-ease), border-color 180ms; }
.location-pills a:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(15,52,79,.08); }
.steps-grid { gap: 1.25rem; }
.step-card { padding: 1.35rem; border: 1px solid rgba(255,255,255,.09); border-radius: 17px; background: rgba(255,255,255,.025); }
.step-card h3 { margin-top: 1.8rem; }
.policy-notice { padding: 1.35rem 0; background: #eef5f7; border-top: 1px solid #dce9ed; border-bottom: 1px solid #dce9ed; }
.policy-notice-card { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 1rem; padding: 1.15rem 1.3rem; border: 1px solid #d9e7eb; border-left: 4px solid #d59b19; border-radius: 16px; background: #fff; box-shadow: 0 10px 28px rgba(15,52,79,.055); }
.policy-notice-icon { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: #fff5dc; color: #ad7600; font-size: 1.35rem; }
.policy-notice-kicker { display: block; color: #a87900; font-size: .66rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.policy-notice-copy h2 { margin: .18rem 0 .28rem; color: var(--sport-ink); font-size: 1.22rem; letter-spacing: -.035em; }
.policy-notice-copy p { margin: 0; color: #657b8b; font-size: .82rem; line-height: 1.55; }
.policy-notice-badge { display: inline-flex; align-items: center; gap: .38rem; padding: .55rem .7rem; border: 1px solid #f0dfb2; border-radius: 999px; background: #fffaf0; color: #8d680e; font-size: .68rem; font-weight: 700; white-space: nowrap; }
.policy-notice-badge i { color: #b78208; }
.cta-band { background: linear-gradient(115deg, #1378e8, #0c4d89 60%, #08775e); }
.site-footer { border-top: 1px solid rgba(255,255,255,.06); }

/* Role workspace polish */
.workspace-shell,
.owner-shell,
.admin-shell { background: var(--sport-canvas); }
.owner-shell, .admin-shell { padding-block: clamp(1.5rem, 3.4vw, 3.2rem) 5rem; }
.workspace-shell { padding-block: clamp(2.6rem,5vw,4.6rem) 6rem; }
.owner-sidebar, .admin-sidebar {
  border: 1px solid rgba(255,255,255,.06);
  background: linear-gradient(165deg, #0a1a2b, #10283c);
  box-shadow: 0 18px 42px rgba(13,34,52,.14);
}
.owner-sidebar nav a, .admin-sidebar nav a {
  min-height: 43px;
  border: 1px solid transparent;
  transition: color 160ms ease, background 160ms ease, border-color 160ms ease, transform 160ms ease;
}
.owner-sidebar nav a:hover, .admin-sidebar nav a:hover { transform: translateX(2px); }
.owner-sidebar nav a.active, .admin-sidebar nav a.active {
  border-color: rgba(73,163,255,.15);
  background: linear-gradient(100deg, rgba(22,133,255,.22), rgba(22,133,255,.08));
}
.owner-sidebar .owner-sidebar-mark, .admin-sidebar .admin-sidebar-mark { background: linear-gradient(135deg, #63b7ff, #b5f36d); }
.workspace-nav-toggle { display: none; }
.owner-main, .admin-main { animation: workspace-enter 420ms var(--sport-ease) both; }
.owner-page-heading, .admin-page-heading { margin-bottom: 1.8rem; }
.owner-page-heading h1, .admin-page-heading h1 { letter-spacing: -.06em; }
.workspace-top { margin-bottom: 2.2rem; }
.workspace-top h1 { letter-spacing: -.06em; }
.metric-card, .owner-metric, .admin-metric, .workspace-card, .owner-card, .admin-card,
.profile-card, .owner-ground-card {
  border-color: #e2eaf0;
  box-shadow: 0 5px 20px rgba(16,45,68,.035);
  transition: transform 180ms var(--sport-ease), box-shadow 180ms var(--sport-ease), border-color 180ms ease;
}
.metric-card:hover, .owner-metric:hover, .admin-metric:hover, .workspace-card:hover, .owner-card:hover, .admin-card:hover {
  transform: translateY(-2px);
  border-color: #d5e3ec;
  box-shadow: 0 13px 30px rgba(16,45,68,.075);
}
.metric-card, .owner-metric, .admin-metric { border-radius: 18px; }
.workspace-card, .owner-card, .admin-card { border-radius: 20px; }
.metric-card strong, .owner-metric strong, .admin-metric strong { letter-spacing: -.05em; }
.metric-accent, .owner-metric-dark, .admin-metric-dark {
  background: linear-gradient(145deg, #0b2438, #103e55);
  box-shadow: 0 12px 25px rgba(8,35,57,.13);
}
.owner-quick-card, .admin-quick-card { background: linear-gradient(145deg, #0b2438, #11536a); }
.customer-dashboard .workspace-top,
.owner-page-heading,
.admin-page-heading { align-items: center; }
.customer-overview { align-items: stretch; }
.profile-card { border: 1px solid rgba(255,255,255,.06); }
.booking-row { min-height: 72px; }
.booking-row-link:hover { color: var(--sport-ink); }
.status-badge { padding: .38rem .68rem; }
.admin-alert { border: 1px solid rgba(197,148,0,.12); }
.admin-quick-links a { transition: transform 160ms ease, box-shadow 160ms ease; }
.admin-quick-links a:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(22,62,89,.08); }
.admin-filter-bar, .owner-filter-bar, .filter-bar { border-radius: 15px; }
.sportonom-table th { white-space: nowrap; }
.table-responsive { border: 1px solid #e7edf1; background: #fff; }
.table-responsive .sportonom-table { margin-bottom: 0; }
.flash-wrap { padding-top: .8rem; }
.alert { border: 1px solid rgba(255,255,255,.09); }

/* Install section: clear title/description hierarchy and separated step cards. */
.install-panel {
  grid-template-columns: minmax(0,1fr);
  gap: 1.4rem;
  align-items: stretch;
}
.install-panel-copy { max-width: 850px; }
.install-panel-copy > p { font-size: 1rem; }
.install-steps { grid-template-columns: repeat(3,minmax(0,1fr)); gap: .8rem; }
.install-steps > .install-step {
  display: grid;
  grid-template-columns: 30px 34px minmax(0,1fr);
  align-items: center;
  gap: .65rem;
  min-width: 0;
  min-height: 96px;
  padding: 1rem;
  border: 1px solid #dcecf5;
  border-radius: 15px;
  background: rgba(255,255,255,.9);
}
.install-step > span { grid-column: 1; grid-row: 1; font-size: .77rem; }
.install-step > i {
  display: grid;
  grid-column: 2;
  grid-row: 1;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: #eaf5ff;
  font-size: 1.05rem;
}
.install-step-copy { grid-column: 3; grid-row: 1; min-width: 0; }
.install-step-copy strong { display: block; color: #07111f; font-size: .98rem; line-height: 1.3; }
.install-step-copy small { display: block; margin: .25rem 0 0; color: #668197; font-size: .8rem; line-height: 1.45; }

/* Reveal new notification items without relying on color alone */
.notification-panel-item.is-unread { background: #eff7ff; }
.notification-panel-item.is-unread strong { color: #0b5798; }
.notification-panel-item.is-unread::after {
  content: "NEW";
  float: right;
  margin-top: .2rem;
  color: #1378e8;
  font-size: .55rem;
  font-weight: 800;
  letter-spacing: .07em;
}

@keyframes workspace-enter {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes toast-enter {
  from { opacity: 0; transform: translateY(9px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes sportonom-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

@media (min-width: 992px) {
  .site-header .navbar-collapse { gap: 1.2rem; }
  .site-header .navbar-nav { margin-inline: auto; }
  .nav-actions { margin-left: auto; }
  .hero-visual { animation: sportonom-float 6s ease-in-out infinite; }
}

@media (max-width: 1199.98px) and (min-width: 992px) {
  .nav-actions { gap: .35rem !important; }
  .nav-actions .btn { padding-inline: .62rem; }
  .nav-actions .user-pill { padding-right: .5rem; }
  .site-header .navbar-brand { margin-right: .6rem; }
}

@media (max-width: 991.98px) {
  body { padding-bottom: calc(4.3rem + env(safe-area-inset-bottom)); }
  .mobile-bottom-nav {
    display: flex !important;
    align-items: center;
    min-height: 62px;
    padding: .5rem .5rem calc(.5rem + env(safe-area-inset-bottom));
    border-top: 1px solid rgba(255,255,255,.09);
    background: rgba(5,15,26,.97);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    box-shadow: 0 -10px 30px rgba(0,0,0,.12);
  }
  .mobile-bottom-nav a { flex: 1; min-height: 44px; justify-content: center; font-weight: 700; }
  .mobile-bottom-nav a:hover { color: var(--sport-mint); }
  .site-header .navbar { min-height: 68px; }
  .site-header .navbar-collapse {
    padding: .75rem 0 1rem;
    border-top: 1px solid rgba(255,255,255,.08);
  }
  .site-header .navbar-nav { padding-top: .35rem; }
  .site-header .nav-link { width: 100%; }
  .site-header .nav-link.active::after { display: none; }
  .nav-actions {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: .5rem !important;
    margin-top: .55rem;
    padding-top: .8rem;
    border-top: 1px solid rgba(255,255,255,.08);
  }
  .nav-actions .user-pill { order: -1; }
  .nav-actions .push-enable-button span { display: inline !important; }
  .notification-panel { z-index: 1080; }
  .install-panel { grid-template-columns: minmax(0,1fr); }
  .install-steps { grid-template-columns: 1fr; }
  .owner-layout, .admin-layout { gap: 1.2rem; }
  .owner-sidebar, .admin-sidebar {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    align-items: center;
    gap: .55rem;
    overflow: visible;
    padding: .7rem;
    border-radius: 18px;
  }
  .owner-sidebar-brand, .admin-sidebar-brand {
    min-width: 0;
    padding: .3rem .25rem;
  }
  .owner-sidebar-brand small, .admin-sidebar-brand small { display: block; }
  .workspace-nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    min-height: 46px;
    padding: .6rem .85rem;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 12px;
    background: rgba(255,255,255,.07);
    color: #e9f2f8;
    font: 700 .88rem "DM Sans", sans-serif;
  }
  .workspace-nav-toggle:hover, .workspace-nav-toggle[aria-expanded="true"] {
    border-color: rgba(181,243,109,.35);
    background: rgba(181,243,109,.12);
    color: #d8f6bd;
  }
  .workspace-nav-toggle i { font-size: 1.15rem; }
  .owner-sidebar .workspace-nav-list, .admin-sidebar .workspace-nav-list {
    display: none !important;
    grid-column: 1 / -1;
    width: 100%;
    max-height: min(58dvh, 420px);
    overflow-y: auto;
    padding: .65rem 0 .2rem;
    border-top: 1px solid rgba(255,255,255,.1);
  }
  .owner-sidebar.is-open .workspace-nav-list, .admin-sidebar.is-open .workspace-nav-list {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: .35rem;
  }
  .owner-sidebar .workspace-nav-list a, .admin-sidebar .workspace-nav-list a {
    min-height: 46px;
    padding: .65rem .7rem;
    white-space: normal;
  }
  .owner-sidebar .workspace-nav-list a span, .admin-sidebar .workspace-nav-list a span {
    display: block;
    line-height: 1.25;
  }
  .owner-sidebar nav a i, .admin-sidebar nav a i { flex: 0 0 19px; }
  .owner-sidebar .owner-sidebar-foot, .admin-sidebar .admin-sidebar-foot {
    display: none;
    grid-column: 1 / -1;
    padding-top: .55rem;
  }
  .owner-sidebar.is-open .owner-sidebar-foot, .admin-sidebar.is-open .admin-sidebar-foot {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: .35rem;
  }
  .owner-sidebar .owner-sidebar-foot a, .admin-sidebar .admin-sidebar-foot a {
    min-height: 42px;
    padding: .6rem .7rem;
  }
  .owner-content-grid, .admin-content-grid { grid-template-columns: minmax(0,1fr); }
}

@media (max-width: 767.98px) {
  .hero { padding-block: 4.4rem 4.8rem; }
  .hero-visual { margin-top: .4rem; }
  .section-heading { gap: .7rem; }
  .section-heading h2 { font-size: clamp(2rem,7vw,3.1rem); }
  .owner-metric-grid, .admin-metric-grid { gap: .65rem; }
  .admin-stat-strip { gap: .4rem; }
  .admin-stat-strip span { line-height: 1.4; }
  .install-steps > .install-step { min-height: 86px; }
  .install-step-copy strong { font-size: 1rem; }
  .install-step-copy small { font-size: .85rem; }
}

@media (max-width: 575.98px) {
  body { padding-bottom: calc(4.3rem + env(safe-area-inset-bottom)); }
  .site-header .container { --bs-gutter-x: 1rem; }
  .brand-wordmark { font-size: .76rem; }
  .site-header .navbar-brand { gap: .45rem !important; }
  .nav-actions { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); width: 100%; }
  .nav-actions > .install-app-wrap { grid-column: 1 / 3; }
  .nav-actions .install-app-button { width: 100%; }
  .nav-actions .user-pill { grid-column: 1 / -1; width: fit-content; max-width: 100%; }
  .nav-actions .user-pill > span:last-child { max-width: min(58vw, 230px); overflow: hidden; text-overflow: ellipsis; }
  .nav-actions > .push-enable-button { grid-column: 1 / 3; }
  .nav-actions .push-enable-button { width: 100%; }
  .nav-actions > .notification-bell-wrap { display: flex; justify-content: center; }
  .nav-actions > form { grid-column: 3 / 5; }
  .nav-actions > form .logout-button { width: 100%; }
  .notification-panel { position: fixed; top: 72px; right: 10px; left: 10px; width: auto; transform-origin: top center; }
  .notification-toasts { right: .6rem; bottom: max(.6rem, env(safe-area-inset-bottom)); left: .6rem; width: auto; }
  .hero { padding-block: 3.5rem 3.8rem; }
  .hero h1 { font-size: clamp(3rem, 14vw, 4.2rem); }
  .hero-visual { min-height: 320px; margin: -.35rem -1rem 0; }
  .visual-card-main { width: min(82vw, 335px); }
  .floating-stat-top { right: 1px; }
  .floating-stat-bottom { left: 0; }
  .sport-tile { min-height: 168px; padding: 1rem; }
  .sport-tile .sport-icon { width: 52px; height: 52px; margin-block: .8rem .65rem; }
  .sport-tile strong { font-size: 1.08rem; }
  .sport-tile small { font-size: .82rem; }
  .nav-actions .btn { min-height: 46px; font-size: .83rem; }
  .btn-sm { min-height: 44px; }
  .owner-sidebar .workspace-nav-list a, .admin-sidebar .workspace-nav-list a { min-height: 50px; font-size: .9rem; }
  .owner-metric span, .admin-metric span, .metric-card span { font-size: .8rem; }
  .owner-metric small, .admin-metric small, .metric-card small { font-size: .75rem; }
  .owner-card, .admin-card, .workspace-card { font-size: .95rem; }
  .owner-booking-info span, .owner-booking-side strong { font-size: .78rem; }
  .notification-row p, .notification-row small { font-size: .78rem; }
  .admin-activity-row strong { font-size: .85rem; }
  .admin-activity-row small { font-size: .76rem; }
  .admin-table, .sportonom-table { font-size: .82rem; }
  .filter-bar select, .filter-bar input, .admin-filter-bar select, .admin-filter-bar input, .owner-filter-bar select { min-height: 48px; font-size: .95rem; }
  .ground-grid { grid-template-columns: 1fr; }
  .owner-shell, .admin-shell { padding-top: 1rem; }
  .owner-sidebar, .admin-sidebar { margin-inline: 0; }
  .owner-page-heading, .admin-page-heading { margin-bottom: 1.3rem; }
  .owner-page-heading h1, .admin-page-heading h1 { font-size: clamp(2.2rem,10vw,3.25rem); }
  .owner-page-heading .btn, .admin-page-heading .btn { width: 100%; }
  .owner-metric-grid, .admin-metric-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .owner-metric, .admin-metric { min-width: 0; padding: .95rem; }
  .owner-metric strong, .admin-metric strong { font-size: 1.5rem; overflow-wrap: anywhere; }
  .owner-metric-green strong, .admin-metric-green strong { font-size: 1.15rem; }
  .owner-metric span, .admin-metric span { min-height: 2.2em; }
  .workspace-shell { padding-top: 2.2rem; }
  .workspace-top { display: block; margin-bottom: 1.55rem; }
  .workspace-top h1 { font-size: clamp(2.3rem,11vw,3.35rem); }
  .workspace-actions { margin-top: 1rem; }
  .workspace-actions .btn { width: 100%; justify-content: center; }
  .dashboard-columns, .customer-overview { gap: .7rem; }
  .booking-row { align-items: center; }
  .booking-row .status-badge { max-width: 125px; white-space: normal; text-align: center; }
  .admin-card-heading, .owner-card-heading { align-items: flex-start; }
  .admin-card-heading h2, .owner-card-heading h2, .card-heading h2 { font-size: 1.35rem; }
  .admin-activity-row { align-items: flex-start; }
  .admin-activity-row time { padding-top: .2rem; }
  .admin-alert { align-items: flex-start; }
  .admin-alert a { flex: 0 0 auto; }
  .admin-quick-links a { min-height: 42px; }
  .admin-stat-strip span { flex: 1 1 calc(50% - .4rem); }
  .owner-booking-row { align-items: flex-start; flex-wrap: wrap; }
  .owner-booking-info { min-width: calc(100% - 65px); }
  .owner-booking-side { margin-left: 50px; text-align: left; }
  .owner-sidebar.is-open .workspace-nav-list, .admin-sidebar.is-open .workspace-nav-list { grid-template-columns: 1fr; }
  .table-responsive { margin-inline: -.25rem; }
  .table-responsive:after { padding: .5rem .7rem; }
  .cta-band .container { display: block; }
  .cta-band .btn { min-height: 46px; }
  .install-panel { padding: 1.3rem; }
  .install-steps > .install-step { grid-template-columns: 30px 34px minmax(0,1fr); min-height: 88px; padding: .9rem; }
  .install-step-copy small { font-size: .86rem; }
}

@media (prefers-reduced-motion: no-preference) {
  .sport-tile, .ground-card, .step-card, .metric-card, .owner-card, .admin-card, .owner-metric, .admin-metric {
    will-change: transform;
  }
  .hero-orb { animation: sportonom-float 8s ease-in-out infinite; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-visual, .hero-orb, .owner-main, .admin-main { animation: none !important; }
  .motion-reveal, .js-ready .motion-reveal { opacity: 1 !important; transform: none !important; }
}

.explore-nearby-tools { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 1.25rem 0 .6rem; }
.explore-nearby-tools .results-toolbar { margin: 0; }
.explore-map-actions { display: flex; flex-wrap: wrap; gap: .45rem; }
.explore-map-status { color: #7890a1; font-size: .75rem; margin: 0 0 .65rem; }
.explore-map { min-height: 345px; border: 1px solid #dce7ed; border-radius: 18px; overflow: hidden; margin-bottom: 1.5rem; box-shadow: 0 14px 30px rgba(7,17,31,.09); }
[data-ground-card][hidden] { display: none !important; }
.map-popup { display: grid; gap: .3rem; min-width: 170px; }
.map-popup-title { color: #12334a; font-weight: 700; text-decoration: none; }
.map-popup-title:hover { color: #1685ff; }
.map-popup-address { color: #7890a1; font-size: .72rem; }
.map-popup-directions { color: #1685ff; font-size: .74rem; font-weight: 700; }
.ground-facilities { margin: 1.25rem 0; }
.ground-facilities h3 { color: #17334b; font-size: .95rem; font-weight: 700; margin: 0 0 .65rem; }
.ground-facility-list { display: flex; flex-wrap: wrap; gap: .5rem; }
.ground-facility-list span { display: inline-flex; align-items: center; gap: .4rem; border: 1px solid #dce9ec; border-radius: 999px; background: #f3f9f7; color: #315b54; font-size: .72rem; font-weight: 700; padding: .48rem .7rem; }
.ground-facility-list i { color: #15956a; }
.owner-facility-checks input:checked + span { border-color: #14946a; color: #147b5d; background: #effaf5; }
.owner-facility-checks i { color: #21b56f; }
.owner-facility-checks input:focus-visible + span { outline: 3px solid rgba(22,133,255,.35); outline-offset: 2px; }
@media (max-width: 575.98px) {
  .explore-nearby-tools { align-items: flex-start; flex-direction: column; }
  .explore-map { min-height: 290px; }
}
@media (max-width: 767.98px) {
  .policy-notice-card { grid-template-columns: auto minmax(0,1fr); }
  .policy-notice-badge { grid-column: 2; justify-self: start; }
}
@media (max-width: 575.98px) {
  .policy-notice-card { grid-template-columns: 1fr; gap: .75rem; padding: 1rem; }
  .policy-notice-icon { width: 40px; height: 40px; }
  .policy-notice-badge { grid-column: auto; }
}

/* Install section: bolder, more substantial card treatment. */
.install-panel {
  border-width: 2px;
  border-color: #c9e2f4;
  box-shadow: 0 26px 60px rgba(7, 17, 31, .12), 0 2px 0 rgba(255, 255, 255, .6) inset;
}
.install-panel-copy .eyebrow-dark { font-weight: 800; }
/* The shared .text-gradient starts near-white, which reads as washed-out/blurry
   on this section's light paper background. Start it from a solid, readable
   blue here instead so the heading stays crisp against the light card. */
.install-panel h2 .text-gradient {
  background: linear-gradient(100deg, #0b63c4 0%, var(--blue-bright) 45%, var(--green) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}
.install-action .install-app-button.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  border-radius: 999px;
  padding: .85rem 1.6rem .85rem 1.05rem;
  font-size: .98rem;
  letter-spacing: -.005em;
  box-shadow: 0 16px 34px rgba(22, 133, 255, .34);
}
.install-action .install-app-button.btn-primary i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .2);
  font-size: .92rem;
}
.install-action .install-app-button.btn-primary:hover {
  box-shadow: 0 20px 40px rgba(22, 133, 255, .4);
}
.install-steps > .install-step {
  border-width: 2px;
  border-color: #cfe6f5;
  box-shadow: 0 10px 24px rgba(7, 17, 31, .06);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.install-steps > .install-step:hover {
  transform: translateY(-3px);
  border-color: #9ecdf0;
  box-shadow: 0 16px 32px rgba(7, 17, 31, .1);
}
.install-step > i {
  width: 36px;
  height: 36px;
  background: linear-gradient(135deg, #eaf5ff, #dcecff);
  box-shadow: 0 4px 10px rgba(22, 133, 255, .18) inset;
}
@media (max-width: 767.98px) {
  .install-panel { border-width: 1.5px; }
}

/* Ground-add/edit form: inline photo upload preview thumbnails. */
.owner-form-photos .text-link { display: inline-flex; align-items: center; gap: .3rem; margin-top: .9rem; font-size: .82rem; }
.owner-form-photo-preview { display: flex; flex-wrap: wrap; gap: .55rem; margin: .9rem 0 .3rem; }
.owner-form-photo-preview img { width: 74px; height: 74px; object-fit: cover; border-radius: 10px; border: 1px solid #dce7ed; }

/* QR check-in: camera starts only after a tap (reliable permission prompt on mobile), with a clear overlay. */
.qr-reader-wrap { position: relative; }
.qr-reader-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .8rem;
  text-align: center;
  padding: 1.6rem;
  color: #cfe0ee;
  background: linear-gradient(150deg, #07111f 0%, #0d2338 100%);
  border-radius: 14px;
}
.qr-reader-overlay > i { font-size: 2rem; color: #49a3ff; }
.qr-reader-overlay > p { max-width: 280px; margin: 0; font-size: .85rem; color: #a9c0d3; }
.qr-reader-overlay .btn { min-width: 180px; }

/*
 * Heading hierarchy
 * Keep the shared page structure, but give every workspace and booking step
 * a clear visual reading order. This is intentionally last-loaded so the
 * admin, owner, player, and public workflow pages use the same treatment.
 */
:root {
  --sport-heading-ink: #0b1a2a;
  --sport-heading-muted: #466276;
  --sport-heading-accent: linear-gradient(100deg, #1378e8, #21bfae 55%, #79c943);
}

.workspace-shell h1,
.workspace-shell h2,
.workspace-shell h3,
.owner-shell h1,
.owner-shell h2,
.owner-shell h3,
.admin-shell h1,
.admin-shell h2,
.admin-shell h3,
.section-light h2,
.section-light h3 {
  color: var(--sport-heading-ink);
  font-weight: 700;
  text-rendering: optimizeLegibility;
  text-wrap: balance;
}

.workspace-top h1,
.owner-page-heading h1,
.admin-page-heading h1 {
  max-width: 850px;
  margin: .75rem 0 .7rem;
  font-size: clamp(2.45rem, 5vw, 4.55rem);
  line-height: 1.04;
  letter-spacing: -.065em;
}

.workspace-top h1::after,
.owner-page-heading h1::after,
.admin-page-heading h1::after {
  display: block;
  width: 3.5rem;
  height: .24rem;
  margin-top: .95rem;
  border-radius: 99px;
  background: var(--sport-heading-accent);
  content: "";
}

.workspace-top p,
.owner-page-heading p,
.admin-page-heading p {
  max-width: 620px;
  color: var(--sport-heading-muted);
  font-size: .98rem;
  line-height: 1.65;
}

.workspace-shell .card-heading h2,
.owner-shell .owner-card-heading h2,
.admin-shell .admin-card-heading h2 {
  margin: .35rem 0 0;
  color: var(--sport-heading-ink);
  font-size: clamp(1.35rem, 2vw, 1.7rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.045em;
}

.workspace-shell .card-heading h2::after,
.owner-shell .owner-card-heading h2::after,
.admin-shell .admin-card-heading h2::after {
  display: block;
  width: 2.25rem;
  height: .18rem;
  margin-top: .55rem;
  border-radius: 99px;
  background: var(--sport-heading-accent);
  content: "";
}

.workspace-shell h3,
.owner-shell h3,
.admin-shell h3,
.section-light h3 {
  line-height: 1.2;
  letter-spacing: -.025em;
}

.workspace-shell .metric-card strong,
.owner-shell .owner-metric strong,
.admin-shell .admin-metric strong {
  font-weight: 700;
}

.owner-quick-card h2,
.admin-quick-card h2,
.owner-quick-card h3,
.admin-quick-card h3 {
  color: #fff;
}

.owner-quick-card h2,
.admin-quick-card h2 {
  line-height: 1.12;
}

.section-light .review-card h2,
.section-light .detail-heading h2,
.section-light .booking-panel-head h2,
.section-light .qr-pass-heading h2,
.section-light .payment-instructions h3 {
  color: var(--sport-heading-ink);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -.045em;
  text-wrap: balance;
}

.section-light .payment-instructions .review-card-head h2,
.section-light .payment-instructions h3 {
  color: #fff;
}

.section-light .review-card-head h2,
.section-light .detail-heading h2,
.section-light .booking-panel-head h2 {
  font-size: clamp(1.65rem, 3vw, 2.2rem);
}

.section-light .empty-state h1,
.section-light .empty-state h2 {
  color: var(--sport-heading-ink);
  font-weight: 700;
  letter-spacing: -.05em;
}

.ground-body h3,
.owner-ground-title h2 {
  color: var(--sport-heading-ink);
  font-weight: 700;
}

@media (max-width: 575.98px) {
  .workspace-top h1,
  .owner-page-heading h1,
  .admin-page-heading h1 {
    font-size: clamp(2.25rem, 11vw, 3.35rem);
  }

  .workspace-top h1::after,
  .owner-page-heading h1::after,
  .admin-page-heading h1::after {
    margin-top: .75rem;
  }
}

/*
 * Ground cards
 * Keep venue identity, location, rating, availability, and the CTA in
 * separate visual blocks instead of letting metadata collapse into one line.
 */
.ground-card {
  display: flex;
  min-height: 100%;
  flex-direction: column;
}

.ground-card .ground-image {
  flex: 0 0 auto;
}

.ground-image-photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.ground-image.has-photo::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(7,17,31,.04) 35%, rgba(7,17,31,.48) 100%);
  content: "";
  pointer-events: none;
}

.ground-image .ground-badge {
  z-index: 1;
}

.ground-card .ground-body {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
}

.ground-card .ground-body > .d-flex {
  align-items: flex-start;
}

.ground-card .ground-body > .d-flex > div:first-child {
  min-width: 0;
  flex: 1 1 auto;
}

.ground-card .ground-body h3 {
  margin: 0 0 .35rem;
  line-height: 1.18;
  overflow-wrap: anywhere;
}

.ground-card .ground-body p {
  display: flex;
  align-items: flex-start;
  gap: .35rem;
  line-height: 1.4;
}

.ground-card .ground-body p i {
  flex: 0 0 auto;
  margin-top: .18rem;
}

.ground-card .rating {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: .25rem;
  white-space: nowrap;
  border: 1px solid #f1df9c;
  border-radius: 999px;
  padding: .28rem .5rem;
  background: #fff9e7;
  color: #6f5712;
  font-size: .74rem;
}

.ground-card .rating i { color: #e6a900; }

.ground-meta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: .55rem;
  margin-top: 1rem;
  padding-top: .85rem;
  border-top: 1px solid #edf1f3;
}

.ground-meta span {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  gap: .4rem;
  color: #607789;
  font-size: .74rem;
  line-height: 1.4;
}

.ground-meta span:first-child {
  overflow-wrap: anywhere;
}

.ground-meta i {
  flex: 0 0 auto;
  margin-top: .12rem;
  color: var(--sport-blue);
}

.ground-card .ground-body > a.btn {
  margin-top: auto !important;
}

.dark-ground-card .ground-sports-line {
  display: flex;
  align-items: flex-start;
  gap: .4rem;
  min-height: 2.8em;
  margin: 1rem 0 0 !important;
  padding-top: .85rem;
  border-top: 1px solid rgba(255,255,255,.1);
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.dark-ground-card .ground-sports-line::before {
  flex: 0 0 auto;
  color: var(--sport-mint);
  content: "●";
  font-size: .55rem;
  line-height: 1.8;
}

.dark-ground-card .rating {
  border-color: rgba(255,205,80,.25);
  background: rgba(255,205,80,.12);
  color: #f8e2a1;
}

/*
 * Featured cards sit on a dark section, so do not inherit the light-card
 * metadata colours. Keep every important field readable against the card.
 */
.dark-ground-card .ground-body {
  color: #f4f8fb;
  background: #102337;
}

.dark-ground-card .ground-body h3 {
  color: #f4f8fb;
}

.dark-ground-card .ground-body p,
.dark-ground-card .ground-sports-line {
  color: #a9bdca !important;
}

.dark-ground-card .ground-body p i {
  color: #55b3ff;
}

.dark-ground-card .ground-sports-line::before {
  color: #8cf04a;
}

.dark-ground-card .ground-body > a.btn {
  min-height: 44px;
}

@media (max-width: 575.98px) {
  .ground-card .ground-body > .d-flex {
    gap: .7rem !important;
  }

  .ground-card .rating {
    padding-inline: .45rem;
  }

  .ground-meta {
    grid-template-columns: 1fr;
    gap: .45rem;
  }
}

/*
 * Availability switcher and slot cards
 * Owner and player views use different markup, but they share the same
 * visual language: context first, then a scannable time/price decision.
 */
.owner-ground-switcher {
  display: flex;
  align-items: center;
  gap: .55rem;
  flex-wrap: wrap;
  margin: -1rem 0 1.15rem;
  padding: .65rem .75rem;
  border: 1px solid #dbe8ef;
  border-radius: 15px;
  background: rgba(255,255,255,.72);
  box-shadow: 0 6px 18px rgba(16,45,68,.035);
}

.owner-ground-switcher > span {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: .2rem .55rem;
  color: #6b8191;
  font-size: .65rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.owner-ground-switcher > span::before {
  width: 6px;
  height: 6px;
  margin-right: .45rem;
  border-radius: 50%;
  background: var(--sport-mint);
  box-shadow: 0 0 0 4px rgba(181,243,109,.2);
  content: "";
}

.owner-ground-switcher a {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  border: 1px solid #dbe7ee;
  border-radius: 10px;
  background: #fff;
  color: #476477;
  padding: .42rem .7rem;
  font-size: .76rem;
  font-weight: 800;
  transition: color 160ms ease, background 160ms ease, border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.owner-ground-switcher a:hover {
  border-color: #9ecdf0;
  color: var(--sport-blue-deep);
  transform: translateY(-1px);
}

.owner-ground-switcher a.active {
  border-color: #80baf0;
  background: linear-gradient(135deg, #eef8ff, #f5fbff);
  color: #116bc5;
  box-shadow: 0 5px 14px rgba(19,120,232,.11);
}

.slots-layout {
  grid-template-columns: minmax(0, 1.15fr) minmax(330px, .85fr);
}

.slots-layout > .owner-card {
  min-width: 0;
}

.slots-layout .owner-card-heading {
  align-items: flex-start;
}

.slots-layout .owner-card-heading h2 {
  font-size: clamp(1.4rem, 2.2vw, 1.85rem);
}

.slot-admin-list {
  display: grid;
  gap: .65rem;
  border-top: 0;
}

.slot-admin-row {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: .7rem;
  min-width: 0;
  padding: .75rem;
  border: 1px solid #e0ebf1;
  border-radius: 15px;
  background: linear-gradient(135deg, #fff, #f8fbfd);
  box-shadow: 0 5px 16px rgba(16,45,68,.04);
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.slot-admin-row:hover {
  border-color: #bfdced;
  box-shadow: 0 10px 24px rgba(16,45,68,.08);
  transform: translateY(-1px);
}

.slot-admin-date {
  display: grid;
  width: 54px;
  min-height: 58px;
  place-items: center;
  align-content: center;
  padding: .35rem .25rem;
  border: 1px solid #cfe8f5;
  border-radius: 13px;
  background: linear-gradient(155deg, #edf9ff, #e9f5fb);
}

.slot-admin-date strong {
  font-size: 1.35rem;
}

.slot-admin-date span {
  margin-top: .12rem;
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .08em;
}

.slot-admin-info {
  overflow: hidden;
}

.slot-admin-info strong {
  color: var(--sport-heading-ink);
  font-size: .92rem;
  font-weight: 800;
  line-height: 1.25;
}

.slot-admin-info span {
  display: inline-flex;
  max-width: 100%;
  align-items: center;
  gap: .3rem;
  margin-top: .35rem;
  border-radius: 8px;
  color: #5d7585;
  font-size: .72rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.slot-admin-info span::before {
  color: var(--sport-blue);
  content: "•";
  font-size: 1rem;
  line-height: .7;
}

.slot-admin-row > .status-badge {
  align-self: center;
  padding-inline: .65rem;
  font-size: .68rem;
}

.slot-admin-actions {
  display: flex;
  align-items: center;
  gap: .25rem;
}

.slot-admin-actions .text-button {
  display: inline-grid;
  width: 34px;
  min-height: 34px;
  place-items: center;
  padding: 0;
  border: 1px solid #dce8ee;
  border-radius: 9px;
  background: #fff;
  color: #4286b9;
  font-size: .82rem;
}

.slot-admin-actions .text-button:hover {
  border-color: #8ec4e8;
  background: #eef8ff;
  color: #146fc5;
}

.slot-admin-actions .text-button.danger:hover {
  border-color: #f0b7be;
  background: #fff0f1;
  color: #b52d39;
}

.slot-list {
  display: grid;
  gap: .65rem;
  border-top: 0;
}

.slot-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: .8rem;
  min-width: 0;
  padding: .85rem;
  border: 1px solid #deebf1;
  border-radius: 15px;
  background: linear-gradient(135deg, #fff, #f8fbfd);
  box-shadow: 0 5px 16px rgba(16,45,68,.04);
}

.slot-row:hover {
  border-color: #b9d9ec;
  box-shadow: 0 10px 24px rgba(16,45,68,.08);
}

.slot-row > div:first-child {
  min-width: 0;
}

.slot-row > div:first-child strong {
  color: var(--sport-heading-ink);
  font-size: .98rem;
  font-weight: 800;
  line-height: 1.25;
}

.slot-row > div:first-child span {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  margin-top: .4rem;
  border: 1px solid #d8edf7;
  border-radius: 999px;
  background: #eff9fe;
  color: #4b748c;
  padding: .28rem .5rem;
  font-size: .7rem;
  font-weight: 700;
}

.slot-row > div:first-child span::before {
  color: var(--sport-blue);
  content: "●";
  font-size: .48rem;
}

.slot-price {
  display: flex;
  align-items: flex-end;
  gap: .45rem;
}

.slot-price strong {
  margin: 0;
  color: var(--sport-heading-ink);
  font-size: .82rem;
  font-weight: 800;
  white-space: nowrap;
}

.slot-price .btn {
  min-width: 68px;
  min-height: 38px;
  padding: .45rem .65rem;
  font-size: .72rem;
}

@media (max-width: 991.98px) {
  .slots-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 650px) {
  .owner-ground-switcher {
    align-items: flex-start;
    flex-direction: column;
  }

  .owner-ground-switcher > span {
    padding-left: .15rem;
  }

  .owner-ground-switcher a {
    width: 100%;
  }

  .slot-admin-row {
    grid-template-columns: 50px minmax(0, 1fr) auto;
    gap: .6rem;
  }

  .slot-admin-date {
    width: 50px;
  }

  .slot-admin-row > .status-badge {
    grid-column: 2;
    justify-self: start;
  }

  .slot-admin-actions {
    grid-column: 3;
    grid-row: 1 / span 2;
    flex-direction: column;
  }
}

/*
 * Final slot-card stability pass
 * Keep the date, schedule details, status, and actions readable when the
 * owner workspace narrows. On small screens the controls get their own row
 * instead of squeezing the sport name into a thin column.
 */
.slot-admin-info {
  min-width: 0;
}

.slot-admin-info strong {
  display: block;
  max-width: 100%;
  overflow-wrap: break-word;
  white-space: normal;
}

.slot-admin-actions {
  min-width: max-content;
}

@media (max-width: 650px) {
  .slot-admin-row {
    grid-template-columns: 52px minmax(0, 1fr);
    grid-template-areas:
      "date info"
      "date status"
      "actions actions";
    align-items: start;
    gap: .55rem .75rem;
    padding: .8rem;
  }

  .slot-admin-date {
    grid-area: date;
    width: 52px;
    min-height: 62px;
  }

  .slot-admin-info {
    grid-area: info;
    padding-top: .1rem;
  }

  .slot-admin-info strong {
    font-size: .95rem;
    line-height: 1.25;
  }

  .slot-admin-info span {
    display: flex;
    width: fit-content;
    max-width: 100%;
    margin-top: .32rem;
    line-height: 1.45;
  }

  .slot-admin-row > .status-badge {
    grid-area: status;
    justify-self: start;
    margin: 0;
  }

  .slot-admin-actions {
    grid-area: actions;
    justify-content: flex-end;
    width: 100%;
    margin-top: .1rem;
    padding-top: .6rem;
    border-top: 1px solid #e9f0f4;
  }

  .slot-admin-actions .text-button {
    width: 40px;
    min-height: 40px;
    border-radius: 11px;
  }
}

@media (max-width: 360px) {
  .slot-admin-row {
    grid-template-columns: 48px minmax(0, 1fr);
    padding: .7rem;
  }

  .slot-admin-date {
    width: 48px;
  }

  .slot-admin-actions {
    justify-content: space-between;
  }

  .slot-admin-actions .text-button {
    flex: 1 1 0;
  }
}

.slot-single-card .owner-card-heading {
  min-height: 3.2rem;
}

.slot-single-card .owner-form label {
  margin-top: .65rem;
}

@media (max-width: 480px) {
  .slot-row {
    grid-template-columns: 1fr;
    gap: .7rem;
  }

  .slot-price {
    align-items: center;
    justify-content: space-between;
  }
}

/*
 * Mobile comfort layer
 * The desktop scale is intentionally compact, but that makes dense
 * workspaces difficult to scan on a phone. These final overrides enlarge
 * type and touch targets across the marketplace and every role workspace
 * while keeping the existing desktop composition unchanged.
 */
@media (max-width: 767.98px) {
  body {
    font-size: 1rem;
    line-height: 1.6;
  }

  .container {
    --bs-gutter-x: 1.25rem;
  }

  .eyebrow {
    font-size: .78rem;
    letter-spacing: .12em;
  }

  .page-hero {
    padding: 4rem 0 3.6rem;
  }

  .page-hero h1,
  .owner-page-heading h1,
  .admin-page-heading h1,
  .workspace-top h1 {
    font-size: clamp(2.9rem, 11vw, 4.35rem);
    line-height: 1;
  }

  .page-hero p,
  .owner-page-heading p,
  .admin-page-heading p,
  .workspace-top p,
  .hero-lede {
    font-size: 1rem;
    line-height: 1.65;
  }

  .section-heading h2 {
    font-size: clamp(2.15rem, 8vw, 3.1rem);
  }

  .section-note,
  .homepage-empty p,
  .location-pills span {
    font-size: .95rem;
    line-height: 1.55;
  }

  .btn {
    min-height: 50px;
    padding: .8rem 1.05rem;
    font-size: .96rem;
    line-height: 1.25;
  }

  .btn-sm {
    min-height: 46px;
    padding: .7rem .85rem;
    font-size: .9rem;
  }

  .filter-bar input,
  .filter-bar select,
  .admin-filter-bar input,
  .admin-filter-bar select,
  .owner-filter-bar select,
  .date-picker input {
    min-height: 52px;
    font-size: 1rem;
  }

  .ground-card .ground-body {
    padding: 1.3rem;
  }

  .ground-card .ground-body h3 {
    font-size: 1.32rem;
  }

  .ground-card .ground-body p,
  .ground-meta span {
    font-size: .9rem;
  }

  .ground-card .rating {
    font-size: .85rem;
  }

  .ground-meta {
    margin-top: 1.1rem;
    padding-top: .95rem;
  }

  .ground-sports-line {
    font-size: .85rem !important;
  }

  .workspace-shell,
  .owner-shell,
  .admin-shell {
    padding-top: 3rem;
    padding-bottom: 8rem;
  }

  .workspace-card,
  .owner-card,
  .admin-card {
    padding: 1.25rem;
    font-size: 1rem;
  }

  .card-heading h2,
  .owner-card-heading h2,
  .admin-card-heading h2 {
    font-size: 1.65rem;
    line-height: 1.12;
  }

  .metric-card,
  .owner-metric,
  .admin-metric {
    padding: 1.2rem;
  }

  .metric-card span,
  .owner-metric span,
  .admin-metric span {
    min-height: 0;
    font-size: .9rem;
    line-height: 1.35;
  }

  .metric-card strong,
  .owner-metric strong,
  .admin-metric strong {
    font-size: 2rem;
  }

  .metric-card small,
  .owner-metric small,
  .admin-metric small {
    font-size: .82rem;
    line-height: 1.45;
  }

  .owner-metric-green strong,
  .admin-metric-green strong {
    font-size: 1.55rem;
  }

  .booking-row,
  .owner-booking-row {
    gap: .85rem;
    padding: 1.05rem 0;
  }

  .booking-info strong,
  .owner-booking-info strong {
    font-size: 1rem;
  }

  .booking-info span,
  .owner-booking-info span,
  .owner-booking-side strong {
    font-size: .86rem;
    line-height: 1.45;
  }

  .status-badge {
    padding: .48rem .7rem;
    font-size: .78rem;
    line-height: 1.3;
  }

  .owner-status-panel {
    align-items: flex-start;
    padding: 1.2rem;
  }

  .owner-status-panel h2 {
    font-size: 1.45rem;
  }

  .owner-status-panel p,
  .owner-quick-card p {
    font-size: .95rem;
  }

  .owner-ground-title h2 {
    font-size: 1.45rem;
  }

  .owner-ground-title p,
  .owner-ground-address {
    font-size: .88rem;
    line-height: 1.5;
  }

  .owner-ground-stats {
    gap: .8rem;
  }

  .owner-ground-stats span {
    font-size: .78rem;
  }

  .owner-ground-stats strong {
    font-size: 1.05rem;
  }

  .owner-ground-actions .btn {
    font-size: .86rem;
  }

  .owner-form label,
  .admin-form label,
  .auth-form label,
  .owner-upload-form label {
    font-size: .9rem;
  }

  .owner-form input:not([type="checkbox"]),
  .owner-form select,
  .owner-form textarea,
  .owner-upload-form input[type="file"],
  .admin-form input:not([type="checkbox"]),
  .admin-form select,
  .admin-form textarea,
  .auth-form input:not([type="checkbox"]),
  .auth-form select {
    min-height: 52px;
    padding: .82rem .9rem;
    font-size: 1rem;
  }

  .owner-form textarea,
  .admin-form textarea {
    min-height: 140px;
  }

  .owner-sport-checks label span {
    min-height: 50px;
    padding: .7rem .75rem;
    font-size: .9rem;
    line-height: 1.35;
  }

  .form-help,
  .owner-form-note,
  [data-map-address] {
    font-size: .86rem;
    line-height: 1.55;
  }

  .owner-form-actions,
  .admin-form-actions {
    gap: .7rem;
  }

  .owner-form-actions .btn,
  .admin-form-actions .btn {
    min-height: 50px;
  }

  .admin-activity-row {
    gap: .9rem;
    padding: .95rem 0;
  }

  .admin-activity-row strong {
    font-size: .95rem;
  }

  .admin-activity-row small,
  .admin-activity-row time {
    font-size: .82rem;
  }

  .admin-alert {
    padding: .85rem .9rem;
    font-size: .9rem;
    line-height: 1.45;
  }

  .admin-quick-card h2 {
    font-size: 2rem;
  }

  .admin-quick-card p {
    font-size: .95rem;
  }

  .admin-quick-links a {
    min-height: 50px;
    padding: .75rem;
    font-size: .88rem;
    line-height: 1.35;
  }

  .admin-kv {
    padding: .95rem;
  }

  .admin-kv span,
  .admin-timeline-row small {
    font-size: .8rem;
  }

  .admin-kv strong,
  .admin-timeline-row strong {
    font-size: .95rem;
  }

  .table-responsive .sportonom-table {
    font-size: .92rem;
  }

  .sportonom-table th {
    font-size: .78rem;
  }

  .sportonom-table td small,
  .admin-table td small,
  .owner-bookings-table td small {
    font-size: .8rem;
    line-height: 1.45;
  }

  .text-button {
    min-height: 40px;
    padding: .45rem .35rem;
    font-size: .86rem;
  }

  .detail-copy > p,
  .booking-panel-head p,
  .review-card-head p,
  .payment-form label,
  .field-help,
  .secure-note {
    font-size: .92rem;
    line-height: 1.55;
  }

  .detail-heading h2,
  .booking-panel-head h2,
  .review-card-head h2 {
    font-size: 1.85rem;
  }

  .sport-chip,
  .address-card span,
  .slot-row > div:first-child span,
  .slot-price strong {
    font-size: .82rem;
  }

  .address-card {
    align-items: flex-start;
    flex-wrap: wrap;
    padding: 1.1rem 0;
  }

  .address-card .text-link {
    width: 100%;
    margin-left: 2.1rem;
    font-size: .9rem;
  }

  .slot-row > div:first-child strong {
    font-size: .98rem;
  }

  .slot-price .btn {
    min-height: 44px;
    font-size: .84rem;
  }

  .notification-row strong,
  .notification-panel-item strong {
    font-size: .92rem;
  }

  .notification-row p,
  .notification-row small,
  .notification-panel-item span,
  .notification-panel-item small {
    font-size: .84rem;
    line-height: 1.5;
  }

  .mobile-bottom-nav {
    min-height: 68px;
  }

  .mobile-bottom-nav a {
    min-height: 50px;
    gap: .25rem;
    font-size: .74rem;
  }

  .mobile-bottom-nav i {
    font-size: 1.3rem;
  }
}

@media (max-width: 575.98px) {
  .container {
    --bs-gutter-x: 1.1rem;
  }

  .site-header .nav-link {
    min-height: 48px;
    font-size: .98rem;
  }

  .nav-actions .btn {
    min-height: 48px;
    font-size: .9rem;
  }

  .page-hero h1,
  .owner-page-heading h1,
  .admin-page-heading h1,
  .workspace-top h1 {
    font-size: clamp(3rem, 12vw, 4rem);
  }

  .owner-page-heading .btn,
  .admin-page-heading .btn,
  .workspace-actions .btn {
    min-height: 54px;
  }

  .owner-metric-grid,
  .admin-metric-grid {
    gap: .75rem;
  }

  .owner-metric,
  .admin-metric,
  .metric-card {
    padding: 1.1rem;
  }

  .owner-metric strong,
  .admin-metric strong,
  .metric-card strong {
    font-size: 1.8rem;
  }

  .owner-metric-green strong,
  .admin-metric-green strong {
    font-size: 1.4rem;
  }

  .owner-card,
  .admin-card,
  .workspace-card {
    padding: 1.15rem;
  }

  .admin-card-heading h2,
  .owner-card-heading h2,
  .card-heading h2 {
    font-size: 1.55rem;
  }

  .owner-sidebar,
  .admin-sidebar {
    padding: .8rem;
  }

  .workspace-nav-toggle {
    min-height: 50px;
    padding-inline: 1rem;
    font-size: .95rem;
  }

  .owner-sidebar .workspace-nav-list a,
  .admin-sidebar .workspace-nav-list a {
    min-height: 54px;
    padding: .75rem .8rem;
    font-size: .96rem;
  }

  .owner-ground-actions {
    gap: .55rem;
  }

  .owner-ground-actions .btn {
    min-height: 46px;
    font-size: .9rem;
  }

  .owner-booking-side {
    margin-left: 52px;
  }

  .review-card,
  .payment-instructions,
  .qr-pass-card {
    padding: 1.25rem;
  }

  .review-details span,
  .price-breakdown > div,
  .payment-summary span {
    font-size: .84rem;
  }

  .review-details strong,
  .payment-summary strong {
    font-size: .92rem;
  }
}

/*
 * Permanent ground-card image frame
 * Uploaded photos can be portrait, landscape, or very small. Never let the
 * intrinsic image dimensions control the card layout: the photo must fill
 * the complete media frame and crop cleanly instead of exposing the teal
 * placeholder behind it.
 */
.ground-card .ground-image {
  position: relative;
  display: block;
  width: 100%;
  height: 210px;
  min-height: 210px;
  overflow: hidden;
  isolation: isolate;
}

.ground-card .ground-image-photo {
  position: absolute;
  z-index: 0;
  inset: 0;
  display: block;
  width: 100% !important;
  min-width: 100%;
  max-width: none !important;
  height: 100% !important;
  min-height: 100%;
  max-height: none !important;
  object-fit: cover;
  object-position: center;
}

.ground-card .ground-image:not(.has-photo) .ground-placeholder {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

@media (max-width: 767.98px) {
  .ground-card .ground-image {
    height: 200px;
    min-height: 200px;
  }
}

@media (max-width: 575.98px) {
  .ground-card .ground-image {
    height: 190px;
    min-height: 190px;
  }
}

/*
 * Ground detail hero and phone layout
 * The back link and the context eyebrow are separate navigation/content
 * rows. Keeping them block-level prevents them from colliding at 360–390px.
 */
.detail-hero .back-link {
  display: flex;
  width: fit-content;
  max-width: 100%;
  margin-bottom: 1.15rem;
}

.detail-hero > .container > .eyebrow {
  display: flex;
  width: fit-content;
  max-width: 100%;
  margin-bottom: .55rem;
}

.detail-hero h1 {
  overflow-wrap: anywhere;
}

@media (max-width: 575.98px) {
  .detail-hero {
    padding: 3.2rem 0 3.1rem;
  }

  .detail-hero .back-link {
    margin-bottom: 1.25rem;
    font-size: .9rem;
  }

  .detail-hero > .container > .eyebrow {
    margin-bottom: .7rem;
    font-size: .72rem;
    letter-spacing: .11em;
    line-height: 1.4;
  }

  .detail-hero h1 {
    margin-top: .7rem;
    font-size: clamp(2.65rem, 13vw, 3.6rem);
    line-height: 1;
  }

  .detail-hero p {
    font-size: .95rem;
    line-height: 1.5;
  }

  .detail-grid {
    gap: 1.5rem;
  }

  .detail-gallery,
  .detail-gallery img,
  .detail-placeholder {
    min-height: 240px;
    height: 240px;
  }

  .detail-copy {
    padding: 1.25rem 0;
  }

  .detail-heading {
    display: block;
  }

  .detail-heading h2 {
    margin-top: .65rem;
    font-size: 1.9rem;
  }

  .detail-heading .rating {
    width: fit-content;
    margin-top: .7rem;
  }

  .booking-panel {
    padding: 1.15rem;
    border-radius: 18px;
  }

  .booking-panel-head h2 {
    font-size: 1.85rem;
  }

  .date-picker {
    margin: 1.35rem 0;
  }

  .date-picker label {
    font-size: .86rem;
  }

  .date-picker > div {
    display: grid;
    grid-template-columns: 1fr;
    gap: .65rem;
  }

  .date-picker input {
    min-height: 52px;
    font-size: 1rem;
  }

  .date-picker .btn {
    width: 100%;
    min-height: 50px;
    margin-top: 0;
  }

  .slot-row {
    align-items: flex-start;
    padding: 1rem 0;
  }

  .slot-row > div:first-child strong {
    font-size: 1rem;
  }

  .slot-row > div:first-child span,
  .slot-price strong {
    font-size: .84rem;
  }

  .slot-price .btn {
    min-height: 46px;
    padding-inline: .8rem;
    font-size: .9rem;
  }

  .address-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: .7rem;
  }

  .address-card .text-link {
    grid-column: 2;
    width: fit-content;
    margin-left: 0;
  }
}

/*
 * Booking and payment clarity
 * Keep action groups and payment notices readable at desktop and mobile widths.
 */
.page-hero .back-link {
  display: flex;
  width: fit-content;
  max-width: 100%;
  margin-bottom: 1.15rem;
}

.page-hero > .container > .eyebrow {
  display: flex;
  width: fit-content;
  max-width: 100%;
  margin-bottom: .55rem;
}

.booking-notice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .85rem 1rem;
  color: #5f4a10;
  line-height: 1.45;
}

.booking-notice-copy {
  display: flex;
  align-items: flex-start;
  gap: .55rem;
  min-width: 0;
  flex: 1 1 auto;
}

.booking-notice-copy > i {
  flex: 0 0 auto;
  margin-top: .15rem;
  color: #a97800;
}

.booking-notice-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex: 0 0 auto;
  gap: .45rem;
}

.booking-notice-actions form {
  margin: 0;
}

.booking-notice-actions .btn {
  min-height: 40px;
  white-space: nowrap;
}

.booking-cancel-button {
  color: #7e5b0c !important;
  padding-inline: .5rem;
}

.booking-notice-single {
  justify-content: flex-start;
}

.booking-notice.alert-success {
  color: #e8fff0;
}

.booking-notice.alert-success .booking-notice-copy {
  color: #e8fff0;
}

.booking-notice.alert-success .booking-notice-copy > i {
  color: #8cf04a;
}

.booking-notice.alert-success .booking-notice-copy span {
  color: #e8fff0;
}

.payment-method-details h4 {
  color: #102c43 !important;
}

.manual-methods > .payment-method-details {
  display: block;
  gap: 0;
}

.payment-method-details dt {
  color: #48677b !important;
  font-weight: 700;
}

.payment-method-details dd,
.payment-method-details dd span {
  color: #173b55 !important;
}

.payment-method-details dd span {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-size: .78rem;
}

.payment-method-details p {
  color: #4b687b !important;
}

.payment-method-details .copy-payment-value {
  color: #1378e8;
}

.payment-method-details > .alert.alert-warning {
  border: 1px solid #efdca9;
  background: #fff4d6;
  color: #654d12 !important;
  line-height: 1.5;
}

.otp-action-stack {
  display: grid;
  gap: .45rem;
}

.otp-action-stack .btn {
  margin-top: 0 !important;
}

.otp-resend-button {
  border: 1px solid #c9dce8;
  color: #145c91;
  background: #eef7fc;
}

.otp-resend-button:hover {
  border-color: #8dbbd7;
  color: #0d456e;
  background: #e2f1fa;
}

.otp-notice {
  display: flex;
  align-items: center;
  gap: .5rem;
  color: #dff8e8;
}

@media (max-width: 767.98px) {
  .booking-notice {
    align-items: flex-start;
    flex-direction: column;
  }

  .booking-notice-actions {
    justify-content: flex-start;
    width: 100%;
    flex-wrap: wrap;
  }
}

@media (max-width: 575.98px) {
  .page-hero .back-link {
    margin-bottom: 1.25rem;
    font-size: .9rem;
  }

  .page-hero > .container > .eyebrow {
    margin-bottom: .7rem;
    font-size: .72rem;
    letter-spacing: .11em;
    line-height: 1.4;
  }

  .booking-notice-actions,
  .booking-notice-actions .btn,
  .booking-notice-actions form {
    width: 100%;
  }

  .booking-notice-actions {
    display: grid;
  }

  .booking-notice-actions .btn {
    justify-content: center;
  }
}

/*
 * Set slots page: final layout
 * The slot editor stays a fixed, compact column while the slot list gets the
 * remaining width. Each slot is date | details | actions. When the list card is
 * still too narrow (phones), the actions drop to their own row instead of
 * squeezing the text into one-character columns.
 */
.slots-layout {
  grid-template-columns: minmax(290px, 370px) minmax(0, 1fr);
  align-items: start;
}

@media (max-width: 991.98px) {
  .slots-layout { grid-template-columns: minmax(0, 1fr); }
}

.slot-admin-list {
  display: grid;
  gap: .7rem;
  container-type: inline-size;
}

.slot-admin-row {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  grid-template-areas: none;
  align-items: center;
  gap: .85rem;
  padding: .85rem .95rem;
}

.slot-admin-row .slot-admin-date {
  grid-area: auto;
  width: 56px;
  min-height: 62px;
}

.slot-admin-body {
  display: grid;
  gap: .28rem;
  min-width: 0;
}

.slot-admin-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .3rem .55rem;
}

.slot-admin-title strong {
  color: var(--sport-heading-ink, #12334a);
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.2;
}

.slot-admin-title .status-badge {
  margin: 0;
  padding: .18rem .6rem;
  font-size: .68rem;
}

.slot-admin-time {
  color: #12334a;
  font-size: .9rem;
  font-weight: 700;
  white-space: nowrap;
}

.slot-admin-price {
  color: #5d7585;
  font-size: .8rem;
  white-space: nowrap;
}

.slot-admin-row .slot-admin-actions {
  grid-area: auto;
  flex-direction: row;
  width: auto;
  margin: 0;
  padding: 0;
  border-top: 0;
  justify-content: flex-end;
}

.slot-admin-row .slot-admin-actions .text-button {
  width: 36px;
  min-height: 36px;
  flex: 0 0 auto;
}

@container (max-width: 380px) {
  .slot-admin-row {
    grid-template-columns: 56px minmax(0, 1fr);
  }

  .slot-admin-row .slot-admin-actions {
    grid-column: 1 / -1;
    padding-top: .65rem;
    border-top: 1px solid #e9f0f4;
  }
}

.ground-chip-status {
  margin-left: .45rem;
  padding: .08rem .45rem;
  border-radius: 999px;
  background: rgba(22, 133, 255, .1);
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.slot-window-help {
  display: block;
  margin: .5rem 0 0;
}

/* Leaflet maps inside owner/admin cards: keep tiles intact and stable. */
.leaflet-container img.leaflet-tile,
.leaflet-container img.leaflet-marker-icon,
.leaflet-container img.leaflet-marker-shadow {
  max-width: none !important;
  max-height: none !important;
}

.owner-card:has(.leaflet-container):hover,
.admin-card:has(.leaflet-container):hover {
  transform: none;
}

.owner-map {
  height: 380px;
  position: relative;
  z-index: 0;
}

/*
 * Ground photos keep their own proportions.
 * The frame grows to fit the picture: a wide photo stays wide, a tall photo
 * stays tall, and the picture always fills the full width of its card - no
 * empty bars on the sides. Only extremely tall/wide photos are trimmed a
 * little (see max-height) so one photo cannot make a card enormous.
 */
.ground-card .ground-image.has-photo,
.owner-ground-cover.has-photo {
  height: auto;
  min-height: 0;
  overflow: hidden;
  background: #dfe9ee;
}

.ground-card .ground-image.has-photo .ground-image-photo,
.owner-ground-cover.has-photo .owner-ground-cover-photo {
  position: relative !important;
  inset: auto !important;
  z-index: 0;
  display: block;
  width: 100% !important;
  height: auto !important;
  min-height: 170px !important;
  max-height: 460px !important;
  max-width: none !important;
  object-fit: cover;
  object-position: center;
}

/* Keep only a light bottom shade so the photo itself is not darkened. */
.ground-image.has-photo::after,
.owner-ground-cover.has-photo::after {
  z-index: 1;
  background: linear-gradient(180deg, transparent 75%, rgba(7, 17, 31, .22) 100%);
  pointer-events: none;
}

.ground-image.has-photo .ground-badge,
.owner-ground-cover.has-photo .status-badge {
  z-index: 2;
}

/* Ground detail page: every photo at full width and natural proportions. */
.detail-gallery:has(> img) {
  display: grid;
  gap: .7rem;
  height: auto;
  min-height: 0;
  background: transparent;
  overflow: visible;
}

.detail-gallery img {
  display: block;
  width: 100%;
  height: auto;
  min-height: 0;
  max-height: 900px;
  border-radius: 18px;
  background: #dfe9ee;
  object-fit: cover;
}

/* Owner photo manager and ground-form previews use natural proportions too. */
.owner-photo-card img {
  height: auto;
  min-height: 140px;
  max-height: 340px;
  background: #dfe9ee;
  object-fit: cover;
}

.owner-form-photo-preview {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  align-items: start;
  gap: .65rem;
}

.owner-form-photo-preview[hidden] {
  display: none;
}

.owner-form-photo-preview img,
.owner-photo-thumb img {
  display: block;
  width: 100%;
  height: auto;
  min-height: 70px;
  max-height: 220px;
  border: 1px solid #dce7ed;
  border-radius: 10px;
  background: #dfe9ee;
  object-fit: cover;
}

.owner-photo-thumb {
  margin: 0;
}

.owner-new-photo-preview {
  margin-top: .6rem;
}

/* Address field: a roomy multi-line box so the whole address stays visible. */
.address-locate-row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: .6rem;
}

.address-locate-row textarea {
  width: 100%;
  min-height: 96px;
  resize: vertical;
  line-height: 1.45;
}

.address-locate-row .btn {
  align-self: flex-start;
  white-space: nowrap;
}

.address-status {
  margin: .55rem 0 .3rem;
  padding: .55rem .8rem;
  border-radius: 12px;
  background: #f1f5f8;
  color: #46606f;
  font-size: .82rem;
  line-height: 1.4;
}

.address-status[hidden] { display: none; }
.address-status[data-tone="ok"] { background: #e6f7ee; color: #0d6b45; }
.address-status[data-tone="warn"] { background: #fff4de; color: #8a5300; }
.address-status[data-tone="busy"] { background: #e8f1fb; color: #1c5a99; }

/* Owner map: three easy ways to place the pin. */
.owner-map {
  height: 420px;
  cursor: crosshair;
}

@media (max-width: 575.98px) {
  .owner-map { height: 340px; }
}

.map-how-to {
  display: grid;
  gap: .3rem;
  margin: .2rem 0 .85rem;
  padding: .75rem .9rem .75rem 2rem;
  border: 1px solid #dbe9f1;
  border-radius: 14px;
  background: #f4f9fc;
  color: #35566b;
  font-size: .86rem;
  line-height: 1.4;
}

.map-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem .85rem;
  margin-bottom: .75rem;
}

.map-toolbar-hint {
  color: #6b8494;
  font-size: .8rem;
}

.map-status {
  margin: .7rem 0 .4rem;
  padding: .6rem .85rem;
  border-radius: 12px;
  background: #f1f5f8;
  color: #46606f;
  font-size: .84rem;
  line-height: 1.4;
}

.map-status[data-tone="ok"] { background: #e6f7ee; color: #0d6b45; }
.map-status[data-tone="warn"] { background: #fff4de; color: #8a5300; }
.map-status[data-tone="busy"] { background: #e8f1fb; color: #1c5a99; }

.coordinate-grid-quiet input {
  background: #f6f9fb;
  color: #6b8494;
  font-size: .82rem;
}

.coordinate-grid-quiet label {
  color: #7a909d;
  font-size: .74rem;
}

.address-suggestions {
  display: grid;
  gap: .3rem;
  margin: .5rem 0 .4rem;
  padding: .55rem;
  border: 1px solid #dbe9f1;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(11, 27, 43, .08);
}

.address-suggestions[hidden] { display: none; }

.address-suggestions-title {
  padding: 0 .3rem;
  color: #6b8494;
  font-size: .74rem;
  font-weight: 700;
}

.address-suggestion {
  padding: .55rem .7rem;
  border: 0;
  border-radius: 10px;
  background: #f4f9fc;
  color: #12334a;
  font-size: .82rem;
  text-align: left;
  cursor: pointer;
}

.address-suggestion:hover,
.address-suggestion:focus-visible {
  background: #e3f0fa;
  outline: 0;
}

/* ==========================================================================
 * v8 - uniform ground cards, whole photo visible
 * Every card gets the SAME fixed-height photo frame. The full picture is shown
 * (object-fit: contain, never cropped) over a blurred copy of itself, so a tall
 * or wide photo can no longer make its card taller or wider than the others.
 * ========================================================================== */
.ground-card .ground-image.has-photo,
.owner-ground-cover.has-photo {
  position: relative;
  height: 230px !important;
  min-height: 230px !important;
  max-height: 230px !important;
  overflow: hidden;
  isolation: isolate;
  background: #dfe9ee;
}
.ground-card .ground-image.has-photo::before,
.owner-ground-cover.has-photo::before {
  content: "";
  position: absolute;
  inset: -24px;
  z-index: 0;
  background: var(--photo) center / cover no-repeat;
  filter: blur(18px) saturate(1.1);
  opacity: .9;
}
.ground-card .ground-image.has-photo .ground-image-photo,
.owner-ground-cover.has-photo .owner-ground-cover-photo {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: center;
}
.ground-image.has-photo::after,
.owner-ground-cover.has-photo::after { z-index: 2; }
.ground-image.has-photo .ground-badge,
.owner-ground-cover.has-photo .status-badge { z-index: 3; }
@media (max-width: 575.98px) {
  .ground-card .ground-image.has-photo,
  .owner-ground-cover.has-photo { height: 200px !important; min-height: 200px !important; max-height: 200px !important; }
}

/* Owner photo manager, form previews, detail page: same rule, whole photo shown. */
.owner-photo-card img { height: 200px !important; min-height: 0 !important; max-height: 200px !important; object-fit: contain !important; background: #dfe9ee; }
.owner-form-photo-preview img,
.owner-photo-thumb img { height: 110px !important; min-height: 0 !important; max-height: 110px !important; object-fit: contain !important; background: #dfe9ee; }
.detail-gallery img { max-height: 560px !important; object-fit: contain !important; }

/* Sport / facility pickers: an empty box that turns into a green tick. */
.owner-sport-checks label { position: relative; cursor: pointer; }
.owner-sport-checks label span { padding-right: .6rem; transition: border-color .15s, background .15s, color .15s; }
.owner-sport-checks label span b { font-weight: 600; flex: 1; }
.owner-sport-checks .pick-icon { display: none; }
.owner-sport-checks .pick-box {
  order: 3;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-left: auto;
  border: 2px solid #b9c9d3;
  border-radius: 6px;
  background: #fff;
  color: transparent;
  font-size: .8rem;
  font-style: normal;
}
.owner-sport-checks .pick-box i { color: inherit; }
.owner-sport-checks label span { flex-direction: row; }
.owner-sport-checks input:checked + span { border-color: #14a86b; background: #eafaf2; color: #0c7a4b; }
.owner-sport-checks input:checked + span .pick-box { background: #14a86b; border-color: #14a86b; color: #fff; }
.owner-sport-checks input:focus-visible + span { outline: 3px solid rgba(22,133,255,.35); outline-offset: 2px; }
.pick-hint { display: block; margin-top: .15rem; color: #7890a1; font-size: .72rem; font-weight: 500; }
.pick-hint i { color: #14a86b; }

/* ==========================================================================
 * v9 - ground photo frame, readable booking notice, visible buttons on light
 *      surfaces, simpler Explore filters
 * ========================================================================== */

/* 1) Ground cards: one even frame, the photo fills it edge to edge. No blurred
 *    side bars. (Open the ground to see every photo in full.) */
.ground-card .ground-image.has-photo::before,
.owner-ground-cover.has-photo::before { content: none !important; display: none !important; }
.ground-card .ground-image.has-photo,
.owner-ground-cover.has-photo {
  height: 220px !important;
  min-height: 220px !important;
  max-height: 220px !important;
  background: #dfe9ee;
}
.ground-card .ground-image.has-photo .ground-image-photo,
.owner-ground-cover.has-photo .owner-ground-cover-photo {
  object-fit: cover !important;
  object-position: center 40%;
}
@media (max-width: 575.98px) {
  .ground-card .ground-image.has-photo,
  .owner-ground-cover.has-photo { height: 200px !important; min-height: 200px !important; max-height: 200px !important; }
}

/* 2) Booking notice ("Your slot is reserved...") was dark text on a dark amber
 *    box. Light amber surface with dark text, matching the "Payment pending" badge. */
.booking-notice.alert-warning {
  background: #fff3d3;
  border: 1px solid #f1d58a;
  color: #4d3a08;
}
.booking-notice.alert-warning .booking-notice-copy,
.booking-notice.alert-warning .booking-notice-copy span { color: #4d3a08; font-weight: 500; }
.booking-notice.alert-warning .booking-notice-copy > i { color: #b27a00; }
.booking-notice.alert-warning .booking-cancel-button,
.booking-notice.alert-warning .btn-link {
  color: #8a4b00 !important;
  font-weight: 600;
  text-decoration: underline;
}
.booking-notice.alert-warning .booking-cancel-button:hover { color: #5e3200 !important; }

/* 3) .btn-ghost is a white-on-dark style. On light cards/pages it was nearly
 *    invisible (Set slots, Photos, Near me). */
.owner-ground-actions .btn-ghost,
.owner-card .btn-ghost,
.admin-card .btn-ghost {
  color: #12334a;
  background: #fff;
  border: 1px solid #cfdde6;
  font-weight: 600;
}
.owner-ground-actions .btn-ghost:hover,
.owner-card .btn-ghost:hover,
.admin-card .btn-ghost:hover {
  color: #0b5ed7;
  background: #eef6ff;
  border-color: #9cc6f5;
}

/* 4) Explore filters: search row, sport chips, then four labelled fields. */
.filter-bar.explore-filters {
  display: grid;
  gap: .9rem;
  padding: 1rem;
}
.explore-filters .filter-row { display: flex; gap: .6rem; align-items: stretch; }
.explore-filters .filter-row-main .filter-search { flex: 1 1 auto; min-width: 0; }
.explore-filters .btn { white-space: nowrap; }
.explore-filters .btn-near-me {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  color: #0b5ed7;
  background: #eaf3ff;
  border: 1px solid #b7d6fb;
  font-weight: 700;
}
.explore-filters .btn-near-me:hover:not(:disabled) { background: #d9eaff; color: #084298; }
.explore-filters .btn-near-me:disabled { opacity: .75; }

.sport-chips { display: flex; gap: .45rem; overflow-x: auto; padding-bottom: .15rem; scrollbar-width: thin; }
.sport-chip { position: relative; flex: 0 0 auto; margin: 0; cursor: pointer; }
.sport-chip input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; cursor: pointer; }
.sport-chip span {
  display: inline-block;
  padding: .5rem .95rem;
  border: 1px solid #d3e0e8;
  border-radius: 999px;
  background: #fff;
  color: #38536a;
  font-size: .85rem;
  font-weight: 600;
  transition: background .15s, border-color .15s, color .15s;
}
.sport-chip:hover span { border-color: #9cc6f5; background: #f3f9ff; }
.sport-chip input:checked + span { background: #12334a; border-color: #12334a; color: #fff; }
.sport-chip input:focus-visible + span { outline: 3px solid rgba(22,133,255,.35); outline-offset: 2px; }

.explore-filters .filter-row-secondary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .7rem; }
.explore-filters .filter-field { display: grid; gap: .3rem; margin: 0; min-width: 0; }
.explore-filters .filter-field > span { color: #6c869a; font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.explore-filters .filter-field select,
.explore-filters .filter-field input {
  width: 100%;
  min-width: 0;
  border: 1px solid #dbe5ea;
  border-radius: 9px;
  background: #fff;
  color: #38536a;
  padding: .65rem .75rem;
}
.explore-filters.is-loading { opacity: .65; pointer-events: none; }

@media (max-width: 767.98px) {
  .explore-filters .filter-row-secondary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575.98px) {
  .explore-filters .filter-row-main { flex-wrap: wrap; }
  .explore-filters .filter-row-main .filter-search { flex: 1 1 100%; }
  .explore-filters .filter-row-main .btn { width: auto; flex: 1 1 calc(50% - .3rem); justify-content: center; }
  .explore-filters .filter-row-secondary { grid-template-columns: 1fr 1fr; }
  .explore-filters .filter-field input,
  .explore-filters .filter-field select { min-height: 46px; }
}

/* v9b - clearer Explore map: taller, own stacking layer (so map controls can
 * never float over the sticky header or mobile bottom bar), optional big view. */
.explore-map {
  position: relative;
  z-index: 0;
  isolation: isolate;
  height: clamp(400px, 56vh, 580px);
  min-height: 400px;
  background: #e6edf1;
  transition: height .25s ease;
}
.explore-map.is-expanded { height: min(82vh, 780px); }
.explore-map .leaflet-control-zoom a { width: 36px; height: 36px; line-height: 36px; font-size: 20px; }
.explore-map .leaflet-popup-content { margin: 12px 14px; font-size: .85rem; }
.explore-map:focus { outline: 3px solid rgba(22,133,255,.3); outline-offset: 2px; }
@media (max-width: 575.98px) {
  .explore-map { height: 380px; min-height: 380px; }
  .explore-map.is-expanded { height: 75vh; }
}

.admin-table .payment-expired-group th {
  background: #fff0ee;
  color: #8d3028;
  font-weight: 800;
  letter-spacing: .02em;
}
.admin-table .payment-other-group th {
  background: #f1f6f8;
  color: #476276;
  font-weight: 800;
}
.admin-table .payment-expired-row td { background: #fffaf9; }

/* Footer social links */
.footer-social { display: flex; gap: .65rem; margin-top: 1rem; }
.footer-social-link { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.05); color: #c5d4df; font-size: 1.1rem; transition: transform .18s, background .18s, border-color .18s, color .18s; }
.footer-social-link:hover, .footer-social-link:focus-visible { color: #fff; transform: translateY(-2px); border-color: transparent; }
.footer-social-instagram:hover, .footer-social-instagram:focus-visible { background: linear-gradient(45deg, #f09433, #dc2743 55%, #bc1888); }
.footer-social-linkedin:hover, .footer-social-linkedin:focus-visible { background: #0a66c2; }
.footer-social-link:focus-visible { outline: 2px solid var(--green, #4ee0a1); outline-offset: 2px; }

/* Ground page: sport + date slot filters */
.slot-filter { display: grid; gap: .45rem; margin: 0 0 1rem; }
.slot-filter-label { color: #5f7b90; font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.slot-chips, .slot-dates { display: flex; gap: .45rem; overflow-x: auto; padding-bottom: .2rem; scrollbar-width: thin; }
.slot-chip {
  flex: 0 0 auto;
  border: 1px solid #d3e4ef;
  border-radius: 999px;
  background: #fff;
  color: #29506a;
  padding: .45rem .85rem;
  font-size: .82rem;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  transition: background .15s, border-color .15s, color .15s;
}
.slot-chip:hover { border-color: #9cc6f5; background: #f3f9ff; color: #12334a; }
.slot-chip.is-active, .slot-chip.is-active:hover { border-color: #12334a; background: #12334a; color: #fff; }
.slot-date {
  display: grid;
  flex: 0 0 auto;
  min-width: 62px;
  justify-items: center;
  gap: .05rem;
  border: 1px solid #d3e4ef;
  border-radius: 14px;
  background: #fff;
  color: #29506a;
  padding: .5rem .6rem;
  text-decoration: none;
  transition: background .15s, border-color .15s, color .15s;
}
.slot-date small { font-size: .66rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; opacity: .8; }
.slot-date strong { font-size: 1.15rem; font-weight: 800; line-height: 1.15; }
.slot-date:hover { border-color: #9cc6f5; background: #f3f9ff; }
.slot-date.is-active, .slot-date.is-active:hover { border-color: #12334a; background: #12334a; color: #fff; }
.slot-chip:focus-visible, .slot-date:focus-visible { outline: 3px solid rgba(22,133,255,.35); outline-offset: 2px; }
.slot-summary { margin: 0 0 .75rem; color: #5f7b90; font-size: .85rem; font-weight: 600; }

/* Flash messages as toasts: always visible, never pushed off-screen by a restored scroll position */
.flash-stack {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 14px);
  left: 50%;
  z-index: 1080;
  display: grid;
  gap: .5rem;
  width: min(560px, calc(100% - 24px));
  transform: translateX(-50%);
  pointer-events: none;
}
.flash-stack .alert {
  margin: 0;
  pointer-events: auto;
  border-radius: 14px;
  box-shadow: 0 14px 34px rgba(7, 17, 31, .28);
}
@media print { .flash-stack { display: none !important; } }

/* Mobile header: keep the expanding menu light to paint and its install hint in-frame. */
@media (max-width: 991.98px) {
  .site-header {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .site-header .navbar-collapse.collapsing {
    will-change: height;
    transition: height .22s cubic-bezier(.2, .7, .25, 1);
  }
}
@media (max-width: 575.98px) {
  .nav-actions .install-app-help {
    right: auto;
    left: 0;
    width: min(280px, calc(100vw - 2rem));
    max-width: calc(100vw - 2rem);
  }
}

/* Center the authentication brand statement in its visual panel. */
.auth-art {
  align-items: center;
  justify-content: center;
  text-align: center;
}
.auth-art-copy {
  width: min(100%, 560px);
}
.auth-art-copy h2 {
  font-size: clamp(2.25rem, 4vw, 4rem);
}
.auth-art-copy p {
  margin-bottom: 0;
}

#ground-results {
  scroll-margin-top: 1.25rem;
}

/* Official partner (home) */
.partner-section { padding: 2.2rem 0; background: var(--sport-ink); }
.partner-card { display: flex; align-items: center; gap: 1.1rem; width: 100%; max-width: 560px; margin: 0 auto; padding: .9rem 1.2rem .9rem .9rem; border: 1px solid rgba(216,169,58,.45); border-radius: 18px; background: linear-gradient(120deg, rgba(216,169,58,.12), rgba(255,255,255,.03)); color: #f3f8fc; text-align: left; cursor: pointer; transition: border-color .2s, transform .2s; }
.partner-card:hover, .partner-card:focus-visible { border-color: #d8a93a; transform: translateY(-2px); outline: none; }
.partner-card:focus-visible { box-shadow: 0 0 0 3px rgba(216,169,58,.4); }
.partner-card-logo { flex: 0 0 84px; width: 84px; height: 84px; border-radius: 16px; object-fit: cover; background: #000; }
.partner-card-copy { flex: 1; min-width: 0; display: block; }
.partner-card-copy strong { display: block; font-size: 1.45rem; letter-spacing: -.03em; line-height: 1.15; }
.partner-card-copy small { display: block; margin-top: .15rem; color: #8fa8bb; font-size: .78rem; }
.partner-card-kicker { display: block; color: #d8a93a; font-size: .72rem; font-weight: 800; letter-spacing: .08em; }
.partner-card-arrow { color: #d8a93a; font-size: 1.2rem; }
.partner-modal .modal-content { position: relative; align-items: center; gap: .35rem; padding: 2rem 1.5rem 1.7rem; border: 1px solid rgba(216,169,58,.5); border-radius: 22px; background: #0d1c2e; color: #f3f8fc; text-align: center; }
.partner-modal-close { position: absolute; top: 1rem; right: 1rem; filter: invert(1) grayscale(1); opacity: .8; }
.partner-modal-logo { width: 150px; height: 150px; margin-bottom: .6rem; border-radius: 24px; object-fit: cover; background: #000; }
.partner-modal h2 { margin: 0; font-size: 1.9rem; letter-spacing: -.04em; }
.partner-modal p { margin: .2rem 0 .9rem; color: #a9bdcd; }
.partner-insta { display: inline-flex; align-items: center; gap: .5rem; padding: .65rem 1.2rem; border-radius: 999px; background: #d8a93a; color: #1a1304; font-weight: 800; text-decoration: none; }
.partner-insta:hover, .partner-insta:focus-visible { background: #e8bb4d; color: #1a1304; }
@media (prefers-reduced-motion: reduce) { .partner-card { transition: none; } .partner-card:hover { transform: none; } }

/* Player dashboard: gambling notice (always visible, not dismissible) */
.gambling-notice { display: flex; gap: .9rem; align-items: flex-start; margin-bottom: 1.4rem; padding: 1rem 1.15rem; border: 1px solid #e3b94f; border-left: 5px solid #c98a00; border-radius: 14px; background: #fff7df; color: #3a2b00; }
.gambling-notice-icon { flex: 0 0 auto; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: #ffe7a6; color: #8a5a00; font-size: 1.25rem; }
.gambling-notice strong { display: block; margin-bottom: .2rem; font-size: 1rem; color: #3a2b00; }
.gambling-notice p { margin: 0; color: #4a3a0a; font-size: .9rem; line-height: 1.5; }

.slot-duration-help { display: block; margin-top: .35rem; color: #587186; }

/* v14 - clearer, branded maps */
.sp-pin { background: none; border: 0; }
.sp-pin svg { display: block; filter: drop-shadow(0 3px 4px rgba(7,17,31,.35)); }
.sp-pin svg path { stroke: #fff; stroke-width: 2; }
.sp-pin svg circle { fill: #fff; }
.sp-pin-open svg path { fill: #14a85f; }
.sp-pin-closed svg path { fill: #8497a6; }
.sp-pin-pick svg path { fill: #1685ff; }
.sp-pin-pick { cursor: grab; }
.sp-user-dot { background: none; border: 0; }
.sp-user-dot span { display: block; width: 22px; height: 22px; border-radius: 50%; background: #1685ff; border: 3px solid #fff; box-shadow: 0 0 0 0 rgba(22,133,255,.5); animation: sp-pulse 2s infinite; }
@keyframes sp-pulse { 70% { box-shadow: 0 0 0 14px rgba(22,133,255,0); } 100% { box-shadow: 0 0 0 0 rgba(22,133,255,0); } }
@media (prefers-reduced-motion: reduce) { .sp-user-dot span { animation: none; } }
.sp-legend { display: flex; flex-direction: column; gap: .2rem; padding: .45rem .65rem; border-radius: 10px; background: rgba(255,255,255,.94); box-shadow: 0 2px 8px rgba(7,17,31,.2); color: #28465c; font-size: .72rem; font-weight: 600; }
.sp-legend span { display: flex; align-items: center; gap: .4rem; }
.sp-legend-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; }
.sp-legend-dot.is-open { background: #14a85f; }
.sp-legend-dot.is-closed { background: #8497a6; }
.leaflet-popup-content-wrapper { border-radius: 14px; box-shadow: 0 10px 28px rgba(7,17,31,.28); }
.leaflet-popup-content { margin: 14px 16px; }
.map-popup { gap: .4rem; min-width: 190px; }
.map-popup-title { font-size: .95rem; line-height: 1.25; }
.map-popup-address { font-size: .75rem; line-height: 1.35; }
.map-popup-slots { display: inline-block; align-self: start; padding: .15rem .55rem; border-radius: 999px; background: #eceff2; color: #5d7284; font-size: .72rem; font-weight: 700; }
.map-popup-slots.is-open { background: #e1f6ea; color: #0d7a43; }
.map-popup-actions { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .2rem; }
.map-popup-actions a { padding: .38rem .7rem; border-radius: 999px; font-size: .75rem; font-weight: 700; text-decoration: none; }
.map-popup-view { background: #1685ff; color: #fff !important; }
.map-popup-actions .map-popup-directions { border: 1px solid #cfe0ec; color: #1c5a99; }
.leaflet-control-zoom { border: 0 !important; box-shadow: 0 2px 8px rgba(7,17,31,.25) !important; border-radius: 10px; overflow: hidden; }
.leaflet-control-attribution { font-size: .62rem; background: rgba(255,255,255,.8) !important; }
.explore-map, .owner-map, .venue-map { border-radius: 18px; }

/* v36 - clearer, more professional ground map */
.explore-map, .venue-map, .public-map { background: #eaf0f4; }
.sp-pin svg { width: 36px; height: 47px; transition: transform .15s ease; transform-origin: 50% 90%; }
.sp-pin:hover svg { transform: scale(1.12); }
.sp-pin-open svg path { fill: #12a150; }
.sp-pin-open svg circle { fill: #fff; }
.sp-pin-closed svg path { fill: #8b9cab; }
.sp-pin-label.leaflet-tooltip { padding: .22rem .55rem; border: 0; border-radius: 999px; background: #0b1f33; color: #fff; font: 700 .7rem/1.2 "DM Sans", sans-serif; box-shadow: 0 3px 10px rgba(7,17,31,.35); white-space: nowrap; max-width: 190px; overflow: hidden; text-overflow: ellipsis; }
.sp-pin-label.leaflet-tooltip::before { display: none; }
.sp-pin-label.is-closed.leaflet-tooltip { background: #62768a; }
.sp-fit-control a { display: flex !important; align-items: center; justify-content: center; width: 36px; height: 36px; color: #12334a; font-size: 1.05rem; }
.sp-fit-control a:hover { color: #1685ff; }
.sp-legend { font-size: .74rem; padding: .5rem .7rem; border: 1px solid rgba(7,17,31,.06); }
.leaflet-popup-content-wrapper { border-radius: 16px; padding: 2px; }
.leaflet-popup-close-button { font-size: 20px !important; padding: 8px 10px 0 0 !important; }
.map-popup-title { font-size: 1rem; }
.map-popup-actions a { min-height: 34px; display: inline-flex; align-items: center; }
@media (max-width: 575.98px) {
  .explore-map { height: 62vh; min-height: 420px; }
  .sp-pin svg { width: 40px; height: 52px; }
  .leaflet-popup-content { margin: 12px 14px; max-width: 220px; }
}
/* v36 - app logo: always sharp, no white halo */
.brand-logo { border-radius: .7rem; image-rendering: auto; background: transparent; box-shadow: none; }

/* Public terms and refund information */
.footer-terms-button { display: inline-flex; align-items: center; gap: .4rem; width: fit-content; border: 1px solid rgba(143,166,184,.38); border-radius: 8px; padding: .42rem .65rem; color: #e7f0f5 !important; font-weight: 700; }
.footer-terms-button:hover { border-color: var(--green); color: var(--green) !important; }
.policy-terms-button { margin-top: .75rem; display: inline-flex; align-items: center; gap: .4rem; }
.terms-container { max-width: 920px; }
.terms-card { padding: clamp(1.25rem, 4vw, 3rem); border: 1px solid #e0e9ee; border-radius: 22px; background: #fff; box-shadow: 0 16px 45px rgba(15,52,79,.07); color: #31495b; }
.terms-intro { padding: 1rem 1.15rem; border-left: 4px solid #1685ff; border-radius: 0 12px 12px 0; background: #f1f7fb; color: #405c70; font-size: 1.02rem; line-height: 1.75; }
.terms-section { padding: 1.45rem 0; border-bottom: 1px solid #e8eef2; scroll-margin-top: 100px; }
.terms-section h2 { margin: 0 0 .85rem; color: #102f47; font-family: "Space Grotesk", sans-serif; font-size: clamp(1.25rem, 3vw, 1.65rem); }
.terms-section p, .terms-section li { color: #526b7d; line-height: 1.75; }
.terms-section p:last-child { margin-bottom: 0; }
.terms-section li + li { margin-top: .45rem; }
.terms-section a { color: #1269be; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.terms-contact { margin-bottom: 1.5rem; }