/* Страница оплаты. Токены (цвета, кегли, радиусы) берутся из app/styles.css —
   отдельной палитры здесь нет намеренно, страница должна читаться как часть меню. */

.pay-page {
  min-height: 100vh;
  margin: 0;
  background: var(--scroll-fade);
  color: var(--text-primary);
  font-family: var(--font-family);
}

.pay-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-subtle);
}
.pay-back {
  color: var(--text-secondary);
  font-size: var(--font-body);
  text-decoration: none;
  transition: color .18s ease;
}
@media (hover: hover) and (pointer: fine) {
  .pay-back:hover { color: var(--text-primary); }
}
.pay-logo { height: 22px; width: auto; }

.pay-main {
  max-width: 560px;
  margin: 0 auto;
  padding: 24px 20px 48px;
  display: grid;
  gap: 16px;
}

.pay-title {
  margin: 0 0 4px;
  font-size: 28px;
  line-height: 32px;
  font-weight: var(--fw-semibold);
}

.pay-card {
  padding: 20px;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, .04);
}
.pay-card-title {
  margin: 0 0 16px;
  color: var(--text-tertiary);
  font-size: var(--font-caption);
  line-height: var(--lh-caption);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: .06em;
}

/* ── позиции заказа ── */
.pay-item {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: baseline;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-subtle);
}
.pay-item-name  { font-size: var(--font-body); line-height: var(--lh-body); }
.pay-item-count { color: var(--text-muted); font-size: var(--font-caption); }
.pay-item-sum   { font-weight: var(--fw-semibold); white-space: nowrap; }

/* [hidden] перебивается любым явным display в авторском CSS — без этой строки
   скрытая строка скидки всё равно рисуется, пустая. */
.pay-row[hidden] { display: none; }

.pay-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding-top: 12px;
}
.pay-row--sub   { color: var(--text-secondary); font-size: var(--font-body); }
.pay-row--total {
  margin-top: 4px;
  padding-top: 16px;
  border-top: 1px solid var(--border-subtle);
  font-size: var(--font-cta);
  font-weight: var(--fw-semibold);
}

.pay-empty { margin: 0 0 16px; color: var(--text-muted); }
.pay-empty-link { color: var(--accent); text-decoration: none; }

/* ── способ оплаты ── */
.pay-method {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, .02);
}
/* Способ один и он пока недоступен — приглушаем, но оставляем читаемым,
   чтобы было видно, ЧТО именно появится. */
.pay-method.is-disabled { opacity: .72; }
.pay-method-body { display: grid; gap: 2px; }
.pay-method-name { font-size: var(--font-body); }
.pay-method-note { color: var(--text-muted); font-size: var(--font-caption); }

.pay-notice {
  margin: 16px 0 0;
  padding: 12px 14px;
  border-radius: var(--radius-xs);
  background: rgba(255, 107, 107, .10);
  color: var(--error);
  font-size: var(--font-caption);
  line-height: var(--lh-caption);
}

.pay-submit {
  width: 100%;
  min-height: 52px;
  margin-top: 16px;
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: var(--text-on-accent);
  font-family: var(--font-family);
  font-size: var(--font-cta);
  font-weight: var(--fw-semibold);
  cursor: pointer;
  transition: transform .16s var(--ease-out), filter .18s ease;
}
.pay-submit:active:not(:disabled) { transform: scale(.98); }
.pay-submit:disabled { opacity: .4; cursor: not-allowed; }
@media (hover: hover) and (pointer: fine) {
  .pay-submit:not(:disabled):hover { filter: brightness(1.08); }
}

.pay-hint {
  margin: 12px 0 0;
  color: var(--text-muted);
  font-size: var(--font-caption);
  line-height: var(--lh-caption);
  text-align: center;
}

/* ── реквизиты ── */
.pay-legal-list {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px 16px;
  margin: 0;
  font-size: var(--font-caption);
  line-height: var(--lh-caption);
}
.pay-legal-list dt { color: var(--text-muted); }
.pay-legal-list dd { margin: 0; color: var(--text-secondary); }
.pay-legal-links { margin: 16px 0 0; font-size: var(--font-caption); }
.pay-legal-links a { color: var(--accent); text-decoration: none; }

@media (max-width: 480px) {
  .pay-main { padding: 20px 16px 40px; }
  .pay-title { font-size: 24px; line-height: 28px; }
  .pay-card { padding: 16px; }
}

/* Тестовый режим. Цвет намеренно не красный, как у ошибки, а предупреждающий:
   это не сбой, а честное «денег не спишем». Гость не должен принять
   тестовую оплату за настоящую. */
.pay-notice--test {
  background: rgba(255, 178, 83, .12);
  color: #FFB253;
}