/**
 * checkout-excise.css — blok 2 kasy: przeznaczenie akcyzowe. Cztery stany
 * makiety (Kasa.dc.html 4a–4d) sterowane atrybutami data-* na fragmencie
 * .dc-checkout-excise__state: data-dc-requires (pesel | nip | nip_ppw | none),
 * data-dc-exempt (1|0), data-dc-eu (1|0).
 *
 * Wymaga tokens.css, base.css, components/field.css (pola WooCommerce,
 * kontrolki) i checkout.css (panel bloku, nagłówek kroku). Prefiks
 * .dc-checkout-excise__.
 *
 * WIDOCZNOŚĆ PRZEZ display, NIE opacity (reguła 11): schowane ramki
 * i pola wypadają z drzewa dostępności i z walidacji inline checkout.js
 * (.validate-required:visible).
 *
 * MAKIETA MÓWI CO I GDZIE, PROJEKT MÓWI JAK:
 *   ramka zwolnienia   zieleń .08/.28 -> color-mix(--dc-success 10/30 %)
 *                      jak w components/notice.css; r16; studzienka 30 -> 32
 *   ramka akcyzy       złoto .12 + obwódka 1,5 a50 + pierścień 3 a10 ->
 *                      --dc-accent-a10, --dc-border-thick + a50, pierścień
 *                      --dc-space-4 a10 — TA SAMA ramka co wiersz akcyzy
 *                      w podsumowaniu (checkout-summary.css): jeden kształt
 *                      w dwóch miejscach łączy wybór z ceną
 *   plakietka          tag z C.8 na szkle z kropką złota; grot przez gap
 *   NIP „z kroku 1"    pole nieaktywne: --dc-surface-sunken, obwódka
 *                      kreskowana --dc-border-line, tekst --dc-text-muted
 *   zgody              ramka 20, r18, szkło .62 -> --dc-surface-glass-soft
 */

/* ==========================================================================
   1. WSTĘP I SIATKA
   ========================================================================== */

.dc-checkout-excise__intro {
  max-width: var(--dc-measure-lg);
  margin-block: calc(var(--dc-space-14) * -1) var(--dc-space-22);
  font-size: var(--dc-text-md);
  line-height: var(--dc-leading-normal);
  color: var(--dc-text-muted);
}

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

/* Fragment stanu rozciąga się na całą siatkę poza pierwszą komórką: pole
   zależne staje obok listy, ramki i zgody pod spodem na całą szerokość. */
.dc-checkout-excise__state {
  display: contents;
}

.dc-checkout-excise__hint {
  margin-block-start: var(--dc-space-8);
  font-size: var(--dc-text-sm);
  line-height: var(--dc-leading-snug);
  color: var(--dc-text-subtle);
}

/* ==========================================================================
   2. POLA ZALEŻNE
   Wszystkie w drzewie, widoczne jedno — wg data-dc-requires.
   ========================================================================== */

.dc-checkout-excise__dependent {
  display: none;
}

.dc-checkout-excise__state[data-dc-requires='pesel'] .dc-checkout-excise__dependent--pesel,
.dc-checkout-excise__state[data-dc-requires='nip'] .dc-checkout-excise__dependent--nip,
.dc-checkout-excise__state[data-dc-requires='nip_ppw'] .dc-checkout-excise__dependent--nip,
.dc-checkout-excise__state[data-dc-requires='nip_ppw'] .dc-checkout-excise__dependent--ppw,
.dc-checkout-excise__state[data-dc-requires='none'] .dc-checkout-excise__dependent--none {
  display: block;
}

/* Numer PPW pod NIP-em — trzecia komórka siatki. */
.dc-checkout-excise__dependent--ppw {
  grid-column: 1 / -1;
}

/* „(opcjonalne)" z WooCommerce przy polach z required = false: tu o tym,
   które pole jest wymagane, decyduje rodzaj nabywcy (walidacja serwerowa),
   więc dopisek kłamałby przy PESEL-u i zgodach. */
.dc-checkout-excise .optional {
  display: none;
}

/* PESEL pisany z traktem — ciąg cyfr, nie zdanie. */
.dc-checkout-excise__dependent--pesel .input-text {
  letter-spacing: var(--dc-tracking-wide);
  font-variant-numeric: tabular-nums;
}

