/**
 * Верификация игрока (KYC) — кабинет.
 *
 * Палитра вынесена в переменные: на goldera достаточно переопределить их в
 * инлайн-<style> кабинета, а весь остальной файл переиспользуется как есть.
 */

/* Атрибут hidden против классов с display.
   Браузер задаёт [hidden] { display: none } с нулевой специфичностью, поэтому любое
   правило вида `.kv__loader { display: flex }` его перебивает — элемент остаётся на
   экране, хотя JS его «скрыл». Именно так спиннер загрузки висел поверх уже
   отрисованной формы. Правило ниже возвращает hidden прежний смысл внутри модуля. */
.kv [hidden],
.kv[hidden] { display: none !important; }

.kv {
  --kv-bg: rgba(255, 255, 255, .03);
  /* Непрозрачный фон — нужен выпадающему списку <option>: полупрозрачный --kv-bg
     там просвечивает страницу и список становится нечитаемым. */
  --kv-surface: #222524;
  --kv-surface-hover: #2c302f;
  --kv-border: rgba(255, 255, 255, .12);
  --kv-text: #e8ecef;
  --kv-muted: #98a2ad;
  --kv-accent: #9cd81a;
  --kv-accent-text: #10160a;
  --kv-danger: #ff5c5c;
  --kv-warn: #ffb020;
  --kv-ok: #4caf50;
  --kv-radius: 14px;
  --kv-lock: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E");

  color: var(--kv-text);
  padding-bottom: 12px;
}

.kv__head h3 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 6px; }
.kv__sub { color: var(--kv-muted); margin: 0 0 18px; font-size: 14px; }

.kv__badge {
  font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px;
  background: rgba(255, 255, 255, .1); color: var(--kv-text); white-space: nowrap;
}
.kv__badge--approved { background: rgba(76, 175, 80, .16); color: var(--kv-ok); }
.kv__badge--pending { background: rgba(255, 176, 32, .16); color: var(--kv-warn); }
.kv__badge--rejected,
.kv__badge--expired { background: rgba(255, 92, 92, .16); color: var(--kv-danger); }
.kv__badge--more_required { background: rgba(33, 150, 243, .16); color: #64b5f6; }

/* ── Состояния ───────────────────────────────────────────────────────────── */

.kv__loader { display: flex; justify-content: center; padding: 32px 0; }
.kv__spinner {
  width: 28px; height: 28px; border-radius: 50%;
  border: 3px solid var(--kv-border); border-top-color: var(--kv-accent);
  animation: kv-spin .8s linear infinite;
}
@keyframes kv-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .kv__spinner { animation-duration: 2.4s; } }

.kv__off { text-align: center; color: var(--kv-muted); padding: 28px 12px; }

.kv__alert {
  border: 1px solid var(--kv-border); border-radius: var(--kv-radius);
  padding: 12px 16px; margin-bottom: 18px; background: var(--kv-bg);
}
.kv__alert-title { font-weight: 600; margin-bottom: 4px; }
.kv__alert-text { color: var(--kv-muted); font-size: 14px; }
.kv__alert--rejected { border-color: rgba(255, 92, 92, .4); }
.kv__alert--pending { border-color: rgba(255, 176, 32, .4); }
.kv__alert--approved { border-color: rgba(76, 175, 80, .4); }
.kv__alert--more { border-color: rgba(33, 150, 243, .4); }

/* ── Шаги ────────────────────────────────────────────────────────────────── */

.kv__steps {
  display: flex; gap: 8px; flex-wrap: wrap;
  list-style: none; margin: 0 0 18px; padding: 0;
}
.kv__steps li {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 14px; border: 1px solid var(--kv-border); border-radius: 999px;
  font-size: 13px; color: var(--kv-muted);
}
.kv__steps li span {
  width: 20px; height: 20px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--kv-border); font-size: 11px; color: var(--kv-text);
}
.kv__steps li.is-done { color: var(--kv-text); border-color: var(--kv-accent); }
.kv__steps li.is-done span { background: var(--kv-accent); color: var(--kv-accent-text); }

/* ── Анкета ──────────────────────────────────────────────────────────────── */

