/* =====================================================
   СТО Booking — Authentication UI v2
   Общий визуальный блок для входа, регистрации и сброса пароля.
   ===================================================== */

.auth-page {
  min-height: calc(100vh - 68px);
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(380px, 0.92fr);
  margin: -36px -24px -64px;
  background: var(--surface);
}

.auth-visual {
  position: relative;
  min-height: 720px;
  overflow: hidden;
  padding: 64px clamp(32px, 6vw, 88px);
  display: flex;
  align-items: flex-end;
  background-image:
    linear-gradient(90deg, rgba(15, 23, 42, .42) 0%, rgba(15, 23, 42, .16) 58%, rgba(15, 23, 42, .04) 100%),
    url("../img/hero-service.5e9b31fa46d1.jpg");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.auth-visual::after {
  content: '';
  position: absolute;
  width: 340px;
  height: 340px;
  right: -110px;
  top: -120px;
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  box-shadow: 0 0 0 80px rgba(255,255,255,.025);
}

.auth-visual-content {
  position: relative;
  z-index: 1;
  max-width: 560px;
  color: #fff;
}

.auth-brand { display:inline-flex; align-items:center; gap:14px; margin-bottom:34px; }
.auth-brand img { width:58px; height:58px; object-fit:contain; filter:drop-shadow(0 5px 12px rgba(0,0,0,.2)); }
.auth-brand strong { display:block; font-family:var(--font-head); font-size:18px; font-weight:800; }
.auth-brand span { display:block; margin-top:2px; font-size:11px; letter-spacing:.9px; text-transform:uppercase; opacity:.75; }
.auth-visual h1 { color:#fff; font-size:clamp(34px,4vw,54px); line-height:1.05; letter-spacing:-1.8px; margin-bottom:20px; max-width:540px; }
.auth-visual p { color:rgba(255,255,255,.86); font-size:17px; line-height:1.65; max-width:500px; }
.auth-benefits { display:flex; flex-wrap:wrap; gap:10px; margin-top:30px; }
.auth-benefit { display:inline-flex; align-items:center; gap:8px; padding:9px 13px; border:1px solid rgba(255,255,255,.16); border-radius:999px; background:rgba(255,255,255,.09); color:rgba(255,255,255,.92); font-size:13px; backdrop-filter:blur(8px); }

.auth-panel { display:flex; align-items:center; justify-content:center; padding:48px clamp(24px,5vw,72px); background:#fff; }
.auth-card-v2 { width:100%; max-width:430px; }
.auth-card-v2 .auth-kicker { display:inline-flex; align-items:center; gap:7px; margin-bottom:16px; color:var(--brand); font-size:12px; font-weight:700; letter-spacing:.8px; text-transform:uppercase; }
.auth-card-v2 .auth-kicker::before { content:''; width:22px; height:2px; border-radius:999px; background:var(--brand); }
.auth-card-v2 h2 { font-size:32px; letter-spacing:-1px; margin-bottom:8px; }
.auth-card-v2 .auth-description { color:var(--text-muted); font-size:14px; line-height:1.6; margin-bottom:30px; }
.auth-card-v2 form { display:flex; flex-direction:column; }
.auth-card-v2 .form-group { margin-bottom:17px; }
.auth-card-v2 .form-group label { color:var(--text); font-size:13px; font-weight:700; margin-bottom:7px; }
.auth-card-v2 .form-group input,.auth-card-v2 .form-group select { min-height:48px; padding:12px 14px; border-radius:12px; background:#f8fafc; }
.auth-card-v2 .form-group input:focus,.auth-card-v2 .form-group select:focus { background:#fff; }
.auth-card-v2 .btn-lg { min-height:50px; margin-top:5px; border-radius:12px; font-size:15px; }
.auth-card-v2 .auth-footer { margin-top:24px; padding-top:20px; border-top:1px solid var(--border-light); text-align:center; color:var(--text-muted); font-size:13px; }
.auth-card-v2 .auth-footer a { font-weight:700; }
.auth-card-v2 .form-error,.auth-card-v2 .errorlist { color:var(--danger); font-size:12px; line-height:1.45; margin-top:6px; padding:0; list-style:none; }
.auth-card-v2 .auth-note { display:flex; gap:9px; align-items:flex-start; margin-top:18px; padding:12px 13px; border:1px solid var(--brand-soft); border-radius:12px; background:var(--brand-bg); color:#1e40af; font-size:12px; line-height:1.5; }
.password-generator-field { width:100%; }
.password-generator-field > input { width:100%; box-sizing:border-box; }
.password-generator-actions { display:flex; justify-content:flex-end; margin-top:10px; }
.auth-card-v2 .password-generator-button { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:40px; padding:9px 13px; border-radius:10px; background:#fff; border-color:#cbd5e1; color:#344054; font-size:13px; font-weight:700; }
.auth-card-v2 .password-generator-button:hover { background:#f8faff; border-color:#a9bde8; color:var(--brand); }
.auth-card-v2 .password-generator-button svg { flex:0 0 auto; }

@media (max-width:900px) {
  .auth-page { display:block; margin:-36px -24px -64px; }
  .auth-visual { min-height:360px; padding:42px 28px; align-items:flex-end; }
  .auth-visual h1 { font-size:34px; letter-spacing:-1px; }
  .auth-visual p { font-size:15px; }
  .auth-brand { margin-bottom:24px; }
  .auth-benefits { margin-top:20px; }
  .auth-panel { padding:42px 24px 56px; }
}

@media (max-width:520px) {
  .auth-visual { min-height:320px; padding:32px 20px; }
  .auth-visual h1 { font-size:30px; }
  .auth-visual p { font-size:14px; }
  .auth-benefit { font-size:12px; }
  .auth-panel { padding:34px 20px 48px; }
  .auth-card-v2 h2 { font-size:28px; }
  .password-generator-actions { justify-content:stretch; }
  .auth-card-v2 .password-generator-button { width:100%; }
}

@media (prefers-reduced-motion: reduce) {
  .auth-card-v2 *, .auth-visual * { transition:none !important; }
}

.auth-recovery{margin-top:16px;text-align:center}.auth-recovery a{display:inline-flex;align-items:center;min-height:44px;font-size:14px;font-weight:600;color:var(--ds-color-primary)}

@media(max-width:720px){.auth-page .auth-visual{display:none}.auth-page .auth-panel{padding:28px 20px 40px}.auth-page{min-height:0}}