/* =====================================================================
 * Jannah Popup Login — Match My Account Design (v6.0.9)
 * ===================================================================== */

/* ---------- Modal Card ---------- */
#tie-popup-login .tie-popup-container{
  border-radius:16px !important;
  overflow:hidden !important;
  background:#fff !important;
  box-shadow:0 20px 50px -12px rgba(0,0,0,.35) !important;
  max-width:440px !important;
  width:calc(100vw - 32px) !important;
}
#tie-popup-login .tie-popup-container .widget-container{
  padding:36px 32px 32px !important;
  background:#fff !important;
  border-radius:16px !important;
  margin:0 !important;
}
#tie-popup-login .tie-popup-close{
  color:#64748b !important;
  transition:color .18s ease !important;
}
#tie-popup-login .tie-popup-close:hover{ color:#111827 !important; }

/* ---------- Title ---------- */
#tie-popup-login h2,
#tie-popup-login .login-title,
#tie-popup-login .tie-popup-login-title{
  font-size:24px !important;
  font-weight:800 !important;
  letter-spacing:-0.02em !important;
  margin:0 0 24px !important;
  text-align:center !important;
  color:#0f172a !important;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif !important;
}

/* ---------- Form base ---------- */
#tie-popup-login form{
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif !important;
}

/* ---------- Row: Label + Input ---------- */
#tie-popup-login form .jcs-popup-row{
  margin:0 0 16px !important;
  padding:0 !important;
  clear:both !important;
  display:block !important;
  width:100% !important;
  float:none !important;
}
#tie-popup-login form .jcs-popup-row label{
  display:block !important;
  font-weight:600 !important;
  font-size:14px !important;
  margin:0 0 8px !important;
  color:#0f172a !important;
  padding:0 !important;
  float:none !important;
  width:auto !important;
  line-height:1.4 !important;
}
#tie-popup-login form .jcs-popup-row .jcs-required{
  color:#dc2626 !important;
  text-decoration:none !important;
  font-weight:400 !important;
}

/* ---------- Inputs ---------- */
#tie-popup-login form .jcs-popup-row input[type="text"],
#tie-popup-login form .jcs-popup-row input[type="password"],
#tie-popup-login form .jcs-popup-row input[type="email"]{
  width:100% !important;
  height:48px !important;
  padding:0 14px !important;
  border:1px solid #cbd5e1 !important;
  border-radius:10px !important;
  background:#fff !important;
  color:#0f172a !important;
  font-size:15px !important;
  font-family:inherit !important;
  transition:border-color .18s ease, box-shadow .18s ease, background .18s ease !important;
  box-sizing:border-box !important;
  box-shadow:none !important;
  float:none !important;
  margin:0 !important;
}
#tie-popup-login form .jcs-popup-row input[type="text"]:hover,
#tie-popup-login form .jcs-popup-row input[type="password"]:hover{
  border-color:#94a3b8 !important;
}
#tie-popup-login form .jcs-popup-row input[type="text"]:focus,
#tie-popup-login form .jcs-popup-row input[type="password"]:focus{
  outline:0 !important;
  border-color:#111827 !important;
  box-shadow:0 0 0 4px rgba(17,24,39,.09) !important;
}

/* ---------- Password Wrapper + Eye ---------- */
#tie-popup-login form .jcs-popup-pw-wrap{
  position:relative !important;
  display:block !important;
  width:100% !important;
}
#tie-popup-login form .jcs-popup-pw-wrap input{
  padding-right:52px !important;
}
#tie-popup-login form .jcs-popup-eye{
  position:absolute !important;
  right:6px !important;
  top:50% !important;
  transform:translateY(-50%) !important;
  width:36px !important;
  height:36px !important;
  padding:0 !important;
  margin:0 !important;
  border:0 !important;
  background:transparent !important;
  color:#64748b !important;
  border-radius:8px !important;
  cursor:pointer !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  z-index:2 !important;
  transition:background .18s ease, color .18s ease !important;
  box-shadow:none !important;
}
#tie-popup-login form .jcs-popup-eye:hover{
  background:#f1f5f9 !important;
  color:#111827 !important;
}
#tie-popup-login form .jcs-popup-eye:focus-visible{
  outline:2px solid #111827 !important;
  outline-offset:2px !important;
}
#tie-popup-login form .jcs-popup-eye svg{
  display:block !important;
  pointer-events:none !important;
}
#tie-popup-login form .jcs-popup-eye ~ .jcs-popup-eye{
  display:none !important;
}

/* ---------- Meta Row: Remember me + Log in ---------- */
#tie-popup-login form .jcs-popup-meta-row{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:12px !important;
  margin:4px 0 18px !important;
  padding:0 !important;
  width:100% !important;
  float:none !important;
  flex-wrap:wrap !important;
}
#tie-popup-login form .jcs-popup-remember{
  display:inline-flex !important;
  align-items:center !important;
  gap:8px !important;
  font-size:14px !important;
  color:#475569 !important;
  font-weight:500 !important;
  cursor:pointer !important;
  margin:0 !important;
  padding:0 !important;
  width:auto !important;
  float:none !important;
  line-height:1.4 !important;
}
#tie-popup-login form .jcs-popup-remember input[type="checkbox"]{
  width:16px !important;
  height:16px !important;
  margin:0 !important;
  flex:0 0 auto !important;
  accent-color:#111827 !important;
  float:none !important;
}
#tie-popup-login form .jcs-popup-remember span{
  font-size:14px !important;
  color:#475569 !important;
}

