/**
 * checkout-thankyou.css — strona po zamówieniu i widok zamówienia w koncie:
 * potwierdzenie, karty przeglądu, dane do przelewu (BACS), tabela
 * szczegółów, oświadczenie akcyzowe (recap z mu-wtyczki), adresy.
 *
 * Wymaga tokens.css i base.css. Prefiksy: .dc-thankyou__, .dc-order-details__,
 * .dc-excise-recap__ (znacznik wypisuje mu-wtyczka dc-excise.php, styl
 * należy do motywu). Klasy WooCommerce dostają styl tylko tam, gdzie nie
 * ma naszej klasy do zaczepienia: dane bankowe BACS (szablon bramki),
 * pozycje tabeli (order-details-item.php wtyczki), adresy
 * (order-details-customer.php wtyczki).
 *
 * Przepisy z systemu: panel = glass-soft, r28, --dc-shadow-xl (jak bloki
 * kasy); karta przeglądu = szkło, r16, cień stopnia 2; nagłówki sekcji
 * = --dc-text-5xl / black jak tytuły kroków; przycisk akcji = ranga 2.
 */

/* ==========================================================================
   1. POTWIERDZENIE I KARTY PRZEGLĄDU
   ========================================================================== */

.dc-thankyou {
  display: flex;
  flex-direction: column;
  gap: var(--dc-space-20);
}

.dc-thankyou__lead {
  display: flex;
  align-items: center;
  gap: var(--dc-space-10);
  padding: var(--dc-space-16) var(--dc-space-20);
  border: var(--dc-border) solid color-mix(in srgb, var(--dc-success) 30%, transparent);
  border-radius: var(--dc-radius-18);
  background-color: color-mix(in srgb, var(--dc-success) 10%, var(--dc-surface));
  font-family: var(--dc-font-display);
  font-size: var(--dc-text-lg);
  font-weight: var(--dc-weight-bold);
  color: var(--dc-text);
}

.dc-thankyou__lead .dc-icon {
  flex: none;
  color: var(--dc-success);
}

.dc-thankyou__failed {
  padding: var(--dc-space-16) var(--dc-space-20);
  border: var(--dc-border) solid color-mix(in srgb, var(--dc-danger) 30%, transparent);
  border-radius: var(--dc-radius-18);
  background-color: color-mix(in srgb, var(--dc-danger) 10%, var(--dc-surface));
  font-size: var(--dc-text-md);
  color: var(--dc-danger);
}

.dc-thankyou__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dc-space-12);
}

.dc-thankyou__overview {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(var(--dc-grid-min-sm), 100%), 1fr));
  gap: var(--dc-space-12);
}

.dc-thankyou__card {
  padding: var(--dc-space-16) var(--dc-space-18);
  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-lg), var(--dc-shadow-inset-top);
}

.dc-thankyou__card-label {
  display: block;
  margin-block-end: var(--dc-space-6);
  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-thankyou__card-value {
  font-family: var(--dc-font-display);
  font-size: var(--dc-text-xl);
  font-weight: var(--dc-weight-black);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

/* Przyciski akcji: ranga 2, główny jako ranga 1. */
.dc-thankyou__button,
.dc-order-details__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  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-thankyou__button:hover,
.dc-order-details__action:hover {
  border-color: var(--dc-accent-a50);
  background-color: var(--dc-surface);
  color: var(--dc-text);
}

.dc-thankyou__button:active,
.dc-order-details__action:active {
  transform: scale(0.97);
}

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

/* ==========================================================================
   2. DANE DO PRZELEWU (BACS) — znacznik bramki WooCommerce
   ========================================================================== */

.dc-thankyou .woocommerce-bacs-bank-details {
  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);
  box-shadow: var(--dc-shadow-xl), var(--dc-shadow-inset-top);
}

.dc-thankyou .woocommerce-bacs-bank-details .wc-bacs-bank-details-heading,
.dc-thankyou .woocommerce-bacs-bank-details .wc-bacs-bank-details-account-name {
  font-size: var(--dc-text-5xl);
  font-weight: var(--dc-weight-black);
  line-height: var(--dc-leading-tight);
  letter-spacing: var(--dc-tracking-tight);
}

.dc-thankyou .woocommerce-bacs-bank-details .wc-bacs-bank-details-account-name {
  margin-block-start: var(--dc-space-16);
  font-size: var(--dc-text-xl);
}

.dc-thankyou .wc-bacs-bank-details {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(var(--dc-grid-min-sm), 100%), 1fr));
  gap: var(--dc-space-12);
  margin-block-start: var(--dc-space-12);
  padding: 0;
  list-style: none;
}

.dc-thankyou .wc-bacs-bank-details li {
  padding: var(--dc-space-12) var(--dc-space-14);
  border: var(--dc-border) solid var(--dc-border-line);
  border-radius: var(--dc-radius-12);
  background-color: var(--dc-surface);
  font-size: var(--dc-text-sm);
  color: var(--dc-text-muted);
}

.dc-thankyou .wc-bacs-bank-details strong {
  display: block;
  margin-block-start: var(--dc-space-2);
  font-family: var(--dc-font-display);
  font-size: var(--dc-text-md);
  font-variant-numeric: tabular-nums;
  color: var(--dc-text);
}

/* ==========================================================================
   3. SZCZEGÓŁY ZAMÓWIENIA
   ========================================================================== */

