/* ============================================================
   Hello Biztonság — BIZTONSÁGOS SZÓRAKOZÁS 2 aloldal stílus
   („Mi van benne?" — második kör)
   Minden szabály .bsz2 alá skópozva, hogy ne ütközzön a témával
   és az első „biztonságos szórakozás" oldallal (.bsz) sem.
   A dinamikus blokkokat (patika-teszt, helyszín-választó,
   Elf Bar-kalkulátor, megéri-kérdések) a bsz2-page.js építi fel —
   a belső stílus ott, inline van.
   ============================================================ */

.bsz2{
  --navy:#003153; --navy-d:#00263f; --navy-c:#0a3a5c;
  --teal:#11B7A3; --lime:#C9EA3D;
  --cream:#F7F5F0; --danger:#FF5A5A;
  --f-display:'Anton',sans-serif;
  --f-head:'Space Grotesk',sans-serif;
  --f-body:'DM Sans',system-ui,sans-serif;
  --f-mono:'Space Mono',monospace;
  background:var(--navy); color:var(--cream); font-family:var(--f-body);
}
/* clip és NEM hidden: a hidden görgetési konténert csinál a wrapperből,
   amitől a benne lévő position:sticky (pl. a hb-stack kártya-paklik)
   teljesen hatástalanná válik — a lapok nem ragadnak meg, viszont a
   böngésző mégis sticky-ként kezeli őket, és iOS-en akadozik a görgetés.
   A clip ugyanúgy levágja az oldalra kilógót, de nem hoz létre görgetőt. */
.bsz2{overflow-x:clip}
@supports not (overflow-x:clip){ .bsz2{overflow-x:hidden} }
.bsz2 *{box-sizing:border-box}
.bsz2 img{display:block}
.bsz2 a{text-decoration:none}
.bsz2 button{font-family:inherit}
.bsz2 .i{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle}
.bsz2 .i svg{width:100%;height:100%;display:block}

/* ---- Interaktív elemek ---- */
.bsz2-step{cursor:pointer;transition:background .2s,border-color .2s}
.bsz2-venue-btn{min-width:0}
#bsz2-venue-list{min-width:0}

