/* ============================================================ AUTOMART V42.6.2 GLOBAL MOBILE FLOATING SEARCH PARITY Approved structure on every public mobile page: Search Make | Model Year | More Filters Search button Location lives inside More Filters. ============================================================ */ @media screen and (max-width:767px) { /* ======================================================== FLOATING PANEL SIZE ======================================================== */ html.am-v426-global-search body:not(.admin-page) .am-global-search-v18.am-v42-open { left:12px !important; right:12px !important; width:auto !important; top:74px !important; margin:0 !important; max-width:none !important; z-index:2400 !important; } html.am-v426-global-search body:not(.admin-page) .am-global-search-v18.am-v42-open .am-global-search-shell-v18 { width:100% !important; max-width:none !important; padding:12px !important; border-radius:22px !important; box-sizing:border-box !important; } /* ======================================================== FORM = APPROVED 2 COLUMN GRID ======================================================== */ html.am-v426-global-search body:not(.admin-page) .am-global-search-v18.am-v42-open .am-global-search-form-v18 { display:grid !important; grid-template-columns: minmax(0,1fr) minmax(0,1fr) !important; grid-template-rows: auto 48px 48px 50px !important; gap:9px !important; width:100% !important; height:auto !important; min-height:0 !important; max-height:none !important; align-items:stretch !important; overflow:visible !important; } /* ======================================================== SEARCH INPUT ======================================================== */ html.am-v426-global-search .am-global-search-v18.am-v42-open .am-global-search-main-v18 { grid-column:1 / -1 !important; grid-row:1 !important; width:100% !important; height:54px !important; min-height:54px !important; max-height:54px !important; margin:0 !important; } /* ======================================================== IMPORTANT: Do not depend on JS-generated .am-v424-* classes. The V18 source order is: 1 Make 2 Model 3 Year 4 Location ======================================================== */ html.am-v426-global-search .am-global-search-v18.am-v42-open .am-global-search-form-v18 > .am-global-filter-v18:nth-of-type(1) { grid-column:1 !important; grid-row:2 !important; } html.am-v426-global-search .am-global-search-v18.am-v42-open .am-global-search-form-v18 > .am-global-filter-v18:nth-of-type(2) { grid-column:2 !important; grid-row:2 !important; } html.am-v426-global-search .am-global-search-v18.am-v42-open .am-global-search-form-v18 > .am-global-filter-v18:nth-of-type(3) { grid-column:1 !important; grid-row:3 !important; } /* * Location is NOT shown in the compact search. * It remains available through More Filters. */ html.am-v426-global-search .am-global-search-v18.am-v42-open .am-global-search-form-v18 > .am-global-filter-v18:nth-of-type(4) { display:none !important; grid-column:auto !important; grid-row:auto !important; } /* Also support semantic classes when present */ html.am-v426-global-search .am-global-search-v18.am-v42-open .am-v424-make { grid-column:1 !important; grid-row:2 !important; } html.am-v426-global-search .am-global-search-v18.am-v42-open .am-v424-model { grid-column:2 !important; grid-row:2 !important; } html.am-v426-global-search .am-global-search-v18.am-v42-open .am-v424-year { grid-column:1 !important; grid-row:3 !important; } html.am-v426-global-search .am-global-search-v18 .am-v424-location, html.am-v426-global-search .am-global-search-v18 .am-v42-location-filter { display:none !important; } /* ======================================================== MAKE / MODEL / YEAR CARD PARITY ======================================================== */ html.am-v426-global-search .am-global-search-v18.am-v42-open .am-global-filter-v18:not(.am-v424-location) { width:100% !important; height:48px !important; min-height:48px !important; max-height:48px !important; display:grid !important; grid-template-columns: 18px minmax(0,1fr) !important; align-items:center !important; gap:7px !important; margin:0 !important; padding:0 10px !important; border: 1px solid #dfe7e3 !important; border-radius:14px !important; background:#fff !important; box-sizing:border-box !important; overflow:hidden !important; visibility:visible !important; opacity:1 !important; pointer-events:auto !important; } html.am-v426-global-search .am-global-search-v18.am-v42-open .am-global-filter-v18 label { width:100% !important; min-width:0 !important; height:46px !important; display:block !important; margin:0 !important; padding:0 !important; } html.am-v426-global-search .am-global-search-v18.am-v42-open .am-global-filter-v18 select { display:block !important; width:100% !important; height:46px !important; min-width:0 !important; margin:0 !important; padding: 0 21px 0 0 !important; border:0 !important; outline:0 !important; background:transparent !important; color:#172334 !important; font-size:13px !important; line-height:46px !important; font-weight:750 !important; visibility:visible !important; opacity:1 !important; appearance:auto !important; pointer-events:auto !important; } html.am-v426-global-search .am-global-search-v18.am-v42-open .am-global-filter-icon-v18 { position:static !important; display:grid !important; place-items:center !important; width:17px !important; height:17px !important; min-width:17px !important; min-height:17px !important; max-width:17px !important; max-height:17px !important; margin:0 !important; visibility:visible !important; opacity:1 !important; } html.am-v426-global-search .am-global-search-v18.am-v42-open .am-global-filter-icon-v18 svg { width:16px !important; height:16px !important; max-width:16px !important; max-height:16px !important; } /* ======================================================== MORE FILTERS = SAME SIZE AS YEAR ======================================================== */ html.am-v426-global-search .am-global-search-v18.am-v42-open .am-global-more-v18 { grid-column:2 !important; grid-row:3 !important; display:flex !important; align-items:center !important; justify-content:center !important; gap:7px !important; width:100% !important; height:48px !important; min-height:48px !important; max-height:48px !important; margin:0 !important; padding:0 8px !important; border: 1px solid #dfe7e3 !important; border-radius:14px !important; background:#fff !important; color:#172334 !important; font-size:12px !important; font-weight:750 !important; box-sizing:border-box !important; visibility:visible !important; opacity:1 !important; pointer-events:auto !important; text-decoration:none !important; white-space:nowrap !important; } /* ======================================================== SEARCH BUTTON ======================================================== */ html.am-v426-global-search .am-global-search-v18.am-v42-open .am-global-submit-v18 { grid-column:1 / -1 !important; grid-row:4 !important; display:flex !important; align-items:center !important; justify-content:center !important; gap:9px !important; width:100% !important; height:50px !important; min-height:50px !important; max-height:50px !important; margin:0 !important; border-radius:13px !important; visibility:visible !important; opacity:1 !important; pointer-events:auto !important; } /* ======================================================== OLD INTERNAL MOBILE FILTER BUTTON ======================================================== */ html.am-v426-global-search .am-global-search-v18 .am-global-mobile-toggle-v18 { display:none !important; } /* ======================================================== ACTIVE CHIPS If V42.5 creates chips they span the full width. ======================================================== */ html.am-v426-global-search .am-global-search-v18.am-v42-open .am-v425-active-chips { grid-column:1 / -1 !important; width:100% !important; } /* * When chips exist, allow natural row flow rather than * forcing the original four fixed rows. */ html.am-v426-global-search .am-global-search-v18.am-v42-open .am-global-search-form-v18:has( .am-v425-active-chips:not(:empty) ) { grid-template-rows: auto auto 48px 48px 50px !important; } /* ======================================================== NARROW PHONE SAFETY ======================================================== */ @media (max-width:360px) { html.am-v426-global-search .am-global-search-v18.am-v42-open .am-global-search-shell-v18 { padding:10px !important; } html.am-v426-global-search .am-global-search-v18.am-v42-open .am-global-search-form-v18 { gap:7px !important; } } }