.kv__form { margin-bottom: 22px; }
/* Кнопка сохранения идёт сразу за сеткой полей и без отступа прилипает к последнему
   инпуту. Блок ошибки над ней скрыт атрибутом hidden и места не занимает, поэтому
   отступ задаём самой кнопке. */
.kv__form > .kv__btn { margin-top: 18px; }
.kv__form-grid {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
}
.kv__field { display: flex; flex-direction: column; gap: 5px; font-size: 13px; }
.kv__field--wide { grid-column: 1 / -1; }
.kv__field span { color: var(--kv-muted); }
.kv__field input,
.kv__field select {
  background: var(--kv-bg); border: 1px solid var(--kv-border);
  border-radius: 10px; padding: 10px 12px; color: var(--kv-text);
  font-size: 14px; width: 100%;
  font-family: inherit; line-height: 1.35;
}

/* Нативный select в тёмной теме рисуется системой: белый список, синяя подсветка,
   чужая стрелка. Снимаем системный вид и задаём собственные фон/цвет — в том числе
   для <option>, иначе выпадающий список остаётся светлым. */
.kv__field select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 38px;
  cursor: pointer;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2398a2ad' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px 16px;
}
.kv__field select:hover { border-color: var(--kv-accent); }

/* Список опций. Chrome и Firefox уважают эти правила на всех платформах,
   Safari оформляет список сам — там останется системный вид, и это нормально. */
.kv__field select option {
  background: var(--kv-surface);
  color: var(--kv-text);
  padding: 8px 10px;
}
.kv__field select option:checked,
.kv__field select option:hover {
  background: var(--kv-surface-hover);
  color: var(--kv-text);
}

/* Плейсхолдеры в тон подписям, а не системного серого. */
.kv__field input::placeholder { color: var(--kv-muted); opacity: 1; }

/* Календарь и прочие нативные иконки в тёмной теме идут чёрными — инвертируем. */
.kv__field input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1);
  opacity: .55;
  cursor: pointer;
}
.kv__field input[type="date"]::-webkit-calendar-picker-indicator:hover { opacity: 1; }
.kv__field input:focus-visible,
.kv__field select:focus-visible { outline: 2px solid var(--kv-accent); outline-offset: 1px; }
.kv__field input:disabled,
.kv__field select:disabled { opacity: .55; }

/* ── Слоты документов ────────────────────────────────────────────────────── */

