/* ============================================================
   Derivate — shared styles
   Plain CSS only (Tailwind CDN does NOT support @apply in
   standard <style> blocks, so all components live here).
   ============================================================ */

/* ----- Base typography ----- */
html {
  font-family: 'DM Sans', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
body { font-feature-settings: 'ss01' 1, 'cv11' 1; }

.font-display {
  font-family: 'Space Grotesk', system-ui, -apple-system, sans-serif;
  letter-spacing: -0.02em;
  font-feature-settings: 'ss01' 1;
}

:root { color-scheme: light dark; }
.price-tag { font-feature-settings: 'tnum' 1, 'cv11' 1; letter-spacing: -0.01em; }

/* ----- Text color utilities (better contrast than opacity tricks) ----- */
:root {
  --text-strong:  #0B1220;
  --text-default: #1E293B;
  --text-muted:   #475569;   /* slate-600 — body subdued */
  --text-subtle:  #64748B;   /* slate-500 — captions */
  --text-faint:   #94A3B8;   /* slate-400 — timestamps */
  --bg-soft:      #F1F5F9;
  --border-soft:  rgba(2, 6, 23, 0.08);
}
.dark {
  --text-strong:  #F8FAFC;
  --text-default: #E2E8F0;
  --text-muted:   #CBD5E1;   /* slate-300 */
  --text-subtle:  #94A3B8;   /* slate-400 */
  --text-faint:   #64748B;   /* slate-500 */
  --bg-soft:      rgba(255, 255, 255, 0.04);
  --border-soft:  rgba(255, 255, 255, 0.10);
}
.text-strong  { color: var(--text-strong); }
.text-muted   { color: var(--text-muted) !important; }
.text-subtle  { color: var(--text-subtle) !important; }
.text-faint   { color: var(--text-faint) !important; }

/* ----- Entrance animation ----- */
@keyframes rise { from { opacity: 0; transform: translateY(8px) } to { opacity: 1; transform: none } }
.rise   { animation: rise .6s cubic-bezier(.2,.7,.2,1) both; }
.rise-2 { animation-delay: .08s }
.rise-3 { animation-delay: .16s }
.rise-4 { animation-delay: .24s }
@media (prefers-reduced-motion: reduce) { .rise { animation: none } }

/* ============================================================
   Components (replace the failed @apply blocks)
   ============================================================ */

/* ----- Pill chips (fuel type, country) ----- */
.fuel-chip,
.country-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 0.875rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1;
  border: 1px solid rgba(2, 6, 23, 0.10);
  background: transparent;
  color: var(--text-default);
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
  font-family: inherit;
}
.dark .fuel-chip,
.dark .country-chip {
  border-color: rgba(255, 255, 255, 0.12);
  color: var(--text-default);
}
.fuel-chip:hover,
.country-chip:hover {
  background: rgba(2, 6, 23, 0.05);
}
.dark .fuel-chip:hover,
.dark .country-chip:hover {
  background: rgba(255, 255, 255, 0.06);
}
.fuel-chip.is-active,
.country-chip.is-active {
  background: #020617;
  color: #FFFFFF;
  border-color: transparent;
}
.dark .fuel-chip.is-active,
.dark .country-chip.is-active {
  background: #22C55E;
  color: #020617;
}

/* ----- Segmented control ----- */
.seg {
  padding: 0.5rem 0.875rem;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1;
  background: transparent;
  color: var(--text-default);
  border: 0;
  cursor: pointer;
  transition: background-color .18s, color .18s;
  font-family: inherit;
}
.seg:hover { background: rgba(2, 6, 23, 0.05); }
.dark .seg:hover { background: rgba(255, 255, 255, 0.06); }
.seg.is-active {
  background: #020617;
  color: #FFFFFF;
}
.dark .seg.is-active {
  background: #22C55E;
  color: #020617;
}

/* ----- Filter rows (checkbox lines) ----- */
.filter-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--text-default);
  cursor: pointer;
  user-select: none;
  transition: color .15s;
}
.filter-row:hover { color: #16A34A; }
.filter-row input[type='checkbox'] { width: 0.95rem; height: 0.95rem; accent-color: #22C55E; }

/* ============================================================
   Map markers (Leaflet)
   ============================================================ */
.derivate-marker-wrap { position: relative; }
.derivate-marker {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #22C55E;
  color: #02160B;
  font: 700 12px/1 'Space Grotesk', system-ui, sans-serif;
  padding: 6px 9px;
  border-radius: 9999px;
  white-space: nowrap;
  box-shadow: 0 6px 18px -6px rgba(34, 197, 94, 0.55), 0 0 0 1px rgba(2, 22, 11, 0.20);
  font-feature-settings: 'tnum' 1;
}
.derivate-marker.high { background: #F59E0B; color: #1A0F00; box-shadow: 0 6px 18px -6px rgba(245, 158, 11, 0.55), 0 0 0 1px rgba(26, 15, 0, 0.25); }
.derivate-marker.mid  { background: #06B6D4; color: #001218; box-shadow: 0 6px 18px -6px rgba(6, 182, 212, 0.55), 0 0 0 1px rgba(0, 18, 24, 0.25); }
.derivate-marker::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: inherit;
}

/* ----- Map cluster markers ----- */
.derivate-cluster {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #020617;
  color: #22C55E;
  font: 700 13px/1 'Space Grotesk', system-ui, sans-serif;
  box-shadow: 0 4px 12px -4px rgba(2, 6, 23, 0.6), 0 0 0 3px rgba(34, 197, 94, 0.25);
  font-feature-settings: 'tnum' 1;
}
.dark .derivate-cluster {
  background: #22C55E;
  color: #020617;
  box-shadow: 0 4px 12px -4px rgba(34, 197, 94, 0.6), 0 0 0 3px rgba(34, 197, 94, 0.15);
}
.marker-cluster-small .derivate-cluster { width: 36px; height: 36px; font-size: 12px; }
.marker-cluster-large .derivate-cluster { width: 48px; height: 48px; font-size: 15px; }

/* Override default leaflet markercluster styles */
.marker-cluster { background: none !important; }
.marker-cluster div { background: none !important; }

/* ----- Sparkline ----- */
.spark { stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }

/* ----- Leaflet base font ----- */
.leaflet-container { font-family: 'DM Sans', system-ui, sans-serif; }
.leaflet-popup-content-wrapper { border-radius: 12px; }
.dark .leaflet-popup-content-wrapper { background: #0B1220; color: #E2E8F0; }
.dark .leaflet-popup-tip { background: #0B1220; }

/* ============================================================
   Form inputs — cleaner default look
   ============================================================ */
input, select, textarea, button { font-family: inherit; }
select { background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  -webkit-appearance: none; appearance: none;
  padding-right: 2rem !important;
}

/* Focus ring */
:focus-visible {
  outline: 2px solid #22C55E;
  outline-offset: 2px;
  border-radius: 8px;
}

/* ============================================================
   Range slider
   ============================================================ */
input[type='range'] { accent-color: #22C55E; }

/* ============================================================
   Details/Summary (FAQ)
   ============================================================ */
details > summary { list-style: none; }
details > summary::-webkit-details-marker { display: none; }