/* ── DonateMap Module Styles ──────────────────────────────────────────────
   Restored to DonateMap's own original visual identity. Source of truth:
   the ported React/Tailwind build this module was completed from
   (DonateMap-Full-Project-With-Dependencies-2026-08-15/client/src, see
   client/src/index.css), which labels itself «Тёплая навигация» / "Warm
   Navigation": a hand-drawn, printed-city-guide look — warm paper
   background, deep ink-green text, a tangerine/orange accent used for
   routes, pins and CTAs, secondary marker colors (sage-green, sky-blue,
   goldenrod), and Manrope display headings over IBM Plex Sans body text.
   Cards and panels read like paper cut-outs: solid offset "sticker"
   shadows instead of soft blur, dashed hand-drawn route lines, irregular
   (asymmetric) corner radii.

   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 — DonateMap
   gets its own palette back.

   How it's scoped: the palette lives in its own --dm-* 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
   DonateMap's palette only inside <main> (which on every donate-map page
   contains just this module's own content — the shared header, nav and
   footer all render outside <main>, via templates/header.php and
   templates/footer.php). That single scoped block is what makes
   bimbly.css-defined shared classes reused here (.eyebrow, .section,
   .hero-section, ad slot links, breadcrumbs, etc.) automatically pick up
   DonateMap's colors instead of bimbly purple, without touching those
   files. This mirrors the technique already used by repair-map's
   assets/css/styles.css.

   Class names for this module's own components are prefixed dm- (existing
   convention, matched to RecycleMapBimbly's rm-* pattern).
   ─────────────────────────────────────────────────────────────────────── */

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

:root {
  --dm-ink:        #173d36;
  --dm-muted:      #65766f;
  --dm-paper:      #f6f0e4;
  --dm-warm:       #fffdf7;
  --dm-cream:      #fffaf1;
  --dm-sand:       #eee5d5;
  --dm-tangerine:      #ef6a3a;
  --dm-tangerine-dark: #cf5c30;
  --dm-green:      #72aa77;
  --dm-blue:       #5fa4c8;
  --dm-gold:       #e6b952;
  --dm-line:       rgba(23, 61, 54, .16);
  --dm-radius:     14px;
  --dm-shadow:     3px 3px 0 rgba(23, 61, 54, .16);
  --dm-font-sans:    "IBM Plex Sans", Arial, sans-serif;
  --dm-font-display: "Manrope", Arial, sans-serif;
}

/* Re-point the shared bimbly tokens to DonateMap's own palette, scoped to
   <main> only — the shared site-header/nav/footer live outside <main> on
   every donate-map page and are completely unaffected by this. */
main {
  --brand: var(--dm-tangerine);
  --brand2: var(--dm-tangerine-dark);
  --text: var(--dm-ink);
  --muted: var(--dm-muted);
  --surface: var(--dm-warm);
  --surface2: var(--dm-sand);
  --surface-soft: var(--dm-cream);
  --line: var(--dm-line);
  --bg: var(--dm-paper);
  --radius: var(--dm-radius);
  --shadow: var(--dm-shadow);
  background: var(--dm-paper);
  background-image: radial-gradient(rgba(23, 61, 54, .06) .65px, transparent .7px);
  background-size: 9px 9px;
  font-family: var(--dm-font-sans);
  color: var(--dm-ink);
}
main h1, main h2, main h3 { font-family: var(--dm-font-display); letter-spacing: -.02em; color: var(--dm-ink); }

:root {
  --dm-free:    var(--dm-green);
  --dm-unknown: var(--dm-muted);
}

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

/* ── Cards / lists ────────────────────────────────────────────────────────── */
.dm-card {
  background: var(--dm-warm); border: 1.5px solid var(--dm-line);
  border-radius: var(--dm-radius); padding: 20px 22px; margin-bottom: 18px;
  box-shadow: var(--dm-shadow);
}
.dm-card-title { font-family: var(--dm-font-display); font-weight: 800; font-size: 1.05rem; margin-bottom: 10px; color: var(--dm-ink); }

