/* ========================================================================== 
   Cuba Health Assist — Sign-in Mobile Layout Contract v45
   Locale-neutral selectors. Loaded after the shared design system so EN/TR/ES/DE
   receive identical header geometry, viewport behavior and safe-area handling.
   ========================================================================== */

@media (max-width: 767.98px) {
  html,
  body.cha-signin-page,
  body.cha-signin-page > .min-h-dvh {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  @supports (overflow: clip) {
    html,
    body.cha-signin-page,
    body.cha-signin-page > .min-h-dvh {
      overflow-x: clip;
    }
  }

  body.cha-signin-page > .min-h-dvh {
    min-height: 100vh;
  }

  @supports (height: 100svh) {
    body.cha-signin-page > .min-h-dvh {
      min-height: 100svh;
    }
  }

  /* Header: structural selectors avoid language-specific href/aria-label rules. */
  body.cha-signin-page header#top {
    width: 100%;
    max-width: 100%;
    overflow: visible !important;
  }

  body.cha-signin-page header#top .container-page {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: max(16px, env(safe-area-inset-left, 0px)) !important;
    padding-right: max(16px, env(safe-area-inset-right, 0px)) !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  body.cha-signin-page header#top .container-page > .relative {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    justify-content: stretch !important;
    gap: 8px !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 66px !important;
    min-height: 66px !important;
    max-height: 66px !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  body.cha-signin-page header#top nav[aria-label="Primary"] {
    display: none !important;
  }

  body.cha-signin-page header#top .container-page > .relative > a:first-child {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    min-width: 0 !important;
    width: auto !important;
    max-width: 156px !important;
    overflow: hidden !important;
    margin: 0 !important;
  }

  body.cha-signin-page header#top .container-page > .relative > a:first-child img {
    display: block !important;
    width: auto !important;
    height: 32px !important;
    min-width: 0 !important;
    max-width: 100% !important;
    max-height: 32px !important;
    object-fit: contain !important;
    object-position: left center !important;
  }

  body.cha-signin-page header#top .flex.items-center.gap-2.shrink-0.ml-auto {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex-wrap: nowrap !important;
    flex: 0 0 auto !important;
    min-width: 0 !important;
    width: auto !important;
    max-width: none !important;
    gap: 8px !important;
    margin-left: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  body.cha-signin-page header#top .flex.items-center.gap-2.shrink-0.ml-auto > a[href$="/apply/"] {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
  }

  body.cha-signin-page header#top [data-cha-static-language-button="1"],
  body.cha-signin-page header#top .cha-header-signin,
  body.cha-signin-page header#top .flex.items-center.gap-2.shrink-0.ml-auto > button:last-child {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
    flex: 0 0 42px !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 9999px !important;
    box-sizing: border-box !important;
  }

  body.cha-signin-page header#top [data-cha-static-language-button="1"] svg:last-child {
    display: none !important;
  }

  body.cha-signin-page header#top .cha-header-signin {
    font-size: 0 !important;
    line-height: 0 !important;
  }

  body.cha-signin-page header#top .cha-signin-text {
    display: none !important;
  }

  body.cha-signin-page header#top .cha-signin-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  body.cha-signin-page header#top .cha-signin-icon svg,
  body.cha-signin-page header#top .flex.items-center.gap-2.shrink-0.ml-auto > button:last-child svg {
    width: 20px !important;
    height: 20px !important;
    max-width: 20px !important;
    flex: 0 0 20px !important;
  }

  /* Main stage: use the small viewport on iOS so the footer does not sit under
     Safari's floating toolbar on first paint. Content can still grow naturally. */
  body.cha-signin-page .cha-signin-main {
    width: 100% !important;
    min-height: calc(100vh - 42px) !important;
    padding: 38px 16px max(72px, calc(48px + env(safe-area-inset-bottom, 0px))) !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  @supports (height: 100svh) {
    body.cha-signin-page .cha-signin-main {
      min-height: calc(100svh - 42px) !important;
    }
  }

  body.cha-signin-page .cha-signin-main .auth-stage {
    width: 100% !important;
    min-width: 0 !important;
    padding: 0 !important;
  }

  body.cha-signin-page .cha-signin-main .auth-card {
    width: 100% !important;
    max-width: 520px !important;
    min-width: 0 !important;
    padding: 26px 24px !important;
    border-radius: 20px !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  /* Brand row stays compact like the approved mobile design, while long ES/DE
     labels wrap inside their own grid cell instead of pushing the card/header. */
  body.cha-signin-page .cha-signin-main .brand-header {
    display: grid !important;
    grid-template-columns: minmax(124px, .9fr) minmax(0, 1.1fr) !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-bottom: 26px !important;
    box-sizing: border-box !important;
  }

  body.cha-signin-page .cha-signin-main .brand-header__logo {
    display: inline-flex !important;
    align-items: center !important;
    min-width: 0 !important;
    width: 100% !important;
    max-width: 158px !important;
    overflow: hidden !important;
  }

  body.cha-signin-page .cha-signin-main .brand-header__logo img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-width: 0 !important;
    max-width: 158px !important;
    max-height: 31px !important;
    object-fit: contain !important;
    object-position: left center !important;
  }

  body.cha-signin-page .cha-signin-main .brand-pill {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 6px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 30px !important;
    height: auto !important;
    padding: 6px 10px !important;
    margin: 0 !important;
    font-size: 11.5px !important;
    line-height: 1.25 !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    box-sizing: border-box !important;
  }

  body.cha-signin-page .cha-signin-main .brand-pill svg {
    width: 14px !important;
    height: 14px !important;
    min-width: 14px !important;
    flex: 0 0 14px !important;
  }

  body.cha-signin-page .cha-signin-main .auth-header__title {
    font-size: clamp(27px, 7.2vw, 30px) !important;
    line-height: 1.16 !important;
    overflow-wrap: break-word !important;
  }

  body.cha-signin-page .cha-signin-main .auth-header__desc,
  body.cha-signin-page .cha-signin-main .auth-access-note {
    overflow-wrap: break-word !important;
  }

  body.cha-signin-page .cha-signin-main .field,
  body.cha-signin-page .cha-signin-main .field__wrap,
  body.cha-signin-page .cha-signin-main .field__input,
  body.cha-signin-page .cha-signin-main .btn-submit {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  body.cha-signin-page .cha-signin-main .field__input {
    font-size: 16px !important;
  }

  body.cha-signin-page .cha-signin-main .row-between {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 10px 14px !important;
    min-width: 0 !important;
  }

  body.cha-signin-page .cha-signin-main .row-between .link-primary {
    margin-left: auto !important;
    white-space: normal !important;
    text-align: right !important;
  }

  body.cha-signin-page .cha-signin-footer {
    position: relative !important;
    clear: both !important;
    width: 100% !important;
    max-width: 100% !important;
    padding-bottom: max(24px, env(safe-area-inset-bottom, 0px)) !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }

  body.cha-signin-page #cha-cubi-root .cha-cubi-launcher {
    right: max(14px, env(safe-area-inset-right, 0px)) !important;
    bottom: max(18px, calc(12px + env(safe-area-inset-bottom, 0px))) !important;
  }
}