.kv__slots {
  display: grid; gap: 12px; margin-bottom: 20px;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.kv__slot {
  border: 1px solid var(--kv-border); border-radius: var(--kv-radius);
  padding: 14px; background: var(--kv-bg);
  display: flex; flex-direction: column; gap: 8px;
}
.kv__slot[data-locked="1"] { opacity: .5; }
.kv__slot[data-state="filled"] { border-color: rgba(76, 175, 80, .45); }
.kv__slot[data-state="error"] { border-color: rgba(255, 92, 92, .5); }

.kv__slot-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.kv__slot-title { font-size: 14px; font-weight: 600; }
.kv__slot-title b { color: var(--kv-danger); }
.kv__slot-flag {
  font-size: 11px; padding: 2px 8px; border-radius: 999px;
  background: rgba(33, 150, 243, .18); color: #64b5f6;
}
.kv__slot-hint,
.kv__slot-limit { font-size: 12px; color: var(--kv-muted); }
.kv__slot-limit { margin-top: auto; }

.kv__drop {
  position: relative; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 6px;
  min-height: 96px; padding: 12px;
  border: 1px dashed var(--kv-border); border-radius: 10px;
  cursor: pointer; text-align: center; font-size: 13px; color: var(--kv-muted);
}
.kv__drop.is-over { border-color: var(--kv-accent); color: var(--kv-text); }
.kv__drop:focus-visible { outline: 2px solid var(--kv-accent); outline-offset: 2px; }
.kv__drop-icon {
  width: 26px; height: 26px; border-radius: 50%;
  border: 2px solid currentColor; position: relative;
}
.kv__drop-icon::before,
.kv__drop-icon::after {
  content: ''; position: absolute; background: currentColor;
  left: 50%; top: 50%; transform: translate(-50%, -50%);
}
.kv__drop-icon::before { width: 12px; height: 2px; }
.kv__drop-icon::after { width: 2px; height: 12px; }

/* Поле файла не прячем display:none — иначе теряется фокусируемость с клавиатуры. */
.kv__file { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; }
.kv__file:disabled { cursor: not-allowed; }

.kv__preview {
  position: relative; min-height: 96px; border-radius: 10px;
  border: 1px solid rgba(76, 175, 80, .35);
  display: flex; align-items: center; justify-content: center;
  background: rgba(76, 175, 80, .08);
}
.kv__preview img { max-width: 100%; max-height: 160px; border-radius: 8px; }
.kv__preview-ok { color: var(--kv-ok); font-size: 13px; font-weight: 600; }
.kv__remove {
  position: absolute; top: 6px; right: 6px;
  width: 24px; height: 24px; border-radius: 50%; border: 0;
  background: rgba(0, 0, 0, .5); color: #fff; font-size: 16px; line-height: 1; cursor: pointer;
}

.kv__progress { height: 4px; border-radius: 999px; background: var(--kv-border); overflow: hidden; }
.kv__progress i { display: block; height: 100%; background: var(--kv-accent); transition: width .15s linear; }

.kv__err { color: var(--kv-danger); font-size: 12px; margin: 0; }

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

.kv__btn {
  border: 0; border-radius: 10px; padding: 12px 22px;
  font-size: 15px; font-weight: 600; cursor: pointer;
}
.kv__btn--primary { background: var(--kv-accent); color: var(--kv-accent-text); }
.kv__btn--primary:disabled { opacity: .45; cursor: not-allowed; }
.kv__btn--ghost {
  background: transparent; color: var(--kv-text);
  border: 1px solid var(--kv-border); padding: 10px 18px; font-size: 14px;
}
.kv__btn:focus-visible { outline: 2px solid var(--kv-accent); outline-offset: 2px; }

/* Панель отправки.
   Была липкой с градиентом в чёрное — на тёмном фоне это читалось как грязная
   полоса, а текст примечания прижимался к самому краю. Теперь это обычный блок
   в тон карточек, с рамкой и внутренними отступами: кнопка и пояснение выглядят
   одним элементом, а не наложением на контент. */
.kv__submit-bar {
  display: flex; align-items: center; gap: 12px 16px; flex-wrap: wrap;
  margin-top: 4px;
  padding: 16px;
  border: 1px solid var(--kv-border);
  border-radius: var(--kv-radius);
  background: var(--kv-bg);
}
.kv__submit-bar .kv__btn--primary { flex: 0 0 auto; }

/* Примечание о защищённом канале: иконка замка + приглушённый текст, который
   занимает оставшуюся ширину и переносится, не растягивая кнопку. */
.kv__note {
  flex: 1 1 240px;
  display: flex; align-items: flex-start; gap: 8px;
  color: var(--kv-muted); font-size: 12px; line-height: 1.45; margin: 0;
}
.kv__note::before {
  content: '';
  flex: 0 0 auto;
  width: 14px; height: 14px; margin-top: 1px;
  background: currentColor;
  -webkit-mask: var(--kv-lock) center / contain no-repeat;
  mask: var(--kv-lock) center / contain no-repeat;
}

/* ── Полноэкранный просмотр ──────────────────────────────────────────────── */

.kv__lightbox {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(0, 0, 0, .9);
  display: flex; align-items: center; justify-content: center;
  /* 100dvh, а не 100vh: на мобильных браузерах адресная строка съедает часть
     экрана, и нижняя кнопка закрытия уезжает под неё. */
  height: 100dvh; overscroll-behavior: contain;
}
.kv__lightbox img { max-width: 96vw; max-height: 90dvh; }
.kv__lightbox-close {
  position: absolute; top: 16px; right: 16px;
  width: 40px; height: 40px; border-radius: 50%; border: 0;
  background: rgba(255, 255, 255, .12); color: #fff; font-size: 24px; cursor: pointer;
}

/* ── Адаптив ─────────────────────────────────────────────────────────────── */

@media (max-width: 480px) {
  .kv__slots,
  .kv__form-grid { grid-template-columns: 1fr; }
  /* На узком экране кнопка занимает строку целиком, примечание уходит под неё. */
  .kv__submit-bar { flex-direction: column; align-items: stretch; }
  .kv__btn--primary { width: 100%; }
}