/*
 * /order — 15 вариантов дизайна (v02–v15 используют эти стили, v01 — брендовый CSS).
 * ВСЁ на палитровых переменных: один файл обслуживает все бренды на шаблоне.
 * Классы нейтральные (.ov-*), без брендового префикса.
 */

/* ── База ─────────────────────────────────────────────── */
.ov-main { padding: 40px 16px 72px; }
.ov-wrap { max-width: 880px; margin: 0 auto; }
.ov-wrap--narrow { max-width: 640px; }
.ov-h1 { font-family: var(--font-display); font-size: clamp(26px, 4vw, 40px); line-height: 1.15; color: var(--color-text); margin: 0 0 10px; }
.ov-h1 .ov-accent { color: var(--color-button); }
.ov-sub { color: var(--color-text-muted); font-size: 16px; line-height: 1.55; margin: 0 0 28px; }
.ov-eyebrow { display: inline-block; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-text-muted); margin-bottom: 10px; }
.ov-sum { font-family: var(--font-display); color: var(--color-text); font-size: clamp(40px, 7vw, 64px); line-height: 1; letter-spacing: -0.01em; }
.ov-days { color: var(--color-text-muted); font-size: 16px; }
.ov-days b { color: var(--color-text); }

/* CTA */
.ov-cta { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; box-sizing: border-box; padding: 18px 28px; border-radius: 14px; background: var(--color-button); color: var(--color-button_text); font-size: 18px; font-weight: 700; text-decoration: none; transition: background .15s ease, transform .12s ease; }
.ov-cta:hover { background: var(--color-button-hover); transform: translateY(-1px); }
.ov-cta--inline { width: auto; display: inline-flex; }

/* Таймер */
.ov-timer { display: inline-flex; align-items: center; gap: 8px; color: var(--color-text-muted); font-size: 14px; }
.ov-timer b { color: var(--color-button); font-variant-numeric: tabular-nums; font-size: 15px; }
.ov-timer svg { flex: none; opacity: .75; }

/* Чеки-галки */
.ov-checks { display: flex; flex-wrap: wrap; gap: 10px 18px; padding: 0; margin: 0; list-style: none; }
.ov-checks li { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; color: var(--color-text); }
.ov-checks svg { color: var(--color-button); flex: none; }

/* Кнопка «Изменить» + слайдеры */
.ov-edit { display: inline-flex; align-items: center; gap: 6px; background: none; border: 1px solid var(--color-line); border-radius: 999px; padding: 6px 14px; font-size: 13px; color: var(--color-text-muted); cursor: pointer; transition: border-color .15s, color .15s; }
.ov-edit:hover, .ov-edit.is-open { color: var(--color-button); border-color: var(--color-button); }
.ov-sliders { margin-top: 18px; padding: 18px; border: 1px dashed var(--color-line); border-radius: 12px; display: grid; gap: 16px; }
.ov-sliders[hidden] { display: none; }
.ov-slrow { display: grid; gap: 8px; }
.ov-sllbl { display: flex; justify-content: space-between; font-size: 13px; color: var(--color-text-muted); }
.ov-sllbl b { color: var(--color-text); font-variant-numeric: tabular-nums; }
.ov-range { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 999px; background: var(--color-line); outline: none; }
.ov-range::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%; background: var(--color-button); border: 3px solid var(--color-page-bg); box-shadow: 0 1px 4px rgba(0,0,0,.25); cursor: pointer; }
.ov-range::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--color-button); border: 3px solid var(--color-page-bg); cursor: pointer; }

/* Карточка-базис */
.ov-card { background: var(--color-blur); border: 1px solid var(--color-line); border-radius: 18px; padding: 28px; box-shadow: 0 10px 30px rgba(0,0,0,.06); }