.dm-point-row {
  display: flex; gap: 14px; align-items: flex-start; padding: 14px 0;
  border-bottom: 1px solid var(--dm-line);
}
.dm-point-row:last-child { border-bottom: none; }
.dm-point-row-body { flex: 1; min-width: 0; }
.dm-point-row-title { font-weight: 700; text-decoration: none; color: var(--dm-ink); }
.dm-point-row-title:hover { color: var(--dm-tangerine); }
.dm-point-row-meta { font-size: .8rem; color: var(--dm-muted); margin-top: 4px; }
.dm-point-row-categories { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }

/* ── Badges ───────────────────────────────────────────────────────────────── */
.dm-badge {
  display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: .72rem;
  font-weight: 700; background: var(--dm-sand); color: var(--dm-ink);
  white-space: nowrap; margin-left: 6px;
}
.dm-badge-status {
  display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: .72rem;
  font-weight: 700; background: var(--dm-gold); color: var(--dm-ink);
}
.dm-chip {
  display: inline-block; padding: 4px 10px; border-radius: 999px; font-size: .74rem;
  background: var(--dm-sand); color: var(--dm-ink); border: 1px solid var(--dm-line);
  text-decoration: none; transition: border-color .17s ease, color .17s ease, transform .17s ease;
}
.dm-chip:hover { border-color: var(--dm-tangerine); color: var(--dm-tangerine); transform: translateY(-1px); }

/* ── Search / filter form ─────────────────────────────────────────────────── */
.dm-search-form { display: flex; gap: 10px; flex-wrap: wrap; margin: 18px 0; align-items: center; }
.dm-search-input, .dm-select, .dm-input, .dm-textarea {
  border: 1.5px solid rgba(23, 61, 54, .3); border-radius: 10px; padding: 12px 16px;
  font-size: 1rem; background: var(--dm-warm); color: var(--dm-ink);
  box-sizing: border-box; font-family: inherit; transition: border-color .15s ease, box-shadow .15s ease;
}
.dm-search-input:focus, .dm-select:focus, .dm-input:focus, .dm-textarea:focus {
  outline: none; border-color: var(--dm-tangerine); box-shadow: 2px 2px 0 var(--dm-tangerine);
}
.dm-search-input { flex: 1 1 240px; min-width: 0; }
.dm-select { flex: 1 1 160px; min-width: 0; }
.dm-textarea { width: 100%; resize: vertical; min-height: 100px; font-family: inherit; }

.dm-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border-radius: 8px; padding: 12px 20px; font-weight: 700; text-decoration: none;
  border: 1.5px solid transparent; cursor: pointer; font-size: .95rem;
  transition: opacity .15s ease, background-color .15s ease, transform .12s ease, box-shadow .12s ease;
}
.dm-btn-primary {
  background: var(--dm-tangerine); color: var(--dm-cream); border-color: var(--dm-ink);
  box-shadow: 3px 3px 0 var(--dm-ink);
}
.dm-btn-primary:hover { opacity: 1; transform: translate(1px, 1px); box-shadow: 2px 2px 0 var(--dm-ink); }
.dm-btn-primary:disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: 3px 3px 0 var(--dm-ink); }
.dm-btn-ghost { background: transparent; border-color: var(--dm-line); color: var(--dm-ink); }
.dm-btn-ghost:hover { border-color: var(--dm-tangerine); color: var(--dm-tangerine); }
.dm-btn-sm { padding: 8px 14px; font-size: .82rem; box-shadow: 2px 2px 0 var(--dm-ink); }
.dm-btn-sm.dm-btn-ghost { box-shadow: none; }
.dm-btn-full { width: 100%; }
.dm-btn:active { transform: scale(.98); }

