/* ── GymMap Module Styles ────────────────────────────────────────────────────
   Restored to GymMap's own original visual identity, "Atlas of Motion":
   warm paper background, dark ink text, topographic texture cues, compact
   editorial typography (Space Grotesk headings / DM Sans body) and Route
   Orange reserved for action/accent. Source of truth: the ported React/
   Tailwind build this module was completed from (see
   GymMap_full_project_with_dependencies/gymmap/client/src/index.css).

   An earlier build pass deliberately stripped this out and made the module
   fall back to bimbly.eu's generic site-wide purple (var(--brand)#7657ff /
   var(--brand2)#9a7dff). That homogenization is reverted here — GymMap gets
   its own palette back.

   How it's scoped: the palette lives in its own --gm-* custom properties
   (below) so nothing here ever redefines bimbly's shared --brand/--text/
   --muted/etc. at :root — that would leak into the shared site-wide
   header/nav/footer. Instead, the shared token *names* are re-pointed to
   GymMap's palette only inside <main> (which on every gym-map page contains
   just this module's own content — the shared header, nav and footer all
   render outside <main>). That single scoped block is what makes any
   bimbly.css-defined shared classes reused here automatically pick up
   GymMap's colors instead of bimbly purple, without touching those files.

   Class names for this module's own components stay gm-* to avoid
   colliding with other modules' CSS. Module navigation is handled by the
   shared .module-nav (nav.css).
   ─────────────────────────────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap');

/* Re-point the shared bimbly tokens to GymMap's own "Atlas of Motion"
   palette, scoped to <main> only — the shared site-header/nav/footer live
   outside <main> on every gym-map page and are completely unaffected. */
main {
  --gm-ink: #14251f;
  --gm-ink-soft: rgba(20, 37, 31, .65);
  --gm-muted: #4c6359;
  --gm-paper: #f7f5ee;
  --gm-surface: #ffffff;
  --gm-surface2: #eff0e9;
  --gm-surface-soft: #eae7dc;
  --gm-line: rgba(20, 37, 31, .14);
  --gm-route-orange: #f45b2a;
  --gm-route-orange-dark: #d94a1c;
  --gm-sage: #597f70;
  --gm-tan: #c9894d;
  --gm-forest: #12231d;
  --gm-forest-dark: #0b1713;
  --gm-peach: #f6aa72;
  --gm-font-display: "Space Grotesk", "DM Sans", ui-sans-serif, system-ui, sans-serif;
  --gm-font-sans: "DM Sans", ui-sans-serif, system-ui, sans-serif;
  --gm-radius: 12px;
  --gm-shadow: 4px 4px 0 rgba(20, 37, 31, .12);

  /* Back-compat: any shared bimbly.css classes rendered inside <main>
     (ad slots, breadcrumbs, etc.) pick up GymMap's palette instead of the
     site-wide purple, without needing changes outside this module. */
  --brand: var(--gm-route-orange);
  --brand2: var(--gm-route-orange-dark);
  --bg: var(--gm-paper);
  --surface: var(--gm-surface);
  --surface2: var(--gm-surface2);
  --surface-soft: var(--gm-surface-soft);
  --text: var(--gm-ink);
  --muted: var(--gm-muted);
  --line: var(--gm-line);
  --radius: var(--gm-radius);
  --shadow: var(--gm-shadow);

  background: var(--gm-paper);
  font-family: var(--gm-font-sans);
  color: var(--gm-ink);
}
main h1, main h2, main h3 { font-family: var(--gm-font-display); letter-spacing: -.02em; }

.gm-container { max-width: 1380px; margin: 0 auto; padding: 0 16px; }
.gm-main      { padding: 36px 0 64px; }

/* ── Hero ─────────────────────────────────────────────────────────────────── */
.gm-hero-section {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(280px, .8fr);
  align-items: center;
  gap: clamp(28px, 5vw, 60px);
  padding: clamp(40px, 6vw, 72px) 0 clamp(48px, 7vw, 80px);
  border-bottom: 1px solid var(--gm-line);
}
.gm-hero-no-panel { grid-template-columns: 1fr; max-width: 720px; }
.gm-hero-section h1 {
  margin: 12px 0 0;
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -.03em;
}
.gm-hero-section .hero-copy {
  font-size: 1.08rem;
  color: var(--gm-muted);
  margin: 18px 0 0;
  line-height: 1.6;
  max-width: 480px;
}

