/**
 * return-status.css — status otwartego zgłoszenia i karta „poza oknem"
 * (template-parts/account/return-status.php) oraz notka o zgłoszeniu
 * pod tabelą zamówienia (.dc-return-notice, znacznik z dc-returns.php).
 *
 * Wymaga tokens.css i base.css. Prefiksy .dc-return-status__ i
 * .dc-return-notice__.
 *
 * TEN SAM PRZEPIS CO return-sent.css — drugie wystąpienie, kopia pod
 * własnym prefiksem (reguła 18); różnice: brak zielonej studzienki,
 * plakietka stanu (tag z C.8: pigułka a10 + a30, 10/700 wersaliki),
 * jeden przycisk.
 */

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

.dc-return-status__card {
  max-width: var(--dc-measure-xl);
  margin-inline: auto;
  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-return-status__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--dc-space-6) var(--dc-space-14);
  margin-block-end: var(--dc-space-22);
}

.dc-return-status__eyebrow {
  flex-basis: 100%;
  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);
}

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

.dc-return-status__tag {
  display: inline-flex;
  align-items: center;
  height: var(--dc-space-28);
  padding-inline: var(--dc-space-10);
  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;
  white-space: nowrap;
  color: var(--dc-accent-strong);
}

.dc-return-status__lead {
  max-width: var(--dc-measure-lg);
  font-size: var(--dc-text-lg);
  line-height: var(--dc-leading-relaxed);
  color: var(--dc-text-secondary);
}

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

/* ==========================================================================
   2. PODSUMOWANIE I KROKI — jak return-sent
   ========================================================================== */

.dc-return-status__recap {
  margin-block-start: var(--dc-space-22);
  padding: var(--dc-space-20) var(--dc-space-24);
  border: var(--dc-border) solid var(--dc-border-line);
  border-radius: var(--dc-radius-22);
  background-color: var(--dc-surface-sunken);
}

.dc-return-status__recap-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-wider);
  text-transform: uppercase;
  color: var(--dc-text-subtle);
}

.dc-return-status__table {
  width: 100%;
  border-collapse: collapse;
}

.dc-return-status__cell {
  padding-block: var(--dc-space-10);
  border-block-end: var(--dc-border) solid var(--dc-border-line);
  font-size: var(--dc-text-md);
  font-weight: 400;
  line-height: var(--dc-leading-snug);
  text-align: left;
  vertical-align: top;
  color: var(--dc-text-secondary);
}

.dc-return-status__cell--value {
  padding-inline-start: var(--dc-space-16);
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
  color: var(--dc-text);
}

.dc-return-status__row--total .dc-return-status__cell {
  font-family: var(--dc-font-display);
  font-weight: var(--dc-weight-black);
  color: var(--dc-text);
}

.dc-return-status__row--reason .dc-return-status__cell {
  border-block-end: 0;
  font-size: var(--dc-text-base);
}

.dc-return-status__title {
  margin-block: var(--dc-space-28) var(--dc-space-14);
  font-size: var(--dc-text-2xl);
  font-weight: var(--dc-weight-bold);
}

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

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

.dc-return-status__num {
  flex: none;
  min-width: var(--dc-space-24);
  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-accent-strong);
}

/* ==========================================================================
   3. PRZYCISK I STOPKA
   ========================================================================== */

.dc-return-status__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dc-space-12);
  margin-block-start: var(--dc-space-28);
}

.dc-return-status__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--dc-space-14) var(--dc-space-24);
  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-lg);
  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-status__button:hover {
  border-color: var(--dc-accent-a50);
  background-color: var(--dc-surface);
  color: var(--dc-text);
}

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

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

.dc-return-status__button--primary {
  border-color: var(--dc-accent-a50);
  background-image: var(--dc-gradient-cta);
  box-shadow: var(--dc-shadow-accent), var(--dc-shadow-inset-top);
  color: var(--dc-on-accent);
  font-weight: var(--dc-weight-bold);
}

.dc-return-status__button--primary:hover {
  background-color: var(--dc-accent-a50);
  color: var(--dc-on-accent);
}

.dc-return-status__foot {
  margin-block-start: var(--dc-space-22);
  font-size: var(--dc-text-sm);
  line-height: var(--dc-leading-normal);
  color: var(--dc-text-subtle);
}

.dc-return-status__phone {
  font-weight: var(--dc-weight-bold);
  white-space: nowrap;
  color: var(--dc-text);
  text-decoration: none;
  transition: color var(--dc-duration-base) var(--dc-ease);
}

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

/* ==========================================================================
   4. NOTKA POD TABELĄ ZAMÓWIENIA (konto, „Dziękujemy")
   Znacznik wypisuje mu-wtyczka (dc_returns_order_details_notice()).
   Ramka złota jak notki pod sumą w kasie; odnośnik z grotem to osobny
   wzorzec — tu zwykły odnośnik rangi 2 w małym rozmiarze.
   ========================================================================== */

.dc-return-notice {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--dc-space-8) var(--dc-space-16);
  margin-block-start: var(--dc-space-20);
  padding: var(--dc-space-14) var(--dc-space-16);
  border: var(--dc-border) solid var(--dc-border-accent);
  border-radius: var(--dc-radius-16);
  background-color: var(--dc-accent-a10);
}

.dc-return-notice__title {
  flex-basis: 100%;
  font-family: var(--dc-font-display);
  font-size: var(--dc-text-md);
  font-weight: var(--dc-weight-bold);
  color: var(--dc-accent-strong);
}

.dc-return-notice__text {
  flex: 1 1 var(--dc-measure-xs);
  font-size: var(--dc-text-base);
  line-height: var(--dc-leading-normal);
  color: var(--dc-text-secondary);
}

.dc-return-notice__link {
  display: inline-flex;
  align-items: center;
  padding: var(--dc-space-8) var(--dc-space-16);
  border: var(--dc-border) solid var(--dc-border-line);
  border-radius: var(--dc-radius-12);
  background-color: var(--dc-surface-glass);
  color: var(--dc-text);
  font-size: var(--dc-text-base);
  font-weight: var(--dc-weight-medium);
  line-height: var(--dc-leading-none);
  text-decoration: none;
  white-space: nowrap;
  transition:
    background-color var(--dc-duration-base) var(--dc-ease),
    border-color var(--dc-duration-base) var(--dc-ease);
}

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

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

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

  .dc-return-status__cell--value {
    white-space: normal;
  }

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

@media (prefers-reduced-motion: reduce) {
  .dc-return-status__button,
  .dc-return-status__phone,
  .dc-return-notice__link {
    transition: none;
  }
}