/* ============================================================
   SMSCode — AUTH UI (Neon Blade Theme)
   Login / Register / OTP screens.
   Add-on override: PHP/HTML structure is intentionally untouched.
   ============================================================ */

body.auth-body{
  min-height:100vh;
  min-height:100dvh;
  margin:0;
  padding:24px 16px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#05070c !important;
  background-image:
    radial-gradient(circle at 20% 10%, rgba(255, 59, 78, 0.16) 0%, transparent 45%),
    radial-gradient(circle at 85% 85%, rgba(255, 106, 61, 0.10) 0%, transparent 45%),
    radial-gradient(1px 1px at 25% 30%, rgba(255,255,255,.30) 50%, transparent 51%),
    radial-gradient(1px 1px at 70% 60%, rgba(255,255,255,.22) 50%, transparent 51%),
    radial-gradient(1px 1px at 45% 80%, rgba(255,255,255,.26) 50%, transparent 51%);
  color:#f2f4fa;
  font-family:'SF Pro Text','Inter','Segoe UI',system-ui,-apple-system,BlinkMacSystemFont,sans-serif;
  -webkit-font-smoothing: antialiased;
}

body.auth-body #preloader {
  background: #05070c !important;
}

.auth-body::before{
  content:"";
  position:fixed;
  width:320px;
  height:320px;
  top:-160px;
  right:-140px;
  border-radius:50%;
  background:rgba(255, 59, 78, .10);
  filter: blur(10px);
  pointer-events:none;
}

.auth-body::after{
  content:"";
  position:fixed;
  width:260px;
  height:260px;
  bottom:-140px;
  left:-120px;
  border-radius:50%;
  background:rgba(255, 106, 61, .08);
  filter: blur(10px);
  pointer-events:none;
}

.auth-shell{
  width:100%;
  max-width:430px;
  position:relative;
  z-index:1;
}

.auth-card{
  width:100%;
  padding:34px 30px 28px;
  background:linear-gradient(160deg, rgba(18,10,13,.85), rgba(6,4,5,.92)) !important;
  border:1px solid rgba(255, 59, 78, 0.18) !important;
  border-radius:24px !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow:0 24px 70px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.03) !important;
  animation:sms-card-in .45s cubic-bezier(.2,.8,.2,1);
}

@keyframes sms-card-in{
  from{opacity:0;transform:translateY(14px);}
  to{opacity:1;transform:translateY(0);}
}

.brand{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  margin-bottom:24px;
}

