/**
 * return-recovery.css — odzyskanie odnośnika do formularza zwrotu
 * (template-parts/account/return-recovery.php): wąska kolumna, karta
 * z dwoma polami i przyciskiem, widok „Sprawdź skrzynkę".
 *
 * Wymaga tokens.css, base.css, components/field.css (ramka pola, błąd).
 * Prefiks .dc-return-recovery__.
 *
 * MAKIETA MÓWI CO I GDZIE, PROJEKT MÓWI JAK (OdzyskanieDostepu.dc.html):
 *   kolumna 468 px           -> --dc-measure-md (480)
 *   karta r24                -> panel r28 (drabinka C.9), glass-soft, cień 3
 *   pola z poświatą fokusu   -> .dc-field, JEDEN fokus z C.7 (bez poświaty)
 *   przycisk z translateY    -> ranga 1, najazd kolorem (C.2)
 *   stan „zajęty"            -> C.1: jak nieaktywny + cursor: progress,
 *                               krążek 16 px obwódką --dc-border-heavy
 *   studzienka koperty       -> ikona w studzience 40 / r12 NEUTRALNEJ:
 *                               sunken + line, kreska --dc-text-muted —
 *                               celowo bez zieleni (ton neutralny)
 *   nadtytuł po wysłaniu     -> --dc-text-subtle zamiast złota (jw.)
 *   numery kroków po wysłaniu-> --dc-text-subtle, nie złoto (jw.)
 *   „Wróć do sklepu" z „→"   -> odnośnik z grotem (reguła 22)
 */

/* ==========================================================================
   1. KOLUMNA I NAGŁÓWEK
   ========================================================================== */

.dc-return-recovery {
  max-width: var(--dc-measure-md);
  margin-inline: auto;
}

.dc-return-recovery__head {
  margin-block-end: var(--dc-space-24);
}

.dc-return-recovery__eyebrow {
  margin-block-end: var(--dc-space-10);
  font-size: var(--dc-text-sm);
  font-weight: var(--dc-weight-medium);
  letter-spacing: var(--dc-tracking-widest);
  text-transform: uppercase;
  color: var(--dc-accent-strong);
}

/* Po wysłaniu: bez złota — nadtytuł nie ma sugerować wyniku. */
.dc-return-recovery__eyebrow--quiet {
  color: var(--dc-text-subtle);
}

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

.dc-return-recovery__intro {
  margin-block-start: var(--dc-space-10);
  font-size: var(--dc-text-md);
  line-height: var(--dc-leading-relaxed);
  color: var(--dc-text-muted);
}

/* ==========================================================================
   2. KARTA
   ========================================================================== */

.dc-return-recovery__card {
  padding: var(--dc-space-28);
  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-return-recovery__field {
  display: block;
  cursor: text;
}

.dc-return-recovery__field + .dc-return-recovery__field,
.dc-return-recovery__error + .dc-return-recovery__field {
  margin-block-start: var(--dc-space-22);
  padding-block-start: var(--dc-space-22);
  border-block-start: var(--dc-border) solid var(--dc-border-line);
}

.dc-return-recovery__label {
  display: block;
  margin-block-end: var(--dc-space-6);
  font-family: var(--dc-font-display);
  font-size: var(--dc-text-lg);
  font-weight: var(--dc-weight-bold);
  color: var(--dc-text);
}

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

.dc-return-recovery__hint strong {
  font-family: var(--dc-font-display);
  color: var(--dc-text);
}

.dc-return-recovery__frame {
  padding-inline: var(--dc-space-16);
}

.dc-return-recovery__error {
  margin-block: var(--dc-space-8) 0;
}

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

/* Stan „zajęty": pola przygaszone (C.1 nieaktywny). */
.dc-return-recovery__frame:has(:disabled) {
  border-color: var(--dc-border-line);
  background-color: var(--dc-surface-sunken);
  box-shadow: none;
}

.dc-return-recovery__frame :disabled {
  color: var(--dc-text-muted);
}

/* ==========================================================================
   3. PRZYCISK I KRĄŻEK
   ========================================================================== */

.dc-return-recovery__submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--dc-space-10);
  width: 100%;
  margin-block-start: var(--dc-space-24);
  padding: var(--dc-space-18) var(--dc-space-24);
  border: var(--dc-border) solid var(--dc-accent-a50);
  border-radius: var(--dc-radius-16);
  background-image: var(--dc-gradient-cta);
  box-shadow: var(--dc-shadow-accent), var(--dc-shadow-inset-top);
  color: var(--dc-on-accent);
  font-size: var(--dc-text-lg);
  font-weight: var(--dc-weight-bold);
  line-height: var(--dc-leading-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-return-recovery__submit:hover {
  background-color: var(--dc-accent-a50);
}

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

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

.dc-return-recovery__submit[aria-busy='true'],
.dc-return-recovery__submit[aria-busy='true']:hover {
  border-color: var(--dc-accent-a50);
  background-color: var(--dc-surface-sunken);
  background-image: none;
  box-shadow: none;
  color: var(--dc-text-muted);
  cursor: progress;
  transform: none;
}

.dc-return-recovery__spinner {
  display: inline-block;
  width: var(--dc-space-16);
  height: var(--dc-space-16);
  border: var(--dc-border-heavy) solid var(--dc-accent-a50);
  border-block-start-color: transparent;
  border-radius: var(--dc-radius-full);
  animation: dcReturnSpin var(--dc-duration-slower) linear infinite;
}

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

@keyframes dcReturnSpin {
  to {
    transform: rotate(360deg);
  }
}

/* ==========================================================================
   4. WIDOK „SPRAWDŹ SKRZYNKĘ" — ton neutralny
   ========================================================================== */

.dc-return-recovery__sent {
  display: flex;
  align-items: flex-start;
  gap: var(--dc-space-14);
  padding-block-end: var(--dc-space-22);
  border-block-end: var(--dc-border) solid var(--dc-border-line);
}

.dc-return-recovery__well {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--dc-space-40);
  height: var(--dc-space-40);
  border: var(--dc-border) solid var(--dc-border-line);
  border-radius: var(--dc-radius-12);
  background-color: var(--dc-surface-sunken);
  color: var(--dc-text-muted);
}

