/**
 * CoinShows.us — brand tokens + dark mode (aligned with SpotPro / CDX directory patterns).
 * Logo accent blue ≈ #01b1d7 (cyan from CoinShows wordmark).
 */
:root {
  color-scheme: light;
  --cs-brand: #01b1d7;
  --cs-brand-hover: #019cbe;
  --cs-brand-bright: #0dd3fe;
  --cs-brand-deep: #0289a8;
  --cs-ink: #444444;
  --cs-ink-strong: #354144;
  --cs-muted: #62787d;
  --cs-bg: #ffffff;
  --cs-bg-soft: #f6f7f8;
  --cs-surface: #ffffff;
  --cs-border: #e9e9e9;
  --cs-topbar-bg: #ffffff;
  --cs-header-bg: #ffffff;
  --cs-footer: #1f2627;
  --cs-footer-top: #2a3336;
  --cs-footer-border: #354144;
  --cs-shadow: 0 4px 24px rgba(15, 23, 42, 0.06);
  --cs-radius: 0.55rem;
}

/* Primary action buttons → logo blue */
.btn-primary,
.btn-primary:focus,
.btn-primary:active,
button.btn-primary,
input[type="submit"].btn-primary,
#hero .btn-get-started,
.contact .php-email-form button[type="submit"],
.back-to-top,
#mc-embedded-subscribe,
.button.btn-primary,
button.button {
  --bs-btn-bg: var(--cs-brand);
  --bs-btn-border-color: var(--cs-brand);
  --bs-btn-hover-bg: var(--cs-brand-hover);
  --bs-btn-hover-border-color: var(--cs-brand-hover);
  --bs-btn-active-bg: var(--cs-brand-deep);
  --bs-btn-active-border-color: var(--cs-brand-deep);
  --bs-btn-disabled-bg: var(--cs-brand);
  --bs-btn-disabled-border-color: var(--cs-brand);
  background-color: var(--cs-brand) !important;
  border-color: var(--cs-brand) !important;
  color: #fff !important;
}

.btn-primary:hover,
#hero .btn-get-started:hover,
.contact .php-email-form button[type="submit"]:hover,
.back-to-top:hover,
#mc-embedded-subscribe:hover {
  background-color: var(--cs-brand-hover) !important;
  border-color: var(--cs-brand-hover) !important;
  color: #fff !important;
}

.btn-outline-primary {
  --bs-btn-color: var(--cs-brand);
  --bs-btn-border-color: var(--cs-brand);
  --bs-btn-hover-bg: var(--cs-brand);
  --bs-btn-hover-border-color: var(--cs-brand);
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--cs-brand-deep);
  --bs-btn-active-border-color: var(--cs-brand-deep);
  color: var(--cs-brand);
  border-color: var(--cs-brand);
}

a {
  color: var(--cs-brand);
}
a:hover {
  color: var(--cs-brand-bright);
}

/* Theme toggle (header) */
.cs-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.35rem;
  height: 2.35rem;
  margin-left: 0.5rem;
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-radius);
  background: var(--cs-bg-soft);
  color: var(--cs-ink-strong);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  flex-shrink: 0;
}
.cs-theme-toggle:hover {
  border-color: var(--cs-brand);
  color: var(--cs-brand);
  background: rgba(1, 177, 215, 0.08);
}
.cs-theme-toggle i {
  font-size: 1.05rem;
  line-height: 1;
}

#header .logo-wrap {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
#header .header-actions {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

