/*
 * Рассрочка Uzum Nasiya на витрине: карточка товара (U0), оформление (U1),
 * страница заказа — шаги (U2–U4) и исходы (U5). Макет — Figma
 * `wGC5YgBMUF7AxqsAquKJKC`, секция 203:1635.
 *
 * Отдельным файлом: подключается только там, где Uzum у пространства есть.
 *
 * ⚠ Цвета — токены витрины (`--sh-*`, их перекрашивает «Шаблон» арендатора).
 * Своих два, и оба — знаки сервиса из макета, а не тема магазина:
 * фиолетовый значок «U» и жёлтая подложка платежа в месяц.
 */
:root {
	--uzn-brand: #7000ff;
	--uzn-mark: #ffe066;
}

/* Что показать при выбранном способе оплаты — атрибут `hidden` (checkout-pay.js).
   ⚠ !important: `.basket__keep` и `.basket__row` в shop.css задают display. */
[data-pay-show][hidden] { display: none !important; }

.uzn-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── значок сервиса ── */
.uzn-logo { flex: none; display: inline-grid; place-items: center; width: 20px; height: 20px;
	border-radius: 5px; background: var(--uzn-brand); color: #fff;
	font-style: normal; font-size: 12px; font-weight: 700; line-height: 1; }

/* ── вкладки сроков ── */
.uzn-tabs { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 10px;
	background: color-mix(in srgb, var(--sh-line) 60%, var(--sh-card)); align-self: flex-start; }
.uzn-tabs label, .uzn-tabs button { display: block; min-width: 76px; padding: 8px 16px; border: 0; border-radius: 8px;
	background: transparent; color: var(--sh-muted); font: inherit; font-size: 14px; font-weight: 600;
	text-align: center; cursor: pointer; }
.uzn-tabs button.is-on { background: var(--sh-card); color: var(--sh-ink); box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }

/* ── «2 848 334 сум × 3 мес» ── */
.uzn-pays { display: block; }
.uzn-pay { display: none; align-items: baseline; gap: 8px; margin: 0; font-size: 18px; color: var(--sh-ink); }
.uzn-pay--big { display: flex; font-size: 20px; }
.uzn-mark { background: var(--uzn-mark); color: var(--sh-ink); border-radius: 6px; padding: 3px 8px; font-weight: 700; }

/* ── карточка товара (U0) ── */
.uzn-card { display: flex; flex-direction: column; gap: 12px; margin: 4px 0 14px; padding: 14px;
	background: var(--sh-bg); border: .8px solid var(--sh-line); border-radius: var(--sh-radius); }
.uzn-card__head { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--sh-muted); }

.uzn-buy { margin: 10px 0 0; }
.uzn-hint { margin: 10px 0 0; font-size: 12px; line-height: 1.45; color: var(--sh-muted); }

/* ── кнопки ── */
.uzn-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; box-sizing: border-box;
	padding: 11px 18px; border-radius: 8px; border: 1px solid transparent; font: inherit; font-size: 14px;
	font-weight: 600; text-align: center; cursor: pointer; text-decoration: none; }
