/*


Theme Name: NightSkating Warszawa


Theme URI: https://example.com/


Author: Michał vel Prezez 


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,.12), rgba(5,8,22,.50));


}





.hero-bg{


  position:absolute;inset:0;


  background-position:center;


  background-size:cover;


  background-repeat:no-repeat;


  opacity:.74;


  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(80px, 14vh, 150px);


  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;
  align-items: center !important;
  text-align: center !important;
  padding-top: clamp(40px, 8vh, 90px) !important;
  padding-bottom: clamp(24px, 4vh, 52px) !important;
  --hero-text-w: 920px;
}

.home .hero{
  align-items: stretch !important;
}

.home .hero .hero-title,
.home .hero .sub,
.home .hero .hero-cta{
  position: relative;
  top: 0;
}





/* 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;


  }


}




/* =========================
   TEAM HERO CTA
   ========================= */
.hero-cta{
  margin-top: 26px;
  display: flex;
  justify-content: flex-start;
}
.hero-btn{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  min-width: 280px;
  padding: 18px 34px;
  border-radius: 18px;
  border: 1px solid rgba(95, 232, 255, .45);
  background: linear-gradient(135deg, rgba(8,18,52,.88), rgba(11,32,92,.88));
  color: #f4fbff;
  text-decoration: none;
  box-shadow: 0 0 0 1px rgba(95,232,255,.18), 0 18px 48px rgba(0,0,0,.34), 0 0 38px rgba(46,184,255,.20);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}
.hero-btn::before{
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: 17px;
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,0));
  pointer-events: none;
}
.hero-btn .ns-btn__l1{
  position: relative;
  z-index: 1;
  font-size: 20px;
  font-weight: 900;
  letter-spacing: .01em;
}
.hero-btn:hover{
  transform: translateY(-2px);
  border-color: rgba(95,232,255,.72);
  background: linear-gradient(135deg, rgba(10,24,66,.94), rgba(12,43,120,.94));
  box-shadow: 0 0 0 1px rgba(95,232,255,.28), 0 22px 54px rgba(0,0,0,.40), 0 0 50px rgba(46,184,255,.28);
}
.pos-x-center .hero-cta{justify-content:center;}
.pos-x-right .hero-cta{justify-content:flex-end;}
@media (max-width: 767px){
  .hero-cta{margin-top:18px;}
  .hero-btn{width:100%; min-width:0; padding:16px 20px;}
  .hero-btn .ns-btn__l1{font-size:18px;}
}

.home .hero .hero-inner--low .hero-title,
.home .hero .hero-inner--low .sub{
  margin-left:auto !important;
  margin-right:auto !important;
}
.home .hero .hero-cta{
  justify-content:center !important;
}