/*
Theme Name: NightSkating Warszawa
Theme URI: https://example.com/
Author: ChatGPT
Author URI: https://example.com/
Description: Lekki motyw pod NightSkating Warszawa (neon/night). Działa bez Elementora, Elementor opcjonalnie.
Version: 1.0.70
License: GPLv2 or later
Text Domain: nsw
*/

/* =========================
   Fonts: Neoneon (local)
   ========================= */
@font-face{
  font-family: 'Neoneon';
  src:
    url('assets/fonts/neoneon/Neoneon.woff2') format('woff2'),
    url('assets/fonts/neoneon/Neoneon.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root{
  --bg:#050816;
  --panel:rgba(255,255,255,.06);
  --panel2:rgba(255,255,255,.04);
  --stroke:rgba(255,255,255,.14);
  --text:#eaf2ff;
  --muted:#b8c3d3;
  --blue:#4DA3FF;
  --cyan:#66F3FF;
  --pink:#FF4DCE;
  --purple:#8A5CFF;
  --shadow: 0 18px 60px rgba(0,0,0,.55);
  --glow-blue: 0 0 0.6rem rgba(77,163,255,.55), 0 0 2.2rem rgba(77,163,255,.25);
  --glow-pink: 0 0 0.6rem rgba(255,77,206,.45), 0 0 2.2rem rgba(255,77,206,.22);
  --radius: 18px;
}

/* WordPress/ACF: atrybut [hidden] musi zawsze ukrywać element
   (niektóre resety CSS potrafią to nadpisać) */
[hidden]{
  display:none !important;
}

/* menu close button: hide by default (shown only when mobile menu open) */
.ns-menu-close{display:none;}


*{box-sizing:border-box}
html,body{height:100%}

body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, "Noto Sans", "Liberation Sans", sans-serif;
  background:
    linear-gradient(
      180deg,
      #050816 0%,
      #070a1f 25%,
      #06091c 55%,
      #050816 100%
    );
  color:var(--text);
  overflow-x:hidden;
  min-height: 100vh;
  position: relative;
}

/* Miękkie neony jako 1 warstwa – NIE kafelkowane */
body::before{
  content:"";
  position: fixed;
  inset: -10%;
  pointer-events:none;
  z-index:0;
  background:
    radial-gradient(900px 700px at 20% 15%, rgba(138,92,255,.22), transparent 65%),
    radial-gradient(800px 600px at 80% 20%, rgba(77,163,255,.20), transparent 65%),
    radial-gradient(1000px 800px at 50% 85%, rgba(255,77,206,.18), transparent 70%);
  filter: blur(3px);
  opacity: 1;
  transform: translateZ(0);
}

/* Treść NAD tłem */
.site-header,
.site-footer,
main,
section{
  position: relative;
  z-index: 1;
}

a{color:inherit}
.container{max-width:1160px;margin:0 auto;padding:0 20px}

/* =========================
   PARTNERZY – karuzela (globalnie)
   Ta sama karuzela na stronie głównej i /najblizszy-przejazd/
   ========================= */
.nsw-home-partners{margin-top:14px}
.nsw-partners{
  background:#fff;
  border-radius:18px;
  padding:18px;
  border:1px solid rgba(0,0,0,.08);
  /* Nie tnij logotypów/cieni – "okno" animacji ma być na .nsw-marquee */
  overflow: visible;
}

/* Na stronie głównej (HERO) wymuś czyste białe tło pod logotypami (bez cienia i bez obramowania) */
.nsw-home-partners .nsw-partners{background:#fff !important; box-shadow:none !important; border:0 !important;}
.nsw-partners__title{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#3a3a3a;margin-bottom:12px}
.nsw-marquee{overflow:hidden;padding-inline:var(--nsw-gap)}
:root{--nsw-gap:40px;}
/* belt: ma mieć gap między setami = odstęp po logotypie, żeby pętla była płynna */
.nsw-marquee__belt{display:flex;gap:var(--nsw-gap);align-items:center;width:max-content;will-change:transform;transform:translate3d(0,0,0);flex-wrap:nowrap}
.nsw-marquee__belt.is-animated{animation:nswMarquee var(--nsw-marquee-dur, 16s) linear infinite}
.nsw-marquee__set{display:flex;gap:var(--nsw-gap);align-items:center;padding:0;margin:0;flex:0 0 auto}
.nsw-logo{flex:0 0 auto}
.nsw-logo img{height:38px;width:auto;display:block}
@keyframes nswMarquee{from{transform:translate3d(0,0,0)}to{transform:translate3d(calc(-1 * var(--nsw-marquee-shift, var(--nsw-marquee-w, 0px))),0,0)}}

@media (max-width: 700px){
  .nsw-partners{padding:14px;border-radius:16px}
  .nsw-logo img{height:34px}
}

/* =========================
   HEADER
   ========================= */

.site-header{
  position:sticky;top:0;z-index:50;
  background: rgba(5,8,22,.68);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255,255,255,.10);
}

.navbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0}

/* LOGO */
.brand{
  display:flex;
  align-items:center;
  text-decoration:none;
  height: clamp(34px, 5vw, 48px);
  max-width: clamp(130px, 18vw, 220px);
  overflow:hidden;
  flex-shrink:0;
}

.brand-logo{
  height: clamp(20px, 3.0vw, 34px);
  width:auto;
  max-width:100%;
  display:block;
  object-fit:contain;
}

/* (stare style badge/tytułu zostawiam – nieszkodliwe) */
.brand-badge{
  width:44px;height:44px;border-radius:14px;
  background: radial-gradient(circle at 30% 30%, rgba(102,243,255,.9), rgba(77,163,255,.55));
  border: 1px solid rgba(255,255,255,.25);
  box-shadow: var(--glow-blue);
  display:grid;place-items:center;font-weight:800;
}
.brand-title{line-height:1}
.brand-title b{display:block;font-size:14px;letter-spacing:.08em}
.brand-title span{display:block;font-size:12px;color:var(--muted);letter-spacing:.14em}

