/* FIX HORIZONTAL SCROLL ISSUE */

/* Prevent horizontal overflow at root level */
html {
  overflow-x: clip;
  width: 100%;
}

body {
  overflow-x: clip;
  width: 100%;
  margin: 0;
  padding: 0;
}

/* Ensure main content doesn't overflow */
main {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

/* Fix sections that might overflow */
section {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  box-sizing: border-box;
}

/* Fix containers */
.container {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow-x: hidden;
}

/* Ensure all images respect viewport */
img {
  max-width: 100%;
  height: auto;
  display: block;
  overflow-x: hidden;
}

/* Fix any elements with overflow: visible */
.pricing-fix,
.pricing-cards,
.pricing-section {
  overflow: hidden !important;
}

/* Ensure hero doesn't overflow */
.hero,
.hero-bg {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden !important;
}

/* Fix navigation that might cause scroll */
.nav-header,
.header-container {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* Fix flexbox overflow */
.flex {
  max-width: 100%;
  overflow-x: hidden;
  box-sizing: border-box;
}

/* Fix grid overflow */
.grid {
  max-width: 100%;
  overflow-x: hidden;
  box-sizing: border-box;
}

/* Ensure all child elements respect viewport */
* {
  box-sizing: border-box;
}

/* Fix for external images that might be too large */
img[src*='googleapis'],
img[src*='labs.google'],
.details-image {
  max-width: 100%;
  height: auto !important;
  display: block;
  overflow-x: hidden;
}

/* Fix background images */
[style*='background-image'] {
  background-size: cover;
  background-position: center;
  overflow-x: hidden;
}

/* Media query for mobile - extra strict */
@media (max-width: 768px) {
  body,
  html {
    width: 100vw;
    overflow-x: hidden;
  }

  section,
  .container,
  main {
    width: 100vw;
    overflow-x: hidden;
  }

  img,
  .details-image {
    max-width: 100vw;
    overflow-x: hidden;
  }

  /* Fix any absolutely positioned elements */
  [style*='position: absolute'],
  [style*='position:absolute'] {
    max-width: 100vw;
    overflow-x: hidden;
  }
}

/* Ensure no element uses width: 100vw (which causes scroll) */
[style*='width: 100vw'],
[style*='width:100vw'],
.full-viewport-width {
  width: 100% !important;
  overflow-x: hidden !important;
}

/* Fix for positioning issues */
.hero-particles,
.decoration-glow,
.particle,
.decoration {
  pointer-events: none;
  overflow-x: hidden;
}

/* Backup: disable horizontal scroll in absolute worst case */
@supports (scrollbar-gutter: stable) {
  html {
    scrollbar-gutter: stable;
    overflow-y: scroll;
  }
}