/* ── LaundryMap Module Styles ─────────────────────────────────────────────
   Restored to LaundryMap's own original visual identity. Source of truth:
   the ported React/Tailwind build this module was completed from
   (laundrymap-full-project/laundrymap/client/src, see client/src/index.css),
   which defines "City Signal" — a Swiss-wayfinding, cartographic look:
   warm paper surfaces (#f8f7f1), dark-ink text (#15213a), Signal Cobalt
   blue (#2457f5) as the primary accent, a warm amber (#f1b83b) as the
   secondary "pin" accent, deep navy panels (#15213a) for dark sections,
   and Manrope (display/headings) over DM Sans (body) typography. Map-pin
   and route-line motifs (teardrop markers, dashed connector lines, dotted
   grid backgrounds) recur throughout as the brand's signature device.

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

   How it's scoped: the palette lives in its own --lm-* 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* (and the --clr-*
   aliases some shared partials/inline styles use) are re-pointed to
   LaundryMap's palette only inside <main> (which on every laundry-map page
   contains just this module's own content — the shared header, nav and
   footer all render outside <main>, see templates/header.php and
   templates/footer.php). That single scoped block is what makes shared
   classes reused here (.eyebrow, .section, .section-head, etc.)
   automatically pick up LaundryMap's colors instead of bimbly purple,
   without touching those shared files.

   Class names for this module's own components are prefixed lm- to avoid
   colliding with other modules.
   ─────────────────────────────────────────────────────────────────────── */

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

:root {
  --lm-ink: #15213a;
  --lm-muted: #5c6b84;
  --lm-muted-soft: #7a8597;
  --lm-paper: #f8f7f1;
  --lm-surface: #fffefa;
  --lm-surface-alt: #f0f3f9;
  --lm-line: #d9dee8;
  --lm-cobalt: #2457f5;
  --lm-cobalt-dark: #1645dc;
  --lm-cobalt-wash: #eaf0ff;
  --lm-amber: #f1b83b;
  --lm-navy: #15213a;
  --lm-navy-soft: #1b3b75;
  --lm-warn-bg: #fff6e2;
  --lm-warn-text: #8a6400;
  --lm-error-bg: #fdeeee;
  --lm-error-text: #a52323;
  --lm-font-display: "Manrope", sans-serif;
  --lm-font-sans: "DM Sans", Arial, sans-serif;
  --lm-radius: 10px;
  --lm-radius-lg: 16px;
  --lm-shadow: 0 20px 44px rgba(20, 32, 58, .12);
  --lm-shadow-sm: 0 8px 18px rgba(20, 32, 58, .08);
}

/* Re-point the shared bimbly tokens (and the --clr-* aliases some shared
   partials/inline styles fall back through) to LaundryMap's own palette,
   scoped to <main> only — the shared site-header/nav/footer live outside
   <main> on every laundry-map page and are completely unaffected by this. */
main {
  --brand: var(--lm-cobalt);
  --brand2: var(--lm-cobalt-dark);
  --text: var(--lm-ink);
  --muted: var(--lm-muted);
  --surface: var(--lm-surface);
  --surface2: var(--lm-surface-alt);
  --surface-soft: var(--lm-cobalt-wash);
  --line: var(--lm-line);
  --bg: var(--lm-paper);
  --dark: var(--lm-navy);
  --radius: var(--lm-radius-lg);
  --shadow: var(--lm-shadow);
  --clr-border: var(--lm-line);
  --clr-muted: var(--lm-muted);
  --clr-surface: var(--lm-surface);
  --clr-text: var(--lm-ink);
  background: var(--lm-paper);
  font-family: var(--lm-font-sans);
  color: var(--lm-ink);
}
main h1, main h2, main h3 { font-family: var(--lm-font-display); letter-spacing: -.03em; }

