/* app.css — ручные стили поверх сгенерированного style.css
   (сброс, переключение макетов, диалоги, состояния, тосты, валидация) */

:root {
  --bg: #141416;
  --bg-deep: #0f0f11;
  --surface: #1c1c1e;
  --surface-2: #1a1a1e;
  --line: #2c2c30;
  --line-2: #3a3a40;
  --accent: #e8533f;
  --accent-2: #ff6a55;
  --text: #f0ede8;
  --muted: #8a8a8e;
  --dim: #5c5c60;
  --gold: #ff9f0a;
  --danger: #ff5c5c;
  --font-ui: 'Inter', Arial, sans-serif;
}

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* ---------- сброс внутри сгенерированных деревьев (нулевая специфичность) ---------- */
:where(.vp, .ov) :where(*) {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  color: inherit;
  background: none;
  text-decoration: none;
  text-align: inherit;
  letter-spacing: inherit;
  -webkit-appearance: none;
  appearance: none;
}
:where(.vp, .ov) :where(a, button, input, select, textarea, svg, p, h1, h2, h3, div, label, form, section, header, footer, nav) { display: block; }
:where(.vp, .ov) :where(span) { display: inline; }
:where(.vp, .ov) :where(p, h1, h2, h3, span, label) > :where(a, span, button) { display: inline; }
:where(.vp, .ov) :where(a, button, select, label[data-check], label[data-file], [role="tab"], [role="switch"]) { cursor: pointer; }
:where(.vp, .ov) :where(button) { color: inherit; text-align: inherit; -webkit-tap-highlight-color: transparent; }
:where(.vp, .ov) :where(input, select, textarea) { width: 100%; min-width: 0; color: inherit; outline: none; border-radius: 0; }
:where(.vp, .ov) :where(input::placeholder, textarea::placeholder) { color: inherit; opacity: 1; }
:where(.vp, .ov) :where(input:-webkit-autofill) { -webkit-text-fill-color: var(--text); transition: background-color 9999s ease-out; }
:where(.vp, .ov) :where(p, h1, h2, h3, span, a, button) { text-wrap: initial; }
:where(.vp, .ov) :where(svg) { flex: none; }

/* инпуты, заменившие текстовые слои: занимают всю ширину обёртки */
.vp ._in, .ov ._in { flex: 1 1 0%; min-width: 0; height: auto; background: transparent; }
.vp textarea._in, .ov textarea._in { resize: none; height: 100%; min-height: 96px; align-self: stretch; }
.vp select._in, .ov select._in { padding-right: 8px; }
.vp select._in:invalid, .ov select._in:invalid { color: var(--muted); }
.vp select._in option, .ov select._in option { color: #111; background: #fff; }
.vp [data-role="stake"] { text-align: left; }
.vp .chevron-down, .ov .chevron-down { pointer-events: none; }
.vp input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }
.vp ._file, .ov ._file { display: none; }
.vp ._code, .ov ._code { width: 100%; height: 100%; text-align: center; font-weight: 700; font-size: 20px; line-height: 24px; color: var(--text); caret-color: var(--accent); }

/* чекбоксы: снятое состояние — тёмный квадрат, отмеченное — акцент с галочкой */
.ov input[type="checkbox"], .vp input[type="checkbox"] { flex: none; cursor: pointer; position: relative; }
.ov input[type="checkbox"]:not(:checked), .vp input[type="checkbox"]:not(:checked) { background: var(--surface) !important; box-shadow: inset 0 0 0 1px var(--line-2) !important; }
.ov input[type="checkbox"]:checked, .vp input[type="checkbox"]:checked {
  background-color: var(--accent) !important;
  box-shadow: inset 0 0 0 1px var(--accent) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.4 2.3 4.6-4.8' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-size: 12px 12px !important; background-position: center !important; background-repeat: no-repeat !important;
}
.ov input[type="checkbox"]:disabled:checked, .vp input[type="checkbox"]:disabled:checked { background-color: var(--line-2) !important; box-shadow: inset 0 0 0 1px var(--line) !important; cursor: default; }
.ov input[type="checkbox"]:disabled ~ *, .vp input[type="checkbox"]:disabled ~ * { cursor: default; }

/* переключатели (switch) */
.ov [role="switch"], .vp [role="switch"] { transition: background-color .18s ease; }
.ov [role="switch"][aria-checked="true"], .vp [role="switch"][aria-checked="true"] { justify-content: flex-end; background-color: var(--accent); }
.ov [role="switch"][aria-checked="false"], .vp [role="switch"][aria-checked="false"] { justify-content: flex-start; background-color: var(--line-2); }

