/* ============================================================
   CHARGERBIH — cinematic layer
   Full sitewide dark, dramatic treatment. Loads after style.css
   and motion.css, overriding backgrounds/typography everywhere,
   not just the homepage hero.
   ============================================================ */

:root {
  --cine-bg: #030a10;
  --cine-bg-soft: #06131c;
  --cine-panel: #0b1c27;
  --cine-line: rgba(0, 229, 160, 0.16);
  --cine-text: #f3fbf7;
  --cine-muted: rgba(243, 251, 247, 0.62);

  /* Redefine the ORIGINAL base palette variables from style.css so every
     existing rule that references them (including ones with higher CSS
     specificity than anything added here) automatically adapts to the
     dark cinematic theme, instead of fighting each rule individually. */
  --color-dark: var(--cine-text);      /* was near-black text-on-light, now light text-on-dark */
  --color-text: var(--cine-text);
  --color-muted: var(--cine-muted);
  --color-border: var(--cine-line);
  --color-surface: rgba(255, 255, 255, 0.06);       /* was a light grey panel tint */
  --color-surface-strong: rgba(255, 255, 255, 0.1);
  --glow: 0 24px 60px rgba(0, 229, 160, 0.22);
  --glow-strong: 0 28px 70px rgba(0, 229, 160, 0.32);
  --shadow-soft: 0 18px 45px rgba(0, 0, 0, 0.35);
  --shadow-card: 0 26px 60px rgba(0, 0, 0, 0.4);
  /* --color-white / --color-black / --color-primary are intentionally
     NOT redefined: --color-white legitimately means "white" in a few
     places (e.g. button text on a solid colour fill) and must stay
     white regardless of theme; --color-primary is the brand green and
     still reads fine as an accent on dark surfaces. */
}

/* One necessary exception: member/company logo cards are deliberately
   kept on a light card (see below) so third-party logos of any colour
   stay legible — so their heading text needs to stay dark, not follow
   the global --color-dark flip above. */
.member-card h3 { color: #0f2419 !important; }

/* ---------- Coded map legend pins (replaces static map-legend.png) ---------- */
.map-legend-coded {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2.5rem;
  padding: 1.5rem 0 2.5rem;
}

.map-legend-coded__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
}

.map-legend-coded__item strong {
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.map-legend-coded__pin {
  position: relative;
  width: 34px;
  height: 34px;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  display: inline-block;
}

.map-legend-coded__pin::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 12px;
  background: rgba(3, 10, 16, 0.9);
  border-radius: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
}

.map-legend-coded__pin::before {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  animation: legend-pulse 2.2s ease-in-out infinite;
}

