/* ============================================================================
   SMS Mobilo — auth.css  |  Primary #0760BB  Accent #F5870E
   ============================================================================ */
:root{--smm-primary:#0760BB;--smm-primary-dark:#054d96;--smm-primary-light:#e8f0fb;--smm-accent:#F5870E;--smm-radius:.75rem}

body.auth-body{
  background: linear-gradient(135deg,#eaf1fc 0%,#f5f8ff 60%,#fff3e8 100%);
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:'Inter','Segoe UI',system-ui,-apple-system,sans-serif;
}

.auth-card{
  border:none;
  border-radius:1rem;
  box-shadow:0 8px 40px rgba(7,96,187,.13),0 1px 4px rgba(0,0,0,.06);
  overflow:hidden;
  background:#fff;
}
.auth-card .card-body{padding:2.5rem 2rem}

.auth-header{
  text-align:center;
  margin-bottom:1rem;
}
.auth-header .brand-logo{
  height:44px;
  margin-bottom:.875rem;
}
.auth-header h5{
  font-size:1.2rem;
  font-weight:700;
  color:#1a2332;
  margin-bottom:.25rem;
}
.auth-header p{
  color:#64748b;
  font-size:.875rem;
  margin:0;
}

/* Decorated top border */
.auth-card::before{
  content:'';
  display:block;
  height:4px;
  background:linear-gradient(90deg,var(--smm-primary) 0%,var(--smm-accent) 100%);
}

/* Form controls */
.form-control,.form-select{
  border-radius:.55rem;
  border:1.5px solid #e2e8f0;
  padding:.6rem .875rem;
  font-size:.9rem;
  transition:border-color .15s,box-shadow .15s;
}
.form-control:focus,.form-select:focus{
  border-color:var(--smm-primary);
  box-shadow:0 0 0 .2rem rgba(7,96,187,.14);
  outline:none;
}
.form-label{font-weight:600;font-size:.85rem;color:#374151;margin-bottom:.35rem}
.input-group .form-control{border-radius:.55rem 0 0 .55rem}
.input-group .btn{border-radius:0 .55rem .55rem 0}

/* Auth button */
.btn-auth{
  background:var(--smm-primary);
  border-color:var(--smm-primary);
  color:#fff;
  font-weight:600;
  padding:.65rem 1.5rem;
  border-radius:.55rem;
  font-size:.9rem;
  transition:background .15s,transform .1s,box-shadow .15s;
  width:100%;
}
.btn-auth:hover{
  background:var(--smm-primary-dark);
  border-color:var(--smm-primary-dark);
  color:#fff;
  box-shadow:0 4px 12px rgba(7,96,187,.3);
}
.btn-auth:active{transform:translateY(1px)}
.btn-auth:disabled{opacity:.7;cursor:not-allowed}

/* Divider */
.auth-divider{
  display:flex;align-items:center;gap:.75rem;
  margin:1.25rem 0;color:#94a3b8;font-size:.82rem;
}
.auth-divider::before,.auth-divider::after{
  content:'';flex:1;height:1px;background:#e2e8f0;
}

/* Links */
a.auth-link{color:var(--smm-primary);font-weight:500;text-decoration:none}
a.auth-link:hover{color:var(--smm-primary-dark);text-decoration:underline}

/* Alert */
#auth-alert{border-radius:.55rem;font-size:.875rem}

/* OTP input */
.otp-input{
  width:3rem!important;
  height:3.2rem;
  font-size:1.4rem;
  font-weight:700;
  text-align:center;
  border-radius:.55rem;
  border:1.5px solid #e2e8f0;
}
.otp-input:focus{
  border-color:var(--smm-primary);
  box-shadow:0 0 0 .2rem rgba(7,96,187,.14);
  outline:none;
}

/* Password strength bar */
.strength-bar{height:4px;border-radius:2px;transition:width .3s,background .3s}
.strength-weak{background:#ef4444}
.strength-fair{background:#f59e0b}
.strength-good{background:#22c55e}
.strength-strong{background:#16a34a}

/* Floating back link */
.auth-back{
  display:inline-flex;align-items:center;gap:.35rem;
  color:#64748b;font-size:.85rem;text-decoration:none;
  margin-bottom:1.25rem;
}
.auth-back:hover{color:var(--smm-primary)}

/* Footer text */
.auth-footer{
  text-align:center;
  margin-top:1.25rem;
  font-size:.82rem;
  color:#94a3b8;
}