/* Cheapplanet mobile browser stability v4.
   Normal mobile browser only. Keep desktop and installed PWA untouched.
   The key fix is stable viewport geometry: do not calculate the fixed nav's
   height from env(safe-area-inset-bottom), because iOS browser chrome can
   trigger repeated fixed-layer relayout/repaint while scrolling. */

@media (max-width: 700px) {
  html.cp-mobile-browser,
  html.cp-mobile-browser body {
    width: 100%;
    max-width: 100%;
    min-height: 100%;
    overflow-x: hidden;
  }

  html.cp-mobile-browser body {
    /* Fixed reservation: never changes while Safari/Chrome browser bars move. */
    padding-bottom: 76px !important;
  }

  html.cp-mobile-browser .app {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
  }

  html.cp-mobile-browser .cp-mobile-nav {
    position: fixed !important;
    z-index: 99990 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    width: 100% !important;
    height: 64px !important;
    min-height: 64px !important;
    max-height: 64px !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 6px 8px !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-bottom: 0 !important;
    border-radius: 18px 18px 0 0 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    transform: translateZ(0) !important;
    -webkit-transform: translateZ(0) !important;
    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden !important;
    will-change: auto !important;
    contain: layout paint !important;
    overscroll-behavior: none;
  }

  html.cp-mobile-browser .cp-mobile-nav button,
  html.cp-mobile-browser .cp-mobile-nav span,
  html.cp-mobile-browser .cp-mobile-nav small {
    transform: none !important;
    -webkit-transform: none !important;
    animation: none !important;
    transition: none !important;
    will-change: auto !important;
  }

  /* Avoid page-wide compositor work while the browser toolbar expands/collapses. */
  html.cp-mobile-browser .cp-neon-latest,
  html.cp-mobile-browser .cp-neon-latest::before,
  html.cp-mobile-browser .cp-neon-latest::after,
  html.cp-mobile-browser #listings .listing-card img.cp-luxury-photo-reveal {
    animation: none !important;
    transition: none !important;
    transform: none !important;
    filter: none !important;
    will-change: auto !important;
  }

  html.cp-mobile-browser .listing-card,
  html.cp-mobile-browser .category-card,
  html.cp-mobile-browser .cp-community-channel-grid button,
  html.cp-mobile-browser .cp-primary-action {
    transform: none !important;
  }

  html.cp-mobile-browser .site-header,
  html.cp-mobile-browser .cp-mobile-nav,
  html.cp-mobile-browser .cp-fundraiser-modal {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  html.cp-mobile-browser .site-header {
    position: relative !important;
    top: auto !important;
  }

  html.cp-mobile-browser img,
  html.cp-mobile-browser video,
  html.cp-mobile-browser canvas,
  html.cp-mobile-browser svg {
    max-width: 100%;
  }
}