/* ── Map ──────────────────────────────────────────────────────────────────── */
.dm-map-wrap { position: relative; border-radius: var(--dm-radius); overflow: hidden; border: 1.5px solid var(--dm-line); margin: 18px 0; box-shadow: var(--dm-shadow); }
.dm-map-canvas { width: 100%; height: 420px; background: var(--dm-sand); }
.dm-map-preloader {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; background: var(--dm-warm); color: var(--dm-muted); font-size: .85rem;
  transition: opacity .25s ease; z-index: 5;
}
.dm-map-preloader.is-hidden { opacity: 0; pointer-events: none; }
.dm-spinner {
  width: 30px; height: 30px; border-radius: 50%;
  border: 3px solid var(--dm-line); border-top-color: var(--dm-tangerine);
  animation: dm-spin .8s linear infinite;
}
@keyframes dm-spin { to { transform: rotate(360deg); } }
.dm-map-note { font-size: .78rem; color: var(--dm-muted); margin-top: 6px; }
.dm-pop { font-size: .85rem; line-height: 1.5; font-family: var(--dm-font-sans); }
.dm-pop-title { font-weight: 700; margin-bottom: 4px; color: var(--dm-ink); }
.dm-pop-meta { color: var(--dm-muted); margin-bottom: 2px; }
.dm-pop a { color: var(--dm-tangerine); font-weight: 600; text-decoration: none; }

/* ── Detail page ──────────────────────────────────────────────────────────── */
.dm-detail-grid { display: grid; gap: 14px 32px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin: 18px 0; }
.dm-detail-field dt { font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--dm-muted); margin-bottom: 4px; font-weight: 700; }
.dm-detail-field dd { margin: 0; font-size: .95rem; line-height: 1.5; color: var(--dm-ink); }
.dm-disclaimer {
  background: var(--dm-sand); border: 1.5px dashed rgba(23, 61, 54, .4);
  border-radius: 8px 14px 8px 12px; padding: 14px 18px; font-size: .85rem;
  color: var(--dm-muted); margin: 20px 0;
}
.dm-category-row, .dm-price-row {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 12px 0; border-bottom: 1px solid var(--dm-line); flex-wrap: wrap;
}
.dm-category-row:last-child, .dm-price-row:last-child { border-bottom: none; }
.dm-category-name { font-weight: 600; color: var(--dm-ink); }
.dm-price-value { font-weight: 700; white-space: nowrap; color: var(--dm-ink); }
.dm-price-value[data-mode="free"] { color: var(--dm-green); }

/* ── Alerts / forms ───────────────────────────────────────────────────────── */
.dm-alert { border-radius: 10px; padding: 12px 16px; font-size: .88rem; margin: 14px 0; }
.dm-alert-danger  { background: #fdf1ee; color: #a3432a; border: 1.5px solid rgba(163, 67, 42, .35); }
.dm-alert-success { background: #eef6ec; color: #2f5c39; border: 1.5px solid rgba(114, 170, 119, .5); }
.dm-alert-info    { background: var(--dm-sand); color: var(--dm-muted); border: 1px dashed rgba(23, 61, 54, .3); }
.dm-form-field { margin-bottom: 14px; display: flex; flex-direction: column; gap: 6px; }
.dm-form-field label { font-weight: 700; font-size: .88rem; color: var(--dm-ink); }
.dm-form-card { max-width: 560px; }
.dm-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

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

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

/* ── Pre-footer CTA / trust band ──────────────────────────────────────────── */
.dm-prefooter {
  background: var(--dm-ink);
  border: 1.5px solid var(--dm-ink);
  border-radius: 7px 14px 7px 12px;
  color: var(--dm-cream); padding: 32px 24px; margin: 40px 16px 0;
  box-shadow: 5px 5px 0 var(--dm-tangerine);
}
.dm-prefooter-inner {
  max-width: 1000px; margin: 0 auto; display: flex; align-items: center;
  justify-content: space-between; gap: 20px; flex-wrap: wrap;
}
.dm-prefooter h2 { margin: 0 0 6px; font-size: 1.3rem; color: var(--dm-cream); }
.dm-prefooter p { margin: 0; color: rgba(255, 250, 241, .78); font-size: .92rem; }
.dm-prefooter .dm-btn-primary { background: var(--dm-cream); color: var(--dm-ink); border-color: var(--dm-cream); box-shadow: 3px 3px 0 rgba(255, 250, 241, .4); }
.dm-prefooter .dm-btn-primary:hover { opacity: 1; background: #fff; }
@media (max-width: 480px) {
  .dm-prefooter { margin: 32px 0 0; border-radius: 0; }
  .dm-prefooter-inner { flex-direction: column; text-align: center; }
}

/* RTL */
[dir="rtl"] .dm-detail-field dt { text-align: right; }