/* ==========================================
    CSS VARIABLES
    ========================================== */
:root {
  /* Colors */
  --northwell-blue: #007bc2;
  --northwell-blue-dark: #003ca5;
  --white: #ffffff;

  /* Button Properties */
  --button-background: var(--white);
  --button-max-width: 480px;
  --button-padding: 12px 0;
  --button-padding-mobile: 12px 24px;
  --button-border-radius: 4px;
  --button-font-weight: 500;
  --button-font-size: 16px;
  --button-line-height: 1.2;
  --button-margin: 16px 0 0 0;
  --button-border: 1px solid var(--northwell-blue);
}

/* ==========================================
    BASE BUTTON STYLES
    ========================================== */
.northwell-button-base,
button[class*="PasskeyLoginHandler"],
a[aria-label="Create an Account"],
a[href*="accesscheck"] {
  /* Layout */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  width: 100% !important;

  /* Spacing */
  padding: var(--button-padding) !important;
  margin: var(--button-margin) !important;

  /* Appearance */
  background: var(--button-background) !important;
  color: var(--northwell-blue) !important;
  border: var(--button-border) !important;
  border-radius: var(--button-border-radius) !important;

  /* Typography */
  font-weight: var(--button-font-weight) !important;
  font-size: var(--button-font-size) !important;
  font-family: inherit !important;
  line-height: var(--button-line-height) !important;
  text-decoration: none !important;
  text-align: center !important;

  /* Interaction */
  cursor: pointer !important;
  transition: none !important;
}

/* ==========================================
    BUTTON TEXT STYLING
    ========================================== */
button[class*="PasskeyLoginHandler"] span,
button[class*="PasskeyLoginHandler"] ._TextFragment,
a[aria-label="Create an Account"] span,
a[aria-label="Create an Account"] ._TextFragment,
a[aria-label="Create an account"] span,
a[aria-label="Create an account"] ._TextFragment,
a[href*="accesscheck"] span,
a[href*="accesscheck"] ._TextFragment {
  color: inherit !important;
  font-weight: var(--button-font-weight) !important;
  font-size: var(--button-font-size) !important;
  line-height: var(--button-line-height) !important;
  text-align: center !important;
  white-space: nowrap !important;
}

/* ==========================================
    RECOVERY LINKS
    ========================================== */
a[href*="recovery"],
a[href*="forgot"],
.recovery {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  max-width: unset !important;
  padding: 8px 0 16px 0 !important;
  margin: 0 !important;
  text-align: center !important;
}

/* ==========================================
    HOVER STATES
    ========================================== */
/* Submit button hover */
button[type="submit"]:hover,
button[class*="SubmitLoginFormButton"]:hover {
  background: var(--northwell-blue-dark) !important;
  border-color: var(--northwell-blue-dark) !important;
  color: var(--white) !important;
}

/* Secondary buttons hover */
button[class*="PasskeyLoginHandler"]:hover,
a[aria-label="Create an Account"]:hover,
a[aria-label="Create an account"]:hover,
a[href*="accesscheck"]:hover {
  background: var(--button-background) !important;
  color: var(--northwell-blue-dark) !important;
  border-color: var(--northwell-blue-dark) !important;
  text-decoration: none !important;
}

/* Recovery links hover */
a[href*="recovery"]:hover,
a[href*="forgot"]:hover,
.recovery:hover {
  color: var(--northwell-blue-dark) !important;
  text-decoration: none !important;
  background: transparent !important;
}

/* ==========================================
    FOCUS STATES
    ========================================== */
button[class*="PasskeyLoginHandler"]:focus,
button[class*="PasskeyLoginHandler"]:active,
a[aria-label="Create an Account"]:focus,
a[aria-label="Create an Account"]:active,
a[aria-label="Create an account"]:focus,
a[aria-label="Create an account"]:active,
a[href*="accesscheck"]:focus,
a[href*="accesscheck"]:active {
  outline: 2px solid var(--northwell-blue) !important;
  outline-offset: 2px !important;
}

