/* Bezpieczny Tag - sekcja "Instrukcja dla dziecka" z filmem.
   Rozmiar kadru celowo taki sam jak film w sekcji "Jak to dziala" (bt-jak__filmbox):
   ten sam kontener 1240, ten sam padding, te same promienie. */

.bt-ins{position:relative;background:transparent;padding:clamp(46px,5.4vw,84px) 0 clamp(38px,4.4vw,68px);
  overflow-x:clip;font-family:'Figtree',system-ui,-apple-system,sans-serif}

/* Na karcie produktu tresc siedzi w waskim kontenerze - sekcja musi wyjsc na pelna szerokosc,
   tak samo jak pozostale sekcje (ten sam wzorzec co w bt-pdp.css i bt-dane.css). */
body.single-product main.is-layout-constrained > .bt-ins{max-width:none!important;width:100vw;position:relative;left:50%;right:50%;margin-left:-50vw!important;margin-right:-50vw!important}

.bt-ins__in{position:relative;z-index:2;max-width:1240px;margin:0 auto;padding:0 clamp(18px,4vw,40px)}

/* ---------- naglowek ---------- */
.bt-ins__head{position:relative;text-align:center;padding:0 0 clamp(14px,1.6vw,22px)}

.bt-ins__h2{margin:0;display:block}
.bt-ins__kick{display:flex;align-items:center;justify-content:center;gap:clamp(10px,1.9vw,29px)}
.bt-ins__kicktxt{color:#F0187C;font-weight:900;text-transform:uppercase;
  font-size:clamp(17px,2.5vw,37px);line-height:1.05;letter-spacing:-.005em;
  text-shadow:0 0 2px #fff,0 2px 0 rgba(255,255,255,.85),2px 0 0 rgba(255,255,255,.5),-2px 0 0 rgba(255,255,255,.5)}
.bt-ins__big{display:block;color:#14265E;font-weight:900;
  font-size:clamp(28px,4.6vw,66px);line-height:1;letter-spacing:-.032em;margin-top:.04em}

/* iskry jak w sekcji "Czym to jest, a czym nie jest": zwykle elementy flex, prawa odbita w pionowej osi */
.bt-ins__spark{flex:0 0 auto;width:clamp(16px,1.9vw,29px);height:auto;aspect-ratio:46/80;overflow:visible}
.bt-ins__spark--r{transform:scaleX(-1)}

.bt-ins__lead{font-weight:600;color:#556898;margin:clamp(6px,.8vw,12px) auto 0;
  font-size:clamp(13.5px,1.4vw,20px);line-height:1.4;max-width:34em}

/* maskotka wystaje ponad kadr, dolna czesc schowana za biala ramka */
.bt-ins__mask{position:absolute;z-index:1;pointer-events:none;
  right:clamp(0px,4.6vw,86px);bottom:calc(-1 * clamp(12px,1.8vw,32px));
  width:clamp(98px,14vw,228px);height:auto;
  transform-origin:50% 92%;animation:btInsBob 4.6s ease-in-out infinite}
@keyframes btInsBob{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-7px) rotate(-1.8deg)}}

/* drobne ozdoby przy naglowku */
.bt-ins__deco{position:absolute;inset:0;z-index:0;pointer-events:none}
.bt-ins__deco svg{position:absolute;display:block}
.bt-ins__deco .d-heart{left:13%;top:26%;width:clamp(16px,1.9vw,30px)}
.bt-ins__deco .d-star{left:19%;top:36%;width:clamp(15px,1.8vw,28px);animation:btInsTwinkle 3.2s ease-in-out infinite}
@keyframes btInsTwinkle{0%,100%{scale:1;opacity:.95}50%{scale:1.2;opacity:.72}}
.bt-ins__deco .d-heart2{right:5%;top:0;width:clamp(15px,1.8vw,28px)}

