/**
 * Layout and Positioning Styles
 * List Spot wizard (#mainContent) and shared container width helpers.
 *
 * Visibility utilities (.mobile-only / .desktop-only): base/responsive-breakpoints.css
 * Main app shell: main#main-content (see app-page-shell.css)
 */

/* ============================================================================
   LIST SPOT WIZARD MAIN (#mainContent — single template consumer)
   ============================================================================ */

#mainContent {
  margin-top: 0 !important;
  padding-top: 0 !important;
  padding-left: 1rem;
  padding-right: 1rem;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior-y: none;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
}

#listspot-wizard-form #mainContent {
  padding-top: 0 !important;
}

#listspot-wizard-form .max-w-4xl.mx-auto {
  padding-top: 0 !important;
}

/* Cookie banner disabled for launch */
#cookie-banner,
[data-cookie-banner="true"] {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  position: absolute !important;
  left: -9999px !important;
  height: 0 !important;
  width: 0 !important;
  overflow: hidden !important;
  z-index: -1 !important;
}

/* ============================================================================
   SHARED CONTAINER WIDTH (List Spot + legacy max-w-4xl pages)
   ============================================================================ */

@media (width <= 768px) {
  html {
    overflow-x: hidden;
    overscroll-behavior-y: none;
  }

  .max-w-4xl.mx-auto {
    padding-top: 0;
    width: 100%;
    max-width: min(85rem, calc(100vw - 2rem));
    box-sizing: border-box;
  }

  #listspot-wizard-form .max-w-4xl.mx-auto {
    padding-top: 0 !important;
  }
}

@media (width >= 769px) {
  .max-w-4xl.mx-auto {
    padding-top: 1rem;
    width: 100%;
    max-width: min(85rem, calc(100vw - 2rem));
    box-sizing: border-box;
  }

  #listspot-wizard-form .max-w-4xl.mx-auto {
    padding-top: 0 !important;
  }

  .desktop-only[href*="host_listings"] {
    top: var(--app-main-nav-offset, 6rem) !important;
    z-index: var(--z-elevated, 10) !important;
  }
}

@media (width >= 1280px) {
  .max-w-4xl.mx-auto {
    max-width: min(95rem, calc(100vw - 4rem));
  }
}

/* ============================================================================
   IOS-SPECIFIC
   ============================================================================ */

@supports (-webkit-touch-callout: none) {
  html {
    overscroll-behavior-y: none;
  }
}