/* ==========================================
    PASSKEY BUTTON ICON
    ========================================== */
/* Hide default SVG */
button[class*="PasskeyLoginHandler"] svg {
  display: none !important;
}

/* Custom icon with embedded SVG */
button[class*="PasskeyLoginHandler"]::before {
  content: "";
  width: 20px;
  height: 20px;
  display: inline-block;
  margin-right: 8px;
  flex-shrink: 0;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url("data:image/svg+xml,%3Csvg width='22' height='19' viewBox='0 0 22 19' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.05309 5.39749C5.05309 6.37737 5.55993 7.25589 6.40466 7.76273C7.21559 8.23577 8.26306 8.23577 9.10778 7.76273C9.91872 7.25589 10.4593 6.37737 10.4593 5.39749C10.4593 4.4514 9.91872 3.57288 9.10778 3.06605C8.26306 2.593 7.21559 2.593 6.40466 3.06605C5.55993 3.57288 5.05309 4.4514 5.05309 5.39749ZM12.0812 5.39749C12.0812 6.95179 11.2365 8.37093 9.91872 9.14808C8.56716 9.92523 6.91149 9.92523 5.59372 9.14808C4.24216 8.37093 3.43122 6.95179 3.43122 5.39749C3.43122 3.87698 4.24216 2.45784 5.59372 1.6807C6.91149 0.903547 8.56716 0.903547 9.91872 1.6807C11.2365 2.45784 12.0812 3.87698 12.0812 5.39749ZM1.84313 16.7506H13.1287V17.2912C13.1287 17.6967 13.2638 18.0684 13.4328 18.3725H1.16735C0.626727 18.3725 0.187469 17.9332 0.187469 17.3926C0.187469 14.0475 2.85681 11.3444 6.20192 11.3444H9.27673C10.7634 11.3444 12.115 11.885 13.1625 12.7635C13.1625 12.8311 13.1625 12.8987 13.1625 12.9662V15.2639C12.3853 13.9123 10.9662 12.9662 9.27673 12.9662H6.20192C3.97184 12.9662 2.14724 14.6219 1.84313 16.7506ZM18.0281 9.18187C17.4199 9.18187 16.9468 9.6887 16.9468 10.2631V11.885H19.1093V10.2631C19.1093 9.6887 18.6025 9.18187 18.0281 9.18187ZM15.325 10.2631C15.325 8.7764 16.5076 7.55999 18.0281 7.55999C19.5148 7.55999 20.7312 8.7764 20.7312 10.2631V11.885C21.3056 11.885 21.8125 12.3918 21.8125 12.9662V17.2912C21.8125 17.8994 21.3056 18.3725 20.7312 18.3725H15.325C14.7168 18.3725 14.2437 17.8994 14.2437 17.2912V12.9662C14.2437 12.3918 14.7168 11.885 15.325 11.885V10.2631Z' fill='%23007BC2'/%3E%3C/svg%3E");
}

