/**
 * 400% Zoom Reflow Support
 * 
 * This stylesheet ensures content reflows properly at 400% zoom (4× magnification),
 * meeting WCAG 2.1 Level AA accessibility requirements.
 * 
 * At 400% zoom, a typical 1920px viewport becomes effectively 480px wide.
 * This file uses media queries to detect narrow viewports and ensure proper reflow.
 */

/* Base styles for all zoom levels */
html {
  /* Ensure no horizontal scrolling at any zoom level */
  overflow-x: hidden;
  width: 100%;
}

body {
  /* Prevent horizontal scrolling */
  overflow-x: hidden;
  width: 100%;
  max-width: 100%;
  /* Ensure content can reflow */
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* Container that wraps all content */
#root {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

/* Media query for 400% zoom (effective viewport width ~480px or less) */
/* This covers most desktop screens at 400% zoom */
@media (max-width: 480px) {
  /* Ensure all containers are flexible */
  * {
    max-width: 100% !important;
  }

  /* Prevent fixed widths from causing horizontal scroll */
  [style*="width"] {
    max-width: 100% !important;
  }

  /* Make all fixed-width elements flexible */
  .scrollbar-container {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  /* Ensure modals and overlays are full width at high zoom */
  [class*="modal"],
  [class*="Modal"],
  [class*="overlay"],
  [class*="Overlay"] {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    left: 0 !important;
    right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Fix dropdowns and popovers */
  [class*="dropdown"],
  [class*="Dropdown"],
  [class*="popover"],
  [class*="Popover"] {
    max-width: 100% !important;
    width: auto !important;
  }

  /* Ensure tables can scroll horizontally if needed, but don't break layout */
  table {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
  }

  /* Make images responsive */
  img {
    max-width: 100% !important;
    height: auto !important;
  }

  /* Ensure text containers wrap properly */
  p, span, div, h1, h2, h3, h4, h5, h6 {
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    hyphens: auto;
  }

  /* Fix phone input dropdown */
  .react-international-phone-country-selector-dropdown {
    width: 100% !important;
    max-width: 100% !important;
    left: 0 !important;
  }

  /* Ensure carousels and sliders don't overflow */
  [class*="carousel"],
  [class*="Carousel"],
  [class*="slider"],
  [class*="Slider"] {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  /* Fix fixed positioning elements */
  [style*="position: fixed"],
  [style*="position:absolute"] {
    max-width: 100vw !important;
  }
}

/* Additional media query for very high zoom (effective viewport ~320px or less) */
@media (max-width: 320px) {
  /* Even more aggressive reflow for very high zoom */
  body {
    font-size: 16px !important; /* Ensure minimum readable font size */
  }

  /* Stack all flex containers vertically */
  [style*="flex"],
  [class*="flex"] {
    flex-direction: column !important;
  }

  /* Make all grid layouts single column */
  [style*="grid"],
  [class*="grid"] {
    grid-template-columns: 1fr !important;
  }
}

/* Ensure viewport units don't cause horizontal scroll */
@media (max-width: 480px) {
  /* Replace vw units that might cause overflow */
  [style*="100vw"] {
    width: 100% !important;
  }

  [style*="50vw"],
  [style*="80vw"],
  [style*="90vw"] {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* Fix for components with min-width constraints */
@media (max-width: 480px) {
  /* Remove or reduce min-width constraints that prevent reflow */
  [style*="min-width"],
  [style*="minWidth"] {
    min-width: 0 !important;
  }

  /* Specific fixes for common problematic patterns */
  [style*="min-width: 800"],
  [style*="minWidth: 800"] {
    min-width: 0 !important;
    width: 100% !important;
  }

  [style*="min-width: 300"],
  [style*="minWidth: 300"] {
    min-width: 0 !important;
    width: 100% !important;
  }
}

/* Ensure buttons and interactive elements remain accessible */
@media (max-width: 480px) {
  button,
  a,
  input,
  select,
  textarea {
    min-height: 44px !important; /* WCAG touch target size */
    min-width: 44px !important;
    font-size: 16px !important; /* Prevent zoom on iOS */
  }

  /* Ensure form inputs are readable */
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  textarea {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* Fix for React Native Web components that might have fixed dimensions */
@media (max-width: 480px) {
  /* Target common React Native Web patterns */
  [class*="View"],
  [class*="Container"] {
    max-width: 100% !important;
    overflow-x: hidden !important;
  }
}

/* Ensure navigation elements reflow */
@media (max-width: 480px) {
  nav,
  [class*="nav"],
  [class*="Nav"],
  [class*="menu"],
  [class*="Menu"] {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Make navigation items stack vertically if needed */
  [class*="nav"] ul,
  [class*="menu"] ul {
    flex-direction: column !important;
  }
}

/* Prevent horizontal scroll on specific problematic elements */
@media (max-width: 480px) {
  /* Fix for booking widgets and search components */
  [class*="BookingWidget"],
  [class*="Search"],
  [class*="StaySearch"] {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  /* Fix for content sections */
  [class*="Section"],
  [class*="Content"] {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    box-sizing: border-box !important;
  }
}

/* Additional utility classes for components that need explicit reflow support */
.zoom-reflow-container {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  box-sizing: border-box;
}

.zoom-reflow-content {
  width: 100%;
  max-width: 100%;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* Print styles also help with zoom (similar constraints) */
@media print {
  * {
    max-width: 100% !important;
    overflow-x: visible !important;
  }
}