*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;font-family:'Segoe UI',Arial,sans-serif}
body.indxo-auth-layout{overflow:hidden}

/* ── Layout ── */
.login-container{
  display:flex;min-height:100vh;position:relative;
  align-items:center;justify-content:space-between;overflow:hidden;
}

/* Video background */
.video-background{
  position:fixed;top:0;left:0;width:100%;height:100%;
  object-fit:cover;z-index:-1;
}
/* Dark overlay so text is readable over video */
.login-container::before{
  content:'';position:fixed;top:0;left:0;width:100%;height:100%;
  background:rgba(10,15,30,.55);z-index:0;
}

/* ── Brand side (left) ── */
.brand-content{
  flex:1;padding:60px 50px;color:#fff;position:relative;z-index:1;
  display:flex;flex-direction:column;align-items:flex-start;gap:28px;
}
.welcome-heading{
  font-size:2rem;font-weight:300;letter-spacing:.02em;opacity:.9;
}
.logo img{max-width:220px;height:auto;border-radius:8px}
.tagline{display:flex;align-items:flex-start;gap:14px}
.tagline-border{
  width:3px;min-height:64px;flex-shrink:0;border-radius:2px;
  background:linear-gradient(to bottom,#38b2ac,#4299e1);
}
.tagline p{font-size:.9rem;line-height:1.75;opacity:.85;font-weight:400}

/* ── Auth cards (right) ── */
.login-card,.forgot-password-card,.registration-card{
  width:420px;max-width:calc(100vw - 32px);min-width:320px;
  background:rgba(255,255,255,0.08);border-radius:16px;
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,0.18);
  padding:40px;margin:24px 48px 24px auto;
  box-shadow:0 24px 64px rgba(0,0,0,.35);
  position:relative;z-index:1;
  max-height:calc(100vh - 48px);overflow-y:auto;
}

/* ── Login header ── */
.login-header{text-align:center;margin-bottom:28px}
.login-logo{
  display:inline-block;
  background:transparent;
  border-radius:0;
  padding:0;
  margin-bottom:14px;
}
.login-logo-img{display:block;max-width:160px;height:auto;mix-blend-mode:screen}
.login-subtitle{font-size:.82rem;color:rgba(255,255,255,.75);margin-top:4px}

/* Brand-side logo: no extra dark wrapper needed — video overlay handles it */
.brand-content .logo img{background:transparent;border-radius:0;padding:0;mix-blend-mode:screen}

/* ── Alerts ── */
.alert{
  padding:10px 14px;border-radius:8px;font-size:12.5px;
  margin-bottom:16px;display:none;line-height:1.4;
}
.alert-danger{background:#fff5f5;color:#c53030;border:1px solid #fed7d7}
.alert-success{background:#f0fff4;color:#276749;border:1px solid #9ae6b4}
.alert-info{background:#ebf8ff;color:#2b6cb0;border:1px solid #90cdf4}
.error-message{font-size:11.5px;color:#e53e3e;margin-top:5px;display:none}

/* ── Form elements ── */
.form-group{margin-bottom:18px}
.form-group label{
  display:block;font-size:.82rem;font-weight:600;
  color:rgba(255,255,255,.9);margin-bottom:6px;
}
.form-control{
  display:block;width:100%;padding:10px 13px;
  border:1px solid #cbd5e0;border-radius:8px;
  font-size:13.5px;color:#2d3748;background:#fff;
  transition:border-color .18s,box-shadow .18s;
  font-family:'Segoe UI',Arial,sans-serif;
}
.form-control:focus{
  outline:none;border-color:#4299e1;
  box-shadow:0 0 0 3px rgba(66,153,225,.15);
}
.form-control.error{border-color:#fc8181}
.form-control.success{border-color:#68d391}

/* ── Form actions row ── */
.form-actions{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:20px;gap:8px;
}
.remember-me{
  display:flex;align-items:center;gap:7px;
  font-size:.82rem;color:rgba(255,255,255,.8);cursor:pointer;
}
.remember-me input{width:14px;height:14px;cursor:pointer;accent-color:#4299e1}
a.forgot-password{font-size:.82rem;color:#4299e1;text-decoration:none;white-space:nowrap}
a.forgot-password:hover{text-decoration:underline}

/* ── Buttons ── */
.btn-login{
  display:block;width:100%;padding:12px;
  background:linear-gradient(135deg,#4299e1,#3182ce);
  color:#fff;border:none;border-radius:8px;
  font-size:14.5px;font-weight:700;cursor:pointer;
  letter-spacing:.02em;transition:opacity .18s,transform .1s;
}
.btn-login:hover{opacity:.92;transform:translateY(-1px)}
.btn-login:active{transform:translateY(0)}

.btn-next{
  display:block;width:100%;padding:11px;
  background:#38b2ac;color:#fff;border:none;
  border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;
}
.btn-next:hover{background:#319795}
.btn-prev{
  padding:11px 20px;background:#fff;border:1px solid #cbd5e0;
  border-radius:8px;font-size:14px;font-weight:600;
  color:#4a5568;cursor:pointer;
}
.btn-prev:hover{background:#f7fafc}
.btn-submit{
  padding:11px 24px;background:#48bb78;border:none;
  border-radius:8px;font-size:14px;font-weight:600;
  color:#fff;cursor:pointer;
}
.btn-submit:hover{background:#38a169}
.btn-reset-password{
  display:block;width:100%;padding:11px;
  background:#667eea;color:#fff;border:none;
  border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;
}
.btn-reset-password:hover{background:#5a67d8}

/* ── Footer links ── */
.login-footer,.forgot-password-footer,.registration-footer{
  text-align:center;margin-top:22px;font-size:.82rem;color:rgba(255,255,255,.7);
}
.login-footer a,.forgot-password-footer a,.registration-footer a{
  color:#4299e1;text-decoration:none;font-weight:600;
}
.login-footer a:hover,.forgot-password-footer a:hover,.registration-footer a:hover{
  text-decoration:underline;
}

/* ── Forgot password header ── */
.forgot-password-header,.registration-header{
  text-align:center;margin-bottom:24px;
}
.forgot-password-title,.registration-title{
  font-size:1.25rem;font-weight:700;color:#fff;
}
.forgot-password-subtitle,.registration-subtitle{
  font-size:.82rem;color:rgba(255,255,255,.7);margin-top:6px;
}

/* ── Registration step action buttons ── */
.registration-step .form-actions{
  display:flex;justify-content:space-between;gap:10px;margin-top:4px;
}
.registration-step .btn-submit{min-width:110px}

/* ── Responsive ── */
@media(max-width:860px){
  .brand-content{display:none}
  .login-card,.forgot-password-card,.registration-card{
    margin:auto;max-height:none;
  }
  .login-container{justify-content:center;align-items:flex-start;padding:20px 16px;min-height:100vh}
  body.indxo-auth-layout{overflow-y:auto}
}
@media(max-width:480px){
  .login-card,.forgot-password-card,.registration-card{padding:28px 20px}
}