/* ---------- Log in button ---------- */
#tie-popup-login form .jcs-popup-submit-btn{
  height:48px !important;
  padding:0 28px !important;
  min-width:110px !important;
  border:0 !important;
  border-radius:10px !important;
  background:#111827 !important;
  color:#fff !important;
  font-weight:700 !important;
  font-size:15px !important;
  font-family:inherit !important;
  cursor:pointer !important;
  box-shadow:0 8px 18px -6px rgba(17,24,39,.35) !important;
  transition:background .18s ease, box-shadow .18s ease, transform .08s ease !important;
  white-space:nowrap !important;
  margin:0 !important;
  width:auto !important;
  float:none !important;
  letter-spacing:.01em !important;
}
#tie-popup-login form .jcs-popup-submit-btn:hover{
  background:#030712 !important;
  box-shadow:0 10px 22px -6px rgba(17,24,39,.45) !important;
}
#tie-popup-login form .jcs-popup-submit-btn:active{
  transform:translateY(1px) !important;
}
#tie-popup-login form .jcs-popup-submit-btn:focus-visible{
  outline:3px solid #c7d2fe !important;
  outline-offset:2px !important;
}
#tie-popup-login form .jcs-popup-submit-btn:disabled{
  opacity:.75 !important;
  cursor:wait !important;
}

/* ---------- Forgot row ---------- */
#tie-popup-login form .jcs-popup-forgot-row{
  text-align:center !important;
  margin:0 0 16px !important;
  padding:0 !important;
  font-size:13px !important;
  float:none !important;
}
#tie-popup-login form .jcs-popup-forgot-row a{
  color:#64748b !important;
  font-size:13px !important;
  font-weight:500 !important;
  text-decoration:underline !important;
  text-underline-offset:2px !important;
  transition:color .18s ease !important;
}
#tie-popup-login form .jcs-popup-forgot-row a:hover{
  color:#111827 !important;
}

/* ---------- Register row ---------- */
#tie-popup-login form .jcs-popup-register-row{
  text-align:center !important;
  margin:0 !important;
  padding-top:16px !important;
  border-top:1px solid #e2e8f0 !important;
  font-size:14px !important;
  color:#64748b !important;
  float:none !important;
}
#tie-popup-login form .jcs-popup-register-row a{
  color:#111827 !important;
  font-weight:700 !important;
  text-decoration:underline !important;
  margin-left:4px !important;
  text-underline-offset:2px !important;
}
#tie-popup-login form .jcs-popup-register-row a:hover{
  opacity:.8 !important;
}

/* ---------- Caps Lock warning ---------- */
#tie-popup-login form .jcs-popup-caps{
  display:none;
  align-items:center;
  gap:6px;
  margin-top:8px;
  padding:8px 12px;
  background:#fffbeb;
  border:1px solid #fde68a;
  border-radius:8px;
  color:#92400e;
  font-size:12.5px;
  font-weight:600;
}
#tie-popup-login form .jcs-popup-caps.is-active{
  display:inline-flex;
}
#tie-popup-login form .jcs-popup-caps svg{
  flex:0 0 auto;
}

/* ---------- Error box ---------- */
#tie-popup-login form .jcs-popup-login-error{
  margin:0 0 15px !important;
  padding:10px 12px !important;
  border:1px solid #fecaca !important;
  background:#fef2f2 !important;
  color:#991b1b !important;
  border-radius:10px !important;
  font-size:14px !important;
  line-height:1.5 !important;
  font-weight:500 !important;
}

/* ---------- Responsive ---------- */
@media (max-width:480px){
  #tie-popup-login .tie-popup-container .widget-container{
    padding:26px 20px 22px !important;
  }
  #tie-popup-login h2,
  #tie-popup-login .login-title{
    font-size:22px !important;
    margin-bottom:20px !important;
  }
  #tie-popup-login form .jcs-popup-meta-row{
    gap:10px !important;
  }
  #tie-popup-login form .jcs-popup-submit-btn{
    padding:0 22px !important;
    min-width:100px !important;
  }
}

