/* Страница подтверждения заказа (order-confirmed.html) — US-008.

   Цвета, отступы, радиусы и тени берём из css/style.css (:root): своей палитры
   у страницы нет, иначе «зелёный успех» здесь и в кабинете разъедутся.

   Порядок блоков: экран «заказ принят» → карточка заказа → письмо → действия. */

/* --- Экран «заказ принят» ------------------------------------------------- */

.confirmed-hero {
  background: linear-gradient(180deg, var(--color-success-soft), var(--color-bg));
  padding: var(--space-xl) 0 var(--space-lg);
  border-bottom: 1px solid var(--color-border);
}

.confirmed-hero__inner {
  display: grid;
  gap: var(--space-sm);
  max-width: 44rem;
}

.confirmed-hero__icon { font-size: 2.5rem; line-height: 1; }

.confirmed-hero h1 { font-size: var(--fs-hero); line-height: 1.1; }

.confirmed-hero__lead {
  color: var(--color-muted);
  font-size: var(--fs-body);
  max-width: 38rem;
}

.confirmed-status {
  margin-top: var(--space-xs);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
  background: var(--color-primary-soft);
  color: var(--color-primary);
  font-size: var(--fs-small);
  font-weight: 600;
}

.confirmed-status[data-tone="error"] {
  background: var(--color-danger-soft);
  color: var(--color-danger);
}

/* --- Пояснения вместо заказа ---------------------------------------------- */

.confirmed-note {
  display: grid;
  gap: var(--space-xs);
  padding: var(--space-lg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  text-align: center;
  justify-items: center;
}

.confirmed-note--missing { border-color: var(--color-warning); background: var(--color-warning-soft); }

.confirmed-note__icon { font-size: 2rem; line-height: 1; }

.confirmed-note__title { font-size: var(--fs-h3); font-weight: 700; }

.confirmed-note__text,
.confirmed-note__hint {
  color: var(--color-muted);
  max-width: 34rem;
}

.confirmed-note__hint { font-size: var(--fs-small); }

/* --- Карточка заказа ------------------------------------------------------ */

.confirmed {
  display: grid;
  gap: var(--space-lg);
  padding: var(--space-lg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-bg);
  box-shadow: var(--shadow-sm);
}

.confirmed__head {
  display: grid;
  gap: var(--space-xs);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--color-border);
}

.confirmed__number { font-size: var(--fs-h2); line-height: 1.2; }

.confirmed__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs);
  color: var(--color-muted);
  font-size: var(--fs-small);
}

.confirmed__grid {
  display: grid;
  gap: var(--space-md);
}

@media (min-width: 48rem) {
  .confirmed { padding: var(--space-xl) var(--space-lg); }
  .confirmed__grid { grid-template-columns: 1.2fr 1fr; gap: var(--space-lg); }
}

.confirmed-card {
  display: grid;
  gap: var(--space-sm);
  align-content: start;
  padding: var(--space-md);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.confirmed-card__title { font-size: var(--fs-h3); }

.confirmed-card__note { color: var(--color-muted); font-size: var(--fs-small); }

/* --- Состав заказа -------------------------------------------------------- */

.confirmed-items { list-style: none; display: grid; gap: var(--space-xs); }

.confirmed-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0 var(--space-sm);
  padding-bottom: var(--space-xs);
  border-bottom: 1px dashed var(--color-border);
}

.confirmed-item__name { font-weight: 600; }

.confirmed-item__count {
  grid-column: 1;
  color: var(--color-muted);
  font-size: var(--fs-small);
}

.confirmed-item__total {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  font-weight: 700;
  white-space: nowrap;
}

/* --- Строки «ключ — значение» --------------------------------------------- */

.confirmed-rows { display: grid; gap: var(--space-xs); }

.confirmed-rows__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-xs);
}

.confirmed-rows__row dt { color: var(--color-muted); font-size: var(--fs-small); }

.confirmed-rows__row dd { font-weight: 600; text-align: right; }

.confirmed-rows__row--total {
  margin-top: var(--space-xs);
  padding-top: var(--space-xs);
  border-top: 1px solid var(--color-border);
}

.confirmed-rows__row--total dt { color: var(--color-text); font-size: var(--fs-body); font-weight: 700; }

.confirmed-rows__row--total dd { font-size: var(--fs-h3); }

/* --- Письмо о заказе ------------------------------------------------------ */

.confirmed-mail {
  display: grid;
  gap: var(--space-sm);
  justify-items: start;
  padding: var(--space-md);
  border: 1px solid var(--color-primary-soft);
  border-radius: var(--radius-md);
  background: var(--color-primary-soft);
}

.confirmed-mail__text { color: var(--color-text); }

.confirmed-mail__error {
  color: var(--color-danger);
  font-weight: 600;
  font-size: var(--fs-small);
}

.confirmed-letter {
  width: 100%;
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-xs);
}

.confirmed-letter summary { cursor: pointer; font-weight: 600; }

.confirmed-letter__subject { margin-top: var(--space-xs); font-weight: 700; }

.confirmed-letter__text {
  margin-top: var(--space-xs);
  padding: var(--space-sm);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  color: var(--color-muted);
  font-family: inherit;
  font-size: var(--fs-small);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* --- Куда идти дальше ----------------------------------------------------- */

.confirmed-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}