/* --- css/verification.css --------------------------------------------------
 * Полный набор стилей для страницы KYC-верификации.
 * ВЕРСИЯ: исправлена нумерация шагов (counter-reset добавлен),
 * сохранено центрирование и адаптивность.
 * ------------------------------------------------------------------------- */


body,
body * {
  text-transform: none !important;      /* !!! НОВОЕ ПРАВИЛО !!! */
}

/* ===== 1. ГЛОБАЛЬНЫЕ ПЕРЕМЕННЫЕ  ========================================= */
:root{
  --kyc-primary:#21df51;     /* фирменный зелёный */
  --kyc-muted:#6c757d;       /* приглушённый серый */
  --kyc-radius:.5rem;        /* базовое скругление углов */
  --kyc-step-min:150px;      /* мин. ширина одного шага мастера */
}

/* ===== 2. ШАГОВЫЙ МАСТЕР  =============================================== */
.step-wizard{
  counter-reset:step;                     /* FIX: общий счётчик шагов */
  display:grid;                           /* grid вместо flex */
  grid-auto-flow:column;
  grid-auto-columns:minmax(var(--kyc-step-min),1fr);
  gap:1rem;
  max-width:720px;                        /* ограничитель ширины */
  width:100%;
  margin:0 auto 2rem;                     /* горизонтальное центрирование */
  padding:0;                              /* убираем деф. отступ UL */
}

@media(max-width:992px){                  /* lg-screen → row-flow */
  .step-wizard{
    grid-auto-flow:row;
    grid-template-columns:repeat(auto-fit,minmax(var(--kyc-step-min),1fr));
  }
}

@media(max-width:576px){                  /* XS: чуть плотнее */
  .step-wizard{gap:.75rem}
}

/* --- пункт мастера ------------------------------------------------------ */
.step-wizard li{
  list-style:none;
  position:relative;
  padding:.5rem 1rem .5rem 2.6rem;        /* место под кружок слева */
  font-weight:600;
  color:var(--kyc-muted);
  text-align:center;
  text-transform:capitalize;
  transition:color .2s;
}
.step-wizard li::before{
  counter-increment:step;
  content:counter(step);
  position:absolute;
  left:.6rem;top:50%;transform:translateY(-50%);
  width:32px;height:32px;line-height:28px;
  border:2px solid var(--kyc-muted);
  border-radius:50%;
  background:#fff;
  text-align:center;
  font-size:.95rem;
  transition:all .2s;
}
.step-wizard li.active,
.step-wizard li.completed{color:var(--kyc-primary)}
.step-wizard li.completed::before{
  content:"✓";
  background:var(--kyc-primary);
  color:#fff;
  border-color:var(--kyc-primary);
}

/* ===== 3. ВИДЕО + ПРЕВЬЮ ФОТО  ========================================= */
.kyc__video,
#videoPreview{
  width:100%;
  max-height:280px;
  background:#000;
  object-fit:cover;
  border-radius:var(--kyc-radius);
}
.snapshot-preview{
  width:100%;
  max-height:220px;
  object-fit:cover;
  border:2px solid var(--kyc-primary);
  border-radius:var(--kyc-radius);
}

/* XS: уменьшаем высоты */
@media(max-width:576px){
  .kyc__video,
  #videoPreview{max-height:200px}
  .snapshot-preview{max-height:160px}
}

/* ===== 4. АНИМАЦИИ  ===================================================== */
.fade-enter{animation:fadeIn .4s ease-in-out}
@keyframes fadeIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}

/* ===== 5. УТИЛИТАРНЫЕ КЛАССЫ  ========================================== */
.hidden{display:none!important;}
.text-xs{font-size:.85rem!important;}
.text-primary{color:var(--kyc-primary)!important;}
.border-primary{border-color:var(--kyc-primary)!important;}
.rounded-kyc{border-radius:var(--kyc-radius)!important;}
.bg-primary-10{background:rgba(33,223,81,.1)!important;}
.d-flex-center{display:flex!important;align-items:center!important;justify-content:center!important;}

/* ===== 6. ADAPTIVE TWEAKS (SM-MD-LG) =================================== */
@media(max-width:768px){
  body{font-size:.93rem}
  h2.title{font-size:1.25rem}
  .btn{font-size:.88rem;padding:.5rem .75rem}
  .alert{font-size:.85rem;padding:.55rem .75rem}
}

/* минимально-возможный экран (320-360px) */
@media(max-width:400px){
  :root{--kyc-step-min:120px}             /* ещё компактнее шаг мастер */
  .step-wizard li{font-size:.82rem;padding:.4rem .8rem .4rem 2.4rem}
  .step-wizard li::before{width:28px;height:28px;line-height:24px}
}

