/* ===================================================
   LeetFX Global Layout Fix
   - Removes horizontal overflow / extra width issues
   - Ensures all pages stay within viewport
   =================================================== */

/* Prevent any element from causing horizontal scroll */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}

/* All section containers must not exceed viewport */
.section-shell,
.alpha-grid,
.booking-shell,
.mentor-shell,
.contact-shell,
.journal-shell,
.admin-shell {
  box-sizing: border-box;
  max-width: 100%;
}

/* Images never overflow their container */
img {
  max-width: 100%;
  height: auto;
}

/* Prevent text from forcing wide layouts */
pre, code {
  overflow-x: auto;
  max-width: 100%;
}

/* Fix hero section overflow on smaller screens */
@media (max-width: 900px) {
  .hero {
    overflow: hidden;
  }

  .intro-stage {
    max-width: 100% !important;
    overflow: hidden !important;
  }

  .intro-float-card {
    display: none !important;
  }
}

/* Fix topbar not overflowing */
.topbar,
.menu-3d {
  max-width: 100%;
  box-sizing: border-box;
}

/* Fix footer not overflowing */
footer,
.site-footer {
  box-sizing: border-box;
  max-width: 100%;
}

/* Fix the footer-grid max width */
.footer-grid {
  box-sizing: border-box;
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
}

/* Fix any absolute-positioned elements causing overflow */
.noise {
  max-width: 100vw;
  overflow: hidden;
}

/* Fix form status messages */
.form-status,
.alpha-status,
#bookingStatus,
#mentorStatus,
#testimonialStatus,
#contactStatus {
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* Ensure dialog modals don't overflow on mobile */
dialog {
  box-sizing: border-box;
  max-width: min(900px, 100vw - 32px);
  max-height: 90vh;
  overflow-y: auto;
}

/* Fix tables / grids on mobile */
@media (max-width: 600px) {
  .alpha-grid,
  .plan-grid {
    grid-template-columns: 1fr !important;
  }

  .payment-tabs {
    flex-wrap: wrap;
  }
}