/* ---------- Dark Mode ---------- */
@media (prefers-color-scheme:dark){
  #tie-popup-login .tie-popup-container{
    background:#0f172a !important;
    box-shadow:0 20px 50px -12px rgba(0,0,0,.7) !important;
  }
  #tie-popup-login .tie-popup-container .widget-container{
    background:#0f172a !important;
  }
  #tie-popup-login h2,
  #tie-popup-login .login-title{
    color:#f1f5f9 !important;
  }
  #tie-popup-login form .jcs-popup-row label{
    color:#f1f5f9 !important;
  }
  #tie-popup-login form .jcs-popup-row input[type="text"],
  #tie-popup-login form .jcs-popup-row input[type="password"],
  #tie-popup-login form .jcs-popup-row input[type="email"]{
    background:#1e293b !important;
    border-color:#334155 !important;
    color:#f1f5f9 !important;
  }
  #tie-popup-login form .jcs-popup-row input[type="text"]:hover,
  #tie-popup-login form .jcs-popup-row input[type="password"]:hover{
    border-color:#475569 !important;
  }
  #tie-popup-login form .jcs-popup-row input[type="text"]:focus,
  #tie-popup-login form .jcs-popup-row input[type="password"]:focus{
    border-color:#94a3b8 !important;
    box-shadow:0 0 0 3px rgba(148,163,184,.2) !important;
  }
  #tie-popup-login form .jcs-popup-eye{
    color:#94a3b8 !important;
  }
  #tie-popup-login form .jcs-popup-eye:hover{
    background:#334155 !important;
    color:#f1f5f9 !important;
  }
  #tie-popup-login form .jcs-popup-remember,
  #tie-popup-login form .jcs-popup-remember span{
    color:#94a3b8 !important;
  }
  #tie-popup-login form .jcs-popup-forgot-row a{
    color:#94a3b8 !important;
  }
  #tie-popup-login form .jcs-popup-forgot-row a:hover{
    color:#f1f5f9 !important;
  }
  #tie-popup-login form .jcs-popup-register-row{
    border-color:#334155 !important;
    color:#94a3b8 !important;
  }
  #tie-popup-login form .jcs-popup-register-row a{
    color:#f1f5f9 !important;
  }
  #tie-popup-login form .jcs-popup-caps{
    background:#422006 !important;
    border-color:#78350f !important;
    color:#fcd34d !important;
  }
  #tie-popup-login form .jcs-popup-submit-btn{
    background:#f1f5f9 !important;
    color:#0f172a !important;
    box-shadow:0 8px 18px -6px rgba(241,245,249,.2) !important;
  }
  #tie-popup-login form .jcs-popup-submit-btn:hover{
    background:#e2e8f0 !important;
  }
  #tie-popup-login form .jcs-popup-login-error{
    background:#3f1d1d !important;
    border-color:#7f1d1d !important;
    color:#fecaca !important;
  }
  #tie-popup-login .tie-popup-close{
    color:#94a3b8 !important;
  }
  #tie-popup-login .tie-popup-close:hover{
    color:#f1f5f9 !important;
  }
}

/* ---------- Reduced Motion ---------- */
@media (prefers-reduced-motion:reduce){
  #tie-popup-login *,
  #tie-popup-login *::before,
  #tie-popup-login *::after{
    transition-duration:.01ms !important;
    animation-duration:.01ms !important;
  }
}

/* v6.1.1 — Shared visual system with WooCommerce My Account login */
#tie-popup-login .tie-popup-container{max-width:440px !important;width:calc(100vw - 32px) !important;border-radius:16px !important;}
#tie-popup-login .tie-popup-container .widget-container{padding:36px 32px 32px !important;border-radius:16px !important;}
#tie-popup-login form .jcs-popup-row{margin-bottom:18px !important;}
#tie-popup-login form .jcs-popup-row input[type="text"],
#tie-popup-login form .jcs-popup-row input[type="password"],
#tie-popup-login form .jcs-popup-row input[type="email"]{height:48px !important;border-radius:10px !important;}
#tie-popup-login form .jcs-popup-submit-btn{height:48px !important;min-width:110px !important;padding:0 28px !important;border-radius:10px !important;}
#tie-popup-login form .jcs-popup-meta-row{margin:4px 0 18px !important;}
@media(max-width:480px){#tie-popup-login .tie-popup-container .widget-container{padding:26px 20px 22px !important;}}
/* The approved design stays white/navy even when the device uses dark mode. */
@media(prefers-color-scheme:dark){
  #tie-popup-login .tie-popup-container,
  #tie-popup-login .tie-popup-container .widget-container{background:#fff !important;}
  #tie-popup-login h2,#tie-popup-login .login-title,#tie-popup-login .tie-popup-login-title{color:#0f172a !important;}
  #tie-popup-login form .jcs-popup-row label{color:#0f172a !important;}
  #tie-popup-login form .jcs-popup-row input[type="text"],
  #tie-popup-login form .jcs-popup-row input[type="password"],
  #tie-popup-login form .jcs-popup-row input[type="email"]{background:#fff !important;border-color:#cbd5e1 !important;color:#0f172a !important;}
  #tie-popup-login form .jcs-popup-eye{color:#64748b !important;}
  #tie-popup-login form .jcs-popup-remember,#tie-popup-login form .jcs-popup-remember span{color:#475569 !important;}
  #tie-popup-login form .jcs-popup-forgot-row a{color:#64748b !important;}
  #tie-popup-login form .jcs-popup-register-row{border-color:#e2e8f0 !important;color:#64748b !important;}
  #tie-popup-login form .jcs-popup-register-row a{color:#111827 !important;}
  #tie-popup-login form .jcs-popup-submit-btn{background:#111827 !important;color:#fff !important;}
}