/*
  Atlas | 3M — Redesign Override
  يُحمَّل بعد atlas.css ويعيد تعريف الـ visuals فقط
  الـ JS والـ functionality لا تتأثر
*/

/* ═══════════════════════════════════════════
   0. DESIGN TOKENS
═══════════════════════════════════════════ */
:root {
  --bg:      #07080a;
  --bg2:     #0d0f13;
  --bg3:     #131720;
  --surface: #0f1117;
  --card:    #13161e;

  --text:    #eef0f4;
  --soft:    #c0c8d4;
  --muted:   #6b7280;

  --red:     #d01219;
  --red2:    #ff1f2a;
  --red-dim: rgba(208,18,25,.10);
  --red-border: rgba(208,18,25,.22);

  --border:  rgba(255,255,255,.065);
  --border2: rgba(255,255,255,.11);

  --radius:  14px;
  --radius-sm: 8px;
  --radius-lg: 22px;
  --radius-xl: 30px;

  --shadow:  0 24px 80px rgba(0,0,0,.45);
  --shadow-sm: 0 8px 28px rgba(0,0,0,.3);
}

/* ═══════════════════════════════════════════
   1. GLOBAL RESET OVERRIDES
═══════════════════════════════════════════ */
body {
  background: var(--bg) !important;
  font-family: 'Tajawal', 'Inter', sans-serif !important;
  -webkit-font-smoothing: antialiased;
}

/* Kill the heavy background effects */
.noise-layer,
.noise,
.cursor-glow,
.gradient-orb {
  display: none !important;
}

/* ═══════════════════════════════════════════
   2. LOADER
═══════════════════════════════════════════ */
.site-loader {
  background: var(--bg) !important;
}

.loader-ring {
  border-color: rgba(255,255,255,.08) !important;
  border-top-color: var(--red) !important;
  width: 48px !important;
  height: 48px !important;
  border-width: 2px !important;
}

.loader-logo span {
  font-size: 28px !important;
  font-weight: 900 !important;
  letter-spacing: 2px;
}

.loader-logo p {
  font-size: 10px !important;
  letter-spacing: 4px !important;
  color: var(--muted) !important;
}

/* ═══════════════════════════════════════════
   3. HEADER / NAV
═══════════════════════════════════════════ */
.site-header {
  background: rgba(7,8,10,.92) !important;
  border-bottom: 1px solid var(--border) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  box-shadow: none !important;
  height: 68px !important;
  padding: 0 5vw !important;
}

/* Brand */
.brand {
  gap: 12px !important;
  align-items: center !important;
}

.brand-logos img {
  height: 28px !important;
  width: auto !important;
}

.brand-logos span {
  color: var(--muted) !important;
  font-weight: 300 !important;
}

.brand-text strong {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--text) !important;
  letter-spacing: .2px;
}

.brand-text small {
  font-size: 10px !important;
  letter-spacing: 2px !important;
  color: var(--muted) !important;
  font-weight: 400 !important;
}

/* Desktop nav links */
.desktop-nav a,
.desktop-nav .atlas-services-dd > a {
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--muted) !important;
  transition: color .2s !important;
  padding: 6px 0 !important;
  border-bottom: none !important;
  background: none !important;
}

.desktop-nav a:hover,
.desktop-nav .atlas-services-dd:hover > a {
  color: var(--text) !important;
}

/* Services dropdown */
.atlas-services-panel {
  background: var(--surface) !important;
  border: 1px solid var(--border2) !important;
  border-radius: var(--radius) !important;
  box-shadow: 0 24px 60px rgba(0,0,0,.55) !important;
  padding: 20px !important;
  top: calc(100% + 12px) !important;
}

.atlas-services-panel a {
  font-size: 13px !important;
  color: var(--muted) !important;
  padding: 5px 0 !important;
  transition: color .15s !important;
}

.atlas-services-panel a:hover { color: var(--text) !important; }

.atlas-services-panel b {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 1.5px !important;
  color: var(--red2) !important;
  text-transform: uppercase !important;
}

