/* Customer Portal OAuth2 Authorize – Figma Dev Mode tokens */

:root {
  --evs-base-brand-purple: #4b1e4c;
  --evs-base-brand-lavender: #a187c4;
  --evs-base-brand-red: #fc595b;
  /* Brand Base / Brand Dark 40 — Figma token: 40% black overlay composited onto
     Brand Red. Pre-flattened so it can be used directly as `color`. */
  --evs-base-brand-dark-40: #973537;
  /* Figma-style PascalCase alias so `var(--Base-Brand-Dark-40, ...)` copy-pasted
     from Figma's Dev Mode resolves to the same value globally. */
  --Base-Brand-Dark-40: var(--evs-base-brand-dark-40, #973537);
  --evs-overlay-white-90: rgba(255, 255, 255, 0.9);
  --evs-overlay-white-80: rgba(255, 255, 255, 0.8);
  --evs-card-shadow: 0 0 4px 4px rgba(161, 135, 196, 0.12);
  --evs-gray-2: #333333;
  --evs-gray-4: #666666;
  --evs-gray-5: #808080;
  --evs-gray-7: #b2b2b2;
  --evs-gray-9: #e5e5e5;
  --evs-neutral-white: #ffffff;
  --overlay-white-0-white: rgba(255, 255, 255, 0);
  --color-alert-red: #c81010;
  /* Arboria @font-face is in oauth2Authorize.ftl (loads from customer portal public/fonts/) */
  --evs-font: "Arboria", system-ui, -apple-system, sans-serif;
  /* Figma “label / label large” + spacer (Customer Portal / onboarding) */
  --label-label-large-font-family: var(--evs-font);
  --label-label-large-font-size: 18px;
  --label-label-large-font-style: normal;
  --label-label-large-font-weight: 500;
  --label-label-large-letter-spacing: 0.54px;
  --label-label-large-line-height: 22px;
  --variable-collection-spacers-4: 8px;
  --evs-text-black-20: rgba(0, 0, 0, 0.2); /* #00000033 */
  /* “Select hospital” outline — final design: black border + black label */
  --evs-location-select-outline-border: #000000;
  --evs-location-select-outline-text: #000000;
}

a.evs-index-login {
  background-color: var(--evs-base-brand-red);
  color: var(--evs-neutral-white);
  text-decoration: none;
}
a.evs-index-login:hover {
  filter: brightness(0.95);
}

/* ---- Background: purple canvas + Figma heart/w whisker SVGs (public/svg/) ---- */
body:has(.evs-authorize-shell) {
  background: var(--evs-base-brand-purple) !important;
}

/*
 * Background deco – Figma Dev Mode (1440×1280 frame).
 * Each box: translate(-50%,-50%) then rotate(-45deg) so pivot matches Figma center rotation.
 * Tweak --evs-bg-ah if your frame height ≠ 1280.
 */
.evs-authorize-bg {
  --evs-bg-aw: 1440;
  --evs-bg-ah: 1280;
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background: var(--evs-base-brand-purple);
}

.evs-authorize-bg__stage {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
}

.evs-authorize-bg__deco {
  position: absolute;
  pointer-events: none;
  transform: translate(-50%, -50%);
}

.evs-authorize-bg__deco-img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
  object-position: center center;
  user-select: none;
}

/* pointed (large): 239×209, aspect 231/202; frame origin top-left 31, 194.33 */
.evs-authorize-bg__deco--1 {
  left: calc((180) * 100vw / var(--evs-bg-aw));
  top: calc((400) * 100vh / var(--evs-bg-ah));
  width: calc(350 * 100vw / var(--evs-bg-aw));
  aspect-ratio: 231 / 202;
}

/* pointed (small): 156.978×121.373, aspect 97/75; frame top-left 115, 488 */
.evs-authorize-bg__deco--2 {
  left: calc((400 / 2) * 100vw / var(--evs-bg-aw));
  top: calc((700) * 100vh / var(--evs-bg-ah));
  width: calc(250 * 100vw / var(--evs-bg-aw));
  aspect-ratio: 97 / 75;
}