.map-legend-coded__item--free .map-legend-coded__pin { background: #35f0ae; box-shadow: 0 0 22px 4px rgba(53, 240, 174, 0.5); }
.map-legend-coded__item--free .map-legend-coded__pin::before { background: rgba(53, 240, 174, 0.25); }
.map-legend-coded__item--free strong { color: #35f0ae; }

.map-legend-coded__item--guests .map-legend-coded__pin { background: #ffb74d; box-shadow: 0 0 22px 4px rgba(255, 183, 77, 0.5); }
.map-legend-coded__item--guests .map-legend-coded__pin::before { background: rgba(255, 183, 77, 0.25); }
.map-legend-coded__item--guests strong { color: #ffb74d; }

.map-legend-coded__item--paid .map-legend-coded__pin { background: #64d4ff; box-shadow: 0 0 22px 4px rgba(100, 212, 255, 0.5); }
.map-legend-coded__item--paid .map-legend-coded__pin::before { background: rgba(100, 212, 255, 0.25); }
.map-legend-coded__item--paid strong { color: #64d4ff; }

@keyframes legend-pulse {
  0%, 100% { transform: scale(0.7) rotate(45deg); opacity: 0.7; }
  50% { transform: scale(1.15) rotate(45deg); opacity: 0.15; }
}

@media (prefers-reduced-motion: reduce) {
  .map-legend-coded__pin::before {
    animation: none;
  }
}

/* ---------- Leaflet zoom controls: match dark cinematic theme ---------- */
.leaflet-control-zoom {
  border: 1px solid var(--cine-line) !important;
  border-radius: 12px !important;
  overflow: hidden;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4) !important;
}

.leaflet-control-zoom a {
  width: 36px !important;
  height: 36px !important;
  line-height: 36px !important;
  background: rgba(6, 19, 28, 0.92) !important;
  color: var(--color-electric) !important;
  font-size: 1.2rem !important;
  font-weight: 700;
  border: none !important;
}

.leaflet-control-zoom a:first-child {
  border-bottom: 1px solid var(--cine-line) !important;
}

.leaflet-control-zoom a:hover {
  background: rgba(0, 229, 160, 0.18) !important;
  color: #fff !important;
}

.leaflet-control-attribution {
  background: rgba(3, 10, 16, 0.75) !important;
  color: var(--cine-muted) !important;
  border-radius: 8px 0 0 0;
}

.leaflet-control-attribution a {
  color: var(--color-electric) !important;
}

/* ---------- Article image gallery (post detail page) ---------- */
.article-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 0.85rem;
  margin-top: 1.5rem;
}

.article-gallery__item {
  display: block;
  width: 100%;
  padding: 0;
  border-radius: var(--radius-md, 14px);
  overflow: hidden;
  border: 1px solid var(--cine-line);
  aspect-ratio: 1 / 1;
  background: none;
  cursor: pointer;
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.article-gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.article-gallery__item:hover {
  transform: translateY(-4px) scale(1.04);
  border-color: var(--color-electric);
  box-shadow: 0 24px 60px rgba(0, 229, 160, 0.25);
}

/* ---------- Lightbox (click to enlarge gallery photo) ---------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 9990;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  background: rgba(3, 10, 16, 0.92);
  backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

.lightbox.is-open {
  opacity: 1;
  visibility: visible;
}

.lightbox img {
  max-width: min(92vw, 1100px);
  max-height: 88vh;
  border-radius: 16px;
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.6);
  object-fit: contain;
}

.lightbox__close {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(0, 229, 160, 0.35);
  background: rgba(6, 19, 28, 0.9);
  color: #fff;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}

.lightbox__close:hover {
  background: rgba(0, 229, 160, 0.2);
}

.text-link { color: var(--color-electric) !important; }
.news-slide__meta, .news-card__category, .news-card__date { color: var(--color-electric) !important; }

/* Leaflet map popups keep Leaflet's own white background (not part of
   our dark theme) — force dark, legible text inside them regardless of
   the global light-text variable flip above. */
.map-popup h3 { color: #0f2419 !important; }
.map-popup p { color: #4a5f56 !important; }
.map-popup__actions a:last-child { background: #0f2419 !important; }
.leaflet-popup-content-wrapper, .leaflet-popup-tip {
  background: #ffffff !important;
}

/* ---------- Sitewide route/car background animation ---------- */
.site-route-bg {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  opacity: 0.55;
}

.site-shell {
  position: relative;
  z-index: 1;
}

/* ---------- Sitewide dark cinematic backdrop ---------- */
html {
  /* Lenis (motion.js) fully owns smooth scrolling — the native CSS
     smooth-scroll from style.css fights it frame-by-frame and causes
     the stutter/lag some users noticed while scrolling. */
  scroll-behavior: auto !important;
}

body {
  background:
    radial-gradient(circle at 12% 8%, rgba(0, 229, 160, 0.10), transparent 38%),
    radial-gradient(circle at 88% 0%, rgba(0, 229, 160, 0.07), transparent 34%),
    radial-gradient(circle at 50% 100%, rgba(0, 229, 160, 0.05), transparent 40%),
    linear-gradient(180deg, var(--cine-bg) 0%, var(--cine-bg-soft) 100%) !important;
  color: var(--cine-text);
}

/* Faint animated circuit-line texture behind everything */
.site-shell::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.5;
  background-image:
    linear-gradient(90deg, rgba(0, 229, 160, 0.035) 1px, transparent 1px),
    linear-gradient(0deg, rgba(0, 229, 160, 0.035) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(circle at 50% 20%, black, transparent 75%);
}

/* Brand ribbon (banner logo strip) intentionally left on its original
   light background — the banner PNG's own transparency/background is
   unknown without visual verification, and forcing a dark panel behind
   an unknown logo asset risks hiding or clashing with it. */

/* ---------- Typography: bigger, bolder, cinematic ---------- */
h1, .page-hero h1, .hero__copy h1 {
  font-size: clamp(2.4rem, 5.4vw, 4.4rem) !important;
  line-height: 1.02 !important;
  letter-spacing: -0.02em;
  color: var(--cine-text) !important;
  text-shadow: 0 0 60px rgba(0, 229, 160, 0.18);
}

h2, .section-head h2 {
  font-size: clamp(1.8rem, 3.2vw, 2.7rem) !important;
  letter-spacing: -0.01em;
  color: var(--cine-text) !important;
}

h3 { color: var(--cine-text) !important; }

p, li, span, label { color: var(--cine-muted); }
strong { color: var(--cine-text); }

.eyebrow {
  color: var(--color-electric) !important;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 0.78rem;
}

/* ---------- Every section: dark, consistent ---------- */
.section,
.section--light {
  background: transparent !important;
  position: relative;
  z-index: 1;
}

/* ---------- Page hero (all inner pages): same dramatic treatment as homepage ---------- */
.page-hero {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background:
    radial-gradient(circle at 20% 15%, rgba(0, 229, 160, 0.20), transparent 45%),
    radial-gradient(circle at 85% 90%, rgba(0, 229, 160, 0.10), transparent 40%),
    linear-gradient(155deg, var(--cine-bg-soft) 0%, #081722 100%);
  border: 1px solid var(--cine-line);
  padding: 3.5rem 2.5rem !important;
  margin-bottom: 1rem;
}

.page-hero h1, .page-hero p { color: var(--cine-text); }
.page-hero .eyebrow { color: var(--color-electric); }

.page-hero__note {
  background: rgba(0, 229, 160, 0.08);
  border: 1px solid var(--cine-line);
  border-radius: var(--radius-lg);
  padding: 1.2rem 1.4rem;
}
.page-hero__note p {
  color: var(--cine-text) !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* ---------- Cards: glass-panel glow treatment everywhere ---------- */
.stat-card,
.feature-card,
.station-card,
.post-card,
.contact-card,
.form-card,
.contact-note,
.legend-card,
.filter-panel,
.map-stage,
.prose-card,
.info-card,
.map-card,
.status-panel,
.implemented-panel,
.search-panel,
.news-card,
.news-slide,
.detail-cover,
.article-cover {
  background: rgba(11, 28, 39, 0.86) !important;
  border: 1px solid var(--cine-line) !important;
}

.stat-card:hover,
.station-card:hover,
.post-card:hover,
.feature-card:hover,
.news-card:hover {
  border-color: rgba(0, 229, 160, 0.5) !important;
  box-shadow: 0 30px 80px rgba(0, 229, 160, 0.16) !important;
}

/* Member/company logo tiles: kept light so any logo colour reads correctly
   against a white card, rather than risking invisible dark-on-dark logos. */
.member-card,
.member-logo-card {
  background: rgba(255, 255, 255, 0.96) !important;
  border: 1px solid rgba(0, 229, 160, 0.25) !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
}

.member-card:hover,
.member-logo-card:hover {
  border-color: var(--color-electric) !important;
  box-shadow: 0 26px 64px rgba(0, 229, 160, 0.3) !important;
}

.stat-card span, .info-card span, .meta-list span { color: var(--cine-muted); }
.meta-list li { border-bottom-color: rgba(255, 255, 255, 0.12) !important; }

/* Pagination links (e.g. /novosti page numbers): had no explicit text
   colour and inherited the sitewide light text on top of their own
   near-white pill background — invisible. Give them the dark-card
   treatment consistently with the rest of the UI chrome. */
.pagination__link {
  background: rgba(11, 28, 39, 0.72) !important;
  border: 1px solid var(--cine-line) !important;
  color: var(--cine-text) !important;
}
.pagination__link:hover {
  border-color: var(--color-electric) !important;
}
.pagination__link.is-current {
  background: var(--color-electric) !important;
  color: #041711 !important;
  box-shadow: 0 12px 30px rgba(0, 229, 160, 0.3);
}

/* Flash alerts (form success/error/warning feedback) — were designed
   for a white page background (dark-toned text on a light translucent
   tint). On the dark theme that same translucent tint blends into the
   dark background and the dark text becomes nearly unreadable, which
   is a real problem since these are exactly the messages telling a
   visitor whether their form submission worked. */
.alert--success {
  background: rgba(0, 229, 160, 0.16) !important;
  color: #35f0ae !important;
  border: 1px solid rgba(0, 229, 160, 0.35);
}
.alert--error {
  background: rgba(255, 82, 82, 0.16) !important;
  color: #ff8a80 !important;
  border: 1px solid rgba(255, 82, 82, 0.35);
}
.alert--warning {
  background: rgba(255, 193, 7, 0.16) !important;
  color: #ffcf4d !important;
  border: 1px solid rgba(255, 193, 7, 0.35);
}
.stat-card strong {
  color: var(--color-electric) !important;
  font-size: 2.6rem !important;
  text-shadow: 0 0 30px rgba(0, 229, 160, 0.35);
}

.news-card__category, .news-slide__meta { color: var(--color-electric) !important; }

.meta-list strong { color: var(--cine-text); }

/* ---------- Forms: dark inputs (native checkbox/radio/file excluded —
   they should keep their normal OS appearance, not a dark fill) ---------- */
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
select,
textarea {
  background: rgba(3, 10, 16, 0.6) !important;
  border: 1px solid var(--cine-line) !important;
  color: var(--cine-text) !important;
}

input::placeholder, textarea::placeholder { color: rgba(243, 251, 247, 0.35); }

label span { color: var(--cine-text); font-weight: 700; }

/* ---------- Buttons: electric glow ---------- */
.btn--primary {
  background: linear-gradient(135deg, var(--color-electric), var(--color-electric-deep)) !important;
  color: #041711 !important;
  border: none !important;
  box-shadow: 0 18px 50px rgba(0, 229, 160, 0.35);
  font-weight: 800;
}

.btn--primary:hover {
  box-shadow: 0 22px 60px rgba(0, 229, 160, 0.5);
  transform: translateY(-3px);
}

.btn--ghost, .btn--secondary {
  background: transparent !important;
  border: 1.5px solid var(--color-electric) !important;
  color: var(--color-electric) !important;
}

.btn--ghost:hover, .btn--secondary:hover {
  background: rgba(0, 229, 160, 0.1) !important;
}

/* ---------- Footer: deep dark, not just dark green ---------- */
.site-footer {
  background: linear-gradient(180deg, #040d13 0%, #020609 100%) !important;
  border-top: 1px solid var(--cine-line);
}

.site-footer p, .site-footer li, .site-footer a { color: var(--cine-muted); }
.site-footer h4 { color: var(--color-electric) !important; }

/* ---------- Status pills / badges: keep semantic colour, fix contrast for dark bg ---------- */
.status-pill.is-active { background: rgba(0, 229, 160, 0.16) !important; color: #35f0ae !important; }
.status-pill.is-pending { background: rgba(255, 193, 7, 0.16) !important; color: #ffcf4d !important; }
.status-pill.is-inactive { background: rgba(255, 82, 82, 0.16) !important; color: #ff8a80 !important; }
.status-pill.is-neutral { background: rgba(255, 255, 255, 0.08) !important; color: var(--cine-text) !important; }

.access-badge.is-free { background: rgba(0, 229, 160, 0.16) !important; color: #35f0ae !important; }
.access-badge.is-guests { background: rgba(255, 152, 0, 0.18) !important; color: #ffb74d !important; }
.access-badge.is-paid { background: rgba(41, 182, 246, 0.18) !important; color: #64d4ff !important; }

/* ---------- Cinematic section divider glow ---------- */
.section-head {
  position: relative;
}

.section-head::after {
  content: "";
  display: block;
  width: 64px;
  height: 3px;
  margin-top: 0.6rem;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--color-electric), transparent);
}

/* ---------- Map: dark tiles wrapper glow ---------- */
.leaflet-map, .map-preview__canvas, .map-stage {
  border: 1px solid var(--cine-line);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4);
}

/* Map tile-loading placeholder background: was a light green tint
   designed for the old light theme, causing a flash of light before
   Leaflet tiles paint in. Dark placeholder instead. */
.leaflet-map {
  background: linear-gradient(135deg, rgba(0, 229, 160, 0.08), rgba(3, 10, 16, 0.4)) !important;
}