.sta-portal-login-form, .sta-portal-signup-form {
  max-width: 380px;
  margin: 40px auto;
  background: #fff;
  padding: 40px 30px 30px 30px;
  border-radius: 24px;
  box-shadow: 0 2px 40px rgba(0,0,0,0.10);
  font-family: 'Inter', Arial, sans-serif;
}
.sta-portal-login-form h2,
.sta-portal-signup-form h2 {
  text-align: center;
  font-size: 1.4rem;
  font-weight: 600;
  margin-bottom: 20px;
}
.sta-portal-error {
  color: #ff3c2b;
  background: #fff3f2;
  padding: 8px 16px;
  border-radius: 12px;
  margin-bottom: 14px;
  text-align: center;
  font-size: 0.98rem;
}
.sta-portal-login-form label,
.sta-portal-signup-form label {
  display: block;
  font-weight: 500;
  margin-bottom: 6px;
  margin-top: 20px;
  color: #2f2f2f;
}
.sta-portal-login-form input,
.sta-portal-signup-form input {
  width: 100% !important;
  padding: 13px 14px !important;
  font-size: 1rem;
  border: 1px solid #e1e2e6;
  border-radius: 30px !important;
  outline: none;
  margin-bottom: 8px !important;
  background: #f9fafd;
  transition: border-color 0.2s;
}
.sta-portal-login-form input:focus,
.sta-portal-signup-form input:focus {
  border-color: #e30b41;
  background: #fff;
}
.sta-portal-login-form button,
.sta-portal-signup-form button {
  display: block;
  width: 100%;
  margin-top: 30px;
  padding: 14px 0;
  background: #e30b41;
  color: #fff;
  border: none;
  border-radius: 30px;
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
  box-shadow: 0 2px 8px rgba(227,11,65,0.08);
}
.sta-portal-login-form button:hover,
.sta-portal-signup-form button:hover {
  background: #c20937;
}
.sta-portal-login-form .sta-social-btn,
.sta-portal-signup-form .sta-social-btn {
  width: 100%;
  margin-bottom: 18px;
  border: none;
  background: #eaf4fb;
  color: #222;
  border-radius: 30px;
  padding: 11px 0;
  font-size: 1.02rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  cursor: pointer;
  transition: background 0.2s;
}
.sta-portal-login-form .sta-social-btn:hover,
.sta-portal-signup-form .sta-social-btn:hover {
  background: #d0e8fa;
}
.sta-portal-login-form .sta-link,
.sta-portal-signup-form .sta-link {
  color: #e30b41;
  font-weight: 500;
  text-decoration: none;
}
.sta-portal-login-form .sta-link:hover,
.sta-portal-signup-form .sta-link:hover {
  text-decoration: underline;
}
.sta-portal-login-form .sta-bottom,
.sta-portal-signup-form .sta-bottom {
  text-align: center;
  margin-top: 18px;
  font-size: 0.97rem;
}

/* Hide/Show Toggle text on Password field*/

/* Password toggle as simple text on the right */
.sta-passwrap{ position:relative; }
.sta-passwrap .sta-pass{ padding-right:72px; }

.sta-toggle-pass {
    position: absolute;
    right: 25px;
    top: 43%;
    transform: translateY(-50%);
    display: inline-block;
    font-size: .9rem;
    color: #757575;
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0;
    line-height: 1;
    cursor: pointer;
    text-transform: UPPERCASE;
}
.sta-toggle-pass:hover{ text-decoration:none; }



@media (max-width: 520px) {
  .sta-portal-login-form, .sta-portal-signup-form {
    max-width: 98vw;
    padding: 18px 7vw 30px 7vw;
    border-radius: 10px;
  }
  .sta-portal-login-form button, .sta-portal-signup-form button,
  .sta-portal-login-form .sta-social-btn, .sta-portal-signup-form .sta-social-btn {
    font-size: 1rem;
    padding: 12px 0;
  }
}

.sta-portal-desc {
  text-align: center;
  margin-bottom: 10px;
  color: #808080;
  font-size: 1.04rem;
}
.sta-portal-success {
  color: #18a058;
  background: #e9faf1;
}

/** Name, Email and Password Validation Code Start **/