/* ── Dark mode (richer, CDX / CDXList-inspired — keep CTAs brand blue) ── */
:root[data-theme="dark"] {
  color-scheme: dark;
  --cs-ink: #e8edf5;
  --cs-ink-strong: #f8fafc;
  --cs-muted: #94a3b8;
  --cs-muted-dim: #64748b;
  /* Layered navy depths (less flat gray) */
  --cs-bg: #030712;
  --cs-bg-soft: #0a1220;
  --cs-surface: #111a2b;
  --cs-surface-2: #162033;
  --cs-border: rgba(255, 255, 255, 0.09);
  --cs-border-bright: rgba(255, 255, 255, 0.16);
  --cs-topbar-bg: rgba(3, 7, 18, 0.88);
  --cs-header-bg: rgba(3, 7, 18, 0.78);
  --cs-footer: #020617;
  --cs-footer-top: #0a1220;
  --cs-footer-border: rgba(255, 255, 255, 0.08);
  --cs-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
  --cs-shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.55);
  /* Secondary warm accent for depth (not CTAs) */
  --cs-gold: #e4c65a;
  --cs-gold-glow: rgba(228, 198, 90, 0.22);
  --cs-cyan-glow: rgba(1, 177, 215, 0.16);
  /* Keep action / link brand blue */
  --cs-brand: #01b1d7;
  --cs-brand-hover: #0dd3fe;
  --cs-brand-bright: #38bdf8;
  --cs-brand-deep: #0284a8;
}

:root[data-theme="dark"] body {
  color: var(--cs-ink);
  background-color: var(--cs-bg);
  background-image:
    radial-gradient(ellipse 120% 70% at 50% -25%, rgba(1, 177, 215, 0.14), transparent 55%),
    radial-gradient(ellipse 55% 40% at 100% 8%, rgba(228, 198, 90, 0.07), transparent 50%),
    radial-gradient(ellipse 50% 35% at 0% 90%, rgba(1, 177, 215, 0.06), transparent 45%),
    linear-gradient(180deg, #030712 0%, #050a14 45%, #070f1a 100%);
  background-attachment: fixed;
}

/* subtle top grid wash (CDX-like, very light) */
:root[data-theme="dark"] body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.28;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 85% 55% at 50% 0%, black, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 85% 55% at 50% 0%, black, transparent 75%);
}
/* Keep topbar/header fixed (template uses fixed-top). Only lift main above grid wash. */
:root[data-theme="dark"] #topbar {
  position: fixed !important;
  z-index: 998 !important;
}
:root[data-theme="dark"] #header {
  position: fixed !important;
  z-index: 997 !important;
}
:root[data-theme="dark"] #main,
:root[data-theme="dark"] main,
:root[data-theme="dark"] #footer {
  position: relative;
  z-index: 1;
}

:root[data-theme="dark"] h1,
:root[data-theme="dark"] h2,
:root[data-theme="dark"] h3,
:root[data-theme="dark"] h4,
:root[data-theme="dark"] h5,
:root[data-theme="dark"] h6 {
  color: var(--cs-ink-strong);
}
/* Map bubbles: always dark ink on Google's light surface */
:root[data-theme="dark"] .gm-style .infowindow-content,
:root[data-theme="dark"] .gm-style .infowindow-content *,
:root[data-theme="dark"] .gm-style .cs-map-iw,
:root[data-theme="dark"] .gm-style .cs-map-iw *,
html[data-theme="dark"] .gm-style .infowindow-content,
html[data-theme="dark"] .gm-style .infowindow-content * {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
}

:root[data-theme="dark"] #topbar {
  background: var(--cs-topbar-bg);
  border-bottom: 1px solid var(--cs-border);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
}
:root[data-theme="dark"] #topbar .contact-info i {
  color: var(--cs-brand) !important;
}
:root[data-theme="dark"] #topbar .contact-info i a,
:root[data-theme="dark"] #topbar .contact-info i span {
  color: var(--cs-ink);
}
:root[data-theme="dark"] #topbar .social-links a {
  color: var(--cs-muted);
  border-left-color: var(--cs-border);
}
:root[data-theme="dark"] #topbar .social-links a:hover {
  color: var(--cs-brand-bright);
}

