/* ============================================================================
 *  auth.css — страницы входа, регистрации и восстановления пароля
 * ----------------------------------------------------------------------------
 *  Центрированная карточка, табы, соцкнопки, OTP-поле, баннер бонусов.
 *  Подключается после variables.css / base.css / components.css.
 * ========================================================================== */

.auth {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-6) var(--space-4);
  background:
    radial-gradient(1200px 600px at 50% -10%, var(--color-primary-bg), transparent 60%),
    var(--color-bg);
}

.auth-card {
  width: 100%; max-width: 440px;
  background: var(--color-surface);
  border-radius: 20px;
  box-shadow: var(--shadow-lg);
  padding: var(--space-8);
  animation: fadeInUp 0.35s ease both;
}
@media (max-width: 480px) {
  .auth-card { padding: var(--space-6) var(--space-5); border-radius: 16px; }
}

.auth-logo {
  text-align: center; margin-bottom: var(--space-6);
  font-size: 1.5rem; font-weight: var(--fw-bold); color: var(--color-primary);
}
.auth-title { text-align: center; margin-bottom: var(--space-2); }
.auth-subtitle { text-align: center; color: var(--color-text-muted); font-size: var(--fs-sm); margin-bottom: var(--space-6); }

/* Баннер бонусов (регистрация) */
.auth-banner {
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
  color: #fff;
  border-radius: var(--radius-md);
  padding: var(--space-4);
  font-size: var(--fs-sm); font-weight: var(--fw-medium);
  text-align: center;
  margin-bottom: var(--space-6);
  box-shadow: var(--shadow-primary);
}

/* Табы (По телефону / По email) */
.auth-tabs {
  display: flex; gap: var(--space-1);
  background: var(--color-surface-2);
  padding: 4px; border-radius: var(--radius-md);
  margin-bottom: var(--space-5);
}
.auth-tab {
  flex: 1; padding: 10px; text-align: center;
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm); font-weight: var(--fw-medium);
  color: var(--color-text-muted);
  transition: var(--transition-fast);
}
.auth-tab.is-active { background: var(--color-surface); color: var(--color-dark); box-shadow: var(--shadow-sm); }

/* Подтабы (SMS / Пароль) */
.auth-subtabs { display: flex; gap: var(--space-4); margin-bottom: var(--space-4); }
.auth-subtab {
  font-size: var(--fs-sm); font-weight: var(--fw-medium);
  color: var(--color-text-muted); padding-bottom: var(--space-1);
  border-bottom: 2px solid transparent;
}
.auth-subtab.is-active { color: var(--color-primary); border-bottom-color: var(--color-primary); }

.auth-pane { display: none; }
.auth-pane.is-active { display: block; animation: fadeIn 0.2s ease both; }

/* Поле пароля с «глазком» */
.password-field { position: relative; }
.password-field .input { padding-right: 44px; }
.password-toggle {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--color-text-light);
}
.password-toggle:hover { color: var(--color-text); background: var(--color-surface-2); }

/* OTP-блок */
.otp-block { margin-top: var(--space-3); }
.otp-inputs { display: flex; gap: var(--space-2); justify-content: space-between; margin-bottom: var(--space-3); }
.otp-cell {
  width: 100%; height: 56px; text-align: center;
  font-size: 1.25rem; font-weight: var(--fw-semibold);
  border: 1.5px solid var(--color-border); border-radius: var(--radius-md);
  background: var(--color-surface); color: var(--color-dark);
  transition: var(--transition);
}
.otp-cell:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb),0.12); outline: none; }
.otp-timer { text-align: center; font-size: var(--fs-sm); color: var(--color-text-muted); }
.otp-resend { color: var(--color-primary); font-weight: var(--fw-medium); cursor: pointer; }
.otp-resend[disabled] { color: var(--color-text-light); cursor: default; }

