/* css/auth.css */

/* ==========================================================
   Animations & New Login UI (Extracted from index.html)
   ========================================================== */
@keyframes floatA{0%,100%{transform:translate3d(-90px,-70px,0) rotateY(-18deg) rotateX(12deg)}50%{transform:translate3d(-100px,-95px,30px) rotateY(-28deg) rotateX(4deg)}}
@keyframes floatB{0%,100%{transform:translate3d(0,10px,60px) rotateY(4deg) rotateX(-6deg)}50%{transform:translate3d(5px,-20px,90px) rotateY(-6deg) rotateX(6deg)}}
@keyframes floatC{0%,100%{transform:translate3d(85px,90px,-30px) rotateY(22deg) rotateX(-12deg)}50%{transform:translate3d(95px,65px,10px) rotateY(32deg) rotateX(-2deg)}}
@keyframes orbMove{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(25px,-25px) scale(1.15)}}
@keyframes orbMove2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-20px,20px) scale(1.1)}}
@keyframes gridShift{0%{transform:translate(0,0)}100%{transform:translate(40px,40px)}}
@keyframes rise{0%{transform:translateY(100%);opacity:0}15%,85%{opacity:0.7}100%{transform:translateY(-120%);opacity:0}}
@keyframes rotateCoin{0%{transform:translate(-50%,-50%) rotateY(0) rotateX(15deg)}100%{transform:translate(-50%,-50%) rotateY(360deg) rotateX(15deg)}}
@keyframes pulseRing{0%{transform:translate(-50%,-50%) scale(0.8);opacity:0.5}100%{transform:translate(-50%,-50%) scale(1.8);opacity:0}}
@keyframes blink{0%,100%{opacity:0.4}50%{opacity:1}}

