/* ==========================================================
   Load AFTER all other CSS to fix responsive / mobile overflow
   ========================================================== */

/* Force border-box everywhere */
*,
*::before,
*::after {
  box-sizing: border-box !important;
}

/* Prevent horizontal scroll on the whole page */
html {
  overflow-x: hidden !important;
  max-width: 100% !important;
  width: 100% !important;
}

body {
  overflow-x: hidden !important;
  max-width: 100% !important;
  width: 100% !important;
  position: relative !important;
}

/* Reset Bootstrap .container so Tailwind container works */
.container {
  max-width: 100% !important;
  width: 100% !important;
  padding-left: 1rem !important;
  padding-right: 1rem !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

@media (min-width: 640px) {
  .container {
    max-width: 640px !important;
    padding-left: 2rem !important;
    padding-right: 2rem !important;
  }
}
@media (min-width: 768px) {
  .container { max-width: 768px !important; }
}
@media (min-width: 1024px) {
  .container { max-width: 1024px !important; }
}
@media (min-width: 1280px) {
  .container { max-width: 1280px !important; }
}
@media (min-width: 1536px) {
  .container { max-width: 1400px !important; }
}

/* Kill Bootstrap .row negative margins that cause overflow */
.row {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Kill Bootstrap .container-fluid */
.container-fluid {
  padding-left: 1rem !important;
  padding-right: 1rem !important;
  max-width: 100% !important;
}

/* Fix 100vw → 100% (100vw includes scrollbar width, causes overflow) */
.nickname,
.boxnames,
.group-title,
.group-block {
  max-width: 100% !important;
}

/* Kill decorative image extreme negative margins on mobile */
@media (max-width: 1024px) {
  .orange-slice,
  .pinapple,
  .banana,
  .apple {
    margin-right: 0 !important;
    display: none !important;
  }
}

/* Fix homepage/namepage mobile negative margins */
div#some_random_variants {
  margin-left: 0 !important;
  margin-right: 0 !important;
  overflow-x: hidden !important;
}

/* Fix suggest-text negative margin */
.suggest-text {
  margin-left: 0 !important;
}

/* Fix emoji-kitchen row margins */
#popularCombinations .row {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Catch-all: nothing should extend beyond viewport */
header,
main,
footer,
nav,
section,
article {
  max-width: 100vw !important;
  overflow-x: hidden !important;
}