/* Bezpieczny Tag - sekcja "Zloz zamowienie telefonicznie" */

.bt-tel{background:transparent;padding:clamp(26px,3.2vw,44px) 4vw;overflow-x:clip;font-family:'Figtree',system-ui,-apple-system,sans-serif}

.bt-tel__card{position:relative;max-width:1240px;margin:0 auto;overflow:hidden;
  border-radius:clamp(20px,2.2vw,30px);
  background:linear-gradient(112deg,#FBFDFF 0%,#F1F7FE 46%,#EFF5FE 68%,#FCF1F7 100%);
  box-shadow:0 14px 34px rgba(20,38,94,.08);
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;
  gap:clamp(14px,2.4vw,34px);
  padding:clamp(18px,2.2vw,28px) clamp(18px,2.8vw,38px)}

/* tlo dekoracyjne */
.bt-tel__deco{position:absolute;inset:0;z-index:0;pointer-events:none}
.bt-tel__deco span{position:absolute;display:block;border-radius:50%}
.bt-tel__blob--a{width:clamp(150px,17vw,230px);aspect-ratio:1;right:clamp(-80px,-6vw,-52px);top:clamp(-110px,-8vw,-70px);
  background:radial-gradient(circle at 38% 40%,#F9D9E9 0%,#FBE4F0 58%,rgba(251,228,240,0) 74%)}
.bt-tel__blob--b{width:clamp(74px,8vw,112px);aspect-ratio:1;right:clamp(-40px,-3vw,-24px);top:clamp(-56px,-4.2vw,-34px);
  background:#F6CFE4;opacity:.7}
.bt-tel__blob--c{width:clamp(120px,13vw,180px);aspect-ratio:1;left:clamp(-70px,-5.4vw,-46px);bottom:clamp(-90px,-6.6vw,-58px);
  background:radial-gradient(circle,#E2EFFC 0%,rgba(226,239,252,0) 70%)}

/* ikona telefonu */
.bt-tel__ico{position:relative;z-index:2;flex:0 0 auto;
  width:clamp(74px,7.4vw,106px);aspect-ratio:1;
  border-radius:clamp(20px,2vw,28px);
  background:rgba(151,201,250,.34);
  display:grid;place-items:center}

.bt-tel__wave{position:absolute;inset:0;border-radius:inherit;border:2px solid rgba(59,158,255,.5);
  animation:btTelWave 2.8s ease-out infinite}
.bt-tel__wave--2{animation-delay:1.4s}
@keyframes btTelWave{
  0%{transform:scale(.88);opacity:.8}
  65%{opacity:0}
  100%{transform:scale(1.42);opacity:0}}

.bt-tel__tile{position:relative;z-index:1;display:grid;place-items:center;
  width:76%;height:76%;border-radius:clamp(15px,1.5vw,21px);
  background:linear-gradient(150deg,#58AEFF 0%,#3B9EFF 42%,#1E86F0 100%);
  box-shadow:0 8px 18px rgba(30,134,240,.34);
  animation:btTelBreathe 2.8s ease-in-out infinite}
@keyframes btTelBreathe{0%,100%{transform:scale(1)}50%{transform:scale(1.055)}}

.bt-tel__tile svg{display:block;width:52%;height:52%;transform-origin:50% 50%;
  animation:btTelRing 3.4s ease-in-out infinite}
@keyframes btTelRing{
  0%,54%,100%{transform:rotate(0)}
  58%{transform:rotate(-14deg)}
  62%{transform:rotate(12deg)}
  66%{transform:rotate(-10deg)}
  70%{transform:rotate(8deg)}
  74%{transform:rotate(-5deg)}
  78%{transform:rotate(2deg)}
  82%{transform:rotate(0)}}

/* tresc */
.bt-tel__copy{position:relative;z-index:2;min-width:0}
.bt-tel__eyebrow{display:block;color:#F0187C;font-weight:900;
  font-size:clamp(11px,1.02vw,13.6px);letter-spacing:.11em;text-transform:uppercase}
.bt-tel__h2{font-weight:900;font-size:clamp(22px,3.1vw,42px);line-height:1.08;letter-spacing:-.028em;
  margin:7px 0 0;color:#14265E;text-wrap:balance}
.bt-tel__lead{font-weight:600;font-size:clamp(13px,1.32vw,17.5px);line-height:1.45;margin:8px 0 0;color:#5E6E92}

/* przycisk z numerem */
.bt-tel__cta{position:relative;z-index:2;justify-self:end}
.bt-tel__heart{position:absolute;left:46%;top:clamp(-18px,-1.4vw,-11px);
  width:clamp(13px,1.25vw,18px);height:auto;
  animation:btTelBeat 1.6s ease-in-out infinite}
@keyframes btTelBeat{0%,100%{scale:1}16%{scale:1.3}32%{scale:1}48%{scale:1.16}64%{scale:1}}

.bt-tel__btn{position:relative;overflow:hidden;
  display:inline-flex;align-items:center;gap:clamp(9px,1.1vw,15px);
  min-height:clamp(50px,5.2vw,70px);padding:0 clamp(20px,2.4vw,34px);border-radius:999px;
  background:linear-gradient(100deg,#1D3878 0%,#14265E 58%,#0F1F4E 100%);
  color:#fff;text-decoration:none;white-space:nowrap;
  font-weight:900;font-size:clamp(16px,1.85vw,26px);letter-spacing:-.01em;
  animation:btTelGlow 2.6s ease-in-out infinite;
  transition:transform .18s ease}
@keyframes btTelGlow{
  0%,100%{box-shadow:0 10px 24px rgba(20,38,94,.24)}
  50%{box-shadow:0 14px 32px rgba(20,38,94,.4),0 0 0 7px rgba(59,158,255,.16)}}
.bt-tel__btn::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:36%;
  background:linear-gradient(100deg,rgba(255,255,255,0),rgba(255,255,255,.3),rgba(255,255,255,0));
  transform:skewX(-18deg);animation:btTelShine 4.6s ease-in-out infinite}
@keyframes btTelShine{0%{left:-60%}42%{left:130%}100%{left:130%}}
.bt-tel__btn:hover{transform:translateY(-2px)}
.bt-tel__btn:focus-visible{outline:3px solid #3B9EFF;outline-offset:3px}
.bt-tel__btn svg{position:relative;z-index:1;display:block;width:clamp(19px,1.9vw,27px);height:auto;flex:0 0 auto}
.bt-tel__num{position:relative;z-index:1}

@media (max-width:900px){
  .bt-tel__card{grid-template-columns:auto 1fr;gap:14px 18px;padding:22px 20px 26px}
  .bt-tel__cta{grid-column:1 / -1;justify-self:stretch;margin-top:4px}
  .bt-tel__btn{width:100%;justify-content:center}
  .bt-tel__heart{left:50%;margin-left:-9px}
}

@media (max-width:560px){
  .bt-tel__card{grid-template-columns:1fr;justify-items:center;text-align:center}
  .bt-tel__lead{margin-top:6px}
}

@media (prefers-reduced-motion:reduce){
  .bt-tel__tile,.bt-tel__tile svg,.bt-tel__btn,.bt-tel__btn::after,.bt-tel__heart{animation:none!important}
  .bt-tel__wave{display:none}
  .bt-tel__btn{box-shadow:0 10px 24px rgba(20,38,94,.24)}
}