/* whiskers: flex column 581.448×259.879, aspect 132/59; frame top-left 932, 526 */
.evs-authorize-bg__deco--3 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  left: calc((1250) * 100vw / var(--evs-bg-aw));
  top: calc((1050) * 100vh / var(--evs-bg-ah));
  width: calc(581.448 * 100vw / var(--evs-bg-aw));
  aspect-ratio: 1.3;
}

.evs-authorize-bg__deco--3 .evs-authorize-bg__deco-img {
  flex: 1 1 0;
  align-self: stretch;
  width: 100%;
  min-height: 0;
  height: 100%;
  object-fit: contain;
}

/* ---- Shell + card ---- */
.evs-authorize-shell {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 20px 100px;
  box-sizing: border-box;
  font-family: var(--evs-font);
}

/* Win over display:flex above when React sets hidden (e.g. forgot-password on login/register). */
.evs-authorize-shell[hidden] {
  display: none !important;
}

.evs-authorize-card {
  width: 100%;
  max-width: 680px;
  background: var(--evs-overlay-white-90);
  box-shadow: var(--evs-card-shadow);
  border-radius: 40px;
  overflow: hidden;
}

.evs-authorize-card > .alert {
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  border-radius: 0 !important;
  border: none !important;
  border-bottom: 1px solid #fecaca !important;
  background: #fef2f2 !important;
  padding: 14px 24px !important;
  font-family: var(--evs-font) !important;
}

.evs-authorize-card > .alert.border-info-icon\/60 {
  border-bottom-color: #bfdbfe !important;
  background: #eff6ff !important;
}

/* Invalid login: alert red + white copy (Figma tokens) */
.evs-authorize-login-error--inline {
  display: flex !important;
  align-items: flex-start;
  align-self: stretch;
  width: 100%;
  max-width: 520px;
  margin: 0 !important;
  padding: 14px 16px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(0, 0, 0, 0.12) !important;
  background:
    linear-gradient(
      0deg,
      var(--overlay-white-0-white, rgba(255, 255, 255, 0)) 0%,
      var(--overlay-white-0-white, rgba(255, 255, 255, 0)) 100%
    ),
    var(--color-alert-red, #c81010) !important;
  font-family: var(--evs-font) !important;
  color: var(--evs-neutral-white);
  box-sizing: border-box;
}

.evs-authorize-login-error__icon-wrap {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.evs-authorize-login-error__icon {
  display: block;
  width: 24px;
  height: 24px;
}

.evs-authorize-login-error__msg {
  flex: 1 1 0;
  margin: 0;
  padding-top: 8px;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.45;
  color: var(--evs-neutral-white);
}

@media (max-width: 480px) {
  .evs-authorize-login-error--inline {
    padding: 12px 14px !important;
    gap: 10px;
  }

  .evs-authorize-login-error__msg {
    font-size: 14px;
    padding-top: 6px;
  }
}

/* Card body: Figma padding 64 top / 80 sides; 40px gap matches space below logo frame */
.evs-authorize-card__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  padding: 64px 80px;
  box-sizing: border-box;
}

@media (max-width: 720px) {
  .evs-authorize-card__body {
    padding: 40px 28px 48px;
    gap: 32px;
  }
}

@media (max-width: 480px) {
  .evs-authorize-card__body {
    padding: 32px 20px 40px;
  }
}

/* Logo – Figma: fixed frame 250×82 (Layer properties) */
.evs-authorize-logo-wrap {
  width: 250px;
  height: 82px;
  max-width: 100%;
  box-sizing: border-box;
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  overflow: hidden;
}

@media (max-width: 300px) {
  .evs-authorize-logo-wrap {
    width: 100%;
    height: auto;
    aspect-ratio: 250 / 82;
    min-height: 0;
  }
}

.evs-authorize-logo {
  width: 250px;
  height: 82px;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
}

@media (max-width: 300px) {
  .evs-authorize-logo {
    width: 100%;
    height: 100%;
  }
}

/* Log in / Sign up tabs – Figma */
.evs-auth-tabs {
  display: flex;
  align-self: stretch;
  width: 100%;
  max-width: 520px;
  padding: 8px;
  gap: 8px;
  border-radius: 40px;
  background: var(--evs-overlay-white-90);
  box-sizing: border-box;
}

.evs-auth-tab {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  /* padding: 12px 16px; */
  border-radius: 40px;
  font-family: var(--evs-font);
  font-size: 18px;
  font-weight: 500;
  line-height: 22px;
  letter-spacing: 0.54px;
  text-align: center;
  box-sizing: border-box;
  border: none;
  cursor: default;
}

.evs-auth-tab--active {
  color: var(--evs-base-brand-red);
  background: var(--evs-neutral-white);
  background-image: none;
}

.evs-auth-tab--signup {
  color: var(--evs-gray-2);
  background: var(--evs-neutral-white);
}

.evs-auth-tabs > a.text-link {
  flex: 1 1 0;
  display: flex !important;
  align-items: center;
  justify-content: center;
  padding: 12px 16px !important;
  border-radius: 40px !important;
  font-family: var(--evs-font) !important;
  font-size: 18px !important;
  font-weight: 500 !important;
  line-height: 22px !important;
  letter-spacing: 0.54px !important;
  text-align: center !important;
  text-decoration: none !important;
  color: var(--evs-gray-2) !important;
  background: var(--evs-neutral-white) !important;
  box-shadow: none !important;
}

.evs-auth-tabs > a.text-link:hover {
  color: var(--evs-gray-2) !important;
  filter: brightness(0.97);
}

.evs-auth-tab--disabled {
  color: var(--evs-gray-5) !important;
  background: var(--evs-gray-9) !important;
  cursor: not-allowed;
}

/* Welcome – 32 / 700 / 36 */
.evs-welcome-heading {
  margin: 0;
  width: 100%;
  text-align: center;
  font-family: var(--evs-font);
  font-size: 32px;
  font-weight: 700;
  line-height: 36px;
  color: var(--evs-gray-2);
}

/* Snout graphic – Figma 186-10313, 182×82 */
.evs-authorize-snout-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 182px;
  max-width: 100%;
  flex-shrink: 0;
}

