/* =========================================================
   PAYLANCE — Auth page (login + register with role picker)
   Premium minimal · centered card · light theme
   Reuses tokens from app.css
   ========================================================= */

/* ---------- Page wrapper ---------- */
.auth-page{min-height:100vh;background:linear-gradient(180deg,#FAFAFA 0%,#F5F5F7 60%,#FAFAFA 100%);display:flex;flex-direction:column;position:relative;overflow-x:hidden;overflow-y:auto}
.auth-page::before{content:'';position:absolute;width:800px;height:800px;border-radius:50%;background:radial-gradient(circle,rgba(31,58,95,.05),transparent 70%);top:-400px;left:50%;transform:translateX(-50%);pointer-events:none}
.auth-page::after{content:'';position:absolute;width:600px;height:600px;border-radius:50%;background:radial-gradient(circle,rgba(184,133,46,.04),transparent 70%);bottom:-300px;right:-100px;pointer-events:none}

/* ---------- Top bar ---------- */
.auth-top{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;max-width:1280px;margin:0 auto;padding:24px;width:100%}
.auth-top__logo{display:inline-flex;align-items:center;gap:10px;font:800 14px/1 var(--font);letter-spacing:.12em;text-transform:uppercase;color:var(--text);text-decoration:none}
.auth-top__logo .pl-logo-img{width:32px;height:32px}
.auth-top__back{display:inline-flex;align-items:center;gap:6px;font:600 13.5px/1 var(--font);color:var(--text-muted);text-decoration:none;padding:8px 14px;border-radius:var(--pill);transition:.15s}
.auth-top__back:hover{color:var(--text);background:rgba(255,255,255,.7)}
.auth-top__back svg{flex-shrink:0;width:14px;height:14px}

/* ---------- Main centered area ---------- */
.auth-main{flex:1;display:flex;align-items:center;justify-content:center;padding:24px 24px 64px;position:relative;z-index:1}
.auth-container{width:100%;max-width:480px}

/* ---------- Headline above card ---------- */
.auth-headline{text-align:center;margin-bottom:24px}
.auth-headline h1{font:700 30px/1.15 var(--font);letter-spacing:-0.025em;color:var(--text);margin:0 0 8px;text-wrap:balance}
.auth-headline p{font:500 14.5px/1.5 var(--font);color:var(--text-muted);margin:0;max-width:380px;margin-left:auto;margin-right:auto}

/* ---------- Card ---------- */
.auth-card{background:#fff;border:1px solid var(--border);border-radius:24px;padding:32px;box-shadow:0 24px 60px -24px rgba(16,24,40,.12)}

/* ---------- Tabs ---------- */
.auth-tabs{display:flex;gap:4px;background:var(--bg-soft);padding:4px;border-radius:var(--pill);margin-bottom:24px;border:1px solid var(--border)}
.auth-tab{flex:1;padding:10px 18px;border-radius:var(--pill);font:700 13.5px/1 var(--font);color:var(--text-muted);background:transparent;border:0;cursor:pointer;transition:.15s;letter-spacing:-0.005em}
.auth-tab.is-on{background:#fff;color:var(--text);box-shadow:0 1px 3px rgba(16,24,40,.06)}
.auth-tab:hover:not(.is-on){color:var(--text)}

/* ---------- Pane (login / register) ---------- */
.auth-pane{display:none}
.auth-pane.is-on{display:block;animation:authFade .25s ease}
@keyframes authFade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}

/* ---------- Form fields ---------- */
.auth-field{margin-bottom:14px}
.auth-field--row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.auth-label{display:block;font:600 12px/1 var(--font);color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:7px}
.auth-input{width:100%;border:1px solid var(--border);border-radius:12px;padding:13px 16px;font:500 15px/1.2 var(--font);background:#fff;color:var(--text);outline:none;transition:.15s;font-family:inherit}
.auth-input:focus{border-color:var(--text);box-shadow:0 0 0 3px rgba(21,24,29,.08)}
.auth-input--error{border-color:var(--danger);box-shadow:0 0 0 3px rgba(166,69,59,.12)}
.auth-field__hint{margin-top:6px;font:500 12px/1.4 var(--font);color:var(--text-muted)}
.auth-field__hint--error{color:var(--danger);font-weight:600}

/* ---------- Submit button ---------- */
.auth-submit{width:100%;margin-top:8px;padding:15px 18px;background:var(--text);color:#fff;border:0;border-radius:12px;font:700 15px/1 var(--font);cursor:pointer;letter-spacing:-0.005em;transition:.15s;display:inline-flex;align-items:center;justify-content:center;gap:8px}
.auth-submit:hover{background:#000;transform:translateY(-1px);box-shadow:0 12px 28px -8px rgba(0,0,0,.3)}
.auth-submit:active{transform:translateY(0)}
.auth-submit:disabled{opacity:.5;cursor:not-allowed;transform:none}
.auth-submit svg{transition:transform .15s}
.auth-submit:hover svg{transform:translateX(2px)}

/* ---------- Divider ---------- */
.auth-divider{display:flex;align-items:center;gap:14px;margin:22px 0;font:600 11.5px/1 var(--font);color:var(--text-faint);letter-spacing:.06em;text-transform:uppercase}
.auth-divider::before,.auth-divider::after{content:'';flex:1;height:1px;background:var(--border)}

/* ---------- Social buttons ---------- */
.auth-social{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.auth-social--3{grid-template-columns:1fr 1fr 1fr}
.auth-social__btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 14px;background:#fff;border:1px solid var(--border);border-radius:12px;font:600 13.5px/1 var(--font);color:var(--text);cursor:pointer;transition:.15s;letter-spacing:-0.005em;text-decoration:none}
.auth-social__btn:hover{background:var(--bg-soft);border-color:var(--border-strong);transform:translateY(-1px)}
.auth-social__btn svg{flex-shrink:0;width:18px;height:18px}
.auth-social__btn--kaspi{border-color:rgba(241,70,53,.25)}
.auth-social__btn--kaspi:hover{border-color:rgba(241,70,53,.45);background:rgba(241,70,53,.04)}

/* ---------- Foot / links under form ---------- */
.auth-foot{margin-top:18px;text-align:center;font:500 13.5px/1.4 var(--font);color:var(--text-muted)}
.auth-foot a{color:var(--text);font-weight:700;text-decoration:none}
.auth-foot a:hover{text-decoration:underline}

.auth-fine{margin-top:12px;text-align:center;font:500 11.5px/1.5 var(--font);color:var(--text-faint);letter-spacing:-0.005em}
.auth-fine a{color:var(--text-muted);text-decoration:underline}

/* =========================================================
   ROLE PICKER (register step 1)
   ========================================================= */
.role-picker-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.role-picker-head__title{font:700 13.5px/1 var(--font);color:var(--text);letter-spacing:-0.005em}
.role-picker-head__step{font:600 12px/1 var(--font);color:var(--text-muted);letter-spacing:.05em;text-transform:uppercase}

.role-picker{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:18px}
.role-card{padding:18px;background:#fff;border:1.5px solid var(--border);border-radius:14px;cursor:pointer;text-align:left;transition:.15s;display:flex;flex-direction:column;gap:6px;position:relative;overflow:hidden}
.role-card:hover{border-color:var(--border-strong);transform:translateY(-2px);box-shadow:0 8px 24px -12px rgba(16,24,40,.12)}
.role-card.is-on{border-color:var(--text);background:var(--bg-soft)}
.role-card.is-on::after{content:'';position:absolute;top:10px;right:10px;width:20px;height:20px;border-radius:50%;background:var(--text);display:grid;place-items:center}
.role-card.is-on::before{content:'✓';position:absolute;top:10px;right:10px;width:20px;height:20px;color:#fff;font:700 12px/20px var(--font);text-align:center;z-index:1;letter-spacing:0}
.role-card__icon{font-size:24px;line-height:1;margin-bottom:4px}
.role-card__title{font:700 13.5px/1.2 var(--font);color:var(--text);letter-spacing:-0.005em}
.role-card__desc{font:500 11.5px/1.4 var(--font);color:var(--text-muted)}
.role-card__meta{margin-top:auto;padding-top:8px;font:600 10.5px/1 var(--font);color:var(--text-muted);letter-spacing:.04em;text-transform:uppercase}

/* Role-specific accent on hover (subtle) */
.role-card[data-role="buyer"].is-on{background:linear-gradient(180deg,#F0F5FA,#FAFAFA);border-color:#1F3A5F}
.role-card[data-role="individual"].is-on{background:linear-gradient(180deg,#F5F0FA,#FAFAFA);border-color:#7C3AED}
.role-card[data-role="small_biz"].is-on{background:linear-gradient(180deg,#F0FAF2,#FAFAFA);border-color:#4A7B5C}
.role-card[data-role="factory"].is-on{background:linear-gradient(180deg,#FAF4E6,#FAFAFA);border-color:#B8852E}

/* Reveal contact form after role selected */
.auth-register-form{display:none}
.auth-register-form.is-visible{display:block;animation:authFade .25s ease}

/* ---------- Social proof under card ---------- */
.auth-proof{margin-top:24px;text-align:center;font:500 12px/1.5 var(--font);color:var(--text-muted);letter-spacing:-0.005em}
.auth-proof b{color:var(--text);font-weight:700;font-feature-settings:"tnum"}
.auth-proof__avatars{display:inline-flex;vertical-align:middle;margin-right:8px}
.auth-proof__avatars span{width:24px;height:24px;border-radius:50%;border:2px solid #fff;margin-left:-7px;display:grid;place-items:center;font:700 10px/1 var(--font);color:#fff}
.auth-proof__avatars span:first-child{margin-left:0;background:linear-gradient(135deg,#1F3A5F,#2A4D7A)}
.auth-proof__avatars span:nth-child(2){background:linear-gradient(135deg,#4A7B5C,#6A9F7E)}
.auth-proof__avatars span:nth-child(3){background:linear-gradient(135deg,#7C3AED,#A78BFA)}
.auth-proof__avatars span:nth-child(4){background:linear-gradient(135deg,#B8852E,#D4A24A)}

/* ---------- Success state ---------- */
.auth-success{display:none;text-align:center;padding:24px 0}
.auth-success.is-on{display:block;animation:authFade .25s ease}
.auth-success__icon{width:64px;height:64px;border-radius:50%;background:linear-gradient(135deg,#4A7B5C,#6A9F7E);color:#fff;display:grid;place-items:center;margin:0 auto 22px;font-size:30px;box-shadow:0 12px 28px -8px rgba(74,123,92,.45)}
.auth-success__honorific{font:600 12.5px/1 var(--font);letter-spacing:.16em;text-transform:uppercase;color:var(--text-muted);margin-bottom:10px}
.auth-success__t{font:800 36px/1.1 var(--font);letter-spacing:-0.03em;color:var(--text);margin:0 0 10px;text-wrap:balance}
.auth-success__d{font:500 15.5px/1.5 var(--font);color:var(--text-muted);margin:0 0 26px;max-width:360px;margin-left:auto;margin-right:auto;font-style:italic}
.auth-success__redirect{font:500 12.5px/1.4 var(--font);color:var(--text-faint);margin-top:14px;letter-spacing:.04em;text-transform:uppercase}
.auth-success__redirect b{color:var(--text);font-weight:700;font-feature-settings:"tnum"}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:540px){
  .auth-top{padding:18px 18px}
  .auth-main{padding:8px 18px 48px}
  .auth-headline h1{font-size:24px}
  .auth-card{padding:24px;border-radius:18px}
  .auth-tabs{margin-bottom:18px}
  .auth-field--row{grid-template-columns:1fr}
  .role-picker{grid-template-columns:1fr}
  .auth-social,.auth-social--3{grid-template-columns:1fr}
}

/* Inline form error */
.auth-form__err{
  display:none;padding:10px 14px;border-radius:10px;
  background:rgba(239,68,68,.08);border:1px solid rgba(239,68,68,.3);
  color:#B91C1C;font:600 13px/1.4 var(--font);margin-bottom:12px;
  letter-spacing:-.005em;
}
.auth-submit:disabled{opacity:.55;cursor:not-allowed}

/* URL feedback (?confirmed=1, ?reset=1) */
.auth-banner{
  display:none;padding:10px 14px;border-radius:10px;margin-bottom:16px;
  font:600 13px/1.45 var(--font);letter-spacing:-.005em;white-space:pre-line;
}
.auth-banner--success{background:rgba(74,123,92,.1);border:1px solid rgba(74,123,92,.28);color:#2F5E3E}
.auth-banner--info{background:rgba(31,58,95,.08);border:1px solid rgba(31,58,95,.2);color:#1F3A5F}
.auth-banner--error{background:rgba(180,50,50,.08);border:1px solid rgba(180,50,50,.28);color:#8B2020}

/* OAuth debug panel (?debug=oauth) */
.oauth-debug-panel{
  position:fixed;left:12px;right:12px;bottom:12px;z-index:9999;
  max-height:42vh;overflow:auto;margin:0;padding:12px 14px;
  font:500 11px/1.45 ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;
  color:#1a3a5c;background:rgba(255,255,255,.96);
  border:1px solid rgba(31,58,95,.25);border-radius:12px;
  box-shadow:0 8px 32px rgba(16,24,40,.15);white-space:pre-wrap;word-break:break-all
}

/* Kaspi / «скоро» OAuth */
.pl-soon{position:relative;opacity:.55;cursor:not-allowed;pointer-events:none}
.pl-soon::after{content:"скоро";position:absolute;top:6px;right:6px;font:600 9px/1 var(--font);letter-spacing:.04em;color:#0E2540;background:#FBBF24;padding:3px 6px;border-radius:6px;text-transform:uppercase;pointer-events:none}

/* ---------- Optional hint inside label ---------- */
.auth-label__opt{
  font-weight:500;text-transform:none;letter-spacing:0;color:var(--text-faint);
  font-size:11px;margin-left:6px;
}

/* ---------- Gender radio row ---------- */
.auth-radio-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:6px}
.auth-radio{
  position:relative;display:flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 16px;border:1.5px solid var(--border);border-radius:12px;
  cursor:pointer;transition:.15s;background:#fff;
  font:600 13.5px/1 var(--font);color:var(--text);
}
.auth-radio:hover{border-color:var(--border-strong)}
.auth-radio input{position:absolute;opacity:0;pointer-events:none}
.auth-radio input:checked + span{color:var(--text)}
.auth-radio:has(input:checked){
  border-color:var(--text);background:var(--bg-soft);
  box-shadow:inset 0 0 0 1px var(--text);
}

/* ---------- Сброс пароля (inline) ---------- */
.auth-forgot{padding-top:4px}
.auth-forgot__title{font:700 16px/1.2 var(--font);margin:0 0 6px}
.auth-forgot__hint{font:500 13px/1.5 var(--font);color:var(--text-muted);margin:0 0 14px}
.auth-forgot__back{display:block;width:100%;margin-top:10px;padding:10px;border:0;background:transparent;
  font:600 13px/1 var(--font);color:var(--text-muted);cursor:pointer}
.auth-forgot__back:hover{color:var(--text)}
.auth-social__btn[data-oauth]{border:0;cursor:pointer;font:inherit;text-decoration:none;display:inline-flex}

/* ── Two-level role picker ──────────────────────────── */
.role-picker--two { grid-template-columns: 1fr 1fr; }
.role-card--half { text-align: center; }
.role-back-btn:hover { color: var(--text, #111) !important; }