div.pricing-users-selector {
    border-top: unset; 
    background: unset;
    width: 100%;
    padding: 0;
}
div.pricing-users-selector::before {
    background: unset;
}
@media (max-width: 590px) {
    .users-chosen-card {
    flex-direction: column;
    }
}
/* ── Wszystkie style z oryginalnego payment.php ── */
.nav-cta { gap:.4rem;margin-right:.5rem; }
/* Override global body overflow-x:hidden — it breaks position:sticky on sidebar */
body.payment-body { overflow-x:unset; }
html { overflow-x:hidden; } /* keep horizontal clip but on html not body */
.payment-page { min-height:100vh;padding-top:clamp(5rem,8vw,7rem);padding-bottom:5rem;position:relative;z-index:1; }
/* Okruszki. Wyglad — odstepy, rozmiar, kolory, ikona — przychodzi z bloku
   POWLOKA PODSTRON TRESCIOWYCH w css/styles.css, wspolnego z contact, support
   i blogiem, zeby sciezka nie rozjechala sie miedzy podstronami.

   Nadpisujemy tu WYLACZNIE geometrie pudelka, i to z konkretnego powodu:
   tamte cztery strony maja breadcrumb bezposrednio w <main>, wiec sam musi
   ustawic sie w ramce navbara. Tutaj siedzi juz wewnatrz .container, ktory tej
   samej ramki pilnuje — bez tego nadpisania margines i max-width policzylyby
   sie drugi raz i sciezka wjechalaby do srodka wzgledem reszty strony. */