@media (max-width: 380px) {
  body.cha-signin-page header#top .container-page {
    padding-left: max(12px, env(safe-area-inset-left, 0px)) !important;
    padding-right: max(12px, env(safe-area-inset-right, 0px)) !important;
  }

  body.cha-signin-page header#top .container-page > .relative {
    gap: 6px !important;
  }

  body.cha-signin-page header#top .container-page > .relative > a:first-child {
    max-width: 132px !important;
  }

  body.cha-signin-page header#top .flex.items-center.gap-2.shrink-0.ml-auto {
    gap: 6px !important;
  }

  body.cha-signin-page header#top [data-cha-static-language-button="1"],
  body.cha-signin-page header#top .cha-header-signin,
  body.cha-signin-page header#top .flex.items-center.gap-2.shrink-0.ml-auto > button:last-child {
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    flex-basis: 40px !important;
  }

  body.cha-signin-page .cha-signin-main {
    padding-left: 12px !important;
    padding-right: 12px !important;
    padding-top: 30px !important;
  }

  body.cha-signin-page .cha-signin-main .auth-card {
    padding: 24px 20px !important;
  }

  body.cha-signin-page .cha-signin-main .brand-header {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  body.cha-signin-page .cha-signin-main .brand-header__logo {
    max-width: 150px !important;
  }

  body.cha-signin-page .cha-signin-main .brand-pill {
    max-width: 100% !important;
  }
}