.gm-search-form { display: flex; gap: 10px; margin-top: 24px; max-width: 480px; flex-wrap: wrap; }
.gm-search-input {
  flex: 1 1 240px;
  padding: 14px 18px;
  border-radius: 4px;
  border: 1px solid var(--gm-line);
  background: var(--gm-surface);
  font-size: .95rem;
}
.gm-search-input:focus { outline: 2px solid var(--gm-route-orange); outline-offset: 1px; }
.gm-search-btn {
  padding: 14px 24px;
  border-radius: 4px;
  border: none;
  background: var(--gm-route-orange);
  color: #fff;
  font-weight: 700;
  cursor: pointer;
  font-family: var(--gm-font-display);
  box-shadow: 3px 3px 0 rgba(20, 37, 31, .18);
  transition: transform 180ms cubic-bezier(.23,1,.32,1), background 180ms cubic-bezier(.23,1,.32,1);
}
.gm-search-btn:hover { background: var(--gm-route-orange-dark); transform: translateY(-1px); }

.gm-hero-visual { align-self: start; }
.gm-hero-panel {
  background: var(--gm-surface);
  border: 1px solid var(--gm-line);
  border-radius: var(--gm-radius);
  padding: 22px;
  box-shadow: 5px 5px 0 rgba(20, 37, 31, .1);
}
.gm-hero-panel-head { font-family: var(--gm-font-display); font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--gm-muted); margin: 0 0 12px; }
.gm-hero-city-list { display: flex; flex-direction: column; gap: 4px; }
.gm-hero-city-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 12px; border-radius: 8px; text-decoration: none; color: var(--gm-ink);
  font-size: .88rem;
}
.gm-hero-city-row:hover { background: var(--gm-surface2); }
.gm-hero-city-count { color: var(--gm-route-orange); font-weight: 700; font-family: var(--gm-font-display); }

/* ── Layout ───────────────────────────────────────────────────────────────── */
.gm-content-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 32px; }
.gm-layout          { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; }
@media (max-width: 900px) {
  .gm-content-layout, .gm-layout { grid-template-columns: 1fr; }
}
.gm-sidebar { display: flex; flex-direction: column; gap: 16px; }

.gm-section-head { margin: 0 0 16px; }
.gm-section-head h2 { font-size: 1.3rem; font-weight: 600; margin: 4px 0 0; }
.gm-page-h1 { font-size: 1.5rem; font-weight: 600; margin: 0 0 20px; }

.gm-card {
  background: var(--gm-surface);
  border: 1px solid var(--gm-line);
  border-radius: var(--gm-radius);
  padding: 20px;
  margin-bottom: 20px;
}
.gm-card-title { font-family: var(--gm-font-display); font-weight: 700; font-size: .95rem; margin-bottom: 10px; }
.gm-card-intro { font-size: .85rem; color: var(--gm-muted); margin: 0 0 14px; }

.gm-empty-state { text-align: center; padding: 32px 24px; }
.gm-empty-title { font-family: var(--gm-font-display); font-size: 1.05rem; font-weight: 700; margin: 0 0 6px; }
.gm-empty-desc  { font-size: .88rem; color: var(--gm-muted); margin: 0 0 16px; }

.gm-steps { font-size: .88rem; padding-left: 18px; margin: 0 0 14px; line-height: 1.9; color: var(--gm-muted); }
.gm-policy-note { font-size: .78rem; color: var(--gm-muted); margin: 0; line-height: 1.6; }
.gm-muted-note { font-size: .85rem; color: var(--gm-muted); margin: 0; }

