/* ============================================================
   PAKHANJURE ONE - GAP FIX (v6.0 - App Shell + Full Width)
   ============================================================
   SYSTEM:
   - body: scroll NAHI karegi (overflow: hidden)
   - .mobile-app-frame: fixed height 100vh, overflow: hidden
   - scroll container: flex: 1 + min-height: 0 + overflow-y: auto
   ============================================================ */

/* ============================================================
   1. GLOBAL RESET — BODY SCROLL BAND
   ============================================================ */
html {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  height: 100% !important;
  box-sizing: border-box !important;
  background-color: #050811 !important;
  overflow: hidden !important;
}

body {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  height: 100% !important;
  box-sizing: border-box !important;
  background-color: #050811 !important;
  overflow: hidden !important;

  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  color: #ffffff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);

  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
  -webkit-user-select: auto !important;
  user-select: auto !important;
  -webkit-touch-callout: default !important;
}

/* ============================================================
   2. APP FRAME — FIXED HEIGHT (App Shell)
   ============================================================ */
.mobile-app-frame,
.auth-frame,
.partner-frame,
.rider-frame,
.admin-frame {
  position: relative !important;
  margin: 0 auto !important;
  padding: 0 !important;

  max-width: 100% !important;
  width: 100% !important;

  height: 100vh !important;
  max-height: 100vh !important;

  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;

  overflow: hidden !important;

  background-color: #0a0f1d !important;

  touch-action: pan-y !important;
  -webkit-overflow-scrolling: touch !important;
}

/* ============================================================
   3. HEADERS — FIXED (Shrink Nahi Honge)
   ============================================================ */
.top-brand-bar,
.home-header,
.partner-header,
.rider-header,
.admin-header,
.cart-header-bar,
.track-header-bar,
.filter-header-bar,
.rider-top-nav {
  margin: 0 !important;
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
}

.top-brand-bar {
  padding: 14px 20px !important;
  min-height: 56px !important;
}

/* ============================================================
   4. BOTTOM NAV — FIXED
   ============================================================ */
.app-nav-dock {
  flex-shrink: 0 !important;
}

/* ============================================================
   5. SCROLL CONTAINERS — MAIN SCROLL (ALL PAGES)
   ============================================================ */
.auth-body-container,
.customer-scroll-view,
.profile-scroll-view,
.cart-scroll-view,
.offers-scroll-view,
.track-scroll-view,
.menu-scrollable-content,
.success-container,
.admin-scroll-view,
.partner-scroll-view,
.rider-scroll-view {
  flex: 1 1 0% !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;

  width: 100% !important;
  box-sizing: border-box !important;

  background-color: var(--bg-page, #0a0f1d);
  color: #ffffff;

  touch-action: pan-y !important;
  overscroll-behavior-y: contain !important;
}

.rider-scroll-view,
.customer-scroll-view,
.profile-scroll-view,
.cart-scroll-view,
.offers-scroll-view,
.track-scroll-view,
.admin-scroll-view,
.partner-scroll-view {
  padding-bottom: 80px !important;
}

.auth-body-container {
  padding-top: 20px !important;
  padding-bottom: 40px !important;
}

/* ============================================================
   6. SPLASH WRAPPER — SCROLL CONTAINER (FULL WIDTH)
   ============================================================ */
.splash-wrapper {
  flex: 1 1 0% !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  padding: 20px;
  padding-top: 20px !important;

  display: flex;
  flex-direction: column;
  justify-content: space-between;

  color: #ffffff;
}

/* ============================================================
   7. DESKTOP MODE — FULL WIDTH (Splash wrapper full, content center)
   ============================================================ */
@media (min-width: 768px) {
  /* Sirf headers aur scroll containers ko center karein — splash-wrapper NAHI */
  .top-brand-bar,
  .home-header,
  .cart-header-bar,
  .track-header-bar,
  .filter-header-bar,
  .admin-header,
  .partner-header,
  .rider-top-nav,
  .customer-scroll-view,
  .profile-scroll-view,
  .cart-scroll-view,
  .offers-scroll-view,
  .track-scroll-view,
  .menu-scrollable-content,
  .success-container,
  .admin-scroll-view,
  .partner-scroll-view,
  .rider-scroll-view,
  .auth-body-container {
    max-width: 1200px !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
    box-sizing: border-box !important;
  }

  .app-nav-dock {
    max-width: 1200px !important;
    margin: 0 auto !important;
    left: 0 !important;
    right: 0 !important;
    border-radius: 0 !important;
  }

  /* Splash wrapper - full width, padding badhao */
  .splash-wrapper {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 48px !important;
    padding-right: 48px !important;
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }

  /* Splash content - max-width do (taaki fail na jaye) */
  .splash-wrapper .splash-bottom {
    max-width: 700px;
    width: 100%;
  }

  /* Splash brand row - normal */
  .splash-wrapper .brand-row {
    margin-top: 10px;
  }
}

/* Large desktop */
@media (min-width: 1400px) {
  .splash-wrapper {
    padding-left: 80px !important;
    padding-right: 80px !important;
  }
}

/* ============================================================
   8. SAFE AREA (Curved Display / Notch)
   ============================================================ */
.safe-top,
.safe-bottom {
  padding-top: env(safe-area-inset-top, 0px) !important;
  padding-bottom: env(safe-area-inset-bottom, 0px) !important;
}

/* ============================================================
   9. LANDSCAPE MODE
   ============================================================ */
@media (max-height: 500px) and (orientation: landscape) {
  .mobile-app-frame,
  .auth-frame,
  .partner-frame,
  .rider-frame,
  .admin-frame {
    height: 100vh !important;
    max-height: 100vh !important;
  }
}