/* ============================================
   CurrentSituation Dark Theme
   Modern Urban Luxury Aesthetic
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700;800&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Inter:wght@300;400;500;600&display=swap');

/* ============================================
   1. CSS CUSTOM PROPERTIES (Variables)
   ============================================ */

:root {
  /* Primary Brand Colors */
  --cs-purple: #5a189a;
  --cs-blue: #3a86ff;

  /* Secondary Colors */
  --cs-yellow: #ffb703;
  --cs-teal: #0f4c5c;

  /* Neutral Colors */
  --cs-black: #000000;
  --cs-dark-bg: #0f0f1a;
  --cs-card-bg: #1a1a2e;
  --cs-border: #2a2a4a;
  --cs-text-primary: #f5f5f5;
  --cs-text-secondary: #a0a0b8;
  --cs-light: #e5e7eb;

  /* PT-00280: explicit input surface so form fields don't blend into the
     surrounding card (both default to --cs-card-bg #1a1a2e otherwise,
     leaving empty fields invisible). Lift bg + border clearly above the
     card so empty fields read as inputs at a glance. */
  --cs-input-bg: #3a3a5c;
  --cs-input-border: #6868a0;

  /* Font Families */
  --cs-font-heading: 'Poppins', sans-serif;
  --cs-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ============================================
   2. BASE STYLES
   ============================================ */

html, body {
  background-color: var(--cs-dark-bg);
  color: var(--cs-text-primary);
  font-family: var(--cs-font-body);
  font-size: 0.9rem;
  line-height: 1.5;
}

body {
  background-image:
    linear-gradient(135deg, rgba(90, 24, 154, 0.03) 0%, transparent 50%),
    linear-gradient(225deg, rgba(58, 134, 255, 0.03) 0%, transparent 50%);
  background-attachment: fixed;
}

/* ============================================
   3. TYPOGRAPHY
   ============================================ */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--cs-font-heading);
  font-weight: 600;
  color: var(--cs-heading-color, var(--cs-text-primary));
  margin-bottom: 1rem;
}

h1 { font-size: 1.85rem; font-weight: 700; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.35rem; }
h4 { font-size: 1.2rem; }
h5 { font-size: 1.1rem; }
h6 { font-size: 1rem; }

.display-4, .display-5, .display-6 {
  font-family: var(--cs-font-heading);
  font-weight: 700;
  color: var(--cs-text-primary);
}

.lead {
  color: var(--cs-text-secondary);
  font-size: 1.1rem;
}

.text-muted {
  color: var(--cs-text-secondary) !important;
}

.text-secondary {
  color: var(--cs-text-secondary) !important;
}

small {
  color: var(--cs-text-secondary);
}

.italic {
  font-style: italic;
  color: var(--cs-blue);
}

/* ============================================
   4. COMPONENTS
   ============================================ */

a {
  color: var(--cs-link-color, var(--cs-blue));
  text-decoration: none;
  transition: color 200ms ease-in-out;
}

a:hover {
  color: var(--cs-link-hover-color, var(--cs-purple));
  text-decoration: none;
}

.btn {
  border-radius: var(--cs-radius-button, 8px);
  font-weight: 500;
  transition: all 200ms ease-in-out;
  border: none;
}

.btn:focus {
  outline: none;
  box-shadow: 0 0 0 3px var(--cs-focus-ring, rgba(58, 134, 255, 0.2));
}

.btn-primary {
  background-color: var(--cs-button-primary-bg, var(--cs-blue));
  border-color: var(--cs-button-primary-bg, var(--cs-blue));
  color: var(--cs-button-primary-text, white);
}