:root[data-theme="dark"] #header {
  background: var(--cs-header-bg);
  border-bottom: 1px solid var(--cs-border);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(18px) saturate(1.35);
  -webkit-backdrop-filter: blur(18px) saturate(1.35);
}
:root[data-theme="dark"] #header.header-scrolled {
  background: rgba(3, 7, 18, 0.92);
}
/*
 * Logo text: match CoinDealerX .cbd-brand-mark treatment
 *   box-shadow: 0 0 18px glow, inset 0 1px 0 rgba(255,255,255,.08)
 * Translated to text: soft outer halo (no offset) + tiny top rim light.
 */
:root[data-theme="dark"] #header .logo,
:root[data-theme="dark"] #header .logo h1,
:root[data-theme="dark"] #header .logo h1 a,
:root[data-theme="dark"] #header .logo h1 a:hover {
  color: #f1f5f9 !important;
  text-shadow:
    0 -1px 0 rgba(255, 255, 255, 0.14),
    0 0 12px rgba(255, 255, 255, 0.22),
    0 0 18px rgba(255, 255, 255, 0.12) !important;
}
:root[data-theme="dark"] #header .logo h1 a span,
:root[data-theme="dark"] #header .logo h1 a:hover span {
  color: #01b1d7 !important;
  text-shadow:
    0 -1px 0 rgba(255, 255, 255, 0.16),
    0 0 12px rgba(1, 177, 215, 0.45),
    0 0 18px rgba(1, 177, 215, 0.28) !important;
}

:root[data-theme="dark"] .navbar a,
:root[data-theme="dark"] .navbar a:focus,
:root[data-theme="dark"] .mobile-nav-toggle {
  color: var(--cs-ink);
}
:root[data-theme="dark"] .navbar a:hover,
:root[data-theme="dark"] .navbar .active,
:root[data-theme="dark"] .navbar .active:focus,
:root[data-theme="dark"] .navbar li:hover > a {
  color: var(--cs-brand-bright);
}
:root[data-theme="dark"] .navbar .dropdown ul {
  background: var(--cs-surface);
  border-color: var(--cs-border);
}
:root[data-theme="dark"] .navbar-mobile {
  background: rgba(6, 10, 14, 0.95);
}
:root[data-theme="dark"] .navbar-mobile ul {
  background-color: var(--cs-surface);
}
:root[data-theme="dark"] .navbar-mobile a,
:root[data-theme="dark"] .navbar-mobile a:focus {
  color: var(--cs-ink);
}

:root[data-theme="dark"] .cs-theme-toggle {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--cs-border-bright);
  color: rgba(255, 255, 255, 0.92);
  box-shadow: 0 0 16px var(--cs-cyan-glow), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
:root[data-theme="dark"] .cs-theme-toggle:hover {
  background: rgba(1, 177, 215, 0.16);
  border-color: var(--cs-brand);
  color: var(--cs-brand-bright);
  box-shadow: 0 0 20px rgba(1, 177, 215, 0.28);
}

:root[data-theme="dark"] .section-bg,
:root[data-theme="dark"] .breadcrumbs {
  background: linear-gradient(180deg, rgba(17, 26, 43, 0.9), rgba(10, 18, 32, 0.95));
  border-color: var(--cs-border);
}
:root[data-theme="dark"] .breadcrumbs h2 {
  color: var(--cs-ink-strong);
}
:root[data-theme="dark"] .breadcrumbs ol li,
:root[data-theme="dark"] .breadcrumbs ol li + li::before {
  color: var(--cs-muted);
}

:root[data-theme="dark"] .card,
:root[data-theme="dark"] .table,
:root[data-theme="dark"] .list-group-item {
  background-color: var(--cs-surface);
  color: var(--cs-ink);
  border-color: var(--cs-border);
  box-shadow: var(--cs-shadow);
}
:root[data-theme="dark"] .card {
  background:
    linear-gradient(165deg, rgba(255, 255, 255, 0.05), transparent 42%),
    var(--cs-surface);
  border: 1px solid var(--cs-border-bright);
  border-radius: 0.85rem;
}

