/* FokatLoot V129 auth pages — top-aligned mobile premium layout */
:root{
  --auth-bg:#cfdbe7;
  --auth-bg2:#d9e4ee;
  --auth-card:#dfe8f1;
  --auth-card2:#d6e2ec;
  --auth-line:#b9c9d8;
  --auth-ink:#10233d;
  --auth-muted:#5e728b;
  --auth-blue:#0e73ed;
  --auth-blue2:#2f93ff;
}
html,body{width:100%;max-width:100%;overflow-x:hidden}
body[data-fl-page="login"],
body[data-fl-page="register"],
body[data-fl-page="forgot_password"]{
  min-height:100svh!important;
  height:100svh!important;
  overflow:hidden!important;
  background:
    radial-gradient(circle at 82% 4%,rgba(47,147,255,.10),transparent 24%),
    linear-gradient(180deg,var(--auth-bg),var(--auth-bg2) 55%,#e5edf5 100%)!important;
  color:var(--auth-ink)!important;
}
body[data-fl-page="login"] .auth-center,
body[data-fl-page="register"] .auth-center,
body[data-fl-page="forgot_password"] .auth-center{
  height:100svh!important;
  min-height:100svh!important;
  display:flex!important;
  align-items:flex-start!important;
  justify-content:center!important;
  overflow:hidden!important;
  padding:14px 10px 8px!important;
}
body[data-fl-page="login"] .wrapper,
body[data-fl-page="register"] .wrapper,
body[data-fl-page="forgot_password"] .wrapper{
  width:min(100%,420px)!important;
  max-width:420px!important;
  min-height:0!important;
  margin:0 auto!important;
  padding:0!important;
  transform:none!important;
  zoom:1!important;
}
body[data-fl-page="login"] .logo-box,
body[data-fl-page="register"] .logo-box,
body[data-fl-page="forgot_password"] .logo-box{
  margin:0 0 9px!important;
  text-align:center!important;
}
body[data-fl-page="login"] .logo,
body[data-fl-page="register"] .logo,
body[data-fl-page="forgot_password"] .logo{
  width:50px!important;height:50px!important;
  margin:0 auto 6px!important;
  border-radius:15px!important;
  background:#05070c!important;
  border:1px solid rgba(255,255,255,.72)!important;
  box-shadow:0 10px 24px rgba(30,57,92,.13)!important;
}
body[data-fl-page="login"] .site-name,
body[data-fl-page="register"] .site-name,
body[data-fl-page="forgot_password"] .site-name{
  font-size:22px!important;
  line-height:1.05!important;
  font-weight:800!important;
  letter-spacing:-.3px!important;
  color:var(--auth-ink)!important;
  margin:0!important;
}
body[data-fl-page="login"] .site-sub,
body[data-fl-page="register"] .site-sub,
body[data-fl-page="forgot_password"] .site-sub{
  display:block!important;
  margin-top:3px!important;
  font-size:10px!important;
  line-height:1.25!important;
  color:var(--auth-muted)!important;
}
body[data-fl-page="login"] .card,
body[data-fl-page="register"] .card,
body[data-fl-page="forgot_password"] .card{
  padding:15px!important;
  border-radius:22px!important;
  background:linear-gradient(160deg,var(--auth-card),var(--auth-card2))!important;
  border:1px solid var(--auth-line)!important;
  box-shadow:0 14px 32px rgba(30,57,92,.10)!important;
  backdrop-filter:none!important;
}
body[data-fl-page="login"] .form-group,
body[data-fl-page="register"] .form-group,
body[data-fl-page="forgot_password"] .form-group{margin-bottom:9px!important}
body[data-fl-page="login"] label,
body[data-fl-page="register"] label,
body[data-fl-page="forgot_password"] label{
  margin:0 0 4px!important;
  font-size:11.5px!important;
  line-height:1.25!important;
  font-weight:700!important;
  color:#334b66!important;
}
body[data-fl-page="login"] .input,
body[data-fl-page="register"] .input,
body[data-fl-page="forgot_password"] .input{
  width:100%!important;
  height:46px!important;
  min-height:46px!important;
  padding:0 14px!important;
  border-radius:14px!important;
  border:1px solid #bdcedd!important;
  background:#e5edf4!important;
  color:var(--auth-ink)!important;
  font-size:13px!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.65)!important;
}
body[data-fl-page="login"] .input:focus,
body[data-fl-page="register"] .input:focus,
body[data-fl-page="forgot_password"] .input:focus{
  border-color:#4b9cf3!important;
  box-shadow:0 0 0 3px rgba(47,147,255,.10)!important;
}
body[data-fl-page="login"] .login-btn,
body[data-fl-page="register"] .register-btn,
body[data-fl-page="forgot_password"] button[type="submit"]{
  width:100%!important;
  height:46px!important;
  min-height:46px!important;
  margin-top:3px!important;
  padding:0 14px!important;
  border:0!important;
  border-radius:14px!important;
  background:linear-gradient(135deg,var(--auth-blue2),var(--auth-blue))!important;
  color:#fff!important;
  font-size:13px!important;
  font-weight:800!important;
  box-shadow:0 9px 20px rgba(14,115,237,.19)!important;
}
body[data-fl-page="login"] .links{
  margin-top:9px!important;
  display:flex!important;
  justify-content:space-between!important;
  gap:10px!important;
  font-size:11px!important;
}
body[data-fl-page="register"] .bottom-link,
body[data-fl-page="forgot_password"] .bottom-link{
  margin-top:9px!important;
  font-size:11px!important;
  line-height:1.4!important;
  text-align:center!important;
}
body[data-fl-page="register"] .bottom-link br{display:none!important}
body[data-fl-page="login"] .info-box,
body[data-fl-page="register"] .info-box,
body[data-fl-page="forgot_password"] .info-box,
body[data-fl-page="login"] .auth-support-float,
body[data-fl-page="register"] .auth-support-float,
body[data-fl-page="forgot_password"] .auth-support-float{display:none!important}
.optional-label{
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
  min-height:19px!important;padding:0 7px!important;margin-left:5px!important;
  border-radius:999px!important;background:#d7e2ec!important;border:1px solid #c8d7e5!important;
  color:#5a718b!important;font-size:8.7px!important;font-weight:700!important;vertical-align:middle!important;
}
body[data-fl-page="login"] label[style*="Remember me"]{
  margin:5px 0 6px!important;
  font-size:10.5px!important;
  color:#536b83!important;
}
body[data-fl-page="login"] label[style*="Remember me"] input{width:17px!important;height:17px!important}
body[data-fl-page="login"] .g-recaptcha,
body[data-fl-page="register"] .g-recaptcha,
body[data-fl-page="forgot_password"] .g-recaptcha{
  transform:scale(.86)!important;
  transform-origin:center top!important;
  width:304px!important;max-width:100%!important;
  margin:2px auto -8px!important;
}
@media(max-width:420px){
  body[data-fl-page="login"] .auth-center,
  body[data-fl-page="register"] .auth-center,
  body[data-fl-page="forgot_password"] .auth-center{padding:10px 9px 6px!important}
  body[data-fl-page="login"] .wrapper,
  body[data-fl-page="register"] .wrapper,
  body[data-fl-page="forgot_password"] .wrapper{width:100%!important}
  body[data-fl-page="login"] .card,
  body[data-fl-page="register"] .card,
  body[data-fl-page="forgot_password"] .card{padding:13px!important;border-radius:20px!important}
  body[data-fl-page="login"] .input,
  body[data-fl-page="register"] .input,
  body[data-fl-page="forgot_password"] .input{height:43px!important;min-height:43px!important}
  body[data-fl-page="login"] .login-btn,
  body[data-fl-page="register"] .register-btn{height:44px!important;min-height:44px!important}
}
@media(max-height:760px){
  body[data-fl-page="login"] .auth-center,
  body[data-fl-page="register"] .auth-center,
  body[data-fl-page="forgot_password"] .auth-center{padding-top:6px!important}
  body[data-fl-page="login"] .logo,
  body[data-fl-page="register"] .logo,
  body[data-fl-page="forgot_password"] .logo{width:40px!important;height:40px!important;margin-bottom:4px!important}
  body[data-fl-page="login"] .site-name,
  body[data-fl-page="register"] .site-name,
  body[data-fl-page="forgot_password"] .site-name{font-size:19px!important}
  body[data-fl-page="login"] .site-sub,
  body[data-fl-page="register"] .site-sub,
  body[data-fl-page="forgot_password"] .site-sub{display:none!important}
  body[data-fl-page="login"] .card,
  body[data-fl-page="register"] .card,
  body[data-fl-page="forgot_password"] .card{padding:10px 12px!important}
  body[data-fl-page="login"] .form-group,
  body[data-fl-page="register"] .form-group,
  body[data-fl-page="forgot_password"] .form-group{margin-bottom:5px!important}
  body[data-fl-page="login"] .input,
  body[data-fl-page="register"] .input,
  body[data-fl-page="forgot_password"] .input{height:38px!important;min-height:38px!important}
  body[data-fl-page="login"] .login-btn,
  body[data-fl-page="register"] .register-btn{height:39px!important;min-height:39px!important}
  body[data-fl-page="login"] .g-recaptcha,
  body[data-fl-page="register"] .g-recaptcha{transform:scale(.75)!important;margin-bottom:-18px!important}
}

/* V145: branding must stay visible on every phone height. Older CSS hid .logo-box below 720px. */
body[data-fl-page="login"] .logo-box,
body[data-fl-page="register"] .logo-box,
body[data-fl-page="forgot_password"] .logo-box{display:block!important;visibility:visible!important;opacity:1!important;position:relative!important;z-index:3!important}
body[data-fl-page="login"] .logo img,
body[data-fl-page="register"] .logo img,
body[data-fl-page="forgot_password"] .logo img{display:block!important;width:100%!important;height:100%!important;object-fit:contain!important}
body[data-fl-page="login"] .site-name,
body[data-fl-page="register"] .site-name,
body[data-fl-page="forgot_password"] .site-name{display:block!important;visibility:visible!important;opacity:1!important}
@media(max-height:720px){
  body[data-fl-page="login"] .logo-box,body[data-fl-page="register"] .logo-box{display:block!important;margin-bottom:5px!important}
  body[data-fl-page="login"] .logo,body[data-fl-page="register"] .logo{width:40px!important;height:40px!important;margin-bottom:3px!important}
  body[data-fl-page="login"] .site-name,body[data-fl-page="register"] .site-name{font-size:18px!important}
}