/* ── Gym cards ────────────────────────────────────────────────────────────── */
.gm-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; margin-bottom: 24px; }
.gm-gym-card {
  display: block;
  background: var(--gm-surface);
  border: 1px solid var(--gm-line);
  border-radius: 8px;
  padding: 16px 18px;
  text-decoration: none;
  color: var(--gm-ink);
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.gm-gym-card:hover { border-color: var(--gm-route-orange); box-shadow: 3px 3px 0 var(--gm-route-orange); transform: translateY(-2px); }
.gm-gym-card-title { font-family: var(--gm-font-display); font-weight: 700; font-size: .98rem; margin-bottom: 4px; }
.gm-gym-card-meta  { font-size: .8rem; color: var(--gm-route-orange); font-weight: 600; margin-bottom: 4px; }
.gm-gym-card-address { font-size: .78rem; color: var(--gm-muted); }

/* ── City browse ──────────────────────────────────────────────────────────── */
.gm-city-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; margin-bottom: 24px; }
.gm-city-pill {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  padding: 14px 16px; border-radius: 8px;
  background: var(--gm-surface2); text-decoration: none; color: var(--gm-ink);
  font-size: .88rem;
  transition: background .15s, color .15s;
}
.gm-city-pill:hover { background: var(--gm-route-orange); color: #fff; }
.gm-city-count { font-size: .74rem; color: var(--gm-muted); }
.gm-city-pill:hover .gm-city-count { color: rgba(255,255,255,.85); }
.gm-city-filter-row { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 20px; }
.gm-city-nav { display: flex; flex-direction: column; gap: 2px; }
.gm-city-nav a { display: flex; justify-content: space-between; padding: 8px 10px; border-radius: 6px; text-decoration: none; color: var(--gm-ink); font-size: .85rem; }
.gm-city-nav a:hover { background: var(--gm-surface2); color: var(--gm-route-orange); }
.gm-city-nav-count { color: var(--gm-muted); font-size: .78rem; }
.gm-listing-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.gm-pagination { display: flex; gap: 6px; justify-content: center; margin-top: 20px; flex-wrap: wrap; }

/* ── Gym profile ──────────────────────────────────────────────────────────── */
.gm-breadcrumb { font-size: .8rem; color: var(--gm-muted); padding-top: 20px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.gm-breadcrumb a { color: var(--gm-muted); text-decoration: none; }
.gm-breadcrumb a:hover { color: var(--gm-route-orange); }
.gm-gym-header { display: flex; gap: 16px; align-items: flex-start; }
.gm-gym-icon { font-size: 2rem; }
.gm-gym-title { font-family: var(--gm-font-display); font-size: 1.4rem; font-weight: 700; letter-spacing: -.02em; }
.gm-gym-subtitle { font-size: .88rem; color: var(--gm-route-orange); font-weight: 600; margin-top: 2px; }
.gm-gym-address { font-size: .82rem; color: var(--gm-muted); margin-top: 4px; }
.gm-sidebar-text { font-size: .85rem; line-height: 1.7; margin: 0 0 8px; }

.gm-amenity-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.gm-amenity-chip {
  padding: 6px 14px; border-radius: 999px;
  background: var(--gm-surface2); color: var(--gm-ink);
  font-size: .8rem;
}

.gm-price-list { display: flex; flex-direction: column; gap: 10px; }
.gm-price-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.gm-price-row-title { font-size: .88rem; }
.gm-price-row-amount { font-family: var(--gm-font-display); font-weight: 700; color: var(--gm-route-orange); }
.gm-price-row-source { font-size: .74rem; color: var(--gm-muted); margin-top: -4px; margin-bottom: 6px; }

/* ── Lead form ────────────────────────────────────────────────────────────── */
.gm-lead-form { display: flex; flex-direction: column; gap: 12px; }
.gm-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 560px) { .gm-field-row { grid-template-columns: 1fr; } }
.gm-field { display: flex; flex-direction: column; gap: 4px; }
.gm-label { font-size: .8rem; font-weight: 600; color: var(--gm-muted); }
.gm-input, .gm-textarea {
  padding: 10px 12px; border-radius: 6px; border: 1px solid var(--gm-line);
  background: var(--gm-surface); font-size: .88rem; font-family: inherit; color: var(--gm-ink);
}
.gm-textarea { min-height: 100px; resize: vertical; }
.gm-input:focus, .gm-textarea:focus { outline: 2px solid var(--gm-route-orange); outline-offset: 1px; }
.gm-checkbox-field { display: flex; gap: 8px; align-items: flex-start; font-size: .8rem; color: var(--gm-muted); }
.gm-checkbox-field input { margin-top: 3px; }

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.gm-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border-radius: 999px; border: 1px solid transparent; font-weight: 700; cursor: pointer; text-decoration: none; font-family: var(--gm-font-display); font-size: .78rem; letter-spacing: .01em; }
.gm-btn-sm { padding: 8px 16px; font-size: .82rem; }
.gm-btn-full { width: 100%; }
.gm-btn-primary { background: var(--gm-route-orange); color: #fff; }
.gm-btn-primary:hover { background: var(--gm-route-orange-dark); }
.gm-btn-ghost { background: transparent; border-color: var(--gm-line); color: var(--gm-ink); }
.gm-btn-ghost:hover { border-color: var(--gm-route-orange); color: var(--gm-route-orange); }
.gm-btn-active { border-color: var(--gm-route-orange); color: var(--gm-route-orange); }

/* ── Alerts ───────────────────────────────────────────────────────────────── */
.gm-alert { padding: 12px 16px; border-radius: 6px; font-size: .85rem; margin-bottom: 16px; }
.gm-alert-success { background: #dcfce7; color: #14532d; }
.gm-alert-warning { background: #fef3c7; color: #78350f; }
.gm-alert-danger  { background: #fee2e2; color: #7f1d1d; }
.gm-alert-info    { background: var(--gm-surface2); color: var(--gm-ink); }

/* ── Ecosystem crosslinks (mirrors webcheck's sidebar pattern) ───────────── */
.gm-ecosystem-links { display: flex; flex-direction: column; gap: 2px; }
.gm-ecosystem-link { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 6px; text-decoration: none; color: var(--gm-ink); font-size: .85rem; }
.gm-ecosystem-link:hover { background: var(--gm-surface2); color: var(--gm-route-orange); }
.gm-ecosystem-link-arrow { margin-left: auto; color: var(--gm-muted); }

[dir="rtl"] .gm-ecosystem-link-arrow { margin-left: 0; margin-right: auto; transform: scaleX(-1); }

/* ── Map markers (Atlas of Motion — numbered Route Orange pins) ─────────── */
.gymmap-marker-shell { background: transparent !important; border: 0 !important; }
.gymmap-marker {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 2px solid var(--gm-route-orange);
  border-radius: 999px;
  background: var(--gm-paper);
  color: var(--gm-route-orange);
  font-family: var(--gm-font-display);
  font-size: 11px;
  font-weight: 700;
  box-shadow: 3px 3px 0 rgba(20, 37, 31, .85);
  transition: transform 180ms cubic-bezier(.23,1,.32,1), background 180ms cubic-bezier(.23,1,.32,1);
}
.gymmap-marker:hover, .gymmap-marker.is-active { transform: translateY(-3px) scale(1.08); background: var(--gm-route-orange); color: #fff; }
.gymmap-cluster-shell { background: transparent !important; border: 0 !important; }
.gymmap-cluster {
  display: grid;
  width: 52px;
  height: 52px;
  place-content: center;
  border: 2px solid var(--gm-ink);
  border-radius: 999px;
  background: var(--gm-paper);
  color: var(--gm-ink);
  box-shadow: inset 0 0 0 5px var(--gm-surface2), 4px 4px 0 var(--gm-route-orange);
  text-align: center;
  transition: transform 180ms cubic-bezier(.23,1,.32,1), background 180ms cubic-bezier(.23,1,.32,1);
}
.gymmap-cluster strong { display: block; font-family: var(--gm-font-display); font-size: 16px; line-height: 1; }
.gymmap-cluster small { display: block; margin-top: 2px; font-family: var(--gm-font-sans); font-size: 7px; font-weight: 700; letter-spacing: .12em; }
.gymmap-cluster.is-dense { border-color: var(--gm-route-orange); background: var(--gm-route-orange); color: #fff; }
.gymmap-cluster:hover { transform: translateY(-3px) scale(1.08); }
.leaflet-container { font-family: var(--gm-font-sans); background: #e1e3d8; }
.leaflet-control-zoom a { color: var(--gm-ink) !important; background: var(--gm-paper) !important; border-color: var(--gm-line) !important; }
.leaflet-popup-content-wrapper, .leaflet-popup-tip { border: 1px solid var(--gm-line); border-radius: 0 !important; background: var(--gm-paper); box-shadow: 5px 5px 0 var(--gm-route-orange); }
.leaflet-popup-content { margin: 14px 15px !important; }