/* ── TaraMap Module Styles ─────────────────────────────────────────────────
   TaraMap's own visual identity — "editorial cartography": warm paper
   surfaces, ink-green navigation, Tara Orange for active signals. Restored
   from the original React/Tailwind source (client/src/index.css design
   contract: background #F6F1E8, ink #173F36, accent #E66B37, "DM Serif
   Display" for headings + "Manrope" for body text).

   Still inherits the *structural* tokens from bimbly.css (loaded before this
   file) — --line/--radius/--shadow etc. where noted — but no longer falls
   back to the shared site's --brand/--brand2 purple for its own components;
   those are only the shared chrome's colors now, not this module's.

   Follows the class-naming convention of RecycleMapBimbly's styles.css
   (rm-*) with the tm-* prefix for this module.
   ─────────────────────────────────────────────────────────────────────────── */

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

:root {
  /* Paper + ink-green + Tara Orange palette */
  --tm-ink:         #173F36; /* primary ink-green (nav, headings, buttons) */
  --tm-ink-hover:    #275447; /* ink-green hover shade */
  --tm-paper:        #F6F1E8; /* warm paper page background */
  --tm-paper-card:   #FFFDF8; /* card / input surface */
  --tm-paper-soft:   #EEE9DE; /* muted paper tint (secondary surfaces) */
  --tm-paper-tint:   #E9EFE4; /* soft green tint (index numbers, chips) */
  --tm-map-tint:     #E7EEE5; /* map canvas underlay tint */
  --tm-accent:       #E66B37; /* Tara Orange — active signals / links */
  --tm-accent-hover: #D65F2D;
  --tm-accent-soft:  #FFF0E7; /* orange tint background */
  --tm-accent-soft-border: #F5D8C8;
  --tm-line:         #DED9CE; /* hairline border */
  --tm-text:         #173F36; /* body text on paper = ink */
  --tm-text-muted:   #63716A; /* secondary text */
  --tm-danger:       #BB4B37;

  --tm-font-serif: "DM Serif Display", Georgia, serif;
  --tm-font-sans:  "Manrope", Arial, sans-serif;

  /* Signature clipped-corner "field note" radius (large / small elements) */
  --tm-radius-lg: 3px 16px 3px 16px;
  --tm-radius-sm: 2px 8px 2px 8px;
  --tm-radius:    16px; /* legacy fallback, kept for anything unclaimed below */

  /* Status semaphore — current_status colors are rendered by PHP
     (TaraMapBimbly/app/bootstrap.php::tm_current_status_color) as literal
     hex values, not these variables; kept here for reference/consistency
     with the source's marker-ready/queue/full/unknown tones. */
  --tm-working: #22c55e;
  --tm-queue:   #f59e0b;
  --tm-full:    #ef4444;
  --tm-unknown: #75817A;
}

/* ── Module content area base ─────────────────────────────────────────────── */
/* Scoped to .section/.container (this module's own page-body wrapper) so the
   shared bimbly.eu header/nav/footer above and below stay untouched — those
   markup blocks never use .section/.container. */
.section {
  background: var(--tm-paper);
  color: var(--tm-text);
  font-family: var(--tm-font-sans);
}
.section h1 {
  font-family: var(--tm-font-serif);
  color: var(--tm-ink);
  letter-spacing: -.02em;
  line-height: 1.05;
}
.section a { color: var(--tm-ink); }
.section a:hover { color: var(--tm-accent); }

/* ── Account bar (module sub-nav) ────────────────────────────────────────── */

/* ── Hero (index.php intro) ──────────────────────────────────────────────── */
.tm-hero-section { background: var(--tm-paper); }
.tm-hero-section .eyebrow {
  color: var(--tm-accent); background: var(--tm-accent-soft);
  border-color: var(--tm-accent-soft-border);
}
.tm-hero-section h1 {
  font-family: var(--tm-font-serif); color: var(--tm-ink);
  font-size: clamp(2.2rem, 5vw, 3.6rem); line-height: .98;
  letter-spacing: -.03em; margin: 12px 0 14px;
}
.tm-hero-section .hero-copy {
  color: var(--tm-text-muted); font-size: 1.02rem; line-height: 1.7; max-width: 640px;
}

