/**
 * return-form.css — formularz zgłoszenia zwrotu (template-parts/account/
 * return-form.php): nagłówek widoku, karta z pozycjami w workach, powody,
 * uwagi, zwrot pieniędzy, oświadczenie. Kolumna podsumowania ma własny
 * arkusz (return-summary.css).
 *
 * Wymaga tokens.css, base.css, components/field.css (ramka pola, checkbox,
 * radio, tekst błędu). Prefiks .dc-return-form__.
 *
 * MAKIETA MÓWI CO I GDZIE, PROJEKT MÓWI JAK (ZwrotFormularz.dc.html):
 *   karta            r28 + cień 0 26 64 -> panel jak blok kasy: glass-soft,
 *                    r28, --dc-shadow-xl + inset-top (C.4 stopień 3)
 *   wiersz pozycji   r18, zaznaczony tint złota -> r18, --dc-surface-sunken,
 *                    zaznaczony a10 + --dc-border-accent (C.8 tag)
 *   pole liczbowe    kwadraty r12 36/44 -> stepper z koszyka (pigułka r16
 *                    ze szkła, przyciski 32 / r12) — DRUGIE WYSTĄPIENIE
 *                    (cart.css), kopia (reguła 18); różnice: max, linia
 *                    przeliczenia, złota obwódka przy maksimum
 *   powód            etykiety r16 -> jak wiersz pozycji, r16
 *   pole tekstowe    r16, fld/fldbd -> .dc-field z C.7 (jeden fokus)
 *   zdanie o zwrocie r16 card2 -> --dc-surface-sunken + --dc-border-line
 *   „Wróć"           tekst z „←" -> ranga 2 jak .dc-checkout-page__back
 *                    (grot z rejestru odwrócony w CSS)
 *   nagłówek         PJS 800 34 -> --dc-display-3 jak h1 koszyka
 *   ruch             translateY na najeździe ODPADA (C.2: najazd kolorem)
 *
 * Pokazywanie steppera i oświadczenia robi CSS przez :has() — to samo
 * narzędzie, którym field.css znajduje błąd pola. Bez skryptu wszystko
 * widać, skrypt tylko liczy.
 */

/* ==========================================================================
   1. NAGŁÓWEK WIDOKU
   ========================================================================== */

.dc-return-form__header {
  margin-block-end: var(--dc-space-28);
}

.dc-return-form__back {
  display: inline-flex;
  align-items: center;
  gap: var(--dc-space-8);
  margin-block-end: var(--dc-space-20);
  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),
    transform var(--dc-duration-fast) var(--dc-ease-out);
}

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

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

.dc-return-form__back:focus-visible {
  border-radius: var(--dc-radius-16);
}

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

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

.dc-return-form__meta {
  margin-block-start: var(--dc-space-10);
  font-size: var(--dc-text-md);
  color: var(--dc-text-muted);
}

.dc-return-form__meta strong {
  color: var(--dc-text);
}

.dc-return-form__intro {
  max-width: var(--dc-measure-lg);
  margin-block-start: var(--dc-space-8);
  font-size: var(--dc-text-md);
  line-height: var(--dc-leading-normal);
  color: var(--dc-text-muted);
}

/* ==========================================================================
   2. UKŁAD DWÓCH KOLUMN
   Jak koszyk i kasa: flex z zawijaniem, karta bierze nadmiar (grow 999),
   podsumowanie trzyma --dc-measure-sm i schodzi pod kartę przy wąskim
   ekranie. Makietowe 372 px kolumny -> token miary 400.
   ========================================================================== */

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

.dc-return-form__card {
  flex: 999 1 var(--dc-measure-lg);
  min-width: 0;
  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);
}

/* ==========================================================================
   3. GRUPY, TYTUŁY, PODPOWIEDZI
   Makietowe linie 1 px między blokami = obwódka --dc-border-line, odstęp 28.
   ========================================================================== */