:root[data-theme="dark"] .table {
  --bs-table-bg: var(--cs-surface);
  --bs-table-color: var(--cs-ink);
  --bs-table-border-color: var(--cs-border);
  --bs-table-striped-bg: #121820;
  --bs-table-hover-bg: #1a2330;
  --bs-table-striped-color: var(--cs-ink);
  --bs-table-hover-color: var(--cs-ink-strong);
}

:root[data-theme="dark"] .form-control,
:root[data-theme="dark"] .form-select,
:root[data-theme="dark"] input[type="text"],
:root[data-theme="dark"] input[type="email"],
:root[data-theme="dark"] input[type="search"],
:root[data-theme="dark"] input[type="tel"],
:root[data-theme="dark"] input[type="number"],
:root[data-theme="dark"] input[type="password"],
:root[data-theme="dark"] input[type="url"],
:root[data-theme="dark"] input[type="date"],
:root[data-theme="dark"] textarea,
:root[data-theme="dark"] select {
  background-color: var(--cs-surface-2) !important;
  border: 1px solid var(--cs-border-bright) !important;
  color: #f8fafc !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 4px 16px rgba(0, 0, 0, 0.2);
}
:root[data-theme="dark"] .form-control::placeholder,
:root[data-theme="dark"] input::placeholder,
:root[data-theme="dark"] textarea::placeholder {
  color: #94a3b8 !important;
  opacity: 1 !important;
}
:root[data-theme="dark"] .form-control:focus,
:root[data-theme="dark"] .form-select:focus,
:root[data-theme="dark"] input:focus,
:root[data-theme="dark"] textarea:focus {
  background-color: #1a2740 !important;
  border-color: var(--cs-brand) !important;
  color: #fff !important;
  box-shadow: 0 0 0 0.2rem rgba(1, 177, 215, 0.28), 0 0 20px var(--cs-cyan-glow) !important;
  outline: none !important;
}

/* ZIP search — elevated glass field */
:root[data-theme="dark"] #zipcodeInput,
:root[data-theme="dark"] input.zipcode,
:root[data-theme="dark"] #coinshows .form-control,
html[data-theme="dark"] #zipcodeInput,
html[data-bs-theme="dark"] #zipcodeInput {
  background: linear-gradient(180deg, #1a2740, #152033) !important;
  border: 1px solid var(--cs-border-bright) !important;
  color: #f8fafc !important;
  box-shadow:
    0 0 0 1px rgba(1, 177, 215, 0.12),
    0 8px 24px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}
:root[data-theme="dark"] #zipcodeInput::placeholder,
:root[data-theme="dark"] input.zipcode::placeholder,
html[data-theme="dark"] #zipcodeInput::placeholder {
  color: #94a3b8 !important;
  opacity: 1 !important;
}
:root[data-theme="dark"] #zipcodeInput:focus,
:root[data-theme="dark"] input.zipcode:focus {
  border-color: #01b1d7 !important;
  box-shadow: 0 0 0 0.2rem rgba(1, 177, 215, 0.35), 0 0 24px rgba(1, 177, 215, 0.2) !important;
}
:root[data-theme="dark"] #coinshows .input-group {
  border-radius: 0.65rem;
}
:root[data-theme="dark"] #coinshows .submit-btn,
:root[data-theme="dark"] #coinshows .btn-primary {
  border: 1px solid #01b1d7 !important;
  box-shadow: 0 4px 18px rgba(1, 177, 215, 0.35), 0 0 24px var(--cs-cyan-glow);
}

