body.portal-auth-page input,
body.portal-auth-page textarea,
body.portal-auth-page select,
body.portal-auth-page button {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
}

body.portal-auth-page {
  --bg: #f5f7f8;
  --card: #ffffff;
  --text: #173041;
  --muted: #7d92a0;
  --accent: #0964b0;
  --border: #b8cddb;
  --ok: #2fa45f;
  --error: #cc4b49;
  color-scheme: light;
  box-sizing: border-box;
  min-height: 100vh;
  margin: 0;
  padding: 32px 20px;
  background: linear-gradient(180deg, color-mix(in oklab, var(--bg) 98%, white), color-mix(in oklab, var(--bg) 92%, #e6eaed));
  color: var(--text);
}

body.portal-auth-page.portal-global-footer-layout {
  padding: 0;
}

body.portal-auth-page.portal-global-footer-layout > .portal-global-content {
  padding: 32px 20px;
}

body.portal-auth-page.portal-auth-page-with-header {
  padding: 0;
}

body.portal-auth-page.portal-auth-page-with-header > .auth-shell,
body.portal-auth-page.portal-auth-page-with-header > .portal-global-content > .auth-shell {
  width: min(100%, 480px);
  padding: 32px 20px;
  box-sizing: border-box;
}

body.portal-auth-page.portal-auth-page-with-header.portal-global-footer-layout > .portal-global-content {
  padding: 0;
}

body.portal-auth-page .auth-shell {
  width: min(100%, 440px);
  margin: 0 auto;
}

body.portal-auth-page .portal_header_login {
  background-image: url('/img/evxab-logo.svg');
  height: 118px;
  margin-bottom: 20px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: auto 118px;
}

body.portal-auth-page .top-area,
body.portal-auth-page .form-container,
body.portal-auth-page .language-switch {
  width: 100%;
  max-width: 440px;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

body.portal-auth-page .dev-note {
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: 12px;
  border: var(--border) 1px dashed;
  background: color-mix(in oklab, var(--card) 90%, var(--bg));
  color: var(--text);
  font-size: 0.95em;
  white-space: pre-wrap;
}

body.portal-auth-page .messages {
  margin: 0 0 14px;
}

body.portal-auth-page .error,
body.portal-auth-page .success {
  padding: 12px 14px;
  border-radius: 12px;
  display: none;
  box-sizing: border-box;
  color: var(--text);
}

body.portal-auth-page .error {
  background: color-mix(in oklab, var(--error) 18%, var(--card));
  border: color-mix(in oklab, var(--error) 45%, var(--border)) 1px solid;
}

body.portal-auth-page .success {
  background: color-mix(in oklab, var(--ok) 18%, var(--card));
  border: color-mix(in oklab, var(--ok) 45%, var(--border)) 1px solid;
}

body.portal-auth-page .form-container {
  background-color: var(--card);
  border: var(--border) 1px solid;
  border-radius: 24px;
  overflow: hidden;
  padding: 34px 32px 28px;
  box-shadow: 0 20px 60px rgba(15, 23, 42, 0.08);
}

body.portal-auth-page form {
  margin: 0;
}

body.portal-auth-page #frm-mobile-verification {
  text-align: center;
}

body.portal-auth-page .form-heading {
  font-size: 1.85em;
  line-height: 1.15;
  margin-bottom: 12px;
  text-align: center;
}

body.portal-auth-page .auth-helper-text {
  margin: 0 0 24px;
  color: color-mix(in oklab, var(--text) 72%, var(--bg));
  text-align: center;
  line-height: 1.5;
}

body.portal-auth-page .auth-helper-text-secondary {
  margin-top: -12px;
}

body.portal-auth-page .auth-helper-note {
  margin: 0 0 24px;
  padding: 14px 16px;
  border: 1px solid color-mix(in oklab, var(--border) 85%, var(--bg));
  border-radius: 14px;
  background: color-mix(in oklab, var(--card) 88%, var(--bg));
  color: color-mix(in oklab, var(--text) 82%, var(--bg));
  line-height: 1.5;
  text-align: center;
}

body.portal-auth-page .form-row {
  margin-bottom: 18px;
}

body.portal-auth-page .auth-turnstile-row {
  display: block;
  width: 100%;
  overflow: visible;
  text-align: center;
}

body.portal-auth-page .auth-turnstile-row > div {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: visible;
}

body.portal-auth-page .auth-turnstile-row > div > div {
  max-width: 100% !important;
  min-width: 0;
  margin-left: auto;
  margin-right: auto;
}

body.portal-auth-page .auth-turnstile-row .cf-turnstile,
body.portal-auth-page .auth-turnstile-row iframe {
  display: block;
  max-width: 100% !important;
  margin-left: auto;
  margin-right: auto;
}

body.portal-auth-page .auth-turnstile-row iframe {
  min-width: 0;
}

body.portal-auth-page .form-row-email,
body.portal-auth-page .form-row-name,
body.portal-auth-page .form-row-mobile {
  margin-bottom: 18px;
  width: 100%;
  display: inline-block;
  position: relative;
}

body.portal-auth-page .form-row-email:after,
body.portal-auth-page .form-row-name:after,
body.portal-auth-page .form-row-mobile:after {
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  font-size: 1.15em;
  line-height: 1;
  color: var(--accent);
  position: absolute;
  top: 50%;
  right: 16px;
  transform: translateY(-50%);
  padding-left: 14px;
  border-left: 1px solid var(--border);
  text-align: center;
}

body.portal-auth-page .form-row-email:after {
  content: '\f0e0';
}

body.portal-auth-page .form-row-name:after {
  content: '\f007';
}

body.portal-auth-page .form-row-mobile:after {
  content: '\f3cd';
}

body.portal-auth-page .form-row-key {
  width: 100%;
  margin-bottom: 18px;
  display: inline-block;
  position: relative;
}

body.portal-auth-page .form-row-key:after {
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  font-size: 1.15em;
  line-height: 1;
  content: '\f084';
  color: var(--accent);
  position: absolute;
  top: 50%;
  right: 16px;
  transform: translateY(-50%);
  padding-left: 14px;
  border-left: 1px solid var(--border);
  text-align: center;
}

body.portal-auth-page .form-input {
  min-height: 46px;
  padding: 10px 52px 10px 14px;
  width: 100%;
  box-sizing: border-box;
  border-radius: 14px;
  border: var(--border) 1px solid;
  background: color-mix(in oklab, var(--card) 92%, var(--bg));
  color: var(--text);
}

body.portal-auth-page .form-input::placeholder {
  color: color-mix(in oklab, var(--muted) 75%, var(--text));
}

body.portal-auth-page .btnSubmit,
body.portal-auth-page .btnVerify {
  min-height: 46px;
  padding: 10px 18px;
  border-radius: 14px;
  width: 100%;
  box-sizing: border-box;
  -webkit-appearance: none;
  color: #fff;
  border: 1px solid transparent;
  font-weight: 600;
  cursor: pointer;
}

body.portal-auth-page .btnSubmit {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
}

body.portal-auth-page .btnVerify {
  background: var(--ok) !important;
  border-color: var(--ok) !important;
}

body.portal-auth-page .btnSecondaryLink {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  width: 100%;
  padding: 10px 18px;
  border-radius: 14px;
  border: 1px solid color-mix(in oklab, var(--accent) 25%, var(--border));
  background: color-mix(in oklab, var(--accent) 10%, var(--bg));
  color: var(--accent);
  text-decoration: none;
  box-sizing: border-box;
  font-weight: 600;
}

body.portal-auth-page .auth-link-group {
  margin-top: 18px;
  text-align: center;
}

body.portal-auth-page .auth-checkbox-row {
  margin: 2px 0 16px;
}

body.portal-auth-page .auth-checkbox-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: color-mix(in oklab, var(--text) 82%, var(--bg));
  font-size: 0.95em;
}

body.portal-auth-page .auth-checkbox-label input[type="checkbox"] {
  margin: 0;
}

body.portal-auth-page .auth-link-group-secondary {
  margin-top: 10px;
}

body.portal-auth-page .auth-link-group a,
body.portal-auth-page .language-switch a {
  color: var(--accent);
  text-decoration: none;
}

body.portal-auth-page .language-switch {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 16px;
  padding: 0 4px;
  background: transparent;
  text-align: center;
  font-size: 0.95em;
}

body.portal-auth-page .login-theme-toggle-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  min-height: 26px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--accent);
  cursor: pointer;
  font-size: 1.15rem;
  line-height: 1;
}

