/* Checkout w modalu na koszyku (tylko admin, inc/przypinkowo-fixes.php §16) – style okna z assets/przypinkowo.css (linie 3457–3616),
   wydzielone 12.10.2026, żeby działały na koszyku nowego wyglądu (inc/pz-cart.php), który nie ładuje starego arkusza. */
/* =========================================================================
   Checkout w modalu na koszyku — na razie tylko admin (fixes.php, sekcja 16).
   Checkout ładuje się w ramce; do czasu gotowości formularza widać szkielet
   w jego kształcie i cienki pasek postępu pod nagłówkiem.
   ========================================================================= */
html.pk-cm-lock,
html.pk-cm-lock body{ overflow:hidden; }

/* Plakietka reCAPTCHA i przycisk cookies z koszyka nie wychodzą ponad modal —
   ramka ma własne (ukryte niżej), więc w rogach nie pojawiają się podwójnie.
   visibility, nie display: reCAPTCHA dalej działa. */
html.pk-cm-lock .grecaptcha-badge,
html.pk-cm-lock .cky-btn-revisit-wrapper{ visibility:hidden !important; }

.pk-cm{
  position:fixed; inset:0; z-index:100001;
  display:flex; align-items:center; justify-content:center;
  padding:24px;
}
.pk-cm[hidden]{ display:none; }

.pk-cm__backdrop{
  position:absolute; inset:0; background:rgba(12,12,12,.55);
  opacity:0; transition:opacity .22s ease;
}
.pk-cm__dialog{
  position:relative; display:flex; flex-direction:column;
  width:min(1100px,100%); height:min(92vh,1000px);
  background:#fff; border-radius:16px; overflow:hidden;
  opacity:0; transform:translateY(16px) scale(.985);
  transition:opacity .22s ease, transform .22s cubic-bezier(.2,.8,.2,1);
}
.pk-cm.is-open .pk-cm__backdrop{ opacity:1; }
.pk-cm.is-open .pk-cm__dialog{ opacity:1; transform:none; }

.pk-cm__head{
  position:relative; flex:none;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px 16px 14px 24px; border-bottom:1px solid var(--pk-rule);
}
.pk-cm__title{
  margin:0; font-family:'Instrument Sans','Urbanist',sans-serif;
  font-weight:700; font-size:18px; line-height:1.3; color:var(--pk-ink);
}
.pk-cm__close{
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; padding:0; border:0; border-radius:50%;
  background:none; color:var(--pk-ink-2); cursor:pointer;
  transition:background .15s, color .15s;
}
.pk-cm__close:hover{ background:var(--pk-soft); color:var(--pk-ink); }

/* zasłona paska na czas okna w formularzu (faktura, adres, uwagi, mapa) —
   ten sam odcień co tło okna w ramce, więc pasek i formularz gasną razem */
.pk-cm__dim{
  position:absolute; inset:0 0 -1px; z-index:2;
  background:rgba(12,12,12,.45);
  opacity:0; pointer-events:none; cursor:pointer;
  transition:opacity .2s ease;
}
.pk-cm.is-dimmed .pk-cm__dim{ opacity:1; pointer-events:auto; }

/* pasek postępu leżący na dolnej krawędzi nagłówka */
.pk-cm__progress{
  position:absolute; left:0; right:0; bottom:-1px; height:2px;
  overflow:hidden; background:var(--pk-orange-soft);
  transition:opacity .25s ease;
}
.pk-cm__progress::before{
  content:""; position:absolute; top:0; bottom:0; left:0; width:30%;
  background:var(--pk-orange);
  animation:pk-cm-bar 1.15s cubic-bezier(.45,0,.55,1) infinite;
}
@keyframes pk-cm-bar{
  0%  { transform:translateX(-100%); }
  100%{ transform:translateX(340%); }
}

