/* Страница заявки. Общие детали в app.css, токены в site.css. */

.order-page { max-width: 780px; }
.order-head { margin-bottom: 24px; }

.info-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.chip { display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); font-size: var(--fs-14); }

/* Услуги */
.service-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.service-tab { min-height: 44px; padding: 0 16px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); font-weight: 500; cursor: pointer; }
.service-tab:hover { border-color: var(--ink-2); }
.service-tab.active { background: var(--solid); border-color: var(--solid); color: #fff; }

/* Шаги формы */
.order-step { margin-bottom: 20px; }
.order-step .select-wrap { margin-bottom: 8px; }
.step-label { display: flex; align-items: center; gap: 8px; }
.step-num { display: inline-grid; place-items: center; width: 24px; height: 24px; border: 1px solid var(--line); border-radius: 50%; font-family: var(--mono); font-size: 12px; background: var(--surface); }
#give-amount, #get-amount { font-family: var(--mono); font-size: var(--fs-28); font-weight: 500; letter-spacing: -0.02em; }
.input-row:has(#get-amount) { background: var(--amber-soft); border-color: var(--amber-line); }
#get-amount { color: var(--amber); font-weight: 600; }
.input-row:has(#get-amount) .currency { color: var(--amber); }

.swap-btn { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: 0 0 20px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); font-size: 20px; cursor: pointer; }
.swap-btn:hover { border-color: var(--ink-2); }

/* Карточки выбора (способ оплаты, сеть USDT) */
.choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.choice-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.choice { position: relative; display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 12px 40px 12px 14px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); text-align: left; cursor: pointer; }
.choice:hover { border-color: var(--ink-2); }
.choice.selected { border-color: var(--brand); background: var(--brand-soft); box-shadow: inset 0 0 0 1px var(--brand); }
.choice-icon { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: var(--r-sm); background: var(--paper); color: var(--brand); }
.choice.selected .choice-icon { background: var(--surface); }
.choice-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.choice-text { display: grid; gap: 2px; min-width: 0; }
.choice-title { font-weight: 600; }
.choice-sub { font-size: var(--fs-14); color: var(--ink-2); }
.choice-badge { position: absolute; top: 8px; right: 36px; padding: 0 6px; border-radius: 4px; background: var(--amber-soft); color: var(--amber); font-size: 12px; font-weight: 600; }
.choice-check { position: absolute; right: 12px; top: 50%; width: 20px; height: 20px; margin-top: -10px; display: none; place-items: center; border-radius: 50%; background: var(--brand); color: #fff; font-size: 12px; }
.choice.selected .choice-check { display: grid; }

/* Сохранённые реквизиты */
.saved-list { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.saved-list:empty { display: none; }
.saved-chip { min-height: 36px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); font-size: var(--fs-14); cursor: pointer; }
.saved-chip:hover { border-color: var(--brand); color: var(--brand-dark); }

/* Фото QR-кода */
.dropzone { display: block; border: 1px dashed var(--ink-2); border-radius: var(--r-lg); background: var(--paper); cursor: pointer; }
.dropzone:hover, .dropzone.dragover { border-color: var(--brand); background: var(--brand-soft); }
.dropzone.filled { border-style: solid; border-color: var(--line); background: var(--surface); cursor: default; }
.dz-empty { display: grid; justify-items: center; gap: 4px; padding: 24px 16px; text-align: center; }
.dz-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r-sm); background: var(--surface); border: 1px solid var(--line); color: var(--brand); }
.dz-icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.dz-title { font-weight: 600; margin-top: 8px; }
.dz-sub { font-size: var(--fs-14); color: var(--ink-2); }
.dz-preview { display: flex; align-items: center; gap: 16px; padding: 12px; }
.dz-preview img { width: 88px; height: 88px; object-fit: cover; border: 1px solid var(--line); border-radius: var(--r-sm); background: #fff; }
.dz-info { display: grid; gap: 4px; min-width: 0; }
.dz-name { font-size: var(--fs-14); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dz-ok { font-size: var(--fs-14); color: var(--up); }
.dz-remove { justify-self: start; min-height: 32px; padding: 0; border: 0; background: none; color: var(--brand); font-size: var(--fs-14); text-decoration: underline; cursor: pointer; }

/* Курс и подсказка */
.rate-box { margin: 4px 0 16px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--paper); font-family: var(--mono); font-size: var(--fs-14); line-height: 1.6; white-space: pre-line; }
.how-next { margin-bottom: 4px; padding: 12px 16px; border-left: 3px solid var(--brand); background: var(--brand-soft); border-radius: 0 var(--r-sm) var(--r-sm) 0; font-size: var(--fs-14); }

/* После создания заявки */
.success { position: relative; display: grid; gap: 4px; }
.success-icon { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 12px; border-radius: 50%; background: var(--brand); color: #fff; font-size: 24px; }
.success h2 { font-size: var(--fs-28); line-height: 1.2; letter-spacing: -0.015em; margin: 0; }
.success > p { color: var(--ink-2); margin-top: 4px; }
.success .lock-line { margin-top: 16px; }

/* Номер заявки: маленькой строкой в углу, а не во весь блок */
.number-badge {
  position: absolute; top: 20px; right: 20px; display: flex; align-items: center; gap: 4px;
  font-family: var(--mono); font-size: var(--fs-14); color: var(--ink-2);
}
.copy-btn-mini { padding: 2px 6px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); font-size: 13px; line-height: 1; cursor: pointer; color: var(--ink-2); }
.copy-btn-mini:hover { border-color: var(--ink-2); color: var(--ink); }

.next-steps { margin-top: 24px; }
.next-steps h3 { font-size: var(--fs-16); font-weight: 600; margin: 0 0 8px; }
.next-steps ol { margin: 0; padding: 0; list-style: none; counter-reset: ns; }
.next-steps li { position: relative; counter-increment: ns; padding: 8px 0 8px 40px; border-top: 1px solid var(--line); }
.next-steps li::before { content: counter(ns); position: absolute; left: 0; top: 8px; display: grid; place-items: center; width: 24px; height: 24px; border: 1px solid var(--line); border-radius: 50%; font-family: var(--mono); font-size: 12px; }
.notify-area { margin-top: 20px; display: grid; gap: 8px; }
.notify-area:empty { display: none; }

@media (max-width: 760px) {
  .choice-grid, .choice-grid.three { grid-template-columns: minmax(0, 1fr); }
  .number-badge { position: static; justify-content: flex-end; margin-bottom: 8px; }
  .dz-preview img { width: 64px; height: 64px; }
}

/* Перевод в Таиланд: способ получения батов */
.thb-grid { grid-template-columns: minmax(0, 1fr); }
.thb-panel { margin-top: 16px; padding: 16px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--paper); }
.thb-panel .field:last-child { margin-bottom: 0; }
.thb-panel .saved-list { margin-bottom: 12px; }
#thb-note-text { margin-top: 12px; padding: 12px 16px; border-left: 3px solid var(--brand); background: var(--brand-soft); border-radius: 0 var(--r-sm) var(--r-sm) 0; color: var(--ink); line-height: 1.55; }
.input-row select.plain-select { flex: 1; min-height: 50px; padding: 0; border: 0; outline: 0; background: transparent; }

/* Чем платите: быстрый выбор рубли или криптовалюта */
.pay-quick { display: flex; flex-wrap: wrap; gap: 8px; }
.pay-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px 0 10px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); font-family: var(--mono); font-size: var(--fs-14); font-weight: 500; cursor: pointer; }
.pay-chip img { width: 22px; height: 22px; border-radius: 50%; }
.pay-chip:hover { border-color: var(--ink-2); }
.pay-chip.active { border-color: var(--brand); background: var(--brand-soft); box-shadow: inset 0 0 0 1px var(--brand); }
.pay-chip:disabled { opacity: 0.4; cursor: not-allowed; }
.crypto-pay { padding: 14px 16px; border-left: 3px solid var(--amber); background: var(--amber-soft); border-radius: 0 var(--r-sm) var(--r-sm) 0; font-size: var(--fs-14); line-height: 1.55; color: var(--ink); }

/* Сколько сейчас можем выдать (резерв) */
.reserve-note { margin: 8px 2px 0; font-size: var(--fs-14); color: var(--ink-2); }
.reserve-note.bad { color: var(--down); font-weight: 500; }