/* ── PoolSpaMap Module Styles ────────────────────────────────────────────────
   Restored 2026-08-28 to the module's own original design ("Quiet Water" /
   «Тихая вода»: a milky-cream base, ink-navy text and data, aquamarine
   action accents — Fraunces for the odd serif flourish, Manrope for
   everything else. See the source React/Tailwind template's
   client/src/index.css, top comment). An earlier build pass had
   deliberately stripped this out and fallen back to bimbly.eu's generic
   site-wide purple (var(--brand)#7657ff / var(--brand2)#9a7dff) — that
   homogenization is reverted here.

   Everything below is scoped inside `.psm-scope`, the wrapper div that
   templates/header.php opens and templates/footer.php closes around this
   module's own page content (inside <main>, right after the shared header
   and before the shared footer). Custom properties only cascade downward,
   so redefining --brand/--surface/--muted/etc. here can never leak into
   bimbly's shared header, module-nav or footer, which live outside
   `.psm-scope` and keep the site-wide purple untouched. It also means the
   many unscoped inline `style="color:var(--muted)"` / `style="border-
   color:var(--brand)"` attributes sprinkled across this module's PHP
   templates (categories.php, cities.php, venue.php, index.php) keep
   working exactly as written — they just resolve to PoolSpaMap's own
   palette now instead of the shared purple identity.

   Class names psm-* remain module-scoped, unchanged from before — only
   their declarations changed, so no PHP templates needed markup changes
   for this (aside from the .psm-scope wrapper itself).
   ───────────────────────────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,600&family=Manrope:wght@400;500;600;700;800&display=swap');

.psm-scope {
  /* Module's own palette tokens ("Quiet Water") */
  --psm-cream: #f6f5f1;        /* milky page background */
  --psm-surface: #ffffff;      /* card / input surface */
  --psm-surface-2: #eef2ef;    /* secondary surface (table head, footnote strips) */
  --psm-surface-soft: #dff3f0; /* soft mint highlight (chips, hover fills) */
  --psm-ink: #10263a;          /* ink-navy — headings, CTA fills, dark surfaces */
  --psm-muted: #63727b;        /* muted foreground */
  --psm-line: #dbe1df;         /* hairline border */
  --psm-teal: #20b7b0;         /* aquamarine action accent — active/focus/borders */
  --psm-teal-deep: #20a7a2;    /* deeper teal — icons, link text */
  --psm-teal-tint: #bde7e9;    /* pale teal fill (badges, avatars) */
  --psm-gold: #ad7e1d;         /* price / secondary-emphasis accent */
  --psm-radius: 14px;
  --psm-shadow: 0 14px 30px rgba(16, 38, 58, .10);

  /* Back-compat: the generic tokens bimbly.css exposes site-wide, overridden
     here only inside this wrapper — inline `style="color:var(--muted)"` etc.
     used across the module's PHP templates keep working, now resolving to
     the module's own palette instead of the shared purple identity. */
  --brand: var(--psm-teal);
  --brand2: var(--psm-teal-deep);
  --bg: var(--psm-cream);
  --surface: var(--psm-surface);
  --surface2: var(--psm-surface-2);
  --surface-soft: var(--psm-surface-soft);
  --text: var(--psm-ink);
  --muted: var(--psm-muted);
  --line: var(--psm-line);
  --radius: var(--psm-radius);
  --shadow: var(--psm-shadow);

  display: block;
  background: var(--psm-cream);
  color: var(--psm-ink);
  font-family: 'Manrope', Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}
