/* Bezpieczny Tag - sekcja "Szybka konfiguracja" na karcie produktu (wersja z filmem osadzonym, 13.10.2026).
   Desktop: po lewej naglowek, karta krokow i dopisek; po prawej pionowy film. Telefon: naglowek, film, kroki, dopisek.
   Poprzednia wersja (jedna grafika): _backup/bt-konfiguracja.css.bak-20261013 */

.bt-konf{position:relative;background:transparent;padding:clamp(30px,3.6vw,58px) 0 clamp(10px,1.4vw,22px);
  --k-navy:#0B1F5E;--k-blue:#1F8AFD;--k-pink:#FF2C93;--k-panel:#EAF5FE;--k-deco:#D3E6FB;--k-row:#F3F8FE;
  --k-spw:clamp(26px,3.4vw,46px);--k-spg:clamp(10px,1.4vw,18px)}

/* Na karcie produktu tresc siedzi w waskim kontenerze - sekcja wychodzi na pelna szerokosc. */
body.single-product main.is-layout-constrained > .bt-konf{max-width:none!important;width:100vw;position:relative;left:50%;right:50%;margin-left:-50vw!important;margin-right:-50vw!important}

.bt-konf__in{position:relative;max-width:1240px;margin:0 auto;padding:0 clamp(16px,4vw,40px)}

/* ---------- panel i siatka ---------- */
.bt-konf__panel{position:relative;overflow:hidden;isolation:isolate;background:var(--k-panel);
  border:clamp(8px,1.1vw,14px) solid #fff;border-radius:clamp(26px,3vw,40px);
  box-shadow:0 22px 50px rgba(20,38,94,.07);
  padding:clamp(28px,3.4vw,46px) clamp(16px,3.4vw,48px) clamp(24px,2.8vw,38px);
  display:grid;grid-template-columns:minmax(0,1fr) clamp(300px,37%,420px);
  grid-template-areas:"head film" "steps film" "note film";grid-template-rows:auto auto 1fr;
  column-gap:clamp(28px,4.4vw,56px);align-items:start}

.bt-konf__head{grid-area:head}
.bt-konf__film{grid-area:film;align-self:center}
.bt-konf__steps{grid-area:steps}
.bt-konf__note{grid-area:note}

