/* ========================================================
   BWM ULTRA MOBILE RESPONSIVE ENGINE
   Optimized for all phone screens (320px - 480px)
   ======================================================== */

@media (max-width: 768px) {
  html, body {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    display: block !important;
    overflow-x: hidden !important;
    -webkit-text-size-adjust: 100%;
    background-color: #ffffff !important;
  }

  .nav-layout,
  .mobile-container,
  .app-viewport,
  .order-history-page,
  .user-root,
  .level-page,
  .level-container,
  .lucky-stage,
  .lucky-type-container,
  .fund-container,
  .rules-container,
  .detail-container,
  .promotion-main,
  .page-root,
  #root,
  .content-wrapper,
  .bank-container,
  .record-container,
  .set-fund-password-container,
  .set-password-container {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    box-sizing: border-box !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Universal Sticky Top Headers */
  .top-navbar,
  .nut-navbar,
  .fund-navbar,
  .top-header,
  .head-box {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    left: 0 !important;
    right: 0 !important;
  }

  /* Bottom Navbars */
  .bottom-nav {
    width: 100% !important;
    max-width: 100% !important;
    left: 0 !important;
    right: 0 !important;
    transform: none !important;
    box-sizing: border-box !important;
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
  }

  /* Bottom Tabbar across all pages */
  .nut-tabbar {
    width: 100% !important;
    max-width: 100% !important;
    left: 0 !important;
    right: 0 !important;
    transform: none !important;
    box-sizing: border-box !important;
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
    height: calc(54px + env(safe-area-inset-bottom, 0px)) !important;
    z-index: 888 !important;
  }

  /* Floating gift box on home */
  .gift-receive-box {
    left: auto !important;
    right: 14px !important;
    top: auto !important;
    bottom: 74px !important;
    z-index: 850 !important;
  }

  .gift-receive-box .gift-receive {
    width: 44px !important;
    height: 44px !important;
  }

  /* Home containers & grids */
  .home-page-container {
    padding: 0 12px !important;
  }

  /* 4 Action boxes */
  .tab-nav-second-separate {
    gap: 6px !important;
  }

  .sep-box {
    padding: 6px 2px !important;
    min-width: 0 !important;
    height: 72px !important;
  }

  .sep-box img {
    width: 24px !important;
    height: 24px !important;
  }

  .sep-box span, .sep-box div {
    font-size: clamp(9px, 2.6vw, 10.5px) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
  }

  /* Limited Subsidy & Crazy Discount 2-card row */
  .tab-nav-third .tab-nav-main {
    gap: 8px !important;
  }

  .tab-nav-third .join-us {
    height: auto !important;
    min-height: 155px !important;
    padding: 6px 4px 8px !important;
  }

  .tab-nav-third .join-us .title {
    font-size: 13.5px !important;
    margin-bottom: 4px !important;
  }

  .tab-nav-third .pd-box .box-item .img {
    width: 100% !important;
    max-width: 64px !important;
    aspect-ratio: 1 / 1 !important;
    height: auto !important;
  }

  .tab-nav-third .pd-box .box-item .cont {
    font-size: 9px !important;
    max-width: 100% !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .tab-nav-third .pd-box .box-item .num {
    font-size: 11.5px !important;
  }

  /* Top Swiper Banner */
  .top-swiper-box {
    height: clamp(120px, 32vw, 145px) !important;
    margin: 10px 0 !important;
  }

  /* 2-column commodities grid */
  .home-task-img-list {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    width: 100% !important;
  }

  .task-img-item {
    width: 100% !important;
    min-height: auto !important;
    margin-bottom: 0 !important;
  }

  .task-img-item .img-box {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
  }

  .task-img-item .title {
    font-size: 12.5px !important;
    line-height: 17px !important;
    height: 34px !important;
    margin: 6px 6px 0 !important;
  }

  .task-img-item .condition {
    margin: 4px 6px 6px !important;
    gap: 2px !important;
  }

  .task-img-item .condition .price-box .price {
    font-size: 13px !important;
  }

  .task-img-item .condition .price-box .original-price {
    font-size: 10px !important;
  }

  .task-img-item .condition .sold {
    font-size: 10px !important;
  }

  .task-img-item .todo-btn {
    height: 28px !important;
    font-size: 11px !important;
    margin: 0 6px 8px !important;
  }

  /* Dialogs and Modals never overflow screen */
  .notice-dialog-box,
  .custom-modal,
  .modal-box,
  .confirm-dialog,
  .rule-modal-box {
    width: calc(100vw - 28px) !important;
    max-width: 360px !important;
    box-sizing: border-box !important;
  }

  /* Membership Level Swiper */
  .my-swiper {
    padding: 10px 0 20px !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  .vip-level-card {
    max-width: 100% !important;
    padding: 16px 14px 14px !important;
  }

  .level-table-box {
    margin: 0 10px 16px !important;
  }

  /* Profile page stats */
  .user-root {
    padding: 0 10px !important;
  }

  .wallet-card-grid {
    gap: 8px !important;
  }

  /* Auth Pages (Login & Register) Single-Screen Viewport Fit */
  .app-viewport {
    min-height: 100dvh !important;
    height: 100dvh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .top-bar {
    padding: max(20px, calc(env(safe-area-inset-top) + 12px)) 16px 6px !important;
  }

  @media (max-height: 720px) {
    .brand-section {
      padding: 6px 16px 8px !important;
    }
    .brand-logo {
      width: 110px !important;
    }
    .form-section {
      gap: 8px !important;
      padding: 0 16px !important;
    }
    .form-card {
      padding: 10px 12px !important;
      gap: 7px !important;
      margin: 0 12px !important;
    }
    .input-box {
      height: 38px !important;
    }
    .submit-btn {
      height: 40px !important;
      font-size: 14px !important;
    }
    .footer-agreement {
      padding: 8px 12px max(10px, env(safe-area-inset-bottom)) !important;
      font-size: 11px !important;
    }
  }
}