.psm-scope :is(h1, h2, h3) { font-family: 'Manrope', inherit; font-weight: 800; letter-spacing: -.03em; color: var(--psm-ink); }
.psm-scope .hero-content h1 { letter-spacing: -.045em; line-height: 1.05; }
.psm-scope .hero-copy { color: var(--psm-muted); font-size: .98rem; line-height: 1.65; max-width: 560px; margin: 6px 0 20px; }
.psm-scope em { font-family: Fraunces, serif; font-weight: 600; font-style: normal; color: var(--psm-teal-deep); }

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.psm-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border-radius: 12px; padding: 12px 20px; font-weight: 700; text-decoration: none;
  border: 1px solid transparent; cursor: pointer; font-size: .95rem;
  transition: opacity .18s ease, transform .18s ease, background-color .18s ease;
}
.psm-btn-primary { background: var(--psm-ink); color: #fff; }
.psm-btn-primary:hover { background: #1b384d; opacity: 1; }
.psm-btn-primary:active { transform: scale(.97); }
.psm-btn-ghost { background: transparent; border-color: var(--line, #dbe1df); color: var(--text, #10263a); }
.psm-btn-ghost:hover { background: var(--surface-soft, #dff3f0); border-color: var(--psm-teal); }
.psm-btn-sm { padding: 8px 14px; font-size: .82rem; }
.psm-btn-full { width: 100%; }

/* ── Cards ────────────────────────────────────────────────────────────────── */
.psm-card { background: var(--surface, #fff); border: 1px solid var(--line, #dbe1df); border-radius: var(--psm-radius); padding: 20px 22px; margin-bottom: 18px; }
.psm-card-title { font-weight: 800; font-size: 1.05rem; margin-bottom: 10px; color: var(--psm-ink); }

/* ── Search / hero ────────────────────────────────────────────────────────── */
.psm-search-form { display: flex; gap: 10px; flex-wrap: wrap; margin: 18px 0; }
.psm-search-input, .psm-select, .psm-input, textarea.psm-input {
  border: 1px solid var(--line, #dbe1df); border-radius: 12px; padding: 12px 16px;
  font-size: 1rem; background: var(--surface, #fff); color: var(--text, #10263a);
  transition: border-color .18s ease, box-shadow .18s ease;
}
.psm-search-input:focus, .psm-select:focus, .psm-input:focus { outline: none; border-color: var(--psm-teal); box-shadow: 0 0 0 3px rgba(32, 183, 176, .16); }
.psm-search-input { flex: 1 1 280px; }

/* ── Category pills ───────────────────────────────────────────────────────── */
.psm-cat-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); margin: 20px 0; }
.psm-cat-pill {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 14px 18px; border-radius: 14px;
  border: 1px solid var(--line, #dbe1df); background: var(--surface, #fff); color: var(--text, #10263a);
  text-decoration: none; font-size: .9rem; font-weight: 700;
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.psm-cat-pill:hover { transform: translateY(-1px); border-color: var(--psm-teal); background: var(--surface-soft, #dff3f0); box-shadow: var(--shadow, 0 14px 30px rgba(16,38,58,.10)); }
.psm-cat-count { font-size: .75rem; font-weight: 600; color: var(--muted, #63727b); }

/* ── Venue list / cards ───────────────────────────────────────────────────── */
.psm-venue-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); margin: 20px 0; }
.psm-venue-card {
  display: flex; flex-direction: column; gap: 8px; padding: 18px 20px; border-radius: var(--psm-radius);
  border: 1px solid var(--line, #dbe1df); background: var(--surface, #fff); text-decoration: none; color: inherit;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background-color .18s ease;
}
.psm-venue-card:hover { transform: translateY(-2px); border-color: var(--psm-teal); background: var(--surface-soft, #dff3f0); box-shadow: var(--shadow, 0 14px 30px rgba(16,38,58,.10)); }
.psm-venue-card-title { font-weight: 800; font-size: 1.02rem; color: var(--text, #10263a); }
.psm-venue-card-meta { font-size: .8rem; color: var(--muted, #63727b); line-height: 1.6; }

/* ── Status badges ────────────────────────────────────────────────────────── */
.psm-badge {
  display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: .7rem; font-weight: 700;
  color: #fff; background: var(--badge-color, #94a3b8); white-space: nowrap;
}

/* ── Opening hours / price tables ─────────────────────────────────────────── */
.psm-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.psm-table th, .psm-table td { padding: 9px 10px; text-align: left; border-bottom: 1px solid var(--line, #dbe1df); }
.psm-table th { font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted, #63727b); background: var(--psm-surface-2, #eef2ef); }
.psm-price { font-weight: 800; font-size: 1.02rem; color: var(--psm-ink); }
.psm-feature-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; padding: 0; list-style: none; }
.psm-feature-list li { background: var(--surface-soft, #dff3f0); color: var(--psm-teal-deep); border-radius: 999px; padding: 6px 12px; font-size: .8rem; font-weight: 600; }

/* ── Reviews ──────────────────────────────────────────────────────────────── */
.psm-review { padding: 14px 0; border-bottom: 1px solid var(--line, #dbe1df); }
.psm-review:last-child { border-bottom: none; }
.psm-review-stars { color: #d9a441; font-weight: 700; letter-spacing: 1px; }
.psm-review-author { font-weight: 700; font-size: .85rem; color: var(--psm-ink); }
.psm-review-body { font-size: .88rem; color: var(--text, #10263a); margin-top: 4px; }

/* ── Alerts / forms ───────────────────────────────────────────────────────── */
.psm-alert { border-radius: 12px; padding: 12px 16px; font-size: .88rem; margin: 14px 0; }
.psm-alert-danger  { background: #fae5de; color: #8d3f32; border: 1px solid #f0c9bb; }
.psm-alert-success { background: #ddf2ef; color: #14706b; border: 1px solid #b7e2db; }
.psm-alert-info    { background: var(--surface-soft, #dff3f0); color: var(--psm-teal-deep); border: 1px solid var(--line, #dbe1df); }
.psm-form-field { margin-bottom: 14px; display: flex; flex-direction: column; gap: 6px; }
.psm-honeypot { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.psm-breadcrumb { font-size: .82rem; color: var(--muted, #63727b); margin: 14px 0; }
.psm-breadcrumb a { color: inherit; text-decoration: none; }
.psm-breadcrumb a:hover { color: var(--psm-teal-deep); }


/* layout-fix-2026-09-29 (screenshot review) */
section.hero-section{padding-top:clamp(28px, 5vw, 56px)}