/* lw-login.css */

/* Variables + Universal full-page gradient (no seam) */
body.login{
  --lw-pink:#ff44cb;
  --lw-pink-2:#ff05b9;
  --lw-ink:#111827;
  --lw-muted:#6b7280;
  --lw-line:rgba(17,24,39,.10);

  font-family: Outfit, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--lw-ink);
  margin: 0;

  background:
    radial-gradient(1100px 620px at 18% 22%, rgba(255,68,203,.18), transparent 62%),
    radial-gradient(900px 620px at 85% 18%, rgba(168,85,247,.12), transparent 62%),
    radial-gradient(900px 700px at 70% 88%, rgba(59,130,246,.08), transparent 65%),
    linear-gradient(135deg, #FFF7FD 0%, #F2E9FF 55%, #EAF3FF 100%);
  background-attachment: fixed;
}

/* Layout wrapper */
body.login .fls_login_page_wrap.fls_layout_banner_left{
  min-height: 100vh;
  display: flex !important;
  align-items: stretch;
  gap: 0 !important;
}

/* Make BOTH columns transparent so body gradient shows behind them */
body.login .fls_login_cusom_content_wrap,
body.login .fls_login_form_wrap{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Optional: slight overlay behind right side only */
body.login .fls_login_form_wrap{
  flex: 1 1 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 56px 36px;
  background: rgba(255,255,255,.20) !important;
}

/* LEFT PANEL */
body.login .fls_login_cusom_content_wrap{
  flex: 1 1 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 56px 36px;
}

body.login .fls_login_cusom_content_inner{
  text-align: center;
  max-width: 520px;
}

body.login .fls_banner_header_logo img{
  width: min(200px, 60%);
  height: auto;
  display: inline-block;
  filter: drop-shadow(0 10px 22px rgba(17,24,39,.10));
  margin-bottom: 18px;
}

body.login .fls_login_cusom_content_inner h1{
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.1;
  margin: 0 0 8px;
  letter-spacing: -0.02em;
}

body.login .fls_login_cusom_content_inner p{
  margin: 0;
  color: rgba(17,24,39,.60);
  font-weight: 600;
}

/* Card */
body.login .fls_form_wrap{
  width: min(560px, 100%);
  padding: 0 !important;
  border-radius: 26px;
  overflow: hidden;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(17,24,39,.06);
  box-shadow: 0 24px 70px rgba(17,24,39,.12);
}

/* Hide WP logo */
body.login #login h1.wp-login-logo,
body.login #login h1 a{ display:none !important; }

/* Header */
body.login .fls_login_header{
  margin: 0 !important;
  padding: 24px 26px 20px;
  background: linear-gradient(135deg, var(--lw-pink), var(--lw-pink-2));
  border-bottom: 1px solid rgba(255,255,255,.25);
  position: relative; /* IMPORTANT for :after */
}

body.login .fls_login_header:after{
  content:"";
  position:absolute;
  inset:-55% -25% auto -25%;
  height: 170px;
  background: radial-gradient(closest-side at 35% 60%, rgba(255,255,255,.30), transparent 65%);
  pointer-events:none;
}

body.login .fls_login_header h1{
  margin: 0 0 6px;
  color: #fff !important;
  font-size: 24px;
  letter-spacing: -0.02em;
}

body.login .fls_login_header p{
  margin: 0;
  color: rgba(255,255,255,.85) !important;
  font-size: 13px;
  font-weight: 600;
}

/* Form spacing */
body.login #login{ width: 100% !important; padding: 0 !important; }

body.login #loginform{
  padding: 18px 26px 22px !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

body.login #loginform p{ margin: 0 0 14px !important; }

body.login .login label{
  font-weight: 800;
  font-size: 13px;
  color: rgba(17,24,39,.82);
  margin-bottom: 6px;
}

/* Inputs */
body.login #loginform .input,
body.login #loginform input[type="text"],
body.login #loginform input[type="password"],
body.login #loginform input[type="email"]{
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
  height: 48px;
  border-radius: 14px;
  border: 1px solid rgba(17,24,39,.12);
  background: rgba(255,255,255,.98);
  padding: 12px 14px;
  font-size: 14px;
  color: var(--lw-ink);
  box-shadow: none;
}

body.login #loginform input:focus{
  border-color: rgba(255,68,203,.45);
  box-shadow: 0 0 0 3px rgba(255,68,203,.14);
  outline: none;
}

/* Remember me */
body.login .forgetmenot{ margin: 8px 0 2px !important; }
body.login #rememberme{ accent-color: var(--lw-pink); }

/* Buttons */
body.login #wp-submit{
  width: 100% !important;
  height: 50px;
  border: 0 !important;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--lw-pink), var(--lw-pink-2)) !important;
  color: #fff !important;
  font-weight: 900;
}
body.login #wp-submit:hover{ filter: brightness(1.03); }