/* ── Hero ──────────────────────────────────────────────────────────────── */
.lm-hero {
  position: relative;
  overflow: hidden;
  padding: 56px 0 34px;
  background-image:
    repeating-linear-gradient(0deg, transparent 0 39px, rgba(36, 87, 245, .05) 40px 41px),
    repeating-linear-gradient(90deg, transparent 0 68px, rgba(36, 87, 245, .035) 69px 70px);
}
.lm-hero .eyebrow { color: var(--lm-cobalt); font-weight: 800; font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; margin: 0 0 10px; }
.lm-hero h1 { margin: 0 0 14px; font-size: clamp(2rem, 4vw, 3.1rem); line-height: 1.04; letter-spacing: -.03em; color: var(--lm-ink); }
.lm-hero p { color: var(--lm-muted); max-width: 640px; margin: 0 0 24px; font-size: 1.05rem; line-height: 1.55; }

.lm-search-form { position: relative; z-index: 1; display: flex; gap: 10px; max-width: 560px; flex-wrap: wrap; }
.lm-search-form input[type=text] {
  flex: 1; min-width: 220px; padding: 13px 16px; border: 1px solid var(--lm-line); border-radius: var(--lm-radius);
  background: var(--lm-surface); color: var(--lm-ink); font-family: inherit; font-size: 1rem; box-shadow: var(--lm-shadow-sm);
}
.lm-search-form input[type=text]::placeholder { color: var(--lm-muted-soft); }
.lm-search-form input[type=text]:focus { outline: 3px solid rgba(36, 87, 245, .18); outline-offset: 0; border-color: var(--lm-cobalt); }
.lm-search-form button {
  padding: 13px 24px; border: 0; border-radius: var(--lm-radius); background: var(--lm-cobalt); color: #fff;
  font-family: var(--lm-font-display); font-weight: 800; font-size: .92rem; cursor: pointer;
  box-shadow: 0 10px 22px rgba(36, 87, 245, .25); transition: background .16s ease, transform .16s ease;
}
.lm-search-form button:hover { background: var(--lm-cobalt-dark); transform: translateY(-1px); }
.lm-search-form button:active { transform: scale(.97); }

.lm-stats { position: relative; z-index: 1; display: flex; gap: 28px; margin-top: 22px; flex-wrap: wrap; }
.lm-stat strong { display: block; font-family: var(--lm-font-display); font-size: 1.7rem; letter-spacing: -.02em; color: var(--lm-ink); }
.lm-stat span { color: var(--lm-muted-soft); font-size: .78rem; font-weight: 600; }