body.portal-auth-page .login-theme-toggle-button:hover,
body.portal-auth-page .login-theme-toggle-button:focus-visible {
  color: var(--text);
  outline: none;
}

html.dark body.portal-auth-page,
html[data-bs-theme=dark] body.portal-auth-page {
  --bg: #0c171d;
  --card: #061219;
  --text: #ebf3f7;
  --muted: #8ea2ad;
  --accent: #0964b0;
  --border: #0964b0;
  --ok: #5fc17a;
  --error: #ef7d72;
  color-scheme: dark;
  background-color: var(--bg);
  background-image: none;
}

html.dark body.portal-auth-page .form-container,
html[data-bs-theme=dark] body.portal-auth-page .form-container {
  box-shadow: 0 24px 72px rgba(0, 0, 0, 0.34);
}

html.dark body.portal-auth-page .portal_header_login,
html[data-bs-theme=dark] body.portal-auth-page .portal_header_login {
  filter: brightness(1.04);
}

@media (prefers-color-scheme: dark) {
  html:not(.dark):not([data-bs-theme=light]) body.portal-auth-page {
    --bg: #0c171d;
    --card: #061219;
    --text: #ebf3f7;
    --muted: #8ea2ad;
    --accent: #0964b0;
    --border: #0964b0;
    --ok: #5fc17a;
    --error: #ef7d72;
    color-scheme: dark;
    background-color: var(--bg);
    background-image: none;
  }

  html:not(.dark):not([data-bs-theme=light]) body.portal-auth-page .form-container {
    box-shadow: 0 24px 72px rgba(0, 0, 0, 0.34);
  }

  html:not(.dark):not([data-bs-theme=light]) body.portal-auth-page .portal_header_login {
    filter: brightness(1.04);
  }
}

@media screen and (max-width: 800px) {
  body.portal-auth-page {
    padding: 20px 14px;
  }

  body.portal-auth-page.portal-global-footer-layout > .portal-global-content {
    padding: 20px 14px;
  }

  body.portal-auth-page.portal-auth-page-with-header.portal-global-footer-layout > .portal-global-content {
    padding: 0;
  }

  body.portal-auth-page.portal-auth-page-with-header > .auth-shell,
  body.portal-auth-page.portal-auth-page-with-header > .portal-global-content > .auth-shell {
    padding: 20px 14px;
  }

  body.portal-auth-page .form-container {
    padding: 28px 20px 22px;
    border-radius: 20px;
  }

  body.portal-auth-page .form-heading {
    font-size: 1.65em;
  }

  body.portal-auth-page .portal_header_login {
    height: 96px;
    margin-bottom: 18px;
    background-size: auto 96px;
  }
}
