/* v897 — Final public mobile audit/safety pass
   Desktop untouched. All rules apply only to tablet/mobile breakpoints. */

/* Tablet safety: prevent hidden fixed widths from creating page-level horizontal overflow */
@media (max-width: 1024px) {
  html, body {
    max-width: 100% !important;
    overflow-x: clip !important;
  }

  body :where(.container, main, section, article, aside, header, footer, nav, div) {
    box-sizing: border-box !important;
  }

  body :where(.container) {
    max-width: 100% !important;
  }

  body :where(
    [class*="layout"],
    [class*="grid"],
    [class*="shell"],
    [class*="wrap"],
    [class*="inner"],
    [class*="rail"],
    [class*="main"],
    [class*="article"],
    [class*="content"]
  ) {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  body :where(
    [class*="sidebar"],
    [class*="side-bar"],
    [class*="sidebox"],
    [class*="side-box"],
    aside
  ) {
    max-width: 100% !important;
    min-width: 0 !important;
  }

  body :where(img, video, canvas, svg, iframe) {
    max-width: 100% !important;
  }

  body :where(pre, code) {
    white-space: pre-wrap !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
  }
}

/* Main mobile layer */
@media (max-width: 768px) {
  html, body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  body {
    padding-bottom: 96px !important;
  }

  body :where(.container) {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Force common desktop grids to one column only on mobile */
  body :where(
    .grid,
    [class*="grid"],
    [class*="layout"],
    [class*="columns"],
    [class*="two-col"],
    [class*="three-col"],
    [class*="four-col"],
    [class*="cards"],
    [class*="card-grid"],
    [class*="feature-grid"],
    [class*="service-grid"],
    [class*="step-grid"]
  ) {
    grid-template-columns: 1fr !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  /* Avoid flex rows squeezing text/buttons off screen */
  body :where(
    [class*="actions"],
    [class*="cta"],
    [class*="button-row"],
    [class*="btn-row"],
    [class*="hero-actions"]
  ) {
    flex-wrap: wrap !important;
    gap: 10px !important;
  }

  body :where(
    [class*="actions"] .btn,
    [class*="cta"] .btn,
    [class*="button-row"] .btn,
    [class*="btn-row"] .btn,
    [class*="hero-actions"] .btn
  ) {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  /* Tables: never allow body-level horizontal scroll */
  body :where(table) {
    max-width: none !important;
    min-width: 540px !important;
    width: max-content !important;
  }

  body :where(
    .table-wrap,
    .table-responsive,
    [class*="table-wrap"],
    [class*="table-responsive"],
    [class*="matrix-wrap"],
    [class*="pricing-table"],
    [class*="fee-table"],
    [class*="requirements-table"]
  ) {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    box-sizing: border-box !important;
  }

  body :where(
    .table-wrap,
    .table-responsive,
    [class*="table-wrap"],
    [class*="table-responsive"],
    [class*="matrix-wrap"]
  )::-webkit-scrollbar {
    height: 8px !important;
  }

  /* Form safety */
  body :where(input, select, textarea, button) {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  body :where(input, select, textarea) {
    width: 100% !important;
    min-width: 0 !important;
    font-size: 16px !important;
  }

  body :where(button, .btn, input[type="submit"]) {
    min-height: 42px !important;
  }

  /* Large media on mobile */
  body :where([class*="hero"] img, [class*="banner"] img, [class*="visual"] img, [class*="media"] img, [class*="art"] img) {
    max-width: 100% !important;
    object-fit: cover !important;
  }

  body :where([class*="hero-media"], [class*="hero-art"], [class*="banner"], [class*="visual-card"], [class*="image-panel"]) {
    max-width: 100% !important;
    overflow: hidden !important;
  }

  /* Typography safety */
  body :where(h1) {
    overflow-wrap: anywhere !important;
  }

  body :where(h2, h3, p, li, a, span, strong, td, th) {
    overflow-wrap: break-word !important;
  }

  /* Cards/panels: flatten the most problematic heavy mobile shadows */
  body :where(
    .card,
    [class*="card"],
    [class*="panel"],
    [class*="box"]
  ) {
    max-width: 100% !important;
    min-width: 0 !important;
  }

  /* Floating contact controls: keep them from covering whole lower screen */
  body :where(.whatsapp-float, .telegram-float) {
    max-width: calc(100vw - 28px) !important;
    z-index: 800 !important;
  }

  body :where(.vge-chatbot-launcher, .vge-lsc-launcher) {
    right: 12px !important;
    bottom: 12px !important;
    max-width: calc(100vw - 24px) !important;
    z-index: 900 !important;
  }

  body :where(.vge-chatbot-panel, .vge-lsc-widget) {
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
    right: 12px !important;
    left: auto !important;
  }

  /* Footer mobile guard */
  body :where(.footer-grid, [class*="footer-grid"]) {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }

  body :where(.footer, footer) {
    overflow-x: hidden !important;
  }
}

/* Small phones */
@media (max-width: 430px) {
  body :where(.container) {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  body :where(table) {
    min-width: 500px !important;
  }

  body :where(h1) {
    font-size: clamp(27px, 10vw, 36px) !important;
    line-height: 1.12 !important;
  }

  body :where(h2) {
    font-size: clamp(22px, 7vw, 30px) !important;
  }

  body :where(.btn, button, input[type="submit"]) {
    font-size: 14px !important;
  }

  body :where(.vge-chatbot-panel, .vge-lsc-widget) {
    width: calc(100vw - 16px) !important;
    max-width: calc(100vw - 16px) !important;
    right: 8px !important;
  }
}

/* Very small phones */
@media (max-width: 390px) {
  body :where(.container) {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  body :where(table) {
    min-width: 480px !important;
  }

  body :where(h1) {
    font-size: clamp(25px, 10.5vw, 34px) !important;
  }

  body :where(.btn, button, input[type="submit"]) {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}