/**
 * checkout.css — powłoka strony kasy (page-zamowienie.php): okruszki,
 * nagłówek, odnośnik powrotu; siatka dwóch kolumn formularza
 * (woocommerce/checkout/form-checkout.php) i panel bloku z numerowanym
 * nagłówkiem, wspólny dla kroków 1–3.
 *
 * Wymaga tokens.css i base.css. Prefiksy: .dc-checkout-page__ (powłoka),
 * .dc-checkout (formularz), .dc-checkout-block__ (panel kroku). Klasy
 * WooCommerce (.checkout, #customer_details, .woocommerce-NoticeGroup)
 * nie niosą stylu poza jedną regułą układu dla komunikatów.
 *
 * Okruszki i nagłówek to ten sam przepis co w cart.css (drugie wystąpienie
 * — kopia pod własnym prefiksem, reguła 18). Odnośnik „Wróć do koszyka":
 * ranga 2 z ikoną strzałki odwróconą transformacją statyczną — rejestr ma
 * jedną strzałkę (komentarz przy 'chevron-down' w inc/icons.php).
 *
 * Panel bloku: rgba(255,255,255,.5) + blur(20) -> --dc-surface-glass-soft
 * + --dc-blur-lg, r28, cień 0 12 44 .08 -> --dc-shadow-xl (stopień 3:
 * panel sekcji) + inset-top; padding 30 -> --dc-space-32. Numer kroku:
 * studzienka 32 / r11 -> --dc-space-32 / --dc-radius-12 z tintem rangi 1
 * (kroki 1–2) albo szkłem (krok 3, jak w makiecie: krok „techniczny").
 */

/* ==========================================================================
   1. OKRUSZKI I NAGŁÓWEK STRONY
   ========================================================================== */

.dc-checkout-page__crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--dc-space-8);
  margin-block-end: var(--dc-space-18);
  font-size: var(--dc-text-base);
  color: var(--dc-text-subtle);
}

.dc-checkout-page__crumb {
  color: var(--dc-text-subtle);
  text-decoration: none;
  transition: color var(--dc-duration-base) var(--dc-ease);
}

a.dc-checkout-page__crumb:hover {
  color: var(--dc-text);
}

.dc-checkout-page__crumb--current {
  font-weight: var(--dc-weight-medium);
  color: var(--dc-text);
}

.dc-checkout-page__crumb-sep {
  color: var(--dc-accent);
}

.dc-checkout-page__header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--dc-space-24);
  margin-block-end: var(--dc-space-28);
}

.dc-checkout-page__eyebrow {
  margin-block-end: var(--dc-space-14);
  font-size: var(--dc-text-sm);
  font-weight: var(--dc-weight-medium);
  letter-spacing: var(--dc-tracking-widest);
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  color: var(--dc-accent-strong);
}

.dc-checkout-page__heading {
  font-size: var(--dc-display-3);
  line-height: var(--dc-leading-tight);
  letter-spacing: var(--dc-tracking-tight);
}

.dc-checkout-page__back {
  display: inline-flex;
  align-items: center;
  gap: var(--dc-space-8);
  padding: var(--dc-space-12) var(--dc-space-20);
  border: var(--dc-border) solid var(--dc-border-line);
  border-radius: var(--dc-radius-16);
  background-color: var(--dc-surface-glass);
  color: var(--dc-text);
  font-size: var(--dc-text-md);
  font-weight: var(--dc-weight-medium);
  line-height: var(--dc-leading-none);
  text-decoration: none;
  transition:
    background-color var(--dc-duration-base) var(--dc-ease),
    border-color var(--dc-duration-base) var(--dc-ease),
    color var(--dc-duration-base) var(--dc-ease),
    box-shadow var(--dc-duration-base) var(--dc-ease),
    transform var(--dc-duration-fast) var(--dc-ease-out);
}

.dc-checkout-page__back:hover {
  border-color: var(--dc-accent-a50);
  background-color: var(--dc-surface);
  color: var(--dc-text);
}