.evs-authorize-snout {
  display: block;
  width: 182px;
  height: auto;
  max-width: 100%;
  aspect-ratio: 182 / 82;
}

@media (max-width: 600px) {
  /* Hide snout graphic on small viewports — wrapper removed so no gap/width remains */
  .evs-authorize-snout-wrap {
    display: none;
  }
}

/* ---- Form ---- */
.evs-authorize-page {
  width: 100%;
  align-self: stretch;
}

.evs-authorize-pending {
  font-size: 16px;
  line-height: 24px;
  color: var(--evs-gray-4);
  margin: 0 0 16px;
  text-align: center;
}

.evs-authorize-page form {
  width: 100%;
}

.evs-authorize-page form fieldset {
  display: flex;
  flex-direction: column;
  gap: 24px;
  border: none;
  margin: 0;
  padding: 0;
}

.evs-authorize-page form fieldset:last-of-type {
  margin-top: 0;
  gap: 0;
}

.evs-authorize-page form fieldset.space-y-4 {
  gap: 4px;
}

/* Label: 16 / 400 / 24, gray-2; gap 10 to field */
.evs-authorize-page label.block {
  font-family: var(--evs-font) !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 24px !important;
  color: var(--evs-gray-2) !important;
  margin-bottom: 10px !important;
}

.evs-authorize-page form fieldset.space-y-4 > div {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

/* Inputs: h 44, radius 4, outline 1px gray-7 */
.evs-authorize-page input[type="text"],
.evs-authorize-page input[type="password"],
.evs-authorize-page input[type="email"] {
  font-family: var(--evs-font) !important;
  height: 44px !important;
  min-height: 44px !important;
  padding: 0 16px !important;
  border: 1px solid var(--evs-gray-7) !important;
  border-radius: 4px !important;
  background: var(--evs-neutral-white) !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 24px !important;
  color: var(--evs-gray-2) !important;
  outline: none !important;
  box-shadow: none !important;
}

.evs-authorize-page input[type="password"] {
  padding-right: 44px !important;
}

.evs-authorize-page input::placeholder {
  color: var(--evs-gray-4) !important;
}

.evs-authorize-page input:focus {
  outline: 1px solid var(--evs-base-brand-red) !important;
  outline-offset: 0;
  border-color: var(--evs-base-brand-red) !important;
}

/* Remember + forgot: 16 / 400 / 24, gray-2 */
.evs-authorize-page .evs-remember-forgot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  margin-top: 0;
  margin-bottom: 0;
}