.dc-return-recovery__sent-text {
  font-size: var(--dc-text-lg);
  line-height: var(--dc-leading-relaxed);
  color: var(--dc-text);
}

.dc-return-recovery__title {
  margin-block: var(--dc-space-22) var(--dc-space-12);
  font-size: var(--dc-text-lg);
  font-weight: var(--dc-weight-bold);
}

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

.dc-return-recovery__step {
  display: flex;
  align-items: flex-start;
  gap: var(--dc-space-12);
  font-size: var(--dc-text-base);
  line-height: var(--dc-leading-normal);
  color: var(--dc-text-secondary);
}

.dc-return-recovery__num {
  flex: none;
  min-width: var(--dc-space-20);
  font-family: var(--dc-font-display);
  font-size: var(--dc-text-sm);
  font-weight: var(--dc-weight-black);
  line-height: var(--dc-leading-normal);
  font-variant-numeric: tabular-nums;
  color: var(--dc-text-subtle);
}

.dc-return-recovery__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--dc-space-10) var(--dc-space-16);
  margin-block-start: var(--dc-space-24);
}

/* Ranga 2. */
.dc-return-recovery__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--dc-space-12) var(--dc-space-22);
  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),
    transform var(--dc-duration-fast) var(--dc-ease-out);
}

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

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

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

/* Odnośnik z grotem (reguła 22): rusza się grot, obrys nie rośnie. */
.dc-return-recovery__link {
  display: inline-flex;
  align-items: center;
  gap: var(--dc-space-8);
  border-block-end: var(--dc-border-heavy) solid var(--dc-accent);
  color: var(--dc-text);
  font-size: var(--dc-text-lg);
  font-weight: var(--dc-weight-bold);
  text-decoration: none;
  transition: gap var(--dc-duration-base) var(--dc-ease);
}

.dc-return-recovery__link .dc-icon {
  transition: margin-inline-end var(--dc-duration-base) var(--dc-ease);
}

.dc-return-recovery__link:hover {
  gap: var(--dc-space-14);
}

.dc-return-recovery__link:hover .dc-icon {
  margin-inline-end: calc(var(--dc-space-8) - var(--dc-space-14));
}

.dc-return-recovery__foot {
  margin-block-start: var(--dc-space-20);
  font-size: var(--dc-text-base);
  line-height: var(--dc-leading-relaxed);
  color: var(--dc-text-muted);
}

.dc-return-recovery__phone {
  font-family: var(--dc-font-display);
  font-weight: var(--dc-weight-bold);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--dc-text);
  text-decoration: none;
  transition: color var(--dc-duration-base) var(--dc-ease);
}

.dc-return-recovery__phone:hover {
  color: var(--dc-accent-strong);
}

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

  .dc-return-recovery__button {
    flex: 1 1 auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dc-return-recovery__submit,
  .dc-return-recovery__button,
  .dc-return-recovery__link,
  .dc-return-recovery__link .dc-icon,
  .dc-return-recovery__phone {
    transition: none;
  }

  .dc-return-recovery__spinner {
    animation: none;
  }
}