.dc-order-details {
  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-order-details__title,
.dc-excise-recap__title,
.woocommerce-customer-details .woocommerce-column__title {
  margin-block-end: var(--dc-space-16);
  font-size: var(--dc-text-5xl);
  font-weight: var(--dc-weight-black);
  line-height: var(--dc-leading-tight);
  letter-spacing: var(--dc-tracking-tight);
}

.dc-order-details__table {
  display: block;
  width: 100%;
}

.dc-order-details__table > thead,
.dc-order-details__table > tbody,
.dc-order-details__table > tfoot {
  display: block;
}

.dc-order-details__table tr {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--dc-space-16);
  padding-block: var(--dc-space-10);
  border-block-end: var(--dc-border) solid var(--dc-border-line);
}

.dc-order-details__table th,
.dc-order-details__table td {
  padding: 0;
  text-align: left;
}

.dc-order-details__table > thead th {
  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);
}

/* Pozycje z order-details-item.php wtyczki. */
.dc-order-details__table .woocommerce-table__product-name {
  flex: 1;
  min-width: 0;
  font-family: var(--dc-font-display);
  font-size: var(--dc-text-md);
  font-weight: var(--dc-weight-bold);
}

.dc-order-details__table .woocommerce-table__product-name a {
  color: var(--dc-text);
  text-decoration: none;
}

.dc-order-details__table .woocommerce-table__product-name a:hover {
  color: var(--dc-accent-strong);
}

.dc-order-details__table .product-quantity {
  font-weight: 400;
  color: var(--dc-text-subtle);
}

.dc-order-details__table .wc-item-meta {
  margin: var(--dc-space-4) 0 0;
  padding: 0;
  list-style: none;
  font-family: var(--dc-font-body);
  font-size: var(--dc-text-sm);
  font-weight: 400;
  color: var(--dc-text-subtle);
}

.dc-order-details__table .wc-item-meta p {
  display: inline;
}

.dc-order-details__table .woocommerce-table__product-total,
.dc-order-details__table > tfoot td {
  font-family: var(--dc-font-display);
  font-size: var(--dc-text-lg);
  font-weight: var(--dc-weight-bold);
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

.dc-order-details__table > tfoot th {
  font-size: var(--dc-text-md);
  font-weight: 400;
  color: var(--dc-text-muted);
}

.dc-order-details__total--order_total td {
  font-size: var(--dc-text-4xl);
  font-weight: var(--dc-weight-black);
  letter-spacing: var(--dc-tracking-tight);
}

.dc-order-details__total--order_total .tax_label,
.dc-order-details__total--order_total .amount + small,
.dc-order-details__total--order_total small {
  display: block;
  font-family: var(--dc-font-body);
  font-size: var(--dc-text-sm);
  font-weight: 400;
  letter-spacing: var(--dc-tracking-normal);
  color: var(--dc-text-subtle);
}

.dc-order-details__total--note td,
.dc-order-details__total--actions td {
  font-family: var(--dc-font-body);
  font-size: var(--dc-text-md);
  font-weight: 400;
  white-space: normal;
  text-align: right;
}

.dc-order-details__total--actions td {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--dc-space-10);
}

.dc-order-details__table tr:last-child {
  border-block-end: 0;
}

/* ==========================================================================
   4. OŚWIADCZENIE AKCYZOWE (recap z mu-wtyczki)
   ========================================================================== */

.dc-excise-recap {
  margin-block-start: var(--dc-space-28);
  padding-block-start: var(--dc-space-24);
  border-block-start: var(--dc-border-thick) solid var(--dc-border-line);
}

.dc-excise-recap__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(var(--dc-grid-min-md), 100%), 1fr));
  gap: var(--dc-space-12);
}

.dc-excise-recap__row {
  padding: var(--dc-space-12) var(--dc-space-14);
  border: var(--dc-border) solid var(--dc-border-line);
  border-radius: var(--dc-radius-12);
  background-color: var(--dc-surface);
}

.dc-excise-recap__label {
  font-size: var(--dc-text-sm);
  font-weight: var(--dc-weight-medium);
  color: var(--dc-text-subtle);
}

.dc-excise-recap__value {
  margin: var(--dc-space-4) 0 0;
  font-size: var(--dc-text-md);
  line-height: var(--dc-leading-snug);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.dc-excise-recap__note {
  margin-block-start: var(--dc-space-14);
  font-size: var(--dc-text-xs);
  line-height: var(--dc-leading-normal);
  color: var(--dc-text-subtle);
}

/* ==========================================================================
   5. ADRESY — order-details-customer.php wtyczki
   ========================================================================== */

.dc-thankyou .woocommerce-customer-details,
.woocommerce-view-order .woocommerce-customer-details {
  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);
  box-shadow: var(--dc-shadow-xl), var(--dc-shadow-inset-top);
}

.woocommerce-customer-details .woocommerce-columns--addresses {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(var(--dc-grid-min-sm), 100%), 1fr));
  gap: var(--dc-space-24);
}

.woocommerce-customer-details .woocommerce-column__title {
  font-size: var(--dc-text-xl);
}

.woocommerce-customer-details address {
  font-size: var(--dc-text-md);
  font-style: normal;
  line-height: var(--dc-leading-relaxed);
  color: var(--dc-text-muted);
}

.woocommerce-customer-details .woocommerce-customer-details--phone,
.woocommerce-customer-details .woocommerce-customer-details--email {
  margin-block-start: var(--dc-space-6);
  color: var(--dc-text);
}