:root {
  color-scheme: only light;
  background: var(--h24-surface, #ffffff);
}

html,
body {
  max-width: 100%;
  min-height: 100%;
  background-color: var(--h24-surface, #ffffff);
}

body.auth-pending {
  min-height: 100%;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior-y: contain;
  background: var(--h24-surface, #ffffff) !important;
  -webkit-overflow-scrolling: touch;
}

.auth-splash,
.auth-page,
.account-request-page {
  background-color: var(--h24-surface, #ffffff) !important;
  color: var(--h24-ink-strong, #1f2933) !important;
}

.auth-splash img,
.auth-brand img {
  background-color: var(--h24-surface, #ffffff) !important;
  filter: none !important;
}

.auth-page {
  min-height: 100svh;
  overflow: visible;
}

@media (max-width: 640px) {
  .auth-page,
  .account-request-page {
    display: block;
    min-height: 100svh;
    padding:
      max(12px, env(safe-area-inset-top))
      12px
      max(28px, calc(env(safe-area-inset-bottom) + 18px));
    overflow: visible;
  }

  .auth-page .auth-panel,
  .account-request-page .auth-panel {
    width: min(100%, 430px);
    margin: 0 auto;
  }

  .auth-page .auth-brand,
  .account-request-page .auth-brand {
    width: min(160px, 44vw);
    margin: 0 auto 4px;
  }

  .auth-page .auth-brand img,
  .account-request-page .auth-brand img {
    width: 100%;
    max-height: 106px;
    object-fit: contain;
  }

  .auth-page .auth-card,
  .account-request-page .auth-card {
    padding: 18px 16px;
    border-radius: 15px;
  }

  .auth-page .auth-card h1,
  .account-request-page .auth-card h1 {
    font-size: clamp(23px, 7vw, 28px);
    line-height: 1.2;
  }

  .auth-page .auth-description,
  .account-request-page .auth-description {
    margin: 6px 0 14px;
    font-size: 14px;
    line-height: 1.45;
  }

  .auth-page .auth-card label,
  .account-request-page .auth-card label {
    margin-top: 10px;
  }

  .auth-page .auth-card input,
  .account-request-page .auth-card input,
  .account-request-page .auth-card select {
    min-height: 46px;
    padding: 10px;
  }

  .auth-page .auth-card button,
  .account-request-page .auth-card button {
    min-height: 48px;
  }

  .auth-page .auth-card form > button,
  .account-request-page .auth-card form > button {
    margin-top: 16px;
  }

  .auth-secondary-actions {
    gap: 8px;
    margin-top: 12px;
    padding-top: 12px;
  }

  .auth-footer {
    padding: 18px 8px 0;
  }

  .auth-consent {
    min-height: 44px;
    margin-top: 12px !important;
    padding: 10px;
  }
}

@media (max-width: 640px) and (max-height: 740px) {
  .auth-page .auth-brand,
  .account-request-page .auth-brand {
    width: min(128px, 36vw);
  }

  .auth-page .auth-brand img,
  .account-request-page .auth-brand img {
    max-height: 78px;
  }

  .auth-page .auth-card,
  .account-request-page .auth-card {
    padding-top: 14px;
    padding-bottom: 14px;
  }

  .auth-eyebrow {
    font-size: 12px;
  }
}

@media (min-width: 700px) and (max-width: 1100px) {
  body.auth-pending {
    overflow-y: auto !important;
  }

  .auth-page,
  .account-request-page {
    min-height: 100svh;
    padding-bottom: max(32px, env(safe-area-inset-bottom));
  }
}

/* FE-NAV-54B: keep the existing Happy24 logo visible after it became a home link. */
.app-header .app-home-link {
  display: inline-flex !important;
  align-items: center;
  justify-content: flex-start;
  flex: 0 0 auto;
  max-width: 42vw;
  min-height: 44px;
  border-radius: 10px;
  line-height: 0;
  text-decoration: none;
}

.app-header .app-home-link > img {
  display: block !important;
  width: 352px !important;
  height: 104px !important;
  max-width: 42vw !important;
  object-fit: contain !important;
  object-position: left center !important;
  opacity: 1 !important;
  visibility: visible !important;
  filter: none !important;
}

.app-header .app-home-link:focus-visible {
  outline: 3px solid var(--h24-ink, #65a8d8);
  outline-offset: 3px;
}

@media (max-width: 640px) {
  .app-header .app-home-link {
    max-width: calc(100vw - 120px);
  }

  .app-header .app-home-link > img {
    width: 240px !important;
    height: 72px !important;
    max-width: calc(100vw - 120px) !important;
  }
}