body.auth-page{margin:0;padding:0;min-height:100vh;background:#f4f7fa;}

.auth-shell{
  --auth-navy:#001f55;
  --auth-purple:#4904dc;
  --auth-bg:#f4f7fa;
  --auth-muted:#666;
  --auth-line:rgba(0,31,85,.1);
  --auth-radius:24px;
  position:relative;
  width:100%;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:2rem 1rem;
  background:var(--auth-bg);
  font-family:'Tajawal',sans-serif;
}
.auth-shell,.auth-shell *{box-sizing:border-box;}

.auth-shell .login-box-wrapper{
  position:relative;
  z-index:2;
  display:flex;
  width:100%;
  max-width:800px;
  min-height:460px;
  background:#fff;
  border-radius:var(--auth-radius);
  overflow:hidden;
  box-shadow:0 20px 50px rgba(0,31,85,.15);
}
.auth-shell .login-box-wrapper.is-wide{max-width:1060px;}

.auth-shell .login-form-side{
  flex:1;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  padding:2.5rem 1.875rem;
  background:#fff;
}
.auth-shell .form-container{width:100%;max-width:320px;}
.auth-shell .is-wide .form-container{max-width:640px;}

.auth-shell .auth-brand-nav{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.9375rem;
  margin-bottom:1.5rem;
  padding:.75rem 1rem;
  background:rgba(0,31,85,.035);
  border-radius:14px;
}
.auth-shell .auth-logo-link{
  display:flex;
  align-items:center;
  transition:transform .3s ease;
}
.auth-shell .auth-logo-link:hover{transform:scale(1.03);}
.auth-shell .auth-logo{
  width:auto;
  max-width:120px;
  max-height:38px;
  object-fit:contain;
}
.auth-shell .auth-brand-divider{
  flex:0 0 auto;
  width:2px;
  height:35px;
  border-radius:2px;
  background:linear-gradient(to bottom,transparent,rgba(0,31,85,.15),transparent);
}
.auth-shell .back-home{
  display:inline-flex;
  align-items:center;
  gap:.375rem;
  font-size:.875rem;
  font-weight:700;
  color:var(--auth-muted);
  transition:color .25s cubic-bezier(.25,.8,.25,1);
}
.auth-shell .back-home:hover{color:var(--auth-purple);}
.auth-shell .auth-title{
  font-size:1.5rem;
  font-weight:800;
  color:var(--auth-navy);
  text-align:center;
  margin:0 0 1.5rem;
}
.auth-shell .auth-subtitle{
  text-align:center;
  color:var(--auth-muted);
  font-size:.875rem;
  margin:-.75rem 0 1.5rem;
}
.auth-shell .auth-field{margin-bottom:1.125rem;text-align:start;}
.auth-shell .auth-field>label{
  display:block;
  font-size:.8125rem;
  font-weight:700;
  color:var(--auth-navy);
  margin-bottom:.375rem;
}
.auth-shell .input-wrapper{
  position:relative;
  display:flex;
  align-items:stretch;
  border:1px solid var(--auth-line);
  border-radius:10px;
  background:#fcfcfc;
  overflow:hidden;
  transition:all .25s cubic-bezier(.25,.8,.25,1);
}
.auth-shell .input-wrapper:focus-within{
  background:#fff;
  border-color:var(--auth-purple);
  box-shadow:0 0 0 4px rgba(73,4,220,.1);
}
.auth-shell .icon-box{
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 45px;
  width:45px;
  background:rgba(0,31,85,.04);
  border-inline-end:1px solid rgba(0,31,85,.08);
  color:#888;
  font-size:.9375rem;
  transition:all .25s cubic-bezier(.25,.8,.25,1);
}
.auth-shell .input-wrapper:focus-within .icon-box{
  background:rgba(73,4,220,.05);
  color:var(--auth-purple);
  border-inline-end-color:rgba(73,4,220,.15);
}
.auth-shell .input-wrapper .form-control{
  flex:1;
  width:100%;
  min-width:0;
  min-height:auto;
  height:auto;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  border-radius:0 !important;
  padding:.75rem .875rem !important;
  font-size:.875rem;
  color:var(--auth-navy);
}
.auth-shell .input-wrapper .form-control::placeholder{color:#a0a0a0;}
.auth-shell .input-wrapper.has-toggle .form-control{padding-inline-end:2.75rem !important;}
.auth-shell .input-wrapper .show-password-btn{
  position:absolute;
  top:50%;
  left:auto;
  inset-inline-end:.65rem;
  transform:translateY(-50%);
  z-index:3;
  padding:0;
  background:none;
  border:none;
  color:#9aa0ab;
  font-size:1.125rem;
}
.auth-shell .input-wrapper .show-password-btn:hover{color:var(--auth-navy);}

.auth-shell .form-options{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:1.25rem;
  font-size:.75rem;
  font-weight:600;
}
.auth-shell .remember-me{
  display:flex;
  align-items:center;
  gap:.375rem;
  margin:0;
  cursor:pointer;
  color:var(--auth-muted);
}
.auth-shell .remember-me input{
  width:.875rem;
  height:.875rem;
  margin:0;
  accent-color:var(--auth-purple);
  cursor:pointer;
}
.auth-shell .forgot-pass{color:var(--auth-purple);font-weight:600;}
.auth-shell .forgot-pass:hover{text-decoration:underline;}

.auth-shell .btn-primary{
  --bs-btn-color:#fff;
  --bs-btn-bg:var(--auth-navy);
  --bs-btn-border-color:var(--auth-navy);
  --bs-btn-hover-color:#fff;
  --bs-btn-hover-bg:var(--auth-purple);
  --bs-btn-hover-border-color:var(--auth-purple);
  --bs-btn-active-color:#fff;
  --bs-btn-active-bg:var(--auth-purple);
  --bs-btn-active-border-color:var(--auth-purple);
  border-radius:10px;
  font-weight:700;
  box-shadow:0 5px 20px rgba(0,31,85,.15);
  transition:all .25s cubic-bezier(.25,.8,.25,1);
}
.auth-shell .btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 25px rgba(73,4,220,.25);}

.auth-shell .nec-btn{
  --bs-btn-color:var(--auth-navy);
  --bs-btn-bg:#fff;
  --bs-btn-border-color:var(--auth-line);
  --bs-btn-hover-color:var(--auth-navy);
  --bs-btn-hover-bg:#f7f9fc;
  --bs-btn-hover-border-color:var(--auth-purple);
  border-radius:10px;
  font-weight:700;
}
.auth-shell .or-separator{margin:1rem 0;color:var(--auth-muted);font-size:.8125rem;}
.auth-shell .or-separator span{position:relative;z-index:1;padding:0 .625rem;background:#fff;}

.auth-shell .register-prompt{
  text-align:center;
  margin-top:1.25rem;
  padding-top:1rem;
  border-top:1px solid #f0f0f0;
  font-size:.8125rem;
  font-weight:600;
  color:var(--auth-muted);
}
.auth-shell .register-prompt a{
  display:inline-flex;
  align-items:center;
  gap:.3125rem;
  color:var(--auth-purple);
  font-weight:800;
}
.auth-shell .register-prompt a:hover{color:var(--auth-navy);text-decoration:underline;}

.auth-shell .login-image-side{
  position:relative;
  flex:1.4;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  padding:2.5rem 1.875rem;
  background:var(--auth-navy) url('/assets/images/login.png') center/cover no-repeat;
}
.auth-shell .is-wide .login-image-side{flex:1;}
.auth-shell .login-image-side::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:linear-gradient(135deg,rgba(0,31,85,.85) 0%,rgba(73,4,220,.85) 100%);
}
.auth-shell .welcome-glass-card{
  position:relative;
  z-index:2;
  width:100%;
  max-width:390px;
  padding:2.1875rem 1.875rem;
  text-align:start;
  color:#fff;
  background:rgba(255,255,255,.1);
  backdrop-filter:blur(15px);
  -webkit-backdrop-filter:blur(15px);
  border:1px solid rgba(255,255,255,.2);
  border-radius:20px;
  box-shadow:0 20px 40px rgba(0,0,0,.15);
}
.auth-shell .welcome-glass-card .icon-wrapper{
  display:flex;
  align-items:center;
  justify-content:center;
  width:50px;
  height:50px;
  margin-bottom:1.25rem;
  border-radius:12px;
  background:rgba(255,255,255,.15);
  border:1px solid rgba(255,255,255,.2);
  color:#fff;
  font-size:1.25rem;
}
.auth-shell .welcome-glass-card h1,
.auth-shell .welcome-glass-card h2{
  margin:0 0 .75rem;
  font-size:1.8rem;
  font-weight:800;
  line-height:1.4;
  color:#fff;
}
.auth-shell .welcome-glass-card p{
  margin:0;
  font-size:.95rem;
  line-height:1.8;
  color:rgba(255,255,255,.9);
}

.auth-shell .text-separator{
  display:flex;
  align-items:center;
  gap:.75rem;
  margin:.75rem 0 .25rem;
  font-size:.9375rem;
  font-weight:800;
  color:var(--auth-navy);
  text-align:start;
}
.auth-shell .text-separator::after{
  content:"";
  flex:1;
  height:1px;
  background:var(--auth-line);
}
.auth-shell .text-separator span{flex:0 0 auto;}

.auth-shell .form-floating>.form-control,
.auth-shell .form-floating>.form-select,
.auth-shell .form-select,
.auth-shell .form-control{
  border:1px solid var(--auth-line);
  border-radius:10px !important;
  background-color:#fff !important;
  color:var(--auth-navy);
}
.auth-shell .form-floating>.form-control:focus,
.auth-shell .form-select:focus,
.auth-shell .form-control:focus{
  border-color:var(--auth-purple) !important;
  box-shadow:0 0 0 4px rgba(73,4,220,.1) !important;
  background-color:#fff !important;
}
.auth-shell .form-floating>label{color:var(--auth-muted);}
.auth-shell .form-check-input:checked{background-color:var(--auth-purple);border-color:var(--auth-purple);}
.auth-shell .form-check-input:focus{border-color:var(--auth-purple);box-shadow:0 0 0 .2rem rgba(73,4,220,.15);}
.auth-shell .form-control.is-invalid,
.auth-shell .form-select.is-invalid{
  border-color:#dc3545 !important;
  box-shadow:0 0 0 4px rgba(220,53,69,.12) !important;
}

.auth-shell .auth-choose{display:flex;flex-direction:column;gap:1rem;}
.auth-shell .auth-choose .register-btn{
  display:flex;
  align-items:center;
  gap:.9rem;
  width:100%;
  padding:1.1rem 1.25rem;
  text-align:start;
  background:#f7f9fc;
  border:1px solid #eef1f6;
  border-radius:14px;
}
.auth-shell .auth-choose .register-btn:hover{border-color:var(--auth-purple);background:#fff;}
.auth-shell .auth-choose .register-btn::before{display:none;}
.auth-shell .auth-choose .register-btn .main-icon{
  flex:0 0 auto;
  margin:0 !important;
  font-size:2.5rem !important;
  line-height:1;
  color:var(--auth-purple);
}
.auth-shell .auth-choose .register-btn .btn-content{flex:1;margin:0 !important;}
.auth-shell .auth-choose .register-btn .btn-content h6{margin-bottom:.15rem;font-weight:800;color:var(--auth-navy);}
.auth-shell .auth-choose .register-btn .btn-content p{margin:0;font-size:.8rem;color:var(--auth-muted);}
.auth-shell .auth-choose .register-btn .secondary-icon{
  flex:0 0 auto;
  margin:0 !important;
  font-size:1.15rem !important;
  color:var(--auth-purple);
}

.auth-shell .wizard-steps{
  position:relative;
  display:flex;
  justify-content:space-between;
  margin-bottom:1.75rem;
}
.auth-shell .wizard-steps::before{
  content:"";
  position:absolute;
  top:18px;
  inset-inline:8%;
  height:2px;
  background:#eef1f6;
  z-index:0;
}
.auth-shell .wizard-step-item{
  position:relative;
  z-index:1;
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.45rem;
  cursor:pointer;
  text-align:center;
}
.auth-shell .wizard-step-num{
  display:flex;
  align-items:center;
  justify-content:center;
  width:38px;
  height:38px;
  border-radius:50%;
  background:#eef1f6;
  color:var(--auth-muted);
  font-weight:800;
  font-size:.95rem;
  border:3px solid #fff;
  transition:all .25s;
}
.auth-shell .wizard-step-item.active .wizard-step-num{background:var(--auth-navy);color:#fff;}
.auth-shell .wizard-step-item.done .wizard-step-num{background:var(--auth-purple);color:#fff;}
.auth-shell .wizard-step-label{
  font-size:.75rem;
  font-weight:700;
  color:var(--auth-muted);
}
.auth-shell .wizard-step-item.active .wizard-step-label{color:var(--auth-navy);}
.auth-shell .wizard-nav{display:flex;gap:.75rem;margin-top:1.75rem;}
.auth-shell .wizard-nav .btn{flex:1;}
.auth-shell .btn-wizard-prev{
  --bs-btn-color:var(--auth-navy);
  --bs-btn-bg:#fff;
  --bs-btn-border-color:var(--auth-line);
  --bs-btn-hover-color:var(--auth-navy);
  --bs-btn-hover-bg:#f4f7fa;
  --bs-btn-hover-border-color:var(--auth-navy);
  border-radius:10px;
  font-weight:700;
}

@media (max-width:768px){
  .auth-shell{padding:1rem;}
  .auth-shell .login-box-wrapper,
  .auth-shell .login-box-wrapper.is-wide{max-width:480px;min-height:auto;}
  .auth-shell .login-image-side,
  .auth-shell .is-wide .login-image-side{display:none;}
  .auth-shell .login-form-side{flex:1 1 auto;padding:2rem 1.25rem;}
  .auth-shell .form-container,
  .auth-shell .is-wide .form-container{max-width:100%;}
  .auth-shell .wizard-step-label{display:none;}
}