/* =============================================================================
   checkout.css — własny CSS koncernu CHECKOUT (NIE tykać shop.css).
   Prefiks .ck- by uniknąć kolizji z klasami storefrontu. Tokeny (--accent,
   --radius, --shadow, light/dark) dziedziczone z shop.css/layout (data-theme).
   Buduje wygląd 1:1 z _design/mockups/checkout.html. Polskie znaki UTF-8.
   ============================================================================= */

/* box-sizing: bez tego width:100% + padding na .ck-input rozpycha .ck-row-inline
   ponad szerokość viewportu na mobile (poziomy scroll). Scoped do .ck-wrap by nie
   ruszać innych koncernów. uwaga: reset lokalny; gdyby kiedyś przejść na globalny
   reset w shop.css, tę regułę usunąć. */
.ck-wrap, .ck-wrap *, .ck-wrap *::before, .ck-wrap *::after { box-sizing: border-box; }
.ck-wrap { max-width: 1080px; margin: 0 auto; padding-bottom: 110px; overflow-x: clip; }
@media (min-width: 860px) { .ck-wrap { padding-bottom: 24px; } }

.ck-muted { color: var(--text-muted, #8899aa); }
.ck-err {
  color: var(--danger, #ef4444); font-size: 12.5px; margin: 6px 0 0; font-weight: 600;
}

/* crumbs */
.ck-crumbs {
  display: flex; gap: 6px; align-items: center; flex-wrap: wrap;
  font-size: 12.5px; color: var(--text-muted, #8899aa); margin-bottom: 14px;
}
.ck-crumbs a { color: inherit; text-decoration: none; }
.ck-crumbs a:hover { color: var(--accent, #c8a258); }
.ck-crumbs b { color: var(--accent, #c8a258); }

/* layout grid */
.ck-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
/* min-width:0 — grid-item domyślnie ma min-width:auto i nie zwęża się poniżej
   min-content potomków (boxy OTP) -> na <360px kolumna rozpychała się poza okno. */
.ck-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
@media (min-width: 860px) {
  .ck-grid { grid-template-columns: 1.18fr .82fr; align-items: start; }
}

/* card */
.ck-card {
  background: var(--bg-card, #fff); border: 1px solid var(--border, #d4dce6);
  border-radius: var(--radius-lg, 14px); box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,.05));
  overflow: hidden;
}
.ck-card__hd { padding: 16px 18px 0; }
.ck-card__bd { padding: 14px 18px 18px; }
.ck-title {
  display: flex; align-items: center; gap: 0; margin: 0;
  font-family: var(--font-head, 'Montserrat', sans-serif); font-weight: 800; font-size: 16px;
  color: var(--text-primary, #0b1426);
}
.ck-step {
  display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
  background: var(--accent-light, #c8a25815); color: var(--accent, #c8a258);
  font-weight: 800; font-size: 13px; margin-right: 8px;
}
.ck-sub { color: var(--text-secondary, #3d5a80); font-size: 13.5px; margin: 4px 0 0 32px; }

/* order lines */
.ck-ord-line {
  display: flex; justify-content: space-between; gap: 12px; align-items: center;
  padding: 11px 0; border-bottom: 1px dashed var(--border-light, #e2e8f0);
}
.ck-ord-line:last-of-type { border-bottom: 0; }
.ck-ord-info { display: flex; gap: 12px; align-items: center; }
.ck-thumb {
  width: 50px; height: 50px; border-radius: var(--radius, 10px); flex: none;
  background: linear-gradient(135deg, #1a2a4d, var(--accent, #c8a258));
  display: grid; place-items: center; color: #fff; font-size: 20px;
}
.ck-ord-name { font-weight: 700; font-size: 14.5px; color: var(--text-primary, #0b1426); }
.ck-ord-sub { font-size: 12.5px; }
.ck-ord-line-total {
  font-family: var(--font-head, 'Montserrat', sans-serif); font-weight: 900; font-size: 15px;
  color: var(--text-primary, #0b1426); white-space: nowrap;
}

.ck-badge-low, .ck-badge-out {
  display: inline-flex; align-items: center; gap: 5px; margin-top: 5px;
  font-size: 11.5px; font-weight: 700; padding: 3px 8px; border-radius: 999px;
}
.ck-badge-low { background: var(--warning-bg, #fffbeb); color: var(--warning, #d97706); }
.ck-badge-out { background: var(--danger-bg, #fef2f2); color: var(--danger, #ef4444); }

/* totals */
.ck-totals { margin-top: 8px; }
.ck-totals__row {
  display: flex; justify-content: space-between; padding: 5px 0; font-size: 14px;
  color: var(--text-secondary, #3d5a80);
}
.ck-totals__row[hidden] { display: none; }
.ck-discount { color: var(--success, #16a34a); }
.ck-grand {
  padding-top: 12px; margin-top: 6px; border-top: 1px solid var(--border, #d4dce6);
  font-family: var(--font-head, 'Montserrat', sans-serif); font-weight: 900; font-size: 20px;
  color: var(--text-primary, #0b1426);
}

/* form fields */
.ck-fld { display: block; font-size: 13px; font-weight: 600; color: var(--text-secondary, #3d5a80); margin: 0 0 6px; }
.ck-input {
  width: 100%; height: 46px; padding: 0 13px; border: 1px solid var(--border, #d4dce6);
  border-radius: var(--radius, 10px); background: var(--bg-input, #f0f3f7);
  color: var(--text-primary, #0b1426);
  /* 16px (nie 15) — poniżej 16px iOS Safari auto-zoomuje przy focusie inputa i nie cofa
     zoomu po blur (rozjechany layout, scroll w 4 strony na iPhone). 16px to wyłącza. */
  font-size: 16px;
  font-family: var(--font-sans, -apple-system, sans-serif);
  transition: var(--transition, 150ms ease); outline: none;
}
.ck-input:focus { border-color: var(--accent, #c8a258); box-shadow: 0 0 0 3px var(--accent-light, #c8a25815); }
/* Pole z błędem walidacji (oznaczane przez checkout.js przy próbie "Zapłać"). */
.ck-input--err { border-color: var(--danger, #ef4444); background: var(--danger-bg, #fef2f2); }
.ck-input--err:focus { border-color: var(--danger, #ef4444); box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15); }
.ck-input--postcode { max-width: 110px; }
.ck-grid2 { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 520px) { .ck-grid2 { grid-template-columns: 1fr 1fr; } }
.ck-row-inline { display: flex; gap: 10px; }

/* buttons */
.ck-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 46px; padding: 0 18px; border-radius: var(--radius, 10px);
  border: 1px solid var(--border, #d4dce6); background: var(--bg-card, #fff);
  color: var(--text-primary, #0b1426); font-weight: 700; font-size: 15px; cursor: pointer;
  transition: var(--transition, 150ms ease); text-decoration: none;
  font-family: var(--font-sans, -apple-system, sans-serif); flex: none;
}
.ck-btn:hover { border-color: var(--accent, #c8a258); color: var(--accent, #c8a258); }
.ck-btn--accent {
  background: var(--accent, #c8a258); border-color: var(--accent, #c8a258); color: var(--accent-text, #fff);
}
.ck-btn--accent:hover {
  background: var(--accent-hover, #b8923e); border-color: var(--accent-hover, #b8923e); color: var(--accent-text, #fff);
}
.ck-btn--block { width: 100%; }
.ck-btn--lg { height: 56px; font-size: 17px; font-family: var(--font-head, 'Montserrat', sans-serif); font-weight: 800; }
.ck-btn--ghost { background: transparent; border-color: transparent; color: var(--text-secondary, #3d5a80); height: auto; padding: 4px; }
.ck-btn--ghost:hover { color: var(--accent, #c8a258); }
/* #8/#9: wyraźny powrót do koszyka — widoczny afford, nie sam breadcrumb */
.ck-back-cart { height: auto; padding: 7px 14px; margin-bottom: 14px; gap: 6px;
  border-color: var(--border, #d4dce6); color: var(--text-secondary, #3d5a80);
  background: transparent; font-weight: 600; font-size: 14px; }
.ck-back-cart:hover { border-color: var(--accent, #c8a258); color: var(--accent, #c8a258); }
.ck-btn:disabled { opacity: .5; cursor: not-allowed; }
.ck-pay { margin-top: 16px; }

/* segmented (typ kupującego / tryb uczestników) */
.ck-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ck-seg label { position: relative; cursor: pointer; }
.ck-seg input { position: absolute; opacity: 0; }
.ck-opt {
  display: flex; flex-direction: column; gap: 2px; padding: 13px 14px;
  border: 1.5px solid var(--border, #d4dce6); border-radius: var(--radius, 10px);
  background: var(--bg-card, #fff); transition: var(--transition, 150ms ease);
}
.ck-opt b { font-size: 14.5px; color: var(--text-primary, #0b1426); }
.ck-opt small { color: var(--text-muted, #8899aa); font-size: 12px; }
.ck-seg input:checked + .ck-opt {
  border-color: var(--accent, #c8a258); background: var(--accent-light, #c8a25815);
  box-shadow: 0 0 0 3px var(--accent-light, #c8a25815);
}
.ck-seg input:focus-visible + .ck-opt { box-shadow: 0 0 0 3px var(--accent-light, #c8a25815); }

/* company reveal */
.ck-company { display: none; margin-top: 4px; animation: ckReveal .2s ease; }
.ck-company.is-shown { display: block; }
@keyframes ckReveal { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.ck-nip-status { font-size: 12px; margin-top: 6px; }

/* OTP */
.ck-otp-stage { display: none; }
.ck-otp-stage.is-active { display: block; }
.ck-otp-hint { font-size: 12px; margin: 8px 0 0; }
.ck-otp-sent { font-size: 14px; margin: 0 0 10px; color: var(--text-primary, #0b1426); }
.ck-otp-boxes { display: flex; gap: 8px; margin: 0 0 6px; }
.ck-otp-boxes input {
  /* min-width:0 — bez tego flex-item nie zwęża się poniżej min-content i 6 boxów
     rozpycha kolumnę do ~380px (overflow na ekranach <360px, np. iPhone SE 320). */
  flex: 1; min-width: 0; max-width: 52px; height: 54px; text-align: center; font-size: 22px; font-weight: 800;
  border: 1px solid var(--border, #d4dce6); border-radius: var(--radius, 10px);
  background: var(--bg-input, #f0f3f7); color: var(--text-primary, #0b1426);
}
/* focus ring inset, nie outset: na wąskim ekranie (iPhone ~390px) 6 boxów flex:1
   wypełnia kontener edge-to-edge (slack 0), a outset 0 0 0 3px wychodził poza
   .ck-wrap{overflow-x:clip} i ucinał/„przydymiał" ostatni (6.) box. */
.ck-otp-boxes input:focus { border-color: var(--accent, #c8a258); outline: none; box-shadow: inset 0 0 0 2px var(--accent, #c8a258); }
/* mobile: mniejszy gap = boxy mają luz, nie dotykają krawędzi kontenera */
@media (max-width: 420px) {
  .ck-otp-boxes { gap: 6px; }
  .ck-otp-boxes input { font-size: 20px; }
}
.ck-otp-actions { display: flex; justify-content: space-between; align-items: center; margin-top: 4px; }
.ck-otp-pill {
  display: flex; align-items: center; gap: 10px; padding: 11px 14px;
  border: 1px solid var(--success, #16a34a); background: var(--success-bg, #f0fdf4);
  border-radius: var(--radius, 10px); color: var(--text-primary, #0b1426); font-size: 14px;
}
.ck-otp-pill .ck-ic { color: var(--success, #16a34a); flex: none; }
@keyframes ckShake { 10%,90%{transform:translateX(-1px)} 20%,80%{transform:translateX(2px)} 30%,50%,70%{transform:translateX(-4px)} 40%,60%{transform:translateX(4px)} }
.ck-shake { animation: ckShake .4s ease; }

/* accordion uczestników */
.ck-acc { border: 1px solid var(--border, #d4dce6); border-radius: var(--radius, 10px); margin-top: 10px; overflow: hidden; }
.ck-acc__hd {
  display: flex; align-items: center; justify-content: space-between; padding: 13px 14px;
  cursor: pointer; background: var(--bg-card, #fff);
}
.ck-acc__hd b { font-size: 14px; color: var(--text-primary, #0b1426); }
.ck-acc__r { display: flex; gap: 8px; align-items: center; }
.ck-tag { font-size: 12px; color: var(--text-muted, #8899aa); }
.ck-acc__bd { padding: 0 14px 14px; display: none; }
.ck-acc.is-open .ck-acc__bd { display: block; }
.ck-acc__chev { transition: var(--transition, 150ms ease); }
.ck-acc.is-open .ck-acc__chev { transform: rotate(180deg); }
.ck-att-later[hidden] { display: none; }

.ck-info-box {
  padding: 12px 14px; border: 1px solid var(--info, #2563eb); background: var(--info-bg, #eff6ff);
  border-radius: var(--radius, 10px); font-size: 13.5px; color: var(--text-primary, #0b1426); margin-top: 10px;
}
.ck-info-box a { color: var(--accent, #c8a258); font-weight: 700; text-decoration: underline; }

/* discount / points */
.ck-promo-row { display: flex; gap: 8px; }
.ck-promo-row .ck-input { flex: 1; }
.ck-chip {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 10px;
  padding: 7px 11px; border-radius: 999px; background: var(--success-bg, #f0fdf4);
  color: var(--success, #16a34a); border: 1px solid var(--success, #16a34a);
  font-size: 13px; font-weight: 700;
}
.ck-chip button { border: 0; background: transparent; color: inherit; cursor: pointer; font-size: 16px; line-height: 1; }
/* chip rabatu z punktow - ten sam zielony jezyk co kod rabatowy, lekko wyrozniony */
.ck-chip--points { margin-top: 10px; padding: 8px 12px; font-size: 13.5px; }
/* hidden na .ck-chip musi chowac (inline-flex inaczej nadpisuje UA [hidden]) */
.ck-chip[hidden] { display: none; }
.ck-points {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px;
  padding: 12px 14px; border: 1px dashed var(--accent, #c8a258); border-radius: var(--radius, 10px);
  background: var(--accent-light, #c8a25815);
}
.ck-points[hidden] { display: none; }
.ck-points__info { font-size: 13.5px; color: var(--text-primary, #0b1426); }
.ck-points__info b { color: var(--accent, #c8a258); }
.ck-points__hint { font-size: 12px; }

/* consents */
.ck-chk {
  display: flex; gap: 11px; align-items: flex-start; padding: 9px 0; cursor: pointer;
  font-size: 13.5px; color: var(--text-secondary, #3d5a80);
}
.ck-chk input { margin-top: 2px; width: 20px; height: 20px; accent-color: var(--accent, #c8a258); flex: none; }
.ck-chk a { color: var(--accent, #c8a258); text-decoration: underline; }
.ck-req { color: var(--danger, #ef4444); }

/* sticky pay bar (mobile) */
.ck-pay-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; padding: 12px 16px;
  background: var(--bg-card, #fff); border-top: 1px solid var(--border, #d4dce6);
  box-shadow: var(--shadow-lg, 0 8px 24px rgba(0,0,0,.12));
}
.ck-pay-bar .ck-pay { margin-top: 0; }
/* logotypy metod płatności (BLIK/karta...) — rząd poziomy z zawijaniem, wyśrodkowany.
   Bez tych reguł img-i układały się jeden pod drugim (#5). */
.ck-paymethods {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 8px; margin-top: 12px;
}
.ck-paymethod {
  height: 26px; width: auto; object-fit: contain;
  border: 1px solid var(--border, #d4dce6); border-radius: 6px;
  padding: 3px 6px; background: #fff;
}
.ck-paymethod--txt {
  height: auto; font-size: 12px; color: var(--text-muted, #8899aa);
  background: transparent;
}
.ck-trust {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  color: var(--text-muted, #8899aa); font-size: 12px; margin-top: 10px;
}
@media (min-width: 860px) { .ck-pay-bar { display: none; } }

/* podsumowanie: mobile vs desktop */
.ck-summary-desk { display: none; }
@media (min-width: 860px) {
  .ck-summary-desk { display: block; position: sticky; top: 80px; }
  .ck-summary-mobile { display: none; }
  /* inline CTA w formularzu chowamy na desktopie (jest w prawej kolumnie) */
  .ck-pay#ckPayInline { display: none; }
}
/* na mobile inline CTA też ukrywamy — używamy sticky bara */
#ckPayInline { display: none; }

/* toast */
.ck-toast {
  position: fixed; top: 74px; left: 50%; transform: translateX(-50%) translateY(-12px);
  opacity: 0; pointer-events: none; background: var(--text-primary, #0b1426); color: var(--bg-card, #fff);
  padding: 10px 16px; border-radius: var(--radius, 10px); font-size: 13px; font-weight: 600;
  box-shadow: var(--shadow-lg, 0 8px 24px rgba(0,0,0,.12)); z-index: 50;
  transition: var(--transition, 150ms ease);
}
.ck-toast.is-show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* =============== confirmation =============== */
.ck-conf { max-width: 560px; margin: 0 auto; text-align: center; padding-bottom: 32px; }
.ck-conf__badge {
  width: 72px; height: 72px; border-radius: 50%; margin: 8px auto 18px;
  display: grid; place-items: center; color: var(--success, #16a34a);
  background: var(--success-bg, #f0fdf4); border: 3px solid var(--success, #16a34a);
  animation: ckScaleIn .35s cubic-bezier(.34,1.56,.64,1);
}
@keyframes ckScaleIn { from { transform: scale(.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
/* Warianty tonu badge dla strony statusu platnosci (oczekiwanie / blad). */
.ck-conf__badge--info { color: var(--accent, #c8a258); background: rgba(200,162,88,.12); border-color: var(--accent, #c8a258); }
.ck-conf__badge--error, .ck-conf__badge--warning { color: #c0392b; background: #fdecea; border-color: #c0392b; }
.ck-conf__title {
  font-family: var(--font-head, 'Montserrat', sans-serif); font-weight: 900; font-size: 26px;
  margin: 0 0 10px; color: var(--text-primary, #0b1426);
}
.ck-conf__lead { color: var(--text-secondary, #3d5a80); font-size: 15px; margin: 0 0 22px; line-height: 1.5; }
.ck-conf__card { text-align: left; }
.ck-conf__meta { margin-top: 16px; display: flex; flex-direction: column; gap: 8px; }
.ck-conf__meta-row {
  display: flex; justify-content: space-between; align-items: center; padding: 11px 14px;
  border: 1px solid var(--border, #d4dce6); border-radius: var(--radius, 10px); background: var(--bg-card, #fff);
}
.ck-conf__points b { color: var(--accent, #c8a258); }
.ck-conf__attendees { margin-top: 16px; text-align: left; }