/* ========================================================================== 
   Cuba Health Assist — Sign-in Mobile Header Runtime Contract v46
   The public bundle injects .cha-mobile-controlbar after DOM ready. On the
   sign-in route its generated account button points back to the same page,
   consumes 44px of scarce width and makes the live header look crowded.
   Keep only language + menu on this route and reserve the recovered width for
   the approved brand mark. This block intentionally targets both the runtime
   controls and the original static controls to prevent flash/duplication.
   ========================================================================== */
@media (max-width: 1023px) {
  body.cha-signin-page {
    --cha-header-h: 64px;
    --cha-header-icon: 40px;
    --cha-header-gap: 8px;
    --cha-logo-reserve: 112px;
  }

  body.cha-signin-page header#top,
  body.cha-signin-page header#top .container-page,
  body.cha-signin-page header#top .container-page > .relative,
  body.cha-signin-page header#top .cha-public-nav-row-v152,
  body.cha-signin-page header#top .cha-public-nav-row-v153 {
    height: var(--cha-header-h) !important;
    min-height: var(--cha-header-h) !important;
    max-height: var(--cha-header-h) !important;
  }

  /* The current page must not advertise a second sign-in action. */
  body.cha-signin-page header#top .cha-mobile-header-signin,
  body.cha-signin-page header#top .cha-header-signin {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    flex: 0 0 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
  }

  body.cha-signin-page header#top .cha-mobile-controlbar {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: var(--cha-header-gap) !important;
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    margin: 0 0 0 auto !important;
    padding: 0 !important;
  }

  body.cha-signin-page header#top .cha-mobile-header-lang,
  body.cha-signin-page header#top .cha-mobile-header-menu {
    display: inline-flex !important;
    width: var(--cha-header-icon) !important;
    min-width: var(--cha-header-icon) !important;
    max-width: var(--cha-header-icon) !important;
    height: var(--cha-header-icon) !important;
    min-height: var(--cha-header-icon) !important;
    max-height: var(--cha-header-icon) !important;
    flex: 0 0 var(--cha-header-icon) !important;
    border-radius: 9999px !important;
  }

  body.cha-signin-page header#top .container-page > .relative > a:first-child,
  body.cha-signin-page header#top .cha-public-logo-link,
  body.cha-signin-page header#top .cha-header-logo-link,
  body.cha-signin-page header#top a:has(img[alt="Cuba Health Assist"]) {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: calc(100vw - var(--cha-logo-reserve)) !important;
    height: var(--cha-header-h) !important;
    min-height: var(--cha-header-h) !important;
    margin: 0 auto 0 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  body.cha-signin-page header#top .container-page > .relative > a:first-child img,
  body.cha-signin-page header#top .cha-public-logo-img,
  body.cha-signin-page header#top img[alt="Cuba Health Assist"] {
    display: block !important;
    width: auto !important;
    height: 31px !important;
    min-width: 0 !important;
    max-width: 168px !important;
    max-height: 31px !important;
    object-fit: contain !important;
    object-position: left center !important;
  }
}

@media (max-width: 380px) {
  body.cha-signin-page {
    --cha-header-h: 62px;
    --cha-header-icon: 38px;
    --cha-header-gap: 6px;
    --cha-logo-reserve: 98px;
  }

  body.cha-signin-page header#top .container-page > .relative > a:first-child img,
  body.cha-signin-page header#top .cha-public-logo-img,
  body.cha-signin-page header#top img[alt="Cuba Health Assist"] {
    height: 29px !important;
    max-width: 154px !important;
    max-height: 29px !important;
  }
}

/* Final runtime button geometry lock: the shared public shell carries a more
   specific 44px hamburger rule. Equalize both surviving sign-in controls. */
@media (max-width: 1023px) {
  body.cha-signin-page header#top .cha-mobile-controlbar > button.cha-mobile-header-btn.cha-mobile-header-lang,
  body.cha-signin-page header#top .cha-mobile-controlbar > button.cha-mobile-header-btn.cha-mobile-header-menu {
    box-sizing: border-box !important;
    width: var(--cha-header-icon) !important;
    min-width: var(--cha-header-icon) !important;
    max-width: var(--cha-header-icon) !important;
    height: var(--cha-header-icon) !important;
    min-height: var(--cha-header-icon) !important;
    max-height: var(--cha-header-icon) !important;
    flex: 0 0 var(--cha-header-icon) !important;
    padding: 0 !important;
  }
}