:root[data-theme="dark"] .text-muted,
:root[data-theme="dark"] .text-secondary {
  color: var(--cs-muted) !important;
}
:root[data-theme="dark"] .text-dark {
  color: var(--cs-ink-strong) !important;
}
:root[data-theme="dark"] .bg-white,
:root[data-theme="dark"] .bg-light {
  background-color: var(--cs-surface) !important;
  color: var(--cs-ink);
}
:root[data-theme="dark"] .border,
:root[data-theme="dark"] .border-bottom,
:root[data-theme="dark"] .border-top {
  border-color: var(--cs-border) !important;
}

:root[data-theme="dark"] .modal-content {
  background: var(--cs-surface);
  color: var(--cs-ink);
  border-color: var(--cs-border);
}
:root[data-theme="dark"] .modal-header,
:root[data-theme="dark"] .modal-footer {
  border-color: var(--cs-border);
}
:root[data-theme="dark"] .btn-close {
  filter: invert(1) grayscale(100%);
}

:root[data-theme="dark"] #footer {
  background: linear-gradient(180deg, #020617 0%, #030712 100%);
  border-top: 1px solid var(--cs-border);
}
:root[data-theme="dark"] #footer .footer-top {
  background:
    radial-gradient(ellipse 80% 60% at 20% 0%, rgba(1, 177, 215, 0.08), transparent 55%),
    radial-gradient(ellipse 50% 40% at 90% 100%, rgba(228, 198, 90, 0.05), transparent 50%),
    var(--cs-footer-top);
  border-bottom-color: var(--cs-footer-border);
}
:root[data-theme="dark"] #footer .footer-top h3,
:root[data-theme="dark"] #footer .footer-top h4 {
  color: #f8fafc !important;
}
:root[data-theme="dark"] #footer .footer-top h4::after,
:root[data-theme="dark"] #footer .footer-top .footer-info h3 {
  /* warm accent line feel when template draws underlines */
  border-color: var(--cs-gold);
}
:root[data-theme="dark"] #footer .footer-top .footer-links ul a,
:root[data-theme="dark"] #footer .footer-top .footer-info p,
:root[data-theme="dark"] #footer .copyright {
  color: #94a3b8;
}
:root[data-theme="dark"] #footer .footer-top .footer-links ul a:hover {
  color: var(--cs-brand-bright);
}
:root[data-theme="dark"] #footer .footer-top .social-links a {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--cs-border);
  color: #e2e8f0;
}
:root[data-theme="dark"] #footer .footer-top .social-links a:hover {
  background: rgba(1, 177, 215, 0.18);
  border-color: var(--cs-brand);
  color: #fff;
}

/* Map / table callouts stay readable */
:root[data-theme="dark"] #map {
  border: 1px solid var(--cs-border);
}
:root[data-theme="dark"] .alert-light {
  background: #1a2330;
  border-color: var(--cs-border);
  color: var(--cs-ink);
}
:root[data-theme="dark"] .dropdown-menu {
  background: var(--cs-surface);
  border-color: var(--cs-border);
}
:root[data-theme="dark"] .dropdown-item {
  color: var(--cs-ink);
}
:root[data-theme="dark"] .dropdown-item:hover {
  background: #1a2330;
  color: var(--cs-brand-bright);
}

/* Hero CTAs stay brand blue with a touch of glow (CDX-style depth) */
:root[data-theme="dark"] #hero .btn-get-started {
  background: var(--cs-brand) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 8px 28px rgba(1, 177, 215, 0.4), 0 0 32px var(--cs-cyan-glow);
}
:root[data-theme="dark"] #hero .btn-get-started:hover {
  background: var(--cs-brand-hover) !important;
  box-shadow: 0 10px 32px rgba(13, 211, 254, 0.45);
}

/* About / icon boxes elevated */
:root[data-theme="dark"] .about .content,
:root[data-theme="dark"] .services .icon-box,
:root[data-theme="dark"] .features .icon-box,
:root[data-theme="dark"] .contact .info,
:root[data-theme="dark"] .contact .php-email-form {
  border: 1px solid var(--cs-border-bright) !important;
  box-shadow: var(--cs-shadow) !important;
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.04), transparent 45%),
    var(--cs-surface) !important;
}
:root[data-theme="dark"] .services .icon-box i,
:root[data-theme="dark"] .features .icon-box i,
:root[data-theme="dark"] .about .icon-box i {
  color: var(--cs-brand-bright) !important;
}