/* ── Cards / lists ────────────────────────────────────────────────────────── */
.tm-card {
  background: var(--tm-paper-card); border: 1px solid var(--tm-line);
  border-radius: var(--tm-radius-lg); padding: 20px 22px; margin-bottom: 18px;
  box-shadow: 4px 4px 0 rgba(23, 63, 54, .05);
}
.tm-card-title {
  font-family: var(--tm-font-serif); color: var(--tm-ink);
  font-weight: 400; font-size: 1.3rem; letter-spacing: -.01em; margin-bottom: 12px;
}

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

/* ── Badges ───────────────────────────────────────────────────────────────── */
.tm-badge {
  display: inline-block; padding: 4px 10px; border-radius: var(--tm-radius-sm); font-size: .72rem;
  font-weight: 800; letter-spacing: .01em; color: #fff; background: var(--badge-color, var(--tm-unknown));
  white-space: nowrap;
}
.tm-badge-status {
  display: inline-block; padding: 4px 10px; border-radius: var(--tm-radius-sm); font-size: .72rem;
  font-weight: 800; background: var(--tm-paper-tint); color: var(--tm-ink);
}
.tm-chip {
  display: inline-block; padding: 4px 10px; border-radius: 999px; font-size: .74rem;
  font-weight: 700; background: var(--tm-paper-soft); color: var(--tm-text-muted); border: 1px solid var(--tm-line);
  transition: border-color .15s ease, color .15s ease;
}
.tm-chip:hover { border-color: var(--tm-ink); color: var(--tm-ink); }

/* ── Search / filter form ─────────────────────────────────────────────────── */
.tm-search-form { display: flex; gap: 10px; flex-wrap: wrap; margin: 18px 0; align-items: center; }
.tm-search-input, .tm-select, .tm-input, .tm-textarea {
  border: 1px solid var(--tm-line); border-radius: var(--tm-radius-sm); padding: 12px 16px;
  font: 600 .95rem/1.3 var(--tm-font-sans); background: var(--tm-paper-card); color: var(--tm-ink);
  box-sizing: border-box; transition: border-color .18s ease, box-shadow .18s ease;
}
.tm-search-input:focus, .tm-select:focus, .tm-input:focus, .tm-textarea:focus {
  outline: none; border-color: var(--tm-ink); box-shadow: 0 0 0 3px rgba(23, 63, 54, .1);
}
.tm-search-input::placeholder, .tm-textarea::placeholder { color: #88918C; }
.tm-search-input { flex: 1 1 240px; min-width: 0; }
.tm-select { flex: 1 1 160px; min-width: 0; }
.tm-textarea { width: 100%; resize: vertical; min-height: 100px; font-family: inherit; }

.tm-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border-radius: var(--tm-radius-sm); padding: 12px 20px; font-weight: 800; text-decoration: none;
  border: 1px solid transparent; cursor: pointer; font-size: .92rem; font-family: var(--tm-font-sans);
  transition: opacity .15s ease, background-color .15s ease, border-color .15s ease, color .15s ease, transform .1s ease;
}
.tm-btn-primary { background: var(--tm-ink); color: var(--tm-paper-card); }
.tm-btn-primary:hover { background: var(--tm-ink-hover); opacity: 1; }
.tm-btn-primary:disabled { opacity: .5; cursor: not-allowed; }
.tm-btn-ghost { background: transparent; border-color: var(--tm-line); color: var(--tm-ink); }
.tm-btn-ghost:hover { border-color: var(--tm-ink); }
.tm-btn-sm { padding: 8px 14px; font-size: .82rem; }
.tm-btn-full { width: 100%; }
.tm-btn:active { transform: scale(.98); }

