/* ═══════════════════════════════════════════════════════ hp-tablet-patch.css (public/ — used by search.html) Responsive layout for filters modal on tablet & mobile. Load AFTER search.css in . HTML structure (child order inside .modal-content): child 1 → .modal-drag-handle child 2 → #filters-modal-header (All filters + buttons) child 3 → #filters-modal-body (scrollable filters) ═══════════════════════════════════════════════════════ */ /* ── Shared bottom-sheet base for tablet + mobile ── */ @media (max-width: 1200px) { /* Backdrop */ #filters-modal { align-items: flex-end !important; padding: 0 !important; } /* Sheet panel */ #filters-modal .modal-content { width: 100% !important; max-width: 100% !important; margin: 0 !important; display: flex !important; flex-direction: column !important; justify-content: flex-start !important; box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.15) !important; } /* Drag handle pill */ #filters-modal .modal-content > .modal-drag-handle { flex-shrink: 0 !important; width: 36px !important; height: 4px !important; background: #D1D1D6 !important; border-radius: 2px !important; margin: 12px auto 6px !important; padding: 0 !important; position: static !important; order: 0 !important; } /* Header — fixed height, never grows */ #filters-modal-header { flex: 0 0 auto !important; flex-shrink: 0 !important; overflow: visible !important; margin: 0 !important; padding: 8px 20px 12px !important; order: 1 !important; } /* Scrollable body */ #filters-modal-body { flex: 1 !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch !important; margin: 0 !important; padding: 12px 16px 32px !important; min-height: 0 !important; order: 2 !important; } /* Make range buttons fluid */ #filters-container .flex.gap-2.relative { width: 100%; flex-wrap: nowrap; } #filters-container .flex.gap-2.relative > * { flex: 1 !important; min-width: 0 !important; width: auto !important; } #filters-container button.rounded-2xl { width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; } #filters-container .flex.flex-col.mt-4 { min-width: 0 !important; } /* Dropdown menus inside modal */ .dropdown-menu { max-width: 90vw !important; max-height: 40vh !important; overflow-y: auto; } } /* ── 1. Tablet (736-1200px) ── */ @media (max-width: 1200px) and (min-width: 736px) { #filters-modal .modal-content { height: 88vh !important; max-height: 88vh !important; border-radius: 24px 24px 0 0 !important; transform: translateY(100%) !important; transition: transform 0.35s cubic-bezier(0.32, 0.72, 0.24, 1) !important; } #filters-modal.open .modal-content { transform: translateY(0) !important; } /* Single-row header — title left, action buttons + close X right (matches desktop) */ #filters-modal > .modal-content > #filters-modal-header { flex-direction: row !important; align-items: center !important; justify-content: space-between !important; padding: 16px 24px !important; gap: 16px !important; } #filters-modal-header .fmh-title-row { flex: 1 !important; } #filters-modal-header .fmh-mobile-close { display: none !important; } #filters-modal-header .fmh-action-row { width: auto !important; gap: 12px !important; flex-wrap: nowrap !important; justify-content: flex-end !important; } #filters-modal-header .fmh-desktop-close { display: flex !important; } #filters-modal-header #searchFromModalBtn, #filters-modal-header #resetFiltersBtn { flex: 0 0 auto !important; } /* 3-column filter grid on tablet — matches desktop layout */ #filters-container .grid-cols-4 { grid-template-columns: repeat(3, 1fr) !important; } #filters-container { gap: 0 !important; } #filters-container > div { gap: 16px !important; padding: 4px 2px !important; } } /* ── 2. Mobile (≤735px) ── */ @media (max-width: 735px) { #filters-modal .modal-content { height: 92vh !important; border-radius: 20px 20px 0 0 !important; transform: translateY(100%) !important; transition: transform 0.35s cubic-bezier(0.32, 0.72, 0.24, 1) !important; } #filters-modal.open .modal-content { transform: translateY(0) !important; } /* Compact button padding on mobile */ #searchFromModalBtn, #resetFiltersBtn { padding: 8px 12px !important; } /* Tighten header gap and allow wrapping on narrow screens */ #filters-modal-header > div { gap: 8px !important; flex-wrap: wrap; justify-content: flex-end; } /* Reset button: arrow-rotate-left icon on left, "Reset" centered, hide " filters" suffix */ #resetFiltersBtn { justify-content: center !important; } #resetFiltersBtn .reset-mobile-icon { display: inline-block !important; font-size: 13px !important; color: #6B7280 !important; } #resetFiltersBtn .reset-filters-suffix { display: none !important; } /* single-column layout handled by injected CSS */ } /* ── Scroll lock ── */ body.modal-open { overflow: hidden !important; }