/* Map area frame */
:root[data-theme="dark"] #map {
  border: 1px solid var(--cs-border-bright) !important;
  box-shadow: var(--cs-shadow-lg);
  border-radius: 12px;
}
:root[data-theme="dark"] .map-legend {
  color: var(--cs-muted) !important;
}

/* ── Google Maps InfoWindows ──
   Google's bubble is always a light surface. Keep text DARK in both themes.
   Never restyle .gm-style-iw-* box/tip/position (breaks marker anchor). */
.infowindow-content,
.cs-map-iw,
.infowindow-content *,
.cs-map-iw *,
:root[data-theme="dark"] .infowindow-content,
:root[data-theme="dark"] .cs-map-iw,
:root[data-theme="dark"] .infowindow-content *,
:root[data-theme="dark"] .cs-map-iw *,
html[data-theme="dark"] .infowindow-content,
html[data-theme="dark"] .cs-map-iw,
html[data-theme="dark"] .infowindow-content *,
html[data-theme="dark"] .cs-map-iw *,
html[data-bs-theme="dark"] .infowindow-content,
html[data-bs-theme="dark"] .cs-map-iw,
html[data-bs-theme="dark"] .infowindow-content *,
html[data-bs-theme="dark"] .cs-map-iw * {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
}

.infowindow-content,
.cs-map-iw {
  font-family: "Open Sans", system-ui, sans-serif !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
  background: transparent !important;
  padding: 0 10px 0 0 !important;
  max-width: 260px !important;
  text-align: left !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
  box-sizing: border-box !important;
}

.infowindow-content h2,
.infowindow-content h3,
.infowindow-content strong,
.cs-map-iw h2,
.cs-map-iw h3,
.cs-map-iw strong,
:root[data-theme="dark"] .infowindow-content h2,
:root[data-theme="dark"] .infowindow-content h3,
:root[data-theme="dark"] .infowindow-content strong,
:root[data-theme="dark"] .cs-map-iw h2,
:root[data-theme="dark"] .cs-map-iw h3,
:root[data-theme="dark"] .cs-map-iw strong,
html[data-theme="dark"] .infowindow-content h2,
html[data-theme="dark"] .infowindow-content strong,
html[data-bs-theme="dark"] .infowindow-content h2,
html[data-bs-theme="dark"] .infowindow-content strong {
  color: #0b1220 !important;
  -webkit-text-fill-color: #0b1220 !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  margin: 0 0 0.35rem !important;
  line-height: 1.25 !important;
  padding-right: 1.1rem !important; /* keep title clear of close X */
  display: block !important;
}

.infowindow-content p,
.cs-map-iw p,
:root[data-theme="dark"] .infowindow-content p,
:root[data-theme="dark"] .cs-map-iw p,
html[data-theme="dark"] .infowindow-content p,
html[data-bs-theme="dark"] .infowindow-content p {
  color: #1e293b !important;
  -webkit-text-fill-color: #1e293b !important;
  margin: 0 !important;
  font-size: 0.9rem !important;
  line-height: 1.4 !important;
  font-weight: 400 !important;
}

.infowindow-content a,
.cs-map-iw a,
:root[data-theme="dark"] .infowindow-content a,
html[data-theme="dark"] .infowindow-content a,
html[data-bs-theme="dark"] .infowindow-content a {
  color: #017a96 !important;
  -webkit-text-fill-color: #017a96 !important;
  font-size: inherit !important;
}

/*
 * Close (X) visibility — Google draws the glyph with a masked span.
 * Under color-scheme:dark the glyph can go near-white on the light bubble.
 * Only recolor the glyph; do not change box/position (keeps marker anchor).
 */