/* Passkey icon hover state */
button[class*="PasskeyLoginHandler"]:hover::before {
  background-image: url("data:image/svg+xml,%3Csvg width='22' height='19' viewBox='0 0 22 19' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.05309 5.39749C5.05309 6.37737 5.55993 7.25589 6.40466 7.76273C7.21559 8.23577 8.26306 8.23577 9.10778 7.76273C9.91872 7.25589 10.4593 6.37737 10.4593 5.39749C10.4593 4.4514 9.91872 3.57288 9.10778 3.06605C8.26306 2.593 7.21559 2.593 6.40466 3.06605C5.55993 3.57288 5.05309 4.4514 5.05309 5.39749ZM12.0812 5.39749C12.0812 6.95179 11.2365 8.37093 9.91872 9.14808C8.56716 9.92523 6.91149 9.92523 5.59372 9.14808C4.24216 8.37093 3.43122 6.95179 3.43122 5.39749C3.43122 3.87698 4.24216 2.45784 5.59372 1.6807C6.91149 0.903547 8.56716 0.903547 9.91872 1.6807C11.2365 2.45784 12.0812 3.87698 12.0812 5.39749ZM1.84313 16.7506H13.1287V17.2912C13.1287 17.6967 13.2638 18.0684 13.4328 18.3725H1.16735C0.626727 18.3725 0.187469 17.9332 0.187469 17.3926C0.187469 14.0475 2.85681 11.3444 6.20192 11.3444H9.27673C10.7634 11.3444 12.115 11.885 13.1625 12.7635C13.1625 12.8311 13.1625 12.8987 13.1625 12.9662V15.2639C12.3853 13.9123 10.9662 12.9662 9.27673 12.9662H6.20192C3.97184 12.9662 2.14724 14.6219 1.84313 16.7506ZM18.0281 9.18187C17.4199 9.18187 16.9468 9.6887 16.9468 10.2631V11.885H19.1093V10.2631C19.1093 9.6887 18.6025 9.18187 18.0281 9.18187ZM15.325 10.2631C15.325 8.7764 16.5076 7.55999 18.0281 7.55999C19.5148 7.55999 20.7312 8.7764 20.7312 10.2631V11.885C21.3056 11.885 21.8125 12.3918 21.8125 12.9662V17.2912C21.8125 17.8994 21.3056 18.3725 20.7312 18.3725H15.325C14.7168 18.3725 14.2437 17.8994 14.2437 17.2912V12.9662C14.2437 12.3918 14.7168 11.885 15.325 11.885V10.2631Z' fill='%23003CA5'/%3E%3C/svg%3E");
}

/* ==========================================
    HIDDEN ELEMENTS
    ========================================== */
/* Hide help links */
a[aria-label="Need help?"] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

/* Hide SVG icons in create account links */
a[aria-label="Create an Account"] svg,
a[aria-label="Create an account"] svg,
a[href*="accesscheck"] svg {
  display: none !important;
}

/* ==========================================
    CONTAINER STYLES
    ========================================== */
.helpLinks,
._Segment._container.boundary-none.helpLinks {
  width: 100% !important;
  max-width: 100% !important;
}

/* ==========================================
    TEXT REPLACEMENTS
    ========================================== */
button[type="submit"]::after,
button[class*="SubmitLoginFormButton"]::after,
input[type="submit"]#submit::after,
input[type="submit"][value="Log in"]::after {
  font-size: var(--button-font-size) !important;
  font-weight: var(--button-font-weight) !important;
  display: inline-block !important;
}

/* "Create an Account" → "Create an account" */

a[aria-label="Create an Account"] *,
a[aria-label="Create an account"] * {
  display: none !important;
}

a[aria-label="Create an Account"]::after,
a[aria-label="Create an account"]::after {
  content: "Create an account" !important;
  font-size: var(--button-font-size) !important;
  font-weight: var(--button-font-weight) !important;
  display: inline-block !important;
}

button[class*="PasskeyLoginHandler"] * {
  display: none !important;
}

button[class*="PasskeyLoginHandler"]::after {
  content: "Login with passkey" !important;
  font-size: var(--button-font-size) !important;
  font-weight: var(--button-font-weight) !important;
  display: inline-block !important;
}

/* ==========================================
    MEDIA QUERIES
    ========================================== */
/* Mobile responsive */
@media print {
  .loginPage.isPrelogin .visibilityToggle {
    display: none !important;
  }
}

._readOnlyText {
  pointer-events: auto !important;
}

.recovery {
  text-decoration: none !important;
  color: var(--northwell-blue) !important;
  cursor: pointer !important;
}

.recovery:hover {
  text-decoration: none !important;
  color: var(--northwell-blue-dark) !important;
}

.Copyright > a {
  pointer-events: none !important;
  cursor: none !important;
  text-decoration: none !important;
  color: #565656 !important;
}