/* ── v02 Сплит-квитанция ─────────────────────────────── */
.ov2-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 32px; align-items: start; }
.ov2-receipt { position: relative; }
.ov2-receipt::before { content: ""; position: absolute; left: 18px; right: 18px; top: -7px; height: 14px; background: radial-gradient(circle at 7px 7px, var(--color-page-bg) 5px, transparent 6px) 0 0/22px 14px repeat-x; }
.ov2-rrow { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px dashed var(--color-line); font-size: 15px; color: var(--color-text); }
.ov2-rrow:last-of-type { border-bottom: 0; }
.ov2-rrow .k { color: var(--color-text-muted); }
.ov2-rrow .v { font-weight: 700; font-variant-numeric: tabular-nums; }
.ov2-total { display: flex; justify-content: space-between; align-items: baseline; margin: 8px 0 4px; padding-top: 14px; border-top: 2px solid var(--color-text); }
.ov2-total .ov-sum { font-size: clamp(28px, 4vw, 40px); }
@media (max-width: 760px) { .ov2-grid { grid-template-columns: 1fr; } }

/* ── v03 Талон ───────────────────────────────────────── */
.ov3-ticket { display: grid; grid-template-columns: 1fr 200px; border-radius: 18px; overflow: hidden; box-shadow: 0 14px 36px rgba(0,0,0,.16); }
.ov3-left { background: linear-gradient(135deg, var(--color-back), var(--color-hero-end)); color: var(--color-text-on-dark); padding: 34px 30px; }
.ov3-left .ov-eyebrow, .ov3-left .ov-days { color: var(--color-text-on-dark); opacity: .7; }
.ov3-left .ov-sum { color: var(--color-text-on-dark); }
.ov3-left .ov-days b { color: var(--color-back2); }
.ov3-stub { background: var(--color-blur); border-left: 2px dashed var(--color-line); padding: 26px 20px; display: flex; flex-direction: column; justify-content: space-between; gap: 14px; text-align: center; }
.ov3-stub .no { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--color-text-muted); }
.ov3-stub .id { font-family: var(--font-display); font-size: 22px; color: var(--color-text); }
.ov3-barcode { height: 44px; background: repeating-linear-gradient(90deg, var(--color-text) 0 2px, transparent 2px 5px, var(--color-text) 5px 8px, transparent 8px 10px, var(--color-text) 10px 11px, transparent 11px 15px); opacity: .8; border-radius: 3px; }
@media (max-width: 640px) { .ov3-ticket { grid-template-columns: 1fr; } .ov3-stub { border-left: 0; border-top: 2px dashed var(--color-line); } }

/* ── v04 Минимал ─────────────────────────────────────── */
.ov4 { text-align: center; padding-top: 26px; }
.ov4 .ov-sum { font-size: clamp(56px, 10vw, 96px); }
.ov4-line { width: 72px; height: 3px; background: var(--color-button); margin: 26px auto; border-radius: 2px; }
.ov4 .ov-cta { max-width: 380px; margin: 26px auto 0; border-radius: 999px; }
.ov4 .ov-timer { margin-top: 18px; justify-content: center; }

/* ── v05 Степпер ─────────────────────────────────────── */
.ov5-steps { display: flex; align-items: center; gap: 0; margin-bottom: 34px; }
.ov5-step { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--color-text-muted); white-space: nowrap; }
.ov5-step .dot { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; background: var(--color-line); color: var(--color-text); flex: none; }
.ov5-step.is-done .dot { background: var(--color-button); color: var(--color-button_text); }
.ov5-step.is-done { color: var(--color-text); font-weight: 600; }
.ov5-bar { flex: 1; height: 2px; background: var(--color-line); margin: 0 12px; min-width: 24px; }
.ov5-bar.is-done { background: var(--color-button); }
@media (max-width: 620px) { .ov5-step span.lbl { display: none; } }