/* MENU */
.menu{display:flex;gap:14px;flex-wrap:wrap;align-items:center;justify-content:flex-end}
.menu a{font-size:13px;color:rgba(234,242,255,.86);text-decoration:none;padding:8px 10px;border-radius:12px;border:1px solid transparent}
.menu a:hover{border-color:rgba(255,255,255,.14);background:rgba(255,255,255,.04)}

/* =========================
   UI
   ========================= */

.pill{
  padding:10px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.16);
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:14px 18px;border-radius:999px;border:1px solid rgba(255,255,255,.18);
  background: radial-gradient(circle at 20% 20%, rgba(102,243,255,.35), rgba(77,163,255,.18)),
              linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.05));
  color:#f6fbff;text-decoration:none;
  box-shadow: var(--shadow), var(--glow-blue);
}
.btn:hover{filter:brightness(1.06)}
.btn.pink{box-shadow: var(--shadow), var(--glow-pink)}
.btn.pink{background: radial-gradient(circle at 30% 30%, rgba(255,77,206,.28), rgba(138,92,255,.18)),
          linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.05));}

.ns-counter { display:flex; align-items:baseline; gap:6px; }
.ns-counter__suffix { font-weight:700; }

/* =========================
   HERO
   ========================= */

.hero{
  position:relative; overflow:hidden;
  min-height: 78vh;
  display:flex;align-items:center;
  padding:68px 0 40px;
}
.hero::before{
  content:"";
  position:absolute;inset:-40px;
  background:
    radial-gradient(700px 400px at 20% 20%, rgba(255,77,206,.16), transparent 62%),
    radial-gradient(850px 500px at 70% 10%, rgba(77,163,255,.18), transparent 62%);
  filter:saturate(1.06) contrast(1.02);
  opacity:.75;
}
.hero::after{
  content:"";
  position:absolute;inset:0;
  background: linear-gradient(180deg, rgba(5,8,22,.25), rgba(5,8,22,.88));
}

.hero-bg{
  position:absolute;inset:0;
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  opacity:.55;
  z-index:0;
  transform: scale(1.04);
}
.hero-inner{position:relative;z-index:2}

.kicker{display:inline-block;font-size:12px;letter-spacing:.22em;color:rgba(234,242,255,.78);text-transform:uppercase}

.h1{
  font-size:56px;line-height:1.02;margin:14px 0 12px;
  text-shadow: 0 2px 28px rgba(0,0,0,.55);
}
.h1 .neon{
  background: linear-gradient(90deg, #fff, #cfeaff, #66F3FF);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter: drop-shadow(0 0 20px rgba(77,163,255,.25));
}

.sub{max-width:720px;font-size:18px;color:rgba(234,242,255,.82);margin:0 0 22px}

/* HERO – tekst/liczniki niżej + bez centrowania (działa po dodaniu klasy hero-inner--low) */
.hero-inner--low{
  /* ACF: pozycjonowanie 3×3 + szerokość "okna" tekstu */
  --hero-text-w: 720px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;
  padding-top: clamp(110px, 20vh, 240px);
  padding-bottom: 10px;
  text-align: left;
}
.hero-inner--low .sub{
  margin-left:0;
  margin-right:0;
}

/* HERO: jedno "okno" tekstu sterowane zmienną */
.hero-inner--low .hero-title,
.hero-inner--low .sub{
  max-width: var(--hero-text-w, 720px);
}

/* HERO: pozycja X (lewo/środek/prawo) */
.hero-inner--low.pos-x-left{ align-items:flex-start; text-align:left; }
.hero-inner--low.pos-x-center{ align-items:center; text-align:center; }
.hero-inner--low.pos-x-right{ align-items:flex-end; text-align:right; }

/* reset marginesów dla sub w zależności od wyrównania */
.hero-inner--low.pos-x-center .sub,
.hero-inner--low.pos-x-center .hero-title{ margin-left:auto; margin-right:auto; }
.hero-inner--low.pos-x-right .sub,
.hero-inner--low.pos-x-right .hero-title{ margin-left:auto; margin-right:0; }

/* HERO: pozycja Y (góra/środek/dół) */
.hero-inner--low.pos-y-top{ justify-content:flex-start; }
.hero-inner--low.pos-y-middle{ justify-content:center; }
.hero-inner--low.pos-y-bottom{ justify-content:flex-end; padding-bottom: clamp(70px, 12vh, 140px); }

/* HERO: belka "Najbliższy przejazd" pod licznikami (bez mapy) */
.ns-hero-ride{
  margin-top: 18px;
}
.ns-ride__panel--hero{
  background: rgba(7,22,38,.55);
  border: 1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(10px);
}

/* HOME/HERO: nagłówek panelu zawsze centralnie (żeby LIVE i licznik nie "uciekały") */
.ns-ride__panel--hero .ns-ride__head{ text-align:center; }
.ns-ride__panel--hero .ns-ride__title{ justify-content:center; width:100%; }
@media (max-width: 1199px){

  /* Gdy menu otwarte – header MUSI być nad overlay (sticky + z-index tworzy stacking-context). */
  body.ns-menu-open .site-header{
    z-index: 1000002 !important;
  }
  .ns-hero-ride{ margin-top: 14px; }
  .ns-ride__panel--hero{ padding:16px; }
}

/* =========================
   CARDS / SECTIONS
   ========================= */

.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:26px}

/* liczniki full width (po dodaniu klasy grid3--full) */
.grid3.grid3--full{
  width:100%;
  margin-top:28px;
}
@media (max-width: 1199px){
  .grid3{grid-template-columns:1fr;gap:12px}
  .grid3.grid3--full{ grid-template-columns:1fr; }
}
.grid3.grid3--full .card{ padding:20px; }

.card{
  border-radius: var(--radius);
  border:1px solid rgba(255,255,255,.14);
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
  box-shadow: var(--shadow);
  padding:18px;
}
.card strong{font-size:34px;display:block;margin-top:8px}
.card span{color:var(--muted);font-size:14px}

.section{padding:56px 0}
.h2{font-size:28px;margin:0 0 14px}
.muted{color:var(--muted)}

.split{display:grid;grid-template-columns:1.2fr .8fr;gap:18px;align-items:start}
.panel{
  border-radius: var(--radius);
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  box-shadow: var(--shadow);
  padding:22px;
}