/* ---- Animációk ---- */
@keyframes bsz2float{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-16px) rotate(2deg)}}
@keyframes bsz2pulseL{0%,100%{box-shadow:0 0 0 0 rgba(201,234,61,.5)}70%{box-shadow:0 0 0 16px rgba(201,234,61,0)}}
@keyframes bsz2marq{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
@keyframes bsz2pop{from{opacity:0;transform:translateY(20px) scale(.96)}60%{transform:translateY(-3px) scale(1.01)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes bsz2shake{0%,100%{transform:translate(0,0) rotate(0)}20%{transform:translate(-6px,3px) rotate(-4deg)}40%{transform:translate(6px,-3px) rotate(4deg)}60%{transform:translate(-5px,2px) rotate(-3deg)}80%{transform:translate(5px,-2px) rotate(3deg)}}
@keyframes bsz2q{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes bsz2glow{0%,100%{opacity:.55}50%{opacity:1}}
@keyframes bsz2breath{0%,100%{transform:scale(1)}50%{transform:scale(1.04)}}
@keyframes bsz2blip{0%,100%{transform:scaleY(.4);opacity:.5}50%{transform:scaleY(1);opacity:1}}
@keyframes bsz2nempulse{0%,100%{transform:scale(1);text-shadow:0 0 0 rgba(255,90,90,0)}50%{transform:scale(1.16);text-shadow:0 0 22px rgba(255,90,90,.55)}}
.bsz2-pop{animation:bsz2pop .5s cubic-bezier(.2,.9,.3,1.2) backwards}

/* ---- G\u00e9pel\u0151d\u0151 c\u00edm kurzora ---- */
@keyframes bsz2caret{0%,100%{opacity:1}50%{opacity:0}}
.bsz2-caret{display:inline-block;color:#C9EA3D;font-weight:400;margin-left:2px;animation:bsz2caret 1s step-end infinite}

/* ---- Reszponzív ---- */
@media(max-width:900px){
  .bsz2-hero-grid{grid-template-columns:minmax(0,1fr)!important}
  .bsz2-patika-grid{grid-template-columns:minmax(0,1fr)!important}
  .bsz2-helyszin-grid{grid-template-columns:minmax(0,1fr)!important}
  .bsz2-vape-grid{grid-template-columns:minmax(0,1fr)!important}
  .bsz2 h1{font-size:56px!important}
  .bsz2-megeri-title{font-size:60px!important}
}
@media(max-width:600px){
  .bsz2-nav-links{display:none!important}
  .bsz2-verdict-grid{grid-template-columns:minmax(0,1fr)!important}
  .bsz2 h1{font-size:46px!important}
  .bsz2 h2{font-size:32px!important}
  .bsz2-megeri-title{font-size:44px!important}
  .bsz2-stat-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important}
  .bsz2 section[id="patika"],.bsz2 section[id="vape"],.bsz2 header{padding-left:20px!important;padding-right:20px!important}
  .bsz2 section[id="helyszin"]>div,.bsz2 section[id="megeri"]>div{padding-left:20px!important;padding-right:20px!important}
  /* Az e-cigi vonal (/biztonsagos-szorakozas-4/) három szekciója is .bsz2
     wrapperben van, és kimaradt innen: 40px oldalpadding maradt mobilon is,
     ami 375px-en 80px-et vett el a tartalomtól. */
  .bsz2 section[id="nikotin"],.bsz2 section[id="fem"],.bsz2 section[id="hamis"]{padding-left:20px!important;padding-right:20px!important}
  .bsz2 nav{padding-left:20px!important;padding-right:20px!important}
}

/* ---- 03 „Hol vagy biztonságban?" — MOBIL helyszín-chipek ----
   Asztali nézetben a négy helyszín teljes szélességű gomb marad, egymás
   alatt. 700px alatt viszont a JS által kirakott chip-sor veszi át:
   négy kis gomb EGY sorban, és a teljes gombokból csak a kiválasztott
   marad kinn (.is-sel) — az „nyílik le" a képével együtt, alatta pedig
   a biztonsági háló (#bsz2-venue-readout) következik.
   A chipeket a bsz2-page.js renderList() építi, a színüket paintList()
   festi — itt csak a forma van. */
.bsz2-venue-chips{display:none}
.bsz2-venue-chip{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-width:0;padding:9px 5px;border:1.5px solid rgba(247,245,240,.14);border-radius:13px;background:rgba(247,245,240,.03);color:rgba(247,245,240,.6);cursor:pointer;transition:background .2s,border-color .2s,color .2s;-webkit-tap-highlight-color:transparent}
.bsz2-venue-chip-lb{max-width:100%;font:700 10.5px 'Space Grotesk',sans-serif;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:inherit}
@keyframes bsz2vopen{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}

@media(max-width:700px){
  .bsz2-venue-chips{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
  /* a gombokon inline style="display:block" van, ezért kell az !important */
  .bsz2-venue-btn{display:none!important}
  .bsz2-venue-btn.is-sel{display:block!important;animation:bsz2vopen .35s ease-out}
}

/* ---- 03 „Hol vagy biztonságban?" — MOBIL szöveg-optimalizálás ----
   A biztonsági háló kártya (#bsz2-venue-readout) és a benne lévő
   „faktor"-buborékok minden belső stílusa INLINE jön a bsz2-page.js-ből,
   ezért kell ide !important. 600px alatt a 30px-es oldalpadding + a 12px-es
   buborék-padding annyit elvett, hogy a kéthasábos rácsban ~82px maradt a
   szövegnek — innen jöttek a 6-7 soros, szétesett feliratok.
   Szűkebb sávval ugyanaz a szöveg ~102px-en fut (+25%), így 1-2 sorral
   rövidebb és olvashatóbb. */
@media(max-width:600px){
  #bsz2-venue-readout{padding:22px 16px!important}
  .bsz2-facts{gap:8px!important}
  .bsz2-fact{padding:9px 10px!important;gap:6px!important}
  .bsz2-fact-txt{line-height:1.25!important}
}