.dc-checkout-page__back:active {
  transform: scale(0.97);
  box-shadow: var(--dc-shadow-inset-press);
}

.dc-checkout-page__back:focus-visible {
  border-radius: var(--dc-radius-16);
}

.dc-checkout-page__back .dc-icon {
  flex: none;
  transform: scaleX(-1);
  color: var(--dc-text-subtle);
}

/* ==========================================================================
   2. FORMULARZ — DWIE KOLUMNY
   Ten sam mechanizm co w koszyku (cart.css, sekcja 3): flex z zawijaniem,
   lewa kolumna bierze nadmiar (grow 999), prawa trzyma --dc-measure-sm
   i schodzi pod lewą przy 768 px.
   ========================================================================== */

.dc-checkout {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--dc-space-28);
}

/* Komunikaty błędów, które checkout.js wstawia na początek formularza
   (.woocommerce-NoticeGroup), oraz komunikaty z hooka przed formularzem —
   na całą szerokość, nie jako trzecia kolumna flexa. */
.dc-checkout > .woocommerce-NoticeGroup,
.dc-checkout > .woocommerce-error,
.dc-checkout > .woocommerce-message,
.dc-checkout > .woocommerce-info {
  flex-basis: 100%;
}

.dc-checkout__main {
  display: flex;
  flex: 999 1 var(--dc-measure-lg);
  flex-direction: column;
  gap: var(--dc-space-20);
  min-width: 0;
}

.dc-checkout__aside {
  position: sticky;
  top: var(--dc-space-24);
  display: flex;
  flex: 1 1 var(--dc-measure-sm);
  flex-direction: column;
  gap: var(--dc-space-16);
  align-self: flex-start;
  min-width: 0;
}

/* ==========================================================================
   3. PANEL BLOKU I NAGŁÓWEK KROKU
   ========================================================================== */

.dc-checkout-block {
  padding: var(--dc-space-32);
  border: var(--dc-border) solid var(--dc-border-subtle);
  border-radius: var(--dc-radius-28);
  background-color: var(--dc-surface-glass-soft);
  -webkit-backdrop-filter: var(--dc-blur-lg);
  backdrop-filter: var(--dc-blur-lg);
  box-shadow: var(--dc-shadow-xl), var(--dc-shadow-inset-top);
}

.dc-checkout-block__header {
  display: flex;
  align-items: center;
  gap: var(--dc-space-14);
  margin-block-end: var(--dc-space-22);
}

.dc-checkout-block__num {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--dc-space-32);
  height: var(--dc-space-32);
  border: var(--dc-border) solid var(--dc-accent-a50);
  border-radius: var(--dc-radius-12);
  background-image: var(--dc-gradient-cta);
  color: var(--dc-on-accent);
  font-family: var(--dc-font-display);
  font-size: var(--dc-text-md);
  font-weight: var(--dc-weight-black);
  line-height: var(--dc-leading-none);
}

.dc-checkout-block__num--plain {
  border-color: var(--dc-border-subtle);
  background-image: none;
  background-color: var(--dc-surface-glass);
  color: var(--dc-text-muted);
}

/* Nadtytuł kroku: eyebrow karty z C.8 (12 / 600 / --dc-tracking-wider),
   w złocie jak w makiecie; odstęp do tytułu 4. */
.dc-checkout-block__eyebrow {
  margin-block-end: var(--dc-space-4);
  font-size: var(--dc-text-sm);
  font-weight: var(--dc-weight-medium);
  letter-spacing: var(--dc-tracking-wider);
  text-transform: uppercase;
  color: var(--dc-accent-strong);
}

/* Tytuł 21 px / 800 z makiety -> --dc-text-5xl / black; h2 z base.css
   dałby --dc-display-3 — za dużo dla tytułu kroku w panelu. */
.dc-checkout-block__title {
  font-size: var(--dc-text-5xl);
  font-weight: var(--dc-weight-black);
  line-height: var(--dc-leading-tight);
  letter-spacing: var(--dc-tracking-tight);
}