.badges{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.badges .pill{font-size:13px;color:rgba(234,242,255,.86);text-decoration:none}

/* =========================
   MAPBOX / LEAFLET WRAP
   ========================= */

.mapbox{
  aspect-ratio: 16/10;
  border-radius: var(--radius);
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.03);
  position:relative;
  overflow:hidden;
  box-shadow: var(--shadow);
}
.mapbox .map{position:absolute;inset:0}
.map-label{
  position:absolute;left:16px;top:16px;
  padding:10px 12px;border-radius:14px;
  border:1px solid rgba(255,255,255,.16);
  background: rgba(5,8,22,.45);
  backdrop-filter: blur(10px);
  font-weight:700;
  z-index:5;
}

/* =========================
   FOOTER
   ========================= */

.site-footer{
  padding:34px 0;
  border-top:1px solid rgba(255,255,255,.10);
  color:rgba(234,242,255,.7)
}
.page-wrap{padding:38px 0}

/* =========================
   NEON ROUTE (Leaflet SVG paths)
   ========================= */

.ns-route-glow {
  stroke: #7c3aed;
  filter: drop-shadow(0 0 10px rgba(124,58,237,.8))
          drop-shadow(0 0 20px rgba(236,72,153,.55));
}
.ns-route-core {
  stroke: #22d3ee;
  filter: drop-shadow(0 0 8px rgba(34,211,238,.8));
}
.ns-route-head {
  stroke: #fff;
  fill: #22d3ee;
  filter: drop-shadow(0 0 10px rgba(34,211,238,.9));
}

/* =========================
   LEAFLET – LABELS FIX
   ========================= */

.leaflet-labels-pane{
  z-index: 650 !important;
  pointer-events: none;
}
.leaflet-labels-pane img.leaflet-tile{
  filter: brightness(1.55) contrast(1.35) !important;
  opacity: 1 !important;
}
.leaflet-tile-pane img.leaflet-tile{
  filter: brightness(0.92) contrast(1.05) !important;
}

/* =====================================================
   Leaflet FIX
   Globalne reguły typu `img/canvas{max-width:100%}` (częste w motywach)
   potrafią rozwalić Leaflet: kafelki i/lub canvas z trasą.
   Efekt: na mniejszych szerokościach (np. < 881px / iPhone) znika neonowy ślad.
   Wymuszamy "Leafletowe" zachowanie elementów w obrębie mapy.
   ===================================================== */
.leaflet-container img,
.leaflet-container svg,
.leaflet-container canvas{
  max-width: none !important;
}
.leaflet-container canvas{
  width: 100% !important;
  height: 100% !important;
  display: block;
}

/* =========================
   START/META + STREET LABELS + KM WIDGET
   ========================= */

.ns-marker { background: transparent !important; border: 0 !important; }

.ns-tag{
  padding: 8px 14px;
  border-radius: 14px;
  font-weight: 900;
  letter-spacing: .12em;
  font-size: 12px;
  color: #eaf2ff;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(5,8,22,.55);
  backdrop-filter: blur(10px);
  text-transform: uppercase;
  box-shadow: 0 18px 60px rgba(0,0,0,.45);
}
.ns-tag--start{
  border-color: rgba(34,211,238,.55);
  box-shadow: 0 0 14px rgba(34,211,238,.55), 0 0 30px rgba(34,211,238,.25), 0 18px 60px rgba(0,0,0,.45);
}
.ns-tag--meta{
  border-color: rgba(255,77,206,.55);
  box-shadow: 0 0 14px rgba(255,77,206,.55), 0 0 30px rgba(255,77,206,.25), 0 18px 60px rgba(0,0,0,.45);
}
.ns-tag--mix{
  border-color: rgba(102,243,255,.55);
  box-shadow: 0 0 14px rgba(102,243,255,.55), 0 0 30px rgba(138,92,255,.25), 0 18px 60px rgba(0,0,0,.45);
}

.ns-street{
  padding: 6px 10px;
  border-radius: 12px;
  font-weight: 800;
  font-size: 13px;
  color: rgba(234,242,255,.95);
  background: rgba(5,8,22,.35);
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(10px);
  box-shadow: 0 0 14px rgba(77,163,255,.25), 0 0 22px rgba(255,77,206,.16);
  text-shadow: 0 0 10px rgba(102,243,255,.20);
  white-space: nowrap;
  pointer-events: none;
  opacity: .95;
}