/* Разделитель «или войти через» */
.auth-divider {
  display: flex; align-items: center; gap: var(--space-3);
  margin: var(--space-6) 0 var(--space-4);
  color: var(--color-text-light); font-size: var(--fs-xs);
}
.auth-divider::before, .auth-divider::after {
  content: ''; flex: 1; height: 1px; background: var(--color-border);
}

/* Соцкнопки */
.social-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-2); }
.social-btn {
  height: 48px; border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 22px;
  transition: var(--transition);
}
.social-btn:hover { transform: translateY(-2px); color: #fff; filter: brightness(1.05); box-shadow: var(--shadow-md); }
.social-vk       { background: #0077FF; }
.social-ok       { background: #EE8208; }
.social-telegram { background: #2AABEE; }
.social-yandex   { background: #FC3F1D; }

/* Биометрия */
.auth-biometric {
  width: 100%; margin-top: var(--space-3);
  display: flex; align-items: center; justify-content: center; gap: var(--space-2);
}

/* Низ карточки */
.auth-foot { text-align: center; margin-top: var(--space-6); font-size: var(--fs-sm); color: var(--color-text-muted); }
.auth-foot a { color: var(--color-primary); font-weight: var(--fw-medium); }
.auth-link { display: inline-block; margin-top: var(--space-3); font-size: var(--fs-sm); color: var(--color-primary); }

/* Согласие */
.auth-agree { display: flex; align-items: flex-start; gap: var(--space-2); font-size: var(--fs-sm); color: var(--color-text-muted); margin: var(--space-2) 0 var(--space-4); }
.auth-agree input { margin-top: 3px; accent-color: var(--color-primary); }
.auth-agree a { color: var(--color-primary); }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
@media (max-width: 560px) { .grid-2 { grid-template-columns: 1fr; } }


/* ==========================================================================
   РЕГИСТРАЦИЯ ОРГАНИЗАЦИИ (public/register-seller.php)
   --------------------------------------------------------------------------
   ВАЖНО. У .rs-step раньше не было ни одного правила, поэтому все три шага
   мастера показывались одновременно: пользователь видел одну длинную форму,
   а полоса шагов и кнопки «Далее» ничего не делали. Правило ниже — то, ради
   чего вся разметка и писалась.
   ========================================================================== */
.rs-step { display: none; }
.rs-step.is-active { display: block; animation: fadeInUp 0.18s ease both; }
@media (prefers-reduced-motion: reduce) { .rs-step.is-active { animation: none; } }

/* Полоса прогресса вместо кружочков: на телефоне занимает одну строку. */
.rs-progress { height: 4px; background: var(--color-surface-2); border-radius: var(--radius-full); overflow: hidden; }
.rs-progress__bar { height: 100%; width: 33%; background: var(--color-primary); border-radius: var(--radius-full); transition: width 0.25s ease; }
.rs-counter { margin: var(--space-2) 0 var(--space-5); font-size: var(--fs-xs); color: var(--color-text-muted); }

.rs-title { font-size: 1.35rem; font-weight: var(--fw-bold); margin-bottom: var(--space-2); }
.rs-sub { font-size: var(--fs-sm); color: var(--color-text-muted); margin-bottom: var(--space-5); }

/* Выбор типа: крупные цели для пальца, одно касание — и следующий шаг. */
.rs-types { display: grid; gap: var(--space-3); }
.rs-type {
  display: flex; align-items: center; gap: var(--space-4); width: 100%;
  padding: var(--space-4); border: 1.5px solid var(--color-border);
  border-radius: var(--radius-lg); background: var(--color-surface);
  text-align: left; cursor: pointer; transition: var(--transition-fast);
}
.rs-type:hover { border-color: var(--color-primary); }
.rs-type.is-active { border-color: var(--color-primary); background: var(--color-primary-bg); }
.rs-type i { font-size: 30px; color: var(--color-primary); flex-shrink: 0; }
.rs-type b { display: block; font-size: 1rem; font-weight: var(--fw-semibold); color: var(--color-text); }
.rs-type small { display: block; font-size: var(--fs-xs); color: var(--color-text-muted); margin-top: 2px; }

/* --- Выбор города ------------------------------------------------------- */
.citypick { position: relative; }
.citypick__row { display: flex; gap: var(--space-2); }
.citypick__row .input { flex: 1; min-width: 0; }
.citypick__geo {
  flex-shrink: 0; padding: 0 14px; border-radius: var(--radius-md);
  border: 1.5px solid var(--color-border); background: var(--color-surface);
  color: var(--color-text-muted); cursor: pointer; display: inline-flex;
  align-items: center; gap: 6px; font-size: var(--fs-sm); transition: var(--transition-fast);
}
.citypick__geo:hover { border-color: var(--color-primary); color: var(--color-primary); }
.citypick__geo i { font-size: 18px; }
.citypick__geo:disabled { opacity: .6; cursor: default; }

/* Популярные города — чтобы большинству хватило одного касания без набора. */
.citypick__chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }
.citypick__chip {
  padding: 6px 12px; border-radius: var(--radius-full); border: 1.5px solid var(--color-border);
  background: var(--color-surface); font-size: var(--fs-sm); color: var(--color-text);
  cursor: pointer; transition: var(--transition-fast);
}
.citypick__chip:hover { border-color: var(--color-primary); color: var(--color-primary); }

/* Выбранный город — отдельное состояние: видно, что выбор состоялся. */
/* display:flex перебивает браузерное [hidden]{display:none} — без явного
   правила плашка «выбран город» висела бы на экране пустой. */
.citypick__chosen[hidden] { display: none; }
.citypick__chosen {
  display: flex; align-items: center; gap: var(--space-2);
  padding: 10px 14px; border-radius: var(--radius-md);
  background: var(--color-primary-bg); border: 1.5px solid var(--color-primary);
  color: var(--color-primary); font-weight: var(--fw-medium);
}
.citypick__chosen i { font-size: 18px; flex-shrink: 0; }
.citypick__chosen span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.citypick__reset {
  background: none; border: none; color: var(--color-primary); cursor: pointer;
  font-size: var(--fs-sm); font-weight: var(--fw-medium); text-decoration: underline; padding: 0;
}
.citypick .search-suggest { max-height: 260px; overflow-y: auto; }
.suggest-item.is-cursor { background: var(--color-surface-2); }
.suggest-item mark { background: none; color: var(--color-primary); font-weight: var(--fw-semibold); }

/* --- Необязательные поля прячем, чтобы форма выглядела короткой ---------- */
.rs-more { margin-bottom: var(--space-4); border-top: 1px solid var(--color-border-light); padding-top: var(--space-3); }
.rs-more > summary {
  cursor: pointer; font-size: var(--fs-sm); color: var(--color-primary);
  font-weight: var(--fw-medium); list-style: none; display: flex; align-items: center; gap: 6px;
}
.rs-more > summary::-webkit-details-marker { display: none; }
.rs-more > summary::before { content: '+'; font-size: 1.1em; line-height: 1; }
.rs-more[open] > summary::before { content: '–'; }
.rs-more__body { padding-top: var(--space-4); }

/* Форма организации: сегменты вместо радиокнопок — крупнее и понятнее. */
.rs-seg { display: flex; gap: var(--space-2); }
.rs-seg label {
  flex: 1; text-align: center; padding: 10px 6px; border-radius: var(--radius-md);
  border: 1.5px solid var(--color-border); background: var(--color-surface);
  font-size: var(--fs-sm); cursor: pointer; transition: var(--transition-fast); user-select: none;
}
.rs-seg input { position: absolute; opacity: 0; pointer-events: none; }
.rs-seg label:has(input:checked) { border-color: var(--color-primary); background: var(--color-primary-bg); color: var(--color-primary); font-weight: var(--fw-medium); }
.rs-seg label.is-active { border-color: var(--color-primary); background: var(--color-primary-bg); color: var(--color-primary); font-weight: var(--fw-medium); }

.rs-nav { display: flex; gap: var(--space-3); margin-top: var(--space-5); }
.rs-nav .btn-ghost { flex-shrink: 0; }