.evs-authorize-page .evs-remember-forgot .checkbox label,
.evs-authorize-page .evs-remember-forgot label.text-sm\/6,
.evs-authorize-page .evs-remember-forgot label span {
  font-family: var(--evs-font) !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 24px !important;
  color: var(--evs-gray-2) !important;
}

.evs-authorize-page .evs-forgot-wrap a,
.evs-authorize-page .evs-forgot-wrap a.text-link {
  font-family: var(--evs-font) !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 24px !important;
  color: var(--evs-gray-2) !important;
  text-decoration: none !important;
}

.evs-authorize-page .evs-forgot-wrap a:hover {
  text-decoration: underline !important;
  color: var(--evs-gray-2) !important;
}

.evs-authorize-page .checkbox input[type="checkbox"] {
  border-radius: 4px !important;
  border-color: var(--evs-gray-7) !important;
}

.evs-authorize-page .checkbox input[type="checkbox"]:checked {
  border-color: var(--evs-base-brand-red) !important;
  background-color: var(--evs-base-brand-red) !important;
}

/* Primary button: h 48, radius 100, 18/500/22, letter 0.54 */
.evs-authorize-page .evs-submit-wrap,
.evs-authorize-page .evs-submit-wrap + *,
.evs-authorize-page form fieldset.mt-6 {
  margin-top: 24px;
  width: 100%;
  align-self: stretch;
}

.evs-authorize-page .evs-submit-wrap button,
.evs-authorize-page form fieldset.mt-6 button.bg-primary,
.evs-authorize-page button[type="submit"],
.evs-authorize-page button.bg-primary {
  width: 100% !important;
  height: 48px !important;
  min-height: 48px !important;
  padding-left: 28px !important;
  padding-right: 28px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  border-radius: 100px !important;
  font-family: var(--evs-font) !important;
  font-size: 18px !important;
  font-weight: 500 !important;
  line-height: 22px !important;
  letter-spacing: 0.54px !important;
  border: none !important;
  box-sizing: border-box !important;
}

/* Enabled (Figma “active” primary) */
.evs-authorize-page button[type="submit"]:not(:disabled),
.evs-authorize-page button.bg-primary:not(:disabled) {
  background: var(--evs-base-brand-red) !important;
  color: var(--evs-neutral-white) !important;
}

.evs-authorize-page button[type="submit"]:not(:disabled):hover,
.evs-authorize-page button.bg-primary:not(:disabled):hover {
  filter: brightness(0.96);
}

/* Disabled – gray-9 / gray-5 text */
.evs-authorize-page button:disabled,
.evs-authorize-page button.bg-primary:disabled {
  background: var(--evs-gray-9) !important;
  color: var(--evs-gray-5) !important;
  opacity: 1 !important;
  cursor: not-allowed;
  box-shadow: none !important;
}

.evs-authorize-page .show-password-button {
  color: var(--evs-gray-4) !important;
}

/* Duplicate “create account” hidden when tab exists */
.evs-register-row--with-tabs {
  display: none !important;
}

.evs-authorize-page .evs-webauthn-link {
  margin-top: 20px;
  text-align: center;
}

.evs-authorize-page .login-button {
  font-family: var(--evs-font) !important;
  border-radius: 4px !important;
}

.evs-authorize-locale-wrap {
  margin-top: 32px;
  width: 100%;
  max-width: 680px;
  display: flex;
  justify-content: center;
}

.evs-authorize-locale-wrap .select label > div {
  border-radius: 10px !important;
  border: 1px solid rgba(255, 255, 255, 0.35) !important;
  background: rgba(255, 255, 255, 0.08) !important;
}

.evs-authorize-locale-wrap select {
  font-family: var(--evs-font) !important;
  color: rgba(255, 255, 255, 0.95) !important;
  background: transparent !important;
}

.evs-authorize-locale-wrap select option {
  color: var(--evs-gray-2);
  background: var(--evs-neutral-white);
}

body:has(.evs-authorize-shell) #fa-footer .text-text,
body:has(.evs-authorize-shell) #fa-footer span {
  color: rgba(255, 255, 255, 0.65) !important;
}

.evs-authorize-page .text-error {
  color: #b91c1c !important;
}