/* ---------- переключение макетов ---------- */
.vp { width: 100%; }
.vp-m { display: none; }
.ov-m { display: none; }
@media (max-width: 1023px) {
  .vp-d { display: none; }
  .vp-m { display: block; }
  .ov-d { display: none; }
  .ov-m { display: block; }
}

/* фокус */
:where(.vp, .ov) :where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--accent-2); outline-offset: 2px; border-radius: 3px;
}
.skip-link { position: absolute; left: 8px; top: -48px; z-index: 1000; background: var(--accent); color: #fff; padding: 8px 12px; border-radius: 4px; font: 600 14px/1 var(--font-ui); }
.skip-link:focus { top: 8px; }

/* ---------- полировка: переходы, hover/active/focus, загрузка ---------- */
:where(.vp, .ov) :where(a, button, [role="tab"], [data-action], input, select, textarea, [data-field], [data-check]) { transition: color .16s ease, background-color .16s ease, box-shadow .16s ease, border-color .16s ease, opacity .16s ease, transform .12s ease; }
@media (hover: hover) {
  .vp a:hover, .ov a:hover, .vp button:hover, .ov button:hover { color: var(--text); }
  .vp a:hover > *, .ov a:hover > *, .vp button:hover > *, .ov button:hover > * { color: var(--text); }
  .vp [data-action="odds"]:hover, .vp [data-action="race"]:hover, .vp [data-action="race-no"]:hover, .vp [data-action="help-topic"]:hover, .vp [role="tab"][class*="pill"]:hover { box-shadow: inset 0 0 0 1px var(--accent) !important; }
  .vp [data-action="odds"][aria-pressed="true"]:hover, .vp .is-on:hover { filter: brightness(1.08); }
  .vp .join-button:hover, .ov .join-button:hover, .vp [data-action="slip-place"]:hover, .vp button[type="submit"]:hover, .ov [data-action="age-yes"]:hover, .ov [data-action="cookie-accept"]:hover, .vp [data-action="change-limit"]:hover { background-color: var(--accent-2) !important; }
  .vp .join-button:hover *, .vp [data-action="slip-place"]:hover *, .vp button[type="submit"]:hover * { color: #fff; }
  .vp [data-action="accordion"]:hover, .vp [data-action="accordion"]:hover * { color: var(--text); }
  .vp a[href][class*="row"]:hover, .vp a[href][class*="tool"]:hover, .ov nav a:hover { background-color: rgba(255,255,255,.025); }
  .vp [data-remove]:hover, .ov [data-remove]:hover { color: var(--accent-2) !important; transform: scale(1.25); }
}
.vp a:active, .vp button:active, .ov a:active, .ov button:active { transform: translateY(1px); }
.vp [data-action="odds"]:active, .vp [data-action="race"]:active { transform: scale(.97); }
/* поле ввода в фокусе: акцентная рамка на обёртке (собственный outline инпута внутри обёртки не нужен) */
.vp [data-field]:focus-within, .ov [data-field]:focus-within { box-shadow: inset 0 0 0 1px var(--accent) !important; }
.vp [data-field] :is(input, select, textarea):focus-visible, .ov [data-field] :is(input, select, textarea):focus-visible { outline: none; }
/* длинные вопросы FAQ: текст тянется, «+» не вытесняется за край */
.vp [data-action="accordion"] > :first-child { flex: 1 1 0% !important; width: auto !important; min-width: 0; white-space: normal !important; }
.vp [data-action="accordion"] > :last-child { flex: none; }
.vp [data-field]:focus-within, .vp label[data-check]:hover { color: var(--text); }
/* индикатор загрузки на кнопках */
.vp .is-loading, .ov .is-loading { position: relative; pointer-events: none; opacity: .85; }
.vp .is-loading > *, .ov .is-loading > * { visibility: hidden; }
.vp .is-loading::after, .ov .is-loading::after { content: ""; position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; border: 2px solid rgba(255,255,255,.35); border-top-color: #fff; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.vp button[disabled].is-loading, .ov button[disabled].is-loading { cursor: progress; }
/* аккордеоны: плавное раскрытие */
.vp ._accbody:not([hidden]), .ov ._accbody:not([hidden]) { animation: acc-in .22s ease; }
@keyframes acc-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
/* коэффициенты: галочка появляется мягко */
.vp [data-action="odds"] .check { transition: opacity .15s ease, transform .15s ease; }
.vp [data-action="odds"][aria-pressed="false"] .check { opacity: 0; transform: scale(.6); }
/* ожидающее изменение лимита */
.vp .limit-pending { margin-top: 10px; color: var(--gold); font: 500 12px/16px var(--font-ui); }
@media (prefers-reduced-motion: reduce) {
  :where(.vp, .ov) :where(*) { transition: none !important; animation: none !important; }
}

/* ---------- активные состояния ---------- */
/* табы: цвет/подчёркивание управляются aria-selected (структура табов в макете неоднородна) */
.vp [role="tab"] { position: relative; }
.vp [role="tab"][aria-selected="false"], .vp [role="tab"][aria-selected="false"] > * { color: var(--muted) !important; }
.vp [role="tab"][aria-selected="true"], .vp [role="tab"][aria-selected="true"] > * { color: var(--text) !important; }
.vp [role="tab"][aria-selected="true"] { font-weight: 700; }
.vp [role="tab"].was-on[aria-selected="false"], .vp [role="tab"].was-on[aria-selected="false"] > * { font-weight: 600; }
.vp [role="tab"][aria-selected="false"] > div:not(:has(*)) { opacity: 0; }
.vp [role="tab"][aria-selected="true"] > div:not(:has(*)) { opacity: 1; background-color: var(--accent) !important; }
.vp [role="tab"][aria-selected="true"]:not(:has(div))::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px; background: var(--accent); }
.vp [role="tab"].pill[aria-selected="true"]::after, .vp [role="tab"][class*="pill"][aria-selected="true"]::after { display: none; }
.vp [role="tab"][class*="pill"][aria-selected="true"] { background-color: var(--line-2) !important; box-shadow: inset 0 0 0 1px #000 !important; }
.vp [role="tab"][class*="pill"][aria-selected="false"] { background: none !important; box-shadow: inset 0 0 0 1px var(--line) !important; }

/* коэффициенты / карточки без известного «активного» скина */
.vp .no-skin.is-on { background: var(--accent) !important; box-shadow: inset 0 0 0 1px var(--accent) !important; }
.vp .no-skin.is-on * { color: #fff !important; }
.vp [data-action="odds"] .check { display: none; }
.vp [data-action="odds"][aria-pressed="true"] .check { display: block; }
.vp [data-action="odds"] .odds-price-row { gap: 0 !important; }
.vp [data-action="odds"][aria-pressed="true"] .odds-price-row { gap: 6px !important; }

/* навигация: текущая страница */
.vp header a[aria-current="page"], .ov nav a[aria-current="page"], .ov nav a[aria-current="page"] * { color: var(--text) !important; }

/* help centre: активная тема */
.vp [data-action="help-topic"] { text-align: left; }
.vp [data-action="help-topic"].no-skin[aria-current="true"] { background: var(--surface) !important; box-shadow: inset 2px 0 0 0 var(--accent) !important; color: var(--text) !important; }
.vp [data-action="help-topic"].no-skin[aria-current="true"] * { color: var(--text) !important; font-weight: 700; }

/* аккордеоны */
.vp ._accbody, .ov ._accbody { display: flex; flex-direction: column; align-self: stretch; width: 100%; }
.vp [data-accordion-body][hidden] { display: none !important; }
.vp .acc-links { display: flex; flex-direction: column; gap: 10px; padding: 0 0 12px; }
.vp .acc-links a { font: 400 13px/16px var(--font-ui); color: var(--muted); }
.vp .acc-links a:hover { color: var(--text); }
.vp .acc-answer { padding: 12px 0 16px; color: var(--muted); font: 400 14px/22px var(--font-ui); white-space: pre-wrap; }
.vp [data-action="accordion"] { text-align: left; }

/* липкая мобильная панель бет-слипа */
@media (max-width: 1023px) {
  .vp-m [data-slip="bar"] { position: fixed !important; left: 0 !important; right: 0 !important; bottom: 0 !important; top: auto !important; width: auto !important; z-index: 40; text-align: left; box-shadow: 0 -8px 24px -12px rgba(0,0,0,.8); }
  .vp-m [data-slip="bar"][data-empty="true"] [data-slippart="return"] { display: none; }
}

/* горизонтальные скролл-треки без полос прокрутки */
.vp [style*="overflow-x"], .vp .carousel-clip-container, .vp .selector-carousel, .vp .racing-scroll, .vp .sport-category-tabs, .vp .time-status-filters, .vp .queue-strip { scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.vp .carousel-clip-container::-webkit-scrollbar, .vp .selector-carousel::-webkit-scrollbar, .vp .sport-category-tabs::-webkit-scrollbar { display: none; }

/* пустые состояния / скрытие */
.vp [hidden], .ov [hidden] { display: none !important; }
.vp .slip-empty, .ov .slip-empty { padding: 14px 16px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--line); color: var(--muted); font: 400 13px/18px var(--font-ui); border-radius: 2px; }
.vp .slip-empty strong, .ov .slip-empty strong { display: block; color: var(--text); font-weight: 600; margin-bottom: 4px; }
.vp .empty-state { padding: 24px; border-radius: 2px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); color: var(--muted); font: 400 14px/20px var(--font-ui); }
.vp .empty-state a { color: var(--accent); font-weight: 600; }
.vp [data-slip-selection].is-new, .ov [data-slip-selection].is-new { animation: slip-in .25s ease; }
@keyframes slip-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.vp .slip-flash, .ov .slip-flash { animation: flash .5s ease; }
@keyframes flash { 0% { box-shadow: 0 0 0 0 rgba(232,83,63,.7); } 100% { box-shadow: 0 0 0 12px rgba(232,83,63,0); } }
.vp button[disabled], .ov button[disabled] { opacity: .55; cursor: not-allowed; filter: none; }

/* ошибки форм */
.ov .field-error, .vp .field-error { margin-top: 6px; color: var(--danger); font: 500 12px/16px var(--font-ui); }
.ov .is-invalid, .vp .is-invalid { box-shadow: inset 0 0 0 1px var(--danger) !important; }
.ov .form-message, .vp .form-message { padding: 14px 16px; border-radius: 2px; font: 400 13px/18px var(--font-ui); }
.ov .form-message.ok, .vp .form-message.ok { background: rgba(232,83,63,.12); color: var(--text); box-shadow: inset 0 0 0 1px var(--accent); }
.ov .form-message.err, .vp .form-message.err { background: rgba(255,92,92,.12); color: #ff9a9a; box-shadow: inset 0 0 0 1px var(--danger); }
.vp .file-name { color: var(--text) !important; }

/* редактирование лимита депозита (инлайн) */
.vp .limit-input { width: 140px; max-width: 45%; background: var(--surface) !important; box-shadow: inset 0 0 0 1px var(--line-2); border-radius: 2px; padding: 4px 10px; font: 800 28px/34px var(--font-ui); color: var(--text); }
.vp .limit-select { width: auto; background: var(--surface) !important; box-shadow: inset 0 0 0 1px var(--line-2); border-radius: 2px; padding: 4px 26px 4px 10px; font: 400 14px/18px var(--font-ui); color: var(--text); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 5l3 3 3-3' fill='none' stroke='%238a8a8e' stroke-width='2'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right 8px center !important; background-size: 12px !important; }

/* ---------- диалоги ---------- */
dialog.ov { padding: 0; border: 0; background: transparent; color: var(--text); max-width: none; max-height: none; overflow: visible; margin: auto; }
dialog.ov:not([open]) { display: none; }
dialog.ov::backdrop { background: var(--scrim, rgba(0,0,0,.7)); }
dialog.ov > div { max-height: 100dvh; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; }
dialog.ov > div > * { margin: 0 auto; }
dialog.ov.ov-cookies, dialog.ov.ov-betslip { margin: auto 0 0 0; width: 100vw; max-width: 100vw; }
dialog.ov.ov-cookies > div > *, dialog.ov.ov-betslip > div > * { width: 100% !important; max-width: none !important; }
dialog.ov.ov-menu { margin: 0; width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; }
dialog.ov.ov-menu > div { height: 100%; }
dialog.ov.ov-menu > div > * { min-height: 100%; }
dialog.ov.ov-betslip .bottom-sheet { border-radius: 12px 12px 0 0; }
@media (max-width: 1023px) {
  dialog.ov.ov-age-gate { width: calc(100vw - 24px); max-width: calc(100vw - 24px); }
}
dialog.ov[open] { animation: dlg-in .22s ease-out; }
dialog.ov.ov-cookies[open], dialog.ov.ov-betslip[open] { animation: sheet-in .25s ease-out; }
@keyframes dlg-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes sheet-in { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { dialog.ov[open] { animation: none !important; } }
body.has-modal { overflow: hidden; }

/* ---------- тосты ---------- */
.toast-region { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 2000; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; width: min(420px, calc(100vw - 32px)); }
@media (max-width: 1023px) { .toast-region { bottom: 72px; } }
.toast { pointer-events: auto; width: 100%; padding: 12px 16px; border-radius: 2px; background: var(--surface); color: var(--text); box-shadow: inset 0 0 0 1px var(--line-2), 0 14px 28px -10px rgba(0,0,0,.7); font: 400 13px/18px var(--font-ui); animation: toast-in .25s ease; display: flex; gap: 12px; align-items: flex-start; }
.toast.ok { box-shadow: inset 0 0 0 1px var(--accent), 0 14px 28px -10px rgba(0,0,0,.7); }
.toast.err { box-shadow: inset 0 0 0 1px var(--danger), 0 14px 28px -10px rgba(0,0,0,.7); }
.toast strong { font-weight: 800; display: block; margin-bottom: 2px; text-transform: uppercase; letter-spacing: .04em; font-size: 11px; line-height: 14px; color: var(--accent); }
.toast.out { animation: toast-out .25s ease forwards; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes toast-out { to { opacity: 0; transform: translateY(8px); } }

/* защита от горизонтального переполнения на промежуточных ширинах */
.vp-d > * { min-width: 0; }

/* ---------- промежуточные ширины (макет: 1440 и 390) ---------- */
@media (max-width: 1439px) { .vp-d ._nw { white-space: pre-wrap !important; } }
@media (max-width: 389px) {
  .vp-m ._nw { white-space: pre-wrap !important; }
  /* узкие телефоны (320–389): шапка ужимается, подпись 18+ уходит в верхнюю полосу */
  .vp-m .masthead { gap: 8px !important; padding-left: 12px !important; padding-right: 12px !important; }
  .vp-m .masthead > * { flex: 0 1 auto !important; min-width: 0; }
  .vp-m .masthead .age-restriction { display: none; }
  .vp-m .masthead h1, .vp-m .masthead > a:first-child, .vp-m .masthead > p:first-child, .vp-m .masthead > div:first-child > :first-child { font-size: 18px !important; line-height: 22px !important; }
  .vp-m .masthead-right { width: auto !important; gap: 8px !important; }
  .vp-m .responsible-strip > * { padding-left: 12px !important; padding-right: 12px !important; gap: 6px !important; }
  .vp-m .responsible-strip .left { flex: 1 1 auto !important; min-width: 0; width: auto !important; }
  .vp-m .responsible-strip .left > p:last-child { flex: 1 1 0% !important; width: auto !important; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap !important; }
  .vp-m .responsible-strip .row1 > a:last-child, .vp-m .responsible-strip .row1 > p:last-child { flex: none; }
}
/* узкий десктоп: кнопки коэффициентов с меньшими внутренними отступами, чтобы подписи не обрезались */
@media (min-width: 1024px) and (max-width: 1300px) {
  .vp-d [data-action="odds"] { padding-left: 6px !important; padding-right: 6px !important; }
  .vp-d [data-action="odds"] > p:first-child { width: 100% !important; }
}
/* шапка на 1024–1300: группы ссылок ужимаются, не наезжая друг на друга */
@media (min-width: 1024px) and (max-width: 1300px) {
  .vp-d .masthead { gap: 16px !important; padding-left: 32px !important; padding-right: 32px !important; }
  .vp-d .masthead > * { flex: 0 1 auto !important; }
  .vp-d .masthead-center, .vp-d .masthead-right { width: auto !important; gap: 14px !important; }
  .vp-d .masthead-right > .divider { display: none; }
  .vp-d .masthead > h1, .vp-d .masthead > p:first-child, .vp-d .masthead > a:first-child { font-size: 26px !important; line-height: 32px !important; }
  .vp-d .login-button, .vp-d .join-button { width: auto !important; padding-left: 16px !important; padding-right: 16px !important; }
}
/* узкий десктоп: названия событий в строках рынков переносятся на две строки вместо обрезания */
@media (min-width: 1024px) and (max-width: 1300px) {
  .vp-d [data-row] > p[class*="_t"], .vp-d [data-row] > h3 { white-space: normal !important; display: -webkit-box !important; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
}
@media (min-width: 1024px) and (max-width: 1180px) {
  .vp-d .masthead > .age-restriction { display: none; }
  .vp-d .masthead-center, .vp-d .masthead-right { gap: 10px !important; }
}