/* ── City directory ────────────────────────────────────────────────────── */
.lm-city-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; margin: 24px 0; }
.lm-city-card {
  position: relative; display: block; padding: 18px 18px 18px 42px; border: 1px solid var(--lm-line); border-radius: var(--lm-radius);
  text-decoration: none; color: inherit; background: var(--lm-surface); transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.lm-city-card::before {
  content: ""; position: absolute; left: 16px; top: 20px; width: 12px; height: 12px; border: 2px solid var(--lm-cobalt);
  border-radius: 50% 50% 50% 3px; transform: rotate(-45deg); background: var(--lm-cobalt-wash);
}
.lm-city-card:hover { border-color: var(--lm-cobalt); box-shadow: var(--lm-shadow-sm); transform: translateY(-2px); }
.lm-city-card .lm-city-name { font-family: var(--lm-font-display); font-weight: 800; font-size: 1.02rem; margin: 0 0 4px; color: var(--lm-ink); }
.lm-city-card .lm-city-count { color: var(--lm-muted-soft); font-size: .8rem; }

/* ── Listings ──────────────────────────────────────────────────────────── */
.lm-list { display: grid; gap: 14px; margin: 20px 0; }
.lm-card { padding: 20px; border: 1px solid var(--lm-line); border-radius: var(--lm-radius); background: var(--lm-surface); box-shadow: var(--lm-shadow-sm); }
.lm-card h3 { margin: 0 0 8px; font-size: 1.1rem; }
.lm-card h3 a { color: var(--lm-ink); text-decoration: none; }
.lm-card h3 a:hover { color: var(--lm-cobalt); }
.lm-card .lm-addr { color: var(--lm-muted); font-size: .85rem; margin: 0 0 10px; }

/* ── Badges ────────────────────────────────────────────────────────────── */
.lm-badge {
  display: inline-flex; align-items: center; gap: 5px; padding: 5px 11px; border-radius: 999px; font-size: .74rem;
  font-weight: 800; letter-spacing: .01em; background: var(--lm-cobalt-wash); color: var(--lm-cobalt); text-decoration: none;
}
a.lm-badge:hover { background: var(--lm-cobalt); color: #fff; }
.lm-badge.lm-badge-warn { background: var(--lm-warn-bg); color: var(--lm-warn-text); }
.lm-badge.lm-badge-muted { background: var(--lm-surface-alt); color: var(--lm-muted); }

/* ── Feature chips ─────────────────────────────────────────────────────── */
.lm-feature-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; }
.lm-feature { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: 8px; background: var(--lm-surface-alt); color: var(--lm-ink); font-size: .82rem; font-weight: 600; }

/* ── Price table ───────────────────────────────────────────────────────── */
.lm-price-table { width: 100%; border-collapse: collapse; margin: 14px 0; border: 1px solid var(--lm-line); border-radius: var(--lm-radius); overflow: hidden; }
.lm-price-table th, .lm-price-table td { padding: 11px 12px; border-bottom: 1px solid var(--lm-line); text-align: left; font-size: .88rem; }
.lm-price-table th { color: var(--lm-muted-soft); background: var(--lm-surface-alt); font-family: var(--lm-font-display); font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.lm-price-table td:last-child { font-family: var(--lm-font-display); font-weight: 700; color: var(--lm-ink); }
.lm-price-table tbody tr:last-child td { border-bottom: 0; }

/* ── Photos ────────────────────────────────────────────────────────────── */
.lm-photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; margin: 14px 0; }
.lm-photo-grid img { width: 100%; height: 110px; object-fit: cover; border-radius: 8px; border: 1px solid var(--lm-line); }
.lm-photo-empty { padding: 18px; border: 1px dashed var(--lm-line); border-radius: 8px; color: var(--lm-muted); font-size: .85rem; background: var(--lm-surface-alt); }

/* ── Forms ─────────────────────────────────────────────────────────────── */
.lm-form { max-width: 560px; margin: 20px 0; padding: 20px; border: 1px solid var(--lm-line); border-radius: var(--lm-radius-lg); background: var(--lm-surface); display: grid; gap: 14px; }
.lm-form label { display: grid; gap: 6px; font-weight: 700; font-size: .85rem; color: var(--lm-ink); }
.lm-form input, .lm-form select, .lm-form textarea {
  padding: 11px 13px; border: 1px solid var(--lm-line); border-radius: 6px; font: inherit; color: var(--lm-ink); background: var(--lm-surface);
}
.lm-form input:focus, .lm-form select:focus, .lm-form textarea:focus { outline: 3px solid rgba(36, 87, 245, .18); outline-offset: 0; border-color: var(--lm-cobalt); }
.lm-form textarea { min-height: 110px; resize: vertical; }
.lm-form button {
  justify-self: start; padding: 12px 24px; border: 0; border-radius: var(--lm-radius); background: var(--lm-cobalt); color: #fff;
  font-family: var(--lm-font-display); font-weight: 800; cursor: pointer; box-shadow: 0 10px 22px rgba(36, 87, 245, .22); transition: background .16s ease;
}
.lm-form button:hover { background: var(--lm-cobalt-dark); }
.lm-form-notice { padding: 13px 15px; border-radius: var(--lm-radius); background: var(--lm-cobalt-wash); color: #173eb6; font-size: .88rem; margin: 0 0 8px; border-left: 3px solid var(--lm-cobalt); }
.lm-form-error { padding: 13px 15px; border-radius: var(--lm-radius); background: var(--lm-error-bg); color: var(--lm-error-text); font-size: .88rem; margin: 0 0 8px; border-left: 3px solid var(--lm-error-text); }

[dir="rtl"] .lm-search-form,[dir="rtl"] .lm-stats,[dir="rtl"] .lm-feature-list{direction:rtl}


/* layout-fix-2026-09-29: eyebrow above the heading, not the heading pushed right */
.lm-hero ~ .section .section-head, main .section .section-head{display:flex;flex-direction:column;align-items:flex-start;gap:6px}