/*
 * =====================================================================
 * NO-OVERFLOW.CSS — Papalo Global Overflow Lock
 * =====================================================================
 * Purpose: Permanently prevent horizontal overflow from ANY UI element.
 *
 * Root causes found & fixed here:
 * 1. responsive.css: `min-width: 101%` on slider images (line 952, 2172)
 *    → Forces content wider than viewport
 * 2. Chatbot widgets: inline `width: 550px` state overriding CSS max-width
 *    → Fixed in JS (viewport-aware useState), reinforced here via CSS
 * 3. carts/style.css: fixed-position elements with `right: 0; width: 100%`
 *    → Can extend past viewport if box-sizing not set
 * 4. dashboard.module.css: `min-width: 1080px !important` on table rows
 *    → Admin dashboard tables force wide layout on mobile
 * 5. `position: fixed` children do NOT cause scrollWidth overflow on body
 *    but CAN cause visual overflow if they extend right of viewport
 * 6. Missing `overflow-x: hidden` protection on key wrapper elements
 * =====================================================================
 */

/* ── LAYER 0: Nuclear html/body lock ─────────────────────────────── */
html {
  max-width: 100vw !important;
  overflow-x: hidden !important;
}

body {
  max-width: 100vw !important;
  overflow-x: hidden !important;
  position: relative; /* Establishes containing block for fixed children */
}

/* ── LAYER 1: Core layout wrappers ───────────────────────────────── */
#perspective,
#wrapper,
#page-content-wrapper,
.page-content-wrapper {
  max-width: 100vw !important;
  overflow-x: hidden !important;
  box-sizing: border-box !important;
}

/* ── LAYER 2: Slider images that use min-width: 101% ─────────────── */
/* Fixes responsive.css lines 952 & 2172 */
.craftcoffee_split_slick_slide_container .slideshow .slider .item img,
body.leftmenu .craftcoffee_split_slick_slide_container .slideshow .slider .item img {
  min-width: 0 !important;
  max-width: 100% !important;
}

/* All images globally should never exceed their container */
img {
  max-width: 100%;
  height: auto;
}

/* ── LAYER 3: Fixed-position UI elements ─────────────────────────── */
/*
 * position: fixed elements are positioned relative to viewport, so they
 * won't cause scrollWidth overflow by themselves, BUT they can visually
 * extend past the right edge. We constrain the known offenders.
 */

/* Chatbot button — always on left, must not bleed right */
.chatbotButton,
[class*="chatbotButton"] {
  max-width: calc(100vw - 40px) !important;
  box-sizing: border-box !important;
}

/* Chatbot window — reinforce the inline-style constraints */
.chatbotWindow,
[class*="chatbotWindow"] {
  max-width: calc(100vw - 40px) !important;
  box-sizing: border-box !important;
}

/* Thought bubble — must not escape right of screen */
.thoughtBubbleWrapper,
[class*="thoughtBubbleWrapper"] {
  max-width: calc(100vw - 80px) !important;
  box-sizing: border-box !important;
}

/* Cart bar (carts/style.css): fixed bottom bars */
#cart-bar,
.cart-bar,
[class*="cart-bar"],
.add-to-cart-sticky,
[class*="sticky-cart"] {
  max-width: 100vw !important;
  box-sizing: border-box !important;
  right: 0 !important;
  left: 0 !important;
}

/* ── LAYER 4: Mobile-specific table & wide-content containment ────── */
@media (max-width: 768px) {
  /* Dashboard tables that use min-width: 1080px */
  /* Wrap them in overflow-x: auto so page doesn't expand */
  [class*="tableWrapper"],
  [class*="table-wrapper"],
  .table-responsive,
  [class*="scrollWrapper"] {
    overflow-x: auto !important;
    max-width: 100vw !important;
    -webkit-overflow-scrolling: touch;
  }

  /* Standard layout containers */
  .standard-wrapper,
  #page-content-wrapper .inner,
  .page-content-wrapper .inner {
    max-width: 100vw !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  /* Elementor sections & columns */
  .elementor-section,
  .elementor-column,
  .elementor-widget-container {
    max-width: 100vw !important;
    box-sizing: border-box !important;
  }

  /* Any element wider than viewport gets clipped */
  * {
    max-width: 100%;
    box-sizing: border-box;
  }

  /* Exception: images in sliders need special treatment */
  .slider img,
  .slideshow img,
  .swiper-slide img {
    max-width: none; /* Let sliders manage their own width */
    width: 100%;
  }
}

/* ── LAYER 5: Chatbot mobile — reinforce !important over inline style ── */
@media (max-width: 480px) {
  [class*="chatbotWindow"] {
    width: calc(100vw - 20px) !important;
    max-width: calc(100vw - 20px) !important;
    left: 10px !important;
    right: 10px !important;
    box-sizing: border-box !important;
  }
}