/* ============================================================================
   Responsive & UI/UX Audit Fixes — iqamaty.com (ROOT website)
   Loaded LAST in every master so it wins the cascade.
   Additive & fully reversible: delete the <link> to revert.
   2026-06-09 — covers all root *.aspx pages.
   ============================================================================ */

/* 1) Universal border-box + page-level horizontal-overflow guard ----------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { max-width: 100%; overflow-x: hidden; }

/* 2) Fluid media — images / video / iframes / canvas never overflow -------- */
img, svg, video, canvas, iframe, object, embed { max-width: 100%; }
img, video { height: auto; }
img[width], img[height] { height: auto; }          /* neutralise fixed dim attrs */

/* 3) Cap dropdowns / popovers / modals to the viewport width --------------- */
.dropdown-menu,
.disclaimer, .disclaimer1, .disclaimer2, .disclaimer3, .disclaimer4,
.header-widget-wrap .dropdown-menu {
  max-width: calc(100vw - 24px) !important;
}
.modal-dialog, .modal-content, .modal-xlg { max-width: calc(100vw - 20px) !important; }

/* 4) Tables: safety net + scrollable responsive wrapper -------------------- */
table { max-width: 100%; }
.table-responsive { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* Confirmed data tables (GridViews / price table) scroll instead of clipping
   under the body overflow-x guard. Scoped to data-table classes only so the
   theme's layout tables are untouched. */
@media (max-width: 767.98px){
  .grid-view, .footable, table.price_table, table.table.price_table {
    display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch;
  }
}

/* 5) Responsive 16:9 helper for embedded video iframes --------------------- */
.video-responsive { position: relative; width: 100%; padding-bottom: 56.25%; height: 0; overflow: hidden; }
.video-responsive iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

/* 6) Dashboard: kill the mobile min-width:480px horizontal-scroll trap ----- */
@media (max-width: 767.98px){
  #content.active .content-admin-main { min-width: 0 !important; }
  .header-widget-wrap .dropdown-menu { max-width: 92vw !important; right: 0; }
}

/* 7) Mobile tuning for the inline-width offenders found in the audit -------- */
@media (max-width: 767.98px){
  /* "guests" / category-filter absolute dropdowns set inline width:400/500px */
  .dropdown-menu.p-3, .search-dropdown { width: 100% !important; max-width: 100% !important; left: 0 !important; right: 0 !important; }
  #autocomplete { width: 100% !important; max-width: 100%; }
  /* form controls always full width on phones */
  .form-control, input.form-control, select.form-control, textarea.form-control { max-width: 100%; }
  /* flex rows that crowd: allow wrapping instead of clipping */
  .top-bar .d-flex, .footer .d-flex, .wt-footer-bottom-section .d-flex,
  .footer-bottom .d-flex { flex-wrap: wrap; }
}

/* 8) Two stacked fixed helper buttons shouldn't overlap on small screens --- */
@media (max-width: 575.98px){
  .scroltop { bottom: 72px; }
}