/* Header buttons */
.primary-btn,
a.primary-btn {
  background: var(--red) !important;
  border: none !important;
  border-radius: var(--radius-sm) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  padding: 9px 20px !important;
  color: #fff !important;
  transition: background .2s, transform .15s !important;
  box-shadow: none !important;
}

.primary-btn:hover,
a.primary-btn:hover {
  background: var(--red2) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 20px rgba(208,18,25,.3) !important;
}

.ghost-btn,
.change-region-btn {
  background: transparent !important;
  border: 1px solid var(--border2) !important;
  border-radius: var(--radius-sm) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--soft) !important;
  padding: 8px 16px !important;
  transition: border-color .2s, color .2s !important;
  box-shadow: none !important;
}

.ghost-btn:hover,
.change-region-btn:hover {
  border-color: rgba(255,255,255,.22) !important;
  color: var(--text) !important;
  background: transparent !important;
}

.theme-toggle,
.lang-btn {
  width: 36px !important;
  height: 36px !important;
  border-radius: var(--radius-sm) !important;
  background: transparent !important;
  border: 1px solid var(--border) !important;
  color: var(--muted) !important;
  font-size: 14px !important;
  transition: border-color .2s, color .2s !important;
}

.theme-toggle:hover, .lang-btn:hover {
  border-color: var(--border2) !important;
  color: var(--text) !important;
}

/* ═══════════════════════════════════════════
   4. MOBILE MENU
═══════════════════════════════════════════ */
.mobile-menu {
  background: var(--surface) !important;
  border-bottom: 1px solid var(--border) !important;
  box-shadow: 0 20px 60px rgba(0,0,0,.5) !important;
}

.mobile-menu-content a,
.mobile-menu-content button {
  font-size: 15px !important;
  font-weight: 500 !important;
  color: var(--soft) !important;
  padding: 12px 0 !important;
  border-bottom: 1px solid var(--border) !important;
  background: none !important;
}

.mobile-menu-content a:hover,
.mobile-menu-content button:hover {
  color: var(--text) !important;
}

.mobile-center-btn {
  background: var(--red) !important;
  border-radius: var(--radius-sm) !important;
  color: #fff !important;
  text-align: center !important;
  padding: 14px !important;
  font-weight: 700 !important;
  border: none !important;
}

/* ═══════════════════════════════════════════
   5. REGION POPUP
═══════════════════════════════════════════ */
.region-popup {
  background: rgba(0,0,0,.65) !important;
  backdrop-filter: blur(10px) !important;
}

.region-card {
  background: var(--card) !important;
  border: 1px solid var(--border2) !important;
  border-radius: var(--radius-xl) !important;
  box-shadow: var(--shadow) !important;
  padding: 40px 32px !important;
}

.region-card h2 {
  font-size: 26px !important;
  font-weight: 800 !important;
  color: var(--text) !important;
}

.region-card p {
  font-size: 14px !important;
  color: var(--muted) !important;
}

.region-card span {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 2px !important;
  color: var(--red2) !important;
}

.region-actions button {
  background: var(--bg3) !important;
  border: 1px solid var(--border2) !important;
  border-radius: var(--radius) !important;
  padding: 18px 14px !important;
  transition: border-color .2s, background .2s !important;
  box-shadow: none !important;
}

.region-actions button:hover {
  border-color: var(--red-border) !important;
  background: var(--red-dim) !important;
}

.region-actions button strong {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--text) !important;
}

.region-actions button small {
  font-size: 11px !important;
  color: var(--muted) !important;
}

/* ═══════════════════════════════════════════
   6. HERO
═══════════════════════════════════════════ */
.hero {
  background: var(--bg) !important;
}

.hero-slide {
  background-size: cover !important;
  background-position: center !important;
}

/* Darker, cleaner overlay */
.hero-vignette {
  background: linear-gradient(
    to left,
    rgba(7,8,10,.78) 0%,
    rgba(7,8,10,.55) 40%,
    rgba(7,8,10,.25) 100%
  ) !important;
}