/* Inline field messages (signup) */
.sta-field-msg{
  display:block;
  margin-top:6px;
  font-size:.85rem;
  color:#6b7280;
}
input.is-error + .sta-field-msg{ color:#b91c1c; }
input.is-valid + .sta-field-msg{ color:#16a34a; }

/* Optional wrapper states if your markup uses .sta-field */
.sta-field.has-error input{ border-color:#dc2626; background:#fff; }
.sta-field.has-valid input{ border-color:#16a34a; background:#fff; }

/* Password: green check when valid */
#sta-signup-password.is-valid{
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2316a34a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6L9 17l-5-5'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 18px 18px;
  padding-right: 40px; /* space for icon */
}

/* Basic input/error visuals (fallback if theme is minimal) */
input.is-error{ border:1px solid #dc2626; }
input.is-valid{ border:1px solid #16a34a; }

/* Responsive nicety: avoid overflow on narrow screens */
@media (max-width:600px){
  #sta-signup-form .sta-primary-btn{ width:100%; }
}

/* Force green state + check icon for valid password */
#sta-signup-form #sta-signup-password.is-valid{
  border-color:#16a34a !important;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2316a34a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6L9 17l-5-5'/></svg>") !important;
  background-repeat:no-repeat !important;
  background-position:right 12px center !important;
  background-size:18px 18px !important;
  padding-right:42px !important; /* space for icon */
}

/* Make the “Looks good.” text green in all cases */
#sta-signup-form #sta-signup-password.is-valid + .sta-field-msg,
#sta-signup-form .sta-field.has-valid .sta-field-msg,
#sta-signup-form .sta-field-msg.is-ok{
  color:#16a34a !important;
}

/* Ensure error/valid borders show even if theme overrides */
#sta-signup-form input.is-error{ border:1px solid #dc2626 !important; }
#sta-signup-form input.is-valid{ border:1px solid #16a34a !important; }

/* === Signup page: Password checklist (hard specificity + !important) === */
.sta-portal-signup-form .sta-pw-requirements {
  margin-top: 8px !important;
  border: 1px solid #e7ebf2 !important;
  background: #f9fbff !important;
  border-radius: 10px !important;
  padding: 10px 12px !important;
  font-size: .92rem !important;
  color: #374151 !important;
}
.sta-portal-signup-form .sta-pw-requirements.is-ok {
  border-color: #b7eb8f !important;
  background: #f6ffed !important;
}
.sta-portal-signup-form .sta-pw-title {
  font-weight: 600 !important;
  margin-bottom: 6px !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  color: #111827 !important;
}
.sta-portal-signup-form .sta-pw-list {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
.sta-portal-signup-form .sta-pw-list li {
  position: relative !important;
  padding-left: 22px !important;
  margin: 6px 0 !important;
  color: #6b7280 !important;
}
.sta-portal-signup-form .sta-pw-list li::before {
  content: "•" !important;               /* default bullet */
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  line-height: 1.25 !important;
  color: #9ca3af !important;
}

/* Passed rule: make item green + show ✓ */
.sta-portal-signup-form .sta-pw-list li.pass {
  color: #106a2b !important;
}
.sta-portal-signup-form .sta-pw-list li.pass::before {
  content: "\2713" !important;           /* ✓ */
  color: #106a2b !important;
  font-weight: 700 !important;
}

/* Consent note (signup-only) */
.sta-portal-signup-form .sta-consent-note {
  display: block !important;
  margin: 12px 0 10px !important;
  font-size: .85rem !important;
  color: #6b7280 !important;
  line-height: 1.35 !important;
}
.sta-portal-signup-form .sta-consent-note a {
  text-decoration: underline !important;
}

/* === Reset page: Password checklist (hard specificity + !important) === */
.sta-portal-reset-form .sta-pw-requirements {
  margin-top: 8px !important;
  border: 1px solid #e7ebf2 !important;
  background: #f9fbff !important;
  border-radius: 10px !important;
  padding: 10px 12px !important;
  font-size: .92rem !important;
  color: #374151 !important;
}
.sta-portal-reset-form .sta-pw-requirements.is-ok {
  border-color: #b7eb8f !important;
  background: #f6ffed !important;
}
.sta-portal-reset-form .sta-pw-title {
  font-weight: 600 !important;
  margin-bottom: 6px !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  color: #111827 !important;
}
.sta-portal-reset-form .sta-pw-list { margin: 0 !important; padding: 0 !important; list-style: none !important; }
.sta-portal-reset-form .sta-pw-list li {
  position: relative !important; padding-left: 22px !important; margin: 6px 0 !important; color: #6b7280 !important;
}
.sta-portal-reset-form .sta-pw-list li::before {
  content: "•" !important; position: absolute !important; left: 0 !important; top: 0 !important;
  line-height: 1.25 !important; color: #9ca3af !important;
}
.sta-portal-reset-form .sta-pw-list li.pass { color: #106a2b !important; }
.sta-portal-reset-form .sta-pw-list li.pass::before { content: "\2713" !important; color: #106a2b !important; font-weight: 700 !important; }

.sta-portal-reset-form #field-reset-pass2 .sta-field-msg.ok {
  color: #106a2b !important;
  font-weight: 600 !important;
}

.sta-portal-reset-form #field-reset-pass2 input.is-valid {
  border-color: #10b981 !important;
  box-shadow: inset 0 0 0 1px #10b981 !important;
}

/* Code for Disbaled Input Fields on Manage Profile */

.sta-profile .is-locked{
  background:#f5f7fb !important;
  color:#6b7280 !important;
  cursor:not-allowed !important;
  pointer-events:none !important; /* blocks the caret */
}
.sta-profile .is-locked:focus{ outline:none !important; box-shadow:none !important; }
.sta-profile .is-locked + .sta-pencil{ display:none !important; }


/* Password checklist + states on Manage Profile */
.sta-profile .sta-req-list { list-style:none; padding:0; margin:8px 0 0; }
.sta-profile .sta-req-list li { position:relative; padding-left:24px; margin:4px 0; color:#6b7280; }
.sta-profile .sta-req-list li::before {
  content:""; position:absolute; left:0; top:3px; width:16px; height:16px;
  border:1px solid #d1d5db; border-radius:4px; background:#fff;
}
.sta-profile .sta-req-list li.pass { color:#106a2b; }
.sta-profile .sta-req-list li.pass::before {
  background:#10b981; border-color:#10b981;
  /* checkmark */
  box-shadow: inset 0 0 0 2px #10b981;
  -webkit-mask: none; mask: none;
}
.sta-profile #field-pass-new2 .sta-field-msg.ok { color:#106a2b; font-weight:600; }
.sta-profile input.is-valid {
  border-color:#10b981 !important;
  box-shadow: inset 0 0 0 1px #10b981 !important;
}