/* ========================================================================== Mobile bottom sheets (added 2026-11-03) On a phone every search drop-down, calendar and picker opens as a sheet docked to the bottom of the screen. Ported from babumrah's file of the same name (2026-11-03), with three differences, because triponly is not the same app: - triponly has no car route picker / car date & time sheet (.car-route-picker, .cdtp) and no .car-rent-select menu, so those selectors are not carried over; - the floating calendars are matched as `body > .daterangepicker` instead of `.daterangepicker`, so the hotel search's price calendar (#daterangepicker1-container-hotel, drawn INSIDE its panel with parentEl) keeps the responsive rules it already has in home.blade.php and needs no reset here; - the month-and-year picker (.pkc-panel) is the tours one (tour-search-options.css), not the Umrah packages one. Loaded LAST in master.blade.php, after @yield('css'), so it wins over the per-page stylesheets (custom.css, tour-search-options.css, the per-page @section('css') blocks) at equal specificity. Everything is inside one phone media query, so wider screens are untouched. ========================================================================== */ @media screen and (max-width: 767px) { /* ------------------------------------------------------------------ 0. Let position:fixed reach the viewport again. The hero's .t-container carries `transform: translate(0%, 0%)` below 991px (custom.css), and ANY transform — even an identity one — makes that element the containing block for fixed children, so a sheet inside the hero would dock to the bottom of the hero instead of the bottom of the screen. The identity transform has no visual effect, so dropping it changes nothing else. `z-index: auto` is the second half of the same problem: .t-container is a FLEX ITEM (its section is display:flex), and z-index applies to flex items even when they are static — so its `z-index: 100` opens a stacking context that caps every sheet inside the hero below the floating promo buttons (z-index 999). The home page raises the whole banner to z-index 101 while the date box is open, for the same stacking reason, which caps the sheets the same way. ------------------------------------------------------------------ */ .packageBanner .t-container, .add_nam_h .t-container, .add_nam_1 .t-container { transform: none; z-index: auto; } section.packageBanner:has(.hotel-boxdate:not([style*="none"])) { z-index: auto; } /* ------------------------------------------------------------------ 1. The shared sheet ------------------------------------------------------------------ */ .uit-container.uitk-menu-container, /* hotel / flight / shuttle / tour autocompletes + their date panels */ .person-boxdate .inputBox, /* guests & rooms stepper */ .pkc-panel, /* month-and-year picker (tour search) */ .sidebarContainerSe, /* sidebar search autocomplete (hotels + tours listing, hotel detail) */ .route_maker_box, /* "make your own route" builder (car / transport search) */ body > .daterangepicker { /* every floating calendar (listing, detail, booking pages) */ position: fixed !important; top: auto !important; right: 0 !important; bottom: 0 !important; left: 0 !important; width: auto !important; min-width: 0 !important; max-width: none !important; margin: 0 !important; max-height: 86vh; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; border: 0 !important; border-radius: 16px 16px 0 0 !important; padding-bottom: calc(14px + env(safe-area-inset-bottom)) !important; z-index: 10060 !important; /* the second shadow is the dimmed page behind the sheet; it costs no extra element and lets clicks through, so the existing "click outside closes it" handlers keep working */ box-shadow: 0 -6px 22px rgba(0, 0, 0, .18), 0 0 0 100vmax rgba(0, 0, 0, .45) !important; animation: to-sheet-up .18s ease-out; } @keyframes to-sheet-up { from { transform: translateY(26px); opacity: 0; } to { transform: none; opacity: 1; } } /* a grab handle, so it reads as a sheet */ .uit-container.uitk-menu-container::before, .person-boxdate .inputBox::before, .pkc-panel::before, .sidebarContainerSe::before, .route_maker_box::before, body > .daterangepicker::before, .searchD .bootstrap-select > .dropdown-menu::before, .packageDrop .bootstrap-select > .dropdown-menu::before, .packageDrop > .dropdown-menu::before, .passenger_view + .dropdown-menu::before, .languageD .dropdown-menu:not(.inner)::before, .nav-home ~ .tab-content .dropdown-menu.show:not(.inner)::before { content: ""; /* daterangepicker already uses ::before for its callout arrow, which is absolutely positioned — reset that or the handle lands in the corner. Sticky keeps it in sight in a sheet that opens already scrolled, the way a bootstrap-select list scrolls to the selected option. */ position: sticky; top: 0; z-index: 1; display: block; width: 38px; height: 4px; margin: 2px auto 10px; border: 0; border-radius: 2px; background: #dcdcdc; } /* ------------------------------------------------------------------ 2. Calendars ------------------------------------------------------------------ */ /* floating daterangepicker: no callout arrow once it is docked */ body > .daterangepicker::after { display: none !important; } body > .daterangepicker .drp-buttons { position: sticky; bottom: 0; background: #fff; } /* two months side by side do not fit on a phone — stack them, the sheet scrolls. (The hotel search's own calendar already does this itself.) */ body > .daterangepicker .drp-calendar, body > .daterangepicker .drp-calendar.left, body > .daterangepicker .drp-calendar.right { float: none !important; clear: both; width: 100% !important; max-width: none !important; border-right: 0 !important; border-left: 0 !important; padding: 2px 4px !important; } body > .daterangepicker .calendar-table td, body > .daterangepicker .calendar-table th { min-width: 0; height: 38px; } /* ------------------------------------------------------------------ 3. Panel innards that assumed a narrow floating box ------------------------------------------------------------------ */ .uit-container.uitk-menu-container .uit-searchBox { max-height: none; } .person-boxdate .inputBox { padding-left: 14px; padding-right: 14px; } /* ------------------------------------------------------------------ 4. Search drop-downs (tour duration / group / package type, flight passengers, currency): the menu is placed by Popper with an inline transform, so these need the override to be !important too. ------------------------------------------------------------------ */ .searchD .bootstrap-select > .dropdown-menu, .packageDrop .bootstrap-select > .dropdown-menu, .packageDrop > .dropdown-menu, .passenger_view + .dropdown-menu, .languageD .dropdown-menu:not(.inner), .nav-home ~ .tab-content .dropdown-menu.show:not(.inner) { position: fixed !important; top: auto !important; right: 0 !important; bottom: 0 !important; left: 0 !important; transform: none !important; width: auto !important; max-width: none !important; max-height: 70vh; overflow-y: auto; margin: 0 !important; border: 0 !important; border-radius: 16px 16px 0 0 !important; padding-bottom: calc(10px + env(safe-area-inset-bottom)) !important; z-index: 10060 !important; box-shadow: 0 -6px 22px rgba(0, 0, 0, .18), 0 0 0 100vmax rgba(0, 0, 0, .45) !important; animation: to-sheet-up .18s ease-out; } .searchD .bootstrap-select > .dropdown-menu .dropdown-item, .packageDrop .bootstrap-select > .dropdown-menu .dropdown-item { padding: 11px 16px; } /* the currency switcher sits under the navbar in the header stack (.languageD is position:absolute and the .navbar that follows it is position:relative, both with z-index auto), so on a phone its visible "USD 🇺🇸" label could not be tapped at all — the navbar swallowed the tap. Confirmed with elementFromPoint: the