/* ── CoworkMap Module Styles ───────────────────────────────────────────────
   Restored to CoworkMap's own original visual identity. Source of truth:
   the ported React/Tailwind build this module was completed from
   (CoworkMap-Full-Project-With-Dependencies/coworkmap/client/src, see
   client/src/index.css, PublicHeader.tsx, Home.tsx and ideas.md), which
   names its own design contract "Verified cartography": a calm, trustworthy
   workday companion built on deep evergreen + misty mint, a restrained
   bright-mint verification accent, a warm terracotta accent for save/
   favourite states, a compact coordinate-grid / source-label / map-marker
   motif repeated in high-value UI moments, and DM Sans body text with a
   DM Serif Display italic reserved only for emotional headline emphasis.

   An earlier build pass ("2026-08-27 identity unification") 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 — CoworkMap gets its own palette back.

   How it's scoped: the palette lives in its own --cm-* 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
   CoworkMap's palette only inside <main> (which on every cowork-map page
   contains just this module's own content — the shared header, nav and
   footer all render outside <main>, see _shared/header.php:566 and
   _shared/footer.php:1). That single scoped block is what makes bimbly.css-
   defined shared classes reused here (.eyebrow, .section, .container, ad
   slot links, breadcrumbs, etc.) automatically pick up CoworkMap's colors
   instead of bimbly purple, without touching those files. It also means
   nearly every existing cm-* rule below — which already reads
   var(--brand, #7657ff), var(--muted, #62677a) etc. — repaints itself for
   free, as do the many unscoped inline style="color:var(--muted)" attributes
   used across index.php / search.php / location.php / compare.php /
   suggest.php.

   Class names for this module's own components stay prefixed cm-.
   ─────────────────────────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&family=DM+Serif+Display:ital@0;1&display=swap');

:root {
  --cm-ink:          #173b3b;
  --cm-ink-soft:      #223839;
  --cm-muted:         #607473;
  --cm-muted-soft:    #7a8d8c;
  --cm-paper:         #f7faf8;
  --cm-surface:       #ffffff;
  --cm-surface-soft:  #eef5f1;
  --cm-mint:          #e6f4ee;
  --cm-mint-bright:   #e1f8ef;
  --cm-verified:      #1e715f;
  --cm-accent:        #1d655a;
  --cm-accent-dark:   #14493f;
  --cm-line:          #dfece7;
  --cm-line-soft:     #e4ece9;
  --cm-terracotta:      #b57830;
  --cm-terracotta-soft: #fff5e9;
  --cm-font-sans:  "DM Sans", ui-sans-serif, system-ui, sans-serif;
  --cm-font-serif: "DM Serif Display", Georgia, serif;
  --cm-radius: 16px;
  --cm-shadow: 0 20px 50px -30px rgba(15,58,51,.45);

  --cm-free:      #22c55e;
  --cm-limited:   #f59e0b;
  --cm-unavailable: #ef4444;
  --cm-unknown:   var(--muted, #6b7280);
}

/* Re-point the shared bimbly tokens to CoworkMap's own palette, scoped to
   <main> only — the shared site-header/nav/footer live outside <main> on
   every cowork-map page and are completely unaffected by this. */
main {
  --brand: var(--cm-accent);
  --brand2: var(--cm-verified);
  --text: var(--cm-ink);
  --muted: var(--cm-muted);
  --surface: var(--cm-surface);
  --surface2: var(--cm-mint);
  --surface-soft: var(--cm-surface-soft);
  --line: var(--cm-line);
  --bg: var(--cm-paper);
  --radius: var(--cm-radius);
  --shadow: var(--cm-shadow);
  background: var(--cm-paper);
  font-family: var(--cm-font-sans);
  color: var(--cm-ink);
}
main h1, main h2, main h3 { font-family: var(--cm-font-sans); font-weight: 700; letter-spacing: -.03em; color: var(--cm-ink); }

/* ── Account bar ──────────────────────────────────────────────────────────── */

/* ── Hero ─────────────────────────────────────────────────────────────────── */
.cm-hero-section {
  padding: clamp(36px, 6vw, 68px) 0 clamp(28px, 5vw, 48px);
  background-image:
    linear-gradient(rgba(107,152,138,.14) 1px, transparent 1px),
    linear-gradient(90deg, rgba(107,152,138,.14) 1px, transparent 1px);
  background-size: 36px 36px;
  border-bottom: 1px solid var(--cm-line);
}
.cm-hero-section .hero-content { max-width: 640px; }
.cm-hero-section h1 { line-height: 1.05; font-size: clamp(1.9rem, 3.4vw, 2.6rem); }
.cm-hero-section .hero-copy { color: var(--cm-muted); font-size: 1.05rem; line-height: 1.6; margin: 14px 0 0; max-width: 520px; }

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

