/*
 * Mobile authorization modal isolation.
 *
 * The legacy auth markup is intentionally kept unchanged. On mobile, #auth had
 * inherited backdrop-filter/card styles from sw_mobile_unified.css. A filtered
 * ancestor becomes a containing/stacking context for fixed descendants in
 * mobile browsers, while #auth itself has virtually no normal-flow height.
 * That made .popup-container center against a ~0px-tall box instead of the
 * viewport. This file isolates the auth root as a real viewport layer.
 */
@media (max-width: 1100px) {
  body #auth.popup {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;

    /* #auth is a modal host, not a visual card. */
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;

    z-index: 2147483000 !important;
    isolation: isolate !important;
    pointer-events: auto !important;
  }

  body #auth.popup .popup-overlay {
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    background: rgba(7, 7, 11, .82) !important;
    opacity: 1 !important;
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
    z-index: 0 !important;
  }

  body #auth.popup .popup-container {
    position: absolute !important;
    top: calc(50% + (env(safe-area-inset-top) - env(safe-area-inset-bottom)) / 2) !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;

    width: calc(100vw - 24px) !important;
    max-width: 460px !important;
    height: auto !important;
    max-height: calc(100vh - 24px) !important;
    max-height: calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;

    margin: 0 !important;
    padding: 20px 16px !important;
    transform: translate(-50%, -50%) !important;

    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    z-index: 1 !important;
  }

  body #auth.popup .eas.close {
    z-index: 2 !important;
  }
}