.brand-mark{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:48px;
  height:48px;
  padding:0 13px;
  border-radius:15px;
  background:radial-gradient(circle at 30% 20%, #ff6a5a, #d81f34 70%) !important;
  color:#fff !important;
  font-size:15px;
  font-weight:800;
  letter-spacing:-.4px;
  box-shadow:0 0 0 1px rgba(255,255,255,.08), 0 8px 22px rgba(255, 59, 78, .38);
}

.brand-name{
  color:#ffffff !important;
  font-size:20px;
  line-height:1;
  font-weight:800;
  letter-spacing:-.5px;
}

.tagline{
  margin:0 0 24px;
  text-align:center;
  color:#97a0b5 !important;
  font-size:13px;
  line-height:1.7;
}

.tagline strong{
  display:inline-block;
  margin-bottom:3px;
  color:#ffffff !important;
  font-size:17px;
  font-weight:750;
  letter-spacing:-.25px;
}

.auth-card form{
  margin:0;
}

.auth-card label{
  margin:16px 0 7px !important;
  color:#d7dbe6 !important;
  font-size:13px !important;
  font-weight:650 !important;
}

.auth-card input,
.auth-card select,
.auth-card textarea{
  width:100%;
  min-height:50px;
  padding:13px 15px !important;
  border:1px solid rgba(255,255,255,.09) !important;
  border-radius:14px !important;
  background:rgba(255,255,255,.04) !important;
  color:#f2f4fa !important;
  font-size:14px !important;
  box-shadow:none !important;
  outline:none !important;
  -webkit-appearance:none;
  appearance:none;
  transition:border-color .2s ease,box-shadow .2s ease,background .2s ease,transform .2s ease;
}

.auth-card input::placeholder{
  color:#6b7488;
}

.auth-card input:focus,
.auth-card select:focus,
.auth-card textarea:focus{
  border-color:#ff3b4e !important;
  background:rgba(255,255,255,.06) !important;
  box-shadow:0 0 0 4px rgba(255,59,78,.14) !important;
  transform:translateY(-1px);
}

.auth-card .btn,
.auth-card button[type="submit"]{
  min-height:50px;
  margin-top:20px;
  border:0 !important;
  border-radius:14px !important;
  background:linear-gradient(135deg, #ff3b4e, #ff6a3d) !important;
  color:#fff !important;
  font-size:14px;
  font-weight:700;
  letter-spacing:.05px;
  box-shadow:0 12px 26px rgba(255,59,78,.30) !important;
  transition:transform .16s cubic-bezier(.34,1.56,.64,1),box-shadow .2s ease,filter .2s ease;
}

.auth-card .btn:hover,
.auth-card button[type="submit"]:hover{
  filter:brightness(1.08);
  color:#fff !important;
  box-shadow:0 16px 34px rgba(255,59,78,.38) !important;
}

.auth-card .btn:active,
.auth-card button[type="submit"]:active{
  transform:scale(.96);
}

.auth-card .btn-block{
  width:100%;
  display:flex !important;
  align-items:center;
  justify-content:center;
}

.switch-link{
  margin-top:20px;
  padding-top:18px;
  border-top:1px solid rgba(255,255,255,.08);
  text-align:center;
  color:#8b93a8 !important;
  font-size:13px;
}

.switch-link a{
  color:#ff5468 !important;
  font-weight:700;
  text-decoration:none;
}

.switch-link a:hover{
  color:#ff8791 !important;
}

.auth-card .alert{
  margin:0 0 18px;
  padding:13px 14px !important;
  border-radius:13px !important;
  font-size:13px;
  line-height:1.5;
  box-shadow:none !important;
  border:1px solid transparent !important;
}

.auth-card .alert-danger{
  background:rgba(255, 77, 94, .10) !important;
  color:#ff8791 !important;
  border-color:rgba(255, 77, 94, .3) !important;
}

.auth-card .alert-warning{
  background:rgba(255, 176, 32, .10) !important;
  color:#ffcf7a !important;
  border-color:rgba(255, 176, 32, .3) !important;
}

.auth-card .alert-success{
  background:rgba(35, 230, 176, .10) !important;
  color:#7ff2d3 !important;
  border-color:rgba(35, 230, 176, .3) !important;
}

/* OTP screen */
.otp-input-group{
  display:flex;
  align-items:stretch;
  gap:9px !important;
  flex-wrap:nowrap !important;
}

.otp-input-group input{
  flex:1;
  min-width:0 !important;
  text-align:center;
  letter-spacing:5px;
  font-size:18px !important;
  font-weight:750;
}

.otp-input-group button{
  flex:0 0 auto;
  width:auto;
  min-width:92px;
  margin-top:0 !important;
}

.resend-link{
  margin-top:14px !important;
  text-align:center;
  color:#8b93a8 !important;
  font-size:12px !important;
}

.resend-link a{
  color:#ff5468 !important;
  font-weight:700;
}

.resend-link .btn{
  min-height:auto !important;
  margin:0 !important;
  padding:6px 11px !important;
  border:1px solid rgba(255,255,255,.10) !important;
  background:rgba(255,255,255,.05) !important;
  color:#ff8791 !important;
  box-shadow:none !important;
  font-size:12px !important;
}

.info-box{
  background:rgba(255, 59, 78, .08) !important;
  border:1px solid rgba(255, 59, 78, .22) !important;
  border-radius:14px !important;
  color:#ff8791 !important;
}

/* Keep the UI clean on narrow phones */
@media (max-width:620px){
  body.auth-body{
    padding:14px;
    align-items:center;
  }

  .auth-shell{
    max-width:100%;
  }

  .auth-card{
    padding:28px 20px 22px;
    border-radius:21px !important;
    box-shadow:0 16px 46px rgba(0,0,0,.5) !important;
  }

  .brand{
    margin-bottom:20px;
  }

  .tagline{
    margin-bottom:20px;
  }

  .tagline strong{
    font-size:16px;
  }

  .auth-card input,
  .auth-card select,
  .auth-card textarea{
    min-height:49px;
  }

  .otp-input-group{
    gap:8px !important;
  }

  .otp-input-group button{
    min-width:86px;
    padding-left:13px !important;
    padding-right:13px !important;
  }
}

@media (max-width:360px){
  body.auth-body{
    padding:10px;
  }

  .auth-card{
    padding:24px 16px 20px;
  }

  .otp-input-group{
    flex-direction:column;
  }

  .otp-input-group button{
    width:100%;
  }
}

@media (prefers-reduced-motion:reduce){
  .auth-card,
  .auth-card input,
  .auth-card .btn{
    animation:none !important;
    transition:none !important;
  }
}

/* Keep the auth UI dark even if the site ever toggles a light/dark class */
html.dark body.auth-body,
html:not(.dark) body.auth-body{
  background:#05070c !important;
  color:#f2f4fa !important;
}
html.dark body.auth-body .auth-card,
html:not(.dark) body.auth-body .auth-card{
  background:linear-gradient(160deg, rgba(18,10,13,.85), rgba(6,4,5,.92)) !important;
  color:#f2f4fa !important;
}
html.dark body.auth-body .brand-name,
html.dark body.auth-body .tagline strong,
html.dark body.auth-body label,
html:not(.dark) body.auth-body .brand-name,
html:not(.dark) body.auth-body .tagline strong,
html:not(.dark) body.auth-body label{
  color:#ffffff !important;
}
html.dark body.auth-body input,
html.dark body.auth-body select,
html.dark body.auth-body textarea,
html:not(.dark) body.auth-body input,
html:not(.dark) body.auth-body select,
html:not(.dark) body.auth-body textarea{
  background:rgba(255,255,255,.04) !important;
  color:#f2f4fa !important;
}

/* মোবাইল টগল বাটন – প্রয়োজনে auth পেজে না দেখানো (কোনো সাইডবার নেই) */
.mobile-toggle {
  display: none !important;
}