.hero-content .eyebrow {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 3px !important;
  color: var(--red2) !important;
  background: var(--red-dim) !important;
  border: 1px solid var(--red-border) !important;
  padding: 5px 14px !important;
  border-radius: 100px !important;
  display: inline-block !important;
  margin-bottom: 20px !important;
}

.hero-content h1 {
  font-size: clamp(38px, 5vw, 72px) !important;
  font-weight: 900 !important;
  line-height: 1.12 !important;
  color: var(--text) !important;
  letter-spacing: -1px !important;
  text-shadow: 0 4px 30px rgba(0,0,0,.5) !important;
}

.hero-content h1 span {
  color: var(--red2) !important;
}

.hero-content p {
  font-size: 16px !important;
  color: rgba(255,255,255,.7) !important;
  line-height: 1.75 !important;
  max-width: 500px !important;
}

.hero-actions {
  gap: 12px !important;
  margin-top: 32px !important;
}

/* glass-btn in hero */
.glass-btn {
  background: rgba(255,255,255,.07) !important;
  border: 1px solid rgba(255,255,255,.15) !important;
  border-radius: var(--radius-sm) !important;
  color: var(--text) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 9px 20px !important;
  backdrop-filter: blur(10px) !important;
  transition: background .2s !important;
}

.glass-btn:hover {
  background: rgba(255,255,255,.12) !important;
}

/* Hero metrics bar */
.hero-metrics {
  background: rgba(7,8,10,.82) !important;
  border-top: 1px solid var(--border) !important;
  backdrop-filter: blur(20px) !important;
  padding: 18px 5vw !important;
}

.hero-metrics div {
  gap: 6px !important;
}

.hero-metrics strong {
  font-size: 26px !important;
  font-weight: 900 !important;
  color: var(--text) !important;
  letter-spacing: -1px !important;
}

.hero-metrics span {
  font-size: 12px !important;
  color: var(--muted) !important;
  font-weight: 500 !important;
}

/* Slider dots */
.hero-dots button {
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,.25) !important;
  border: none !important;
  transition: width .3s, background .3s !important;
}

.hero-dots button.active {
  width: 24px !important;
  border-radius: 3px !important;
  background: var(--red) !important;
}

/* ═══════════════════════════════════════════
   7. SECTIONS — COMMON
═══════════════════════════════════════════ */
.section {
  padding: 90px 5vw !important;
}

.section-head {
  margin-bottom: 48px !important;
}

.section-head .eyebrow,
.section > .section-head > span.eyebrow {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 2.5px !important;
  color: var(--red2) !important;
  text-transform: uppercase !important;
  background: none !important;
  border: none !important;
  padding: 0 !important;
  display: block !important;
  margin-bottom: 12px !important;
}

.section-head h2 {
  font-size: clamp(26px, 3vw, 42px) !important;
  font-weight: 800 !important;
  color: var(--text) !important;
  line-height: 1.18 !important;
  letter-spacing: -.4px !important;
  margin-bottom: 14px !important;
}

.section-head p {
  font-size: 15px !important;
  color: var(--muted) !important;
  line-height: 1.7 !important;
  max-width: 540px !important;
}

/* ═══════════════════════════════════════════
   8. SERVICES
═══════════════════════════════════════════ */
.services-grid.three-service-grid {
  gap: 2px !important;
  background: var(--border) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  overflow: hidden !important;
}

.service-card {
  background: var(--card) !important;
  border: none !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  position: relative !important;
  transition: background .25s !important;
}

.service-card:hover {
  background: #171b24 !important;
}

.service-card img {
  height: 220px !important;
  object-fit: cover !important;
  opacity: .65 !important;
  transition: opacity .4s, transform .6s !important;
  filter: grayscale(.2) !important;
}

.service-card:hover img {
  opacity: .8 !important;
  transform: scale(1.04) !important;
}

.service-content {
  padding: 24px !important;
  background: none !important;
}

.service-content span {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 2px !important;
  color: var(--red2) !important;
  display: block !important;
  margin-bottom: 8px !important;
}

.service-content h3 {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--text) !important;
  margin-bottom: 8px !important;
}