.dc-return-form__group {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.dc-return-form__group + .dc-return-form__group {
  margin-block-start: var(--dc-space-28);
  padding-block-start: var(--dc-space-28);
  border-block-start: var(--dc-border) solid var(--dc-border-line);
}

.dc-return-form__title {
  display: block;
  margin: 0 0 var(--dc-space-6);
  padding: 0;
  font-family: var(--dc-font-display);
  font-size: var(--dc-text-2xl);
  font-weight: var(--dc-weight-bold);
  line-height: var(--dc-leading-snug);
  color: var(--dc-text);
}

.dc-return-form__optional {
  font-family: var(--dc-font-body);
  font-size: var(--dc-text-md);
  font-weight: 400;
  color: var(--dc-text-subtle);
}

.dc-return-form__hint {
  display: block;
  margin-block-end: var(--dc-space-14);
  font-size: var(--dc-text-base);
  line-height: var(--dc-leading-normal);
  color: var(--dc-text-subtle);
}

.dc-return-form__field {
  display: block;
  cursor: text;
}

.dc-return-form__error {
  margin-block: 0 var(--dc-space-12);
}

.dc-return-form__error[hidden] {
  display: none;
}

/* ==========================================================================
   4. POZYCJE
   Wiersz: kolumna tekstu + kolumna ilości; błąd pod spodem na całą szerokość.
   ========================================================================== */

.dc-return-form__items {
  display: flex;
  flex-direction: column;
  gap: var(--dc-space-10);
}

.dc-return-form__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--dc-space-10) var(--dc-space-14);
  align-items: start;
  padding: var(--dc-space-18) var(--dc-space-20);
  border: var(--dc-border) solid var(--dc-border-line);
  border-radius: var(--dc-radius-18);
  background-color: var(--dc-surface-sunken);
  transition:
    background-color var(--dc-duration-base) var(--dc-ease),
    border-color var(--dc-duration-base) var(--dc-ease);
}

.dc-return-form__item:has(.dc-return-form__check:checked) {
  border-color: var(--dc-border-accent);
  background-color: var(--dc-accent-a10);
}

.dc-return-form__item--error,
.dc-return-form__item--error:has(.dc-return-form__check:checked) {
  border-color: color-mix(in srgb, var(--dc-danger) 30%, transparent);
  background-color: color-mix(in srgb, var(--dc-danger) 10%, var(--dc-surface));
}

/* Pozycja, której nie da się zgłosić (wszystko zwrócone, produkt bez pakietu). */
.dc-return-form__item--off {
  color: var(--dc-text-subtle);
}

.dc-return-form__item-main {
  display: flex;
  align-items: flex-start;
  gap: var(--dc-space-12);
  min-width: 0;
  cursor: pointer;
}

.dc-return-form__item--off .dc-return-form__item-main {
  cursor: default;
}

.dc-return-form__check {
  margin-block-start: var(--dc-space-2);
}

.dc-return-form__item-text {
  min-width: 0;
}

.dc-return-form__item-title {
  display: block;
  font-family: var(--dc-font-display);
  font-size: var(--dc-text-lg);
  font-weight: var(--dc-weight-bold);
  line-height: var(--dc-leading-snug);
}

.dc-return-form__item-sub {
  display: block;
  margin-block-start: var(--dc-space-2);
  font-size: var(--dc-text-base);
  font-variant-numeric: tabular-nums;
  color: var(--dc-text-subtle);
}

.dc-return-form__item-qty {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--dc-space-8);
  text-align: right;
}

.dc-return-form__unit-price {
  padding-block: var(--dc-space-6);
  font-size: var(--dc-text-base);
  font-variant-numeric: tabular-nums;
  color: var(--dc-text-subtle);
}

/* Warstwy zależne od zaznaczenia (reguła 11: display). */
.dc-return-form__item:not(:has(.dc-return-form__check:checked)) .dc-return-form__stepper,
.dc-return-form__item:not(:has(.dc-return-form__check:checked)) .dc-return-form__calc,
.dc-return-form__item:has(.dc-return-form__check:checked) [data-dc-idle] {
  display: none;
}