.gm-style-iw-chr .gm-ui-hover-effect,
.gm-style .gm-ui-hover-effect {
  opacity: 1 !important;
  background: transparent !important;
}
.gm-style-iw-chr .gm-ui-hover-effect > span,
.gm-style .gm-ui-hover-effect > span {
  /* dark X on light bubble */
  background-color: #0f172a !important;
  opacity: 1 !important;
}
:root[data-theme="dark"] .gm-style-iw-chr .gm-ui-hover-effect > span,
:root[data-theme="dark"] .gm-style .gm-ui-hover-effect > span,
html[data-theme="dark"] .gm-style-iw-chr .gm-ui-hover-effect > span,
html[data-bs-theme="dark"] .gm-style-iw-chr .gm-ui-hover-effect > span {
  background-color: #0f172a !important;
  opacity: 1 !important;
}
/* Hover affordance */
.gm-style-iw-chr .gm-ui-hover-effect:hover > span,
.gm-style .gm-ui-hover-effect:hover > span {
  background-color: #01b1d7 !important;
}

/* Event description / list cards in dark mode */
:root[data-theme="dark"] .event-description-block,
:root[data-theme="dark"] .list-group-item {
  background: var(--cs-surface) !important;
  color: var(--cs-ink) !important;
  border-color: var(--cs-border) !important;
}

/* ── Dealer profile page ── */
:root[data-theme="dark"] .dealer-hero {
  background: linear-gradient(135deg, #06101c 0%, #0c3a4a 45%, #017a96 100%) !important;
  color: #fff !important;
}
:root[data-theme="dark"] .dealer-hero h1,
:root[data-theme="dark"] .dealer-hero .h2,
:root[data-theme="dark"] .dealer-hero p,
:root[data-theme="dark"] .dealer-hero .small,
:root[data-theme="dark"] .dealer-hero a.text-white-50 {
  color: #fff !important;
}
:root[data-theme="dark"] .dealer-hero .btn-outline-light {
  color: #fff !important;
  border-color: rgba(255, 255, 255, 0.55) !important;
}
:root[data-theme="dark"] .dealer-hero .btn-outline-light:hover {
  background: rgba(1, 177, 215, 0.25) !important;
  border-color: var(--cs-brand) !important;
  color: #fff !important;
}
:root[data-theme="dark"] .dealer-hero .btn-light {
  background: #fff !important;
  color: #0f172a !important;
  border-color: #fff !important;
}
:root[data-theme="dark"] .dealer-logo-wrap {
  background: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.12);
}
:root[data-theme="dark"] .dealer-card {
  background:
    linear-gradient(165deg, rgba(255, 255, 255, 0.055), transparent 40%),
    var(--cs-surface) !important;
  color: var(--cs-ink) !important;
  border: 1px solid var(--cs-border-bright) !important;
  box-shadow: var(--cs-shadow) !important;
}
:root[data-theme="dark"] .dealer-card h1,
:root[data-theme="dark"] .dealer-card h2,
:root[data-theme="dark"] .dealer-card h3,
:root[data-theme="dark"] .dealer-card h4,
:root[data-theme="dark"] .dealer-card h5,
:root[data-theme="dark"] .dealer-card .h5,
:root[data-theme="dark"] .dealer-card strong {
  color: var(--cs-ink-strong) !important;
}
:root[data-theme="dark"] .dealer-card p,
:root[data-theme="dark"] .dealer-card li,
:root[data-theme="dark"] .dealer-card span,
:root[data-theme="dark"] .dealer-card div {
  color: var(--cs-ink) !important;
}
:root[data-theme="dark"] .dealer-card a {
  color: var(--cs-brand-bright) !important;
}
:root[data-theme="dark"] .dealer-card a:hover {
  color: #fff !important;
}
:root[data-theme="dark"] .dealer-services li {
  background: #0d1219 !important;
  color: var(--cs-ink) !important;
  border-color: var(--cs-border) !important;
}
:root[data-theme="dark"] .dealer-card.small.text-muted,
:root[data-theme="dark"] .dealer-card.text-muted,
:root[data-theme="dark"] .dealer-card .text-muted {
  color: var(--cs-muted) !important;
}
:root[data-theme="dark"] .inner-page {
  background: var(--cs-bg) !important;
  color: var(--cs-ink) !important;
}
:root[data-theme="dark"] .dealer-not-found h1 {
  color: var(--cs-ink-strong) !important;
}