.dc-checkout-excise__nip-label {
  display: flex;
  align-items: center;
  gap: var(--dc-space-8);
  margin-block-end: var(--dc-space-8);
  font-size: var(--dc-text-sm);
  font-weight: var(--dc-weight-medium);
  color: var(--dc-text-muted);
}

.dc-checkout-excise__badge {
  padding: var(--dc-space-2) var(--dc-space-8);
  border: var(--dc-border) solid var(--dc-border-accent);
  border-radius: var(--dc-radius-pill);
  background-color: var(--dc-accent-a10);
  font-size: var(--dc-text-2xs);
  font-weight: var(--dc-weight-bold);
  letter-spacing: var(--dc-tracking-wide);
  text-transform: uppercase;
  color: var(--dc-accent-strong);
}

.dc-checkout-excise__nip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--dc-space-10);
  padding: var(--dc-space-14) var(--dc-space-16);
  border: var(--dc-border) dashed var(--dc-border-line);
  border-radius: var(--dc-radius-16);
  background-color: var(--dc-surface-sunken);
  font-size: var(--dc-text-lg);
  font-weight: var(--dc-weight-medium);
  letter-spacing: var(--dc-tracking-wide);
  font-variant-numeric: tabular-nums;
  line-height: var(--dc-leading-none);
  color: var(--dc-text-muted);
}

.dc-checkout-excise__nip-value--empty {
  font-weight: 400;
  letter-spacing: var(--dc-tracking-normal);
  color: var(--dc-text-subtle);
}

.dc-checkout-excise__nip-change {
  flex: none;
  font-size: var(--dc-text-sm);
  font-weight: var(--dc-weight-medium);
  letter-spacing: var(--dc-tracking-normal);
  color: var(--dc-accent-strong);
  text-decoration: none;
  transition: color var(--dc-duration-base) var(--dc-ease);
}

.dc-checkout-excise__nip-change:hover {
  color: var(--dc-text);
}

.dc-checkout-excise__note {
  margin-block-start: var(--dc-space-8);
  font-size: var(--dc-text-sm);
  line-height: var(--dc-leading-snug);
  color: var(--dc-text-subtle);
}

.dc-checkout-excise__note--todo {
  color: var(--dc-accent-strong);
}

/* „Bez dodatkowych pól" — ramka kreskowana na wysokości pola obok. */
.dc-checkout-excise__plain {
  display: flex;
  align-items: center;
  gap: var(--dc-space-12);
  padding: var(--dc-space-16) var(--dc-space-18);
  border: var(--dc-border) dashed var(--dc-border-line);
  border-radius: var(--dc-radius-16);
  background-color: var(--dc-surface-glass-soft);
  font-size: var(--dc-text-base);
  line-height: var(--dc-leading-normal);
  color: var(--dc-text-muted);
}

.dc-checkout-excise__plain strong {
  color: var(--dc-text);
}

.dc-checkout-excise__plain-icon {
  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-border-subtle);
  border-radius: var(--dc-radius-12);
  background-color: var(--dc-surface-glass);
  color: var(--dc-text-subtle);
}

/* ==========================================================================
   3. RAMKA CENY — trzy warianty, widoczny jeden
   ========================================================================== */

.dc-checkout-excise__price {
  display: none;
  grid-column: 1 / -1;
  align-items: flex-start;
  gap: var(--dc-space-12);
  max-width: var(--dc-measure-2xl);
  padding: var(--dc-space-16) var(--dc-space-18);
  border: var(--dc-border) solid var(--dc-border-accent);
  border-radius: var(--dc-radius-16);
  background-color: var(--dc-accent-a10);
}

.dc-checkout-excise__state[data-dc-exempt='1'] .dc-checkout-excise__price--exempt,
.dc-checkout-excise__state[data-dc-exempt='0'][data-dc-eu='0'] .dc-checkout-excise__price--fee,
.dc-checkout-excise__state[data-dc-eu='1'] .dc-checkout-excise__price--eu {
  display: flex;
}