body.login .fls_magic_show_btn,
body.login .fls_magic_show_btn.button,
body.login .fls_magic_show_btn.button.button-primary{
  width: 100% !important;
  height: 48px;
  border-radius: 14px !important;
  border: 1px solid rgba(255,68,203,.45) !important;
  background: rgba(255,255,255,.96) !important;
  color: var(--lw-ink) !important;
  font-weight: 900 !important;
  box-shadow: 0 10px 22px rgba(17,24,39,.06);
}
body.login .fls_magic_show_btn:hover{
  box-shadow: 0 0 0 4px rgba(255,68,203,.10), 0 10px 22px rgba(17,24,39,.06);
}

/* OR divider */
body.login .fls_or_wrap{ margin: 18px 0 14px; }
body.login .fls_magic-or{ position: relative; text-align: center; }
body.login .fls_magic-or:before{
  content:"";
  position:absolute;
  left:0; right:0;
  top:50%;
  height:1px;
  background: rgba(17,24,39,.10);
}
body.login .fls_magic-or span{
  position: relative;
  display: inline-block;
  padding: 0 12px;
  background: rgba(255,255,255,.92);
  color: rgba(17,24,39,.55);
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .06em;
}

/* Links */
body.login #nav{
  padding: 0 26px 18px !important;
  margin: 0 !important;
}
body.login #nav a{
  color: rgba(17,24,39,.72);
  font-weight: 800;
  text-decoration: none;
}
body.login #nav a:hover{ color: var(--lw-pink); text-decoration: underline; }

body.login #backtoblog{ display:none; }

/* Responsive */
@media (max-width: 980px){
  body.login .fls_login_page_wrap.fls_layout_banner_left{ flex-direction: column; }
  body.login .fls_login_cusom_content_wrap,
  body.login .fls_login_form_wrap{ padding: 34px 16px; }
}


/* MAGIC "Continue" button = same as Log In button */
body.login #fls_magic_submit,
body.login #fls_magic_submit.button.button-primary.button-large{
  width: 100% !important;
  height: 50px !important;
  line-height: 50px !important;
  padding: 0 16px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, var(--lw-pink), var(--lw-pink-2)) !important;
  color: #fff !important;
  font-weight: 900 !important;
  text-shadow: none !important;
  box-shadow: none !important;
  display: block !important;
  float: none !important; /* overrides WP float:right */
}

body.login .fls_magic_input{
  width: 100% !important;
  height: 48px;
  border-radius: 14px;
  border: 1px solid rgba(17,24,39,.12);
  background: rgba(255,255,255,.98);
  padding: 12px 14px;
  font-size: 14px;
  font-weight: 600;
  color: var(--lw-ink);
  box-sizing: border-box;
}
body.login .fls_magic_input:focus{
  border-color: rgba(255,68,203,.45);
  box-shadow: 0 0 0 3px rgba(255,68,203,.14);
  outline: none;
}


/* Make "Use Regular Login form" look like "Login Via Magic URL" button */
body.login .fls_magic_show_regular{
  width: 100% !important;
  height: 48px !important;
  line-height: 48px !important;
  padding: 0 16px !important;

  border-radius: 14px !important;
  border: 1px solid rgba(255,68,203,.45) !important;
  background: rgba(255,255,255,.96) !important;

  color: var(--lw-ink) !important;
  font-weight: 900 !important;

  box-shadow: 0 10px 22px rgba(17,24,39,.06) !important;
  cursor: pointer !important;

  display: block !important;
  text-align: center;
  text-decoration: none;
}
body.login .fls_magic_show_regular:hover{
  box-shadow: 0 0 0 4px rgba(255,68,203,.10), 0 10px 22px rgba(17,24,39,.06) !important;
}

/* SAME padding for Login + Register + Lost Password forms */
body.login #loginform,
body.login #registerform,
body.login #lostpasswordform{
  padding: 18px 26px 22px !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* SAME labels for all forms */
body.login #loginform label,
body.login #registerform label,
body.login #lostpasswordform label{
  font-weight: 800;
  font-size: 13px;
  color: rgba(17,24,39,.82);
  margin-bottom: 6px;
  display: inline-block;
}

/* SAME input style for all forms (this is the main fix) */
body.login #loginform .input,
body.login #registerform .input,
body.login #lostpasswordform .input{
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
  height: 48px;
  border-radius: 14px;
  border: 1px solid rgba(17,24,39,.12);
  background: rgba(255,255,255,.98);
  padding: 12px 14px;
  font-size: 14px;
  color: var(--lw-ink);
  box-shadow: none;
}

body.login #registerform .input:focus,
body.login #lostpasswordform .input:focus{
  border-color: rgba(255,68,203,.45);
  box-shadow: 0 0 0 3px rgba(255,68,203,.14);
  outline: none;
}

/* Remove WP default blue border + shadow on notices (register / lost password / etc.) */
body.login #login .message,
body.login #login .notice,
body.login #login_error,
body.login .success{
  border-left: 0 !important;
  box-shadow: none !important;

  /* match your clean card style */
  background: rgba(255,255,255,.92) !important;
 
  

  padding: 12px 26px !important;   /* same left/right as form */
  margin: 0 0 16px !important;
  color: rgba(17,24,39,.75) !important;
}

body.login #login .message p,
body.login #login .notice p,
body.login #login_error p{
  margin: 0 !important;
  font-weight: 600;
  font-size: 13px;
  line-height: 1.5;
}