.uzn-btn:hover { text-decoration: none; }
.uzn-btn[disabled] { cursor: default; opacity: 1; background: var(--sh-line); border-color: var(--sh-line); color: var(--sh-muted); }
.uzn-btn--main { background: var(--sh-blue); color: #fff; }
.uzn-btn--main:hover { background: var(--sh-blue-dark, var(--sh-blue)); color: #fff; }
a.uzn-btn--main { color: #fff; }
.uzn-btn--line { background: var(--sh-card); border-color: var(--sh-line); color: var(--sh-ink); }
.uzn-btn--line:hover { background: var(--sh-bg); color: var(--sh-ink); }
a.uzn-btn--line { color: var(--sh-ink); }
.uzn-buy .uzn-btn, .uzn-btn--big { display: flex; width: 100%; padding: 14px 16px; font-size: 15px; border-radius: var(--sh-radius); }
.uzn-buy .uzn-btn--line { border-color: var(--sh-blue); color: var(--sh-blue); }
.uzn-buy .uzn-btn--line:hover { background: var(--sh-soft); }
.uzn-link { padding: 0; border: 0; background: none; color: var(--sh-blue); font: inherit; font-size: 14px; cursor: pointer; align-self: flex-start; }

/* ── оформление (U1): вариант оплаты со значком (строкой — правило `.ofrm .ofrm__pick` в shop.css) ── */
.uzn-pick .uzn-logo, .uzn-picked .uzn-logo { width: 28px; height: 28px; border-radius: 7px; font-size: 14px; }

/* ── страница заказа: выбранный способ над шагами ── */
.uzn-picked { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--sh-radius);
	border: 1.5px solid var(--sh-blue); background: var(--sh-soft); }
.uzn-picked span { display: flex; flex-direction: column; gap: 2px; }
.uzn-picked b { font-size: 14px; color: var(--sh-ink); }
.uzn-picked span > i { font-style: normal; font-size: 12px; color: var(--sh-muted); }
.uzn-radio { flex: none; width: 18px; height: 18px; border-radius: 50%; border: 5px solid var(--sh-blue); background: var(--sh-card); box-sizing: border-box; }

/* ── панель шагов (U2–U4) ── */
.uzn-flow { display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: var(--sh-radius);
	background: var(--sh-bg); border: .8px solid var(--sh-line); }
.uzn-flow__head { display: flex; align-items: center; gap: 10px; }
.uzn-flow__head .uzn-logo { width: 26px; height: 26px; border-radius: 7px; font-size: 13px; }
.uzn-flow__head b { font-size: 15px; }
.uzn-flow__where { margin-left: auto; font-size: 12px; color: var(--sh-muted); }
.uzn-bar { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.uzn-bar i { height: 3px; border-radius: 2px; background: var(--sh-line); }
.uzn-bar i.is-on { background: var(--sh-blue); }

.uzn-step { display: flex; flex-direction: column; gap: 10px; }
.uzn-step[hidden] { display: none; }
.uzn-label { font-size: 12px; color: var(--sh-muted); }
.uzn-line { display: flex; gap: 10px; }
.uzn-input { flex: 1; min-width: 0; padding: 10px 12px; border: 1px solid var(--sh-line); border-radius: 8px;
	background: var(--sh-card); font: inherit; font-size: 15px; color: var(--sh-ink); }
.uzn-input:focus { outline: 2px solid var(--sh-soft); border-color: var(--sh-blue); }
.uzn-input.is-bad { border-color: var(--sh-warn); }
.uzn-small { margin: 0; font-size: 12px; line-height: 1.5; color: var(--sh-muted); }
.uzn-small a { color: var(--sh-blue); }
.uzn-err { margin: 0; font-size: 13px; color: var(--sh-warn); }
.uzn-err[hidden], .uzn-small[hidden], .uzn-box[hidden], .uzn-howto[hidden] { display: none; }
.uzn-h3 { font-size: 15px; color: var(--sh-ink); }
.uzn-acts { display: flex; flex-wrap: wrap; gap: 10px; }
.uzn-acts [hidden] { display: none; }

/* Плашки: зелёный — хватает, янтарный — регистрация, красный — отказ / не подписан, синий — проверяем. */
.uzn-box { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border-radius: 8px;
	border: 1px solid var(--sh-line); background: var(--sh-card); font-size: 13px; }
.uzn-box b { display: block; font-size: 14px; margin-bottom: 2px; color: var(--sh-ink); }
.uzn-box span { color: var(--sh-ink); }
.uzn-box__ico { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
	font-style: normal; font-weight: 700; font-size: 12px; color: #fff; background: var(--sh-muted); }
.uzn-box--ok { background: color-mix(in srgb, var(--sh-ok) 10%, var(--sh-card)); border-color: var(--sh-ok); }
.uzn-box--ok .uzn-box__ico { background: var(--sh-ok); }
.uzn-box--ok .uzn-box__ico::before { content: '✓'; }
.uzn-box--warn { background: var(--sh-wait-soft, #fdf3dc); border-color: var(--sh-wait, #a86a00); }
.uzn-box--warn .uzn-box__ico { background: var(--sh-wait, #a86a00); }
.uzn-box--warn .uzn-box__ico::before { content: '!'; }
.uzn-box--bad { background: color-mix(in srgb, var(--sh-warn) 10%, var(--sh-card)); border-color: var(--sh-warn); }
.uzn-box--bad .uzn-box__ico { background: var(--sh-warn); }
.uzn-box--bad .uzn-box__ico::before { content: '×'; }

.uzn-howto { margin: 0; padding: 0; list-style: none; counter-reset: uzn; display: flex; flex-direction: column; gap: 8px; }
.uzn-howto li { counter-increment: uzn; display: flex; gap: 10px; align-items: baseline; font-size: 13px; color: var(--sh-ink); }
.uzn-howto li::before { content: counter(uzn); flex: none; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center;
	font-size: 11px; color: var(--sh-blue); background: var(--sh-soft); }

/* Шаг 2: платёж и график рядом. */
.uzn-two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }
.uzn-kv { display: flex; justify-content: space-between; gap: 10px; padding: 12px 14px; border-radius: 8px;
	border: 1px solid var(--sh-line); background: var(--sh-card); font-size: 13px; }
.uzn-kv span { color: var(--sh-muted); }
.uzn-sched { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-radius: 8px;
	border: 1px solid var(--sh-line); background: var(--sh-card); font-size: 13px; }
.uzn-sched ol { margin: 0; padding: 0; list-style: none; counter-reset: uzs; display: flex; flex-direction: column; gap: 6px; }
.uzn-sched li { counter-increment: uzs; display: flex; gap: 10px; align-items: center; color: var(--sh-muted); }
.uzn-sched li::before { content: counter(uzs); flex: none; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center;
	font-size: 11px; color: var(--sh-blue); background: var(--sh-soft); }
.uzn-sched li b { margin-left: auto; font-weight: 400; color: var(--sh-ink); }
.uzn-sched small { font-size: 11px; color: var(--sh-muted); }

/* Шаг 3 (U4): «Проверяем подписание…» — синяя плашка с многоточием. */
.uzn-box--info { background: var(--sh-soft); border-color: var(--sh-blue); }
.uzn-box--info .uzn-box__ico { background: var(--sh-blue); }
.uzn-box--info .uzn-box__ico::before { content: '…'; }
.uzn-acts[hidden] { display: none; }

/* ── исходы (U5) ── */
.uzn-status { display: flex; flex-direction: column; gap: 8px; padding: 20px; border-radius: var(--sh-radius);
	border: 1px solid var(--sh-line); background: var(--sh-card); }
.uzn-status p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--sh-ink); }
.uzn-status__h { display: flex; align-items: center; gap: 12px; font-size: 24px; line-height: 1.3; }
.uzn-ico { flex: none; width: 28px; height: 28px; }
.uzn-status--ok { background: color-mix(in srgb, var(--sh-ok) 9%, var(--sh-card)); border-color: var(--sh-ok); }
.uzn-status--ok .uzn-status__h { color: var(--sh-ok); }
.uzn-status--bad { background: color-mix(in srgb, var(--sh-warn) 10%, var(--sh-card)); border-color: var(--sh-warn); }
.uzn-status--bad .uzn-status__h { color: var(--sh-warn); }
.uzn-status--warn { background: var(--sh-wait-soft, #fdf3dc); border-color: var(--sh-wait, #a86a00); }
.uzn-status--warn .uzn-status__h { color: var(--sh-wait, #a86a00); }
.uzn-status--info { background: var(--sh-soft); border-color: var(--sh-blue); }
.uzn-status--info .uzn-status__h { color: var(--sh-deep, var(--sh-blue)); font-size: 20px; }

.uzn-said { background: var(--sh-soft); border-radius: 8px; padding: 12px 14px; font-size: 14px; }

/* «Что произошло» */
.uzn-track__one { display: flex; align-items: flex-start; gap: 12px; }
.uzn-track__one i { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
	font-style: normal; font-size: 13px; font-weight: 700; color: #fff; background: var(--sh-muted); }
.uzn-track__one span { display: flex; flex-direction: column; gap: 2px; }
.uzn-track__one b { font-size: 14px; color: var(--sh-ink); }
.uzn-track__one em { font-style: normal; font-size: 12px; color: var(--sh-muted); }
.uzn-track__one--ok i { background: var(--sh-ok); }
.uzn-track__one--bad i { background: var(--sh-warn); }
.uzn-track__one--bad b { color: var(--sh-warn); }
.uzn-track__one--warn i { background: var(--sh-wait, #a86a00); }
.uzn-track__one--wait i { background: var(--sh-blue); }
.uzn-track__one--off i { background: var(--sh-line); color: var(--sh-muted); }
.uzn-track__one--off b { color: var(--sh-muted); }

/* Плашка в колонке заказа. */
.uzn-chip { border-radius: 8px; padding: 10px 12px; font-size: 13px; font-weight: 500; }
.uzn-chip--ok { background: color-mix(in srgb, var(--sh-ok) 12%, var(--sh-card)); color: var(--sh-ok); }
.uzn-chip--bad { background: color-mix(in srgb, var(--sh-warn) 12%, var(--sh-card)); color: var(--sh-warn); }
.uzn-chip--wait { background: var(--sh-wait-soft, #fdf3dc); color: var(--sh-wait, #a86a00); }
.uzn-chip--info { background: var(--sh-soft); color: var(--sh-deep, var(--sh-blue)); }

/* ── «Мои заказы» (E1): способ рассрочки и её стадия ── */
.uzn-way { font-size: 12px; font-weight: 500; padding: 3px 10px; border-radius: 999px; white-space: nowrap;
	background: color-mix(in srgb, var(--uzn-brand) 10%, var(--sh-card)); color: var(--uzn-brand); }
.uzn-st { font-size: 12px; font-weight: 500; padding: 3px 10px; border-radius: 999px; white-space: nowrap;
	background: var(--sh-bg); color: var(--sh-muted); }
.uzn-st--wait { background: var(--sh-wait-soft, #fdf3dc); color: var(--sh-wait, #a86a00); }
.uzn-st--ok { background: color-mix(in srgb, var(--sh-ok) 12%, var(--sh-card)); color: var(--sh-ok); }
.uzn-st--bad { background: color-mix(in srgb, var(--sh-warn) 12%, var(--sh-card)); color: var(--sh-warn); }
.uzn-hold { font-size: 12px; color: var(--sh-wait, #a86a00); white-space: nowrap; }

/* ── Страница заказа «не подписан» (E2) ── */
.uzn-acts--split { align-items: center; }
.uzn-holdchip { margin-left: auto; font-size: 13px; padding: 4px 12px; border-radius: 999px; white-space: nowrap;
	border: 1px solid var(--sh-wait, #a86a00); color: var(--sh-wait, #a86a00); background: var(--sh-card); }

/* «Резерва нет» (E2 401:942): строка под кнопками неподписанного договора. */
.uzn-noreserve { margin: 10px 0 0; font-size: 12px; color: var(--sh-wait, #b45309); }