.btn-primary:hover {
  background-color: var(--cs-button-hover-bg, #4B3FB0);
  border-color: var(--cs-button-hover-bg, #4B3FB0);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--cs-button-primary-bg, #362D87) 30%, transparent);
}

.btn-primary:active {
  background-color: color-mix(in srgb, var(--cs-button-primary-bg, #362D87) 85%, black);
  border-color: color-mix(in srgb, var(--cs-button-primary-bg, #362D87) 85%, black);
}

.btn-outline-primary {
  color: var(--cs-blue);
  border-color: var(--cs-blue);
}

.btn-outline-primary:hover {
  background-color: var(--cs-blue);
  border-color: var(--cs-blue);
  color: white;
  transform: translateY(-2px);
}

.btn-outline-secondary {
  color: var(--cs-text-secondary);
  border-color: var(--cs-border);
}

.btn-outline-secondary:hover {
  background-color: var(--cs-card-bg);
  border-color: var(--cs-blue);
  color: var(--cs-blue);
}

/* Bootstrap .btn-outline-* state variants — override hardcoded Bootstrap
   greens/reds/yellows/blues so the Theme Editor's --cs-alert-* colors
   retarget them. */
.btn-outline-success {
  color: var(--cs-alert-success, #86efac);
  border-color: var(--cs-alert-success, #86efac);
}

.btn-outline-success:hover, .btn-outline-success:focus, .btn-outline-success:active {
  background-color: var(--cs-alert-success, #86efac) !important;
  border-color: var(--cs-alert-success, #86efac) !important;
  color: var(--cs-dark-bg) !important;
}

.btn-outline-danger {
  color: var(--cs-alert-danger, #ff6b6b);
  border-color: var(--cs-alert-danger, #ff6b6b);
}

.btn-outline-danger:hover, .btn-outline-danger:focus, .btn-outline-danger:active {
  background-color: var(--cs-alert-danger, #ff6b6b) !important;
  border-color: var(--cs-alert-danger, #ff6b6b) !important;
  color: var(--cs-button-danger-text, #ffffff) !important;
}

.btn-outline-warning {
  color: var(--cs-alert-warning, var(--cs-yellow));
  border-color: var(--cs-alert-warning, var(--cs-yellow));
}

.btn-outline-warning:hover, .btn-outline-warning:focus, .btn-outline-warning:active {
  background-color: var(--cs-alert-warning, var(--cs-yellow)) !important;
  border-color: var(--cs-alert-warning, var(--cs-yellow)) !important;
  color: var(--cs-dark-bg) !important;
}

.btn-outline-info {
  color: var(--cs-alert-info, var(--cs-blue));
  border-color: var(--cs-alert-info, var(--cs-blue));
}

.btn-outline-info:hover, .btn-outline-info:focus, .btn-outline-info:active {
  background-color: var(--cs-alert-info, var(--cs-blue)) !important;
  border-color: var(--cs-alert-info, var(--cs-blue)) !important;
  color: var(--cs-dark-bg) !important;
}

.btn-outline-light {
  color: var(--cs-text-primary);
  border-color: var(--cs-border);
}

.btn-outline-light:hover, .btn-outline-light:focus, .btn-outline-light:active {
  background-color: var(--cs-card-bg) !important;
  border-color: var(--cs-blue) !important;
  color: var(--cs-blue) !important;
}

.btn-cta {
  background: var(--cs-blue);
  color: white;
  border: none;
  padding: 0.75rem 2rem;
  font-size: 1.1rem;
  border-radius: var(--cs-radius-button, 8px);
  font-weight: 500;
  transition: all 200ms ease-in-out;
  text-decoration: none;
  display: inline-block;
}

.btn-cta:hover {
  background: var(--cs-purple);
  transform: translateY(-2px);
  box-shadow: 0 8px 16px color-mix(in srgb, var(--cs-blue, #3a86ff) 30%, transparent);
  color: white;
}

.btn-cta:focus {
  outline: none;
  box-shadow: 0 0 0 3px var(--cs-focus-ring, rgba(58, 134, 255, 0.2));
}

.btn-sm {
  padding: 0.4rem 0.8rem;
  font-size: 0.875rem;
}

.btn-success {
  background-color: var(--cs-button-success-bg, var(--cs-purple));
  border-color: var(--cs-button-success-bg, var(--cs-purple));
}

.btn-success:hover {
  background-color: var(--cs-button-success-hover-bg, var(--cs-blue));
  border-color: var(--cs-button-success-hover-bg, var(--cs-blue));
}

.btn-danger {
  background-color: var(--cs-alert-danger, #ff6b6b);
  border-color: var(--cs-alert-danger, #ff6b6b);
  color: var(--cs-button-danger-text, #ffffff);
}

.btn-danger:hover {
  background-color: var(--cs-alert-danger-hover, #ff5252);
  border-color: var(--cs-alert-danger-hover, #ff5252);
  color: var(--cs-button-danger-text, #ffffff);
}

.btn-warning {
  background-color: var(--cs-button-warning-bg, var(--cs-yellow));
  border-color: var(--cs-button-warning-bg, var(--cs-yellow));
  color: var(--cs-button-warning-text, var(--cs-dark-bg));
}

.btn-warning:hover {
  background-color: var(--cs-button-warning-bg, #ffaa00);
  border-color: var(--cs-button-warning-bg, #ffaa00);
  color: var(--cs-button-warning-text, var(--cs-dark-bg));
  filter: brightness(0.95);
}

.card {
  background-color: var(--cs-card-bg);
  border: 1px solid var(--cs-border);
  border-radius: 12px;
  transition: all 200ms ease-in-out;
  color: var(--cs-text-primary);
}

.card:hover {
  border-color: var(--cs-blue);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--cs-blue, #3a86ff) 15%, transparent);
}

.card-header {
  background-color: color-mix(in srgb, var(--cs-blue, #3a86ff) 10%, transparent);
  border-bottom-color: var(--cs-border);
  color: var(--cs-text-primary);
}

.card-title {
  color: var(--cs-heading-color, var(--cs-text-primary));
  font-weight: 600;
}

.card-text {
  color: var(--cs-text-secondary);
}

.form-control,
.form-select {
  background-color: var(--cs-input-bg, #3a3a5c);
  border: 1px solid var(--cs-input-border, #6868a0);
  color: var(--cs-input-text, var(--cs-text-primary));
  transition: all 200ms ease-in-out;
}

.form-control::placeholder {
  color: var(--cs-input-placeholder, var(--cs-text-secondary));
}

.form-control:focus,
.form-select:focus {
  background-color: var(--cs-input-bg, var(--cs-card-bg));
  border-color: var(--cs-input-focus-border, var(--cs-blue));
  color: var(--cs-input-text, var(--cs-text-primary));
  box-shadow: 0 0 0 3px var(--cs-focus-ring, rgba(58, 134, 255, 0.1));
}

/* PT-00229: Bootstrap's default :disabled / [readonly] styling fades inputs
   to ~65% opacity on a light background, which on the dark theme renders
   pre-filled values (Business Name, Start Date, Google Place ID, etc.) as
   barely-legible grey-on-grey. Keep them readable while still signalling
   "non-editable" via a slightly dimmer surface + muted border. */
.form-control[readonly],
.form-control:disabled,
.form-control[readonly]:disabled,
.form-select:disabled {
  background-color: var(--cs-input-readonly-bg, rgba(255, 255, 255, 0.04));
  border-color: var(--cs-input-readonly-border, rgba(255, 255, 255, 0.15));
  color: var(--cs-input-text, var(--cs-text-primary));
  opacity: 1;
  cursor: not-allowed;
}

.form-switch .form-check-input {
  background-color: var(--cs-border);
  border-color: var(--cs-border);
}

.form-switch .form-check-input:checked {
  background-color: var(--cs-blue);
  border-color: var(--cs-blue);
}

.form-switch .form-check-input:focus {
  border-color: var(--cs-input-focus-border, var(--cs-blue));
  box-shadow: 0 0 0 3px var(--cs-focus-ring, rgba(58, 134, 255, 0.1));
}

.form-check-label {
  color: var(--cs-text-primary);
}

.badge {
  padding: 0.4rem 0.8rem;
  border-radius: 6px;
  font-weight: 500;
  font-size: 0.85rem;
}

.badge.bg-primary {
  background-color: var(--cs-blue) !important;
}

.badge.bg-purple {
  background-color: var(--cs-purple) !important;
}

.badge.bg-warning {
  background-color: var(--cs-yellow) !important;
  color: var(--cs-dark-bg);
}

.input-group-text {
  background-color: var(--cs-input-bg, var(--cs-card-bg));
  border-color: var(--cs-input-border, var(--cs-border));
  color: var(--cs-text-secondary);
}

.input-group > .form-control:focus ~ .input-group-text {
  border-color: var(--cs-input-focus-border, var(--cs-blue));
}

.alert {
  border-radius: 8px;
  border: 1px solid;
}

/* Note: alert-* rules defined authoritatively in section 15 below
   using color-mix() so backgrounds/borders track the state variable. */

.progress {
  background-color: var(--cs-border);
  border-radius: 10px;
}

.progress-bar {
  background-color: var(--cs-blue);
  background-image: linear-gradient(90deg, var(--cs-blue), var(--cs-purple));
}

.spinner-border {
  border-color: var(--cs-border);
  border-right-color: var(--cs-blue);
}

/* ============================================
   5. NAVBAR
   ============================================ */

.navbar {
  background-color: var(--cs-navbar-bg, #ffffff);
  border-bottom: 1px solid var(--cs-navbar-border, #e5e5ec);
}

.navbar-brand {
  color: var(--cs-navbar-text, #1a1a2e) !important;
  font-weight: 600;
  font-size: 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.navbar-brand img {
  height: 40px;
  width: auto;
}

/* Scope link colors to .navbar so other .nav-link instances (if any) don't
   inherit navbar-specific colors. */
.navbar .nav-link {
  color: var(--cs-navbar-link, #2d2d3a) !important;
  transition: color 200ms ease-in-out;
}

.navbar .nav-link:hover,
.navbar .nav-link:focus {
  color: var(--cs-navbar-link-hover, var(--cs-purple, #5a189a)) !important;
}

.navbar .nav-link.active {
  color: var(--cs-navbar-link-hover, var(--cs-purple, #5a189a)) !important;
  font-weight: 500;
}

.navbar-toggler {
  border-color: var(--cs-navbar-border, #e5e5ec);
}

.navbar-toggler:focus {
  box-shadow: 0 0 0 0.25rem var(--cs-focus-ring, rgba(58, 134, 255, 0.25));
}

/* ============================================
   6. FOOTER
   ============================================ */

footer {
  background-color: var(--cs-footer-bg, var(--cs-dark-bg));
  border-top: 1px solid var(--cs-border);
  color: var(--cs-footer-text, var(--cs-text-secondary));
}

footer a {
  color: var(--cs-footer-text, var(--cs-text-secondary));
}

footer a:hover {
  color: var(--cs-blue);
}

/* ============================================
   7. PAGE-SPECIFIC STYLES
   ============================================ */

.hero-section {
  position: relative;
  background-color: var(--cs-dark-bg);
  overflow: hidden;
  padding: 0.25rem 0 1.25rem;
  border-bottom: 1px solid var(--cs-border);
  isolation: isolate;
}

/* Full-bleed hero wallpaper. Path is hardcoded here because putting var()
   inside url() is unreliable across browsers (var substitution doesn't
   happen inside url-token parsing). Designer-tool compatibility is still
   preserved: the tool overrides by replacing the file at this path. The
   --cs-hero-bg-image manifest entry documents the location for discovery. */
.hero-section::before {
  content: '';
  position: absolute;
  inset: 0;
  /* Source is pre-cropped to the buildings band (temp/prep_hero_skyline.py).
     That means `cover; center` just works — the buildings stay visible at
     any hero aspect without fiddling with background-position. */
  background-image: url('/images/brand/hero/night-skyline.jpg');
  background-size: cover;
  background-position: center;
  opacity: 1;
  z-index: 0;
  pointer-events: none;
}

/* Readability overlay. Desktop hero shows text on the LEFT over the
   skyline, with the search panel on the right, so we add a subtle
   left-dark gradient (not as strong as mobile — we want the skyline
   to still feel present). Bottom fade transitions into results section.
   Brand-color radial glows add subtle depth. */
.hero-section::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg,
      color-mix(in srgb, var(--cs-dark-bg, #0f0f1a) 78%, transparent) 0%,
      color-mix(in srgb, var(--cs-dark-bg, #0f0f1a) 55%, transparent) 30%,
      color-mix(in srgb, var(--cs-dark-bg, #0f0f1a) 15%, transparent) 60%,
      transparent 85%),
    linear-gradient(180deg,
      transparent 0%,
      transparent 82%,
      color-mix(in srgb, var(--cs-dark-bg, #0f0f1a) 40%, transparent) 100%),
    radial-gradient(ellipse at top right, color-mix(in srgb, var(--cs-purple, #5a189a) 8%, transparent) 0%, transparent 55%),
    radial-gradient(ellipse at bottom left, color-mix(in srgb, var(--cs-blue, #3a86ff) 6%, transparent) 0%, transparent 55%);
  z-index: 0;
  pointer-events: none;
}

/* On narrow viewports the headline + search panel stack vertically, making
   the hero quite tall. We DON'T want the skyline photo bleeding behind the
   search panel — it should only live in the top band behind the headline.
   Two changes on mobile:
     1. Cap the image + overlay height so they only cover the headline band
        (below that, hero-section's dark bg takes over for the search panel)
     2. Swap to a mobile-tailored skyline image — narrower crop, brighter,
        smaller file — generated by temp/prep_hero_skyline.py
   This block MUST come AFTER the base .hero-section::after rule above, so
   its `background:` override wins the cascade on mobile. */
@media (max-width: 991.98px) {
  .hero-section::before {
    bottom: auto;
    height: clamp(220px, 58vw, 340px);
    background-image: url('/images/brand/hero/night-skyline-mobile.jpg');
  }
  /* Kelly's mobile mockup shows a strong left→right gradient: solid near-
     black on the left (so the hero headline pops) fading to transparent on
     the right (where the skyline reads cleanly). Override the default
     bottom-fade overlay on mobile with this left-dark gradient. */
  .hero-section::after {
    bottom: auto;
    height: clamp(220px, 58vw, 340px);
    background:
      linear-gradient(90deg,
        var(--cs-dark-bg, #0f0f1a) 0%,
        var(--cs-dark-bg, #0f0f1a) 38%,
        color-mix(in srgb, var(--cs-dark-bg, #0f0f1a) 75%, transparent) 58%,
        color-mix(in srgb, var(--cs-dark-bg, #0f0f1a) 25%, transparent) 82%,
        transparent 100%),
      linear-gradient(180deg,
        transparent 0%,
        transparent 80%,
        color-mix(in srgb, var(--cs-dark-bg, #0f0f1a) 70%, transparent) 100%);
  }
}

.hero-content {
  position: relative;
  z-index: 2;
}

/* Mobile logo watermark sits above wallpaper but under content */
.hero-section .logo-watermark {
  z-index: 1;
}

.logo-watermark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  max-width: 400px;
  opacity: 0.08;
  z-index: 0;
  pointer-events: none;
}

.logo-watermark img {
  width: 100%;
  height: auto;
  display: block;
  filter: brightness(0) invert(1);
}

@media (max-width: 767px) {
  .logo-watermark {
    max-width: 300px;
    opacity: 0.06;
  }
}

@media (min-width: 1200px) {
  .logo-watermark {
    display: none;
  }
}

/* ============================================
   SEARCH PANEL (hero-right card)
   ============================================ */

.search-panel {
  background: linear-gradient(180deg, rgba(26, 26, 46, 0.92) 0%, rgba(15, 15, 26, 0.92) 100%);
  border: 1px solid var(--cs-border);
  border-radius: 18px;
  padding: 0.85rem;
  backdrop-filter: blur(14px);
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}

/* Location input row */
.search-field {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--cs-dark-bg);
  border: 1px solid var(--cs-border);
  border-radius: 12px;
  padding: 0.15rem 0.15rem 0.15rem 0.4rem;
  transition: border-color 200ms ease-in-out, box-shadow 200ms ease-in-out;
}

.search-field:focus-within {
  border-color: var(--cs-blue);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cs-blue, #3a86ff) 15%, transparent);
}

.search-gps,
.search-submit {
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
  transition: all 200ms ease-in-out;
}

.search-gps {
  background: transparent;
  color: var(--cs-text-secondary);
  width: 28px;
  height: 28px;
  border-radius: 8px;
}

.search-gps:hover {
  color: var(--cs-blue);
  background: color-mix(in srgb, var(--cs-blue, #3a86ff) 10%, transparent);
}

.search-input {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--cs-text-primary);
  font-size: 0.9rem;
  padding: 0.35rem 0.25rem;
  outline: none;
  min-width: 0;
}

.search-input::placeholder {
  color: var(--cs-text-secondary);
}

.search-submit {
  background: linear-gradient(135deg, var(--cs-blue) 0%, var(--cs-purple) 100%);
  color: #ffffff;
  width: 32px;
  height: 32px;
  border-radius: 10px;
}

.search-submit:hover {
  transform: scale(1.05);
  filter: brightness(1.1);
}

/* Status pill */
.status-pill {
  width: 100%;
  border: none;
  border-radius: 12px;
  padding: 0.6rem 1rem;
  font-size: 0.85rem;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 200ms ease-in-out;
}

.status-pill-info {
  background: color-mix(in srgb, var(--cs-alert-info, var(--cs-blue)) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--cs-alert-info, var(--cs-blue)) 35%, transparent);
  color: var(--cs-alert-info, #93c5fd);
}

.status-pill-info:hover {
  background: color-mix(in srgb, var(--cs-alert-info, var(--cs-blue)) 18%, transparent);
}

.status-pill-searching {
  background: color-mix(in srgb, var(--cs-alert-warning, #fcd34d) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--cs-alert-warning, #fcd34d) 35%, transparent);
  color: var(--cs-alert-warning, #fcd34d);
}

.status-pill-error {
  background: color-mix(in srgb, var(--cs-alert-danger, #ff6b6b) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--cs-alert-danger, #ff6b6b) 40%, transparent);
  color: var(--cs-alert-danger, #fca5a5);
}

/* Search-panel section groups */
.search-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* Search-radius header: single-line "Search Radius: X miles" label,
   left-justified to match the designer mockup. Label + value both render
   in body font at normal weight, white color. */
.search-radius-header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.search-radius-label {
  font-family: var(--cs-font-body);
  font-size: 0.82rem;
  font-weight: 300;
  color: var(--cs-text-primary);
  letter-spacing: 0;
}

.search-radius-value {
  color: var(--cs-text-primary);
  font-weight: 300;
}

/* Range slider */
.slider-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.slider-adj {
  background: var(--cs-dark-bg);
  border: 1px solid var(--cs-border);
  color: var(--cs-text-secondary);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 200ms ease-in-out;
  flex-shrink: 0;
}

.slider-adj:hover {
  color: var(--cs-blue);
  border-color: var(--cs-blue);
}

/* Range slider styled to match designer mock:
   - Thin dashed/dotted track (NOT a thick gradient bar)
   - Solid purple fill from 0% up to the thumb position
   - Small white thumb with subtle shadow
   The fill uses a CSS custom prop --slider-fill that JS sets on input
   (see updateRadius in Home/Index.cshtml). No property = 0% fill. */
.radius-slider {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  height: 18px;
  margin: 0;
  --slider-fill: 0%;
}

.radius-slider::-webkit-slider-runnable-track {
  height: 3px;
  border-radius: 2px;
  background:
    linear-gradient(to right,
      var(--cs-purple, #5a189a) 0 var(--slider-fill),
      transparent var(--slider-fill) 100%),
    repeating-linear-gradient(to right,
      color-mix(in srgb, var(--cs-text-secondary, #a0a0b8) 60%, transparent) 0 3px,
      transparent 3px 8px);
}

.radius-slider::-moz-range-track {
  height: 3px;
  border-radius: 2px;
  background:
    repeating-linear-gradient(to right,
      color-mix(in srgb, var(--cs-text-secondary, #a0a0b8) 60%, transparent) 0 3px,
      transparent 3px 8px);
}
.radius-slider::-moz-range-progress {
  height: 3px;
  border-radius: 2px;
  background: var(--cs-purple, #5a189a);
}

.radius-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #ffffff;
  margin-top: -4.5px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25), 0 1px 3px rgba(0, 0, 0, 0.35);
  cursor: pointer;
  transition: transform 150ms ease-in-out;
}

.radius-slider::-webkit-slider-thumb:hover {
  transform: scale(1.2);
}

.radius-slider::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #ffffff;
  border: none;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25), 0 1px 3px rgba(0, 0, 0, 0.35);
  cursor: pointer;
}

/* ===========================================================
   FILTER GROUP — "Filter by:" caption + "Show All" switch,
   plus three clickable icon tiles (Restaurants / Bars / Music).
   Replaces the old pill toggles. All colors resolve from --cs-*
   theme vars for /Admin/Theme designer-tool compatibility.
   =========================================================== */

.filter-group {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  background: color-mix(in srgb, var(--cs-dark-bg, #0f0f1a) 50%, transparent);
  border: 1px solid var(--cs-border);
  border-radius: 14px;
  padding: 0.85rem 1rem;
}

.filter-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.filter-caption {
  font-family: var(--cs-font-body);
  font-size: 0.78rem;
  font-weight: 400;
  color: var(--cs-text-secondary);
}

/* "Show All" toggle: native checkbox visually hidden, animated track+thumb */
.show-all-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  user-select: none;
  margin: 0;
}

.show-all-toggle input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.show-all-switch {
  position: relative;
  display: inline-block;
  width: 34px;
  height: 18px;
  background: color-mix(in srgb, var(--cs-text-secondary, #b5b5c3) 25%, transparent);
  border-radius: 999px;
  transition: background 200ms ease-in-out;
  flex-shrink: 0;
}

.show-all-switch::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  background: #ffffff;
  border-radius: 50%;
  transition: transform 200ms ease-in-out;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.show-all-toggle input:checked + .show-all-switch {
  background: linear-gradient(135deg, var(--cs-blue) 0%, var(--cs-purple) 100%);
}

.show-all-toggle input:checked + .show-all-switch::after {
  transform: translateX(16px);
}

.show-all-text {
  font-family: var(--cs-font-body);
  font-size: 0.78rem;
  font-weight: 400;
  color: var(--cs-text-secondary);
}

/* Filter tiles — three clickable categories, clustered & centered
   (not stretched full-width). Matches designer's mock where the icons
   sit together as a group near the middle of the panel. */
.filter-tiles {
  display: flex;
  justify-content: center;
  gap: 2.75rem;
  align-items: start;
}

.filter-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  cursor: pointer;
  user-select: none;
  margin: 0;
}

.filter-tile input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* Circular artwork container — holds off/on icons (stacked) and the checkmark badge */
.filter-tile-art {
  position: relative;
  width: 44px;
  max-width: 100%;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 200ms ease-in-out;
}

.filter-tile:hover .filter-tile-art {
  transform: scale(1.05);
}

.filter-tile-icon {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: opacity 150ms ease-in-out;
}

.filter-tile-icon-on  { opacity: 0; }
.filter-tile-icon-off { opacity: 1; }

.filter-tile:has(input:checked) .filter-tile-icon-on  { opacity: 1; }
.filter-tile:has(input:checked) .filter-tile-icon-off { opacity: 0; }

/* Checkmark badge — bottom-right of the tile, only visible when checked */
.filter-tile-check {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 30%;
  height: 30%;
  opacity: 0;
  transition: opacity 150ms ease-in-out;
  pointer-events: none;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
}

.filter-tile:has(input:checked) .filter-tile-check { opacity: 1; }

.filter-tile-label {
  font-family: var(--cs-font-heading);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--cs-text-primary);
  text-align: center;
}

.filter-tile:has(input:checked) .filter-tile-label {
  color: var(--cs-purple-light, #b38cff);
}

.filter-tile:focus-within .filter-tile-art {
  outline: 2px solid color-mix(in srgb, var(--cs-purple, #5a189a) 60%, transparent);
  outline-offset: 3px;
  border-radius: 50%;
}

/* Sort dropdown — lives inside the FEATURED heading row, right-justified
   via margin-left:auto so it stays pinned to the right even when the
   "FEATURED NEAR YOU" label is hidden for an empty featured row.
   All visual tokens resolve from --cs-* theme vars for designer-tool
   compatibility (changes via /Admin/Theme propagate here). */
.sort-dropdown-wrapper {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-left: auto;
}

.sort-dropdown-label {
  font-family: var(--cs-font-body);
  font-size: 0.8rem;
  font-weight: 300;
  letter-spacing: 0;
  text-transform: none;
  color: var(--cs-text-secondary);
  margin: 0;
}

.sort-dropdown {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: transparent url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23b5b5c3'><path d='M8 11L3 6h10z'/></svg>") no-repeat right 0.35rem center;
  background-size: 11px;
  border: none;
  color: var(--cs-text-primary);
  font-family: var(--cs-font-body);
  font-size: 0.82rem;
  font-weight: 300;
  padding: 0.2rem 1.4rem 0.2rem 0.15rem;
  cursor: pointer;
  letter-spacing: normal;
  text-transform: none;
  line-height: 1.2;
}

.sort-dropdown:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--cs-purple, #5a189a) 60%, transparent);
  outline-offset: 2px;
  border-radius: 4px;
}

.sort-dropdown option {
  background: var(--cs-dark-bg, #0f0f1a);
  color: var(--cs-text-primary);
}

/* Hero lead headline — multi-line, responsive size. Experiment with
   Georgia (screen-optimized serif, high x-height, sturdy serifs) per
   Brian's direction. If this doesn't feel right we can swap the family
   without changing structure. Line breaks are hard baked via <br>:
        See the
        Current Situation
        LIVE Before You Go
   "Current Situation" and "LIVE" get the accent-yellow treatment. */
.hero-lead {
  font-family: Georgia, 'Times New Roman', 'Playfair Display', serif;
  /* Smaller on phones (min 1.5rem ≈ 24px), scales up through tablet,
     caps at 3.75rem (60px) on wide desktop. */
  font-size: clamp(1.5rem, 4.5vw, 3.75rem);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.005em;
  color: var(--cs-hero-lead-color, #ffffff);
  /* Tight text-shadow (was 14px blur at 65% which created a wide dark halo
     that dimmed the skyline near the text). Now just a crisp 1px outline-
     style shadow for legibility — the skyline stays visible behind text. */
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
  margin: 0;
}

.hero-lead-brand {
  font-weight: 700;
}

.hero-lead-brand {
  color: var(--cs-hero-lead-brand-color, #9f66ff);
}

/* ============================================
   RESULTS SECTION (full-width below hero)
   ============================================ */

.results-section {
  padding: 0.5rem 0 4rem;
  background:
    radial-gradient(ellipse at top, color-mix(in srgb, var(--cs-purple, #5a189a) 8%, transparent) 0%, transparent 60%),
    var(--cs-dark-bg);
  border-top: 1px solid var(--cs-border);
}

.results-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
}

.results-heading {
  font-family: var(--cs-font-heading);
  font-weight: 700;
  font-size: 1.75rem;
  color: var(--cs-text-primary);
  margin: 0;
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
}

.results-heading i {
  color: var(--cs-blue);
  font-size: 1.3rem;
}

/* Top Pick */
.top-pick-meta {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.top-pick-badge {
  font-family: var(--cs-font-heading);
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  color: #ffffff;
  background: linear-gradient(135deg, #ec4899 0%, var(--cs-purple) 100%);
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  box-shadow: 0 4px 16px rgba(236, 72, 153, 0.3);
}

.top-pick-caption {
  font-size: 0.85rem;
  color: var(--cs-text-secondary);
  font-weight: 500;
}

.top-pick-card {
  position: relative;
  display: flex;
  justify-content: flex-start;
  align-items: stretch;
  gap: 0;
  background: linear-gradient(180deg, rgba(26, 26, 46, 0.8) 0%, rgba(15, 15, 26, 0.6) 100%);
  border: 1px solid color-mix(in srgb, var(--cs-purple, #5a189a) 35%, transparent);
  border-radius: 20px;
  padding: 0;
  overflow: hidden;
  transition: all 250ms ease-in-out;
  cursor: pointer;
  contain: layout paint;
  margin-bottom: 2rem;
  min-height: 160px;
}

.top-pick-card:hover {
  border-color: color-mix(in srgb, var(--cs-blue, #3a86ff) 50%, transparent);
  transform: translateY(-2px);
  box-shadow: 0 16px 40px color-mix(in srgb, var(--cs-blue, #3a86ff) 12%, transparent);
}

.top-pick-tile {
  position: relative;
  flex: 0 0 220px;
  max-width: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background-size: cover;
  background-position: center;
}

.top-pick-tile .grid-card-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 400ms ease-in-out;
}

.top-pick-card:hover .top-pick-tile .grid-card-photo {
  transform: scale(1.04);
}

.top-pick-tile.has-photo::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 60%, rgba(15, 15, 26, 0.55) 100%);
  pointer-events: none;
  z-index: 2;
}

.top-pick-tile.has-fallback::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 16px,
    rgba(255, 255, 255, 0.04) 16px,
    rgba(255, 255, 255, 0.04) 32px
  );
  pointer-events: none;
}

.top-pick-tile .grid-card-fallback-icon {
  font-size: 5rem;
}

.top-pick-body {
  flex: 1;
  min-width: 0;
  padding: 1rem 1.25rem;
}

/* Mobile keeps the desktop row layout but shrinks the thumbnail and
   tightens text sizing so 3–4 cards are visible per viewport (matches
   designer's phone mock). Row height is driven by body content, not by
   the thumbnail — no forced min-height on the tile, so the card collapses
   to content height with no empty space below the action icons. */
@media (max-width: 767px) {
  .top-pick-card {
    flex-direction: row;
    min-height: 0;
    align-items: stretch;
    margin-bottom: 0.65rem;
    border-radius: 14px;
  }
  .top-pick-tile {
    flex: 0 0 86px;
    max-width: 86px;
    width: 86px;
    min-height: 0;
  }
  .top-pick-body {
    padding: 0.4rem 0.4rem 0.35rem 0.65rem;
  }
  .top-pick-title {
    font-size: 0.95rem;
    margin-bottom: 0.1rem;
  }
  .top-pick-address {
    font-size: 0.7rem;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    margin-top: 0;
  }
  .top-pick-rating {
    font-size: 0.72rem;
    margin-bottom: 0.15rem;
    gap: 0.3rem;
  }
  .top-pick-rating .stars {
    font-size: 0.75rem;
  }
  .card-actions {
    gap: 0.2rem;
    margin-top: 0.2rem;
  }
  .card-actions .action-btn,
  .card-actions .action-btn-live,
  .card-actions .action-btn-wait {
    padding: 0.15rem 0.3rem;
    font-size: 0.78rem;
  }
  .card-actions .action-btn i,
  .card-actions .action-btn-live i,
  .card-actions .action-btn-wait i {
    font-size: 0.95rem;
  }
  .card-actions .action-btn .action-icon {
    width: 15px;
    height: 15px;
  }
}

.top-pick-title {
  font-family: var(--cs-font-heading);
  font-weight: 500;
  font-size: 1.1rem;
  color: var(--cs-text-primary);
  margin: 0 0 0.5rem 0;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.top-pick-rating,
.grid-card-rating {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
}

.top-pick-rating .stars,
.grid-card-rating .stars {
  color: var(--cs-yellow);
  font-size: 0.95rem;
}

.top-pick-rating .rating-num,
.grid-card-rating .rating-num {
  color: var(--cs-text-primary);
  font-weight: 600;
}

.top-pick-rating .review-count,
.grid-card-rating .review-count {
  color: var(--cs-text-secondary);
  font-size: 0.8rem;
}

.top-pick-address {
  font-size: 0.85rem;
  color: var(--cs-text-secondary);
  margin: 0;
}

/* Other Venues heading */
.other-venues-heading,
.featured-heading {
  margin-bottom: 0.85rem;
}

.featured-heading span {
  font-family: var(--cs-font-body);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--cs-text-secondary);
}

/* "OTHER VENUES IN AREA" heading: more prominent than the featured-row label
   so the section break is visually obvious as users scroll past featured. */
.other-venues-heading {
  margin-top: 1.75rem;
  padding-top: 1.25rem;
  border-top: 4px solid #ffffff;
}

.other-venues-heading span {
  font-family: var(--cs-font-heading, var(--cs-font-body));
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--cs-text-primary, #ffffff);
}

/* Featured heading is a one-row layout: label on the left, results counter
   right-justified on the same line. */
.featured-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

/* Venue grid */
.venue-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (min-width: 576px) {
  .venue-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 992px) {
  .venue-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
  }
}

/* Grid card */
.grid-card {
  position: relative;
  display: flex;
  background: var(--cs-card-bg);
  border: 1px solid var(--cs-border);
  border-radius: 16px;
  overflow: hidden;
  transition: all 200ms ease-in-out;
  cursor: pointer;
  min-height: 160px;
  contain: layout paint;
}

.grid-card:hover {
  border-color: color-mix(in srgb, var(--cs-blue, #3a86ff) 45%, transparent);
  transform: translateY(-3px);
  box-shadow: 0 12px 28px color-mix(in srgb, var(--cs-blue, #3a86ff) 12%, transparent);
}

.grid-card-tile {
  flex: 0 0 42%;
  max-width: 42%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
  background-size: cover;
  background-position: center;
}

.grid-card-tile::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 12px,
    rgba(255, 255, 255, 0.04) 12px,
    rgba(255, 255, 255, 0.04) 24px
  );
  pointer-events: none;
}

.grid-card-initials {
  font-family: var(--cs-font-heading);
  font-weight: 700;
  font-size: 3rem;
  color: rgba(255, 255, 255, 0.85);
  letter-spacing: -0.02em;
  z-index: 1;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.grid-card-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  transition: transform 400ms ease-in-out;
}

.grid-card:hover .grid-card-photo {
  transform: scale(1.05);
}

/* Photo tiles don't need the diagonal-stripe overlay */
.grid-card-tile.has-photo::after {
  content: none;
}

/* Subtle dark gradient at the bottom of photo tiles for text legibility */
.grid-card-tile.has-photo::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(0, 0, 0, 0.35) 100%);
  pointer-events: none;
  z-index: 2;
}

/* Fallback icon (no photo available) */
.grid-card-fallback-icon {
  position: relative;
  z-index: 1;
  font-size: 3.5rem;
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.2));
}

/* Graceful error: if photo 404s, JS sets data-fallback="1"; show a generic icon */
.grid-card-tile[data-fallback="1"]::before {
  content: '\F470';
  font-family: 'bootstrap-icons';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3.5rem;
  color: rgba(255, 255, 255, 0.7);
  z-index: 1;
}

.grid-card-body {
  flex: 1;
  min-width: 0;
  padding: 0.9rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

/* Text-only Other Venues cards: no left tile, no photo, no graphic. Subscriber
   (Featured) cards keep their photo so they stand out visually against these
   leaner non-customer listings. */
.grid-card.grid-card-text-only {
  min-height: auto;
}

.grid-card.grid-card-text-only .grid-card-body {
  padding: 1rem 1.25rem;
}

.grid-card-title {
  font-family: var(--cs-font-heading);
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--cs-text-primary);
  margin: 0 0 0.2rem 0;
  line-height: 1.25;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  padding-right: 3rem;
}

.grid-card-address {
  font-size: 0.75rem;
  color: var(--cs-text-secondary);
  margin: 0.25rem 0 0 0;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

/* Distance badge — plain text, no box. Displays as "4.9 mi" inline in the
   top-right of the card (grid cards) or as a flex child of the top-pick
   right column (featured rows). Color is accent purple to match the mock. */
.distance-badge {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  display: inline-flex;
  flex-direction: row;
  align-items: baseline;
  gap: 0.2rem;
  line-height: 1;
  color: var(--cs-distance-text, #9f66ff);
  backdrop-filter: none;
}

.distance-badge .dist-num {
  font-family: var(--cs-font-heading);
  font-weight: 700;
  font-size: 1rem;
  color: var(--cs-distance-text, #9f66ff);
}

.distance-badge .dist-unit {
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--cs-distance-text, #9f66ff);
  margin-top: 0;
}

/* Right-side column on featured rows: stacks ⭐ FEATURED pill above the
   distance badge. Replaces the old strip-above-the-card featured banner. */
.top-pick-right-col {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0.6rem;
  padding: 1rem;
  flex: 0 0 auto;
}

.featured-badge-inline {
  font-family: var(--cs-font-heading);
  font-weight: 700;
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  color: var(--cs-yellow, #ffb703);
  background: color-mix(in srgb, var(--cs-yellow, #ffb703) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--cs-yellow, #ffb703) 55%, transparent);
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  white-space: nowrap;
}

.featured-badge-inline i {
  font-size: 0.8em;
}

/* LIVE badge overlay on the thumbnail (top-left). Asset is already a
   complete red rounded pill, so we just position + shadow it. Size scales
   with thumbnail: default 22px fits the 220px desktop thumbnail; on mobile
   (where thumbnail shrinks to 86px) we shrink the badge proportionally. */
.live-overlay {
  position: absolute;
  top: 0.35rem;
  left: 0.35rem;
  height: 22px;
  width: auto;
  z-index: 3;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.5));
  pointer-events: none;
}

@media (max-width: 767px) {
  .live-overlay {
    top: 0.2rem;
    left: 0.2rem;
    height: 13px;
  }
}

.top-pick-card .distance-badge {
  position: static;
  padding: 0;
  background: transparent;
}

.top-pick-card .distance-badge .dist-num {
  font-size: 1.3rem;
}

.top-pick-card .distance-badge .dist-unit {
  font-size: 1rem;
}

/* Live video dot */
.live-video-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cs-live-dot, #ef4444);
  display: inline-block;
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.8);
  flex-shrink: 0;
}

/* Card action buttons */
.card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: 0.5rem;
}

/* =============================================================
   Shared action-chip/pill: home-page grid card AND venue-detail header.
   Single set of rules so the "1 camera" pill on a grid card and the
   "1 camera" button on the venue detail page look identical. Variants
   are keyed by two different class systems (.action-btn-* on the home
   page, Bootstrap .btn-outline-* on the venue header) but resolve to
   the same visual.
   ============================================================= */

.action-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 0.95rem;
  font-size: 0.95rem;
  font-weight: 700;
  border-radius: var(--cs-radius-pill, 8px);
  border: 1px solid transparent;
  line-height: 1.1;
  cursor: pointer;
  text-decoration: none;
  transition: all 200ms ease-in-out;
}

.action-btn i {
  font-size: 1.05rem;
}

/* Default pill color (.action-btn solo / .btn-outline-primary / .btn-primary).
   Borders intentionally off per designer: icons only, no outline ring. */
.action-btn {
  background: color-mix(in srgb, var(--cs-blue, #3a86ff) 22%, transparent);
  color: var(--cs-blue);
  border-color: transparent;
}

/* Live / Camera variant (border-less to match) */
.action-btn-live {
  background: color-mix(in srgb, var(--cs-alert-danger, #ff6b6b) 22%, transparent);
  color: var(--cs-alert-danger, #fca5a5);
  border-color: transparent;
}

/* Enhanced hover — lifts + brightens + adds colored glow
   so the pointer feedback is clearly visible. */
.action-btn:hover {
  transform: translateY(-2px);
  filter: brightness(1.25);
  box-shadow: 0 6px 14px color-mix(in srgb, currentColor 35%, transparent);
}

.action-btn .action-icon {
  width: 18px;
  height: 18px;
  object-fit: contain;
  display: block;
  flex-shrink: 0;
}

/* LIVE.png is a pill (wider than tall) */
.action-btn .action-icon-live {
  width: 34px;
  height: 16px;
}

/* Wait-time variant (shared with Bootstrap btn-warning on venue detail) */
.action-btn-wait {
  background: color-mix(in srgb, var(--cs-alert-warning, var(--cs-yellow, #ffb703)) 22%, transparent);
  color: var(--cs-alert-warning, var(--cs-yellow));
  border-color: color-mix(in srgb, var(--cs-alert-warning, var(--cs-yellow, #ffb703)) 55%, transparent);
}

/* Designer update: on the landing-page venue cards, action icons render
   WITHOUT pill backgrounds — just icons with hover feedback. Scoped to
   .card-actions so venue-detail page buttons (which share the base
   .action-btn class) keep their full pill treatment. Default color is
   purple to match the designer mock (camera keeps red via .action-btn-live,
   wait-time keeps yellow via .action-btn-wait). */
.card-actions .action-btn,
.card-actions .action-btn-live,
.card-actions .action-btn-wait {
  background: transparent;
  border-color: transparent;
  padding: 0.35rem 0.45rem;
}

.card-actions .action-btn {
  color: var(--cs-card-icon-color, #9f66ff);
}

.card-actions .action-btn:hover,
.card-actions .action-btn-live:hover,
.card-actions .action-btn-wait:hover {
  background: color-mix(in srgb, currentColor 16%, transparent);
  box-shadow: none;
  filter: none;
  transform: translateY(-1px);
}

/* Mobile: FEATURED pill + distance badge stay in their natural flex spot
   (right side of the row). Tighter padding/gap to save horizontal space
   on small screens. */
@media (max-width: 767px) {
  .top-pick-right-col {
    padding: 0.45rem 0.55rem 0.45rem 0.15rem;
    gap: 0.3rem;
    align-items: flex-end;
  }
  .featured-badge-inline {
    font-size: 0.55rem;
    padding: 0.15rem 0.4rem;
    letter-spacing: 0.08em;
  }
  .top-pick-card .distance-badge .dist-num {
    font-size: 0.95rem;
  }
  .top-pick-card .distance-badge .dist-unit {
    font-size: 0.8rem;
  }
}

/* Non-featured ("Other venues") grid cards mirror the featured-card mobile
   layout: small 86px thumbnail on the left, body on the right. Brian's
   direction — photo sizes should be consistent across featured and
   non-featured rows. Replaces the older 35%/120px mobile override. */
@media (max-width: 767px) {
  .grid-card {
    flex-direction: row;
    min-height: 0;
    align-items: stretch;
    margin-bottom: 0.65rem;
    border-radius: 14px;
  }
  .grid-card-tile {
    flex: 0 0 86px;
    max-width: 86px;
    width: 86px;
    min-height: 0;
  }
  .grid-card-body {
    padding: 0.4rem 0.4rem 0.35rem 0.65rem;
  }
  .grid-card-title {
    font-size: 0.95rem;
    padding-right: 2.75rem;
  }
  .grid-card-address {
    font-size: 0.7rem;
  }
  .grid-card-rating {
    font-size: 0.72rem;
    gap: 0.3rem;
  }
  .grid-card-initials {
    font-size: 1.5rem;
  }
  .results-heading {
    font-size: 1.25rem;
  }
}

.features-section {
  background: var(--cs-dark-bg);
  color: var(--cs-text-primary);
  padding: 2rem 0;
  border-top: 1px solid var(--cs-border);
  border-bottom: 1px solid var(--cs-border);
}

.features-section h2 {
  color: var(--cs-text-primary);
  font-size: 2.5rem;
  margin-bottom: 1.5rem;
}

.features-section .lead {
  color: var(--cs-text-secondary);
  font-size: 1.1rem;
}

.feature-card {
  padding: 1.5rem 1rem;
  background: var(--cs-card-bg);
  border: 1px solid var(--cs-border);
  border-radius: 16px;
  text-align: center;
  transition: all 200ms ease-in-out;
  height: 100%;
  contain: layout paint;
}

.feature-card:hover {
  border-color: var(--cs-blue);
  transform: translateY(-4px);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--cs-blue, #3a86ff) 10%, transparent);
}

.feature-card h4 {
  color: var(--cs-text-primary);
  font-family: var(--cs-font-heading);
  font-size: 1.25rem;
  margin-bottom: 1rem;
  font-weight: 600;
}

.feature-card p {
  color: var(--cs-text-secondary);
  font-size: 0.95rem;
  line-height: 1.6;
}

.feature-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--cs-blue, #3a86ff) 10%, transparent), color-mix(in srgb, var(--cs-purple, #5a189a) 10%, transparent));
  border: 1px solid var(--cs-border);
  border-radius: 16px;
  margin-bottom: 1.5rem;
  transition: all 200ms ease-in-out;
}

.feature-card:hover .feature-icon {
  background: linear-gradient(135deg, color-mix(in srgb, var(--cs-blue, #3a86ff) 15%, transparent), color-mix(in srgb, var(--cs-purple, #5a189a) 15%, transparent));
  border-color: var(--cs-blue);
}

.feature-icon svg,
.feature-icon i {
  width: 40px;
  height: 40px;
  color: var(--cs-blue);
  transition: color 200ms ease-in-out;
}

.feature-card:hover .feature-icon svg,
.feature-card:hover .feature-icon i {
  color: var(--cs-purple);
}

.cta-section {
  background: var(--cs-dark-bg);
  color: var(--cs-text-primary);
  padding: 2rem 0;
  text-align: center;
  border-top: 1px solid var(--cs-border);
  border-bottom: 1px solid var(--cs-border);
}

.cta-section h2 {
  color: var(--cs-text-primary);
  font-size: 2rem;
  margin-bottom: 1rem;
  font-weight: 600;
}

.cta-section .lead {
  color: var(--cs-text-secondary);
  font-size: 1.1rem;
  margin-bottom: 2rem;
}

/* ===========================================================
   Business-owner sticky CTA banner.
   Fixed to the viewport bottom on ALL screen sizes per designer
   direction — "that entire panel should be visible all the time"
   (PT-00142). Content above scrolls; body padding-bottom below
   reserves space so the last venue card isn't hidden behind it.
   =========================================================== */
.business-cta-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1040; /* below Bootstrap modals (1050) but above most content */
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 1rem;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--cs-dark-bg, #0f0f1a) 95%, transparent) 0%,
    var(--cs-dark-bg, #0f0f1a) 100%);
  border-top: 1px solid color-mix(in srgb, var(--cs-purple, #5a189a) 40%, transparent);
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(10px);
}

/* On wider screens, center the banner content to the container width so it
   doesn't sprawl edge-to-edge while the backdrop still spans full width. */
@media (min-width: 768px) {
  .business-cta-banner {
    padding: 0.9rem calc(max(1rem, (100vw - 1140px) / 2));
    gap: 1.5rem;
  }
}

.business-cta-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--cs-blue) 0%, var(--cs-purple) 100%);
  color: #ffffff;
  font-size: 1.1rem;
}

.business-cta-text {
  flex: 1;
  min-width: 0;
  line-height: 1.25;
}

.business-cta-title {
  font-family: var(--cs-font-body);
  font-size: 0.88rem;
  font-weight: 400;
  color: var(--cs-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.business-cta-subtitle {
  font-family: var(--cs-font-body);
  font-size: 0.72rem;
  font-weight: 400;
  color: var(--cs-text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.business-cta-button {
  flex-shrink: 0;
  padding: 0.5rem 0.95rem;
  background: var(--cs-button-primary-bg, #362D87);
  color: var(--cs-button-primary-text, #ffffff);
  border-radius: 10px;
  font-family: var(--cs-font-heading);
  font-weight: 700;
  font-size: 0.85rem;
  text-decoration: none;
  transition: background 150ms ease-in-out, transform 150ms ease-in-out;
  white-space: nowrap;
}

.business-cta-button:hover {
  background: var(--cs-button-hover-bg, #4B3FB0);
  transform: translateY(-1px);
  color: #ffffff;
}

/* Reserve space at the bottom of the page so content doesn't hide behind the
   always-visible fixed banner. Banner is taller on desktop (more breathing
   room) so we size the padding accordingly. */
body {
  padding-bottom: 72px;
}
@media (min-width: 768px) {
  body {
    padding-bottom: 80px;
  }
}

.venue-card {
  background: var(--cs-card-bg);
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-radius-card, 12px);
  padding: 1rem;
  transition: all 200ms ease-in-out;
  contain: layout paint;
}

.venue-card:hover {
  transform: translateY(-4px);
  border-color: var(--cs-blue);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--cs-blue, #3a86ff) 15%, transparent);
}

.venue-card .card-title {
  color: var(--cs-heading-color, var(--cs-text-primary));
  font-weight: 600;
}

.venue-card .card-text {
  color: var(--cs-text-secondary);
}

/* ============================================
   8. RESPONSIVE DESIGN (MOBILE-FIRST)
   Base styles above target mobile.
   Progressive enhancement for larger screens below.
   ============================================ */

/* Tablet (>=768px) */
@media (min-width: 768px) {
  html, body {
    font-size: 1rem;
  }

  h1 { font-size: 2.5rem; }
  h2 { font-size: 1.85rem; }

  .features-section {
    padding: 3rem 0;
  }

  .feature-card {
    padding: 1.75rem 1.25rem;
  }

  .feature-icon {
    width: 90px;
    height: 90px;
  }

  .feature-icon svg,
  .feature-icon i {
    width: 44px;
    height: 44px;
  }

  .cta-section {
    padding: 3rem 0;
  }
}

/* Desktop (>=1200px) */
@media (min-width: 1200px) {
  h1 { font-size: 3rem; }
  h2 { font-size: 2rem; }

  .features-section {
    padding: 4rem 0;
  }

  .feature-card {
    padding: 2rem 1.5rem;
  }

  .feature-icon {
    width: 100px;
    height: 100px;
  }

  .feature-icon svg,
  .feature-icon i {
    width: 48px;
    height: 48px;
  }

  .search-panel {
    margin-left: 1rem;
  }
}

/* ============================================
   9. UTILITIES
   ============================================ */

.text-primary {
  color: var(--cs-blue) !important;
}

.text-info {
  color: var(--cs-alert-info, var(--cs-blue)) !important;
}

.text-success {
  color: var(--cs-alert-success, #86efac) !important;
}

.text-danger {
  color: var(--cs-alert-danger, #ff6b6b) !important;
}

.text-warning {
  color: var(--cs-alert-warning, var(--cs-yellow)) !important;
}

.text-primary-purple {
  color: var(--cs-purple) !important;
}

.bg-dark {
  background-color: var(--cs-dark-bg) !important;
}

.bg-dark-card {
  background-color: var(--cs-card-bg) !important;
}

/* Bootstrap state-color utility overrides so the Theme Editor's
   --cs-alert-* variables reach .bg-*, .border-* surfaces. */
.bg-success {
  background-color: var(--cs-alert-success, #86efac) !important;
  color: var(--cs-dark-bg) !important;
}

.bg-danger {
  background-color: var(--cs-alert-danger, #ff6b6b) !important;
  color: #ffffff !important;
}

.bg-warning {
  background-color: var(--cs-alert-warning, var(--cs-yellow)) !important;
  color: var(--cs-dark-bg) !important;
}

.bg-info {
  background-color: var(--cs-alert-info, var(--cs-blue)) !important;
  color: var(--cs-dark-bg) !important;
}

.border-success {
  border-color: var(--cs-alert-success, #86efac) !important;
}

.border-danger {
  border-color: var(--cs-alert-danger, #ff6b6b) !important;
}

.border-warning {
  border-color: var(--cs-alert-warning, var(--cs-yellow)) !important;
}

.border-info {
  border-color: var(--cs-alert-info, var(--cs-blue)) !important;
}

.border-primary {
  border-color: var(--cs-blue) !important;
}

.border-secondary {
  border-color: var(--cs-border) !important;
}

.border-dark-border {
  border-color: var(--cs-border) !important;
}

/* Text utility overrides — so Bootstrap's hardcoded light-theme
   colors don't bleed through on a themed site. */
.text-light {
  color: var(--cs-light, #e5e7eb) !important;
}

.text-white {
  color: #ffffff !important;
}

.text-black {
  color: #000000 !important;
}

.text-dark {
  color: var(--cs-text-primary) !important;
}

.text-body {
  color: var(--cs-text-primary) !important;
}

/* Background utility overrides */
.bg-light {
  background-color: var(--cs-card-bg) !important;
  color: var(--cs-text-primary) !important;
}

.bg-white {
  background-color: var(--cs-card-bg) !important;
  color: var(--cs-text-primary) !important;
}

.bg-secondary {
  background-color: var(--cs-card-bg) !important;
  color: var(--cs-text-primary) !important;
}

.bg-body, .bg-body-tertiary {
  background-color: var(--cs-dark-bg) !important;
  color: var(--cs-text-primary) !important;
}

/* List group (Bootstrap defaults white bg + dark text) */
.list-group-item {
  background-color: var(--cs-card-bg) !important;
  border-color: var(--cs-border) !important;
  color: var(--cs-text-primary) !important;
}

.list-group-item-action:hover,
.list-group-item-action:focus {
  background-color: rgba(58, 134, 255, 0.08) !important;
  color: var(--cs-text-primary) !important;
}

/* Accordion (used in theme editor AND anywhere collapsing panels appear) */
.accordion, .accordion-item {
  background-color: var(--cs-card-bg) !important;
  color: var(--cs-text-primary) !important;
  border-color: var(--cs-border) !important;
}

.accordion-button {
  background-color: var(--cs-card-bg) !important;
  color: var(--cs-text-primary) !important;
}

.accordion-button:not(.collapsed) {
  background-color: rgba(58, 134, 255, 0.12) !important;
  color: var(--cs-blue) !important;
}

/* Button variants Bootstrap doesn't give us free themed versions of */
.btn-light {
  background-color: var(--cs-card-bg) !important;
  border-color: var(--cs-border) !important;
  color: var(--cs-text-primary) !important;
}

.btn-light:hover, .btn-light:focus {
  background-color: var(--cs-dark-bg) !important;
  border-color: var(--cs-blue) !important;
  color: var(--cs-blue) !important;
}

.btn-secondary {
  background-color: var(--cs-card-bg) !important;
  border-color: var(--cs-border) !important;
  color: var(--cs-text-primary) !important;
}

.btn-secondary:hover, .btn-secondary:focus {
  background-color: var(--cs-border) !important;
  border-color: var(--cs-blue) !important;
  color: var(--cs-text-primary) !important;
}

.shadow-sm {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

.shadow {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
}

html {
  scroll-behavior: smooth;
}

/* ============================================
   10. ACCESSIBILITY
   ============================================ */

:focus-visible {
  outline: 2px solid var(--cs-input-focus-border, var(--cs-blue));
  outline-offset: 2px;
}

@media (prefers-contrast: more) {
  :root {
    --cs-text-secondary: #7a7a8f;
  }

  .card {
    border-width: 2px;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================
   11. AUTOCOMPLETE DROPDOWN
   ============================================ */

.autocomplete-dropdown {
  background-color: var(--cs-card-bg) !important;
  border: 1px solid var(--cs-border) !important;
  color: var(--cs-text-primary);
}

.autocomplete-item {
  color: var(--cs-text-primary);
  border-bottom: 1px solid var(--cs-border) !important;
  transition: background-color 150ms ease-in-out, color 150ms ease-in-out;
}

.autocomplete-item:last-child {
  border-bottom: none !important;
}

.autocomplete-item-hover {
  background-color: rgba(58, 134, 255, 0.08) !important;
  color: var(--cs-text-primary) !important;
}

.autocomplete-item-active {
  background-color: var(--cs-blue) !important;
  color: #ffffff !important;
}

.autocomplete-item-active .fw-semibold {
  color: #ffffff !important;
}

/* ============================================
   12. SECTION DIVIDER (Paid vs Other Venues)
   ============================================ */

.section-divider {
  border-color: var(--cs-border);
  opacity: 0.6;
}

.section-divider-label {
  color: var(--cs-text-secondary);
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-weight: 500;
}

/* ============================================
   13. HERO HEADLINE
   ============================================ */

.hero-headline {
  font-family: var(--cs-font-heading);
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin-bottom: 0.75rem;
  margin-top: 0;
  color: var(--cs-hero-headline-color, #ffffff);
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.65);
}

.hero-headline .italic {
  font-style: italic;
  background: linear-gradient(135deg, var(--cs-blue) 0%, var(--cs-purple) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  /* Italic letters lean right; extend the clip box so the trailing letter
     (e.g. the top-right of "E" in "LIVE") doesn't get truncated. */
  display: inline-block;
  padding-right: 0.12em;
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.55));
}

.hero-text-block {
  padding-top: 0;
}

.hero-text-block .lead {
  color: var(--cs-hero-tagline-color, var(--cs-yellow));
  font-weight: 500;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.55);
}

@media (min-width: 992px) {
  .hero-text-block {
    padding-top: 0.25rem;
    padding-left: 1rem;
  }
}

@media (max-width: 991.98px) {
  .hero-text-block {
    margin-bottom: 0.5rem;
  }
}

/* ============================================
   14. ICON SIZING
   ============================================ */

.icon-lg {
  width: 48px;
  height: 48px;
}

.icon-md {
  width: 32px;
  height: 32px;
}

.icon-sm {
  width: 20px;
  height: 20px;
}

/* ============================================
   15. MODAL & ALERT OVERRIDES
   ============================================ */

.modal-content {
  background-color: var(--cs-card-bg);
  border: 1px solid var(--cs-border);
  color: var(--cs-text-primary);
  border-radius: var(--cs-modal-radius, 16px);
}

.modal-header {
  background: linear-gradient(135deg, var(--cs-modal-header-bg-start, var(--cs-purple)) 0%, var(--cs-modal-header-bg-end, var(--cs-blue)) 100%);
  color: var(--cs-modal-header-text, #ffffff);
  border-bottom: 1px solid var(--cs-border);
  border-top-left-radius: var(--cs-modal-radius, 16px);
  border-top-right-radius: var(--cs-modal-radius, 16px);
}

.modal-header .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
}

.modal-title {
  color: var(--cs-modal-header-text, #ffffff);
  font-family: var(--cs-font-heading);
}

.modal-body {
  background-color: var(--cs-card-bg);
  color: var(--cs-text-primary);
}

.modal-footer {
  background-color: var(--cs-card-bg);
  border-top: 1px solid var(--cs-border);
  border-bottom-left-radius: var(--cs-modal-radius, 16px);
  border-bottom-right-radius: var(--cs-modal-radius, 16px);
}

.alert {
  border-radius: 12px;
  border-width: 1px;
  backdrop-filter: blur(10px);
}

/* Faded backgrounds/borders are alpha-blends of the state variable via
   color-mix(), so changing --cs-alert-* in the Theme Editor retargets
   every alert surface (not just the text color). */
.alert-success {
  background-color: color-mix(in srgb, var(--cs-alert-success, #86efac) 12%, transparent);
  border-color: color-mix(in srgb, var(--cs-alert-success, #86efac) 40%, transparent);
  color: var(--cs-alert-success, #86efac);
}

.alert-danger {
  background-color: color-mix(in srgb, var(--cs-alert-danger, #ff6b6b) 12%, transparent);
  border-color: color-mix(in srgb, var(--cs-alert-danger, #ff6b6b) 40%, transparent);
  color: var(--cs-alert-danger, #fca5a5);
}

.alert-info {
  background-color: color-mix(in srgb, var(--cs-alert-info, #93c5fd) 12%, transparent);
  border-color: color-mix(in srgb, var(--cs-alert-info, #93c5fd) 40%, transparent);
  color: var(--cs-alert-info, #93c5fd);
}

.alert-warning {
  background-color: color-mix(in srgb, var(--cs-alert-warning, #fcd34d) 12%, transparent);
  border-color: color-mix(in srgb, var(--cs-alert-warning, #fcd34d) 40%, transparent);
  color: var(--cs-alert-warning, #fcd34d);
}

.alert .btn-close {
  filter: invert(1) grayscale(100%) brightness(150%);
}

/* ============================================
   16. DROPDOWN MENU (Nav Help dropdown)
   ============================================ */

.dropdown-menu {
  background-color: var(--cs-card-bg);
  border: 1px solid var(--cs-border);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.dropdown-item {
  color: var(--cs-text-primary);
  transition: background-color 150ms ease-in-out, color 150ms ease-in-out;
}

.dropdown-item:hover,
.dropdown-item:focus {
  background-color: rgba(58, 134, 255, 0.12);
  color: var(--cs-blue);
}

.dropdown-divider {
  border-color: var(--cs-border);
}

/* ============================================
   17. TABLES (Admin / data views)
   ============================================ */

.table {
  color: var(--cs-text-primary);
  border-color: var(--cs-border);
  --bs-table-bg: transparent;
  --bs-table-color: var(--cs-text-primary);
  --bs-table-border-color: var(--cs-border);
  --bs-table-striped-bg: rgba(255, 255, 255, 0.02);
  --bs-table-striped-color: var(--cs-text-primary);
  --bs-table-hover-bg: color-mix(in srgb, var(--cs-blue, #3a86ff) 8%, transparent);
  --bs-table-hover-color: var(--cs-text-primary);
}

.table > :not(caption) > * > * {
  background-color: transparent;
  color: var(--cs-text-primary);
  border-bottom-color: var(--cs-border);
}

/* Bootstrap state-colored table rows (.table-warning / -success / -danger /
   -info / -light). Bootstrap's defaults are pale light-theme tints that
   clash with our dark theme and don't respond to the Theme Editor; override
   them so --cs-alert-* / --cs-card-bg retarget these surfaces. */
.table-warning, .table-warning > th, .table-warning > td {
  --bs-table-bg: color-mix(in srgb, var(--cs-alert-warning, #fcd34d) 15%, transparent);
  --bs-table-color: var(--cs-text-primary);
  background-color: var(--bs-table-bg) !important;
  color: var(--bs-table-color) !important;
  border-color: color-mix(in srgb, var(--cs-alert-warning, #fcd34d) 40%, transparent) !important;
}

.table-success, .table-success > th, .table-success > td {
  --bs-table-bg: color-mix(in srgb, var(--cs-alert-success, #86efac) 15%, transparent);
  --bs-table-color: var(--cs-text-primary);
  background-color: var(--bs-table-bg) !important;
  color: var(--bs-table-color) !important;
  border-color: color-mix(in srgb, var(--cs-alert-success, #86efac) 40%, transparent) !important;
}

.table-danger, .table-danger > th, .table-danger > td {
  --bs-table-bg: color-mix(in srgb, var(--cs-alert-danger, #ff6b6b) 15%, transparent);
  --bs-table-color: var(--cs-text-primary);
  background-color: var(--bs-table-bg) !important;
  color: var(--bs-table-color) !important;
  border-color: color-mix(in srgb, var(--cs-alert-danger, #ff6b6b) 40%, transparent) !important;
}

.table-info, .table-info > th, .table-info > td {
  --bs-table-bg: color-mix(in srgb, var(--cs-alert-info, #93c5fd) 15%, transparent);
  --bs-table-color: var(--cs-text-primary);
  background-color: var(--bs-table-bg) !important;
  color: var(--bs-table-color) !important;
  border-color: color-mix(in srgb, var(--cs-alert-info, #93c5fd) 40%, transparent) !important;
}

.table-light, .table-light > th, .table-light > td {
  --bs-table-bg: var(--cs-card-bg);
  --bs-table-color: var(--cs-text-primary);
  background-color: var(--bs-table-bg) !important;
  color: var(--bs-table-color) !important;
  border-color: var(--cs-border) !important;
}

.table-dark, .table-dark > th, .table-dark > td {
  --bs-table-bg: var(--cs-dark-bg);
  --bs-table-color: var(--cs-text-primary);
  background-color: var(--bs-table-bg) !important;
  color: var(--bs-table-color) !important;
  border-color: var(--cs-border) !important;
}

.table thead th {
  font-family: var(--cs-font-heading);
  font-weight: 600;
  color: var(--cs-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.8rem;
  border-bottom: 2px solid var(--cs-border);
}

/* ============================================
   18. PAGINATION
   ============================================ */

.pagination {
  --bs-pagination-bg: var(--cs-card-bg);
  --bs-pagination-color: var(--cs-text-primary);
  --bs-pagination-border-color: var(--cs-border);
  --bs-pagination-hover-bg: rgba(58, 134, 255, 0.12);
  --bs-pagination-hover-color: var(--cs-blue);
  --bs-pagination-hover-border-color: var(--cs-blue);
  --bs-pagination-focus-bg: rgba(58, 134, 255, 0.12);
  --bs-pagination-focus-color: var(--cs-blue);
  --bs-pagination-active-bg: var(--cs-blue);
  --bs-pagination-active-color: #ffffff;
  --bs-pagination-active-border-color: var(--cs-blue);
  --bs-pagination-disabled-bg: var(--cs-card-bg);
  --bs-pagination-disabled-color: var(--cs-text-secondary);
  --bs-pagination-disabled-border-color: var(--cs-border);
}

/* ============================================
   19. FORM CHECKBOXES / SWITCHES
   ============================================ */

.form-check-input {
  background-color: var(--cs-card-bg);
  border: 1px solid var(--cs-border);
}

.form-check-input:checked {
  background-color: var(--cs-blue);
  border-color: var(--cs-blue);
}

.form-check-input:focus {
  border-color: var(--cs-input-focus-border, var(--cs-blue));
  box-shadow: 0 0 0 0.2rem var(--cs-focus-ring, rgba(58, 134, 255, 0.25));
}

.form-check-label {
  color: var(--cs-text-primary);
}

/* ============================================
   20. SELECTION + ACCESSIBILITY POLISH
   ============================================ */

::selection {
  background-color: var(--cs-blue);
  color: #ffffff;
}

::-moz-selection {
  background-color: var(--cs-blue);
  color: #ffffff;
}

@media (prefers-contrast: more) {
  :root {
    --cs-border: rgba(255, 255, 255, 0.5);
    --cs-text-secondary: #d0d0e0;
  }

  .feature-card,
  .venue-card,
  .search-panel,
  .modal-content,
  .dropdown-menu {
    border-width: 2px;
  }

  .btn {
    border-width: 2px;
  }
}

@media (prefers-reduced-data: reduce) {
  body {
    background-image: none;
  }

  .logo-watermark {
    display: none !important;
  }
}

/* ============================================
   Venue-detail header (Cameras/Photos/Map pages)
   Styled to match the home-page .top-pick-card: dark glass card,
   purple pill icons, inline Google rating.
   ============================================ */
.venue-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--cs-text-secondary);
  text-decoration: none;
  padding: 0.35rem 0.65rem;
  border-radius: 8px;
  margin-bottom: 0.85rem;
  transition: all 180ms ease-in-out;
}

.venue-back-btn:hover {
  color: var(--cs-text-primary);
  background: color-mix(in srgb, var(--cs-purple, #5a189a) 15%, transparent);
}

.venue-detail-header {
  display: flex;
  background: linear-gradient(180deg, rgba(26, 26, 46, 0.8) 0%, rgba(15, 15, 26, 0.6) 100%);
  border: 1px solid color-mix(in srgb, var(--cs-purple, #5a189a) 35%, transparent);
  border-radius: 20px;
  overflow: hidden;
}

.venue-detail-body {
  flex: 1;
  padding: 1.25rem 1.5rem;
  min-width: 0;
}

.venue-detail-title {
  font-family: var(--cs-font-heading);
  font-weight: 600;
  font-size: 1.5rem;
  color: var(--cs-text-primary);
  margin: 0 0 0.4rem 0;
}

.venue-detail-rating {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
}

.venue-detail-rating .stars {
  color: var(--cs-yellow, #ffb703);
  letter-spacing: 1px;
}

.venue-detail-rating .rating-num {
  color: var(--cs-text-primary);
  font-weight: 600;
}

.venue-detail-rating .review-count {
  color: var(--cs-text-secondary);
  font-size: 0.82rem;
}

.venue-detail-rating .rating-source {
  color: var(--cs-text-secondary);
  font-size: 0.75rem;
  padding-left: 0.55rem;
  margin-left: 0.2rem;
  border-left: 1px solid color-mix(in srgb, var(--cs-text-secondary) 30%, transparent);
}

.venue-detail-address,
.venue-detail-phone {
  font-size: 0.9rem;
  color: var(--cs-text-secondary);
  margin: 0 0 0.25rem 0;
}

.venue-detail-address i,
.venue-detail-phone i {
  margin-right: 0.4rem;
  color: var(--cs-purple-light, #b38cff);
}

.venue-detail-phone a {
  color: var(--cs-text-primary);
  text-decoration: none;
}

.venue-detail-phone a:hover {
  color: var(--cs-purple-light, #b38cff);
}

/* Action row reuses the shared .card-actions treatment (purple icon pills).
   .is-current marks the button for the page the user is on — slight fill so
   it reads as "you are here", and pointer-events disabled. */
.venue-detail-actions {
  margin-top: 0.75rem;
  gap: 0.4rem;
}

.venue-detail-actions .action-btn.is-current {
  background: color-mix(in srgb, currentColor 18%, transparent) !important;
  cursor: default;
  pointer-events: none;
}

/* Right-hand column on the venue header — hosts the distance badge
   (populated client-side from the last search's user position). */
.venue-detail-right-col {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-start;
  gap: 0.6rem;
  padding: 1.25rem 1.5rem;
  flex: 0 0 auto;
}

.venue-detail-header .distance-badge {
  position: static;
  padding: 0;
  background: transparent;
}

.venue-detail-header .distance-badge .dist-num {
  font-size: 1.3rem;
}

.venue-detail-header .distance-badge .dist-unit {
  font-size: 1rem;
}

@media (max-width: 575px) {
  .venue-detail-body {
    padding: 1rem;
  }
  .venue-detail-title {
    font-size: 1.2rem;
  }
  .venue-detail-right-col {
    padding: 0.75rem 1rem 0.5rem 0.5rem;
  }
  .venue-detail-header .distance-badge .dist-num {
    font-size: 1rem;
  }
  .venue-detail-header .distance-badge .dist-unit {
    font-size: 0.8rem;
  }
}

/* ============================================
   17. BUSINESS PLANS SECTION (Subscriptions)
   Matches the designer's Business Plans mockup — dark cards stacked
   vertically, featured plan gets a yellow accent border + ribbon.
   ============================================ */
.plans-section {
  padding: 2rem 0 3rem;
  background:
    radial-gradient(ellipse at top, color-mix(in srgb, var(--cs-purple, #5a189a) 8%, transparent) 0%, transparent 60%),
    var(--cs-dark-bg);
}

/* "All plans include..." pill rendered inside the Plans hero (biz-hero).
   Floats below the "Find the Right Fit / for Your Business" heading. */
.biz-plans-tagline {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  margin-top: 0.5rem;
  border: 1px solid color-mix(in srgb, var(--cs-purple, #5a189a) 45%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, #1a1a2e 40%, transparent);
  font-size: 0.85rem;
  color: var(--cs-text-secondary);
  backdrop-filter: blur(6px);
}

.biz-plans-tagline i {
  color: var(--cs-purple-light, #b38cff);
}

.plans-list {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  max-width: 820px;
  margin: 0 auto;
}

.plan-card {
  position: relative;
  display: flex;
  gap: 1.25rem;
  background: color-mix(in srgb, #1a1a2e 90%, transparent);
  border: 1px solid color-mix(in srgb, var(--cs-purple, #5a189a) 35%, transparent);
  border-radius: 18px;
  padding: 1.25rem 1.5rem;
  transition: transform 200ms ease-in-out, border-color 200ms ease-in-out;
}

.plan-card:hover {
  border-color: color-mix(in srgb, var(--cs-purple, #5a189a) 65%, transparent);
  transform: translateY(-2px);
}

/* Featured plan: yellow accent border + MOST POPULAR ribbon at top-left */
.plan-card-featured {
  border-color: var(--cs-yellow, #ffb703);
  border-width: 2px;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--cs-yellow, #ffb703) 35%, transparent),
              0 12px 40px color-mix(in srgb, var(--cs-yellow, #ffb703) 10%, transparent);
  padding-top: 2rem; /* room for the ribbon */
}

.plan-popular-badge {
  position: absolute;
  top: -12px;
  left: 1.25rem;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: var(--cs-yellow, #ffb703);
  color: #1a1a2e;
  font-family: var(--cs-font-body);
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  padding: 0.35rem 0.75rem;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

.plan-popular-badge i {
  font-size: 0.8em;
}

.plan-card-media {
  flex: 0 0 64px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 0.25rem;
}

.plan-icon {
  width: 64px;
  height: 64px;
  object-fit: contain;
}

.plan-card-body {
  flex: 1;
  min-width: 0;
}

.plan-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.25rem;
}

.plan-name {
  font-family: var(--cs-font-heading);
  font-weight: 700;
  font-size: 1.35rem;
  color: var(--cs-text-primary);
  margin: 0;
}

.plan-activate-btn {
  display: inline-flex;
  align-items: center;
  padding: 0.4rem 0.95rem;
  background: var(--cs-button-primary-bg, #362D87);
  color: var(--cs-button-primary-text, #ffffff);
  border-radius: 8px;
  font-family: var(--cs-font-body);
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background 150ms ease-in-out, transform 150ms ease-in-out;
}

.plan-activate-btn:hover {
  background: var(--cs-button-hover-bg, #4B3FB0);
  transform: translateY(-1px);
  color: var(--cs-button-primary-text, #ffffff);
}

.plan-subtitle {
  font-family: var(--cs-font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--cs-yellow, #ffb703);
  margin-bottom: 0.3rem;
}

.plan-card:not(.plan-card-featured) .plan-subtitle {
  color: var(--cs-purple-light, #b38cff);
}

.plan-description {
  font-family: var(--cs-font-body);
  font-size: 0.82rem;
  color: var(--cs-text-secondary);
  margin: 0 0 0.85rem 0;
  line-height: 1.4;
}

/* Two-column feature grid — matches mockup. Collapses to single column
   on narrow viewports so text doesn't wrap awkwardly. */
.plan-features {
  list-style: none;
  padding: 0;
  margin: 0 0 1rem 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.4rem 1rem;
}

.plan-feature-item {
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
  font-size: 0.78rem;
  color: var(--cs-text-primary);
  line-height: 1.35;
}

.plan-feature-icon {
  flex-shrink: 0;
  color: var(--cs-purple-light, #b38cff);
  font-size: 0.85rem;
  margin-top: 0.15rem;
}

.plan-card-featured .plan-feature-icon {
  color: var(--cs-yellow, #ffb703);
}

.plan-price-row {
  display: flex;
  align-items: baseline;
  gap: 0.2rem;
}

.plan-price {
  font-family: var(--cs-font-heading);
  font-weight: 700;
  font-size: 1.75rem;
  color: var(--cs-text-primary);
}

.plan-price-period {
  font-size: 0.8rem;
  color: var(--cs-text-secondary);
}

/* Keep row layout on phones (matches Kelly's mockup): icon on the left,
   body on the right, plan name + Activate Now on the same line, features
   stay 2-column. Only adjust sizing. */
@media (max-width: 575px) {
  .plan-card {
    padding: 1rem;
    gap: 0.85rem;
  }
  .plan-card-featured {
    padding-top: 1.75rem;
  }
  .plan-card-media {
    flex: 0 0 48px;
  }
  .plan-icon {
    width: 48px;
    height: 48px;
  }
  .plan-card-header {
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.2rem;
  }
  .plan-name {
    font-size: 1.1rem;
  }
  .plan-activate-btn {
    padding: 0.3rem 0.75rem;
    font-size: 0.72rem;
  }
  .plan-features {
    gap: 0.3rem 0.5rem;
  }
  .plan-feature-item {
    font-size: 0.72rem;
  }
  .plan-price {
    font-size: 1.45rem;
  }
}

/* ============================================
   18. BUSINESS LANDING PAGE (Phase 4)
   Sections: hero, category icons, benefits, how it works.
   The plans section below them reuses the styles above.
   ============================================ */

/* ---------- Shared button variants used by Phase 4 only ---------- */
.biz-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.65rem 1.4rem;
  font-family: var(--cs-font-body);
  font-weight: 600;
  font-size: 0.9rem;
  border-radius: 10px;
  text-decoration: none;
  transition: filter 150ms ease-in-out, transform 150ms ease-in-out, background 150ms ease-in-out;
  white-space: nowrap;
  border: 1px solid transparent;
  cursor: pointer;
}

.biz-btn-primary {
  background: var(--cs-button-primary-bg, #362D87);
  color: var(--cs-button-primary-text, #ffffff);
}
.biz-btn-primary:hover {
  background: var(--cs-button-hover-bg, #4B3FB0);
  transform: translateY(-1px);
  color: var(--cs-button-primary-text, #ffffff);
}

.biz-btn-secondary {
  background: transparent;
  color: var(--cs-text-primary);
  border-color: color-mix(in srgb, var(--cs-text-primary, #f5f5f5) 35%, transparent);
}
.biz-btn-secondary:hover {
  background: color-mix(in srgb, var(--cs-text-primary, #f5f5f5) 10%, transparent);
  color: var(--cs-text-primary);
}

.biz-btn-wide {
  padding-left: 2.75rem;
  padding-right: 2.75rem;
}

/* ---------- Section 1: Hero ---------- */
.biz-hero {
  position: relative;
  padding: 3rem 0 3.5rem;
  background-color: var(--cs-dark-bg);
  background-image:
    linear-gradient(90deg,
      var(--cs-dark-bg, #0f0f1a) 0%,
      color-mix(in srgb, var(--cs-dark-bg, #0f0f1a) 85%, transparent) 25%,
      color-mix(in srgb, var(--cs-dark-bg, #0f0f1a) 50%, transparent) 55%,
      transparent 90%),
    url('/images/brand/hero/night-skyline.jpg');
  background-size: cover, cover;
  background-position: center, center;
  border-bottom: 1px solid var(--cs-border);
  color: var(--cs-text-primary);
  isolation: isolate;
  overflow: hidden;
}

.biz-hero-inner {
  position: relative;
  z-index: 1;
}

.biz-hero-text {
  max-width: 620px;
}

.biz-hero-title {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(1.85rem, 4.5vw, 3rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: #ffffff;
  margin: 0 0 0.75rem 0;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
}

.biz-hero-title-accent {
  color: var(--cs-hero-lead-brand-color, #9f66ff);
  font-style: italic;
}

.biz-hero-subtitle {
  font-family: var(--cs-font-body);
  font-size: clamp(0.95rem, 1.4vw, 1.1rem);
  color: var(--cs-text-secondary);
  margin: 0 0 1.5rem 0;
}

.biz-hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}

.biz-hero-trust {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.8rem;
  color: var(--cs-text-secondary);
}

.biz-hero-trust i {
  color: var(--cs-purple-light, #b38cff);
}

@media (max-width: 767px) {
  .biz-hero {
    padding: 2.25rem 0 2.5rem;
    /* On mobile the text takes the full width, so strengthen the left-dark
       gradient further (solid through ~42%) and swap to the mobile skyline
       crop so the buildings sit tight on the right like the home hero. */
    background-image:
      linear-gradient(90deg,
        var(--cs-dark-bg, #0f0f1a) 0%,
        var(--cs-dark-bg, #0f0f1a) 42%,
        color-mix(in srgb, var(--cs-dark-bg, #0f0f1a) 72%, transparent) 62%,
        color-mix(in srgb, var(--cs-dark-bg, #0f0f1a) 20%, transparent) 85%,
        transparent 100%),
      url('/images/brand/hero/night-skyline-mobile.jpg');
  }
  .biz-hero-ctas .biz-btn {
    flex: 1 1 auto;
  }
}

/* ---------- Section 2: Category icons (cream card floating on dark) ---------- */
/* Section background stays dark (continuing from the hero), so the cream
   card floats between the hero and the Benefits cream panel below — per
   Kelly's mockup. */
.biz-categories {
  background: var(--cs-dark-bg);
  padding: 1.25rem 1rem 0.5rem;
}

.biz-categories-panel {
  display: flex;
  justify-content: center;
  gap: 2.5rem;
  padding: 1.25rem 1.5rem;
  background: var(--cs-benefits-bg, #EEEDF6);
  border-radius: 18px;
  box-shadow: 0 6px 18px rgba(90, 24, 154, 0.12);
  max-width: 720px;
  margin: 0 auto;
}

.biz-category {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
}

.biz-category-art {
  width: 52px;
  height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.biz-category-art img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.biz-category-label {
  font-family: var(--cs-font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #2d2d3a;
}

@media (max-width: 575px) {
  .biz-categories-panel {
    gap: 1.25rem;
    padding: 1rem;
  }
  .biz-category-art {
    width: 44px;
    height: 44px;
  }
}

/* ---------- Section 3: Benefits ("More Visibility...") ---------- */
/* Section background is dark (continues from categories). A cream rounded
   card (.biz-benefits-panel) floats inside, containing the heading and
   benefit rows — matches Kelly's mockup layering. */
.biz-benefits {
  background: var(--cs-dark-bg);
  padding: 0.75rem 0 2rem;
  color: #1a1a2e;
}

.biz-benefits-panel {
  background: var(--cs-benefits-bg, #EEEDF6);
  border-radius: 18px;
  box-shadow: 0 6px 18px rgba(90, 24, 154, 0.12);
  padding: 2rem 1.5rem 1.5rem;
  max-width: 760px;
  margin: 0 auto;
}

.biz-benefits-heading {
  text-align: center;
  margin-bottom: 2.25rem;
}

.biz-benefits-heading h2 {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 400;
  line-height: 1.15;
  margin: 0;
  color: #1a1a2e;
}

.biz-benefits-heading-accent {
  color: var(--cs-purple, #5a189a);
  font-style: italic;
}

.biz-benefits-list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  max-width: 720px;
  margin: 0 auto;
}

.biz-benefit {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: 0.25rem 0.5rem;
  background: transparent;
  border: none;
  border-radius: 0;
}

.biz-benefit-icon {
  flex: 0 0 56px;
  width: 56px;
  height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.biz-benefit-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.biz-benefit-body h3 {
  font-family: var(--cs-font-heading);
  font-weight: 600;
  font-size: 1.05rem;
  margin: 0 0 0.2rem 0;
  color: #1a1a2e;
}

.biz-benefit-body p {
  margin: 0;
  font-size: 0.85rem;
  color: color-mix(in srgb, #1a1a2e 75%, transparent);
  line-height: 1.45;
}

/* ---------- Section 4: How It Works ----------
   The dark panel is now NESTED inside the cream .biz-benefits-panel (per
   Kelly's mockup — the whole "More Visibility ... How It Works" block
   reads as one cream card with a dark purple inset for the steps). */
.biz-howitworks-panel {
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--cs-purple, #5a189a) 28%, #1a1a2e) 0%,
      color-mix(in srgb, var(--cs-purple, #5a189a) 18%, #1a1a2e) 100%);
  border-radius: 14px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  padding: 1.75rem 1.25rem 1.5rem;
  margin-top: 1.5rem;
  color: var(--cs-text-primary);
}

.biz-howitworks-title {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 400;
  text-align: center;
  color: #ffffff;
  margin: 0 0 2rem 0;
}

.biz-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  max-width: 720px;
  margin: 0 auto 2rem auto;
}

.biz-step {
  text-align: center;
  padding: 0.5rem;
  position: relative;
}

/* Curving dashed arrows between steps 1→2 and 2→3 (desktop/tablet only).
   Inline SVG data URIs — purple stroke, dashed, with an arrowhead on the
   right. Positioned in the horizontal gap between step number circles.
   Hidden on mobile (<576px) where steps stack vertically. */
.biz-step:nth-child(1)::after,
.biz-step:nth-child(2)::after {
  content: '';
  position: absolute;
  top: 8px;
  right: -32px;
  width: 72px;
  height: 40px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 40'><path d='M4 28 Q 36 -4 64 20' stroke='%23b38cff' stroke-width='2' stroke-dasharray='4 4' fill='none' stroke-linecap='round'/><path d='M58 13 L 66 20 L 58 25' stroke='%23b38cff' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-size: contain;
  pointer-events: none;
  z-index: 1;
}

.biz-step-num {
  width: 64px;
  height: 64px;
  display: block;
  margin: 0 auto 0.85rem auto;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.35));
  position: relative;
  z-index: 2;
}

.biz-step-title {
  font-family: var(--cs-font-heading);
  font-weight: 600;
  font-size: 1.05rem;
  color: #ffffff;
  margin: 0 0 0.4rem 0;
}

.biz-step-body {
  font-size: 0.8rem;
  color: color-mix(in srgb, var(--cs-text-primary, #f5f5f5) 80%, transparent);
  line-height: 1.45;
  margin: 0;
}

.biz-howitworks-cta {
  text-align: center;
}

@media (max-width: 575px) {
  .biz-steps {
    grid-template-columns: 1fr;
    gap: 1.75rem;
  }
  .biz-step-num {
    width: 54px;
    height: 54px;
  }
  /* Arrows don't make sense when steps stack vertically. */
  .biz-step:nth-child(1)::after,
  .biz-step:nth-child(2)::after {
    display: none;
  }
}

/* ---------- "Have Questions? Get In Touch" footer (Plans page) ---------- */
.biz-contact {
  padding: 2rem 0 3rem;
  background: var(--cs-dark-bg);
}

.biz-contact-panel {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.5rem;
  max-width: 720px;
  margin: 0 auto;
  background: color-mix(in srgb, #1a1a2e 85%, transparent);
  border: 1px solid color-mix(in srgb, var(--cs-purple, #5a189a) 30%, transparent);
  border-radius: 16px;
}

.biz-contact-icon {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--cs-purple, #5a189a) 35%, transparent);
  color: var(--cs-purple-light, #b38cff);
  font-size: 1.1rem;
}

.biz-contact-text {
  flex: 1;
  min-width: 0;
  line-height: 1.25;
}

.biz-contact-title {
  font-family: var(--cs-font-heading);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--cs-text-primary);
}

.biz-contact-subtitle {
  font-size: 0.78rem;
  color: var(--cs-text-secondary);
}

@media (max-width: 575px) {
  .biz-contact-panel {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem;
  }
  .biz-contact-panel .biz-btn {
    width: 100%;
  }
}

/* PT-00163 + PT-00164: Bootstrap Tooltip custom styling for the Live Music
   icon. container:'body' portals it out of the venue card so it's not clipped
   by overflow:hidden + contain:paint. We use !important on a few key colors
   because Bootstrap's CSS variables on .tooltip-inner have surprisingly high
   effective specificity (the variable is set on .tooltip itself with the
   default #000), and theme-level overrides need to win cleanly. */
.tooltip.music-info-bs-tooltip {
  --bs-tooltip-bg: #1a1a2e;
  --bs-tooltip-color: #f5f5f5;
  --bs-tooltip-max-width: 380px;
  --bs-tooltip-padding-x: 0.85rem;
  --bs-tooltip-padding-y: 0.65rem;
  --bs-tooltip-border-radius: 0.5rem;
  --bs-tooltip-font-size: 0.85rem;
  --bs-tooltip-opacity: 1;
  z-index: 1080;
  opacity: 1;
}

.tooltip.music-info-bs-tooltip .tooltip-inner {
  background-color: var(--cs-card-bg, #1a1a2e) !important;
  color: var(--cs-text-primary, #f5f5f5) !important;
  max-width: 380px;
  max-height: 280px;
  overflow: hidden;
  position: relative;
  padding: 0.65rem 0.85rem;
  border: 1px solid color-mix(in srgb, var(--cs-card-icon-color, #9f66ff) 55%, transparent);
  border-radius: 0.5rem;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45);
  font-size: 0.85rem;
  text-align: left;
  line-height: 1.35;
  word-wrap: break-word;
  white-space: normal; /* override Bootstrap's no-wrap default */
}

/* Match the arrow color to the tooltip bg so it doesn't look like a black
   pointer on a purple panel. Each placement uses a different ::before. */
.tooltip.music-info-bs-tooltip.bs-tooltip-top .tooltip-arrow::before,
.tooltip.music-info-bs-tooltip.bs-tooltip-auto[data-popper-placement^="top"] .tooltip-arrow::before {
  border-top-color: var(--cs-card-bg, #1a1a2e) !important;
}
.tooltip.music-info-bs-tooltip.bs-tooltip-bottom .tooltip-arrow::before,
.tooltip.music-info-bs-tooltip.bs-tooltip-auto[data-popper-placement^="bottom"] .tooltip-arrow::before {
  border-bottom-color: var(--cs-card-bg, #1a1a2e) !important;
}
.tooltip.music-info-bs-tooltip.bs-tooltip-start .tooltip-arrow::before,
.tooltip.music-info-bs-tooltip.bs-tooltip-auto[data-popper-placement^="left"] .tooltip-arrow::before {
  border-left-color: var(--cs-card-bg, #1a1a2e) !important;
}
.tooltip.music-info-bs-tooltip.bs-tooltip-end .tooltip-arrow::before,
.tooltip.music-info-bs-tooltip.bs-tooltip-auto[data-popper-placement^="right"] .tooltip-arrow::before {
  border-right-color: var(--cs-card-bg, #1a1a2e) !important;
}

/* Fade gradient at the bottom for content that overflows the max-height —
   visual hint that the modal has the full view. */
.tooltip.music-info-bs-tooltip .tooltip-inner::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 36px;
  background: linear-gradient(to bottom, transparent, var(--cs-card-bg, #1a1a2e));
  pointer-events: none;
  border-bottom-left-radius: 0.5rem;
  border-bottom-right-radius: 0.5rem;
}

/* Rich-text content rules inside the Bootstrap tooltip body. Reset margins so
   pasted Word/Docs HTML doesn't blow up the box; constrain images, tables,
   and hide iframes (video embeds are modal-only). */
.tooltip.music-info-bs-tooltip .tooltip-inner > * { margin-top: 0; }
.tooltip.music-info-bs-tooltip .tooltip-inner > *:not(:last-child) { margin-bottom: 0.4rem; }
.tooltip.music-info-bs-tooltip .tooltip-inner p { margin-bottom: 0.4rem; }
.tooltip.music-info-bs-tooltip .tooltip-inner img { max-width: 100%; height: auto; }
.tooltip.music-info-bs-tooltip .tooltip-inner table { width: 100%; border-collapse: collapse; font-size: 0.78rem; }
.tooltip.music-info-bs-tooltip .tooltip-inner th,
.tooltip.music-info-bs-tooltip .tooltip-inner td {
  padding: 0.2rem 0.4rem;
  border: 1px solid color-mix(in srgb, currentColor 30%, transparent);
}
.tooltip.music-info-bs-tooltip .tooltip-inner a { color: var(--cs-card-icon-color, #9f66ff); }
.tooltip.music-info-bs-tooltip .tooltip-inner iframe { display: none; }

@media (max-width: 480px) {
  .tooltip.music-info-bs-tooltip {
    --bs-tooltip-max-width: 240px;
    --bs-tooltip-font-size: 0.8rem;
  }
  .tooltip.music-info-bs-tooltip .tooltip-inner { max-width: 240px; }
}

/* PT-00164: rich-text Live Music content rendered in the modal and on the
   client dashboard display block. Tables/images/iframes get sensible defaults
   so unstyled HTML pasted from Word or Docs renders reasonably. The modal sits
   on a light Bootstrap background so links use Bootstrap-primary. */
.live-music-rich-content {
  word-wrap: break-word;
}
.live-music-rich-content > *:first-child { margin-top: 0; }
.live-music-rich-content > *:last-child { margin-bottom: 0; }
.live-music-rich-content img { max-width: 100%; height: auto; }
.live-music-rich-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 0.5rem 0;
}
.live-music-rich-content th,
.live-music-rich-content td {
  padding: 0.4rem 0.6rem;
  border: 1px solid rgba(0, 0, 0, 0.15);
  text-align: left;
  vertical-align: top;
}
.live-music-rich-content th { background: rgba(0, 0, 0, 0.04); font-weight: 600; }
.live-music-rich-content iframe {
  max-width: 100%;
  aspect-ratio: 16 / 9;
  width: 100%;
  height: auto;
  border: 0;
  border-radius: 0.375rem;
}