/* ===== 7. BUTTONS ====================================================== */
.kyc-btn-capture{
  display:block;                 /* занимает всю ширину w-100 */
  width:100%;
  padding:.65rem 1rem;
  font-weight:600;
  font-size:1rem;
  color:#fff;
  background:var(--kyc-primary);
  border:none;
  border-radius:var(--kyc-radius);
  box-shadow:0 2px 4px rgba(0,0,0,.12);
  transition:background .2s, transform .1s;
}
.kyc-btn-capture:hover,
.kyc-btn-capture:focus{
  background:#1ac948;           /* немного темнее при наведении */
  text-decoration:none;
  transform:translateY(-1px);
}
.kyc-btn-capture:active{
  background:#17b842;
  transform:translateY(0);
}
@media(max-width:576px){
  .kyc-btn-capture{
    font-size:.9rem;
    padding:.55rem .9rem;       /* компактнее на телефонах */
  }
}

/* ===== 8. VIDEO HEAD-TURN  ============================================= */
.head-wrapper{
  position:relative;
  width:220px;height:220px;
  margin-inline:auto;
  overflow:hidden;               /* гарантируем, что видео не вылезет наружу */
}

.head-video{
  width:100%;height:100%;
  object-fit:cover;
  border-radius:50%;             /* делает видео круглым */
  z-index:1;
}

.head-overlay{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:2;
}

/* статичная серая рамка */
.head-ring{
  fill:none;stroke:#d1d5db;stroke-width:4;
}

/* кольцо-прогресс (тоньше, потому что основной прогресс теперь линейный) */
.head-ring-progress{
  fill:none;stroke:#21df51;stroke-width:3;
  stroke-linecap:round;
  transform:rotate(-90deg);      /* начало сверху */
  transform-origin:50% 50%;
  stroke-dasharray:597;
  stroke-dashoffset:597;         /* 0 % */
  transition:stroke-dashoffset .3s linear;
}

.head-arrow{
  fill:none;stroke:#21df51;stroke-width:6;
  stroke-linecap:round;stroke-linejoin:round;
  transition:opacity .3s ease;
}
.opacity-0{opacity:0}

/* линейный индикатор (показывается только при fallback-режиме) */
.head-linear{
  height:8px;
  border-radius:4px;
  overflow:hidden;
}

.head-status{min-height:48px}    /* чтобы баннер не сдвигал кнопки */

/* увеличенные поля textarea для «Опыт» и «Навыки» */
.kyc-textarea {
  min-height: 110px;
  resize: vertical;
}
/* карточка-обёртка шага */
.kyc-card{
  background:#fff;
  border-radius:var(--kyc-radius);
  box-shadow:0 3px 8px rgba(0,0,0,.05);
  max-width:860px;
  margin-inline:auto;
}

/* увеличенные textarea */
.kyc-textarea{
  min-height:140px;
  resize:vertical;
}


.kyc__step--agreement .alert,
.kyc__step--agreement .alert *{
  text-transform:none !important;  /* убираем автокапитализацию */
}


/* =============================================================== */
/* ★ SUPPORT CHAT — сверх-компактная версия */

/* плавающая кнопка (не трогаем) */
.support-toggle{
  position:fixed;right:1.25rem;bottom:1.25rem;z-index:1050;
  width:64px;height:64px;padding:0;border:none;background:transparent;
  cursor:pointer;
}
.support-toggle img{width:100%;height:100%;object-fit:contain}

/* модалка + backdrop */
.support-modal{position:fixed;inset:0;z-index:1055}
.support-modal__backdrop{
  position:absolute;inset:0;background:rgba(0,0,0,.45);
}

/* ещё меньше на десктопе */
.support-modal__window{
  position:absolute;right:1.25rem;bottom:5rem;          /* чуть выше и левее */
  width:300px;height:440px;                             /* ⬅︎ уменьшено до 280×420 */
  background:#fff;border-radius:1rem;overflow:hidden;
  box-shadow:0 2px 12px rgb(0 0 0 / .18);
}

/* мобильная адаптация — оставляем компактный, но читабельный режим */
@media (max-width:480px){
  .support-modal__window{
    right:.5rem;left:.5rem;bottom:.5rem;
    width:auto;height:78vh;
    border-radius:.75rem;
  }
}

/* iframe */
.support-iframe{border:none;width:100%;height:100%}

/* кнопка «Х» */
.support-modal__close{
  position:absolute;top:.5rem;right:.5rem;z-index:2;
}
/* =============================================================== */