/* ==========================================================================
   Betjoey.co — ручные стили поверх сгенерированных из макета.
   Сброс и служебные правила пишем через :where(), чтобы нулевая
   специфичность не перебивала классы из style.css.
   ========================================================================== */

:root {
  --bj-bg: #0b1117;
  --bj-surface: #131b23;
  --bj-line: #1b2530;
  --bj-accent: #a8ff00;
  --bj-text: #e8eef5;
  --bj-muted: #8a97a6;
  --bj-danger: #ff5a5a;
  --bj-ok: #4ade80;
  --bj-breakpoint: 1024px;
  color-scheme: dark;

  /* моушен: кривые и длительности — одним набором на весь сайт */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --dur-press: 140ms;
  --dur-hover: 150ms;
  --dur-modal: 250ms;
  --dur-drawer: 420ms;
  --dur-toast: 400ms;
  --dur-reveal: 500ms;
  --reveal-shift: 16px;
}

/* --- сброс ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

:where(html) { -webkit-text-size-adjust: 100%; }

:where(body) {
  margin: 0;
  background: var(--bj-bg);
  color: var(--bj-text);
  font-family: 'Inter', -apple-system, 'Segoe UI', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

:where(h1, h2, h3, h4, p, figure, blockquote) { margin: 0; }
:where(ul, ol) { margin: 0; padding: 0; list-style: none; }
:where(img, svg, video) { display: block; max-width: 100%; }
:where(a) { color: inherit; text-decoration: none; }
:where(button) {
  margin: 0; padding: 0; border: 0; background: none; color: inherit;
  font: inherit; text-align: inherit; cursor: pointer; -webkit-appearance: none; appearance: none;
}
:where(input, select, textarea) {
  margin: 0; border: 0; background: none; color: inherit; font: inherit;
  -webkit-appearance: none; appearance: none; border-radius: 0;
}
:where(select) { cursor: pointer; }
:where(textarea) { resize: vertical; }
:where(dialog) { border: 0; padding: 0; background: none; color: inherit; }

/* --- фокус ---------------------------------------------------------------- */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--bj-accent);
  outline-offset: 2px;
  border-radius: 4px;
}

.skip-link {
  position: absolute; left: 16px; top: 16px; z-index: 100;
  padding: 10px 16px; border-radius: 8px;
  background: var(--bj-accent); color: #0b1117; font-weight: 700;
  transform: translateY(-200%);
  transition: transform var(--dur-hover) var(--ease-out);
}
.skip-link:focus { transform: none; }

/* --- десктопное и мобильное дерево макета --------------------------------- */
.layout { position: relative; margin: 0 auto; }
.layout--mobile { display: none; width: 100%; }

@media (max-width: 1023.98px) {
  .layout--desktop { display: none; }
  .layout--mobile { display: block; }
}

/* мобильный макет резиновый между 390 и 1023 */
@media (max-width: 1023.98px) {
  .layout--mobile > * { width: 100%; max-width: 100%; }
}

