/* Mobile authentication is a separate route within the shared storefront. */
body.mobile-app-page.mobile-ui-v2.auth-logged-out:not(.mobile-auth-screen) #view-live,
body.mobile-app-page.mobile-ui-v2.mobile-guest-picker #storefront-main-content,
body.mobile-app-page.mobile-ui-v2.mobile-auth-screen #storefront-order-panel {
  display: none !important;
}

body.mobile-app-page.mobile-ui-v2.mobile-auth-screen #storefront-main-content {
  display: block !important;
  width: 100%;
  padding: 0 .75rem 1.5rem !important;
}

body.mobile-app-page.mobile-ui-v2.auth-logged-out.mobile-auth-screen #view-live {
  display: block !important;
  min-height: 0;
  padding: 0 0 1rem !important;
}

body.mobile-app-page.mobile-ui-v2.mobile-auth-screen #live-active-orders-section {
  width: min(100%, 29rem);
  margin: 0 auto;
}

.mobile-auth-back {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  min-height: 44px;
  margin: .35rem 0;
  padding: .5rem .25rem;
  border: 0;
  background: transparent;
  color: var(--mobile-v2-primary, #009b78);
  font: 500 .8rem/1.5 var(--font-sans, 'Prompt', sans-serif);
  cursor: pointer;
}

.mobile-auth-back svg { width: 18px; height: 18px; }

/* Keep authentication fields above the software keyboard, including iOS where
   only the visual viewport shrinks. Larger text also avoids input auto-zoom. */
html body.mobile-app-page.mobile-ui-v2 :is(.auth-main-panel, #auth-modal, #user-change-password-modal, #user-security-modal) input {
  font-size: 16px !important;
  scroll-margin-block: 24px;
}
html body.mobile-app-page.mobile-ui-v2.mobile-auth-editing #storefront-main-content {
  padding-bottom: calc(var(--auth-keyboard-inset, 0px) + 2rem) !important;
}
html body.mobile-app-page.mobile-ui-v2.mobile-auth-editing #mobile-bottom-nav {
  visibility: hidden !important;
}
html body.mobile-app-page.mobile-ui-v2.mobile-auth-editing :is(#auth-modal, #user-change-password-modal, #user-security-modal) {
  top: var(--auth-viewport-top, 0px) !important;
  bottom: auto !important;
  height: var(--auth-visible-height, 100dvh) !important;
}
html body.mobile-app-page.mobile-ui-v2.mobile-auth-editing :is(#auth-modal, #user-change-password-modal, #user-security-modal) > div {
  max-height: 100% !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
}

/* Guests can choose a language before signing in, using the existing switcher. */
@media (max-width: 1440px) {
  body.mobile-app-page.mobile-ui-v2.is-guest #header-language-controls:not(.language-dropdown) {
    display: flex !important;
    flex: 0 0 auto;
    gap: 2px !important;
    padding: 3px !important;
    border: 1px solid var(--mobile-v2-border) !important;
    border-radius: 12px;
    background: var(--mobile-v2-surface) !important;
  }
  body.mobile-app-page.mobile-ui-v2.is-guest #header-language-controls:not(.language-dropdown) button {
    display: grid !important;
    place-items: center;
    width: 32px !important;
    height: 36px !important;
    padding: 4px !important;
    border: 1px solid transparent;
    border-radius: 8px;
  }
  body.mobile-app-page.mobile-ui-v2.is-guest #header-language-controls:not(.language-dropdown) img {
    width: 24px !important;
    height: 16px !important;
    border-radius: 2px;
    object-fit: cover;
  }
  body.mobile-app-page.mobile-ui-v2.is-guest #header-language-controls:not(.language-dropdown) button[aria-pressed="true"] {
    border-color: #7dd3fc !important;
    background: color-mix(in srgb, #38bdf8 12%, var(--mobile-v2-surface)) !important;
    opacity: 1 !important;
  }
}
@media (max-width: 1440px) {
  body.mobile-app-page.mobile-ui-v2.is-guest #storefront-container > header {
    flex-wrap: nowrap !important;
    gap: 8px !important;
  }
  body.mobile-app-page.mobile-ui-v2.is-guest #header-right-controls {
    flex: 0 0 auto;
    flex-wrap: nowrap;
    gap: 6px !important;
    justify-content: flex-end !important;
  }
  body.mobile-app-page.mobile-ui-v2.is-guest #header-language-controls {
    order: 0;
  }
  body.mobile-app-page.mobile-ui-v2.is-guest #header-language-controls > summary {
    min-width: 48px;
    padding-inline: 7px;
    gap: 6px;
  }
  body.mobile-app-page.mobile-ui-v2.is-guest #header-language-controls > .language-dropdown-menu {
    left: 0;
    right: auto;
  }
}
@media (max-width: 560px) {
  body.mobile-app-page.mobile-ui-v2.is-guest #header-brand-logo {
    flex: 0 1 auto;
    gap: 6px !important;
  }
  body.mobile-app-page.mobile-ui-v2.is-guest #egg-icon-element {
    width: 34px !important;
    height: 38px !important;
  }
  body.mobile-app-page.mobile-ui-v2.is-guest #header-brand-logo h1 {
    font-size: 16px !important;
  }
  body.mobile-app-page.mobile-ui-v2.is-guest #header-brand-logo p {
    display: none !important;
  }
  body.mobile-app-page.mobile-ui-v2.is-guest #header-guest-buttons {
    gap: 4px;
  }
  body.mobile-app-page.mobile-ui-v2.is-guest #header-guest-buttons button {
    padding-inline: 8px !important;
    font-size: 10.5px !important;
  }
}
@media (max-width: 360px) {
  body.mobile-app-page.mobile-ui-v2.is-guest #storefront-container > header {
    padding-inline: 8px !important;
    gap: 5px !important;
  }
  body.mobile-app-page.mobile-ui-v2.is-guest #header-right-controls {
    gap: 4px !important;
  }
  body.mobile-app-page.mobile-ui-v2.is-guest #egg-icon-element {
    width: 28px !important;
    height: 34px !important;
    font-size: 18px !important;
  }
  body.mobile-app-page.mobile-ui-v2.is-guest #header-brand-logo h1 {
    font-size: 14px !important;
  }
  body.mobile-app-page.mobile-ui-v2.is-guest #header-guest-buttons button {
    padding-inline: 6px !important;
    font-size: 10px !important;
  }
}