/* ---------- kadr z filmem ---------- */
.bt-ins__frame{position:relative;z-index:2;background:#fff;border-radius:26px;
  padding:clamp(10px,1vw,16px);box-shadow:0 16px 38px rgba(20,38,94,.1)}
.bt-ins__box{position:relative;border-radius:18px;overflow:hidden;background:#14265E;aspect-ratio:16/9}
.bt-ins__box video{display:block;width:100%;height:100%;border-radius:18px;background:#14265E;object-fit:cover}

.bt-ins__play{position:absolute;inset:0;z-index:2;display:grid;place-items:center;
  border:0;padding:0;cursor:pointer;color:#fff;
  background:radial-gradient(72% 72% at 50% 47%,rgba(20,38,94,.66) 0%,rgba(20,38,94,.48) 58%,rgba(20,38,94,.58) 100%);
  transition:background .3s ease}
.bt-ins__play[hidden]{display:none}
.bt-ins__playin{position:relative;display:grid;place-items:center}
.bt-ins__disc{position:relative;width:clamp(68px,8.6vw,138px);aspect-ratio:1;border-radius:50%;
  border:4px solid #fff;display:grid;place-items:center;background:rgba(255,255,255,.06);
  transition:transform .2s ease,background .2s ease}
.bt-ins__disc svg{width:34%;height:34%;margin-left:9%;fill:#fff}
.bt-ins__ripple{position:absolute;top:50%;left:50%;width:clamp(68px,8.6vw,138px);aspect-ratio:1;
  margin:calc(clamp(68px,8.6vw,138px) / -2) 0 0 calc(clamp(68px,8.6vw,138px) / -2);
  border-radius:50%;border:2px solid rgba(255,255,255,.65);pointer-events:none;
  animation:btInsRipple 2.8s ease-out infinite}
.bt-ins__ripple--2{animation-delay:1.4s}
@keyframes btInsRipple{0%{transform:scale(1);opacity:.6}70%{opacity:0}100%{transform:scale(1.7);opacity:0}}
.bt-ins__play:hover .bt-ins__disc{transform:scale(1.07);background:rgba(255,255,255,.18)}
.bt-ins__play:focus-visible{outline:3px solid #F0187C;outline-offset:-8px}
.bt-ins__playtxt{margin-top:clamp(12px,1.4vw,22px);font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;font-size:clamp(11.5px,1.35vw,20px);color:rgba(255,255,255,.94)}

/* ---------- stopka ---------- */
.bt-ins__foot{display:flex;align-items:center;justify-content:center;gap:clamp(8px,.9vw,13px);
  margin:clamp(16px,1.8vw,26px) 0 0;font-weight:800;color:#14265E;font-size:clamp(12.5px,1.3vw,17px)}
.bt-ins__clock{flex:0 0 auto;width:clamp(21px,2.1vw,30px);height:auto}

@media (max-width:1100px){
  .bt-ins__deco{display:none}
}

/* Waskie ekrany: maskotka dostaje wlasny pas pod tekstem, zamiast wchodzic na naglowek.
   Wysokosc maskotki = szerokosc * 1024/921, wiec pas = wysokosc - zanurzenie w ramce + 8px luzu. */
@media (max-width:900px){
  .bt-ins{--bt-ins-mw:clamp(72px,10vw,96px);--bt-ins-mo:clamp(16px,2.6vw,26px)}
  .bt-ins__mask{width:var(--bt-ins-mw);right:0;bottom:calc(-1 * var(--bt-ins-mo))}
  .bt-ins__head{padding-bottom:calc(var(--bt-ins-mw) * 1.15 - var(--bt-ins-mo) + 14px)}
  .bt-ins__lead{max-width:none}
}

@media (max-width:640px){
  .bt-ins__frame{border-radius:20px}
  .bt-ins__box,.bt-ins__box video{border-radius:14px}
}

@media (prefers-reduced-motion:reduce){
  .bt-ins__mask,.bt-ins__deco .d-star{animation:none!important}
  .bt-ins__ripple{display:none}
}