.dc-return-form__stepper {
  display: flex;
  align-items: center;
  gap: var(--dc-space-8);
}

/* Stepper — kopia .dc-cart__qty (cart.css, sekcja 2); drugie wystąpienie. */
.dc-return-form__qty {
  display: inline-flex;
  align-items: center;
  padding: var(--dc-space-4);
  border: var(--dc-border) solid var(--dc-border-subtle);
  border-radius: var(--dc-radius-16);
  background-color: var(--dc-surface-glass);
  box-shadow: var(--dc-shadow-xs);
  transition: border-color var(--dc-duration-base) var(--dc-ease);
}

/* Przy maksimum pigułka dostaje złotą obwódkę (makieta: pole 1,5 px złote). */
.dc-return-form__qty--max {
  border-color: var(--dc-accent-a50);
}

.dc-return-form__step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--dc-space-32);
  height: var(--dc-space-32);
  border-radius: var(--dc-radius-12);
  color: var(--dc-text-muted);
  transition:
    background-color var(--dc-duration-base) var(--dc-ease),
    color var(--dc-duration-base) var(--dc-ease),
    transform var(--dc-duration-fast) var(--dc-ease-out);
}

.dc-return-form__step--plus {
  background-color: var(--dc-accent-a15);
  color: var(--dc-accent-strong);
}

.dc-return-form__step:hover {
  background-color: var(--dc-accent-a30);
  color: var(--dc-accent-strong);
}

.dc-return-form__step:active {
  transform: scale(0.97);
}

.dc-return-form__step:focus-visible {
  border-radius: var(--dc-radius-12);
}

/* Przycisk przy granicy: przygaszony jak w arkuszu stanów, bez najazdu. */
.dc-return-form__step[aria-disabled='true'],
.dc-return-form__step[aria-disabled='true']:hover {
  background-color: transparent;
  color: var(--dc-text-subtle);
  cursor: not-allowed;
}

.dc-return-form__qty-input {
  width: var(--dc-space-48);
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--dc-font-display);
  font-size: var(--dc-text-lg);
  font-weight: var(--dc-weight-black);
  font-variant-numeric: tabular-nums;
  text-align: center;
  color: var(--dc-text);
  -moz-appearance: textfield;
  appearance: textfield;
}

.dc-return-form__qty-input::-webkit-outer-spin-button,
.dc-return-form__qty-input::-webkit-inner-spin-button {
  margin: 0;
  -webkit-appearance: none;
  appearance: none;
}

.dc-return-form__qty-input:focus-visible {
  outline: none;
  border-radius: var(--dc-radius-8);
  box-shadow: 0 0 0 var(--dc-border) var(--dc-accent);
}

.dc-return-form__of {
  font-size: var(--dc-text-base);
  white-space: nowrap;
  color: var(--dc-text-subtle);
}

.dc-return-form__calc {
  min-height: var(--dc-space-18);
  font-size: var(--dc-text-base);
  font-weight: var(--dc-weight-medium);
  font-variant-numeric: tabular-nums;
  color: var(--dc-accent-strong);
}

.dc-return-form__calc:empty {
  display: none;
}

.dc-return-form__item-error {
  grid-column: 1 / -1;
  margin-block-start: 0;
}

.dc-return-form__item-error[hidden] {
  display: none;
}

/* ==========================================================================
   5. POWÓD
   ========================================================================== */

.dc-return-form__reasons {
  display: flex;
  flex-direction: column;
  gap: var(--dc-space-8);
}

.dc-return-form__reason {
  display: flex;
  align-items: center;
  gap: var(--dc-space-12);
  padding: var(--dc-space-12) var(--dc-space-16);
  border: var(--dc-border) solid var(--dc-border-line);
  border-radius: var(--dc-radius-16);
  background-color: var(--dc-surface-sunken);
  font-size: var(--dc-text-md);
  font-weight: var(--dc-weight-medium);
  color: var(--dc-text-secondary);
  cursor: pointer;
  transition:
    background-color var(--dc-duration-base) var(--dc-ease),
    border-color var(--dc-duration-base) var(--dc-ease);
}