.service-content p {
  font-size: 13px !important;
  color: var(--muted) !important;
  line-height: 1.65 !important;
}

/* ═══════════════════════════════════════════
   9. PARTNERS MARQUEE
═══════════════════════════════════════════ */
.partners-section {
  background: var(--surface) !important;
  border-top: 1px solid var(--border) !important;
  border-bottom: 1px solid var(--border) !important;
  padding: 0 !important;
}

.partners-section .section-head {
  padding: 60px 5vw 0 !important;
  margin-bottom: 0 !important;
}

.partner-logo-card {
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  transition: border-color .2s !important;
}

.partner-logo-card:hover {
  border-color: var(--border2) !important;
}

.partner-logo-card img {
  filter: grayscale(.3) brightness(.95) !important;
  transition: filter .25s !important;
}

.partner-logo-card:hover img {
  filter: grayscale(0) brightness(1.05) !important;
}

/* ═══════════════════════════════════════════
   10. CENTERS MAP + CARDS
═══════════════════════════════════════════ */
.map-section {
  background: var(--bg) !important;
}

/* Map container */
.atlas-real-map,
#regionMap {
  border: 1px solid var(--border2) !important;
  border-radius: var(--radius-xl) !important;
  overflow: hidden !important;
  box-shadow: var(--shadow) !important;
}

/* Center search input */
#centerSearch {
  background: var(--card) !important;
  border: 1px solid var(--border2) !important;
  border-radius: var(--radius-sm) !important;
  color: var(--text) !important;
  font-size: 14px !important;
  padding: 11px 16px !important;
  transition: border-color .2s !important;
  font-family: inherit !important;
}

#centerSearch:focus {
  outline: none !important;
  border-color: rgba(208,18,25,.45) !important;
}

/* City / service filters */
#cityFilter,
#serviceFilter,
#countryFilter {
  background: var(--card) !important;
  border: 1px solid var(--border2) !important;
  border-radius: var(--radius-sm) !important;
  color: var(--soft) !important;
  font-size: 13px !important;
  padding: 10px 14px !important;
  font-family: inherit !important;
  cursor: pointer !important;
}

/* Center cards */
.center-card {
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  transition: border-color .2s, transform .2s !important;
  margin-bottom: 12px !important;
}

.center-card:hover {
  border-color: var(--border2) !important;
  transform: translateY(-2px) !important;
}

.center-card-head span {
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 1.5px !important;
  padding: 3px 10px !important;
  border-radius: 100px !important;
  background: var(--red-dim) !important;
  border: 1px solid var(--red-border) !important;
  color: var(--red2) !important;
}

.center-card h4 {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--text) !important;
  line-height: 1.4 !important;
  margin: 10px 0 6px !important;
}

.center-card p {
  font-size: 13px !important;
  color: var(--muted) !important;
  line-height: 1.6 !important;
}

.center-tags em {
  font-style: normal !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  padding: 4px 10px !important;
  border-radius: 100px !important;
  background: rgba(255,255,255,.05) !important;
  border: 1px solid var(--border) !important;
  color: var(--soft) !important;
}

.center-address,
.center-phone {
  font-size: 12px !important;
  color: var(--muted) !important;
}

.center-address i,
.center-phone i {
  color: var(--red2) !important;
  font-size: 11px !important;
}

/* Center action buttons */
.center-actions a {
  font-size: 12px !important;
  font-weight: 600 !important;
  padding: 7px 12px !important;
  border-radius: var(--radius-sm) !important;
  background: rgba(255,255,255,.05) !important;
  border: 1px solid var(--border) !important;
  color: var(--soft) !important;
  transition: background .2s, border-color .2s !important;
}

.center-actions a:hover {
  background: rgba(255,255,255,.09) !important;
  border-color: var(--border2) !important;
  color: var(--text) !important;
}

/* center count summary bar */
.center-summary {
  background: rgba(13,15,23,.9) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  backdrop-filter: blur(16px) !important;
}

.center-summary strong {
  font-size: 28px !important;
  font-weight: 900 !important;
  color: var(--red2) !important;
  letter-spacing: -1px !important;
}

