/* ===================================================================== Sayara — /rent page redesign v3 (clean white marketplace, dense grid) Visual-only, scoped under `body.sy-enabled`. Preserves ALL functional hooks. Tokens: sayara-tokens.css. Loaded directly (not purged). v3 = LIGHT, RESTRAINED palette (white canvas, indigo accents only, ONE amber element = discount) + DENSE 4-up compact cards. Default is a clean FULL-WIDTH grid; the map only takes a column if it actually renders (.sy-map-ok added by JS), so a broken Google key never shows a pane. ===================================================================== */ /* ============================================================ 0. SHELL */ /* overflow-x must be `clip`, NOT `hidden`: hidden turns the element into a scroll container (overflow-y computes to auto), which silently disables every position:sticky inside — the results toolbar and the map pane. Theme baggage on : style.css sets overflow-x:hidden, and custom.css has a webkit-only block (`-webkit-min-device-pixel-ratio: 0` = ALL Chrome/Safari) forcing `overflow-x:hidden !important; overflow-y:auto` — overflow-y must be visible or the x-axis `clip` computes back to hidden. This file is /rent-only, so the override is page-scoped. Bootstrap's modal scroll-lock (inline overflow-y on body) still wins over the plain `visible`. */ body.sy-enabled { overflow-x: clip !important; overflow-y: visible; } body.sy-enabled .boxcar-wrapper { background: var(--sy-page); overflow-x: clip; } body.sy-enabled .overlay-bg { position: fixed; inset: 0; background: rgba(11,16,32,.5); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); opacity: 0; visibility: hidden; transition: opacity var(--sy-t-base) var(--sy-ease), visibility var(--sy-t-base); z-index: 640; } body.sy-enabled .overlay-bg.active { opacity: 1; visibility: visible; } /* ============================================ 1. LIGHT HERO STRIP */ /* kill the theme's 65px top margin so the hero sits right under the shared header (matches home — no gray gap between header and content) */ body.sy-enabled .cars-section-thirteen, body.sy-enabled .cars-section-thirteen.cars-section-margin { background: transparent; margin-top: 0 !important; } body.sy-enabled .cars-section-thirteen .boxcar-title-three { position: relative; border: 0 !important; border-bottom: 1px solid var(--sy-border) !important; border-radius: 0 !important; box-shadow: none !important; text-align: left !important; /* effective but light background: aurora-tinted wash + soft glows (no heavy gradient) */ background: radial-gradient(680px 240px at 88% -30%, rgba(6,182,212,.12), transparent 62%), radial-gradient(560px 220px at 4% 130%, rgba(79,70,229,.10), transparent 62%), radial-gradient(420px 180px at 55% -40%, rgba(245,158,11,.05), transparent 60%), linear-gradient(115deg, #eef0fe 0%, #ffffff 46%, #e9fbfe 100%) !important; /* align the banner content with the 1730px centered results container */ padding: 28px max(16px, calc((100% - 1730px) / 2)) 22px !important; margin: 0 0 18px !important; } body.sy-enabled .cars-section-thirteen .boxcar-title-three > * { text-align: left; } body.sy-enabled .cars-section-thirteen .breadcrumb { justify-content: flex-start !important; } body.sy-enabled .cars-section-thirteen .boxcar-title-three::before, body.sy-enabled .cars-section-thirteen .boxcar-title-three::after { display: none !important; } body.sy-enabled .cars-section-thirteen .breadcrumb { margin: 0 0 4px; padding: 0; } body.sy-enabled .cars-section-thirteen .breadcrumb, body.sy-enabled .cars-section-thirteen .breadcrumb a, body.sy-enabled .cars-section-thirteen .breadcrumb span, body.sy-enabled .cars-section-thirteen .breadcrumb li { color: var(--sy-muted) !important; font-family: var(--sy-font-text); font-size: .78rem; font-weight: 500; } body.sy-enabled .cars-section-thirteen .breadcrumb a:hover { color: var(--sy-primary-600) !important; } body.sy-enabled .cars-section-thirteen .breadcrumb li span { color: var(--sy-ink) !important; font-weight: 600; } body.sy-enabled .cars-section-thirteen .boxcar-title-three h1.header, body.sy-enabled .cars-section-thirteen .boxcar-title-three .header { font-family: var(--sy-font-display); font-weight: 700; font-size: clamp(1.05rem, 2vw, 1.45rem); line-height: 1.2; letter-spacing: -.018em; color: var(--sy-ink) !important; margin: 4px 0 0; max-width: 46ch; } /* filter pills — clean outlined chips on white */ body.sy-enabled ul.service-list { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 12px 0 0; padding: 12px 0 14px; list-style: none; } body.sy-enabled ul.service-list > li { position: relative; flex: 0 0 auto; } body.sy-enabled ul.service-list > li > a, body.sy-enabled ul.service-list > li > .location-link, body.sy-enabled ul.service-list > li > span { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; cursor: pointer; background: var(--sy-surface); border: 1.5px solid var(--sy-border); border-radius: var(--sy-r-pill); font-family: var(--sy-font-text); font-size: .8rem; font-weight: 600; color: var(--sy-text); white-space: nowrap; transition: border-color var(--sy-t-fast), background var(--sy-t-fast), color var(--sy-t-fast); } body.sy-enabled ul.service-list > li > a:hover, body.sy-enabled ul.service-list > li.open > a, body.sy-enabled ul.service-list > li > .location-link:hover { background: var(--sy-primary-50); border-color: var(--sy-primary-400); color: var(--sy-primary-600); } body.sy-enabled ul.service-list i { font-size: .68rem; color: var(--sy-muted); } body.sy-enabled .srchdropdown, body.sy-enabled ul.service-list .dropdown-menu { background: var(--sy-surface); border: 1px solid var(--sy-border); border-radius: var(--sy-r-lg); box-shadow: var(--sy-e3); padding: 12px; min-width: 230px; z-index: 500; color: var(--sy-text); animation: sy-drop-in var(--sy-t-base) var(--sy-ease) both; } @keyframes sy-drop-in { from { opacity: 0; transform: translateY(-6px) scale(.98);} to { opacity: 1; transform: none;} } body.sy-enabled #find_car_near_me { display: inline-flex; align-items: center; gap: 8px; width: 100%; height: 36px; padding: 0 16px; border: 0; border-radius: var(--sy-r-pill); background: var(--sy-primary-600); color: #fff; font-weight: 600; font-size: .82rem; cursor: pointer; } body.sy-enabled #find_car_near_me:hover { background: var(--sy-primary-700); } /* ============================================ 2. CLEAN TOOLBAR SHELF */ /* results toolbar scrolls with the page (NOT pinned) — per request "Showing results row no need fixed position". Static + .is-stuck neutralized so the stickyshelf JS can't flash a white slab while the row scrolls away. */ body.sy-enabled .search-car-main .text-box.list-page-mob { position: static; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; background: transparent; border: 0; border-radius: 0; box-shadow: none; min-height: 52px; padding: 8px clamp(8px, 2vw, 16px); margin: 0 0 24px; } body.sy-enabled .search-car-main .text-box.list-page-mob.is-stuck { background: transparent; box-shadow: none; } body.sy-enabled .text-box.list-page-mob #topcount, body.sy-enabled .text-box.list-page-mob .showing-mob-vw { font-family: var(--sy-font-text); font-weight: 600; font-size: .88rem; color: var(--sy-muted); } body.sy-enabled .text-box.list-page-mob #topcount b, body.sy-enabled .text-box.list-page-mob #topcount strong { color: var(--sy-ink); font-weight: 700; } body.sy-enabled .text-box .list-grid-sec, body.sy-enabled .text-box .sort-grid-sec { display: flex; align-items: center; gap: 8px; } /* FILTER BY button — uniform with the other toolbar controls (no tint-on-white "double box" look) */ body.sy-enabled #show-filt-btn, body.sy-enabled .open-inventory, body.sy-enabled .sidebar-handle-mob { display: inline-flex !important; align-items: center; gap: 7px; height: 36px; padding: 0 16px; cursor: pointer; position: relative; background: var(--sy-surface); color: var(--sy-primary-700); border: 1px solid var(--sy-border); border-radius: var(--sy-r-sm); font-size: .8rem; font-weight: 700; white-space: nowrap; transition: background var(--sy-t-fast), color var(--sy-t-fast), border-color var(--sy-t-fast); } body.sy-enabled #show-filt-btn:hover { border-color: var(--sy-primary-300); } body.sy-enabled #show-filt-btn:hover, body.sy-enabled .open-inventory:hover { background: var(--sy-primary-600); color: #fff; border-color: var(--sy-primary-600); } body.sy-enabled #show-filt-btn svg path { fill: var(--sy-primary-600); } body.sy-enabled #show-filt-btn:hover svg path { fill: #fff; } /* the FILTER BY had its own dark color (#333) so it stayed dark-on-indigo on hover — indigo at rest, explicit white on hover (explicit beats any inherit flakiness) */ body.sy-enabled #show-filt-btn .filter-btn-strg, body.sy-enabled #show-filt-btn strong { color: var(--sy-primary-700) !important; } body.sy-enabled #show-filt-btn:hover .filter-btn-strg, body.sy-enabled #show-filt-btn:hover strong { color: #fff !important; } body.sy-enabled #show-filt-btn:hover svg path, body.sy-enabled #show-filt-btn:hover svg { fill: #fff; } body.sy-enabled #show-filt-btn .sy-fbadge { position: absolute; top: -7px; right: -7px; min-width: 18px; height: 18px; padding: 0 4px; background: var(--sy-accent-500); color: var(--sy-on-accent); font-size: .6rem; font-weight: 800; border-radius: 999px; display: grid; place-items: center; } /* grid/list toggle — theme floats the icons with margin-right:20px so they overflow the 36px buttons; pin the cluster to one clean 36px row */ body.sy-enabled .text-box .form_boxes, body.sy-enabled .text-box .form_boxes.v3 { display: flex !important; align-items: center !important; gap: 8px; height: 36px !important; width: auto !important; } body.sy-enabled #grid-view-button, body.sy-enabled #list-view-button { width: 36px; height: 36px; flex: 0 0 36px; display: grid; place-items: center; cursor: pointer; overflow: hidden; background: var(--sy-surface); border: 1px solid var(--sy-border); border-radius: var(--sy-r-sm); transition: background var(--sy-t-fast), border-color var(--sy-t-fast); } body.sy-enabled #grid-view-button img, body.sy-enabled #list-view-button img, body.sy-enabled #grid-view-button svg, body.sy-enabled #list-view-button svg { margin: 0 !important; padding: 0 !important; width: 18px !important; height: 18px !important; position: static !important; } body.sy-enabled #grid-view-button:hover, body.sy-enabled #list-view-button:hover { border-color: var(--sy-primary-300); background: var(--sy-primary-50); } body.sy-enabled #grid-view-button.active, body.sy-enabled #list-view-button.active { background: var(--sy-primary-50); border-color: var(--sy-primary-300); } body.sy-enabled #grid-view-button.active img, body.sy-enabled #list-view-button.active img { filter: none; } /* sort — the theme wrapper grows 76px tall (stray chevron drops BELOW the button and breaks the whole toolbar row); pin everything to one clean 36px control */ body.sy-enabled .text-box .form_boxes, body.sy-enabled .text-box form { margin: 0 !important; padding: 0 !important; } body.sy-enabled .text-box .drop-menu { position: relative; display: flex; align-items: center; height: 36px !important; margin: 0 !important; } /* pill box ONLY on .feature-btn — .select is a bare wrapper (box on both = double bg) */ body.sy-enabled .feature-btn { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; background: var(--sy-surface); border: 1px solid var(--sy-border); border-radius: var(--sy-r-sm); font-size: .8rem; font-weight: 600; color: var(--sy-text); cursor: pointer; transition: border-color var(--sy-t-fast), color var(--sy-t-fast); white-space: nowrap; } body.sy-enabled .drop-menu .select { display: inline-flex; align-items: center; height: 36px; padding: 0 !important; margin: 0; background: transparent; border: 0; box-shadow: none; } body.sy-enabled .feature-btn:hover, body.sy-enabled .feature-btn:focus-visible { border-color: var(--sy-primary-300); color: var(--sy-primary-600); } /* open state (theme adds .active to .drop-menu) — highlight button + flip chevron */ body.sy-enabled .drop-menu.active .feature-btn { border-color: var(--sy-primary-400); color: var(--sy-primary-600); background: var(--sy-primary-50); } /* the chevron lives INSIDE .feature-btn — keep it inline after the label, animate flip */ body.sy-enabled .text-box .feature-btn i.fa-angle-down, body.sy-enabled .text-box .feature-btn .fa-angle-down, body.sy-enabled .text-box .drop-menu i.fa-angle-down { position: static !important; top: auto !important; right: auto !important; transform: none !important; margin: 0 0 0 2px !important; pointer-events: none; color: var(--sy-muted); font-size: .7rem; line-height: 1; transition: transform var(--sy-t-base) var(--sy-ease), color var(--sy-t-fast); } body.sy-enabled .drop-menu.active .feature-btn i.fa-angle-down { transform: rotate(180deg) !important; color: var(--sy-primary-500); } body.sy-enabled .text-box .drop-menu ul.dropdown { top: calc(100% + 6px); } /* width:auto !important beats the theme's fixed width:235px so nowrap rows set the width */ body.sy-enabled .text-box .drop-menu .dropdown.feature-section, body.sy-enabled ul.feature-section { width: auto !important; min-width: 216px; background: var(--sy-surface); border: 1px solid var(--sy-border); border-radius: var(--sy-r-lg); box-shadow: var(--sy-e3); padding: 6px; text-align: left; } /* theme shrink-wraps + center-margins each link (min-content → multi-word options wrap); force each li to a full-width single-line row */ body.sy-enabled .text-box .drop-menu .feature-section li, body.sy-enabled .feature-section li { display: block; width: 100%; padding: 0 !important; margin: 0; border: 0 !important; } body.sy-enabled .text-box .drop-menu .feature-section li a.sort-option, body.sy-enabled .feature-section li a.sort-option, body.sy-enabled .feature-section li .sort-option { display: block; width: auto; margin: 0 !important; padding: 8px 12px; border-radius: 8px; font-size: .84rem; line-height: 1.35; color: var(--sy-text); text-align: left; white-space: nowrap; cursor: pointer; transition: background var(--sy-t-fast), color var(--sy-t-fast); } body.sy-enabled .feature-section li a.sort-option:hover, body.sy-enabled .text-box .drop-menu .feature-section li:hover a.sort-option, body.sy-enabled .feature-section li.li-custom-focus a.sort-option { background: var(--sy-primary-50); color: var(--sy-primary-700) !important; } body.sy-enabled .text-box .map-tab-btn.cr_map_vwmapmob { display: none; } /* active-filter chips */ body.sy-enabled .filter-btn-section { padding: 10px clamp(8px,2vw,16px) 4px; } body.sy-enabled ul.filter-section { display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 0; list-style: none; } body.sy-enabled ul.filter-section:empty { display: none; } body.sy-enabled .filter-section .filter-item { animation: sy-chip-in var(--sy-t-base) var(--sy-ease-spring) both; } @keyframes sy-chip-in { from { opacity: 0; transform: scale(.82);} to { opacity: 1; transform: none;} } body.sy-enabled .filter-section .filter-item a { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; background: var(--sy-surface-2); border: 1px solid var(--sy-border); border-radius: var(--sy-r-pill); font-size: .73rem; font-weight: 600; color: var(--sy-text); white-space: nowrap; text-decoration: none; transition: all var(--sy-t-fast); } body.sy-enabled .filter-section .filter-item a:hover { background: var(--sy-primary-50); border-color: var(--sy-primary-200); color: var(--sy-primary-700); } body.sy-enabled .filter-section .filter-item a .fa-xmark, body.sy-enabled .filter-section .filter-item a .fa-times, body.sy-enabled .filter-section .filter-item a i { font-size: .58rem; opacity: .5; } body.sy-enabled .filter-section .filter-item[data-filter="resetall"] a, body.sy-enabled .filter-section .filter-item:last-child a.remove-filter-all-ajax { background: #fef2f2; border-color: #fecaca; color: #dc2626; } body.sy-enabled .filter-section .filter-item[data-filter="resetall"] a:hover { background: #dc2626; border-color: #dc2626; color: #fff; } /* ============================ 3. FILTER DRAWER (clean white) */ body.sy-enabled .row.search-car-list.cr_mob_nopadding { display: block; margin: 0; padding: 0; } /* the drawer panel is relocated to by JS, so the leftover sidebar shell (its .inventroy-widget border painted a 42x42 ghost box at the top-left corner) is dead weight — hide it */ body.sy-enabled .side-bar.col-xl-3 { display: none !important; } body.sy-enabled .inventory-sidebar.inventory-sidebar-mob { background: transparent; border: 0; box-shadow: none; padding: 0; border-radius: 0; } body.sy-enabled .inventory-mob-relative { position: fixed !important; top: 0 !important; bottom: auto !important; left: auto !important; right: -480px !important; width: min(400px, 92vw); height: 100vh !important; max-height: 100vh; background: var(--sy-surface); z-index: 9999; overflow-y: auto; -webkit-overflow-scrolling: touch; transform: none !important; transition: right .4s var(--sy-ease) !important; box-shadow: -28px 0 70px rgba(11,16,32,.22); margin: 0; padding-bottom: 24px; border-radius: var(--sy-r-xl) 0 0 var(--sy-r-xl); } body.sy-enabled .inventory-mob-relative.showactive { right: 0 !important; } body.sy-enabled .inventory-mob-relative .filter-title { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; margin: 0; border: 0; border-bottom: 1px solid var(--sy-border); position: sticky; top: 0; z-index: 2; background: var(--sy-surface); } body.sy-enabled .inventory-mob-relative .filter-title .filter-btn-1 small { font-family: var(--sy-font-display); font-weight: 800; font-size: 1rem; color: var(--sy-ink); letter-spacing: .02em; } /* RESET + close grouped on the right */ body.sy-enabled .inventory-mob-relative .filter-title .sy-filter-actions { display: flex; align-items: center; gap: 8px; } /* RESET = ghost indigo pill → inverts (fills indigo, white text) on hover */ body.sy-enabled .inventory-mob-relative .filter-title .reset-btn a { display: inline-flex; align-items: center; height: 30px; padding: 0 13px; border-radius: var(--sy-r-pill); border: 1px solid var(--sy-border); background: var(--sy-surface); transition: background var(--sy-t-fast), border-color var(--sy-t-fast); } body.sy-enabled .inventory-mob-relative .filter-title .reset-btn a small { color: var(--sy-primary-600) !important; font-size: .76rem; font-weight: 700; letter-spacing: .02em; transition: color var(--sy-t-fast); } body.sy-enabled .inventory-mob-relative .filter-title .reset-btn a:hover { background: var(--sy-primary-600); border-color: var(--sy-primary-600); } body.sy-enabled .inventory-mob-relative .filter-title .reset-btn a:hover small { color: #fff !important; } /* Close X = round icon button → red tint + 90° spin on hover */ body.sy-enabled .inventory-mob-relative .filter-title .sy-filter-close { width: 32px; height: 32px; flex: 0 0 32px; display: grid; place-items: center; padding: 0; border: 1px solid var(--sy-border); border-radius: 50%; background: var(--sy-surface); color: var(--sy-muted); cursor: pointer; transition: background var(--sy-t-fast), border-color var(--sy-t-fast), color var(--sy-t-fast), transform var(--sy-t-base) var(--sy-ease); } body.sy-enabled .inventory-mob-relative .filter-title .sy-filter-close i { font-size: .9rem; line-height: 1; pointer-events: none; } body.sy-enabled .inventory-mob-relative .filter-title .sy-filter-close:hover { background: #fef2f2; border-color: #fecaca; color: #dc2626; transform: rotate(90deg); } body.sy-enabled .inventory-mob-relative .inventory-mob-sec1, body.sy-enabled .inventory-mob-relative .inventory-mob-sec2, body.sy-enabled .inventory-mob-relative .inventory-mob-sec3 { padding: 0; } body.sy-enabled .cheak-box { padding: 6px 12px; } body.sy-enabled .cheak-box label.contain { display: flex; align-items: center; gap: 11px; position: relative; padding: 9px 12px; margin: 0; cursor: pointer; border-radius: 10px; font-family: var(--sy-font-text); font-size: .88rem; line-height: 1.35; color: var(--sy-text); transition: background var(--sy-t-fast), color var(--sy-t-fast); } body.sy-enabled .cheak-box label.contain:hover { background: var(--sy-surface-2); color: var(--sy-primary-700); } /* checkmark = a real 20px flex box pinned LEFT of the label. The theme positions it absolute @left:0/top:4px which, once the label became display:flex, sat ON TOP of the text. order:-1 + position:relative makes it the first in-flow item instead. */ body.sy-enabled .cheak-box label.contain .checkmark { position: relative; order: -1; flex: 0 0 20px; top: auto; left: auto; width: 20px; height: 20px; border: 1.5px solid var(--sy-border); border-radius: 6px; background: var(--sy-surface); transition: background var(--sy-t-fast), border-color var(--sy-t-fast); } body.sy-enabled .cheak-box label.contain:hover .checkmark { border-color: var(--sy-primary-400); } body.sy-enabled .contain input:checked ~ .checkmark { background: var(--sy-primary-600) !important; border-color: var(--sy-primary-600) !important; } /* sub-type rows indent one notch under their parent car type */ body.sy-enabled label.contain.sub_car_type { padding-left: 30px; } /* ONE divider per section. There were THREE border sources stacking into doubles: custom.css `.filter-dropdown{border-bottom}`, the inline blade `.dropdown-btn{border-top}`, and our old `.filter-dropdown{border-top}`. Collapse to a single bottom border on the .filter-dropdown div, kill the button's top border + the theme's margin gap. */ body.sy-enabled .filter-dropdown { border-top: 0 !important; border-bottom: 1px solid var(--sy-border) !important; margin-bottom: 0 !important; padding: 0 !important; } body.sy-enabled .filter-dropdown .dropdown-btn { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 12px 22px; border: 0 !important; background: transparent; cursor: pointer; font-family: var(--sy-font-text); font-weight: 600; font-size: .9rem; color: var(--sy-ink); transition: background var(--sy-t-fast); } body.sy-enabled .filter-dropdown .dropdown-btn:hover { background: var(--sy-surface-2); } body.sy-enabled .filter-dropdown .dropdown-btn .arrow, body.sy-enabled .filter-dropdown .dropdown-btn i { color: var(--sy-muted); transition: transform var(--sy-t-base) var(--sy-ease); } body.sy-enabled .filter-dropdown .dropdown-btn.open .arrow, body.sy-enabled .filter-dropdown .dropdown-btn.open i { transform: rotate(180deg); } /* padding lives on the INNER box, NOT .dropdown-content — so a collapsed section (max-height:0; overflow:hidden) truly goes to 0px instead of leaving ~20px of stranded vertical padding ("minimize doesn't reduce height" bug). */ body.sy-enabled .filter-dropdown .dropdown-content { padding: 0 !important; } body.sy-enabled .filter-dropdown .dropdown-content .categories-box { padding: 2px 18px 12px; } /* show ~5 rows per filter, scroll the rest internally (Car Type, Colors etc. have 14-17) */ body.sy-enabled .filter-dropdown .dropdown-content .cheak-box { max-height: 190px; overflow-y: auto; overscroll-behavior: contain; } body.sy-enabled .filter-dropdown .dropdown-content .cheak-box::-webkit-scrollbar { width: 6px; } body.sy-enabled .filter-dropdown .dropdown-content .cheak-box::-webkit-scrollbar-track { background: transparent; } body.sy-enabled .filter-dropdown .dropdown-content .cheak-box::-webkit-scrollbar-thumb { background: var(--sy-border); border-radius: 3px; } body.sy-enabled .filter-dropdown .dropdown-content .cheak-box::-webkit-scrollbar-thumb:hover { background: var(--sy-muted); } body.sy-enabled #slider-val { background: var(--sy-border); border: 0; height: 5px; border-radius: 3px; margin: 14px 8px; } body.sy-enabled #slider-val .ui-slider-range { background: var(--sy-primary-600); } body.sy-enabled #slider-val .ui-slider-handle { width: 20px; height: 20px; top: -8px; margin-left: -10px; background: #fff; border: 2.5px solid var(--sy-primary-600); border-radius: 50%; box-shadow: 0 2px 8px -2px rgba(79,70,229,.45); cursor: grab; transition: box-shadow var(--sy-t-fast), transform var(--sy-t-fast); } body.sy-enabled #slider-val .ui-slider-handle:hover, body.sy-enabled #slider-val .ui-slider-handle:focus { box-shadow: 0 0 0 6px rgba(79,70,229,.16); transform: scale(1.12); outline: none; } body.sy-enabled #slider-range-value1, body.sy-enabled #slider-range-value2, body.sy-enabled .slider-range-value1, body.sy-enabled .slider-range-value2 { font-weight: 700; color: var(--sy-primary-700); font-size: .82rem; } body.sy-enabled .filter-year-submit input[type="submit"], body.sy-enabled .filter-year-submit button { width: 100%; padding: 10px; margin-top: 12px; cursor: pointer; background: var(--sy-primary-600); color: #fff; border: 0; border-radius: var(--sy-r-pill); font-weight: 700; font-size: .84rem; transition: background var(--sy-t-fast); } body.sy-enabled .filter-year-submit input[type="submit"]:hover { background: var(--sy-primary-700); } body.sy-enabled .inventory-mob-relative #submitFilterForm, body.sy-enabled .mobile-filter-sec1 #submitFilterForm { background: var(--sy-primary-600); color: #fff; border: 0; border-radius: var(--sy-r-pill); height: 46px; padding: 0 22px; width: 100%; font-weight: 700; font-size: .9rem; cursor: pointer; transition: background var(--sy-t-fast); } body.sy-enabled .inventory-mob-relative #submitFilterForm:hover { background: var(--sy-primary-700); } /* ============================ 4. RESULTS LAYOUT (full-width 4-up default) */ /* side gutter so cards never touch the viewport edge below the 1730 container (at 1280 they had ~1px gutter → cramped + clipped); aligns with hero/toolbar */ body.sy-enabled .col-xl-9.grid-img { display: block; width: 100%; max-width: 100%; padding: 0 clamp(10px, 1.3vw, 20px); margin: 0; } body.sy-enabled #car-listings { display: flex; flex-wrap: wrap; margin: 0 -6px; padding-top: 4px; } /* dense grid: 4-up ≥1400, 3-up ≥1100, 2-up ≥640, 1-up below */ body.sy-enabled #car-listings .car-block-four.grid-view { flex: 0 0 25%; max-width: 25%; padding: 0 6px 12px; } /* map column appears ONLY when the map truly renders (JS adds .sy-map-ok) */ body.sy-enabled .grid-img > .cr_map_vwdesktop { position: fixed; left: -10000px; top: 0; width: 520px; height: 520px; opacity: 0; pointer-events: none; z-index: -1; } body.sy-enabled .grid-img.sy-map-ok { display: grid; grid-template-columns: minmax(0,1fr) clamp(360px, 38%, 560px); column-gap: 24px; align-items: start; } body.sy-enabled .grid-img.sy-map-ok > * { grid-column: 1; min-width: 0; } body.sy-enabled .grid-img.sy-map-ok > .cr_map_vwdesktop { position: sticky; left: auto; top: 96px; width: auto; height: calc(100vh - 112px); opacity: 1; pointer-events: auto; z-index: auto; grid-column: 2; grid-row: 1 / -1; border-radius: var(--sy-r-xl); overflow: hidden; border: 1px solid var(--sy-border); box-shadow: 0 12px 40px -16px rgba(11,16,32,.3); background: var(--sy-surface-2); } body.sy-enabled .grid-img.sy-map-ok > .cr_map_vwdesktop .cr_map_fullvw { position: relative; height: 100%; width: 100%; } body.sy-enabled .grid-img.sy-map-ok > .cr_map_vwdesktop #map_dkt_main { width: 100%; height: 100% !important; } body.sy-enabled .grid-img.sy-map-ok #car-listings .car-block-four.grid-view { flex: 0 0 50%; max-width: 50%; } body.sy-enabled .grid-img > #car-listings.remove, body.sy-enabled .grid-img > .pagination-sec.remove { display: flex !important; } /* map skeleton (only seen inside the on-screen split) + kill Google "Oops" */ body.sy-enabled .sy-map__skeleton { position: absolute; inset: 0; z-index: 3; background: linear-gradient(135deg, var(--sy-primary-700), var(--sy-secondary-600)); display: flex; flex-direction: column; gap: 12px; align-items: center; justify-content: center; transition: opacity var(--sy-t-base); } body.sy-enabled .sy-map__skeleton.is-loaded { opacity: 0; pointer-events: none; } body.sy-enabled .sy-map__skeleton::before { content: "\f5a0"; font-family: "Font Awesome 6 Free","Font Awesome 5 Free"; font-weight: 900; font-size: 2.4rem; color: rgba(255,255,255,.9); } body.sy-enabled .sy-map__skeleton::after { content: "Loading map\2026"; color: rgba(255,255,255,.85); font-family: var(--sy-font-text); font-weight: 600; font-size: .9rem; } body.sy-enabled #map_dkt_main .gm-err-container, body.sy-enabled #map_dkt_main .gm-err-content, body.sy-enabled #map_dkt_main .gm-err-title, body.sy-enabled #map_dkt_main .gm-err-message, body.sy-enabled #map_dkt_main .gm-err-icon, body.sy-enabled #map_dkt_main .gm-err-autocomplete { display: none !important; } body.sy-enabled .sy-search-area-btn { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); z-index: 10; display: none; align-items: center; gap: 7px; white-space: nowrap; cursor: pointer; padding: 9px 18px; border-radius: var(--sy-r-pill); background: var(--sy-surface); border: 1.5px solid var(--sy-border); color: var(--sy-ink); font-family: var(--sy-font-text); font-weight: 700; font-size: .82rem; box-shadow: var(--sy-e2); transition: all var(--sy-t-fast); } body.sy-enabled .grid-img.sy-map-ok .sy-search-area-btn.sy-visible { display: inline-flex; } body.sy-enabled .sy-search-area-btn:hover { background: var(--sy-primary-600); color: #fff; border-color: var(--sy-primary-600); transform: translateX(-50%) translateY(-1px); } body.sy-enabled .gj_dk_cur_loc_fetch { position: absolute; top: 14px; right: 14px; z-index: 10; width: 42px; height: 42px; background: var(--sy-surface); border: 1px solid var(--sy-border); border-radius: 12px; display: grid; place-items: center; cursor: pointer; box-shadow: var(--sy-e2); transition: background var(--sy-t-fast), transform var(--sy-t-fast); } body.sy-enabled .gj_dk_cur_loc_fetch:hover { background: var(--sy-primary-50); transform: scale(1.06); } body.sy-enabled .gj_dk_cur_loc_fetch img { width: 22px; height: 22px; } /* ============================ 5. DENSE COMPACT CARD */ body.sy-enabled .car-block-four .inner-box { position: relative; display: flex; flex-direction: column; height: 100%; background: var(--sy-surface); border: 1px solid var(--sy-border); border-radius: var(--sy-r-lg); overflow: hidden; box-shadow: var(--sy-e1); transition: transform .3s var(--sy-ease), box-shadow .3s var(--sy-ease), border-color .25s; contain: layout style; } @media (hover:hover){ body.sy-enabled .car-block-four .inner-box:hover { transform: translateY(-4px); box-shadow: 0 16px 36px -14px rgba(79,70,229,.2), 0 4px 12px -4px rgba(11,16,32,.1); border-color: var(--sy-primary-200); } } body.sy-enabled .car-block-four .image-box { position: relative; overflow: hidden; aspect-ratio: 16/9; background: var(--sy-surface-2); border-radius: var(--sy-r-lg) var(--sy-r-lg) 0 0; } body.sy-enabled .car-block-four .image-box .slider-thumb { height: 100%; } body.sy-enabled .car-block-four .image-box .image, body.sy-enabled .car-block-four .image-box figure.image { height: 100%; margin: 0; } body.sy-enabled .car-block-four .image-box .image img { width: 100% !important; height: 100% !important; object-fit: cover; display: block; transition: transform .5s var(--sy-ease); } @media (hover:hover){ body.sy-enabled .car-block-four .inner-box:hover .image-box .image img { transform: scale(1.04); } } body.sy-enabled .car-block-four .image-box::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(to top, rgba(11,16,32,.5) 0%, rgba(11,16,32,.08) 35%, transparent 55%); } body.sy-enabled .car-block-four .grid-sec1 { position: static; } body.sy-enabled .car-block-four .grid-sec1 > span { position: absolute; top: 10px; left: 10px; bottom: auto !important; z-index: 4; background: var(--sy-accent-500); color: var(--sy-on-accent); font-family: var(--sy-font-display); font-weight: 800; font-size: .62rem; padding: 3px 9px; border-radius: var(--sy-r-pill); box-shadow: none; } body.sy-enabled .car-block-four .grid-sec1 .icon-box { position: absolute; top: 8px; right: 8px; z-index: 5; width: 30px; height: 30px; display: grid; place-items: center; cursor: pointer; background: rgba(255,255,255,.88); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,.4); border-radius: 50%; transition: background var(--sy-t-fast), transform var(--sy-t-fast); } @media (hover:hover){ body.sy-enabled .car-block-four .grid-sec1 .icon-box:hover { background: #fff; transform: scale(1.1); } } body.sy-enabled .car-block-four .grid-sec1 .icon-box i.fa-regular { color: var(--sy-ink); font-size: .78rem; } body.sy-enabled .car-block-four .grid-sec1 .icon-box i.fa-solid { color: var(--sy-accent-400) !important; font-size: .78rem; animation: sy-save-pulse .42s var(--sy-ease-spring); } @keyframes sy-save-pulse { 0% { transform: scale(1);} 50% { transform: scale(1.4);} 100% { transform: scale(1);} } body.sy-enabled .car-block-four .search-verify-btn.grid-section { position: absolute; bottom: 10px; left: 10px; top: auto; z-index: 4; display: flex; gap: 4px; flex-wrap: wrap; max-width: calc(100% - 20px); } body.sy-enabled .car-block-four .search-verify-btn .cr-verf { display: inline-flex; align-items: center; gap: 4px; padding: 3px 7px; background: rgba(255,255,255,.92); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border-radius: var(--sy-r-pill); font-size: .6rem; font-weight: 700; color: var(--sy-ink); } body.sy-enabled .car-block-four .search-verify-btn .cr-verf img { width: 11px; height: 11px; object-fit: contain; } body.sy-enabled .car-block-four .content-lease-avil { position: absolute; bottom: 10px; right: 10px; z-index: 4; } body.sy-enabled .car-block-four .content-lease-avil p { margin: 0; padding: 3px 8px; border-radius: var(--sy-r-pill); background: rgba(6,182,212,.92); color: #fff; font-size: .6rem; font-weight: 700; } body.sy-enabled .car-block-four .slider-thumb { position: relative; } body.sy-enabled .car-block-four .slider-thumb .slick-dots { position: absolute !important; bottom: 10px !important; top: auto !important; left: 50% !important; transform: translateX(-50%) !important; z-index: 5; display: flex !important; align-items: center; gap: 4px; padding: 0 !important; margin: 0 !important; list-style: none; width: auto !important; height: auto !important; } body.sy-enabled .car-block-four .slider-thumb .slick-dots li { width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; display: flex; } body.sy-enabled .car-block-four .slider-thumb .slick-dots li button { width: 6px !important; height: 6px !important; padding: 0 !important; font-size: 0; border: 0; border-radius: 50%; background: rgba(255,255,255,.55); transition: background var(--sy-t-fast), width var(--sy-t-base) var(--sy-ease); } body.sy-enabled .car-block-four .slider-thumb .slick-dots li button::before { display: none !important; content: none !important; } body.sy-enabled .car-block-four .slider-thumb .slick-dots li.slick-active button { background: #fff; width: 16px !important; border-radius: 3px; } body.sy-enabled .car-block-four .slick-arrow { display: none !important; } /* body */ body.sy-enabled .car-block-four .content-box { padding: 12px 14px 10px; display: flex; flex-direction: column; gap: 5px; flex: 1; } body.sy-enabled .car-block-four .content-box .title { margin: 0; display: flex; align-items: center; gap: 6px; } body.sy-enabled .car-block-four .content-box .title a { font-family: var(--sy-font-display); font-weight: 700; font-size: .88rem; line-height: 1.25; color: var(--sy-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 0 1 auto; min-width: 0; transition: color var(--sy-t-fast); } body.sy-enabled .car-block-four .content-box .title a:hover { color: var(--sy-primary-600); } /* chauffeur/driver icon hugs the title text instead of floating at the far edge */ body.sy-enabled .car-block-four .content-box .title img { width: 15px !important; height: 15px !important; flex: 0 0 auto; margin: 0 !important; opacity: .8; } body.sy-enabled .car-block-four .content-box .text { font-size: .72rem; color: var(--sy-muted); white-space: nowrap !important; overflow: hidden; text-overflow: ellipsis; line-height: 1.5 !important; height: auto !important; } /* #car-listings ID outranks the theme's higher-specificity !important rules that force the pill into a column (icon over clipped text) */ body.sy-enabled .car-block-four .content-box > ul, body.sy-enabled #car-listings .car-block-four .content-box > ul { display: flex !important; flex-wrap: wrap; justify-content: flex-start !important; gap: 5px; padding: 0; margin: 2px 0 12px !important; list-style: none; max-height: 54px; overflow: hidden; border-bottom: 0 !important; } body.sy-enabled .car-block-four .content-box > ul li, body.sy-enabled #car-listings .car-block-four .content-box > ul li { display: inline-flex !important; flex-direction: row !important; align-items: center !important; gap: 4px; height: 24px !important; width: auto !important; padding: 0 8px !important; margin: 0 !important; background: var(--sy-surface-2) !important; border: 1px solid var(--sy-border) !important; border-radius: var(--sy-r-pill) !important; font-size: .68rem !important; font-weight: 500; color: var(--sy-text) !important; white-space: nowrap; line-height: 1 !important; } body.sy-enabled .car-block-four .content-box > ul li img, body.sy-enabled #car-listings .car-block-four .content-box > ul li img { display: inline-block !important; width: 12px !important; height: 12px !important; min-width: 0 !important; object-fit: contain; opacity: .6; margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; } body.sy-enabled .car-block-four .crental-b2btag { background: var(--sy-secondary); color: #fff; padding: 2px 7px; border-radius: var(--sy-r-pill); font-size: .6rem; font-weight: 700; } body.sy-enabled .car-block-four .crental-b2btagdummy { background: var(--sy-surface-2); color: var(--sy-muted); padding: 2px 7px; border-radius: var(--sy-r-pill); font-size: .6rem; font-weight: 600; } /* price band (bottom): prices left, CTA absolutely pinned right — no overlap even in dual-currency (INR+AED) mode; theme's amber box stripped */ body.sy-enabled .car-block-four .cr_cruysec { order: 4; margin-top: auto; padding: 8px 118px 8px 14px; border-top: 1px solid var(--sy-border); display: flex; align-items: center; min-height: 48px; } body.sy-enabled .car-block-four .cr_cruysec .btn-box, body.sy-enabled .car-block-four .cr_regcurrancy, body.sy-enabled .car-block-four .filter-res-fix1, body.sy-enabled .car-block-four .cr_price_currency, body.sy-enabled .car-block-four .cr_price_curwid, body.sy-enabled .car-block-four .cr_price_currency2 { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important; border-radius: 0 !important; } body.sy-enabled .car-block-four .cr_regcurrancy .filter-res-fix1 { display: flex; align-items: baseline; gap: 3px; } body.sy-enabled .car-block-four .btn-box small, body.sy-enabled .car-block-four .cr_currfont3, body.sy-enabled .car-block-four .cr_currfont2 { font-family: var(--sy-font-display); font-weight: 800; font-size: 1rem; color: var(--sy-ink); line-height: 1.1; } body.sy-enabled .car-block-four .cr_currfont1 { font-size: .62rem; font-weight: 700; color: var(--sy-muted); letter-spacing: .03em; } body.sy-enabled .car-block-four .cr_cruysec span:not(.cr_currfont1):not(.cr_currfont2):not(.cr_currfont3) { font-size: .64rem; color: var(--sy-muted); font-weight: 500; } /* dual currency → two compact stacked rows */ body.sy-enabled .car-block-four .cr_price_currency { display: flex !important; flex-direction: column; gap: 3px; align-items: flex-start; } body.sy-enabled .car-block-four .cr_price_curwid { width: auto !important; } body.sy-enabled .car-block-four .cr_price_currency2 { display: flex !important; align-items: baseline; gap: 4px; } body.sy-enabled .car-block-four .cr_price_currency .cr_currfont2, body.sy-enabled .car-block-four .cr_price_currency .cr_currfont3 { font-size: .88rem; } body.sy-enabled .car-block-four .cr_price_curbrdright { border-right: 0 !important; padding-right: 0 !important; } /* CTA pinned bottom-right of the card, vertically centered in the band */ body.sy-enabled .car-block-four .cr_detailslink_sec { position: absolute; right: 14px; bottom: 8px; margin: 0; padding: 0; display: flex; align-items: center; pointer-events: none; z-index: 2; } body.sy-enabled .car-block-four .cr_detailslink_sec > div { display: none; } body.sy-enabled .car-block-four .details.cr_detailslinks { display: inline-flex; align-items: center; gap: 5px; position: static; pointer-events: auto; height: 32px; padding: 0 14px; background: var(--sy-primary-600); color: #fff !important; border-radius: var(--sy-r-pill); font-family: var(--sy-font-text); font-weight: 700; font-size: .72rem; white-space: nowrap; transition: background .2s var(--sy-ease), transform .2s var(--sy-ease), box-shadow .2s; } @media (hover:hover){ body.sy-enabled .car-block-four .details.cr_detailslinks:hover { background: var(--sy-primary-700); transform: translateY(-1px); box-shadow: 0 6px 16px -5px rgba(79,70,229,.5); } } /* entrance */ @media (prefers-reduced-motion: no-preference) { body.sy-enabled #car-listings .car-block-four.grid-view .inner-box, body.sy-enabled #car-listings .service-block-thirteen.list-view .inner-box { animation: sy-card-enter .38s var(--sy-ease) both; animation-delay: calc(var(--sy-i, 0) * 35ms); } @keyframes sy-card-enter { from { opacity: 0; transform: translateY(16px);} to { opacity: 1; transform: none;} } } /* ============================ 6. LIST CARD (wide horizontal — when toggled) */ /* 1-up by default (tablet/phone); 2-up on big screens (min-width:1200) below */ body.sy-enabled #car-listings .service-block-thirteen.list-view { width: 100%; flex: 0 0 100%; max-width: 100%; margin: 0 0 14px; padding: 0 7px; } body.sy-enabled #car-listings .service-block-thirteen .inner-box { position: relative; display: flex; flex-direction: row; align-items: stretch; background: var(--sy-surface); border: 1px solid var(--sy-border); border-radius: var(--sy-r-lg); overflow: hidden; box-shadow: var(--sy-e1); transition: transform var(--sy-t-base) var(--sy-ease), box-shadow var(--sy-t-base) var(--sy-ease), border-color var(--sy-t-fast); min-height: 170px; } @media (hover:hover){ body.sy-enabled #car-listings .service-block-thirteen .inner-box:hover { transform: translateY(-3px); box-shadow: 0 16px 36px -14px rgba(79,70,229,.2); border-color: var(--sy-primary-200); } } /* align-self:stretch + absolutely-filled image: the slider must NOT contribute intrinsic height (no aspect-ratio here like the grid card), else the natural image height (~470px) stretches the whole row. Absolute fill → image-box height = the content column height instead. */ body.sy-enabled #car-listings .service-block-thirteen .image-box { flex: 0 0 250px; align-self: stretch; position: relative; overflow: hidden; background: var(--sy-surface-2); } body.sy-enabled #car-listings .service-block-thirteen .image-box > span { position: absolute; inset: 0; display: block; width: 100%; height: 100%; } body.sy-enabled #car-listings .service-block-thirteen .image-box .slider-thumb, body.sy-enabled #car-listings .service-block-thirteen .image-box .slick-list, body.sy-enabled #car-listings .service-block-thirteen .image-box .slick-track, body.sy-enabled #car-listings .service-block-thirteen .image-box .slick-slide, body.sy-enabled #car-listings .service-block-thirteen .image-box .image, body.sy-enabled #car-listings .service-block-thirteen .image-box figure.image { height: 100% !important; width: 100%; margin: 0; } body.sy-enabled #car-listings .service-block-thirteen .image-box img { width: 100%; height: 100% !important; object-fit: cover; transition: transform .6s var(--sy-ease); } body.sy-enabled #car-listings .service-block-thirteen .image-box::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(to top, rgba(11,16,32,.38), transparent 55%); } body.sy-enabled #car-listings .service-block-thirteen .cr_proffer { position: absolute; top: 10px; left: 10px; z-index: 3; background: var(--sy-accent-500); color: var(--sy-on-accent); font-weight: 800; font-size: .66rem; padding: 3px 9px; border-radius: var(--sy-r-pill); } body.sy-enabled #car-listings .service-block-thirteen .search-verify-btn { position: absolute; bottom: 10px; left: 10px; z-index: 3; display: flex; flex-direction: column; align-items: flex-start; gap: 5px; } body.sy-enabled #car-listings .service-block-thirteen .search-verify-btn a { display: inline-flex; align-items: center; gap: 4px; width: fit-content; padding: 3px 8px; background: rgba(255,255,255,.92); border-radius: var(--sy-r-pill); font-size: .62rem; font-weight: 700; color: var(--sy-ink); } /* theme sets this column → content + price RAIL stacked, doubling card height; force row so it's [details | price rail] side by side */ body.sy-enabled #car-listings .service-block-thirteen .right-box { display: flex; flex-direction: column; flex: 1; min-width: 0; padding: 0; justify-content: flex-start; align-items: stretch; } /* theme's flex-grow on .content-boxwidth doesn't claim the free space (justify space-between quirk) → pin width explicitly so it fills next to the 200px rail */ /* even 12px rhythm driven by the column gap — the theme's per-element margins (.text mb:28px, .inspection-sec mb:24px) made ragged 39/33px gaps; zeroed below */ /* shrink-to-content (capped) so specs/tags don't leave a huge dead band on the right; right-box space-between then pins this left + the price rail right */ body.sy-enabled #car-listings .service-block-thirteen .content-box.content-boxwidth { flex: 1 1 auto; width: auto; max-width: none; min-width: 0; padding: 16px 20px; display: flex; flex-direction: column; justify-content: center; gap: 12px; border-right: 0; border-bottom: 1px solid var(--sy-border); } body.sy-enabled #car-listings .service-block-thirteen .content-boxnewcontent-box { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; } body.sy-enabled #car-listings .service-block-thirteen .content-box h4.title { margin: 0; } body.sy-enabled #car-listings .service-block-thirteen .content-box h4.title a { font-family: var(--sy-font-display); font-weight: 700; font-size: 1.02rem; color: var(--sy-ink); transition: color var(--sy-t-fast); } body.sy-enabled #car-listings .service-block-thirteen .content-box h4.title a:hover { color: var(--sy-primary-600); } body.sy-enabled #car-listings .service-block-thirteen .content-box .text { font-size: .78rem; color: var(--sy-muted); margin: 0 !important; } /* theme spreads these with justify:space-around (huge gaps) + mb:24px → group left, zero margin (rhythm = column gap) */ body.sy-enabled #car-listings .service-block-thirteen .inspection-sec { display: flex; flex-wrap: wrap; justify-content: flex-start !important; gap: 8px; margin: 0 !important; } body.sy-enabled #car-listings .service-block-thirteen .inspection-box { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; background: var(--sy-surface-2); border: 1px solid var(--sy-border); border-radius: var(--sy-r-pill); } body.sy-enabled #car-listings .service-block-thirteen .inspection-box .icon svg { width: 15px; height: 15px; } body.sy-enabled #car-listings .service-block-thirteen .inspection-box .info span { font-size: .6rem; color: var(--sy-muted); display: block; line-height: 1.1; text-transform: uppercase; letter-spacing: .03em; } body.sy-enabled #car-listings .service-block-thirteen .inspection-box .info small { font-size: .76rem; font-weight: 700; color: var(--sy-ink); } /* cap feature tags to one row so 2-up cards stay compact + uniform (extra tags clip) */ body.sy-enabled #car-listings .service-block-thirteen .ul-cotent { display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 0 !important; list-style: none; max-height: 28px; overflow: hidden; } body.sy-enabled #car-listings .service-block-thirteen .ul-cotent li a { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; background: var(--sy-surface-2); border: 1px solid var(--sy-border); border-radius: var(--sy-r-pill); font-size: .68rem; font-weight: 600; color: var(--sy-text); } body.sy-enabled #car-listings .service-block-thirteen .ul-cotent li img { width: 12px; height: 12px; } body.sy-enabled #car-listings .service-block-thirteen .listcars-designshow .icon-box, body.sy-enabled #car-listings .service-block-thirteen .listcars-design .icon-box { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; cursor: pointer; border: 1px solid var(--sy-border); border-radius: var(--sy-r-pill); font-size: .72rem; color: var(--sy-muted); transition: color var(--sy-t-fast), border-color var(--sy-t-fast), background var(--sy-t-fast); } body.sy-enabled #car-listings .service-block-thirteen .listcars-designshow .icon-box:hover { color: var(--sy-accent-500); border-color: var(--sy-accent-500); } body.sy-enabled #car-listings .service-block-thirteen .icon-box i.fa-solid { color: var(--sy-accent-400) !important; } /* min-width:0 is essential — without it the flex item's auto min-width = its content's max-content, and the width:100% price/button blow the column out to ~1191px, shoving it off the card. Cap it to a clean price rail. */ body.sy-enabled #car-listings .service-block-thirteen .content-box-two { flex: 0 0 auto; width: 100%; max-width: none; min-width: 0; margin: 0 !important; display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 20px; border-left: 0; } /* theme swaps the save element by width: .listcars-design (a 148px-tall block in the price bar) on desktop, .listcars-designshow on narrow. Force ONE everywhere: hide the tall desktop block, always show our pinned top-right Save (consistent + no bar bloat). */ body.sy-enabled #car-listings .service-block-thirteen .content-box-two .listcars-design { display: none !important; } /* Save lifted out of the title row → pinned top-right over the price column, so the title row is clean and Save sits with the price/CTA instead of floating in the old dead band. CSS-only (survives AJAX re-render). */ body.sy-enabled #car-listings .service-block-thirteen .listcars-designshow { display: flex !important; position: absolute; top: 14px; right: 18px; z-index: 6; margin: 0 !important; } body.sy-enabled #car-listings .service-block-thirteen .cr_cruysec { flex: 1 1 auto; width: 100%; min-width: 0; display: block; padding: 0 !important; margin: 0 !important; } /* price bar: price on the left, CTA on the right (full-width horizontal bar) */ body.sy-enabled #car-listings .service-block-thirteen .content-box-two .listcars-design2 { width: 100%; min-width: 0; margin: 0 !important; display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; } body.sy-enabled #car-listings .service-block-thirteen .listcars-design1 { position: static !important; display: flex; align-items: baseline; gap: 3px; justify-content: flex-start; flex-wrap: wrap; } body.sy-enabled #car-listings .service-block-thirteen .listcars-design2 small, body.sy-enabled #car-listings .service-block-thirteen .cr_currfont3, body.sy-enabled #car-listings .service-block-thirteen .cr_currfont2 { font-family: var(--sy-font-display); font-weight: 800; font-size: 1.16rem; color: var(--sy-ink); line-height: 1; } body.sy-enabled #car-listings .service-block-thirteen .cr_currfont1 { font-size: .64rem; color: var(--sy-muted); font-weight: 700; } body.sy-enabled #car-listings .service-block-thirteen .listcars-design2 a.button, body.sy-enabled #car-listings .service-block-thirteen .cr_cruysec a.button { position: static !important; display: inline-flex; align-items: center; justify-content: center; width: auto; flex: 0 0 auto; white-space: nowrap; padding: 9px 22px; margin: 0 !important; background: var(--sy-primary-600); color: #fff !important; border-radius: var(--sy-r-pill); font-weight: 700; font-size: .8rem; transition: background .2s var(--sy-ease); } @media (hover:hover){ body.sy-enabled #car-listings .service-block-thirteen .listcars-design2 a.button:hover { background: var(--sy-primary-700); } } body.sy-enabled #car-listings .service-block-thirteen .crental-b2btag { background: var(--sy-secondary); color: #fff; padding: 2px 8px; border-radius: var(--sy-r-pill); font-size: .62rem; font-weight: 700; } /* title row keeps clear of the absolute Save bookmark at the top-right corner */ body.sy-enabled #car-listings .service-block-thirteen .content-boxnewcontent-box { padding-right: 84px; } /* 2-UP on big screens (per request): two list cards per row >=1200px; 1-up below */ @media (min-width: 1200px) { body.sy-enabled #car-listings .service-block-thirteen.list-view { flex: 0 0 50%; max-width: 50%; } } /* ============================ 7. SMOOTH FILTERING — skeletons */ body.sy-enabled #sy-skeletons { display: flex; flex-wrap: wrap; width: 100%; padding-top: 4px; } body.sy-enabled .sy-card-skeleton { flex: 0 0 25%; max-width: 25%; padding: 0 6px 12px; } body.sy-enabled .sy-card-skeleton__inner { border: 1px solid var(--sy-border); border-radius: var(--sy-r-lg); overflow: hidden; background: var(--sy-surface); } body.sy-enabled .sy-card-skeleton__img { aspect-ratio: 16/9; background: linear-gradient(90deg, var(--sy-surface-2) 25%, var(--sy-border) 50%, var(--sy-surface-2) 75%); background-size: 200% 100%; animation: sy-shimmer 1.6s infinite; } @keyframes sy-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } } body.sy-enabled .sy-card-skeleton__body { padding: 12px 14px; display: flex; flex-direction: column; gap: 9px; } body.sy-enabled .sy-card-skeleton__line { height: 12px; border-radius: 6px; background: linear-gradient(90deg, var(--sy-surface-2) 25%, var(--sy-border) 50%, var(--sy-surface-2) 75%); background-size: 200% 100%; animation: sy-shimmer 1.6s infinite; } body.sy-enabled .sy-card-skeleton__line:nth-child(1) { width: 70%; height: 15px; } body.sy-enabled .sy-card-skeleton__line:nth-child(2) { width: 45%; animation-delay: .1s; } body.sy-enabled .sy-card-skeleton__line:nth-child(3) { width: 90%; animation-delay: .2s; } body.sy-enabled #car-listings.sy-loading { opacity: .35; pointer-events: none; transition: opacity var(--sy-t-fast); } /* ============================ 8. MAP MARKERS / MODAL / MOBILE MAP */ .custom-marker .cr_map_crimg2 { cursor: pointer; } .custom-marker .cr_map_crimgmov3 { display: inline-flex; align-items: center; gap: 6px; position: relative; padding: 6px 13px 6px 7px; background: linear-gradient(135deg, var(--sy-primary-600), var(--sy-primary-700)); color: #fff; border-radius: var(--sy-r-pill); border: 2.5px solid #fff; box-shadow: 0 8px 18px -5px rgba(79,70,229,.5); white-space: nowrap; font-family: var(--sy-font-display); transition: transform .2s var(--sy-ease), box-shadow .2s; } .custom-marker .cr_map_crimgmov3::after { content: ""; position: absolute; left: 50%; bottom: -9px; transform: translateX(-50%); border: 8px solid transparent; border-top-color: var(--sy-primary-700); filter: drop-shadow(0 2px 2px rgba(63,55,196,.4)); } .custom-marker:hover .cr_map_crimgmov3, .custom-marker.sy-marker-active .cr_map_crimgmov3 { transform: translateY(-4px) scale(1.06); box-shadow: 0 14px 28px -8px rgba(79,70,229,.6); } .custom-marker.sy-marker-active .cr_map_crimgmov3 { background: linear-gradient(135deg, var(--sy-accent-500), var(--sy-accent-600)); } .custom-marker .cr_map_crimgmov1 { width: 26px; height: 26px; min-width: 26px; background: rgba(255,255,255,.22); border-radius: 50%; display: grid; place-items: center; overflow: hidden; } .custom-marker .cr_map_crimgmov1 img { width: 16px; height: 14px; object-fit: contain; filter: brightness(0) invert(1); } .custom-marker .cr_map_crimgmov2 small { font-weight: 800; font-size: .8rem; color: #fff; } .custom-marker.user-location-marker .cr_map_crimgmov3, .custom-marker.search-location-marker .cr_map_crimgmov3 { background: linear-gradient(135deg, var(--sy-accent-500), var(--sy-accent-600)); } body.sy-enabled .mycarsmodalmob .modal-content { border: 0; border-radius: var(--sy-r-xl); overflow: hidden; box-shadow: var(--sy-e4); } body.sy-enabled .mycarsmodalmob .cr_carlist_showlist { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 24px; border: 0; border-bottom: 1px solid var(--sy-border); background: var(--sy-surface); } body.sy-enabled .mycarsmodalmob .cr_carlist_showlist h4, body.sy-enabled .mycarsmodalmob #car_cnt_hd { font-family: var(--sy-font-display); font-weight: 800; color: var(--sy-ink); margin: 0; font-size: 1.1rem; } body.sy-enabled .mycarsmodalmob .modal-body { padding: 20px 24px; background: var(--sy-page); max-height: 76vh; overflow-y: auto; } body.sy-enabled .mycarsmodalmob #car-listings .service-block-thirteen .inner-box { min-height: 150px; } body.sy-enabled .mycarsmodalmob #car-listings .service-block-thirteen .image-box { flex-basis: 180px; } body.sy-enabled .cr_map_vwmapmn1.cr_map_vwmobile { border-radius: var(--sy-r-xl); overflow: hidden; margin: 0 0 16px; border: 1px solid var(--sy-border); box-shadow: var(--sy-e2); } body.sy-enabled .cr_map_vwmapmn1.cr_map_vwmobile #map_mob_main { height: 320px !important; } body.sy-enabled .gj_mob_cur_loc_fetch { width: 40px; height: 40px; border-radius: 11px; background: var(--sy-surface); border: 1px solid var(--sy-border); box-shadow: var(--sy-e2); display: grid; place-items: center; } body.sy-enabled input#type_searchlocation_mobile { border-radius: var(--sy-r-sm); border: 1px solid var(--sy-border); padding: 8px 12px; font-family: var(--sy-font-text); font-size: .84rem; } /* ============================ 9. EMPTY STATE + PAGINATION */ body.sy-enabled .empty-screen { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: clamp(40px,7vw,80px) 24px; text-align: center; width: 100%; } body.sy-enabled .empty-screen .circle { width: 80px; height: 80px; border-radius: 50%; background: var(--sy-primary-50); border: 2px solid var(--sy-primary-100); display: grid; place-items: center; margin-bottom: 8px; animation: sy-bob 3s ease-in-out infinite; } @keyframes sy-bob { 0%,100% { transform: translateY(0);} 50% { transform: translateY(-8px);} } body.sy-enabled .empty-screen .circle img { width: 38px; height: 38px; opacity: .55; } body.sy-enabled .empty-screen h6 { font-family: var(--sy-font-display); font-weight: 700; font-size: 1.1rem; color: var(--sy-ink); } body.sy-enabled .empty-screen small { color: var(--sy-muted); font-size: .9rem; max-width: 32ch; display: block; } body.sy-enabled .pagination-sec { padding: 28px 0 56px; display: flex; justify-content: center; } body.sy-enabled .pagination-sec .pagination { gap: 5px; margin: 0; } body.sy-enabled .pagination-sec .page-item .page-link { min-width: 40px; height: 40px; display: grid; place-items: center; border-radius: var(--sy-r-sm) !important; border: 1px solid var(--sy-border); background: var(--sy-surface); color: var(--sy-text); font-weight: 600; font-size: .85rem; transition: background var(--sy-t-fast), border-color var(--sy-t-fast), color var(--sy-t-fast); } body.sy-enabled .pagination-sec .page-item .page-link:hover { background: var(--sy-primary-50); border-color: var(--sy-primary-300); color: var(--sy-primary-700); } body.sy-enabled .pagination-sec .page-item.active .page-link { background: var(--sy-primary-600); border-color: var(--sy-primary-600); color: #fff; box-shadow: 0 6px 16px -6px rgba(79,70,229,.5); } /* ============================ 10. RESPONSIVE (dense grid) */ @media (max-width: 1399.98px) { body.sy-enabled #car-listings .car-block-four.grid-view, body.sy-enabled .sy-card-skeleton { flex: 0 0 33.333%; max-width: 33.333%; padding: 0 7px 14px; } } @media (max-width: 1099.98px) { body.sy-enabled #car-listings .car-block-four.grid-view, body.sy-enabled .sy-card-skeleton { flex: 0 0 50%; max-width: 50%; padding: 0 7px 14px; } body.sy-enabled .grid-img.sy-map-ok { display: block; } body.sy-enabled .grid-img.sy-map-ok > .cr_map_vwdesktop { position: fixed; left: -10000px; opacity: 0; } } @media (min-width: 1800px) { body.sy-enabled #car-listings .car-block-four.grid-view, body.sy-enabled .sy-card-skeleton { flex: 0 0 20%; max-width: 20%; } } @media (max-width: 639.98px) { body.sy-enabled #car-listings .car-block-four.grid-view, body.sy-enabled .sy-card-skeleton { flex: 0 0 100%; max-width: 100%; padding: 0 0 12px; } body.sy-enabled ul.service-list { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } body.sy-enabled ul.service-list::-webkit-scrollbar { display: none; } body.sy-enabled .inventory-mob-relative { top: auto !important; bottom: -100vh !important; right: 0 !important; left: 0 !important; width: 100% !important; height: 88dvh !important; max-height: 88dvh; transform: none !important; transition: bottom .4s var(--sy-ease) !important; border-radius: var(--sy-r-xl) var(--sy-r-xl) 0 0; } body.sy-enabled .inventory-mob-relative.showactive { bottom: 0 !important; right: 0 !important; } body.sy-enabled #car-listings .service-block-thirteen .inner-box { flex-direction: column; min-height: auto; } body.sy-enabled #car-listings .service-block-thirteen .inner-box { padding: 0 !important; } body.sy-enabled #car-listings .service-block-thirteen .image-box { flex: 0 0 auto !important; width: 100% !important; align-self: stretch; height: 200px; } body.sy-enabled #car-listings .service-block-thirteen .right-box { flex-direction: column; } body.sy-enabled #car-listings .service-block-thirteen .content-box.content-boxwidth { border-right: 0; border-bottom: 1px solid var(--sy-border); } body.sy-enabled #car-listings .service-block-thirteen .content-box-two { flex: none; width: 100%; flex-direction: row; align-items: center; justify-content: space-between; } body.sy-enabled #car-listings .service-block-thirteen .listcars-design2 a.button { width: auto; margin-top: 0; padding: 9px 16px; } } @media (max-width: 991.98px) { body.sy-enabled .search-car-main .text-box.list-page-mob { position: static; } }