/* ============================================================================
   components.css — то, что повторяется: кнопки, бейджи, поля, карточки,
   переключатели, кикеры. Компонентов Figma в макете нет, набор выведен по
   повторяемости (всё, что встречается 3+ раз).

   Обводки из макета стоят strokeAlign: INSIDE — переносятся как
   box-shadow: inset, а не border: border добавил бы к габариту, и блок
   вместе со всем, что ниже, уехал бы на 2px.
   ========================================================================= */

/* ── Логотип: в макете это текст, а не картинка ─────────────────────────── */

.logo {
  display: inline-flex;
  align-items: center;
  gap: var(--space-6);
  font-family: var(--font-display);
  text-transform: uppercase;
  color: var(--color-ink);
}

.logo__word {
  font-size: var(--fs-h6);
  line-height: var(--lh-h6);
}

.logo__tld {
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  background: var(--color-brand);
  color: var(--color-surface);
  font-size: var(--fs-label-xs);
  line-height: var(--lh-label-xs);
}

.logo--light { color: var(--color-surface); }

/* ── Кнопки ─────────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  padding: 12px 24px;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-black);
  line-height: 18px;
  text-align: center;
  /* В макете подписи кнопок набраны капсом. Текст в разметке пишем обычным
     регистром: скринридер иначе читает КАПС по буквам. */
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease), translate var(--dur-fast) var(--ease);
}

.btn--brand {
  background: var(--color-brand);
  color: var(--color-surface);
  box-shadow: inset 0 0 0 1.5px var(--color-ink);
}

.btn--brand:hover { background: var(--color-brand-hover); }
.btn--brand:active { background: var(--color-brand-active); translate: 0 1px; }

.btn--ink {
  background: var(--color-ink);
  color: var(--color-surface);
  box-shadow: inset 0 0 0 1.5px var(--color-ink);
}

.btn--ink:hover { background: var(--color-ink-hover); }
.btn--ink:active { translate: 0 1px; }

.btn--outline {
  background: transparent;
  color: var(--color-ink);
  box-shadow: inset 0 0 0 1.5px var(--color-ink);
}

.btn--outline:hover { background: var(--color-ink); color: var(--color-surface); }
.btn--outline:active { translate: 0 1px; }

.btn--light {
  background: var(--color-surface);
  color: var(--color-ink);
  box-shadow: inset 0 0 0 1.5px var(--color-ink);
}

.btn--light:hover { background: var(--color-surface-hover); }

.btn--sm {
  padding: 10px 20px;
  font-size: var(--fs-body-sm);
  line-height: 17px;
}

.btn--block { display: flex; width: 100%; }

.btn[disabled],
.btn.is-disabled {
  background: var(--color-disabled-bg);
  color: var(--color-disabled-text);
  box-shadow: inset 0 0 0 1.5px var(--color-line-soft);
  cursor: not-allowed;
}

/* ── Бейджи ─────────────────────────────────────────────────────────────── */

.badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  font-weight: var(--fw-black);
  line-height: var(--lh-caption);
  text-transform: uppercase;
  white-space: nowrap;
}

.badge--brand { background: var(--color-brand); color: var(--color-surface); }
.badge--ink { background: var(--color-ink); color: var(--color-surface); }
.badge--sand { background: var(--color-paper); color: var(--color-ink); }

/* ── Кикеры: узкие подписи разделов (Archivo Narrow 700) ───────────────── */

.kicker {
  font-family: var(--font-narrow);
  font-weight: var(--fw-bold);
  font-size: var(--fs-kicker);
  line-height: var(--lh-kicker);
  text-transform: uppercase;
}

.kicker--brand { color: var(--color-brand-text); }
.kicker--sm { font-size: var(--fs-kicker-sm); line-height: var(--lh-kicker-sm); }

/* Кикер-плашка «⚡ ONLINE BETTING AUSTRALIA» */
.kicker-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-pill);
  background: var(--color-ink);
  color: var(--color-surface);
  font-family: var(--font-body);
  font-size: var(--fs-label-xs);
  font-weight: var(--fw-black);
  line-height: var(--lh-label-xs);
  text-transform: uppercase;
}

.kicker-pill--light { background: var(--color-surface); color: var(--color-ink); }

/* ── Ссылки ─────────────────────────────────────────────────────────────── */

.link-underline {
  color: var(--color-ink);
  font-weight: var(--fw-bold);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.link-underline:hover { color: var(--color-brand-text); }

.link-arrow {
  color: var(--color-brand-text);
  font-weight: var(--fw-extrabold);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body-sm);
  text-transform: uppercase;
}

.link-arrow:hover { color: var(--color-brand-active); }

/* ── Поля формы ─────────────────────────────────────────────────────────── */

.field { display: flex; flex-direction: column; gap: var(--space-3); }

.field__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
}

/* Явно и специфичнее, чем контейнерное правило: .field label{display:block}
   ломало бы вложенные компоненты вроде .switch. */
.field > .field__label {
  display: block;
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-bold);
  line-height: var(--lh-body-sm);
}

/* 4:462 — в макете «TOPIC *» набрано одним чернильным текстом: звёздочка
   не выделена цветом. Обязательность несёт сама звёздочка и aria-required. */
.field__req { color: inherit; }

.field__aux {
  font-size: var(--fs-label-xs);
  font-weight: var(--fw-bold);
  color: var(--color-brand-text);
  cursor: pointer;
}

.field__control { position: relative; display: flex; align-items: center; }

.field__input {
  width: 100%;
  padding: 14px 16px;
  border: 0;
  border-radius: var(--radius-lg);
  background: var(--color-white);
  box-shadow: inset 0 0 0 1.5px var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 20px;
  color: var(--color-ink);
  transition: box-shadow var(--dur) var(--ease);
}

