/* Global mobile horizontal overflow hotfix */
html,
body {
  max-width: 100%;
  overflow-x: hidden !important;
}

body {
  position: relative;
}

main,
header,
section,
footer,
.service-page,
.contact-page,
.tool-page {
  max-width: 100%;
  overflow-x: clip;
}

img,
svg,
video,
canvas,
iframe {
  max-width: 100%;
  height: auto;
}

pre,
table {
  max-width: 100%;
}

[class*="wrap"],
[class*="grid"],
[class*="card"] {
  min-width: 0;
}

.tms-perfect-nav,
.perfect-nav,
.contact-wrap,
.service-wrap,
.tool-wrap,
.wrap {
  width: min(100%, 1180px) !important;
}

@media (max-width: 940px) {
  html,
  body {
    overflow-x: hidden !important;
  }

  .tms-perfect-header,
  .perfect-header {
    max-width: 100vw !important;
    overflow-x: clip !important;
  }

  .tms-perfect-nav,
  .perfect-nav {
    padding-left: 16px !important;
    padding-right: 16px !important;
    gap: 12px !important;
    max-width: 100vw !important;
  }

  .tms-perfect-logo,
  .perfect-logo,
  .tms-perfect-mobile-logo,
  .perfect-mobile-logo {
    min-width: 0 !important;
    max-width: calc(100vw - 96px) !important;
  }

  .tms-perfect-logo-img,
  .perfect-logo-img {
    max-width: 140px !important;
    height: auto !important;
  }

  .tms-perfect-mobile-panel,
  .perfect-mobile-panel {
    width: min(82vw, 380px) !important;
    max-width: calc(100vw - 14px) !important;
    right: 0 !important;
    left: auto !important;
    overflow-x: hidden !important;
  }

  .tms-perfect-mobile-links,
  .perfect-mobile-links {
    overflow-x: hidden !important;
  }

  .service-hero,
  .service-section,
  .tool-hero,
  .tool-section,
  .contact-hero,
  .section,
  .hero {
    padding-left: 20px !important;
    padding-right: 20px !important;
    overflow-x: hidden !important;
  }

  .service-hero-grid,
  .hero-grid,
  .grid-2,
  .feature-grid,
  .package-grid,
  .service-cta-band,
  .cta-band,
  .contact-hero-grid,
  .contact-grid,
  .tool-hero-grid,
  .tool-content,
  .tool-grid {
    min-width: 0 !important;
  }

  .service-page h1,
  .tool-page h1,
  .contact-page h1 {
    overflow-wrap: anywhere;
  }

  /* Contain the AI butler/chat widget on mobile */
  #tms-ai-butler,
  .tms-ai-butler,
  .ai-butler-widget,
  .website-butler-widget,
  [class*="butler"] {
    max-width: calc(100vw - 20px) !important;
  }

  #tms-ai-butler,
  .tms-ai-butler,
  .ai-butler-widget,
  .website-butler-widget {
    right: 10px !important;
    left: auto !important;
    width: min(360px, calc(100vw - 20px)) !important;
  }

  .butler-launcher,
  [class*="butler-launcher"],
  [id*="butler-launcher"] {
    right: 10px !important;
    left: auto !important;
  }
}