.reset-filters-btn {
  background: linear-gradient(135deg, var(--red), #900) !important;
  border: none !important;
  border-radius: var(--radius-sm) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  box-shadow: none !important;
  padding: 8px 14px !important;
}

/* Scrollbar inside center panel */
.center-panel::-webkit-scrollbar { width: 5px !important; }
.center-panel::-webkit-scrollbar-track { background: transparent !important; }
.center-panel::-webkit-scrollbar-thumb {
  background: rgba(208,18,25,.4) !important;
  border-radius: 10px !important;
}

/* ═══════════════════════════════════════════
   11. SPECIAL OFFERS
═══════════════════════════════════════════ */
.special-offers {
  background: var(--surface) !important;
  border-top: 1px solid var(--border) !important;
  border-bottom: 1px solid var(--border) !important;
}

.offer-slide {
  border-radius: var(--radius-lg) !important;
  overflow: hidden !important;
}

.offer-slide img {
  border-radius: var(--radius-lg) !important;
}

/* ═══════════════════════════════════════════
   12. FINAL CTA
═══════════════════════════════════════════ */
.final-cta {
  background:
    radial-gradient(ellipse 60% 70% at 50% 50%, rgba(208,18,25,.15), transparent),
    linear-gradient(160deg, #0c0e14, var(--bg)) !important;
  border-top: 1px solid var(--border) !important;
  position: relative !important;
  overflow: hidden !important;
}

/* subtle grid */
.final-cta::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background-image:
    linear-gradient(rgba(255,255,255,.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.02) 1px, transparent 1px) !important;
  background-size: 56px 56px !important;
  pointer-events: none !important;
}

.final-bg {
  display: none !important;
}

.final-content .eyebrow {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 2.5px !important;
  color: var(--red2) !important;
  display: block !important;
  margin-bottom: 16px !important;
  background: none !important;
  border: none !important;
  padding: 0 !important;
}

.final-content h2 {
  font-size: clamp(36px, 5vw, 64px) !important;
  font-weight: 900 !important;
  color: var(--text) !important;
  letter-spacing: -1.5px !important;
  line-height: 1.1 !important;
  margin-bottom: 16px !important;
}

.final-content p {
  font-size: 16px !important;
  color: var(--muted) !important;
  max-width: 480px !important;
  margin: 0 auto 32px !important;
  line-height: 1.7 !important;
}

/* ═══════════════════════════════════════════
   13. FOOTER
═══════════════════════════════════════════ */
.atlas-footer {
  background: var(--surface) !important;
  border-top: 1px solid var(--border) !important;
}

.atlas-footer-top {
  padding: 64px 5vw 48px !important;
  border-bottom: 1px solid var(--border) !important;
}

.footer-brand-side h2 {
  font-size: 20px !important;
  font-weight: 700 !important;
  color: var(--text) !important;
  margin: 14px 0 8px !important;
}

.footer-brand-side p {
  font-size: 13px !important;
  color: var(--muted) !important;
  line-height: 1.7 !important;
  max-width: 260px !important;
}

.footer-logos img {
  height: 24px !important;
  width: auto !important;
  opacity: .85 !important;
}

.footer-logos span {
  color: var(--muted) !important;
}

/* Social icons */
.footer-social a {
  width: 36px !important;
  height: 36px !important;
  border-radius: var(--radius-sm) !important;
  background: transparent !important;
  border: 1px solid var(--border) !important;
  color: var(--muted) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: border-color .2s, color .2s !important;
}

.footer-social a:hover {
  border-color: var(--border2) !important;
  color: var(--text) !important;
}

/* Footer columns */
.footer-column h3 {
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 1.5px !important;
  color: var(--soft) !important;
  margin-bottom: 18px !important;
  text-transform: uppercase !important;
}

.footer-column a {
  font-size: 13px !important;
  color: var(--muted) !important;
  transition: color .2s !important;
  font-weight: 400 !important;
  display: block !important;
  margin-bottom: 10px !important;
}

.footer-column a:hover { color: var(--soft) !important; }

.footer-complaints-btn {
  background: linear-gradient(135deg, var(--red), #8b0f14) !important;
  border-radius: var(--radius-sm) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  border: none !important;
  padding: 10px 16px !important;
  color: #fff !important;
  box-shadow: none !important;
  transition: background .2s !important;
}

.footer-complaints-btn:hover {
  background: linear-gradient(135deg, var(--red2), #a01015) !important;
}

.atlas-footer-bottom {
  padding: 22px 5vw !important;
  background: var(--bg) !important;
}

.atlas-footer-bottom span,
.atlas-footer-bottom a {
  font-size: 12px !important;
  color: var(--muted) !important;
}

.atlas-footer-bottom a:hover { color: var(--soft) !important; }

/* ═══════════════════════════════════════════
   14. FLOATING ACTIONS
═══════════════════════════════════════════ */
.floating-actions {
  gap: 10px !important;
}

.float-btn {
  width: 48px !important;
  height: 48px !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.35) !important;
  font-size: 18px !important;
  transition: transform .2s, box-shadow .2s !important;
}

.float-btn:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 14px 32px rgba(0,0,0,.4) !important;
}

.float-btn.whatsapp {
  background: #25d366 !important;
  box-shadow: 0 8px 24px rgba(37,211,102,.3) !important;
}

.float-btn.call {
  background: var(--red) !important;
  box-shadow: 0 8px 24px rgba(208,18,25,.3) !important;
}

/* ═══════════════════════════════════════════
   15. MENU BUTTON (hamburger)
═══════════════════════════════════════════ */
.menu-btn span {
  background: var(--soft) !important;
  height: 1.5px !important;
  border-radius: 2px !important;
}

/* ═══════════════════════════════════════════
   16. SPECIAL OFFERS POPUP (National Day)
═══════════════════════════════════════════ */
.national-day-popup-content {
  background: var(--card) !important;
  border: 1px solid var(--border2) !important;
  border-radius: var(--radius-xl) !important;
}

/* ═══════════════════════════════════════════
   17. LEAFLET MAP OVERRIDES
═══════════════════════════════════════════ */
.atlas-leaflet-map .leaflet-tile {
  filter: grayscale(1) contrast(1.08) brightness(.68) !important;
}

.atlas-leaflet-marker .marker-bubble {
  background: linear-gradient(135deg, var(--red), #900) !important;
  border: 1px solid rgba(255,255,255,.15) !important;
  border-radius: 100px !important;
  font-family: 'Tajawal', sans-serif !important;
  font-weight: 700 !important;
  box-shadow: 0 0 0 5px rgba(208,18,25,.14), 0 12px 30px rgba(0,0,0,.4) !important;
}

.atlas-leaflet-marker .marker-bubble b {
  background: #fff !important;
  color: var(--red) !important;
}

.leaflet-control-zoom a {
  background: rgba(10,12,18,.92) !important;
  color: var(--soft) !important;
  border-color: var(--border2) !important;
}

.atlas-map-hint {
  background: rgba(0,0,0,.6) !important;
  border: 1px solid var(--border) !important;
  backdrop-filter: blur(12px) !important;
  font-size: 12px !important;
  border-radius: 100px !important;
}

/* ═══════════════════════════════════════════
   18. RATING STARS
═══════════════════════════════════════════ */
.center-rating b { color: #f59e0b !important; }
.center-rating strong {
  font-size: 13px !important;
  color: var(--soft) !important;
}
.center-rating small {
  font-size: 11px !important;
  color: var(--muted) !important;
}

/* ═══════════════════════════════════════════
   19. ECOSYSTEM / INTRO GRID
═══════════════════════════════════════════ */
.eco-card {
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  transition: border-color .2s !important;
}

.eco-card:hover {
  border-color: var(--border2) !important;
}

.eco-card span {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 2px !important;
  color: var(--red2) !important;
}

.eco-card h3 {
  font-size: 17px !important;
  font-weight: 700 !important;
  color: var(--text) !important;
}

.eco-card p {
  font-size: 13px !important;
  color: var(--muted) !important;
}