/* ---------- ozdoby ---------- */
.bt-konf__deco,.bt-konf__star{position:absolute;z-index:-1;pointer-events:none}
.bt-konf__deco{border-radius:50%;border:clamp(20px,2.4vw,32px) solid var(--k-deco)}
.bt-konf__deco--ring1{width:clamp(110px,11vw,150px);aspect-ratio:1;left:clamp(-110px,-7.5vw,-80px);top:26%}
.bt-konf__deco--ring2{width:clamp(140px,14vw,190px);aspect-ratio:1;right:clamp(-120px,-8vw,-86px);top:8%}
.bt-konf__deco--ring3{width:clamp(130px,13vw,180px);aspect-ratio:1;left:clamp(-90px,-6vw,-60px);bottom:clamp(-130px,-9vw,-90px)}
.bt-konf__deco--ring4{width:clamp(110px,11vw,150px);aspect-ratio:1;right:clamp(-70px,-5vw,-50px);bottom:clamp(-110px,-7.5vw,-80px)}
.bt-konf__deco--dot1{border:0;background:var(--k-deco);width:clamp(46px,4.8vw,66px);aspect-ratio:1;left:2.4%;top:2.6%}
.bt-konf__star{width:clamp(18px,2.1vw,30px);color:#BCD6F5}
.bt-konf__star svg{display:block;width:100%;height:auto}
.bt-konf__star--1{left:44%;top:6%}
.bt-konf__star--2{right:2.6%;top:34%;width:clamp(16px,1.8vw,26px)}
.bt-konf__star--3{left:1.6%;top:69%;width:clamp(16px,1.8vw,26px)}
.bt-konf__star--4{right:2.8%;bottom:11%;width:clamp(16px,1.8vw,26px)}

/* ---------- akcenty ---------- */
.bt-konf__sp{display:inline-flex;flex:0 0 auto;color:var(--k-pink);width:clamp(16px,1.7vw,24px)}
.bt-konf__sp svg{display:block;width:100%;height:auto;overflow:visible}
.bt-konf__sp--r svg{transform:scaleX(-1)}

/* ---------- naglowek ---------- */
.bt-konf__head{container-type:inline-size;padding-left:calc(var(--k-spw) + var(--k-spg))}
.bt-konf__eyebrow{display:flex;align-items:center;gap:clamp(10px,1.4vw,18px);margin:0 0 0 clamp(0px,7cqi,72px)}
.bt-konf__pill{display:inline-block;background:#FFDFF3;color:#F70A82;font-weight:700;font-size:clamp(12px,1.25vw,17px);
  letter-spacing:.03em;text-transform:uppercase;line-height:1;padding:.62em 1.4em;border-radius:999px}

.bt-konf__title{display:flex;align-items:center;gap:var(--k-spg);margin:clamp(8px,1.2vw,16px) 0 clamp(6px,.8vw,10px) calc(-1 * (var(--k-spw) + var(--k-spg)));
  font-weight:900;font-size:clamp(28px,9.2cqi,58px);line-height:1.05;letter-spacing:-.03em;color:var(--k-navy)}
.bt-konf__title .bt-konf__sp--t{width:var(--k-spw)}
.bt-konf__titletxt{white-space:nowrap}
.bt-konf__lead{margin:0;max-width:24em;font-weight:500;font-size:clamp(16px,1.75vw,23px);line-height:1.35;color:var(--k-navy)}

/* ---------- karta krokow ---------- */
.bt-konf__steps{list-style:none;margin:clamp(20px,2.4vw,32px) 0 0;padding:clamp(12px,1.3vw,18px);display:flex;flex-direction:column;gap:clamp(10px,1.2vw,16px);
  background:#fff;border-radius:clamp(18px,2vw,26px);box-shadow:0 14px 34px rgba(20,38,94,.07)}
.bt-konf__step{display:flex;align-items:center;gap:clamp(12px,1.8vw,24px);margin:0;min-width:0;
  background:var(--k-row);border-radius:clamp(14px,1.5vw,20px);padding:clamp(12px,1.3vw,16px) clamp(16px,2vw,26px) clamp(12px,1.3vw,16px) clamp(14px,1.4vw,18px);min-height:clamp(66px,6.6vw,92px)}
.bt-konf__num{flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:clamp(40px,4.4vw,60px);aspect-ratio:1;border-radius:50%;
  background:var(--k-blue);color:#fff;font-weight:800;font-size:clamp(20px,2.3vw,32px);line-height:1;box-shadow:0 6px 14px rgba(31,138,253,.28)}
.bt-konf__ico{flex:0 0 auto;width:clamp(44px,4.8vw,66px);display:flex;justify-content:center}
.bt-konf__ico svg{display:block;width:100%;height:auto}
.bt-konf__txt{flex:1 1 auto;min-width:0;font-weight:700;font-size:clamp(15.5px,1.75vw,23px);line-height:1.3;color:var(--k-navy);text-wrap:balance}
.bt-konf__sp--step{width:clamp(18px,1.9vw,26px);margin-left:auto}
.bt-konf__sp--step svg{transform:scaleX(-1)}

.bt-konf__sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- dopisek ---------- */
.bt-konf__note{display:flex;align-items:center;gap:12px;margin:clamp(16px,2vw,26px) 0 0;padding-left:clamp(14px,2.4vw,34px);
  font-size:clamp(14px,1.2vw,16px);line-height:1.4;color:var(--k-navy)}
.bt-konf__note svg{flex:0 0 auto;width:clamp(22px,2.1vw,28px);height:auto}

/* ---------- film ---------- */
.bt-konf__film{display:flex;flex-direction:column;align-items:center;min-width:0;width:100%}
.bt-konf__filmtag{display:flex;align-items:center;justify-content:center;gap:clamp(10px,1.4vw,18px);margin:0 0 clamp(-4px,-.3vw,-2px);position:relative;z-index:2}
.bt-konf__filmpill{display:inline-flex;align-items:center;gap:.7em;background:linear-gradient(90deg,#FF3E9B 0%,#F7148A 100%);color:#fff;
  font-weight:800;font-size:clamp(13px,1.35vw,18px);letter-spacing:.02em;text-transform:uppercase;line-height:1;padding:.72em 1.3em .72em 1em;
  border-radius:999px;box-shadow:0 8px 20px rgba(247,20,138,.28)}
.bt-konf__filmpill svg{width:1.4em;height:1.4em;flex:0 0 auto}

.bt-konf__video{position:relative;width:100%;aspect-ratio:10/16;background:#0B1520;
  border:clamp(8px,1vw,13px) solid #fff;border-radius:clamp(22px,2.4vw,32px);overflow:hidden;
  box-shadow:0 20px 44px rgba(20,38,94,.15);margin-top:clamp(10px,1.2vw,16px)}
.bt-konf__video video{display:block;width:100%;height:100%;object-fit:cover;background:#0B1520;cursor:pointer}
.bt-konf__play{position:absolute;left:50%;top:65%;width:24%;aspect-ratio:1;transform:translate(-50%,-50%);
  display:flex;align-items:center;justify-content:center;padding:0;cursor:pointer;
  background:var(--k-blue);border:clamp(4px,.5vw,7px) solid #fff;border-radius:50%;
  box-shadow:0 14px 30px rgba(31,138,253,.42);transition:transform .2s ease,box-shadow .2s ease,opacity .2s ease}
.bt-konf__play svg{width:44%;height:44%;margin-left:7%}
.bt-konf__play:hover{transform:translate(-50%,-50%) scale(1.06);box-shadow:0 16px 36px rgba(31,138,253,.52)}
.bt-konf__play:focus-visible{outline:3px solid #8ED2F5;outline-offset:4px}
.bt-konf__video.is-playing .bt-konf__play{opacity:0;pointer-events:none}

/* ---------- srednie ekrany ---------- */
@media (max-width:1024px) and (min-width:761px){
  .bt-konf__panel{grid-template-columns:minmax(0,1fr) clamp(250px,36%,320px)}
}

/* ---------- telefon ---------- */
@media (max-width:760px){
  .bt-konf{--k-spw:22px;--k-spg:10px}
  .bt-konf__panel{display:block;padding:26px 14px 22px}
  .bt-konf__head{padding-left:0;text-align:center}
  .bt-konf__eyebrow{justify-content:center;margin:0}
  .bt-konf__title{justify-content:center;margin:10px 0 6px;font-size:clamp(25px,7.6vw,34px);gap:10px}
  .bt-konf__titletxt{white-space:normal}
  .bt-konf__lead{font-size:15.5px;max-width:22em;margin:0 auto}

  .bt-konf__film{margin-top:20px}
  .bt-konf__filmpill{font-size:13px}
  .bt-konf__video{width:min(100%,300px);aspect-ratio:9/16;border-width:8px;border-radius:24px}
  .bt-konf__play{width:72px}

  .bt-konf__steps{margin-top:20px;padding:10px;gap:8px;border-radius:20px}
  .bt-konf__step{gap:12px;padding:10px 14px 10px 10px;min-height:64px;border-radius:14px}
  .bt-konf__num{width:38px;font-size:19px}
  .bt-konf__ico{width:42px}
  .bt-konf__txt{font-size:15.5px}
  .bt-konf__sp--step{width:16px}

  .bt-konf__note{justify-content:center;padding-left:0;margin-top:16px;font-size:14px}
  .bt-konf__note svg{width:22px}

  .bt-konf__deco--ring1{left:-90px;top:30%}
  .bt-konf__deco--ring2{right:-100px;top:42%}
  .bt-konf__star--1{left:auto;right:10%;top:3%}
  .bt-konf__star--2{top:24%}
  .bt-konf__star--3{top:46%}
}

@media (prefers-reduced-motion:reduce){
  .bt-konf__play{transition:none}
}

/* --- MOBILE 25.10.2026: mniejszy film i zwarte kroki, bez szerokiego pustego marginesu --- */
@media (max-width:560px){
  .bt-konf{padding:20px 0 6px}
  .bt-konf__in{padding:0 12px}
  .bt-konf__panel{padding:22px 10px 18px;border-width:6px;border-radius:26px}
  .bt-konf__video{width:min(100%,270px)}
  .bt-konf__filmtag{gap:8px}
  .bt-konf__steps{margin-top:16px;padding:8px;gap:8px}
  .bt-konf__step{gap:10px;padding:9px 12px 9px 9px;min-height:60px}
  .bt-konf__num{width:34px;font-size:17px}
  .bt-konf__ico{width:38px}
  .bt-konf__txt{font-size:15px}
  .bt-konf__note{margin-top:12px;font-size:13.5px}
}