/* ── v06 Терминал ────────────────────────────────────── */
.ov6-screen { background: var(--color-back); border-radius: 16px; padding: 30px 28px; color: var(--color-text-on-dark); font-family: 'IBM Plex Mono', 'JetBrains Mono', 'Courier New', monospace; box-shadow: 0 16px 40px rgba(0,0,0,.3); }
.ov6-row { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px dashed rgba(255,255,255,.14); font-size: 14px; }
.ov6-row .k { opacity: .6; }
.ov6-sum { font-size: clamp(34px, 6vw, 54px); font-weight: 700; margin: 18px 0 4px; color: var(--color-back2); }
.ov6-cursor { display: inline-block; width: 10px; height: 1.1em; background: var(--color-back2); vertical-align: text-bottom; margin-left: 6px; animation: ov6blink 1s steps(1) infinite; }
@keyframes ov6blink { 50% { opacity: 0; } }
.ov6-ok { color: #7BD88F; }

/* ── v07 Чат ─────────────────────────────────────────── */
.ov7-chat { display: grid; gap: 14px; }
.ov7-msg { display: flex; gap: 12px; align-items: flex-end; max-width: 85%; }
.ov7-ava { width: 40px; height: 40px; border-radius: 50%; overflow: hidden; flex: none; background: var(--color-logo-bg); }
.ov7-ava img { width: 100%; height: 100%; object-fit: cover; }
.ov7-bubble { background: var(--color-blur); border: 1px solid var(--color-line); border-radius: 16px 16px 16px 4px; padding: 14px 18px; font-size: 15px; color: var(--color-text); line-height: 1.5; }
.ov7-bubble .big { font-family: var(--font-display); font-size: clamp(26px, 4vw, 36px); display: block; margin-top: 4px; }
.ov7-name { font-size: 12px; color: var(--color-text-muted); margin: 0 0 4px 52px; }
.ov7-typing { display: inline-flex; gap: 4px; padding: 12px 16px; }
.ov7-typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--color-text-muted); animation: ov7t 1.2s infinite; }
.ov7-typing i:nth-child(2) { animation-delay: .2s; } .ov7-typing i:nth-child(3) { animation-delay: .4s; }
@keyframes ov7t { 0%,60%,100% { transform: none; opacity: .4; } 30% { transform: translateY(-4px); opacity: 1; } }

/* ── v08 Дашборд ─────────────────────────────────────── */
.ov8-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 22px; }
.ov8-tile { background: var(--color-blur); border: 1px solid var(--color-line); border-radius: 14px; padding: 18px; }
.ov8-tile .lbl { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--color-text-muted); margin-bottom: 8px; }
.ov8-tile .val { font-family: var(--font-display); font-size: clamp(18px, 2.6vw, 26px); color: var(--color-text); font-variant-numeric: tabular-nums; }
.ov8-tile--hot .val { color: var(--color-button); }
@media (max-width: 720px) { .ov8-grid { grid-template-columns: repeat(2, 1fr); } }

/* ── v09 Градиент-хиро ───────────────────────────────── */
.ov9-hero { background: linear-gradient(150deg, var(--color-back) 0%, var(--color-hero-end) 100%); padding: 56px 16px 96px; text-align: center; }
.ov9-hero .ov-h1, .ov9-hero .ov-sub { color: var(--color-text-on-dark); }
.ov9-hero .ov-sub { opacity: .75; }
.ov9-card { margin: -60px auto 0; position: relative; z-index: 2; }

/* ── v10 Чек-лист сбоку ──────────────────────────────── */
.ov10-grid { display: grid; grid-template-columns: 300px 1fr; gap: 34px; align-items: start; }
.ov10-list { display: grid; gap: 0; }
.ov10-item { display: flex; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--color-line); font-size: 15px; color: var(--color-text); align-items: center; }
.ov10-item svg { color: var(--color-button); flex: none; }
.ov10-item .sub { display: block; font-size: 12.5px; color: var(--color-text-muted); }
@media (max-width: 720px) { .ov10-grid { grid-template-columns: 1fr; } }

/* ── v11 Штамп ───────────────────────────────────────── */
.ov11-letter { position: relative; overflow: hidden; }
.ov11-stamp { position: absolute; top: 22px; right: 18px; transform: rotate(-9deg); border: 3px solid var(--color-button); color: var(--color-button); border-radius: 8px; padding: 6px 14px; font-family: var(--font-display); font-size: 15px; letter-spacing: .18em; text-transform: uppercase; opacity: .85; pointer-events: none; }
.ov11-sign { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--color-line); display: flex; justify-content: space-between; align-items: center; font-size: 13.5px; color: var(--color-text-muted); }

