/* ═══════════════════════════════════════════════════════════════
   KAVINORA POS — Auth Pages Shared Styles
   Login · Sign Up · Forgot Password · Reset Password
   ═══════════════════════════════════════════════════════════════ */

/* ── Auth Page Layout ────────────────────────────────────── */
.auth-page{min-height:100vh;display:flex;flex-direction:column}
.auth-nav{height:var(--nav-height);display:flex;align-items:center;position:relative;z-index:10}
.auth-main{flex:1;display:flex;align-items:center;justify-content:center;padding:2rem 1.5rem;position:relative;overflow:hidden;background:var(--bg,#f8fafc)}
/* auth-main decorative elements handled per-page in <style> blocks */

/* gradientShift animation removed — light theme uses plain bg */

/* ── Auth Card ───────────────────────────────────────────── */
.auth-card{width:100%;max-width:440px;background:rgba(255,255,255,.85);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.4);border-radius:var(--radius-xl);padding:2.5rem 2rem;position:relative;z-index:1;box-shadow:0 8px 32px rgba(0,0,0,.08),0 2px 8px rgba(0,0,0,.04);animation:scaleIn .4s ease}

@media(prefers-color-scheme:dark){
  .auth-card{background:rgba(30,41,59,.85);border:1px solid rgba(148,163,184,.15);box-shadow:0 8px 32px rgba(0,0,0,.3)}
}
.auth-header{text-align:center;margin-bottom:2rem}
.auth-icon{width:56px;height:56px;border-radius:14px;background:var(--primary-glow);display:flex;align-items:center;justify-content:center;margin:0 auto 1rem}
.auth-icon svg{width:28px;height:28px;color:var(--primary)}
.auth-title{font-size:1.5rem;font-weight:700;color:var(--text);margin-bottom:.375rem}
.auth-subtitle{font-size:.9375rem;color:var(--text-secondary)}

/* ── Form Elements ───────────────────────────────────────── */
.auth-form{display:flex;flex-direction:column;gap:1rem}
.form-group{display:flex;flex-direction:column;gap:.375rem}
.form-label{font-size:.875rem;font-weight:500;color:var(--text-secondary)}
.form-input{width:100%;height:46px;padding:0 1rem;background:var(--surface);border:1.5px solid var(--border);border-radius:var(--radius-md);color:var(--text);font-size:.9375rem;transition:border-color var(--transition),box-shadow var(--transition);box-sizing:border-box}
.form-input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-glow);background:var(--bg-elevated)}
.form-input::placeholder{color:var(--text-muted)}
.form-input.error{border-color:var(--danger);box-shadow:0 0 0 3px rgba(220,38,38,.1)}

/* ── Password Toggle ─────────────────────────────────────── */
.password-wrap{position:relative}
.password-wrap .form-input{padding-right:3rem}
.password-toggle{position:absolute;right:.75rem;top:50%;transform:translateY(-50%);color:var(--text-muted);cursor:pointer;padding:4px;background:none;border:none}
.password-toggle:hover{color:var(--text-secondary)}

/* ── Form Row ────────────────────────────────────────────── */
.form-row{display:flex;align-items:center;justify-content:space-between}
.form-link{font-size:.8125rem;color:var(--primary);font-weight:500;text-decoration:none;transition:color var(--transition)}
.form-link:hover{color:var(--primary-light);text-decoration:underline}

/* ── Alert Messages ──────────────────────────────────────── */
.auth-alert{padding:.75rem 1rem;border-radius:var(--radius-md);font-size:.875rem;font-weight:500;display:none;align-items:center;gap:.5rem;line-height:1.4;margin-bottom:.5rem}
.auth-alert.show{display:flex}
.auth-alert.error{background:rgba(220,38,38,.07);border:1px solid rgba(220,38,38,.2);color:#b91c1c}
.auth-alert.success{background:rgba(5,150,105,.07);border:1px solid rgba(5,150,105,.2);color:#065f46}
.auth-alert.info{background:rgba(37,99,235,.07);border:1px solid rgba(37,99,235,.2);color:var(--primary-dark)}
.auth-alert.warning{background:rgba(217,119,6,.07);border:1px solid rgba(217,119,6,.2);color:#92400e}

/* ── Submit Button ───────────────────────────────────────── */
.auth-submit{height:48px;margin-top:.25rem;font-size:1rem}
.auth-submit:disabled{opacity:.6;cursor:not-allowed;transform:none!important}
.btn-spinner{width:20px;height:20px;border:2.5px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .6s linear infinite;display:inline-block;vertical-align:middle;margin-right:.5rem}

/* ── Links ───────────────────────────────────────────────── */
.auth-links{text-align:center;margin-top:1.5rem;font-size:.875rem;color:var(--text-secondary)}
.auth-links a{color:var(--primary);font-weight:600;text-decoration:none;transition:color var(--transition)}
.auth-links a:hover{color:var(--primary-dark);text-decoration:underline}
.auth-footer{text-align:center;margin-top:2rem;font-size:.75rem;color:var(--text-muted)}

/* ── Google / Social Button ──────────────────────────────── */
.btn-google{display:flex;align-items:center;justify-content:center;gap:.625rem;width:100%;padding:.75rem 1rem;background:#fff;color:#1e293b;font-family:inherit;font-weight:600;font-size:.9375rem;border:1.5px solid rgba(0,0,0,.12);border-radius:10px;cursor:pointer;transition:background .15s,box-shadow .15s}
.btn-google:hover{background:#f8fafc;box-shadow:0 2px 8px rgba(0,0,0,.08)}
.btn-google:disabled{opacity:.55;cursor:not-allowed}

.divider-or{display:flex;align-items:center;gap:.75rem;color:var(--text-muted,#94a3b8);font-size:.8125rem;margin:.875rem 0}
.divider-or::before,.divider-or::after{content:'';flex:1;height:1px;background:var(--border,rgba(255,255,255,.1))}

/* ── Responsive ──────────────────────────────────────────── */
@media(max-width:480px){
  .auth-card{padding:2rem 1.25rem;border-radius:var(--radius-lg)}
  .auth-title{font-size:1.25rem}
}

/* v202604031 */