/**
 * checkout-customer.css — blok 1 kasy: siatka pól, przełączniki
 * („Kupuję jako firma lub instytucja", „Załóż konto", „Dostawa pod inny
 * adres") i zwinięte uwagi do zamówienia.
 *
 * Wymaga tokens.css, base.css i components/field.css (pola WooCommerce
 * i kontrolki). Prefiks .dc-checkout-customer__; klasy WooCommerce
 * (.form-row, .shipping_address, .create-account) tu bez stylu — pierwsza
 * ma go w komponencie, dwie kolejne przełącza checkout.js.
 *
 * SIATKA PÓL: auto-fit po --dc-grid-min-sm (220), bez breakpointu —
 * dwie kolumny od ok. 456 px szerokości wnętrza, jedna niżej; pola „ulica"
 * i „dopisek" zajmują cały wiersz (klasa z inc/cart.php). Makieta ma
 * repeat(2, 1fr) — przy 390 px dawałaby dwie kolumny po 100 px.
 *
 * RAMKA FIRMY ODSŁANIA SIĘ PRZEZ :has() — bez skryptu: pola firmowe są
 * w drzewie zawsze (walidacja serwerowa zna je z pól kasy), display: none
 * zdejmuje je z drzewa dostępności, dopóki przełącznik nie jest zaznaczony.
 * checkout.js waliduje .validate-required:visible, więc ukryte wymagane
 * pole (NIP) nie blokuje zamówienia osoby prywatnej.
 */

/* ==========================================================================
   1. LOGOWANIE I SIATKA
   ========================================================================== */

.dc-checkout-customer__login {
  margin-block-end: var(--dc-space-16);
  font-size: var(--dc-text-base);
  color: var(--dc-text-subtle);
}

.dc-checkout-customer__login-link {
  font-weight: var(--dc-weight-medium);
  color: var(--dc-accent-strong);
  text-decoration: none;
  transition: color var(--dc-duration-base) var(--dc-ease);
}

.dc-checkout-customer__login-link:hover {
  color: var(--dc-text);
}

.dc-checkout-customer__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(var(--dc-grid-min-sm), 100%), 1fr));
  gap: var(--dc-space-16);
}

.dc-checkout-customer__grid > .dc-checkout-customer__field--wide {
  grid-column: 1 / -1;
}

/* Pole ukryte przez WooCommerce (województwo przy PL) nie ma zajmować
   komórki siatki. */
.dc-checkout-customer__grid > .form-row[style*='display: none'] {
  display: none;
}

/* ==========================================================================
   2. PRZEŁĄCZNIKI
   Makieta: ramka 16/18, r16, szkło .55 -> --dc-surface-glass-soft,
   obwódka biel .9 -> --dc-border-subtle; odstęp między ramkami 12,
   od siatki 20.
   ========================================================================== */

.dc-checkout-customer__toggle {
  margin-block-start: var(--dc-space-12);
  padding: var(--dc-space-16) var(--dc-space-18);
  border: var(--dc-border) solid var(--dc-border-subtle);
  border-radius: var(--dc-radius-16);
  background-color: var(--dc-surface-glass-soft);
}

.dc-checkout-customer__toggle--company {
  margin-block-start: var(--dc-space-20);
}

.dc-checkout-customer__toggle-row {
  margin: 0;
}

.dc-checkout-customer__toggle-heading {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
}

.dc-checkout-customer__toggle-label {
  display: flex;
  align-items: center;
  gap: var(--dc-space-12);
  margin: 0;
  font-family: var(--dc-font-body);
  font-size: var(--dc-text-md);
  font-weight: 400;
  color: var(--dc-text);
  cursor: pointer;
}

.dc-checkout-customer__toggle-text {
  line-height: var(--dc-leading-normal);
}

.dc-checkout-customer__toggle-note {
  color: var(--dc-text-subtle);
}

/* Pola firmowe: schowane, dopóki przełącznik nie jest zaznaczony. */
.dc-checkout-customer__company {
  display: none;
  margin-block-start: var(--dc-space-18);
}

.dc-checkout-customer__toggle--company:has(#dc_buy_as_company:checked) .dc-checkout-customer__company {
  display: grid;
}

/* Pola konta i innego adresu — odstęp od przełącznika; widoczność
   przełącza checkout.js (hide / slideDown). */
.dc-checkout-customer__toggle .create-account,
.dc-checkout-customer__toggle .shipping_address {
  margin-block-start: var(--dc-space-18);
}

/* ==========================================================================
   3. UWAGI DO ZAMÓWIENIA — <details>
   ========================================================================== */

.dc-checkout-customer__details {
  margin-block-start: var(--dc-space-12);
  border: var(--dc-border) solid var(--dc-border-subtle);
  border-radius: var(--dc-radius-16);
  background-color: var(--dc-surface-glass-soft);
}

.dc-checkout-customer__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--dc-space-12);
  padding: var(--dc-space-16) var(--dc-space-18);
  font-size: var(--dc-text-md);
  list-style: none;
  cursor: pointer;
}

.dc-checkout-customer__summary::-webkit-details-marker {
  display: none;
}

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

.dc-checkout-customer__chevron {
  flex: none;
  display: flex;
  color: var(--dc-text-subtle);
  transition: transform var(--dc-duration-base) var(--dc-ease);
}

.dc-checkout-customer__details[open] .dc-checkout-customer__chevron {
  transform: rotate(180deg);
}

.dc-checkout-customer__details-body {
  padding: 0 var(--dc-space-18) var(--dc-space-18);
}