.pk-cm__body{ position:relative; flex:1; min-height:0; }
.pk-cm__frame{
  display:block; width:100%; height:100%; border:0;
  opacity:0; transition:opacity .28s ease;
}
.pk-cm__status{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* szkielet formularza — ten sam układ co formularz w ramce */
.pk-cm__skel{
  position:absolute; inset:0; z-index:1; overflow:hidden;
  background:#fff;
  transition:opacity .28s ease, visibility 0s linear .28s;
}
.pk-cm__sk{
  display:block; background:#f3efeb; border-radius:8px;
  animation:pk-cm-pulse 1.4s ease-in-out infinite;
}
@keyframes pk-cm-pulse{
  0%,100%{ opacity:1; }
  50%    { opacity:.45; }
}
.pk-cm__skcols{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.92fr); height:100%; }
.pk-cm__skcol{ min-width:0; padding:28px 32px; }
.pk-cm__skcol--side{ padding:28px; background:#FBFAF9; border-left:1px solid var(--pk-rule); }
.pk-cm__sk--h{ width:52%; height:24px; margin-bottom:22px; }
.pk-cm__sk--short{ width:34%; }
.pk-cm__sk--gap{ margin-top:30px; }
.pk-cm__skrow{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.pk-cm__skf{ margin-bottom:16px; }
.pk-cm__sk--label{ width:38%; height:12px; margin:0 0 9px 2px; border-radius:6px; }
.pk-cm__sk--input{ height:48px; border-radius:10px; }
.pk-cm__skopts{ margin-top:14px; border-top:1px solid var(--pk-rule); }
.pk-cm__skopt{ display:flex; align-items:center; gap:12px; padding:16px 0; border-bottom:1px solid var(--pk-rule); }
.pk-cm__sk--box{ flex:none; width:20px; height:20px; border-radius:6px; }
.pk-cm__sk--optline{ width:42%; height:14px; border-radius:6px; }
.pk-cm__sk--card{ height:52px; border-radius:12px; margin-bottom:10px; }
.pk-cm__sk--btn{ height:54px; border-radius:35px; margin-top:26px; }

/* gotowe: szkielet i pasek gasną, formularz się pojawia */
.pk-cm.is-loaded .pk-cm__frame{ opacity:1; }
.pk-cm.is-loaded .pk-cm__skel{ opacity:0; visibility:hidden; }
.pk-cm.is-loaded .pk-cm__progress{ opacity:0; }
.pk-cm.is-loaded .pk-cm__sk,
.pk-cm.is-loaded .pk-cm__progress::before{ animation:none; }

@media (max-width:767px){
  .pk-cm{ padding:0; }
  .pk-cm__dialog{
    width:100%; height:100%; border-radius:0;
    transform:translateY(24px);
  }
  .pk-cm__skcols{ grid-template-columns:1fr; }
  .pk-cm__skcol{ padding:22px 18px; }
  .pk-cm__skcol--side{ display:none; }
}

@media (prefers-reduced-motion:reduce){
  .pk-cm__backdrop,
  .pk-cm__dialog,
  .pk-cm__frame,
  .pk-cm__dim,
  .pk-cm__skel{ transition:none; }
  .pk-cm__dialog{ transform:none; }
  .pk-cm__sk,
  .pk-cm__progress::before{ animation:none; }
}

/* strona checkoutu wewnątrz ramki */
html:has(body.pk-cm-frame){ margin-top:0 !important; }
body.pk-cm-frame{ margin:0; background:#fff; }
.pk-cm-page{ max-width:1100px; margin:0 auto; padding:24px 24px 40px; }
@media (max-width:767px){ .pk-cm-page{ padding:16px 16px 32px; } }

/* w ramce bez własnych widżetów w rogach — okno koszyka ma swoje */
body.pk-cm-frame .grecaptcha-badge{ visibility:hidden !important; }
body.pk-cm-frame .cky-btn-revisit-wrapper,
body.pk-cm-frame .cky-consent-container,
body.pk-cm-frame .cky-modal,
body.pk-cm-frame .cky-overlay{ display:none !important; }