/* --- модальные окна ------------------------------------------------------- */
dialog.modal {
  width: max-content;
  max-width: min(100vw - 8px, 1000px);
  max-height: calc(100dvh - 32px);
  margin: auto;
  overflow: visible;
}
dialog.modal::backdrop {
  background: var(--scrim, rgba(4, 8, 12, .72));
  backdrop-filter: blur(var(--scrim-blur, 4px));
  -webkit-backdrop-filter: blur(var(--scrim-blur, 4px));
  opacity: 0;
  transition:
    opacity var(--dur-modal) var(--ease-out),
    overlay var(--dur-modal) allow-discrete,
    display var(--dur-modal) allow-discrete;
}
dialog.modal[open]::backdrop { opacity: 1; }
@starting-style {
  dialog.modal[open]::backdrop { opacity: 0; }
}
dialog.modal > .layout {
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
/* Открытие и закрытие — на transition + @starting-style: обратный ход отрабатывает
   штатно, а не обрывается вместе с display:none. */
dialog.modal {
  opacity: 0;
  transform: scale(0.96) translateY(8px);
  transition:
    opacity var(--dur-modal) var(--ease-out),
    transform var(--dur-modal) var(--ease-out),
    overlay var(--dur-modal) allow-discrete,
    display var(--dur-modal) allow-discrete;
}
dialog.modal[open] { opacity: 1; transform: none; }
@starting-style {
  dialog.modal[open] { opacity: 0; transform: scale(0.96) translateY(8px); }
}

.is-dialog-open { overflow: hidden; }

/* мобильное меню и бет-слип — панели у края экрана, поэтому выезжают, а не масштабируются */
dialog.modal--menu, dialog.modal--betslip {
  max-width: 100vw;
  margin: 0 auto auto;
  width: 100%;
  opacity: 1;
  transition-duration: var(--dur-drawer);
  transition-timing-function: var(--ease-drawer);
}
dialog.modal--betslip { margin: auto auto 0; }

dialog.modal--menu { transform: translateY(-100%); }
dialog.modal--betslip { transform: translateY(100%); }
dialog.modal--menu[open], dialog.modal--betslip[open] { transform: none; }
@starting-style {
  dialog.modal--menu[open] { transform: translateY(-100%); }
  dialog.modal--betslip[open] { transform: translateY(100%); }
}

/* --- поля форм ------------------------------------------------------------ */
.field__control {
  width: 100%;
  min-width: 0;
  flex: 1 1 auto;
  background: none;
  overflow: visible;
  white-space: normal;
  text-overflow: clip;
}
.field__control::placeholder { color: var(--bj-muted); opacity: 1; }
.field__control:-webkit-autofill {
  -webkit-text-fill-color: var(--bj-text);
  -webkit-box-shadow: 0 0 0 1000px var(--bj-surface) inset;
  transition: background-color 100000s ease-in-out 0s;
}
.field__control--select { padding-right: 8px; cursor: pointer; }
.field__control--select option { background: var(--bj-surface); color: var(--bj-text); }
.field__control--textarea { height: 100%; resize: vertical; }

.field__error {
  margin: 6px 0 0;
  font-family: 'Inter', Arial, sans-serif;
  font-size: 12px;
  line-height: 16px;
  color: var(--bj-danger);
  /* сообщение проявляется, а не выскакивает: display в переходе — чтобы
     сработал и вход из display:none, и выход */
  transition:
    opacity 160ms var(--ease-out),
    transform 160ms var(--ease-out),
    display 160ms allow-discrete;
}
.field__error[hidden] { display: none; opacity: 0; transform: translateY(-2px); }
@starting-style {
  .field__error:not([hidden]) { opacity: 0; transform: translateY(-2px); }
}

.input-wrapper, .select-wrapper, .input, .textarea {
  transition: box-shadow var(--dur-hover) var(--ease-out);
}
[data-field].is-invalid .input-wrapper,
[data-field].is-invalid .select-wrapper,
[data-field].is-invalid .input,
[data-field].is-invalid .textarea {
  box-shadow: inset 0 0 0 1px var(--bj-danger);
}
[data-legals].is-invalid { outline: 1px solid var(--bj-danger); outline-offset: 6px; border-radius: 6px; }

.form__status {
  margin: 12px 0 0;
  font-family: 'Inter', Arial, sans-serif;
  font-size: 13px;
  line-height: 18px;
  color: var(--bj-muted);
}
.form__status[data-state="error"] { color: var(--bj-danger); }
.form__status[data-state="ok"] { color: var(--bj-ok); }
.form__status[hidden] { display: none; }

.honeypot { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; }

[type="submit"].is-busy { opacity: .6; pointer-events: none; }
:where(button):disabled { opacity: .55; cursor: not-allowed; }

/* чекбоксы соглашений: сохраняем размеры макета, добавляем состояние */
input[type="checkbox"].checkbox {
  cursor: pointer;
  display: grid;
  place-content: center;
}
input[type="checkbox"].checkbox::after {
  content: "";
  width: 9px; height: 5px;
  border: 2px solid var(--bj-accent);
  border-top: 0; border-right: 0;
  transform: rotate(-45deg) translate(1px, -1px) scale(0.6);
  opacity: 0;
  transition:
    opacity 120ms var(--ease-out),
    transform 120ms var(--ease-out);
}
input[type="checkbox"].checkbox:checked::after {
  opacity: 1;
  transform: rotate(-45deg) translate(1px, -1px) scale(1);
}

/* ссылка «Забыли пароль?» — в макете её нет, добавлена под форму входа */
.login-modal__forgot {
  align-self: center;
  margin: -8px 0 24px;
  font-family: 'Inter', Arial, sans-serif;
  font-size: 13px;
  line-height: 18px;
  color: var(--bj-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.login-modal__forgot:hover { color: var(--bj-accent); }

/* --- страница смены пароля ------------------------------------------------ */
.standalone {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 32px 16px;
  background: var(--bj-bg);
}
.standalone__notice {
  max-width: 420px;
  padding: 32px;
  border-radius: 20px;
  background: var(--bj-surface);
  box-shadow: inset 0 0 0 1px var(--bj-line);
  text-align: center;
}
.standalone__title {
  margin-bottom: 12px;
  font-family: 'Oswald', 'Arial Narrow', Arial, sans-serif;
  font-size: 28px;
  line-height: 34px;
  text-transform: uppercase;
}
.standalone__text { color: var(--bj-muted); font-size: 14px; line-height: 21px; }
.standalone__btn {
  margin-top: 24px; padding: 14px 24px; border-radius: 10px;
  background: var(--bj-accent); color: #0b1117;
  font-family: 'Oswald', Arial, sans-serif; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
}

/* --- тосты ---------------------------------------------------------------- */
.toasts {
  position: fixed;
  z-index: 60;
  right: 16px; bottom: 16px;
  display: flex; flex-direction: column; gap: 8px;
  max-width: min(420px, calc(100vw - 32px));
  pointer-events: none;
}
.toast {
  padding: 12px 16px;
  border-radius: 10px;
  background: var(--bj-surface);
  box-shadow: inset 0 0 0 1px var(--bj-line), 0 12px 28px rgba(0, 0, 0, .45);
  color: var(--bj-text);
  font-family: 'Inter', Arial, sans-serif;
  font-size: 14px; line-height: 20px;
  opacity: 0; transform: translateY(100%);
  transition:
    opacity var(--dur-toast) ease,
    transform var(--dur-toast) ease;
}
.toast.is-visible { opacity: 1; transform: none; }
.toast--ok { border-left: 3px solid var(--bj-accent); }
.toast--error { border-left: 3px solid var(--bj-danger); }

/* --- состояния навигации и интерактива ------------------------------------ */
a.is-current, [aria-current="page"] { color: var(--bj-accent); }
[role="tab"][aria-selected="true"] { color: var(--bj-accent); }
[data-action="odds"][aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--bj-accent); }
[data-auth="join"].is-account { pointer-events: none; }

:where(a, button, [role="tab"]) {
  transition:
    color var(--dur-hover) ease,
    background-color var(--dur-hover) ease,
    box-shadow var(--dur-hover) ease,
    text-decoration-color var(--dur-hover) ease,
    filter var(--dur-hover) ease;
}

/* ссылки внутри абзаца (телефон доверия, BetStop в футере) */
.text-link {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
}

/* Нажатие: кнопки и кликабельные карточки. scale тянет за собой подписи и иконки,
   поэтому читается как физическое нажатие. Ссылки-строки текста не трогаем. */
:where(button, a[data-action]):not([data-action="noop"]):active {
  transform: scale(0.97);
  transition: transform var(--dur-press) var(--ease-out);
}

/* Наведение — только для мыши: на тапе :hover залипает */
@media (hover: hover) and (pointer: fine) {
  nav a:hover,
  footer a:hover,
  .text-link:hover,
  [data-auth="login"]:hover,
  .login-modal__forgot:hover { color: var(--bj-accent); text-decoration-color: currentColor; }

  [type="submit"]:hover,
  [data-auth="join"]:not(.is-account):hover,
  [data-action="age-yes"]:hover,
  [data-action="cookie-save"]:hover,
  [data-action="cookie-accept"]:hover,
  [data-action="slip-place"]:hover,
  .standalone__btn:hover { filter: brightness(1.06); }

  [data-action="odds"]:hover,
  [data-action="race"]:hover,
  a[data-action]:hover { box-shadow: inset 0 0 0 1px var(--bj-accent); }
}

/* Переключатели cookie: в макете нарисовано только включённое состояние —
   выключенное показываем сдвигом ползунка (16px + 4px отступа = 20px хода) */
[data-role="switch"] { transition: background-color 160ms var(--ease-out); }
[data-role="switch"] > * { transition: transform 160ms var(--ease-out); }
[data-role="switch"][aria-checked="false"] { background-color: #26303c; }
[data-role="switch"][aria-checked="false"] > * { transform: translateX(-20px); }

/* горизонтальные скролл-треки макета: полоса прокрутки не должна съедать высоту,
   иначе секция становится выше, чем в макете */
.layout ::-webkit-scrollbar:horizontal { height: 0; }
[style*="overflow-x"], .layout [class*="track"] { scrollbar-width: thin; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #223040; border-radius: 8px; }
::-webkit-scrollbar-track { background: transparent; }

/* --- появление секций при скролле ------------------------------------------
   Класс на <html> ставит JS: без него ничего не прячется, поэтому при
   отключённом JavaScript страница остаётся видимой.                          */
.has-reveal [data-reveal] {
  opacity: 0;
  transform: translateY(var(--reveal-shift));
  transition:
    opacity var(--dur-reveal) var(--ease-out),
    transform var(--dur-reveal) var(--ease-out);
  transition-delay: calc(var(--stagger, 0) * 45ms);
}
.has-reveal [data-reveal].is-revealed { opacity: 1; transform: none; }

/* Меньше движения — не значит «совсем без анимации»: оставляем проявление
   и смену цвета, убираем перемещения и масштабирование. */
@media (prefers-reduced-motion: reduce) {
  :root { --reveal-shift: 0px; --dur-reveal: 250ms; --dur-drawer: 200ms; }
  dialog.modal,
  dialog.modal--menu,
  dialog.modal--betslip,
  .toast,
  :where(button, a[data-action]):active { transform: none !important; }
  .has-reveal [data-reveal] { transition-delay: 0ms; }
  /* положение ползунка и галочки — это состояние, а не украшение:
     оставляем их на месте, снимаем только само движение */
  [data-role="switch"] > *,
  input[type="checkbox"].checkbox::after { transition-duration: 1ms; }
  input[type="checkbox"].checkbox::after { transform: rotate(-45deg) translate(1px, -1px) scale(1); }
  * { scroll-behavior: auto !important; }
}

@media print {
  dialog.modal, .toasts, .skip-link { display: none !important; }
  .has-reveal [data-reveal] { opacity: 1 !important; transform: none !important; }
}