.ns-km{
  display:flex;align-items:baseline;gap:8px;
  padding:10px 12px;border-radius:14px;
  border:1px solid rgba(255,255,255,.18);
  background: rgba(5,8,22,.55);
  backdrop-filter: blur(10px);
  box-shadow: 0 18px 60px rgba(0,0,0,.45);
}
.ns-km__label{font-size:12px;color:rgba(234,242,255,.70);letter-spacing:.06em;text-transform:uppercase;}
.ns-km__val{font-size:18px;font-weight:900;color:#66F3FF;text-shadow:0 0 14px rgba(102,243,255,.35);}
.ns-km__unit{font-size:12px;color:rgba(234,242,255,.75);}

/* KM MARKERS (5km) */
.ns-km-marker{
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .06em;
  color: rgba(234,242,255,.96);
  background: rgba(5,8,22,.60);
  border: 1px solid rgba(255,255,255,.20);
  backdrop-filter: blur(10px);
  box-shadow: 0 0 16px rgba(77,163,255,.22), 0 0 22px rgba(255,77,206,.12);
  white-space: nowrap;
  pointer-events: none;
}

/* =========================
   HOME: Najbliższy przejazd – ZAWSZE jedna kolumna
   (panel zawsze NAD mapą, nawet jeśli w HTML mapa jest pierwsza)
   ========================= */

.ns-ride{
  display:flex;
  flex-direction:column;
  gap:18px;
  align-items:stretch;
}

.ns-ride__panel{
  order:1;
}

.ns-ride__map{
  order:2;
  width:100%;
  border-radius: var(--radius);
  overflow:hidden;
  /* wysokość auto per urządzenie */
  min-height: clamp(260px, 45vh, 520px);
  max-height: 70vh;
}

/* lepsze “telefonowe” proporcje */
@media (max-width: 640px){
  .ns-ride__map{
    min-height: 260px;
    max-height: 60vh;
  }
  .map-label{
    left:10px;
    top:10px;
    padding:8px 10px;
    border-radius:12px;
    font-size:13px;
  }
}

/* =========================
   MENU dropdown (sub-menu)
   ========================= */

.menu .ns-menu{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  align-items:center;
  justify-content:flex-end;
}
.menu .ns-menu > li{ position:relative; }
.menu .ns-menu a{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:13px;
  color:rgba(234,242,255,.86);
  text-decoration:none;
  padding:8px 10px;
  border-radius:12px;
  border:1px solid transparent;
}
.menu .ns-menu a:hover{
  border-color:rgba(255,255,255,.14);
  background:rgba(255,255,255,.04);
}
.menu .ns-menu > li.menu-item-has-children > a::after{
  content:"";
  width:8px;height:8px;
  border-right:2px solid rgba(234,242,255,.75);
  border-bottom:2px solid rgba(234,242,255,.75);
  transform: rotate(45deg);
  margin-left:6px;
  opacity:.85;
}
.menu .ns-menu .sub-menu{
  list-style:none;
  margin:10px 0 0;
  padding:10px;
  min-width: 210px;
  position:absolute;
  right:0;
  top:calc(100% - 6px);
  z-index:999;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(5,8,22,.88);
  backdrop-filter: blur(14px);
  box-shadow: 0 18px 60px rgba(0,0,0,.55);
  display:none;
}
.menu .ns-menu .sub-menu a{
  width:100%;
  justify-content:flex-start;
  padding:10px 12px;
  border-radius:14px;
}
.menu .ns-menu > li:hover > .sub-menu,
.menu .ns-menu > li:focus-within > .sub-menu{
  display:block;
}
.menu .ns-menu > li.menu-item-has-children::after{
  content:"";
  position:absolute;
  left:-8px;
  right:-8px;
  top: 100%;
  height: 16px;
  background: transparent;
}
.menu a[href="#"]{ cursor: default; }

/* =========================
   MOBILE MENU (hamburger)
   ========================= */

.ns-burger{
  display:none;
  width:44px;
  height:40px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.05);
  backdrop-filter: blur(12px);
  box-shadow: 0 18px 60px rgba(0,0,0,.35);
  padding:10px 11px;
  cursor:pointer;
  -webkit-tap-highlight-color: transparent;
}
.ns-burger span{
  display:block !important;
  width:100%;
  height:2px !important;
  margin:6px 0 !important;
  border-radius:99px;
  background: rgba(234,242,255,.92) !important;
  opacity:1 !important;
}
body.ns-menu-open .ns-burger span:nth-child(1){ transform: translateY(8px) rotate(45deg); }
body.ns-menu-open .ns-burger span:nth-child(2){ opacity:0 !important; }
body.ns-menu-open .ns-burger span:nth-child(3){ transform: translateY(-8px) rotate(-45deg); }

@media (max-width: 1199px){
  .h1{font-size:40px}
  .split{grid-template-columns:1fr}

  .brand{
    max-width: clamp(120px, 40vw, 170px);
    height: clamp(32px, 8vw, 40px);
  }
  .brand-logo{ height: clamp(18px, 5vw, 26px); }

  .ns-burger{ display:inline-flex; align-items:center; justify-content:center; }

  /* FULLSCREEN GLASS: boczny panel + overlay */
  /* overlay bez blur (blur na mobile wygląda "jak awaria" i psuje czytelność) */
  body::before{
    content:"";
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.35);
    backdrop-filter: none;
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s ease;
    /* UWAGA: header ma własny stacking-context (sticky + z-index).
       Dlatego overlay musi być niżej niż header, a header musi dostać wyższy z-index w stanie otwartym menu. */
    z-index: 1000000;
  }
  body.ns-menu-open::before{
    opacity: 1;
    pointer-events: auto;
  }

  /* blokujemy przewijanie tła, ale menu dalej może się przewijać */
  body.ns-menu-open{
    overflow: hidden;
  }

  .menu{
    display:block;
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: min(86vw, 360px);
    border-radius: 24px 0 0 24px;
    border-left: 1px solid rgba(255,255,255,.14);
    background: rgba(5,8,22,.84);
    /* iOS/Android: backdrop-filter potrafi psuć klikalność elementów w warstwie.
       Na mobile wyłączamy blur w panelu menu. */
    backdrop-filter: none;
    box-shadow: -18px 0 60px rgba(0,0,0,.55);
    padding: 64px 12px 16px;
    transform: translateX(110%);
    transition: transform .18s ease;
    /* nad overlay i całą stroną */
    z-index: 1000001;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    pointer-events: none;
  }
  body.ns-menu-open .menu{
    transform: translateX(0);
    pointer-events: auto;
  }

  .ns-menu-close{
    position: absolute;
    top: 14px;
    right: 14px;
    width: 42px;
    height: 42px;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.06);
    color: rgba(234,242,255,.92);
    display: none; /* pokaż tylko gdy menu otwarte */
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }
  body.ns-menu-open .ns-menu-close{
    display: inline-flex;
  }

  .menu .ns-menu{
    display:flex;
    flex-direction:column;
    gap:6px;
    align-items:stretch;
  }
  .menu .ns-menu > li > a{
    width:100%;
    justify-content:space-between;
    padding:12px 12px;
    border-radius:16px;
  }

  /* submenu: domyślnie zwinięte */
  .menu .ns-menu .sub-menu{
    position: static;
    display: none;
    margin: 4px 0 10px 10px;
    padding: 8px;
    min-width: 0;
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.10);
    box-shadow: none;
    border-radius: 18px;
  }
  .menu .ns-menu li.ns-sub-open > .sub-menu{ display:block; }
  .menu .ns-menu .sub-menu a{ width:100%; justify-content:flex-start; padding:10px 12px; border-radius:14px; }

  /* burger zawsze nad overlay */
  .ns-burger{ position: relative; z-index: 10001; }
  .site-header .navbar{ position:relative; }
}

/* =========================
   HOME: Najbliższy przejazd – ZAWSZE jeden pod drugim
   ========================= */

.ns-ride{
  display:flex;
  flex-direction:column;
  gap:18px;
  align-items:stretch;
}