/* ── v12 Таймлайн ────────────────────────────────────── */
.ov12 { position: relative; padding-left: 34px; }
.ov12::before { content: ""; position: absolute; left: 11px; top: 8px; bottom: 8px; width: 2px; background: var(--color-line); }
.ov12-node { position: relative; padding: 0 0 26px; }
.ov12-node::before { content: ""; position: absolute; left: -30px; top: 4px; width: 14px; height: 14px; border-radius: 50%; background: var(--color-button); box-shadow: 0 0 0 4px var(--color-page-bg); }
.ov12-node.is-muted::before { background: var(--color-line); }
.ov12-node h3 { margin: 0 0 4px; font-size: 16px; color: var(--color-text); }
.ov12-node p { margin: 0; font-size: 14px; color: var(--color-text-muted); }

/* ── v13 Пластиковая карта ───────────────────────────── */
.ov13-card { aspect-ratio: 1.586; max-width: 460px; margin: 0 auto 26px; border-radius: 22px; background: linear-gradient(120deg, var(--color-back), var(--color-hero-end) 60%, var(--color-back)); color: var(--color-text-on-dark); padding: 26px 28px; display: flex; flex-direction: column; justify-content: space-between; box-shadow: 0 22px 50px rgba(0,0,0,.3); }
.ov13-chip { width: 46px; height: 34px; border-radius: 7px; background: linear-gradient(135deg, var(--color-back2), var(--color-button2-hover, var(--color-back2))); }
.ov13-top { display: flex; justify-content: space-between; align-items: center; }
.ov13-brand { font-family: var(--font-brand); font-size: 17px; }
.ov13-num { font-family: 'IBM Plex Mono', monospace; letter-spacing: .14em; font-size: 17px; opacity: .85; }
.ov13-card .ov-sum { color: var(--color-text-on-dark); font-size: clamp(30px, 5vw, 44px); }
.ov13-bottom { display: flex; justify-content: space-between; align-items: flex-end; font-size: 12px; opacity: .75; }

/* ── v14 Full-dark ───────────────────────────────────── */
.ov14-band { background: var(--color-back); margin: -40px -16px 0; padding: 64px 16px 72px; }
.ov14-band .ov-h1 { color: var(--color-text-on-dark); font-size: clamp(30px, 5vw, 52px); }
.ov14-band .ov-sub, .ov14-band .ov-days, .ov14-band .ov-timer { color: var(--color-text-on-dark); opacity: .72; }
.ov14-band .ov-sum { color: var(--color-back2); font-size: clamp(52px, 9vw, 88px); text-shadow: 0 0 42px var(--color-glow); }
.ov14-band .ov-days b, .ov14-band .ov-timer b { color: var(--color-back2); }
.ov14-band .ov-checks li { color: var(--color-text-on-dark); }
.ov14-band .ov-checks svg { color: var(--color-back2); }
.ov14-band .ov-cta { box-shadow: 0 0 40px var(--color-glow); max-width: 460px; }
.ov14-band .ov-edit { color: var(--color-text-on-dark); border-color: rgba(255,255,255,.25); }
.ov14-band .ov-sliders { border-color: rgba(255,255,255,.22); }
.ov14-band .ov-sllbl, .ov14-band .ov-sllbl b { color: var(--color-text-on-dark); }
.ov14-band .ov-range { background: rgba(255,255,255,.2); }

/* ── v15 Счёт-таблица ────────────────────────────────── */
.ov15-table { width: 100%; border-collapse: collapse; margin: 4px 0 10px; }
.ov15-table td { padding: 12px 4px; border-bottom: 1px solid var(--color-line); font-size: 15px; color: var(--color-text); }
.ov15-table td:last-child { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.ov15-table td .mut { color: var(--color-text-muted); font-weight: 400; }
.ov15-table tr.total td { border-bottom: 0; border-top: 2px solid var(--color-text); font-family: var(--font-display); font-size: 19px; padding-top: 16px; }
.ov15-seal { width: 92px; height: 92px; border: 2.5px solid var(--color-button); border-radius: 50%; display: grid; place-items: center; text-align: center; color: var(--color-button); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; transform: rotate(-12deg); opacity: .8; line-height: 1.5; padding: 8px; box-sizing: border-box; }
.ov15-foot { display: flex; justify-content: space-between; align-items: center; gap: 18px; margin-top: 18px; }