/*
 * Section titles are layered:
 *   span = large watermark behind (light gray in light mode)
 *   h2   = foreground title (dark slate)
 * Dark mode was forcing both to the same light ink — restore the stack.
 */
.section-title {
  position: relative;
}
.section-title h2 {
  position: relative;
  z-index: 2;
}
.section-title span {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  user-select: none;
}

:root[data-theme="dark"] .section-title h2,
html[data-theme="dark"] .section-title h2,
html[data-bs-theme="dark"] .section-title h2 {
  color: #f1f5f9 !important;
  -webkit-text-fill-color: #f1f5f9 !important;
  z-index: 2 !important;
}

/* Soft layered watermark — cyan + hint of gold so it isn’t flat gray */
:root[data-theme="dark"] .section-title span,
html[data-theme="dark"] .section-title span,
html[data-bs-theme="dark"] .section-title span {
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  background: linear-gradient(90deg, rgba(1, 177, 215, 0.18), rgba(228, 198, 90, 0.12), rgba(1, 177, 215, 0.16));
  -webkit-background-clip: text;
  background-clip: text;
  z-index: 1 !important;
}

:root[data-theme="dark"] .section-title p,
html[data-theme="dark"] .section-title p {
  color: var(--cs-muted) !important;
  -webkit-text-fill-color: var(--cs-muted) !important;
  position: relative;
  z-index: 2;
}

/* Hero: title solid white, subtitle slightly softer + brand edge so layers read */
:root[data-theme="dark"] #hero h2,
html[data-theme="dark"] #hero h2 {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.45);
}
:root[data-theme="dark"] #hero p,
html[data-theme="dark"] #hero p {
  color: rgba(190, 240, 255, 0.92) !important;
  -webkit-text-fill-color: rgba(190, 240, 255, 0.92) !important;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.4);
}

/* Light mode: keep watermark pale (template default) if theme vars load */
.section-title span {
  color: #f3f5f5;
}
:root:not([data-theme="dark"]) .section-title h2 {
  color: #354144;
}

/* Section backgrounds that used near-white blues */
:root[data-theme="dark"] .section-bg,
:root[data-theme="dark"] section.portfolio,
:root[data-theme="dark"] #coinshows {
  background-color: var(--cs-bg) !important;
}
:root[data-theme="dark"] .section-bg {
  background-color: var(--cs-bg-soft) !important;
}

/* About / section boxes with white backgrounds in template */
:root[data-theme="dark"] .about .content,
:root[data-theme="dark"] .services .icon-box,
:root[data-theme="dark"] .features .icon-box,
:root[data-theme="dark"] .counts,
:root[data-theme="dark"] .contact .info,
:root[data-theme="dark"] .contact .php-email-form {
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.04), transparent 45%),
    var(--cs-surface) !important;
  color: var(--cs-ink) !important;
  border: 1px solid var(--cs-border-bright) !important;
  box-shadow: var(--cs-shadow) !important;
}
:root[data-theme="dark"] .services .icon-box h4 a,
:root[data-theme="dark"] .features .icon-box h4 a {
  color: var(--cs-ink-strong) !important;
}
:root[data-theme="dark"] .counts {
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(1, 177, 215, 0.1), transparent 60%),
    var(--cs-surface) !important;
}