.dc-checkout-excise__state[data-dc-eu='1'] .dc-checkout-excise__price--exempt,
.dc-checkout-excise__state[data-dc-eu='1'] .dc-checkout-excise__price--fee {
  display: none;
}

.dc-checkout-excise__price-icon {
  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-border-accent);
  border-radius: var(--dc-radius-12);
  background-color: var(--dc-accent-a15);
  color: var(--dc-accent-strong);
}

.dc-checkout-excise__price-title {
  display: block;
  font-family: var(--dc-font-display);
  font-size: var(--dc-text-md);
  font-weight: var(--dc-weight-bold);
  line-height: var(--dc-leading-tight);
  color: var(--dc-accent-strong);
}

.dc-checkout-excise__price-note {
  display: block;
  margin-block-start: var(--dc-space-4);
  font-size: var(--dc-text-sm);
  line-height: var(--dc-leading-normal);
  font-variant-numeric: tabular-nums;
  color: var(--dc-text-muted);
}

/* Zwolnienie — zieleń. */
.dc-checkout-excise__price--exempt {
  border-color: color-mix(in srgb, var(--dc-success) 30%, transparent);
  background-color: color-mix(in srgb, var(--dc-success) 10%, transparent);
}

.dc-checkout-excise__price--exempt .dc-checkout-excise__price-icon {
  border-color: color-mix(in srgb, var(--dc-success) 30%, transparent);
  background-color: color-mix(in srgb, var(--dc-success) 15%, transparent);
  color: var(--dc-success);
}

.dc-checkout-excise__price--exempt .dc-checkout-excise__price-title {
  color: var(--dc-success);
}

/* Akcyza — złota ramka jak wiersz w podsumowaniu. */
.dc-checkout-excise__price--fee {
  border: var(--dc-border-thick) solid var(--dc-accent-a50);
  box-shadow: 0 0 0 var(--dc-space-4) var(--dc-accent-a10);
}

.dc-checkout-excise__price-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--dc-space-6);
  margin-block-start: var(--dc-space-10);
  padding: var(--dc-space-4) var(--dc-space-10);
  border: var(--dc-border) solid var(--dc-border-accent);
  border-radius: var(--dc-radius-pill);
  background-color: var(--dc-surface-glass);
  font-size: var(--dc-text-xs);
  font-weight: var(--dc-weight-bold);
  letter-spacing: var(--dc-tracking-wide);
  text-transform: uppercase;
  color: var(--dc-accent-strong);
}

.dc-checkout-excise__price-badge::before {
  content: '';
  width: var(--dc-space-8);
  height: var(--dc-space-8);
  border-radius: var(--dc-radius-full);
  background-color: var(--dc-accent);
}

.dc-checkout-excise__price-badge .dc-icon {
  flex: none;
}

/* UE — ramka informacyjna na szkle. */
.dc-checkout-excise__price--eu {
  border-color: var(--dc-border-subtle);
  background-color: var(--dc-surface-glass);
}

/* ==========================================================================
   4. ZGODY
   ========================================================================== */

.dc-checkout-excise__consents {
  display: none;
  grid-column: 1 / -1;
  max-width: var(--dc-measure-2xl);
  padding: var(--dc-space-20);
  border: var(--dc-border) solid var(--dc-border-subtle);
  border-radius: var(--dc-radius-18);
  background-color: var(--dc-surface-glass-soft);
}

.dc-checkout-excise__state[data-dc-exempt='1'] .dc-checkout-excise__consents {
  display: block;
}

.dc-checkout-excise__consent + .dc-checkout-excise__consent {
  margin-block-start: var(--dc-space-16);
}

.dc-checkout-excise__consent label.checkbox {
  font-size: var(--dc-text-md);
  line-height: var(--dc-leading-normal);
}

.dc-checkout-excise__consent .required {
  color: var(--dc-danger);
  text-decoration: none;
}

.dc-checkout-excise__retention {
  margin-block-start: var(--dc-space-16);
  padding-block-start: var(--dc-space-14);
  border-block-start: var(--dc-border) solid var(--dc-border-line);
  font-size: var(--dc-text-xs);
  line-height: var(--dc-leading-normal);
  color: var(--dc-text-subtle);
}