.field__input::placeholder { color: var(--color-muted); }

.field__input:hover { box-shadow: inset 0 0 0 1.5px var(--color-ink-hover); }

.field__input:focus-visible {
  outline: var(--focus-outline);
  outline-offset: 2px;
  box-shadow: inset 0 0 0 2px var(--color-ink);
}

.field__input--select {
  appearance: none;
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6L8 10L12 6' stroke='%23120e0d' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 16px 16px;
  cursor: pointer;
}

.field__input.is-invalid,
.field__input[aria-invalid="true"] {
  box-shadow: inset 0 0 0 2px var(--color-brand);
}

.field__reveal {
  position: absolute;
  right: 16px;
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  font-weight: var(--fw-extrabold);
  line-height: var(--lh-caption);
  text-transform: uppercase;
  color: var(--color-muted);
  cursor: pointer;
}

/* Кнопка уже absolute — своя система координат для зоны есть.
   44×44 добираем псевдоэлементом: паддинг растянул бы поле. */
.field__reveal::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  width: 100%;
  height: 100%;
  min-width: 44px;
  min-height: 44px;
}

.field__reveal:hover { color: var(--color-ink); }

.field__note {
  font-size: var(--fs-label-xs);
  line-height: 16px;
  color: var(--color-muted);
}

.field__error {
  font-size: var(--fs-label-xs);
  font-weight: var(--fw-bold);
  line-height: 16px;
  color: var(--color-brand-text);
}

.field-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: var(--space-8);
}

@media (max-width: 767px) {
  .field-row { grid-template-columns: 1fr; }
}

.form-note {
  padding: var(--space-6) var(--space-8);
  border-radius: var(--radius-lg);
  font-size: var(--fs-body-sm);
  line-height: 18px;
}

.form-note--ok {
  background: var(--color-success-bg);
  color: var(--color-success-deep);
}

.form-note--error {
  background: color-mix(in srgb, var(--color-brand) 8%, transparent);
  color: var(--color-brand-text);
}

/* Чекбокс с текстом */
.check {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  font-size: var(--fs-caption);
  line-height: 14px;
}

.check input {
  flex: none;
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--color-brand);
  cursor: pointer;
}

/* ── Переключатель (cookie-категории) ───────────────────────────────────── */

.switch {
  position: relative;
  flex: none;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}

.switch input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.switch__track {
  position: relative;
  display: block;
  width: 52px;
  height: 28px;
  border-radius: var(--radius-pill);
  background: var(--color-muted);
  transition: background var(--dur) var(--ease);
}

.switch__track::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--color-white);
  transition: translate var(--dur) var(--ease);
}

.switch input:checked + .switch__track { background: var(--color-brand); }
.switch input:checked + .switch__track::after { translate: 24px 0; }

.switch input:focus-visible + .switch__track { box-shadow: var(--focus-ring); }

.switch--locked { cursor: not-allowed; }
.switch--locked .switch__track { opacity: .85; }

/* ── Карточки ───────────────────────────────────────────────────────────── */

.card {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  padding: var(--space-9);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: inset 0 0 0 1px var(--color-ink);
}

.card__title {
  font-family: var(--font-display);
  font-size: var(--fs-label-lg);
  line-height: var(--lh-label-lg);
  text-transform: uppercase;
}

.card__text {
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body-sm);
  color: var(--color-muted);
}

.card--ink { background: var(--color-ink); color: var(--color-surface); }
.card--ink .card__text { color: var(--color-paper); }

.card--brand { background: var(--color-brand); color: var(--color-surface); }
.card--flame { background: var(--color-flame); color: var(--color-ink); }

/* ── Табы ───────────────────────────────────────────────────────────────── */

.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.tab {
  padding: var(--space-3) var(--space-8);
  border-radius: var(--radius-pill);
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-extrabold);
  line-height: var(--lh-body-sm);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}

.tab:hover { background: color-mix(in srgb, var(--color-ink) 8%, transparent); }

.tab.is-active {
  background: var(--color-ink);
  color: var(--color-surface);
}

.tab--accent.is-active { background: var(--color-brand); }

/* ── Кнопка «наверх» ────────────────────────────────────────────────────── */

.to-top {
  position: fixed;
  right: var(--space-9);
  bottom: var(--space-9);
  z-index: var(--z-sticky);
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--color-ink);
  color: var(--color-surface);
  opacity: 0;
  visibility: hidden;
  translate: 0 8px;
  transition: opacity var(--dur) var(--ease), translate var(--dur) var(--ease),
              visibility var(--dur) var(--ease), background var(--dur) var(--ease);
}

.to-top.is-visible { opacity: 1; visibility: visible; translate: 0; }
.to-top:hover { background: var(--color-brand); }
.to-top .icon { width: 24px; height: 24px; }

/* ── Иконки ─────────────────────────────────────────────────────────────── */

.icon {
  width: 16px;
  height: 16px;
  flex: none;
}

.icon--sm { width: 14px; height: 14px; }
.icon--lg { width: 20px; height: 20px; }


/* Ответ на попытку сделать ставку. В макете его нет: там кнопка нарисована
   статикой, но оставлять её молчащей нельзя. */
.slip__result {
  margin: 0;
  padding: var(--space-6) var(--space-8);
  border-radius: var(--radius-sm);
  font-size: var(--fs-body-sm);
  line-height: 18px;
}

.slip__result--ok {
  background: color-mix(in srgb, var(--color-surface) 12%, transparent);
  color: var(--color-surface);
}

.slip__result--warn {
  background: color-mix(in srgb, var(--color-brand) 22%, transparent);
  color: var(--color-surface);
}