/**
 * Profile / account family pages (mobile) — kill the large black void
 * under .vip-container and tighten spacing so content meets the footer.
 * Desktop (>=1024) untouched. No logic changes.
 */

@media (max-width: 1023.98px) {
  :root {
    --cig-profile-gap: 10px;
  }

  /*
   * SPA profile hub + subpages (account, VIP, affiliate, limits, etc.)
   * share .vip-page / .vip-container with margin-bottom: 7rem !important
   * and heavy bottom padding — that is the black hole.
   */
  .vip-page,
  .vip-page[class] {
    padding-top: 1.1rem !important;
    padding-left: 0.85rem !important;
    padding-right: 0.85rem !important;
    padding-bottom: 0.75rem !important;
    min-height: 0 !important;
    box-sizing: border-box !important;
  }

  .vip-container,
  .vip-container[class] {
    margin-top: 0.65rem !important;
    margin-bottom: 0.5rem !important;
    padding: 1.15rem 0.95rem 1rem !important;
    box-sizing: border-box !important;
  }

  /* Last CTA / back button sits closer to the legal footer */
  .account-back-footer,
  .account-back-footer[class] {
    margin-top: 1rem !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  .account-back-big-button,
  .account-back-big-button[class] {
    margin-bottom: 0 !important;
  }

  /* Menu grid a bit tighter so the page feels cohesive */
  .account-menu,
  .account-menu[class] {
    margin-top: 1.35rem !important;
  }

  .account-menu-grid,
  .account-menu-grid[class] {
    gap: 0.75rem !important;
  }

  .account-menu-column,
  .account-menu-column[class] {
    gap: 0.55rem !important;
  }

  .account-main-layout,
  .account-main-layout[class],
  .affiliate-main-layout,
  .affiliate-main-layout[class] {
    margin-top: 1.15rem !important;
    gap: 1rem !important;
  }

  .account-security-box,
  .account-security-box[class] {
    margin-top: 1.15rem !important;
  }

  .account-summary-box,
  .account-summary-box[class] {
    margin-top: 0.4rem !important;
  }

  /* Wallet / deposit siblings under /profile/* — same black void pattern */
  .wallet-wrapper,
  .wallet-wrapper[class],
  .deposit-page-wrapper,
  .deposit-page-wrapper[class] {
    min-height: 0 !important;
    padding-top: 1.15rem !important;
    padding-bottom: 1rem !important;
    box-sizing: border-box !important;
  }

  /*
   * Footer: sit right after the last profile block (no extra black band).
   * Spacer for fixed bottom nav remains via .bottom-nav-spacer.
   */
  .footer-wrapper,
  .footer-wrapper[class] {
    margin-top: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  .footer-inner,
  .footer-inner[class] {
    padding-top: 14px !important;
    padding-bottom: 4px !important;
  }

  .footer-bottom,
  .footer-bottom[class] {
    margin-top: 8px !important;
    margin-bottom: 0 !important;
    padding-bottom: 2px !important;
    gap: 6px !important;
  }

  .footer-legal-row,
  .footer-legal-row[class] {
    margin-top: 8px !important;
    margin-bottom: 6px !important;
    padding-bottom: 8px !important;
    gap: 10px !important;
  }

  /* Avoid double-counting huge Tailwind bottom padding on profile shells */
  .vip-page.pb-32,
  .vip-page .pb-32,
  .vip-container.pb-32 {
    padding-bottom: 0.75rem !important;
  }
}