.payment-breadcrumb { max-width:none;margin:0 0 1.5rem;padding:0; }
.payment-header { margin-bottom:2rem; }
.payment-header-badge { display:inline-flex;align-items:center;gap:.4rem;background:rgba(12,181,210,.15);border:1px solid rgba(12,181,210,.3);color:#0cb5d2;font-size:.72rem;font-weight:800;padding:.3rem .85rem;border-radius:2rem;text-transform:uppercase;letter-spacing:.08em;margin-bottom:.75rem; }
.payment-header h1 { font-family:'Syne',sans-serif;font-size:clamp(1.6rem,3vw,2.2rem);font-weight:900;color:#fff;letter-spacing:-.03em;margin-bottom:.35rem; }
.payment-header h1 span { background:linear-gradient(135deg,#0cb5d2,#a855f7);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text; }
.payment-header p { color:rgba(255,255,255,.6);font-size:.9rem; }
.countdown-banner { background:linear-gradient(135deg,rgba(249,115,22,.88),rgba(239,68,68,.88));backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.15);border-radius:1.25rem;padding:1rem 1.5rem;display:flex;align-items:center;justify-content:space-between;margin-bottom:2rem;gap:1rem;flex-wrap:wrap;box-shadow:0 8px 30px rgba(239,68,68,.2); }
.countdown-banner-left { display:flex;align-items:center;gap:.75rem;color:#fff; }
.countdown-banner-left span { font-weight:600;font-size:.88rem; }
.countdown-timer { font-weight:900;font-size:1.35rem;color:#fff;font-variant-numeric:tabular-nums;letter-spacing:.06em;background:rgba(0,0,0,.18);padding:.3rem .8rem;border-radius:.6rem; }
.pay-card { background:rgba(255,255,255,.97);border-radius:1.5rem;box-shadow:0 4px 20px -4px rgba(0,0,0,.1),0 1px 3px rgba(0,0,0,.05);border:1.5px solid rgba(230,232,236,.9);overflow:hidden;margin-bottom:1.25rem;transition:border-color .3s,box-shadow .3s;width:100%; }
.pay-card:last-child { margin-bottom:0; }
.pay-card:hover { box-shadow:0 8px 28px -4px rgba(0,0,0,.13); }
.pay-card.has-error { border-color:#fca5a5;box-shadow:0 4px 20px -4px rgba(239,68,68,.12); }
.pay-card-header { padding:.9rem 1.5rem;border-bottom:1px solid #f0f2f5;display:flex;align-items:center;gap:.65rem;background:linear-gradient(to right,#f9fafb,#fff); }
.pay-card.has-error .pay-card-header { background:#fef2f2;border-color:#fecaca; }
.pay-card-header-icon { width:1.9rem;height:1.9rem;border-radius:.55rem;flex-shrink:0;background:linear-gradient(135deg,rgba(12,181,210,.1),rgba(83,17,89,.07));display:flex;align-items:center;justify-content:center; }
.pay-card-header-icon svg { color:#0cb5d2;width:.95rem;height:.95rem; }
.pay-card.has-error .pay-card-header-icon { background:rgba(239,68,68,.1); }
.pay-card.has-error .pay-card-header-icon svg { color:#f87171; }
.pay-card-header h2 { font-weight:800;font-size:.92rem;color:#111827; }
.pay-card-header .err-badge { margin-left:auto;font-size:.7rem;font-weight:700;color:#ef4444;display:flex;align-items:center;gap:.25rem;background:#fef2f2;padding:.2rem .5rem;border-radius:.4rem; }
.pay-card-body { padding:1.4rem; }
.pay-grid { display:grid;gap:1.75rem;align-items:start;grid-template-columns:1fr; }
@media(min-width:1024px){ .pay-grid { grid-template-columns:minmax(0,1fr) 360px;align-items:start; } }
.pay-grid > div:first-child { min-width:0;width:100%; }
.pay-grid > div:first-child .pay-card { width:100%;box-sizing:border-box; }
.addon-box { border:2px solid #e5e7eb;border-radius:1.1rem;cursor:pointer;transition:all .2s;background:#fff;margin-bottom:.75rem;overflow:hidden; }
.addon-box:last-child { margin-bottom:0; }
.addon-box:hover { border-color:#a5d8f0; }
.addon-box.checked { border-color:#0cb5d2;background:linear-gradient(135deg,rgba(12,181,210,.04),rgba(83,17,89,.03));box-shadow:0 0 0 3px rgba(12,181,210,.1); }
.addon-box-row { display:flex;align-items:center;gap:.75rem;padding:.9rem 1.1rem; }
.addon-checkbox { width:1.25rem;height:1.25rem;border-radius:.4rem;flex-shrink:0;border:2px solid #d1d5db;display:flex;align-items:center;justify-content:center;transition:all .2s;overflow:hidden;box-sizing:border-box; }
.addon-box.checked .addon-checkbox { background:linear-gradient(135deg,#0cb5d2,#531159);border:none;box-shadow:0 2px 8px rgba(12,181,210,.3); }
.addon-box.checked .addon-checkbox svg { display:block; }
.addon-checkbox svg { display:none;width:.7rem;height:.7rem;color:#fff;flex-shrink:0; }
.addon-label { font-weight:700;font-size:.88rem;color:#111827; }
.addon-desc  { font-size:.75rem;color:#6b7280;margin-top:.15rem; }
.addon-price { margin-left:auto;font-weight:900;font-size:.9rem;background:linear-gradient(135deg,#0cb5d2,#531159);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;white-space:nowrap; }
.addon-extra { padding:0 1.1rem 1rem; }
.op-pills { display:flex;gap:.25rem;background:#f3f4f6;border-radius:.75rem;padding:.25rem; }
.op-pill { flex:1;padding:.45rem .5rem;font-size:.85rem;font-weight:700;border:none;border-radius:.6rem;cursor:pointer;transition:all .2s;background:none;color:#6b7280; }
.op-pill.active { background:linear-gradient(135deg,#0cb5d2,#531159);color:#fff;box-shadow:0 2px 8px rgba(12,181,210,.3); }
#wp-pills { display:grid;grid-template-columns:repeat(5,1fr);gap:.25rem;background:#f3f4f6;border-radius:.75rem;padding:.25rem;flex:none;width:100%; }
#wp-pills .op-pill { padding:.4rem .3rem;font-size:.8rem; }
.users-slider { -webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:3px;cursor:pointer;outline:none;margin-top:.5rem;background:linear-gradient(to right,#0cb5d2 0%,#0cb5d2 var(--fill,0%),#e5e7eb var(--fill,0%),#e5e7eb 100%); }
.users-slider::-webkit-slider-thumb { -webkit-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%;background:linear-gradient(135deg,#0cb5d2,#531159);cursor:pointer;box-shadow:0 2px 8px rgba(12,181,210,.4);border:2px solid #fff; }
.billing-grid { display:grid;gap:.6rem;grid-template-columns:repeat(5,1fr); }
@media(max-width:540px){ .billing-grid { grid-template-columns:repeat(3,1fr); } }
@media(max-width:360px){ .billing-grid { grid-template-columns:repeat(2,1fr); gap:.4rem; } }
.billing-opt { border:2px solid #e5e7eb;border-radius:1rem;padding:.85rem .4rem;text-align:center;cursor:pointer;transition:all .2s;background:#fff;min-width:0; }
@media(max-width:540px){ .billing-opt { padding:.7rem .25rem;border-radius:.75rem; } }
.billing-opt:hover { border-color:#a5d8f0;transform:translateY(-1px); }
.billing-opt.active { border-color:#0cb5d2;background:linear-gradient(135deg,rgba(12,181,210,.06),rgba(83,17,89,.04));box-shadow:0 0 0 3px rgba(12,181,210,.12),0 4px 14px rgba(12,181,210,.1); }
.billing-opt-months { font-weight:800;font-size:.88rem;color:#111827;margin-bottom:.3rem; }
@media(max-width:540px){ .billing-opt-months { font-size:.78rem; } }
.billing-opt.active .billing-opt-months { background:linear-gradient(135deg,#0cb5d2,#531159);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text; }
.billing-opt-disc { font-size:.65rem;font-weight:700;color:#16a34a;background:#dcfce7;border-radius:100px;padding:.15rem .35rem;display:inline-block;white-space:normal;line-height:1.3; }
.billing-opt-disc.no-disc { color:#9ca3af;background:#f3f4f6; }
@media(max-width:540px){ .billing-opt-disc { font-size:.6rem;padding:.1rem .3rem; } }
.pay-form-grid { display:grid;gap:.85rem;grid-template-columns:1fr 1fr; }
@media(max-width:540px){.pay-form-grid{grid-template-columns:1fr;}}
.pay-form-grid .full { grid-column:1/-1; }
.pay-label { display:block;font-size:.78rem;font-weight:700;color:#374151;margin-bottom:.3rem;letter-spacing:.01em; }
.pay-label span { color:#f87171; }
.pay-input { width:100%;padding:.72rem 1rem;border:2px solid #e5e7eb;border-radius:.85rem;font-family:var(--font);font-size:.88rem;background:#f9fafb;color:#111827;outline:none;transition:all .2s;box-sizing:border-box; }
.pay-input:focus { border-color:#0cb5d2;background:#fff;box-shadow:0 0 0 3px rgba(12,181,210,.1); }
.pay-input.field-error { border-color:#fca5a5; }
.pay-field-err { font-size:.72rem;color:#ef4444;margin-top:.3rem;display:flex;align-items:center;gap:.25rem; }
.bank-info-note { display:flex;gap:.6rem;align-items:flex-start;background:#eff6ff;border:1px solid #bfdbfe;border-radius:.85rem;padding:.8rem 1rem;margin-bottom:1.1rem;font-size:.8rem;color:#1e40af;line-height:1.5; }
.bank-row { display:flex;align-items:center;justify-content:space-between;padding:.62rem 0;border-bottom:1px solid #f3f4f6; }
.bank-row:last-child { border-bottom:none; }
.bank-row-label { font-size:.75rem;color:#6b7280;font-weight:600;text-transform:uppercase;letter-spacing:.04em; }
.bank-row-value { font-weight:700;font-size:.88rem;color:#111827;display:flex;align-items:center;gap:.5rem; }
.copy-btn { display:inline-flex;align-items:center;gap:.3rem;padding:.28rem .6rem;background:#f3f4f6;border:1.5px solid #e5e7eb;border-radius:.5rem;font-size:.7rem;font-weight:700;color:#374151;cursor:pointer;transition:all .2s; }
.copy-btn:hover { background:#e5e7eb; }
.copy-btn.copied { background:#dcfce7;color:#16a34a;border-color:#86efac; }
.accept-row { display:flex;align-items:flex-start;gap:.75rem;padding:.9rem 1rem;border:2px solid #e5e7eb;border-radius:1rem;cursor:pointer;transition:all .2s;margin-bottom:.6rem;background:#fff; }
.accept-row:last-child { margin-bottom:0; }
.accept-row:hover { border-color:#a5d8f0; }
.accept-row.checked { border-color:#0cb5d2;background:rgba(12,181,210,.03);box-shadow:0 0 0 3px rgba(12,181,210,.08); }
.accept-box { width:1.2rem;height:1.2rem;border:2px solid #d1d5db;border-radius:.35rem;flex-shrink:0;margin-top:.15rem;display:flex;align-items:center;justify-content:center;transition:all .2s;overflow:hidden;box-sizing:border-box; }
.accept-row.checked .accept-box { background:linear-gradient(135deg,#0cb5d2,#531159);border:none;box-shadow:0 2px 6px rgba(12,181,210,.35); }
.accept-row.checked .accept-box svg { display:block; }
.accept-box svg { display:none;width:.7rem;height:.7rem;color:#fff;flex-shrink:0; }
.accept-text { font-size:.84rem;color:#374151;line-height:1.55;flex:1; }
.accept-text strong { font-weight:700;color:#111827; }
.accept-row-chevron { width:1rem;height:1rem;flex-shrink:0;color:#9ca3af;transition:color .2s,transform .2s; }
.accept-row:hover .accept-row-chevron { color:#0cb5d2;transform:translateX(2px); }
.accept-row.checked .accept-row-chevron { color:#16a34a; }
.bottom-bar { background:rgba(255,255,255,.07);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.13);border-radius:1.25rem;padding:1rem 1.25rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-top:.5rem; }
.bottom-bar-label { font-size:.68rem;color:rgba(255,255,255,.48);text-transform:uppercase;letter-spacing:.06em;margin-bottom:.2rem; }
.bottom-bar-total { font-size:1.35rem;font-weight:900;background:linear-gradient(135deg,#0cb5d2,#a855f7);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text; }
.price-summary-card { background:rgba(255,255,255,.97);border-radius:1.5rem;box-shadow:0 8px 32px -8px rgba(0,0,0,.14),0 1px 3px rgba(0,0,0,.05);border:1.5px solid rgba(230,232,236,.9);overflow:hidden;margin-bottom:1rem; }
.price-summary-header { padding:1rem 1.5rem;border-bottom:1px solid #f0f2f5;background:linear-gradient(to right,#f9fafb,#fff);display:flex;align-items:center;gap:.6rem; }
.price-summary-header h3 { font-weight:900;color:#111827;font-size:.92rem; }
.price-summary-header .plan-badge { margin-left:auto;font-size:.7rem;font-weight:800;background:linear-gradient(135deg,#0cb5d2,#531159);color:#fff;padding:.2rem .55rem;border-radius:.45rem; }
.price-summary-body { padding:1.25rem 1.4rem; }
.price-row { display:flex;justify-content:space-between;align-items:center;font-size:.84rem;margin-bottom:.5rem;color:#374151; }
.price-row.total { border-top:2px solid #e5e7eb;padding-top:.75rem;margin-top:.5rem;font-weight:900;font-size:.95rem;color:#111827; }
.price-row.total .price-val { font-size:1.3rem;font-weight:900;background:linear-gradient(135deg,#0cb5d2,#531159);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text; }
.price-row.discount { color:#16a34a; }
.price-contract { background:linear-gradient(135deg,rgba(12,181,210,.05),rgba(83,17,89,.04));border:1px solid rgba(12,181,210,.15);border-radius:.85rem;padding:.6rem .9rem;display:flex;justify-content:space-between;font-size:.76rem;color:#4b5563;margin-top:.75rem; }

/* ── Pierwsza platnosc ─────────────────────────────────────────
   Kwota przelewu to abonament za caly okres razem z jednorazowa oplata
   wdrozeniowa i oplatami rocznymi — jest o wiele wieksza niz stawka
   miesieczna, wiec dostaje wlasny, wypromowany blok, a stawka miesieczna
   schodzi pod nia jako "kazdy kolejny miesiac". */
.first-pay { margin-top:.9rem;padding:.9rem 1rem;border-radius:1.1rem;background:linear-gradient(135deg,rgba(12,181,210,.09),rgba(83,17,89,.07));border:1.5px solid rgba(12,181,210,.28); }
.first-pay-label { font-size:.68rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:#0a7f93;margin-bottom:.15rem; }
.first-pay-value { font-size:1.75rem;font-weight:900;line-height:1.1;background:linear-gradient(135deg,#0cb5d2,#531159);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text; }
.first-pay-incl { font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:#9ca3af;margin:.6rem 0 .25rem; }
.first-pay-item { display:flex;justify-content:space-between;gap:.75rem;font-size:.76rem;color:#4b5563;padding:.12rem 0; }
.first-pay-item strong { font-weight:700;color:#111827;white-space:nowrap; }
.first-pay-next { display:flex;justify-content:space-between;align-items:center;gap:.75rem;margin-top:.6rem;padding-top:.55rem;border-top:1px dashed rgba(12,181,210,.3);font-size:.78rem;color:#4b5563; }
.first-pay-next strong { font-weight:900;font-size:.95rem;color:#111827;white-space:nowrap; }
.first-pay-note { font-size:.7rem;line-height:1.5;color:#6b7280;margin-top:.55rem; }
/* Ta sama rozpiska w modalu potwierdzenia — sekcja wyrozniona ramka. */
.confirm-detail-section.first-pay-section { border-color:rgba(12,181,210,.45);box-shadow:0 0 0 3px rgba(12,181,210,.08); }
.confirm-detail-row.first-pay-grand { background:#f0f9ff;font-weight:800;color:#111827; }
.confirm-detail-row.first-pay-grand strong { font-size:1.05rem;font-weight:900; }
.confirm-detail-row.first-pay-next-row { background:#f9fafb;color:#6b7280;font-size:.78rem; }
.bottom-bar-next { font-size:.7rem;color:rgba(255,255,255,.55);margin-top:.15rem; }
.bottom-bar-next strong { font-weight:800;color:rgba(255,255,255,.9); }
/* text-align + line-height, bo etykieta "Zamawiam z obowiazkiem zaplaty"
   jest znacznie dluzsza od dawnego "Potwierdz zamowienie" i w waskim
   sidebarze zawija sie na dwie linie. flex-shrink na ikonie, zeby przy
   zawijaniu nie sciskala sie do zera. */
.btn-confirm { width:100%;font-weight:900;font-size:.92rem;padding:.95rem 1.5rem;color:#fff;background:linear-gradient(135deg,#0cb5d2,#531159);border:none;border-radius:1.1rem;cursor:pointer;box-shadow:0 8px 25px rgba(12,181,210,.35);transition:transform .2s,box-shadow .2s;margin-top:.75rem;display:flex;align-items:center;justify-content:center;gap:.5rem;text-align:center;line-height:1.3; }
.btn-confirm svg { flex-shrink:0; }
.btn-confirm:hover:not(:disabled) { transform:translateY(-2px);box-shadow:0 12px 35px rgba(12,181,210,.5); }
.btn-confirm:disabled { background:#e5e7eb;color:#9ca3af;box-shadow:none;cursor:not-allowed; }
.trust-row { display:flex;align-items:center;justify-content:center;gap:1rem;margin-top:.85rem;flex-wrap:wrap; }
.trust-item { display:flex;align-items:center;gap:.3rem;font-size:.7rem;color:rgba(255,255,255,.5); }
.trust-item svg { width:11px;height:11px;color:#4ade80; }
.pay-sidebar { width:100%; }
@media(min-width:1024px){
    .pay-sidebar {
    position:sticky;
    top:5.5rem;
    max-height:calc(100vh - 6.5rem);
    overflow-y:auto;
    overflow-x:hidden;
    scrollbar-width:none;
    align-self:start;
    }
}
@media(min-width:1024px){ .pay-sidebar::-webkit-scrollbar { display:none; } }
.confirm-modal-overlay { display:none;position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.55);backdrop-filter:blur(8px);align-items:center;justify-content:center;padding:1rem; }
.confirm-modal-overlay.open { display:flex; }
.confirm-modal-box { background:#fff;border-radius:1.75rem;width:100%;max-width:430px;padding:2rem;box-shadow:0 30px 70px -15px rgba(0,0,0,.28);animation:scaleIn .25s cubic-bezier(0.16,1,0.3,1); }
@keyframes scaleIn{from{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}
.confirm-modal-icon { width:3.25rem;height:3.25rem;border-radius:1rem;margin-bottom:1.25rem;background:linear-gradient(135deg,rgba(12,181,210,.1),rgba(83,17,89,.07));display:flex;align-items:center;justify-content:center; }
.confirm-modal-icon svg { width:1.4rem;height:1.4rem;color:#0cb5d2; }
.confirm-modal-box h3 { font-size:1.35rem;font-weight:900;color:#111827;margin-bottom:.4rem; }
.confirm-modal-box p { color:#6b7280;font-size:.86rem;line-height:1.5; }
.confirm-modal-amount { background:linear-gradient(135deg,rgba(12,181,210,.05),rgba(83,17,89,.04));border:1.5px solid rgba(12,181,210,.18);border-radius:1.1rem;padding:1rem 1.25rem;display:flex;justify-content:space-between;align-items:center;margin:1rem 0; }
.confirm-modal-amount-label { font-size:.8rem;color:#6b7280;font-weight:600; }
.confirm-modal-amount-val { font-size:1.5rem;font-weight:900;background:linear-gradient(135deg,#0cb5d2,#531159);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text; }
.confirm-modal-btns { display:flex;gap:.75rem;margin-top:1.5rem; }
.btn-cancel { flex:1;padding:.85rem;border:2px solid #e5e7eb;color:#374151;font-weight:700;border-radius:.9rem;background:none;cursor:pointer;transition:all .2s;font-size:.86rem; }
.btn-cancel:hover { background:#f9fafb;border-color:#d1d5db; }
.btn-confirm-modal { flex:1;padding:.85rem;background:linear-gradient(135deg,#0cb5d2,#531159);color:#fff;font-weight:800;font-size:.86rem;border:none;border-radius:.9rem;cursor:pointer;box-shadow:0 4px 15px rgba(12,181,210,.3);transition:all .2s;display:flex;align-items:center;justify-content:center;gap:.5rem; }
.btn-confirm-modal:hover { box-shadow:0 8px 25px rgba(12,181,210,.45);transform:translateY(-1px); }
.btn-confirm-modal:disabled { opacity:.6;cursor:not-allowed;transform:none; }
.success-screen { display:none;min-height:60vh;align-items:center;justify-content:center;flex-direction:column;text-align:center;padding:3rem 1rem; }
.success-screen.active { display:flex; }
.success-icon { width:5.5rem;height:5.5rem;background:linear-gradient(135deg,#4ade80,#10b981);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 1.5rem;box-shadow:0 10px 40px rgba(74,222,128,.4),0 0 0 12px rgba(74,222,128,.14);animation:successPop .6s cubic-bezier(0.16,1,0.3,1); }
@keyframes successPop{from{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}
.success-icon svg { width:2.75rem;height:2.75rem;color:#fff; }
.success-title { font-family:'Syne',sans-serif;font-size:clamp(1.5rem,4vw,2.2rem);font-weight:900;color:#A1FFA7;margin-bottom:.5rem;letter-spacing:-.02em; }
.success-ref { font-size:.84rem;color:rgba(255,255,255,.6);margin-top:.75rem; }
.success-ref strong { color:#fff; }
.btn-back-home { display:inline-flex;align-items:center;gap:.5rem;background:linear-gradient(135deg,#0cb5d2,#531159);color:#fff;font-weight:700;padding:1rem 2rem;border-radius:1.1rem;text-decoration:none;box-shadow:0 8px 25px rgba(12,181,210,.35);transition:transform .2s,box-shadow .2s;margin-top:2rem; }
.spinner { display:inline-block;width:13px;height:13px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite; }
@keyframes spin{to{transform:rotate(360deg)}}
/* ── New fee sections ── */
.fee-section { background:rgba(255,255,255,.97);border-radius:1.5rem;box-shadow:0 4px 20px -4px rgba(0,0,0,.1),0 1px 3px rgba(0,0,0,.05);border:1.5px solid rgba(230,232,236,.9);overflow:hidden;margin-bottom:1.25rem; }
.fee-section-header { padding:.9rem 1.5rem;border-bottom:1px solid #f0f2f5;display:flex;align-items:center;gap:.65rem;background:linear-gradient(to right,#f9fafb,#fff); }
.fee-section-header h3 { font-weight:800;font-size:.92rem;color:#111827; }
.fee-section-body { padding:1.4rem; }
.fee-item { border:2px solid #e5e7eb;border-radius:1.1rem;margin-bottom:.75rem;overflow:hidden;background:#fff; }
.fee-item:last-child { margin-bottom:0; }
.fee-item.mandatory { border-color:rgba(12,181,210,.3);background:linear-gradient(135deg,rgba(12,181,210,.03),rgba(83,17,89,.02)); }
.fee-item-row { display:flex;align-items:center;gap:.75rem;padding:.9rem 1.1rem;cursor:pointer;transition:all .2s; }
.fee-item.mandatory .fee-item-row { cursor:default; }
.fee-item:not(.mandatory):hover { border-color:#a5d8f0; }
.fee-item.checked { border-color:#0cb5d2;background:linear-gradient(135deg,rgba(12,181,210,.04),rgba(83,17,89,.03));box-shadow:0 0 0 3px rgba(12,181,210,.1); }
.fee-checkbox { width:1.25rem;height:1.25rem;border-radius:.4rem;flex-shrink:0;border:2px solid #d1d5db;display:flex;align-items:center;justify-content:center;transition:all .2s;overflow:hidden;box-sizing:border-box; }
.fee-item.checked .fee-checkbox,.fee-item.mandatory .fee-checkbox { background:linear-gradient(135deg,#0cb5d2,#531159);border:none;box-shadow:0 2px 8px rgba(12,181,210,.3); }
.fee-item.checked .fee-checkbox svg,.fee-item.mandatory .fee-checkbox svg { display:block; }
.fee-checkbox svg { display:none;width:.7rem;height:.7rem;color:#fff;flex-shrink:0; }
.fee-item-info { flex:1;min-width:0; }
.fee-item-label { font-weight:700;font-size:.88rem;color:#111827;display:flex;align-items:center;gap:.4rem; }
.fee-mandatory-badge { font-size:.62rem;font-weight:800;background:linear-gradient(135deg,#0cb5d2,#531159);color:#fff;padding:.1rem .4rem;border-radius:.35rem;text-transform:uppercase;letter-spacing:.04em; }
.fee-item-desc { font-size:.75rem;color:#6b7280;margin-top:.15rem; }
.fee-item-price { margin-left:auto;font-weight:900;font-size:.9rem;background:linear-gradient(135deg,#0cb5d2,#531159);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;white-space:nowrap; }
.fee-item-extra { padding:.75rem 1.1rem 1rem;border-top:1px solid #f0f2f5; }
.fee-input-row { display:grid;gap:.65rem;grid-template-columns:1fr 1fr; }
.fee-input-row.three { grid-template-columns:1fr 1fr 1fr; }
@media(max-width:540px){.fee-input-row,.fee-input-row.three{grid-template-columns:1fr;}}
.users-chosen-card { background:rgba(255,255,255,.97);border-radius:1.5rem;box-shadow:0 4px 20px -4px rgba(0,0,0,.1);border:1.5px solid rgba(12,181,210,.25);overflow:hidden;margin-bottom:1.25rem;padding:1rem 1.5rem;display:flex;align-items:center;gap:1rem; }
.users-chosen-icon { width:2.2rem;height:2.2rem;border-radius:.6rem;background:linear-gradient(135deg,rgba(12,181,210,.12),rgba(83,17,89,.08));display:flex;align-items:center;justify-content:center;flex-shrink:0; }
.users-chosen-icon svg { color:#0cb5d2;width:1rem;height:1rem; }
.users-chosen-label { white-space: nowrap; font-size:.78rem;color:#6b7280;font-weight:600; }
.users-chosen-val { white-space: nowrap; font-weight:900;font-size:1.05rem;background:linear-gradient(135deg,#0cb5d2,#531159);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text; }
.info-card { background:rgba(255,255,255,.97);border-radius:1.5rem;box-shadow:0 4px 20px -4px rgba(0,0,0,.1);border:1.5px solid rgba(249,115,22,.2);overflow:hidden;margin-bottom:1.25rem; }
.info-card-header { padding:.9rem 1.5rem;border-bottom:1px solid #fff7ed;display:flex;align-items:center;gap:.65rem;background:linear-gradient(to right,#fff7ed,#fff); }
.info-card-header h3 { font-weight:800;font-size:.92rem;color:#111827; }
.info-card-body { padding:1.4rem; }
.info-item { display:flex;align-items:flex-start;gap:.6rem;padding:.55rem 0;border-bottom:1px solid #f3f4f6;font-size:.83rem;color:#374151;line-height:1.55; }
.info-item:last-child { border-bottom:none; }
.info-item-dot { width:.5rem;height:.5rem;border-radius:50%;background:#f97316;flex-shrink:0;margin-top:.38rem; }
/* ── Detailed confirm modal ── */
.confirm-modal-box.wide { max-width:560px; }
.confirm-detail-section { margin:.75rem 0;border-radius:1rem;overflow:hidden;border:1px solid #e5e7eb; }
.confirm-detail-heading { font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;padding:.45rem .9rem;background:#f9fafb;color:#6b7280;border-bottom:1px solid #e5e7eb; }
.confirm-detail-row { display:flex;justify-content:space-between;padding:.4rem .9rem;font-size:.81rem;border-bottom:1px solid #f3f4f6;color:#374151; }
.confirm-detail-row:last-child { border-bottom:none; }
.confirm-detail-row strong { font-weight:700;color:#111827; }
.confirm-agree-check { display:flex;align-items:flex-start;gap:.75rem;padding:.85rem;border:2px solid #e5e7eb;border-radius:.9rem;cursor:pointer;transition:all .2s;margin-top:.85rem;background:#fff; }
.confirm-agree-check:hover { border-color:#a5d8f0; }
.confirm-agree-check.checked { border-color:#0cb5d2;background:rgba(12,181,210,.03); }
.confirm-agree-box { width:1.15rem;height:1.15rem;border:2px solid #d1d5db;border-radius:.3rem;flex-shrink:0;margin-top:.1rem;display:flex;align-items:center;justify-content:center;transition:all .2s;overflow:hidden;box-sizing:border-box; }
.confirm-agree-check.checked .confirm-agree-box { background:linear-gradient(135deg,#0cb5d2,#531159);border:none; }
.confirm-agree-check.checked .confirm-agree-box svg { display:block; }
.confirm-agree-box svg { display:none;width:.65rem;height:.65rem;color:#fff;flex-shrink:0; }
.confirm-agree-text { font-size:.82rem;color:#374151;line-height:1.5; }
.confirm-modal-scroll { max-height:65vh;overflow-y:auto;scrollbar-width:thin;padding-right:.25rem; }

/* ── Terms / Document modals ── */
.terms-overlay { display:none;position:fixed;inset:0;z-index:10000;background:rgba(5,1,10,.75);backdrop-filter:blur(8px);align-items:flex-start;justify-content:center;padding:5rem 1rem 1rem; }
.terms-overlay.open { display:flex; }
.terms-box { background:#fff;border-radius:1.75rem;width:100%;max-width:680px;height:calc(100vh - 6rem);display:flex;flex-direction:column;box-shadow:0 30px 80px -15px rgba(0,0,0,.45);overflow:hidden;animation:termsIn .3s cubic-bezier(.16,1,.3,1); }
@keyframes termsIn { from{transform:translateY(24px) scale(.97);opacity:0} to{transform:translateY(0) scale(1);opacity:1} }
.terms-header { padding:1.25rem 1.5rem 1rem;border-bottom:1px solid #f0f2f5;flex-shrink:0;display:flex;align-items:flex-start;gap:.85rem; }
.terms-header-icon { width:2.4rem;height:2.4rem;border-radius:.7rem;background:linear-gradient(135deg,rgba(12,181,210,.12),rgba(83,17,89,.08));display:flex;align-items:center;justify-content:center;flex-shrink:0; }
.terms-header-icon svg { color:#0cb5d2;width:1.1rem;height:1.1rem; }
.terms-header-text { flex:1;min-width:0; }
.terms-header-text h2 { font-family:'Syne',sans-serif;font-size:1.05rem;font-weight:900;color:#111827;letter-spacing:-.02em;margin-bottom:.2rem; }
.terms-header-text p  { font-size:.75rem;color:#6b7280;line-height:1.4; }
.terms-close { width:2rem;height:2rem;border-radius:.5rem;background:#f3f4f6;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .2s;margin-left:auto; }
.terms-close:hover { background:#e5e7eb; }
.terms-close svg { width:.9rem;height:.9rem;color:#6b7280; }
.terms-scroll-wrap { flex:1 1 0;min-height:0;overflow:hidden;position:relative; }
.terms-scroll-wrap::after { content:'';position:absolute;bottom:0;left:0;right:0;height:4rem;background:linear-gradient(to top,rgba(255,255,255,1),rgba(255,255,255,0));pointer-events:none;transition:opacity .4s; }
.terms-scroll-wrap.at-bottom::after { opacity:0; }
.terms-body { width:100%;height:100%;overflow-y:scroll;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:1.5rem;font-size:.84rem;color:#374151;line-height:1.7;box-sizing:border-box;scrollbar-width:thin;scrollbar-color:#d1d5db transparent; }
.terms-body::-webkit-scrollbar { width:5px; }
.terms-body::-webkit-scrollbar-track { background:transparent; }
.terms-body::-webkit-scrollbar-thumb { background:#d1d5db;border-radius:99px; }
.terms-progress-bar { height:3px;background:#f0f2f5;flex-shrink:0; }
.terms-progress-fill { height:100%;background:linear-gradient(90deg,#0cb5d2,#531159);transition:width .1s;border-radius:0 3px 3px 0; }
.terms-footer { padding:1rem 1.5rem;border-top:1px solid #f0f2f5;flex-shrink:0;display:flex;align-items:center;gap:.75rem; }
.terms-scroll-hint { flex:1;font-size:.75rem;color:#9ca3af;display:flex;align-items:center;gap:.4rem;transition:opacity .3s; }
.terms-scroll-hint svg { width:.9rem;height:.9rem;flex-shrink:0; }
.terms-scroll-hint.hidden { opacity:0;pointer-events:none; }
.terms-accept-btn { display:flex;align-items:center;gap:.45rem;padding:.72rem 1.4rem;border-radius:.85rem;font-weight:800;font-size:.85rem;cursor:pointer;border:none;transition:all .25s;white-space:nowrap; }
.terms-accept-btn:disabled { background:#e5e7eb;color:#9ca3af;box-shadow:none;cursor:not-allowed; }
.terms-accept-btn:not(:disabled) { background:linear-gradient(135deg,#0cb5d2,#531159);color:#fff;box-shadow:0 4px 14px rgba(12,181,210,.35); }
.terms-accept-btn:not(:disabled):hover { transform:translateY(-1px);box-shadow:0 6px 20px rgba(12,181,210,.45); }
.terms-accept-btn svg { width:.8rem;height:.8rem; }

/* ── Processing screen ── */
.processing-screen { display:none;position:fixed;inset:0;z-index:99999;background:linear-gradient(135deg,#0a0a0f 0%,#0d1a2e 50%,#1a0a1f 100%);align-items:center;justify-content:center;flex-direction:column;gap:1.75rem; }
.processing-screen.active { display:flex; }
.loader {
    width:50px;aspect-ratio:1;display:grid;border:4px solid #0000;border-radius:50%;
    border-color:#531159 #0000;animation:l16 1s infinite linear;
}
.loader::before,.loader::after { content:"";grid-area:1/1;margin:2px;border:inherit;border-radius:50%; }
.loader::before { border-color:#0cb5d2 #0000;animation:inherit;animation-duration:.5s;animation-direction:reverse; }
.loader::after { margin:8px; }
@keyframes l16 { 100%{transform:rotate(1turn)} }
.processing-text { font-family:'Syne',sans-serif;font-size:1.15rem;font-weight:800;color:#fff;letter-spacing:-.01em;text-align:center; }
.processing-sub { font-size:.82rem;color:rgba(255,255,255,.45);text-align:center; }
/* ── Post-order steps ── */
/* Wyglad stanu aktywnego z formularza (patrz .accept-row.checked wyzej):
   kolorowe obramowanie 2px + tint tego samego koloru + delikatna poswiata.
   Roznica jest taka, ze kazdy krok ma JEDEN plaski kolor zamiast gradientu:
   krok 1 to jasny skraj firmowego przebiegu, krok 3 ciemny skraj, a krok 2
   dokladna polowa miedzy nimi (#306396 = srednia sRGB #0cb5d2 i #531159).
   Tekst zostaje ciemny — tint 5% praktycznie nie rusza kontrastu (9,4:1+). */
.pay-steps { list-style:none; }
.pay-step { display:flex;align-items:center;gap:.75rem;padding:.9rem 1rem;border:2px solid;border-radius:1rem;margin-bottom:.8rem;transition:all .2s; }
.pay-step:last-child { margin-bottom:0; }
.pay-step:nth-child(1) { border-color:#0cb5d2;background:rgba(12,181,210,.05);box-shadow:0 0 0 3px rgba(12,181,210,.08); }
.pay-step:nth-child(2) { border-color:#306396;background:rgba(48,99,150,.05);box-shadow:0 0 0 3px rgba(48,99,150,.08); }
.pay-step:nth-child(3) { border-color:#531159;background:rgba(83,17,89,.05);box-shadow:0 0 0 3px rgba(83,17,89,.08); }
/* Badge niesie ten sam kolor co obramowanie, ale krok 1 dostaje #0a7f93
   zamiast #0cb5d2: biala cyfra na firmowym cyjanie to 2,45:1 i oblewa AA,
   a na #0a7f93 juz 4,70:1. Obramowanie moze zostac firmowe — nie niesie tekstu. */
.pay-step-num { width:1.6rem;height:1.6rem;border-radius:.5rem;flex-shrink:0;display:flex;align-items:center;justify-content:center;color:#fff;font-size:.8rem;font-weight:800; }
.pay-step:nth-child(1) .pay-step-num { background:#0a7f93; }
.pay-step:nth-child(2) .pay-step-num { background:#306396; }
.pay-step:nth-child(3) .pay-step-num { background:#531159; }
.pay-step-text { display:flex;flex-direction:column;gap:.15rem;flex:1;min-width:0; }
.pay-step-text strong { font-weight:700;color:#111827;font-size:.86rem; }
.pay-step-text span { font-size:.84rem;color:#374151;line-height:1.55; }

/* Stan ladowania dokumentu prawnego. Dokumenty NIE sa juz wklejane w HTML —
   modal pobiera je przez fetch(legal-doc.php) dopiero przy otwarciu. Trzy
   dokumenty w checkoucie wazyly 90 kB, a polityka prywatnosci doklejala sie
   przez authModal do kazdej z siedmiu stron.

   Wazne: dopoki tu stoi placeholder, przycisk "Akceptuje" MUSI zostac
   zablokowany — patrz _docLoaded w js/auth.js. Placeholder miesci sie
   w oknie, wiec bez tego warunku licznik przewijania uznalby dokument
   za przeczytany do konca. */
.doc-loading { display:flex;align-items:center;justify-content:center;gap:.6rem;padding:3rem 1rem;color:#6b7280;font-size:.85rem; }
.doc-spinner { width:18px;height:18px;border:2px solid #e5e7eb;border-top-color:#0cb5d2;border-radius:50%;animation:doc-spin .7s linear infinite;flex-shrink:0; }
@keyframes doc-spin { to { transform: rotate(360deg); } }
.doc-error { padding:2.5rem 1.5rem;text-align:center;color:#b91c1c;font-size:.85rem;line-height:1.6; }