@keyframes fieldIn{0%{opacity:0;transform:translateY(12px)}100%{opacity:1;transform:translateY(0)}}
@keyframes btnGradient{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@keyframes btnShine{0%{transform:translateX(-250%) skewX(-22deg)}100%{transform:translateX(400%) skewX(-22deg)}}
@keyframes btnGlow{0%,100%{box-shadow:0 12px 30px rgba(99,102,241,0.35),0 0 0 0 rgba(236,72,153,0.45)}50%{box-shadow:0 18px 42px rgba(139,92,246,0.55),0 0 0 10px rgba(236,72,153,0)}}
@keyframes arrowNudge{0%,100%{transform:translateX(0)}50%{transform:translateX(-4px)}}
@keyframes cornerGlow{0%,100%{opacity:0.3}50%{opacity:0.7}}
@keyframes sparkle{0%,100%{transform:scale(0.8);opacity:0.3}50%{transform:scale(1.2);opacity:1}}
@keyframes floatBadge{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes ringRotate{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}

.fin-login .anim-field{animation:fieldIn 0.6s ease-out both}
.fin-login input:focus{outline:none!important;border-color:#8b5cf6!important;background:#fff!important;box-shadow:0 0 0 4px rgba(139,92,246,0.15)!important}
.fin-login input:focus+svg,.fin-login .input-wrap:focus-within svg{stroke:#8b5cf6!important}
.fin-login input.err{border-color:#ef4444!important;background:#fef2f2!important;box-shadow:0 0 0 4px rgba(239,68,68,0.1)!important}

.fin-login .login-btn{
  position:relative;
  overflow:hidden;
  background:linear-gradient(110deg,#4f46e5 0%,#7c3aed 25%,#ec4899 55%,#7c3aed 80%,#4f46e5 100%);
  background-size:220% 100%;
  animation:btnGradient 5s ease-in-out infinite,btnGlow 2.8s ease-in-out infinite;
  transition:transform 0.2s ease,filter 0.2s ease;
}
.fin-login .login-btn:hover{transform:translateY(-2px);filter:brightness(1.1)}
.fin-login .login-btn:active{transform:translateY(0) scale(0.98)}
.fin-login .btn-shine{
  position:absolute;top:0;right:0;width:40%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.45),transparent);
  animation:btnShine 3.2s ease-in-out infinite;
  pointer-events:none;
}
.fin-login .btn-arrow{animation:arrowNudge 1.8s ease-in-out infinite}
.fin-login .login-btn:hover .btn-arrow{animation-duration:0.8s}

.fin-login .social-btn{transition:all 0.2s ease}
.fin-login .social-btn:hover{border-color:#c7d2fe!important;background:#f5f3ff!important;transform:translateY(-1px)}
.fin-login a:hover{color:#7c3aed!important}
.fin-login .corner-accent{animation:cornerGlow 3s ease-in-out infinite}

@media(max-width: 900px) {
    .fin-login { flex-direction: column !important; }
    .fin-left-panel { display: none !important; }
}

.login-wrapper { padding: 24px; }
.login-container { width:100%;max-width:1060px;margin:0 auto;border-radius:24px;overflow:hidden;border:1px solid rgba(255,255,255,0.1);background:#fff;font-family:'Tajawal', sans-serif;display:flex;min-height:600px;direction:rtl;position:relative;box-shadow:0 25px 60px -12px rgba(0,0,0,0.6); }
.login-form-wrap { flex:0.95;padding:48px 44px;display:flex;flex-direction:column;justify-content:center;background:#fff;position:relative;overflow:hidden; }
.fin-input { width:100%;padding:13px 42px 13px 14px;border:1px solid #e2e8f0;border-radius:11px;font-size:13.5px;box-sizing:border-box;background:#f8fafc;font-family:'Tajawal', sans-serif;transition:all 0.25s; }
.fin-input-rtl { direction:rtl; }
.fin-input-ltr { direction:ltr; text-align:right; }
.fin-submit-btn { width:100%;padding:15px;color:#fff;border:none;border-radius:12px;font-size:14.5px;font-weight:500;cursor:pointer;font-family:'Tajawal', sans-serif;display:flex;align-items:center;justify-content:center;gap:10px; }
.fin-social-btn-wrap { flex:1;padding:11px;background:#fff;border:1px solid #e2e8f0;border-radius:11px;font-size:12.5px;font-weight:500;color:#334155;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;font-family:'Tajawal', sans-serif; }

/* ==========================================================
   LOGIN PAGE (Legacy / Fallback styles extracted from style.css)
   ========================================================== */
#LS {
  min-height: 100vh; align-items: center; justify-content: center;
  background: var(--z950); position: relative; overflow: hidden;
}
.lg-noise {
  position: absolute; inset: 0; pointer-events: none;
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkAQMAAABKLAcXAAAABlBMVEUAAAAAAAClZ7nPAAAAAnRSTlMAGec50QAAAIBJREFUeNpjYBgFo2AUjIJRMApGwSgYBaNgFIyCUUBPAIFy8eP//3/8/w8U+P/z/3+g2P+f//8DxYAK/v///z9Q8P///3+g4P///3+g4P///3+g4P///3+g4P///3+g4P///3+g4P///3+g4P///3+g4P///3+gYHQAAMB1/wFR2aXWAAAAAElFTkSuQmCC");
  background-size: 100px; opacity: .06;
}
.lg-glow1 { position: absolute; width: 800px; height: 800px; border-radius: 50%; background: radial-gradient(circle,rgba(245,158,11,.07) 0%,transparent 60%); top: -200px; right: -200px; pointer-events: none }
.lg-glow2 { position: absolute; width: 600px; height: 600px; border-radius: 50%; background: radial-gradient(circle,rgba(167,139,250,.05) 0%,transparent 60%); bottom: -200px; left: -200px; pointer-events: none }
.lg-grid { position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px); background-size: 60px 60px }
.lg-box {
  position: relative; z-index: 10; width: 440px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 24px; padding: 48px;
  backdrop-filter: blur(12px);
  box-shadow: 0 0 0 1px rgba(0,0,0,.3),0 40px 80px rgba(0,0,0,.4);
}
.lg-logo { display: flex; align-items: center; gap: 13px; margin-bottom: 36px; justify-content: center }
.lg-icon {
  width: 48px; height: 48px; border-radius: 14px;
  background: linear-gradient(135deg,var(--gold) 0%,#D97706 100%);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 24px rgba(245,158,11,.35);
  flex-shrink: 0;
}
.lg-brand { text-align: right }
.lg-brand-ar { font-size: 18px; font-weight: 900; color: var(--white); letter-spacing: -.3px }
.lg-brand-en { font-size: 9px; font-weight: 600; color: var(--z400); letter-spacing: 2.5px; text-transform: uppercase; margin-top: 1px }
.lg-sep { width: 100%; height: 1px; background: linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent); margin: 0 0 32px }
.lg-head { text-align: center; margin-bottom: 32px }
.lg-title { font-size: 24px; font-weight: 900; color: var(--white); letter-spacing: -.5px }
.lg-sub { font-size: 13px; color: var(--z400); margin-top: 6px; font-weight: 400; line-height: 1.6 }
.lg-label { font-size: 11.5px; font-weight: 700; color: var(--z400); letter-spacing: .5px; text-transform: uppercase; margin-bottom: 8px; display: block }
.lg-field { position: relative; margin-bottom: 16px }
.lg-input {
  width: 100%; height: 48px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px; padding: 0 16px 0 46px;
  font-family: 'Tajawal', sans-serif; font-size: 15px; color: var(--white); outline: none;
  transition: all .2s;
}
.lg-input::placeholder { color: var(--z600) }
.lg-input:focus { background: rgba(255,255,255,.07); border-color: rgba(245,158,11,.4); box-shadow: 0 0 0 3px rgba(245,158,11,.1) }
.lg-ico { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: var(--z600) }
.lg-btn {
  width: 100%; height: 50px; margin-top: 8px; border: none; border-radius: 12px;
  background: linear-gradient(135deg,var(--gold) 0%,#D97706 100%);
  color: var(--z950); font-family: 'Tajawal', sans-serif; font-size: 15px; font-weight: 900;
  cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 10px;
  transition: all .22s; box-shadow: 0 4px 20px rgba(245,158,11,.4); letter-spacing: .2px;
}
.lg-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(245,158,11,.5) }
.lg-btn:active { transform: translateY(0) }
.lg-hint { margin-top: 24px; padding: 13px; background: rgba(255,255,255,.03); border-radius: 10px; border: 1px solid rgba(255,255,255,.06); font-size: 12px; color: var(--z400); text-align: center; line-height: 1.7 }
.lg-hint strong { color: var(--z300); font-weight: 700 }
.lerr { display: none; align-items: center; gap: 4px; font-size: 11px; color: var(--r-d); margin-top: 4px }
.lerr.on { display: flex }
.lerr svg { width: 11px; height: 11px; stroke: currentColor; fill: none; stroke-width: 2.5; flex-shrink: 0 }
@media(max-width:480px) { .lg-box { width: 100%; border-radius: 0; min-height: 100vh; border: none; padding: 40px 24px } }

/* Login Page Light Mode Overrides */
html[data-theme="light"] #loginPage { background: linear-gradient(135deg,#EEF0F8 0%,#E4E8F4 100%) }
html[data-theme="light"] .lg-grid { background-image: linear-gradient(rgba(0,0,0,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,.05) 1px,transparent 1px) }
html[data-theme="light"] .lg-glow1 { background: radial-gradient(circle,rgba(192,120,0,.12) 0%,transparent 60%) }
html[data-theme="light"] .lg-glow2 { background: radial-gradient(circle,rgba(109,40,217,.08) 0%,transparent 60%) }
html[data-theme="light"] .lg-box { background: #fff; border-color: rgba(0,0,0,.1); box-shadow: 0 20px 60px rgba(0,0,0,.12),0 0 0 1px rgba(0,0,0,.05) }
html[data-theme="light"] .lg-brand-ar { color: #0A0E1A }
html[data-theme="light"] .lg-brand-en { color: #8A93AE }
html[data-theme="light"] .lg-sep { background: linear-gradient(90deg,transparent,rgba(0,0,0,.1),transparent) }
html[data-theme="light"] .lg-title { color: #0A0E1A }
html[data-theme="light"] .lg-sub { color: #6A738E }
html[data-theme="light"] .lg-label { color: #6A738E }
html[data-theme="light"] .lg-input { background: #F4F5FA; border-color: #DDE0EA; color: #0A0E1A }
html[data-theme="light"] .lg-input::placeholder { color: #B0B8CC }
html[data-theme="light"] .lg-ico { color: #B0B8CC }
html[data-theme="light"] .lg-input:focus { background: #fff; border-color: rgba(192,120,0,.5); box-shadow: 0 0 0 3px rgba(192,120,0,.1) }
html[data-theme="light"] .lg-hint { background: rgba(0,0,0,.03); border-color: rgba(0,0,0,.07) }
html[data-theme="light"] .lg-hint strong { color: #0A0E1A }