.dc-return-form__reason:has(:checked) {
  border-color: var(--dc-border-accent);
  background-color: var(--dc-accent-a10);
}

/* ==========================================================================
   6. UWAGI, KONTO, ZDANIE O ZWROCIE
   Ramka pola z komponentu; textarea potrzebuje własnej wysokości linii
   i rozciągnięcia ramki (komponent centruje jednowierszowe pole).
   ========================================================================== */

.dc-return-form__textarea {
  align-items: stretch;
  padding-inline: var(--dc-space-16);
}

.dc-return-form__textarea-input {
  min-height: calc(var(--dc-space-48) * 2);
  line-height: var(--dc-leading-normal);
  resize: vertical;
}

.dc-return-form__iban-input {
  font-weight: var(--dc-weight-medium);
  font-variant-numeric: tabular-nums;
}

.dc-return-form__plain {
  padding: var(--dc-space-14) var(--dc-space-16);
  border: var(--dc-border) solid var(--dc-border-line);
  border-radius: var(--dc-radius-16);
  background-color: var(--dc-surface-sunken);
  font-size: var(--dc-text-md);
  line-height: var(--dc-leading-normal);
  color: var(--dc-text-secondary);
}

/* ==========================================================================
   7. OŚWIADCZENIE — tylko przy odstąpieniu
   Widoczność z zaznaczonego powodu (wartość ustala mu-wtyczka; slug
   w selektorze to ten sam kontrakt, co data-dc-withdrawal na formularzu).
   ========================================================================== */

.dc-return-form__form:not(:has(.dc-return-form__reason-input[value='odstapienie']:checked)) .dc-return-form__consent {
  display: none;
}

.dc-return-form__consent-label {
  display: flex;
  align-items: flex-start;
  gap: var(--dc-space-12);
  padding: var(--dc-space-16);
  border: var(--dc-border) solid var(--dc-border-line);
  border-radius: var(--dc-radius-18);
  background-color: var(--dc-surface-sunken);
  font-size: var(--dc-text-md);
  line-height: var(--dc-leading-normal);
  color: var(--dc-text-secondary);
  cursor: pointer;
  transition:
    background-color var(--dc-duration-base) var(--dc-ease),
    border-color var(--dc-duration-base) var(--dc-ease);
}

.dc-return-form__consent-label:has(:checked) {
  border-color: var(--dc-border-accent);
  background-color: var(--dc-accent-a10);
}

.dc-return-form__consent-label--error {
  border-color: color-mix(in srgb, var(--dc-danger) 30%, transparent);
  background-color: color-mix(in srgb, var(--dc-danger) 10%, var(--dc-surface));
}

.dc-return-form__consent-label .input-checkbox {
  margin-block-start: var(--dc-space-2);
}

.dc-return-form__consent .dc-return-form__error {
  margin-block: var(--dc-space-10) 0;
}

/* ==========================================================================
   8. WĄSKI EKRAN
   Makieta 390: wiersz rozwija się w dół — nazwa i pakiet, pod nią stepper
   na całą szerokość, pod nim przeliczenie. Ten sam próg co koszyk (40em).
   ========================================================================== */

@media (max-width: 40em) {
  .dc-return-form__card {
    padding: var(--dc-space-20);
  }

  .dc-return-form__item {
    grid-template-columns: minmax(0, 1fr);
    padding: var(--dc-space-16);
  }

  .dc-return-form__item-qty {
    align-items: stretch;
    text-align: left;
  }

  .dc-return-form__stepper {
    width: 100%;
  }

  .dc-return-form__qty {
    flex: 1;
    justify-content: space-between;
  }

  .dc-return-form__qty-input {
    flex: 1;
    width: auto;
    min-width: 0;
  }

  .dc-return-form__unit-price {
    padding-block: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dc-return-form__back,
  .dc-return-form__item,
  .dc-return-form__qty,
  .dc-return-form__step,
  .dc-return-form__reason,
  .dc-return-form__consent-label {
    transition: none;
  }
}