.cm-point-row {
  position: relative;
  display: flex; gap: 14px; align-items: flex-start; padding: 14px 0 14px 14px;
  border-bottom: 1px solid var(--line, #dfece7);
  transition: background-color .15s ease;
}
.cm-point-row::before {
  content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px;
  border-radius: 999px; background: transparent; transition: background-color .15s ease;
}
.cm-point-row:hover::before { background: var(--cm-accent); }
.cm-point-row:last-child { border-bottom: none; }
.cm-point-row-body { flex: 1; min-width: 0; }
.cm-point-row-title { font-weight: 700; text-decoration: none; color: var(--text, #173b3b); }
.cm-point-row-title:hover { color: var(--brand, #1d655a); }
.cm-point-row-meta { font-size: .8rem; color: var(--muted, #607473); margin-top: 4px; }
.cm-point-row-price { font-weight: 700; white-space: nowrap; color: var(--cm-ink); }

/* ── Badges ───────────────────────────────────────────────────────────────── */
.cm-badge-status {
  display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px; font-size: .72rem;
  font-weight: 700; background: var(--cm-mint-bright, #e1f8ef); color: var(--cm-verified, #1e715f);
  text-transform: uppercase; letter-spacing: .04em;
}
.cm-chip {
  display: inline-block; padding: 4px 10px; border-radius: 999px; font-size: .74rem;
  background: var(--surface2, #e6f4ee); color: var(--text, #173b3b); border: 1px solid var(--line, #dfece7);
}
.cm-chip[data-verified="0"] { opacity: .6; }

/* ── Search / filter form ─────────────────────────────────────────────────── */
.cm-search-form {
  display: flex; gap: 8px; flex-wrap: wrap; margin: 18px 0; align-items: center;
  background: var(--cm-surface); border: 1px solid var(--cm-line); border-radius: 18px;
  padding: 8px; box-shadow: var(--cm-shadow);
}
.cm-search-input, .cm-select, .cm-input, .cm-textarea {
  border: 1px solid transparent; border-radius: 12px; padding: 12px 16px;
  font-size: 1rem; background: var(--cm-surface-soft); color: var(--text, #173b3b);
  box-sizing: border-box; font-family: inherit; transition: background-color .15s ease, box-shadow .15s ease;
}
.cm-search-input:focus, .cm-select:focus, .cm-input:focus, .cm-textarea:focus {
  outline: none; background: var(--cm-surface); box-shadow: 0 0 0 2px rgba(29,101,90,.22);
}
.cm-search-input { flex: 1 1 240px; min-width: 0; }
.cm-select { flex: 1 1 160px; min-width: 0; }
.cm-textarea { width: 100%; resize: vertical; min-height: 100px; }
.cm-amenity-filters { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0; }
.cm-amenity-filters label { display: flex; align-items: center; gap: 6px; font-size: .85rem; color: var(--cm-muted); }

.cm-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 .15s ease, background-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.cm-btn-primary { background: var(--brand, #1d655a); color: #fff; box-shadow: 0 10px 22px -14px rgba(23,59,54,.7); }
.cm-btn-primary:hover { background: var(--cm-accent-dark); transform: translateY(-1px); }
.cm-btn-primary:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.cm-btn-ghost { background: transparent; border-color: var(--line, #dfece7); color: var(--text, #173b3b); }
.cm-btn-ghost:hover { background: var(--cm-surface-soft); }
.cm-btn-sm { padding: 8px 14px; font-size: .82rem; }
.cm-btn-full { width: 100%; }
.cm-btn:active { transform: scale(.98); }

/* ── Map ──────────────────────────────────────────────────────────────────── */
.cm-map-wrap { position: relative; border-radius: var(--cm-radius); overflow: hidden; border: 1px solid var(--line, #dfece7); margin: 18px 0; box-shadow: var(--cm-shadow); }
.cm-map-canvas {
  width: 100%; height: 420px; background: var(--surface2, #e6f4ee);
  background-image:
    linear-gradient(rgba(107,152,138,.14) 1px, transparent 1px),
    linear-gradient(90deg, rgba(107,152,138,.14) 1px, transparent 1px);
  background-size: 36px 36px;
}
.cm-map-preloader {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; background: var(--surface, #fff); color: var(--muted, #607473); font-size: .85rem;
  transition: opacity .25s ease; z-index: 5;
}
.cm-map-preloader.is-hidden { opacity: 0; pointer-events: none; }
.cm-spinner {
  width: 30px; height: 30px; border-radius: 50%;
  border: 3px solid var(--line, #dfece7); border-top-color: var(--brand, #1d655a);
  animation: cm-spin .8s linear infinite;
}
@keyframes cm-spin { to { transform: rotate(360deg); } }
.cm-map-note { font-size: .78rem; color: var(--muted, #607473); margin-top: 6px; }
.cm-pop { font-size: .85rem; line-height: 1.5; }
.cm-pop-title { font-weight: 700; margin-bottom: 4px; color: var(--cm-ink); }
.cm-pop-meta { color: var(--cm-muted-soft); margin-bottom: 2px; }
.cm-pop a { color: var(--brand, #1d655a); font-weight: 600; text-decoration: none; }

/* ── Detail page ──────────────────────────────────────────────────────────── */
.cm-detail-grid { display: grid; gap: 14px 32px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin: 18px 0; }
.cm-detail-field dt { font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted, #607473); margin-bottom: 4px; }
.cm-detail-field dd { margin: 0; font-size: .95rem; line-height: 1.5; }
.cm-disclaimer {
  background: var(--surface-soft, #eef5f1); border: 1px solid var(--line, #dfece7);
  border-radius: var(--cm-radius); padding: 14px 18px; font-size: .85rem;
  color: var(--muted, #607473); margin: 20px 0;
}
.cm-price-row {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 12px 0; border-bottom: 1px solid var(--line, #dfece7); flex-wrap: wrap;
}
.cm-price-row:last-child { border-bottom: none; }
.cm-price-name { font-weight: 600; }
.cm-price-amount { font-weight: 700; white-space: nowrap; color: var(--cm-ink); }

/* ── Compare table ────────────────────────────────────────────────────────── */
.cm-compare-wrap { overflow-x: auto; border-radius: var(--cm-radius); border: 1px solid var(--line, #dfece7); }
.cm-compare-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.cm-compare-table th, .cm-compare-table td { padding: 10px 14px; border-bottom: 1px solid var(--line, #dfece7); text-align: left; vertical-align: top; white-space: nowrap; }
.cm-compare-table th:first-child, .cm-compare-table td:first-child { position: sticky; left: 0; background: var(--surface, #fff); font-weight: 600; white-space: normal; }

/* ── Alerts / forms ───────────────────────────────────────────────────────── */
.cm-alert { border-radius: 12px; padding: 12px 16px; font-size: .88rem; margin: 14px 0; }
.cm-alert-danger  { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }
.cm-alert-success { background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0; }
.cm-alert-info    { background: var(--surface-soft, #eef5f1); color: var(--muted, #607473); border: 1px solid var(--line, #dfece7); }
.cm-form-field { margin-bottom: 14px; display: flex; flex-direction: column; gap: 6px; }
.cm-form-field label { font-weight: 600; font-size: .88rem; color: var(--cm-ink); }
.cm-form-card { max-width: 560px; }
.cm-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ── Pagination ───────────────────────────────────────────────────────────── */
.cm-pagination { display: flex; justify-content: space-between; align-items: center; margin: 24px 0; gap: 12px; }

/* ── Mobile responsiveness (375px / 414px verified) ──────────────────────── */
@media (max-width: 480px) {
  .cm-search-form { flex-direction: column; align-items: stretch; }
  .cm-search-input, .cm-select { flex: 1 1 auto; width: 100%; }
  .cm-map-canvas { height: 280px; }
  .cm-detail-grid { grid-template-columns: 1fr; gap: 10px; }
  .cm-point-row { flex-direction: column; gap: 6px; }
  .cm-price-row { flex-direction: column; align-items: flex-start; gap: 4px; }
  .cm-pagination { flex-wrap: wrap; }
}

/* ── Pre-footer CTA / trust band ──────────────────────────────────────────── */
.cm-prefooter {
  background: linear-gradient(135deg, var(--cm-accent), var(--cm-accent-dark));
  color: #fff; padding: 36px 24px; margin-top: 40px;
}
.cm-prefooter-inner {
  max-width: 1000px; margin: 0 auto; display: flex; align-items: center;
  justify-content: space-between; gap: 20px; flex-wrap: wrap;
}
.cm-prefooter h2 {
  margin: 0 0 6px; font-size: 1.4rem; color: #fff;
  font-family: var(--cm-font-serif); font-style: italic; font-weight: 400; letter-spacing: -.01em;
}
.cm-prefooter p { margin: 0; color: rgba(255,255,255,.85); font-size: .92rem; }
.cm-prefooter .cm-btn-primary { background: #fff; color: var(--cm-accent); box-shadow: none; }
.cm-prefooter .cm-btn-primary:hover { background: var(--cm-terracotta-soft); color: var(--cm-accent-dark); transform: translateY(-1px); }
@media (max-width: 480px) {
  .cm-prefooter-inner { flex-direction: column; text-align: center; }
}

/* RTL */
[dir="rtl"] .cm-detail-field dt { text-align: right; }
[dir="rtl"] .cm-compare-table th:first-child, [dir="rtl"] .cm-compare-table td:first-child { left: auto; right: 0; }