.ns-ride__panel{ order:1; }
.ns-ride__map{ order:2; }

.ns-ride__map{
  width: 100%;
  min-height: 420px;
  max-height: 70vh;
  border-radius: var(--radius);
  overflow: hidden;
}

@media (max-width: 640px){
  .ns-ride__map{
    min-height: 320px;
    max-height: 60vh;
  }
  .map-label{
    left: 10px;
    top: 10px;
    padding: 8px 10px;
    border-radius: 12px;
    font-size: 13px;
  }
}

/* =========================
   NS FAQ ACCORDION (NEON) – PRZYWRÓCONE
   ========================= */

.ns-faq{ padding: 46px 0 60px; }

.ns-faq-title{
  margin: 0 0 18px;
  font-size: clamp(28px, 4.2vw, 44px);
  letter-spacing: .02em;
  text-shadow: 0 0 18px rgba(77,163,255,.18), 0 0 22px rgba(255,77,206,.14);
}

.ns-accordion{ max-width: 980px; }

.ns-acc-item{
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(5,8,22,.42);
  backdrop-filter: blur(12px);
  box-shadow: 0 18px 60px rgba(0,0,0,.45);
  overflow: hidden;
  margin-bottom: 16px;
}

.ns-acc-q{
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 18px;
  background: transparent;
  border: 0;
  color: rgba(234,242,255,.96);
  cursor: pointer;
  text-align: left;
}

.ns-acc-ico{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.22);
  background: radial-gradient(circle at 30% 30%, rgba(102,243,255,.30), rgba(77,163,255,.12));
  box-shadow: 0 0 18px rgba(77,163,255,.16);
  display: grid;
  place-items: center;
  color: rgba(102,243,255,.92);
  flex: 0 0 auto;
  font-weight: 800;
}

.ns-acc-qtext{
  flex: 1 1 auto;
  min-width: 0;
  font-weight: 700;
  font-size: 18px;
  line-height: 1.25;
}

.ns-acc-chev{
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.04);
  display: grid;
  place-items: center;
  position: relative;
  transition: transform .18s ease;
}

.ns-acc-chev::before{
  content:"";
  width: 10px;
  height: 10px;
  border-right: 2px solid rgba(234,242,255,.86);
  border-bottom: 2px solid rgba(234,242,255,.86);
  transform: rotate(45deg);
  display:block;
}

.ns-acc-q[aria-expanded="true"] .ns-acc-chev{
  transform: rotate(180deg);
}

.ns-acc-a{
  border-top: 1px solid rgba(255,255,255,.12);
}

.ns-acc-a-inner{
  padding: 16px 18px 18px;
  color: rgba(234,242,255,.82);
  font-size: 15px;
  line-height: 1.7;
}

.ns-acc-a-inner p{ margin: 0 0 10px; }
.ns-acc-a-inner p:last-child{ margin-bottom:0; }

@media (max-width: 1199px){
  .ns-acc-q{ padding: 14px 14px; }
  .ns-acc-ico{ width: 40px; height: 40px; }
  .ns-acc-qtext{ font-size: 16px; }
}

/* =========================
   REGULAMIN – NEON + SUWAK PL/EN – PRZYWRÓCONE
   ========================= */

.ns-reg{ padding: 46px 0 70px; }

.ns-reg-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:18px;
  margin-bottom:18px;
}

.ns-reg-title{
  margin:0;
  font-size: clamp(28px, 4.2vw, 54px);
  letter-spacing:.01em;
  text-shadow: 0 0 18px rgba(77,163,255,.16), 0 0 26px rgba(255,77,206,.12);
}

.ns-lang{
  position:relative;
  display:flex;
  gap:2px;
  padding:4px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.05);
  backdrop-filter: blur(12px);
  box-shadow: 0 18px 60px rgba(0,0,0,.35);
}

.ns-lang-btn{
  position:relative;
  z-index:2;
  border:0;
  background:transparent;
  color: rgba(234,242,255,.78);
  font-weight:800;
  letter-spacing:.08em;
  padding:10px 14px;
  border-radius:999px;
  cursor:pointer;
  line-height:1;
}

.ns-lang-btn.is-active{ color:#fff; }

.ns-lang-pill{
  position:absolute;
  top:4px; bottom:4px; left:4px;
  width:48px;
  border-radius:999px;
  background:
    radial-gradient(circle at 30% 30%, rgba(102,243,255,.35), rgba(77,163,255,.18)),
    linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.05));
  box-shadow: 0 0 22px rgba(77,163,255,.35), 0 0 22px rgba(255,77,206,.18);
  transition: transform .25s ease, width .25s ease;
  z-index:1;
}

/* ukrywanie / pokazywanie treści językowych */
.ns-lang-panel{ display:none; }
.ns-lang-panel.is-active{ display:block; }

.ns-reg-body{
  max-width: 980px;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(5,8,22,.34);
  backdrop-filter: blur(12px);
  box-shadow: 0 18px 60px rgba(0,0,0,.40);
  padding: 22px 22px;
}

.ns-reg-body h2{
  margin: 18px 0 10px;
  font-size: 22px;
}

.ns-reg-body p,
.ns-reg-body li{
  color: rgba(234,242,255,.84);
  line-height: 1.75;
  font-size: 15px;
}

.ns-reg-body ul{ margin: 0 0 8px 18px; }

.ns-reg-attachments{
  margin-top:18px;
  padding-top:14px;
  border-top:1px solid rgba(255,255,255,.10);
  max-width:980px;
}

.ns-reg-attachments__title{ font-weight:800; margin-bottom:10px; }

.ns-reg-attachments__grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}

@media(max-width:700px){
  .ns-reg-attachments__grid{ grid-template-columns:1fr; }
}

.ns-reg-attachments__file{
  display:block;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.04);
  text-decoration:none;
}
.ns-reg-attachments__file:hover{ background:rgba(255,255,255,.07); }

@media(max-width:640px){
  .ns-reg-head{
    flex-direction:column;
    align-items:flex-start;
  }
}
/* =========================
   FRONT: Najbliższy przejazd — META w 1 linii (desktop) / wrap (mobile)
   ========================= */