.tm-toggle { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; font-size: .85rem; color: var(--tm-text); }
.tm-toggle-track {
  position: relative; width: 40px; height: 22px; border-radius: 999px;
  background: var(--tm-line); transition: background-color .2s ease; flex-shrink: 0;
}
.tm-toggle-track::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px;
  border-radius: 50%; background: var(--tm-paper-card); box-shadow: 0 1px 2px rgba(0,0,0,.25);
  transition: transform .2s ease;
}
.tm-toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.tm-toggle input:checked + .tm-toggle-track { background: var(--tm-ink); }
.tm-toggle input:checked + .tm-toggle-track::after { transform: translateX(18px); }
.tm-toggle input:focus-visible + .tm-toggle-track { outline: 2px solid var(--tm-accent); outline-offset: 2px; }

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

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

/* ── Alerts / forms ───────────────────────────────────────────────────────── */
.tm-alert { border-radius: var(--tm-radius-sm); padding: 12px 16px; font-size: .88rem; margin: 14px 0; font-family: var(--tm-font-sans); }
.tm-alert-danger  { background: #FDEAE7; color: #9F352D; border: 1px solid #F3C9C0; }
.tm-alert-success { background: #E7F1E9; color: #477F5E; border: 1px solid #C8DBC9; }
.tm-alert-info    { background: var(--tm-paper-tint); color: var(--tm-text-muted); border: 1px dashed #9FB2A2; }
.tm-form-field { margin-bottom: 14px; display: flex; flex-direction: column; gap: 6px; }
.tm-form-field label { font-weight: 700; font-size: .85rem; color: var(--tm-ink); }
.tm-form-card { max-width: 560px; }
.tm-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

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

/* ── Compare table ────────────────────────────────────────────────────────── */
.tm-compare-table { width: 100%; border-collapse: collapse; font-size: .88rem; font-family: var(--tm-font-sans); }
.tm-compare-table th, .tm-compare-table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--tm-line); color: var(--tm-ink); }
.tm-compare-table th { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; font-weight: 800; color: var(--tm-text-muted); }
.tm-compare-wrap { overflow-x: auto; }

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

/* ── Pre-footer CTA / trust band ──────────────────────────────────────────── */
/* Ink-green band with Tara Orange accent — mirrors the source's dark
   trust-section / ecosystem-prefooter treatment instead of the generic
   purple gradient. */
.tm-prefooter {
  background: var(--tm-ink);
  color: var(--tm-paper-card); padding: 40px 24px; margin-top: 40px;
}
.tm-prefooter-inner {
  max-width: 1000px; margin: 0 auto; display: flex; align-items: center;
  justify-content: space-between; gap: 20px; flex-wrap: wrap;
}
.tm-prefooter h2 { font-family: var(--tm-font-serif); font-weight: 400; margin: 0 0 6px; font-size: 1.5rem; color: var(--tm-paper-card); }
.tm-prefooter p { margin: 0; color: rgba(246, 241, 232, .82); font-size: .92rem; }
.tm-prefooter .tm-btn-primary { background: var(--tm-accent); color: var(--tm-paper-card); }
.tm-prefooter .tm-btn-primary:hover { background: var(--tm-accent-hover); opacity: 1; }
@media (max-width: 480px) {
  .tm-prefooter-inner { flex-direction: column; text-align: center; }
}

/* RTL */
[dir="rtl"] .tm-detail-field dt { text-align: right; }
[dir="rtl"] .tm-toggle-track::after { left: auto; right: 2px; }
[dir="rtl"] .tm-toggle input:checked + .tm-toggle-track::after { transform: translateX(-18px); }
[dir="rtl"] .tm-compare-table th, [dir="rtl"] .tm-compare-table td { text-align: right; }


/* layout-fix-2026-09-29 (screenshot review): the hero had no top padding (pill on the sub-nav); main was transparent, so the lavender body gradient showed beside the 1200px hero - every other module paints main. */
.hero-section.tm-hero-section{padding-top:clamp(28px, 5vw, 56px)}
body:has(.tm-hero-section) main{background:rgb(246,241,232)}