/*
 * Euroway Mobile Safety Layer
 * Purpose: prevent horizontal page overflow on mobile without changing visual language.
 */

:root {
  --mobile-safe-gutter: 0.75rem;
  --mobile-safe-panel-max-width: calc(100vw - (var(--mobile-safe-gutter) * 2));
}

html,
body {
  width: 100%;
  max-width: 100%;
}

html {
  overflow-x: clip;
}

body {
  overflow-x: clip;
}

@supports not (overflow: clip) {
  html,
  body {
    overflow-x: hidden;
  }
}

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

input,
select,
textarea,
button {
  max-width: 100%;
}

pre,
code,
kbd,
samp {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.overflow-x-auto {
  -webkit-overflow-scrolling: touch;
}

/* Mobile menu safety (component uses these IDs globally). */
#mobile-sidebar {
  max-width: 88vw;
}

/* Fixed utility widgets + dropdown panels */
@media (max-width: 767.98px) {
  #chatbot-window,
  #chat-window,
  #chatWindow,
  #aiChatWindow {
    width: min(24rem, var(--mobile-safe-panel-max-width)) !important;
    max-width: var(--mobile-safe-panel-max-width) !important;
    max-height: min(74dvh, 36rem) !important;
    left: auto !important;
    right: 0 !important;
  }

  /* Notification panel — managed by notification-center.php inline styles */

  #chatbot-widget,
  #live-chat-widget,
  #liveChatWidget,
  #aiChatbotWidget {
    left: auto !important;
    right: var(--mobile-safe-gutter) !important;
    bottom: var(--mobile-safe-gutter) !important;
    max-width: var(--mobile-safe-panel-max-width);
  }

  /* Keep two chat buttons from fully overlapping when both are active. */
  #live-chat-widget {
    right: calc(var(--mobile-safe-gutter) + 4.25rem) !important;
  }

  #authModal {
    padding-left: var(--mobile-safe-gutter);
    padding-right: var(--mobile-safe-gutter);
  }

  #authModal > .relative,
  #tokenModal > div,
  #viewTokenModal > div,
  #templateModal > div {
    width: 100%;
    max-width: var(--mobile-safe-panel-max-width) !important;
    margin-left: auto;
    margin-right: auto;
  }

  .menu-pop {
    max-width: var(--mobile-safe-panel-max-width);
  }
}