/* układ sekcji: zawsze jeden pod drugim (panel, potem mapa) */
.ns-ride{
  display:flex !important;
  flex-direction:column !important;
  gap:18px !important;
}

/* nagłówek w panelu */
.ns-ride__head{
  display:block;
  margin-bottom:12px;
}

/* meta: start/miejsce/dystans/poziom/czas + przycisk */
.ns-ride__meta{
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  flex-wrap:wrap !important;         /* mobile/tablet: łamie */
}

/* NIE rozciągaj “pasków” na całą szerokość */
.ns-ride__meta .pill{
  width:auto !important;
  flex:0 0 auto !important;
  white-space:nowrap;
}

/* trochę mniejsze “pille” w tym miejscu */
.pill--mini{
  padding:9px 12px;
  font-size:13px;
}

/* przycisk trzymamy na końcu */
.ns-ride__actions{
  display:flex;
  gap:12px;
  flex:0 0 auto;
}

/* desktop: próbujemy trzymać wszystko w jednej linii jak się zmieści */
@media (min-width: 981px){
  .ns-ride__meta{
    flex-wrap:nowrap !important;     /* jedna linia */
  }

  /* jak brakuje miejsca, pierwsze do złamania będzie “Miejsce” */
  .ns-ride__meta .pill:nth-child(2){
    max-width: 520px;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  /* przycisk spycha się na prawą stronę */
  .ns-ride__actions{
    margin-left:auto;
  }
}

/* mniejsze ekrany: łamie się na 2–3 linie automatycznie */
@media (max-width: 980px){
  .ns-ride__actions{
    width:100%;
  }
  .ns-ride__actions .btn{
    width:auto;
  }
}
.ns-ride__datepill{
  margin-left:auto;
}
@media (max-width: 980px){
  .ns-ride__datepill{ margin-left:0; }
}


/* === NS Partnerzy (kafelki) === */
.ns-partners { padding: 64px 0; }
.ns-partners__section-title { margin: 0 0 24px; text-align: left; }

.ns-partners__cards{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
}

.ns-partners__card{
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  background: rgba(255,255,255,.02);
  padding: 28px;
  display: flex;
  flex-direction: column;
  min-height: 320px;
}

.ns-partners__logo{
  height: 72px;
  display: flex;
  align-items: center;
  margin-bottom: 18px;
}
.ns-partners__logo img{
  max-height: 72px;
  max-width: 180px;
  object-fit: contain;
}

.ns-partners__badge{
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .9;
  margin-bottom: 10px;
}

.ns-partners__name{
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 12px;
}

.ns-partners__desc{
  opacity: .9;
  line-height: 1.6;
  flex: 1;
}

/* Partnerzy: opis z animowanym rozwijaniem */
.ns-partners__desc-wrap{
  overflow: hidden;
  transition: height .28s ease;
}

.ns-partners__toggle{
  margin-top: 8px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  text-decoration: underline;
  font-size: 13px;
  opacity: .9;
}

.ns-partners__footer{ margin-top: 18px; }
.ns-partners__link{
  display: inline-flex;
  gap: 10px;
  align-items: center;
  text-decoration: underline;
}
.ns-partners__icon{ width: 18px; height: 18px; fill: currentColor; }

@media (max-width: 980px){
  .ns-partners__cards{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px){
  .ns-partners__cards{ grid-template-columns: 1fr; }
  .ns-partners__card{ padding: 22px; }
}

.ns-partners__toggle{
  pointer-events:auto !important;
  cursor:pointer !important;
  position:relative;
  z-index:5;
  background:transparent;
  border:0;
  padding:0;
  text-decoration:underline;
}
.ns-partners__desc{
  position:relative;
  z-index:1;
}
/* ===== NS Partnerzy – OVERRIDE v2 (DOPISZ NA SAMYM DOLE) ===== */

/* Badge (typ współpracy) – mniejszy, spokojniejszy */
.ns-partners__badge{
  font-size: 11px;
  letter-spacing: .10em;
  opacity: .75;
  margin-bottom: 6px;
}

/* Nazwa partnera – mocniejsza hierarchia */
.ns-partners__name{
  font-size: 22px;         /* było 20px */
  font-weight: 800;        /* było 700 */
  line-height: 1.25;
  margin-bottom: 10px;     /* było 12px */
}

/* Opis – wyraźnie mniejszy */
.ns-partners__desc{
  font-size: 14px;         /* DODAJEMY (u Ciebie nie ma font-size) */
  line-height: 1.55;       /* było 1.6 */
  opacity: .85;            /* było .9 */
}

/* "czytaj więcej" – czytelny link */
.ns-partners__toggle{
  font-size: 13px;
  opacity: .9;
  text-decoration: underline;
}

/* (opcjonalnie) typy kolorami – jeśli chcesz zostaw, jak nie, usuń */
.ns-partners--sponsor .ns-partners__badge{ color:#ffd36a; }
.ns-partners--public_funds .ns-partners__badge{ color:#7dd3fc; }
.ns-partners--automotive .ns-partners__badge{ color:#a7f3d0; }
.ns-partners--partner .ns-partners__badge{ color:#d1d5db; }
.ns-partners--media .ns-partners__badge{ color:#f9a8d4; }

/* === Partnerzy: "czytaj więcej" – biały kolor === */
.ns-partners__toggle{
  color: #fff;
  opacity: 1;
  text-decoration-color: rgba(255,255,255,.8);
}

.ns-partners__toggle:hover{
  text-decoration-color: #fff;
}
/* KM dymki: nie przycinaj HTML wewnątrz divIcon Leaflet */
.leaflet-marker-icon.ns-marker{
  width: auto !important;
  height: auto !important;
  overflow: visible !important;
  background: transparent !important;
  border: none !important;
}

/* Sam dymek km */
.ns-km-marker{
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(8,14,24,.72);
  backdrop-filter: blur(6px);

  /* neon */
  box-shadow: 0 0 18px rgba(0,229,255,.20);
  color: rgba(255,255,255,.92);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .2px;
}


/* =========================
   HOME – HERO title + neon countdown
   ========================= */
.hero-title{
  margin: 0;
  font-size: clamp(28px, 3.6vw, 46px);
  line-height: 1.1;
  letter-spacing: .02em;
  text-shadow: 0 0 18px rgba(0,229,255,.22);
}

.ns-countdown{
  margin-top: 18px;
  border-radius: 22px;
  border: 1px solid rgba(0,229,255,.22);
  background: linear-gradient(135deg, rgba(0,229,255,.10), rgba(255,255,255,.04));
  box-shadow: 0 18px 42px rgba(0,0,0,.35), 0 0 24px rgba(0,229,255,.10);
  padding: 16px 16px 14px;
  backdrop-filter: blur(10px);
}

.ns-countdown__label{
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.78);
  margin-bottom: 12px;
}

.ns-countdown__grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 12px;
}

.ns-ct{
  border-radius: 18px;
  background: rgba(0,0,0,.28);
  border: 1px solid rgba(255,255,255,.10);
  padding: 12px 10px 10px;
  text-align: center;
}

.ns-ct__val{
  font-size: clamp(22px, 2.8vw, 36px);
  font-weight: 800;
  letter-spacing: .02em;
  color: #fff;
  text-shadow: 0 0 18px rgba(0,229,255,.28);
}

.ns-ct__lab{
  margin-top: 6px;
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255,255,255,.70);
}

.ns-countdown__live{
  margin-top: 10px;
  padding: 12px 14px;
  border-radius: 18px;
  border: 1px solid rgba(0,229,255,.25);
  background: rgba(0,0,0,.32);
  font-weight: 700;
  letter-spacing: .02em;
  text-shadow: 0 0 18px rgba(0,229,255,.25);
}

@media (max-width: 1199px){
  .ns-countdown{ padding: 14px 14px 12px; border-radius: 20px; }
  .ns-countdown__grid{ gap: 10px; }
  .ns-ct{ padding: 11px 8px 9px; border-radius: 16px; }
}

/* =========================
   HEADER – mobile: większe logo + poprawna wysokość
   ========================= */
@media (max-width: 1199px){
  .navbar{ padding: 12px 0; }
  .brand-logo{
    height: 34px !important;
    max-height: 34px !important;
  }
  .brand{ align-items: center; }
}

/* =========================
   HOME – "Najbliższy przejazd za …" + neon inline countdown
   ========================= */
.ns-ride__head{ margin-bottom: 10px; }

.ns-ride__title{
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
}

.ns-ride__titletext,
.ns-ride__prefix{
  white-space: nowrap;
}

.ns-ride__countdown{
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
}

/* wbudowany licznik nie może przejmować stylu "kafelków" */
.ns-ride__title .ns-countdown{
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

/* neon – styl inspirowany przykładem (mocny niebieski) */
.ns-ride__title .ns-countdown__inline,
.ns-ride__title .ns-countdown__live{
  font-family: 'Neoneon', 'Orbitron', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 900;
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
  font-size: clamp(18px, 2.2vw, 34px);
  color: rgba(120, 235, 255, 0.98);
  text-shadow:
    0 0 10px rgba(0,229,255,.60),
    0 0 26px rgba(0,229,255,.45),
    0 0 44px rgba(0,229,255,.28);
  white-space: nowrap;
}

/* CTA na dwóch liniach */
.ns-ride__actions .btn .ns-btn__l1,
.ns-ride__actions .btn .ns-btn__l2{
  display: block;
  line-height: 1.12;
}

@media (max-width: 1199px){
  /* <=1199: dwie linie: "Najbliższy przejazd za" / licznik */
  .ns-ride__title{
    justify-content: center;
    text-align: center;
  }

  .ns-ride__prefix{ margin-left: 2px; }

  .ns-ride__title .ns-countdown{
    flex: 0 0 100%;
    width: 100%;
    margin-top: 8px;
    text-align: center;
    display: block;
  }

  .ns-ride__title .ns-countdown__inline,
  .ns-ride__title .ns-countdown__live{
    white-space: normal;
  }
}

/* LIVE: bez obwolutki (tylko neonowy tekst) */
.ns-ride__panel.is-live .ns-countdown__live{
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
  text-align: center;
}

/* LIVE: ZAWSZE idealnie wyśrodkowane (desktop/tablet/mobile) */
.ns-ride__panel.is-live .ns-ride__head,
.ns-ride__panel.is-live .ns-ride__title{
  width: 100% !important;
  text-align: center !important;
  justify-content: center !important;
}
.ns-ride__panel.is-live .ns-ride__title .ns-countdown{
  flex: 0 0 100% !important;
  width: 100% !important;
  display: block !important;
  margin: 0 auto !important;
}
.ns-ride__panel.is-live .ns-ride__title .ns-countdown__live{
  display: block !important;
  width: 100% !important;
  margin: 0 auto !important;
}

@media (max-width: 880px){

  /* MOBILE: układ ma być "naturalny" (nie przyklejony do boku) */
  .hero .container.hero-inner--low{
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .hero .hero-inner--low{
    align-items: stretch !important; /* dzieci pełną szerokość kontenera */
  }

  .ns-hero-ride{
    width: 100%;
  }

  /* bliżej krawędzi zdjęcia (mniej "powietrza") */
  .ns-hero-ride{ margin-top: 10px; }
  .nsw-home-partners{ margin-top: 10px; }

  .ns-ride__panel--hero{
    max-width: 720px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding: 18px !important;
  }

  .ns-ride__head{
    margin-bottom: 12px;
  }

  .ns-ride__title{
    justify-content: center;
    text-align: center;
  }

  .ns-ride__meta{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
  }

  .ns-ride__actions{
    width: 100%;
    display: flex;
    justify-content: center;
  }
}


/* === HOME HERO tweaks: align CTA + lower content on image === */
@media (max-width: 980px){
  /* when meta wraps, keep CTA centered (no weird jump at 881px) */
  .ns-ride__actions{
    width: 100% !important;
    justify-content: center !important;
  }
  .ns-ride__actions .btn{
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* push hero content lower so partners carousel sits closer to bottom edge of image */
.home .hero .hero-inner--low{
  justify-content: flex-end !important;
  padding-bottom: 34px !important;
}

/* reduce empty space under partners carousel inside hero */
.home .nsw-home-partners{
  margin-top: 14px !important;
  margin-bottom: 0 !important;
}



/* =========================================================
   NS HOME – FIX: marquee (smooth on ALL widths) + LIVE center
   Added in 1.0.29
   ========================================================= */

/* ---- MARQUEE: stable sizes + continuous loop ---- */
:root{
  /* dynamic gap so it doesn't explode on 881px */
  --nsw-gap: clamp(16px, 2.4vw, 40px);
  --nsw-logo-h: clamp(28px, 3.4vw, 46px);
}

.nsw-home-partners .nsw-partners,
.nsw-partners{
  overflow: visible !important;  /* wrapper doesn't cut */
}

.nsw-marquee{
  overflow: hidden !important;   /* viewport cuts */
  width: 100% !important;
  padding-inline: var(--nsw-gap) !important;
}

.nsw-marquee__belt{
  display: flex !important;
  gap: var(--nsw-gap) !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
  will-change: transform;
  transform: translate3d(0,0,0);
}

.nsw-marquee__belt.is-animated{
  animation: nswMarquee var(--nsw-marquee-dur, 16s) linear infinite;
}

.nsw-marquee__set{
  display: flex !important;
  gap: var(--nsw-gap) !important;
  align-items: center !important;
  flex: 0 0 auto !important;
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
}

/* IMPORTANT: never hide the duplicate set (keeps first logo after last) */
.nsw-marquee__set[aria-hidden="true"]{
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* logo boxes never grow */
.nsw-logo{
  flex: 0 0 auto !important;
  display: flex !important;
  align-items: center !important;
}

/* hard limits stop "giant carousel" jumps */
.nsw-logo img{
  height: var(--nsw-logo-h) !important;
  max-height: 46px !important;
  width: auto !important;
  max-width: 220px !important;
  object-fit: contain !important;
  display: block !important;
}

/* tighter on small phones */
@media (max-width: 700px){
  :root{
    --nsw-gap: 18px;
    --nsw-logo-h: 32px;
  }
  .nsw-logo img{
    max-width: 160px !important;
    max-height: 34px !important;
  }
}

/* ---- LIVE: "WLASNIE JEDZIEMY PRZEZ MIASTO" always centered ---- */
.ns-ride.is-live .ns-ride__head,
.ns-ride.is-live .ns-ride__meta,
.ns-ride.is-live .ns-ride__actions{
  justify-content: center !important;
  text-align: center !important;
}

.ns-ride.is-live .ns-ride__title{ display: none !important; } /* no 'Trwa przejazd' */

.ns-ride.is-live .ns-ride__live,
.ns-ride.is-live .ns-ride__live-text,
.ns-countdown__live{
  width: 100% !important;
  display: block !important;
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* ===== NS Event: multiple routes (2 trasy / 2 mapy) ===== */
.nsw-routes{ margin-top: 6px; }
.nsw-routes__nav{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin: 6px 0 12px;
  position: relative;
  z-index: 50;
}
.nsw-routes__btn{
  position: relative;
  z-index: 51;
  appearance:none;
  border:1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.25);
  color: rgba(255,255,255,.9);
  padding: 10px 14px;
  border-radius: 999px;
  cursor: pointer;
  font-weight: 600;
  letter-spacing: .3px;
}
.nsw-routes__btn.is-active{
  border-color: rgba(0,229,255,.65);
  box-shadow: 0 0 0 1px rgba(0,229,255,.25) inset, 0 0 14px rgba(0,229,255,.18);
}
.nsw-routes__pane{ display:none; }
.nsw-routes__pane.is-active{ display:block; }

/* --- Najbliższy przejazd: nagłówek mapy + poziom trasy --- */
.nsw-map-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom: 6px;
}
.nsw-route-level{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius: 999px;
  border:1px solid rgba(0,229,255,.45);
  background: rgba(0,16,24,.55);
  color: rgba(255,255,255,.92);
  font-weight: 700;
  font-size: 13px;
  line-height:1;
  white-space: nowrap;
}
.nsw-route-level[hidden]{ display:none !important; }

/* === Najbliższy przejazd: pasek tras NAD mapą (2+ trasy) === */
.nsw-routes__bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:0 0 12px;
}

.nsw-routes__meta{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.nsw-routelevel,
.nsw-routedistance{
  display:inline-flex;
  align-items:center;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(0,229,255,.45);
  background: rgba(0,16,24,.55);
  color: rgba(255,255,255,.92);
  font-weight:700;
  font-size:13px;
  line-height:1;
  white-space:nowrap;
}

/* ukrywamy stary odczyt poziomu (nieużywany) */
.nsw-route-level{ display:none !important; }

/* === Mapa: 1:1 + wyrównana wysokość === */
.nsw-panel--map .nsw-map{
  width: 100%;
  aspect-ratio: 1 / 1;
  height: auto;
  min-height: 420px;
}
@media (max-width: 900px){
  .nsw-panel--map .nsw-map{ min-height: 360px; }
}

/* === Ulice przejazdu: max ~15 wierszy + scroll === */
.nsw-streets{
  max-height: 100%;
  overflow:auto;
  padding-left: 18px;
  margin: 8px 0 0;
}
.nsw-streets li{ margin: 0 0 6px; }

/* ==========================================
   NS — Najbliższy przejazd: data + FB button w jednej linii
   (uporządkowany layout nagłówka)
========================================== */

.nsw-row--next{
  align-items: flex-start;
}

.nsw-nexthead{
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin-top: 6px;
  flex-wrap: wrap;
}

.nsw-nexthead .nsw-h2{
  margin: 0;
  line-height: 1.1;
}

.nsw-fb-btn{
  padding: 10px 16px;
  font-size: 14px;
  line-height: 1;
  border-radius: 999px;
  white-space: nowrap;
  transform: translateY(-2px);
  opacity: .95;
}

.nsw-fb-btn:hover{
  opacity: 1;
}

.nsw-countbox{
  margin-top: 4px;
}

@media (max-width: 720px){
  .nsw-row--next{
    flex-direction: column;
    gap: 14px;
    align-items: stretch;
  }

  .nsw-nexthead{
    align-items: center;
    gap: 10px;
  }

  .nsw-fb-btn{
    width: fit-content;
    transform: none;
  }
}