/**
 * return-sent.css — potwierdzenie zgłoszenia zwrotu (template-parts/
 * account/return-sent.php): karta z ptaszkiem, numerem, podsumowaniem,
 * krokami i przyciskami.
 *
 * Wymaga tokens.css i base.css. Prefiks .dc-return-sent__.
 *
 * MAKIETA MÓWI CO I GDZIE, PROJEKT MÓWI JAK (ZwrotFormularz, widok confirm):
 *   karta r28 + cień          -> panel glass-soft, r28, --dc-shadow-xl
 *   kółko z ptaszkiem 44      -> studzienka ikony 40 / r12 z C.8 w tincie
 *                                zieleni (color-mix jak .dc-notice--success)
 *   panel podsumowania r22    -> karta w panelu r22 (drabinka C.9), sunken
 *   numery kroków PJS 800 13  -> --dc-font-display / black / --dc-text-sm,
 *                                --dc-accent-strong (tekst złoty, reguła J)
 *   przyciski                 -> ranga 1 i ranga 2 (C.1), jak .dc-thankyou__button
 *   animacja zcRise           -> ODPADA (C.2: ruch tylko kolorem)
 * Makietowe 720 px karty -> --dc-measure-xl (680).
 */

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

.dc-return-sent__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-sent__head {
  display: flex;
  align-items: center;
  gap: var(--dc-space-14);
  margin-block-end: var(--dc-space-22);
}

.dc-return-sent__icon {
  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 color-mix(in srgb, var(--dc-success) 30%, transparent);
  border-radius: var(--dc-radius-12);
  background-color: color-mix(in srgb, var(--dc-success) 15%, transparent);
  color: var(--dc-success);
}

.dc-return-sent__eyebrow {
  margin-block-end: var(--dc-space-6);
  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-sent__heading {
  font-size: var(--dc-display-3);
  line-height: var(--dc-leading-tight);
  letter-spacing: var(--dc-tracking-tight);
}

.dc-return-sent__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-sent__lead strong {
  color: var(--dc-text);
}

/* ==========================================================================
   2. PODSUMOWANIE (tabela w karcie)
   ========================================================================== */

.dc-return-sent__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-sent__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-sent__table {
  width: 100%;
  border-collapse: collapse;
}

.dc-return-sent__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-sent__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-sent__row--total .dc-return-sent__cell {
  font-family: var(--dc-font-display);
  font-weight: var(--dc-weight-black);
  color: var(--dc-text);
}

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

/* ==========================================================================
   3. CO DALEJ
   ========================================================================== */

.dc-return-sent__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-sent__steps {
  display: flex;
  flex-direction: column;
  gap: var(--dc-space-12);
}

.dc-return-sent__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-sent__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);
}

/* ==========================================================================
   4. PRZYCISKI I STOPKA
   ========================================================================== */

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

.dc-return-sent__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-sent__button:hover {
  border-color: var(--dc-accent-a50);
  background-color: var(--dc-surface);
  color: var(--dc-text);
}

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

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

.dc-return-sent__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-sent__button--primary:hover {
  background-color: var(--dc-accent-a50);
  color: var(--dc-on-accent);
}

.dc-return-sent__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-sent__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-sent__phone:hover {
  color: var(--dc-accent-strong);
}

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

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

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

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

@media (prefers-reduced-motion: reduce) {
  .dc-return-sent__button,
  .dc-return-sent__phone {
    transition: none;
  }
}