/* ═══════════════════════════════════════════════════════════════════════ search.css — Public search & listings page. Pairs with /search.php · /custom/js/search.js. BEM block: .gg-srch__* (gg-srch-body on ) Reuses GG design tokens from /custom/css/core.css: --gg-red, --gg-red-deep, --gg-red-subtle --gg-gray-50/100/200/300/400/500/700/800 --gg-font-head (Outfit), --gg-font-body (Figtree) --gg-r-md, --gg-r-lg, --gg-r-xl --gg-ease, --gg-dur, --gg-dur-fast --gg-text-xs/sm/md/lg/xl, --gg-z-sticky ═══════════════════════════════════════════════════════════════════════ */ .gg-srch-body{ background: var(--gg-gray-50, #F9FAFB); } /* Full-width — no centred container, no max-width cap. Right padding is removed so the map column can sit flush against the viewport edge. The LEFT column carries its own internal padding. */ .gg-srch{ padding: 0; font-family: var(--gg-font-body, 'Figtree', sans-serif); color: var(--gg-gray-800, #1F2937); } /* ═════════════════════════════════════════════════════════════════════ PREMIUM FILTER BAR — edge-to-edge inline dropdown row. Soft gradient backdrop + subtle red glow on the bottom edge. Each cell carries a leading icon, the selectpicker label, and a chevron pinned right. A second row underneath holds the live filter-tag chips. ═════════════════════════════════════════════════════════════════════ */ .gg-srch__bar{ position: sticky; top: 72px; z-index: calc(var(--gg-z-sticky, 200) - 1); width: 100%; background: radial-gradient(ellipse 60% 100% at 0% 50%, rgba(237,41,56,.04) 0%, transparent 60%), linear-gradient(180deg, #FFFFFF 0%, #FCFCFD 100%); border-top: 1px solid var(--gg-gray-200, #E5E7EB); border-bottom: 1px solid var(--gg-gray-200, #E5E7EB); box-shadow: 0 1px 0 var(--gg-gray-100, #F3F4F6) inset, 0 12px 28px -16px rgba(237,41,56,.22); padding: 0; margin: 0; } /* Hairline red accent under the bar — premium "filter rail" feel */ .gg-srch__bar::after{ content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: linear-gradient(90deg, transparent 0%, rgba(237,41,56,.3) 35%, rgba(237,41,56,.55) 50%, rgba(237,41,56,.3) 65%, transparent 100%); opacity: .6; pointer-events: none; } .gg-srch__bar-form{ display: grid; /* Posted · Tag-box · Service · Property · City · Distance · Rating · Reset · Filters */ grid-template-columns: minmax(0, .9fr) /* Posted by */ minmax(0, 2.2fr) /* Tag-box — wide so chips fit inline */ minmax(0, 1.2fr) /* Service */ minmax(0, 1fr) /* Property */ minmax(0, .95fr) /* City */ minmax(0, .85fr) /* Distance */ minmax(0, .8fr) /* Rating */ auto /* Reset */ auto; /* Filters */ gap: 0; margin: 0; padding: 0; align-items: stretch; width: 100%; } /* Each filter cell — leading icon + selectpicker, joined to neighbours by a single hairline divider. Hover gets a gentle red wash; focus inside the cell goes a touch deeper. */ .gg-srch__cell{ position: relative; display: flex; align-items: center; min-width: 0; min-height: 56px; /* a touch taller — premium feel */ background: transparent; border: 0; border-right: 1px solid var(--gg-gray-200, #E5E7EB); transition: background var(--gg-dur-fast, 150ms) ease; } .gg-srch__cell:last-child{ border-right: 0; } /* Only dropdown cells get the soft red wash on hover — buttons keep their own background so the gradient + white label doesn't go white-on-white. */ .gg-srch__cell:not(.gg-srch__bar-btn):hover{ background: linear-gradient(180deg, rgba(237,41,56,.04) 0%, rgba(237,41,56,.02) 100%); } .gg-srch__cell:not(.gg-srch__bar-btn):focus-within{ background: linear-gradient(180deg, rgba(237,41,56,.08) 0%, rgba(237,41,56,.03) 100%); box-shadow: inset 0 -2px 0 var(--gg-red, #ED2938); } /* Tag-box cell — sits in place of Category. Two zones: .gg-srch__tagbox (chips, clipped — labels truncate to fit) .gg-srch__tagmore (overflow popover — sibling, NOT clipped) The two-sibling layout means the popover can spill out of the cell while the chip area itself stays tidy. */ .gg-srch__cell--tags{ background: linear-gradient(180deg, #FBFCFD 0%, #FFFFFF 100%); gap: 8px; padding-right: 10px; /* room for the +N pill on the right */ } .gg-srch__tagbox{ position: relative; display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; /* shrinks to its parent's available width */ height: 100%; padding: 0 0 0 42px; /* leading icon space */ overflow: hidden; /* clip chips that don't fit */ white-space: nowrap; /* Soft fade-out on the right edge — overflowing chips fade rather than hard-clip. The +N pill picks up the spillover. */ mask-image: linear-gradient(90deg, #000 calc(100% - 18px), transparent 100%); -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 18px), transparent 100%); } .gg-srch__tagbox-empty{ font-size: 12px; font-family: var(--gg-font-body, 'Figtree', sans-serif); font-style: italic; font-weight: 500; color: var(--gg-gray-400, #9CA3AF); letter-spacing: 0; } /* Tag chip inside the bar — labels truncate so chips never spill the cell */ .gg-srch__cell--tags .gg-srch__tag{ display: inline-flex; align-items: center; gap: 4px; padding: 4px 4px 4px 10px; max-width: 130px; /* hard cap — keeps the bar tidy */ background: linear-gradient(180deg, var(--gg-red, #ED2938) 0%, var(--gg-red-deep, #B91C28) 100%); color: var(--gg-white, #FFFFFF); border-radius: 999px; font-family: var(--gg-font-head, 'Outfit', sans-serif); font-weight: 600; font-size: 11px; letter-spacing: -.01em; text-decoration: none; white-space: nowrap; flex-shrink: 0; box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 2px 6px -2px rgba(237,41,56,.4); transition: transform var(--gg-dur-fast, 150ms) ease, filter var(--gg-dur-fast, 150ms) ease; } .gg-srch__cell--tags .gg-srch__tag:hover{ filter: brightness(1.08); transform: translateY(-1px); } .gg-srch__cell--tags .gg-srch__tag-label{ overflow: hidden; text-overflow: ellipsis; max-width: 100px; /* leaves room for the × */ line-height: 1; } .gg-srch__cell--tags .gg-srch__tag-x{ width: 16px; height: 16px; display: inline-flex; align-items: center; justify-content: center; background: rgba(255,255,255,.22); border-radius: 999px; flex-shrink: 0; } .gg-srch__cell--tags .gg-srch__tag-x i{ font-size: 11px; } /* "+N more" pill — neutral so it sits next to the red chips without competing for attention, then opens a popover with the overflow chips. Lives OUTSIDE .gg-srch__tagbox so the popover isn't clipped. */ .gg-srch__tagmore{ position: relative; flex-shrink: 0; display: inline-flex; align-items: center; } .gg-srch__tagmore-btn{ display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; background: var(--gg-white, #FFFFFF); border: 1px solid var(--gg-gray-300, #D1D5DB); color: var(--gg-gray-800, #1F2937); border-radius: 999px; font-family: var(--gg-font-head, 'Outfit', sans-serif); font-weight: 700; font-size: 11px; letter-spacing: -.01em; cursor: pointer; transition: background var(--gg-dur-fast, 150ms) ease, border-color var(--gg-dur-fast, 150ms) ease, color var(--gg-dur-fast, 150ms) ease; } .gg-srch__tagmore-btn i{ font-size: 11px; transition: transform var(--gg-dur-fast, 150ms) ease; } .gg-srch__tagmore-btn:hover{ border-color: var(--gg-red, #ED2938); color: var(--gg-red, #ED2938); } .gg-srch__tagmore.is-open .gg-srch__tagmore-btn{ background: var(--gg-red-subtle, rgba(237,41,56,.07)); border-color: var(--gg-red, #ED2938); color: var(--gg-red-deep, #B91C28); } .gg-srch__tagmore.is-open .gg-srch__tagmore-btn i{ transform: rotate(180deg); } /* Popover */ .gg-srch__tagmore-menu{ position: absolute; top: calc(100% + 8px); left: 0; min-width: 240px; max-width: 320px; max-height: 320px; background: var(--gg-white, #FFFFFF); border: 1px solid var(--gg-gray-200, #E5E7EB); border-radius: var(--gg-r-lg, 12px); box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 16px 40px -10px rgba(15,23,42,.20); z-index: var(--gg-z-drop, 100); opacity: 0; transform: translateY(-6px); pointer-events: none; transition: opacity var(--gg-dur-fast, 150ms) ease, transform var(--gg-dur-fast, 150ms) ease; overflow: hidden; display: flex; flex-direction: column; } .gg-srch__tagmore.is-open .gg-srch__tagmore-menu{ opacity: 1; transform: translateY(0); pointer-events: auto; } .gg-srch__tagmore-head{ display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-bottom: 1px solid var(--gg-gray-100, #F3F4F6); font-family: var(--gg-font-head, 'Outfit', sans-serif); font-weight: 700; font-size: 11.5px; color: var(--gg-gray-700, #374151); text-transform: uppercase; letter-spacing: .04em; } .gg-srch__tagmore-clear{ color: var(--gg-red, #ED2938); font-weight: 700; font-size: 11px; text-decoration: none; letter-spacing: 0; text-transform: none; } .gg-srch__tagmore-clear:hover{ color: var(--gg-red-deep, #B91C28); text-decoration: underline; } .gg-srch__tagmore-list{ list-style: none; margin: 0; padding: 4px; overflow-y: auto; } .gg-srch__tagmore-item{ display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border-radius: 8px; color: var(--gg-gray-800, #1F2937); text-decoration: none; font-family: var(--gg-font-body, 'Figtree', sans-serif); font-size: var(--gg-text-sm, .8125rem); font-weight: 500; transition: background var(--gg-dur-fast, 150ms) ease, color var(--gg-dur-fast, 150ms) ease; } .gg-srch__tagmore-item:hover{ background: var(--gg-red-subtle, rgba(237,41,56,.07)); color: var(--gg-red-deep, #B91C28); } .gg-srch__tagmore-item-label{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gg-srch__tagmore-item-x{ width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: var(--gg-gray-100, #F3F4F6); color: var(--gg-gray-500, #6B7280); font-size: 11px; flex-shrink: 0; transition: background var(--gg-dur-fast, 150ms) ease, color var(--gg-dur-fast, 150ms) ease; } .gg-srch__tagmore-item:hover .gg-srch__tagmore-item-x{ background: var(--gg-red, #ED2938); color: var(--gg-white, #FFFFFF); } /* Leading icon inside each filter cell — small, red-accented */ .gg-srch__cell-ico{ position: absolute; left: 16px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; display: inline-flex; align-items: center; justify-content: center; color: var(--gg-red, #ED2938); font-size: 14px; z-index: 1; pointer-events: none; opacity: .85; } .gg-srch__cell:focus-within .gg-srch__cell-ico{ opacity: 1; } /* Bootstrap-Select inside a bar cell: borderless, full-bleed, square */ /* Override the Bootstrap dropdown CSS-var defaults inside our selectpickers so the inherited blue active state can never leak through. */ .gg-srch__cell .bootstrap-select, .gg-srch__widget .bootstrap-select{ --bs-dropdown-link-active-bg: var(--gg-red-subtle, rgba(237,41,56,.07)); --bs-dropdown-link-active-color: var(--gg-red-deep, #B91C28); --bs-dropdown-link-hover-bg: var(--gg-red-subtle, rgba(237,41,56,.07)); --bs-dropdown-link-hover-color: var(--gg-red-deep, #B91C28); } .gg-srch__cell .bootstrap-select{ width: 100% !important; height: 100%; } .gg-srch__cell .bootstrap-select > .dropdown-toggle{ position: relative; width: 100%; height: 56px; display: flex !important; align-items: center; justify-content: flex-start !important; /* let .filter-option own the row, ::after is absolute */ padding: 0 34px 0 42px; /* left = icon space · right = chevron space */ border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; font-family: var(--gg-font-head, 'Outfit', sans-serif); font-weight: 700; /* premium: bumped weight */ font-size: var(--gg-text-sm, .8125rem); letter-spacing: -.01em; color: var(--gg-gray-900, #111827) !important; text-align: left; outline: 0 !important; white-space: nowrap; transition: color var(--gg-dur-fast, 150ms) ease; } .gg-srch__cell:focus-within .bootstrap-select > .dropdown-toggle{ color: var(--gg-red-deep, #B91C28) !important; } .gg-srch__cell .bootstrap-select > .dropdown-toggle:focus, .gg-srch__cell .bootstrap-select.show > .dropdown-toggle{ background: transparent !important; box-shadow: none !important; } /* Caret — pinned to the right edge, centred vertically, separate from text */ .gg-srch__cell .bootstrap-select > .dropdown-toggle::after{ content: '\F282'; /* bi-chevron-down */ font-family: 'bootstrap-icons'; position: absolute; right: 14px; top: 50%; transform: translateY(-50%); border: 0 !important; margin: 0 !important; font-size: 12px; line-height: 1; color: var(--gg-gray-500, #6B7280); transition: transform var(--gg-dur-fast, 150ms) ease; pointer-events: none; } .gg-srch__cell .bootstrap-select.show > .dropdown-toggle::after{ transform: translateY(-50%) rotate(180deg); } /* .filter-option wraps the text — keep it from claiming the chevron's space */ .gg-srch__cell .bootstrap-select .filter-option{ position: static; display: flex; align-items: center; width: 100%; height: 100%; min-width: 0; padding: 0; overflow: hidden; } .gg-srch__cell .bootstrap-select .filter-option-inner, .gg-srch__cell .bootstrap-select .filter-option-inner-inner{ width: 100%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.2; } .gg-srch__cell .bootstrap-select .dropdown-menu{ border: 0; border-radius: 0; box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 20px 40px -8px rgba(15,23,42,.18); margin-top: 0 !important; padding: 6px; min-width: 220px; overflow: hidden; } /* Premium scrollbar inside the dropdown — slim, brand-tinted, fades in */ .gg-srch__cell .bootstrap-select .dropdown-menu .inner{ scrollbar-width: thin; scrollbar-color: var(--gg-gray-300, #D1D5DB) transparent; } .gg-srch__cell .bootstrap-select .dropdown-menu .inner::-webkit-scrollbar{ width: 6px; } .gg-srch__cell .bootstrap-select .dropdown-menu .inner::-webkit-scrollbar-track{ background: transparent; margin: 4px 0; } .gg-srch__cell .bootstrap-select .dropdown-menu .inner::-webkit-scrollbar-thumb{ background: var(--gg-gray-300, #D1D5DB); border-radius: 999px; border: 1px solid transparent; background-clip: content-box; transition: background var(--gg-dur-fast, 150ms) ease; } .gg-srch__cell .bootstrap-select .dropdown-menu .inner:hover::-webkit-scrollbar-thumb{ background: var(--gg-red, #ED2938); background-clip: content-box; } .gg-srch__cell .bootstrap-select .dropdown-menu li > a{ padding: 9px 12px; border-radius: 8px; font-size: var(--gg-text-sm, .8125rem); color: var(--gg-gray-800, #1F2937); transition: background var(--gg-dur-fast, 150ms) ease; } .gg-srch__cell .bootstrap-select .dropdown-menu li > a:hover, .gg-srch__cell .bootstrap-select .dropdown-menu li.selected > a, .gg-srch__cell .bootstrap-select .dropdown-menu li > a.active, .gg-srch__cell .bootstrap-select .dropdown-menu li > a:active, .gg-srch__cell .bootstrap-select .dropdown-menu .dropdown-item.active, .gg-srch__cell .bootstrap-select .dropdown-menu .dropdown-item:active, .gg-srch__cell .bootstrap-select .dropdown-menu .dropdown-item:focus{ background: var(--gg-red-subtle, rgba(237,41,56,.07)) !important; color: var(--gg-red-deep, #B91C28) !important; } /* Search box — borderless inside the menu so it feels like one surface instead of a box-in-a-box. The bottom hairline acts as the only divider. */ .gg-srch__cell .bootstrap-select .bs-searchbox{ padding: 0; border-bottom: 1px solid var(--gg-gray-100, #F3F4F6); } .gg-srch__cell .bootstrap-select .bs-searchbox input{ width: 100%; border: 0 !important; border-radius: 0 !important; padding: 10px 14px; background: transparent !important; box-shadow: none !important; font-size: var(--gg-text-sm, .8125rem); color: var(--gg-gray-800, #1F2937); outline: 0; } .gg-srch__cell .bootstrap-select .bs-searchbox input::placeholder{ color: var(--gg-gray-400, #9CA3AF); font-weight: 500; } .gg-srch__cell .bootstrap-select .bs-searchbox input:focus{ background: var(--gg-red-subtle, rgba(237,41,56,.04)) !important; border: 0 !important; box-shadow: none !important; outline: 0 !important; } .gg-srch__cell .bootstrap-select .dropdown-header{ padding: 6px 12px; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; color: var(--gg-gray-500, #6B7280); text-transform: uppercase; } .gg-srch__cell .bootstrap-select .bs-actionsbox{ padding: 8px; gap: 6px; display: flex; } .gg-srch__cell .bootstrap-select .bs-actionsbox .btn{ flex: 1; padding: 6px 10px; border-radius: 8px; font-family: var(--gg-font-head, 'Outfit', sans-serif); font-weight: 600; font-size: var(--gg-text-xs, .75rem); border: 1px solid var(--gg-gray-200, #E5E7EB); background: var(--gg-white, #FFFFFF); color: var(--gg-gray-700, #374151); } .gg-srch__cell .bootstrap-select .bs-actionsbox .btn:hover{ border-color: var(--gg-red, #ED2938); color: var(--gg-red, #ED2938); } /* Bar-end buttons — same 56-px height as cells, square corners */ .gg-srch__bar-btn{ display: inline-flex; align-items: center; gap: 8px; padding: 0 22px; min-height: 56px; border: 0; background: transparent; font-family: var(--gg-font-head, 'Outfit', sans-serif); font-weight: 700; font-size: var(--gg-text-sm, .8125rem); letter-spacing: -.01em; color: var(--gg-gray-800, #1F2937); cursor: pointer; transition: background var(--gg-dur-fast, 150ms) ease, color var(--gg-dur-fast, 150ms) ease, box-shadow var(--gg-dur-fast, 150ms) ease; } .gg-srch__bar-btn i{ font-size: 15px; } .gg-srch__bar-btn--reset i{ color: var(--gg-gray-500, #6B7280); } .gg-srch__bar-btn--reset:hover{ background: linear-gradient(180deg, rgba(237,41,56,.06) 0%, rgba(237,41,56,.02) 100%); color: var(--gg-red, #ED2938); } .gg-srch__bar-btn--reset:hover i{ color: var(--gg-red, #ED2938); } .gg-srch__bar-btn--filter, .gg-srch__bar-btn--filter:hover, .gg-srch__bar-btn--filter:focus, .gg-srch__bar-btn--filter:active{ background: linear-gradient(135deg, var(--gg-red, #ED2938) 0%, var(--gg-red-deep, #B91C28) 100%); color: var(--gg-white, #FFFFFF); } .gg-srch__bar-btn--filter{ box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 6px 16px -8px rgba(237,41,56,.55); position: relative; } .gg-srch__bar-btn--filter i{ color: var(--gg-white, #FFFFFF) !important; } .gg-srch__bar-btn--filter:hover{ filter: brightness(1.08); box-shadow: inset 0 1px 0 rgba(255,255,255,.24), 0 10px 22px -6px rgba(237,41,56,.6); } .gg-srch__bar-btn--filter:active{ filter: brightness(.96); } .gg-srch__bar-btn-count{ display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; background: rgba(255,255,255,.24); color: var(--gg-white, #FFFFFF); border-radius: 999px; font-size: 11px; font-weight: 700; } /* ═════════════════════════════════════════════════════════════════════ CATEGORY-CONTEXT STRIP Sits between the sticky bar and the toolbar. Tells the user which slice of the catalog they are looking at and lets them switch categories without re-running a search. ═════════════════════════════════════════════════════════════════════ */ .gg-srch__context{ display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 14px; margin: 0 0 14px; padding: 0; } .gg-srch__context-crumbs{ grid-column: 1 / -1; display: inline-flex; align-items: center; gap: 6px; font-size: var(--gg-text-xs, .75rem); color: var(--gg-gray-500, #6B7280); } .gg-srch__context-crumbs a{ color: var(--gg-gray-700, #374151); text-decoration: none; transition: color var(--gg-dur-fast, 150ms) ease; } .gg-srch__context-crumbs a:hover{ color: var(--gg-red, #ED2938); } .gg-srch__context-crumbs i{ font-size: 10px; color: var(--gg-gray-300, #D1D5DB); } .gg-srch__context-crumbs [aria-current]{ color: var(--gg-gray-900, #111827); font-weight: 600; } .gg-srch__context-title{ margin: 4px 0 0; font-family: var(--gg-font-head, 'Outfit', sans-serif); font-weight: 800; font-size: clamp(1.25rem, 2vw, 1.75rem); line-height: 1.15; letter-spacing: -.01em; color: var(--gg-gray-900, #111827); display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 8px; } .gg-srch__context-title-main{ color: var(--gg-red-deep, #B91C28); } .gg-srch__context-title-sep{ font-size: .75em; font-weight: 500; color: var(--gg-gray-400, #9CA3AF); } .gg-srch__context-title-loc{ color: var(--gg-gray-900, #111827); } .gg-srch__context-actions{ display: inline-flex; align-items: center; gap: 8px; } .gg-srch__context-switch{ display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; background: var(--gg-white, #FFFFFF); border: 1px solid var(--gg-gray-200, #E5E7EB); border-radius: 8px; color: var(--gg-gray-700, #374151); font-family: var(--gg-font-head, 'Outfit', sans-serif); font-weight: 600; font-size: var(--gg-text-xs, .75rem); text-decoration: none; transition: background var(--gg-dur-fast, 150ms) ease, border-color var(--gg-dur-fast, 150ms) ease, color var(--gg-dur-fast, 150ms) ease; } .gg-srch__context-switch:hover{ border-color: var(--gg-red, #ED2938); color: var(--gg-red, #ED2938); } .gg-srch__context-pick{ appearance: none; -webkit-appearance: none; padding: 7px 30px 7px 12px; background: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%236B7280'%3E%3Cpath d='M1.6 5.2a.8.8 0 0 1 1.13 0L8 10.47l5.27-5.27a.8.8 0 1 1 1.13 1.13L8 12.73 1.6 6.33a.8.8 0 0 1 0-1.13z'/%3E%3C/svg%3E") no-repeat right 10px center / 12px var(--gg-white, #FFFFFF); border: 1px solid var(--gg-gray-200, #E5E7EB); border-radius: 8px; font-family: var(--gg-font-head, 'Outfit', sans-serif); font-weight: 600; font-size: var(--gg-text-xs, .75rem); color: var(--gg-gray-800, #1F2937); cursor: pointer; transition: border-color var(--gg-dur-fast, 150ms) ease, color var(--gg-dur-fast, 150ms) ease; } .gg-srch__context-pick:hover, .gg-srch__context-pick:focus{ border-color: var(--gg-red, #ED2938); color: var(--gg-red, #ED2938); outline: 0; } /* ═════════════════════════════════════════════════════════════════════ TOOLBAR (count · sort · view) ═════════════════════════════════════════════════════════════════════ */ .gg-srch__toolbar{ display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 0 0 14px; padding: 0; flex-wrap: wrap; } .gg-srch__count{ display: inline-flex; align-items: baseline; gap: 6px; font-family: var(--gg-font-body, 'Figtree', sans-serif); color: var(--gg-gray-600, #4B5563); font-size: var(--gg-text-sm, .8125rem); } .gg-srch__count-num{ font-family: var(--gg-font-head, 'Outfit', sans-serif); font-size: 1.5rem; font-weight: 800; color: var(--gg-gray-900, #111827); } .gg-srch__count-near strong{ color: var(--gg-red, #ED2938); font-weight: 700; } .gg-srch__tools{ display: inline-flex; align-items: center; gap: 10px; } /* Sort dropdown */ .gg-srch__sort{ position: relative; } .gg-srch__sort-btn{ display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; background: var(--gg-white, #FFFFFF); border: 1px solid var(--gg-gray-200, #E5E7EB); border-radius: 10px; font-family: var(--gg-font-head, 'Outfit', sans-serif); font-weight: 600; font-size: var(--gg-text-sm, .8125rem); color: var(--gg-gray-800, #1F2937); cursor: pointer; transition: background var(--gg-dur-fast, 150ms) ease, border-color var(--gg-dur-fast, 150ms) ease; } .gg-srch__sort-btn:hover{ border-color: var(--gg-red, #ED2938); background: var(--gg-red-subtle, rgba(237,41,56,.07)); } .gg-srch__sort-btn-ico{ color: var(--gg-red, #ED2938); } .gg-srch__sort-btn-chev{ font-size: 12px; transition: transform var(--gg-dur-fast, 150ms) ease; } .gg-srch__sort.is-open .gg-srch__sort-btn-chev{ transform: rotate(180deg); } .gg-srch__sort-menu{ position: absolute; top: calc(100% + 6px); right: 0; min-width: 240px; background: var(--gg-white, #FFFFFF); border-radius: var(--gg-r-lg, 12px); box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 16px 36px -10px rgba(0,0,0,.16); border: 1px solid var(--gg-gray-200, #E5E7EB); opacity: 0; transform: translateY(-6px); pointer-events: none; transition: opacity var(--gg-dur-fast, 150ms) ease, transform var(--gg-dur-fast, 150ms) ease; z-index: var(--gg-z-drop, 100); overflow: hidden; } .gg-srch__sort.is-open .gg-srch__sort-menu{ opacity: 1; transform: translateY(0); pointer-events: auto; } .gg-srch__sort-menu-bar{ display: none; /* shown on mobile */ padding: 12px 16px 4px; border-bottom: 1px solid var(--gg-gray-100, #F3F4F6); } .gg-srch__sort-menu-title{ margin: 0; font-size: var(--gg-text-md, 1rem); font-weight: 700; } .gg-srch__sort-menu-list{ list-style: none; margin: 0; padding: 6px; } .gg-srch__sort-menu-item{ display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 8px; color: var(--gg-gray-800, #1F2937); text-decoration: none; font-size: var(--gg-text-sm, .8125rem); font-weight: 500; transition: background var(--gg-dur-fast, 150ms) ease; } .gg-srch__sort-menu-item:hover{ background: var(--gg-gray-50, #F9FAFB); } .gg-srch__sort-menu-item.is-active{ background: var(--gg-red-subtle, rgba(237,41,56,.07)); color: var(--gg-red-deep, #B91C28); } .gg-srch__sort-menu-ico{ font-size: 14px; color: var(--gg-red, #ED2938); width: 16px; } .gg-srch__sort-menu-check{ margin-left: auto; opacity: 0; color: var(--gg-red, #ED2938); } .gg-srch__sort-menu-item.is-active .gg-srch__sort-menu-check{ opacity: 1; } /* View toggle */ .gg-srch__view{ display: inline-flex; padding: 4px; background: var(--gg-white, #FFFFFF); border: 1px solid var(--gg-gray-200, #E5E7EB); border-radius: 10px; gap: 2px; } .gg-srch__view-btn{ width: 36px; height: 32px; display: inline-flex; align-items: center; justify-content: center; gap: 4px; border: 0; border-radius: 7px; background: transparent; color: var(--gg-gray-500, #6B7280); cursor: pointer; font-size: 14px; transition: background var(--gg-dur-fast, 150ms) ease, color var(--gg-dur-fast, 150ms) ease; } .gg-srch__view-btn:hover{ background: var(--gg-gray-100, #F3F4F6); color: var(--gg-gray-800, #1F2937); } .gg-srch__view-btn.is-active{ background: var(--gg-red, #ED2938); color: var(--gg-white, #FFFFFF); box-shadow: 0 2px 6px -1px rgba(237,41,56,.4); } .gg-srch__view-btn--mob{ display: none; width: auto; padding: 0 12px; font-size: var(--gg-text-xs, .75rem); font-weight: 700; } /* ═════════════════════════════════════════════════════════════════════ BODY — two-column grid (listings + sticky map) ═════════════════════════════════════════════════════════════════════ */ .gg-srch__body{ display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(380px, 1fr); gap: 0; /* zero gap: map column sits flush */ align-items: start; } /* Left column carries its own padding — the .gg-srch wrapper has none */ .gg-srch__results{ position: relative; /* anchor for the loading overlay */ min-width: 0; padding: 18px clamp(20px, 1.6vw, 28px) clamp(40px, 4vw, 64px) clamp(14px, 1.4vw, 22px); } /* ─── Loading overlay — fades over .gg-srch__list while a filter is in-flight ─── */ .gg-srch__overlay{ position: absolute; inset: 0; z-index: 5; display: flex; align-items: flex-start; justify-content: center; padding-top: 25vh; background: linear-gradient(180deg, rgba(255,255,255,.7) 0%, rgba(255,255,255,.92) 100%); backdrop-filter: blur(2px); opacity: 0; pointer-events: none; transition: opacity var(--gg-dur, 250ms) ease; } .gg-srch.is-loading .gg-srch__overlay{ opacity: 1; pointer-events: auto; } .gg-srch.is-loading .gg-srch__list, .gg-srch.is-loading .gg-srch__toolbar, .gg-srch.is-loading .gg-srch__loadmore{ filter: blur(.6px); transition: filter var(--gg-dur, 250ms) ease; } .gg-srch__overlay-spinner{ display: inline-flex; align-items: center; gap: 10px; padding: 12px 22px; background: var(--gg-white, #FFFFFF); border-radius: 999px; font-family: var(--gg-font-head, 'Outfit', sans-serif); font-weight: 700; font-size: var(--gg-text-sm, .8125rem); color: var(--gg-gray-800, #1F2937); box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 16px 36px -8px rgba(237,41,56,.28); } .gg-srch__overlay-spinner i{ color: var(--gg-red, #ED2938); font-size: 16px; animation: gg-srch-spin 700ms linear infinite; } /* Card-shaped skeleton bars layered behind the spinner — they reveal as the overlay fades in so the user feels something is loading. */ .gg-srch__overlay::before{ content: ''; position: absolute; top: clamp(80px, 12vh, 140px); left: clamp(14px, 1.4vw, 22px); right: clamp(20px, 1.6vw, 28px); bottom: 24px; background: linear-gradient(180deg, rgba(243,244,246,.0) 0%, rgba(243,244,246,.95) 30%, rgba(243,244,246,.95) 100%), repeating-linear-gradient(180deg, var(--gg-gray-100, #F3F4F6) 0 120px, transparent 120px 132px); border-radius: var(--gg-r-lg, 12px); opacity: 0; transition: opacity 400ms ease 100ms; } .gg-srch.is-loading .gg-srch__overlay::before{ opacity: .55; animation: gg-srch-shimmer 1.6s ease-in-out infinite; } @keyframes gg-srch-shimmer{ 0%, 100% { opacity: .35; } 50% { opacity: .65; } } .gg-srch__list{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; } .gg-srch__list[data-view-mode="grid"]{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } /* ─── GRID VIEW — rearrange each .gg-srch__row to stack vertically ─── */ .gg-srch__list[data-view-mode="grid"] .gg-srch__row{ grid-template-columns: 1fr; /* image on top, body below */ align-content: start; } .gg-srch__list[data-view-mode="grid"] .gg-srch__row-media{ aspect-ratio: 16 / 9; /* full-width hero */ } .gg-srch__list[data-view-mode="grid"] .gg-srch__row-body{ padding: 14px 16px 14px; gap: 6px; } .gg-srch__list[data-view-mode="grid"] .gg-srch__row-title{ font-size: var(--gg-text-md, 1rem); -webkit-line-clamp: 2; line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; } .gg-srch__list[data-view-mode="grid"] .gg-srch__row-subs{ -webkit-line-clamp: 1; line-clamp: 1; } .gg-srch__list[data-view-mode="grid"] .gg-srch__row-foot{ flex-direction: column; align-items: stretch; gap: 10px; } .gg-srch__list[data-view-mode="grid"] .gg-srch__row-actions{ width: 100%; justify-content: space-between; } .gg-srch__list[data-view-mode="grid"] .gg-srch__row-actions .gg-srch__row-cta{ flex: 1; justify-content: center; } .gg-srch__list[data-view-mode="grid"] .gg-srch__row-actions .gg-srch__row-cta--ghost{ flex: 0 0 auto; /* keep "Quote" compact */ } /* When the map column is hidden / the listings own the full width, show 3 grid cards per row so the grid feels appropriately dense. */ @media (min-width: 1280px){ .gg-srch[data-srch-view-mode="map"] .gg-srch__list[data-view-mode="grid"]{ grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* ═════════════════════════════════════════════════════════════════════ SEARCH-PAGE LISTING ROW Horizontal layout: image-left + content-right. Designed specifically for a scrolling results list — different from the homepage's vertical ".gg-gt__card" (Trending listings) on purpose, even though the two render the same underlying listing data. ═════════════════════════════════════════════════════════════════════ */ .gg-srch__row{ position: relative; display: grid; grid-template-columns: minmax(220px, 280px) minmax(0, 1fr); background: var(--gg-white, #FFFFFF); border: 1px solid var(--gg-gray-200, #E5E7EB); border-radius: var(--gg-r-xl, 16px); overflow: hidden; transition: transform var(--gg-dur, 250ms) var(--gg-ease, cubic-bezier(.16,1,.3,1)), box-shadow var(--gg-dur, 250ms) var(--gg-ease, cubic-bezier(.16,1,.3,1)), border-color var(--gg-dur-fast, 150ms) ease; } .gg-srch__row:hover{ transform: translateY(-2px); border-color: rgba(237,41,56,.20); box-shadow: 0 1px 2px rgba(237,41,56,.04), 0 20px 40px -16px rgba(237,41,56,.20); } /* ─── FEATURED row — premium red-tinted card ─────────────────────────── Matches the vibe of the blog "Insights from the hustle" header card: soft red radial gradients on white, faint red-tinted shadow, and a subtle inline "Featured" pill (no harsh popout badge). The whole card feels lifted out of the list without screaming for attention. */ .gg-srch__row.is-featured{ background: radial-gradient(ellipse at top left, rgba(237,41,56,.09) 0%, transparent 55%), radial-gradient(ellipse at bottom right,rgba(237,41,56,.05) 0%, transparent 55%), var(--gg-white, #FFFFFF); border-color: rgba(237,41,56,.18); box-shadow: 0 1px 2px rgba(237,41,56,.04), 0 4px 14px rgba(237,41,56,.05); } .gg-srch__row.is-featured:hover{ border-color: rgba(237,41,56,.32); box-shadow: 0 1px 2px rgba(237,41,56,.06), 0 20px 40px -16px rgba(237,41,56,.28); } /* Subtle blurred red glow in the top-right corner — same trick as the .gg-blg__head-glow used on the blog header. */ .gg-srch__row.is-featured::after{ content: ''; position: absolute; top: -40px; right: -40px; width: 180px; height: 180px; border-radius: 50%; background: radial-gradient(circle, rgba(237,41,56,.16) 0%, transparent 60%); filter: blur(18px); pointer-events: none; z-index: 0; } /* Featured pill removed — the red-tinted background + corner glow now carries the "premium" signal entirely. No badge means no overlap with the "Open now" pill that lives in .gg-srch__row-head. */ /* Make sure the body content sits above the corner glow */ .gg-srch__row.is-featured > .gg-srch__row-media, .gg-srch__row.is-featured > .gg-srch__row-body{ position: relative; z-index: 1; } .gg-srch__row.is-active{ border-color: var(--gg-red, #ED2938); box-shadow: 0 0 0 3px var(--gg-red-subtle, rgba(237,41,56,.07)), 0 20px 40px -16px rgba(237,41,56,.28); } /* ─── Media (left) ─── */ .gg-srch__row-media{ position: relative; display: block; aspect-ratio: 4 / 3; background: var(--gg-gray-100, #F3F4F6); overflow: hidden; } .gg-srch__row-img{ width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform 700ms var(--gg-ease, cubic-bezier(.16,1,.3,1)); } .gg-srch__row:hover .gg-srch__row-img{ transform: scale(1.04); } .gg-srch__row-noimg{ display: flex; align-items: center; justify-content: center; background: repeating-linear-gradient(45deg, var(--gg-gray-50, #F9FAFB) 0 14px, var(--gg-gray-100, #F3F4F6) 14px 28px); } .gg-srch__row-noimg img{ width: 52px; height: 52px; opacity: .35; filter: grayscale(1); } /* Badge stack (top-left). Stays subtle so it doesn't fight with the row */ .gg-srch__row-badges{ position: absolute; top: 10px; left: 10px; z-index: 2; display: flex; flex-direction: column; gap: 4px; } .gg-srch__row-badge{ display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; border-radius: 6px; background: rgba(255,255,255,.96); backdrop-filter: blur(6px); color: var(--gg-gray-800, #1F2937); font-family: var(--gg-font-head, 'Outfit', sans-serif); font-weight: 700; font-size: 10.5px; letter-spacing: .02em; text-transform: uppercase; box-shadow: 0 2px 6px rgba(0,0,0,.06); } .gg-srch__row-badge i{ font-size: 11px; } .gg-srch__row-badge--emergency{ background: rgba(255,255,255,.96); color: #B45309; } .gg-srch__row-badge--emergency i{ color: #DC2626; } .gg-srch__row-badge--trending { background: var(--gg-red, #ED2938); color: var(--gg-white, #FFFFFF); } .gg-srch__row-badge--trending i{ color: var(--gg-white, #FFFFFF); } .gg-srch__row-badge--sameday { background: rgba(255,255,255,.96); color: #1D4ED8; } .gg-srch__row-badge--sameday i{ color: #2563EB; } .gg-srch__row-badge--fast { background: rgba(255,255,255,.96); color: #047857; } .gg-srch__row-badge--fast i{ color: #059669; } /* Save (bookmark) — bottom-right of image */ .gg-srch__row-save{ position: absolute; bottom: 10px; right: 10px; z-index: 2; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 999px; background: rgba(255,255,255,.96); color: var(--gg-gray-700, #374151); font-size: 16px; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,.12); transition: transform var(--gg-dur-fast, 150ms) ease, background var(--gg-dur-fast, 150ms) ease, color var(--gg-dur-fast, 150ms) ease; } .gg-srch__row-save .gg-srch__row-save-in{ display: none; color: var(--gg-red, #ED2938); } .gg-srch__row-save.is-saved{ background: var(--gg-white, #FFFFFF); } .gg-srch__row-save.is-saved .gg-srch__row-save-in{ display: inline-block; } .gg-srch__row-save.is-saved .gg-srch__row-save-out{ display: none; } .gg-srch__row-save:hover{ transform: scale(1.05); color: var(--gg-red, #ED2938); } /* Distance pill (bottom-left of image) */ .gg-srch__row-distance{ position: absolute; bottom: 10px; left: 10px; z-index: 2; display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px 4px 8px; background: rgba(15,23,42,.78); backdrop-filter: blur(6px); color: var(--gg-white, #FFFFFF); border-radius: 999px; font-family: var(--gg-font-head, 'Outfit', sans-serif); font-weight: 700; font-size: 10.5px; letter-spacing: .02em; } .gg-srch__row-distance i{ font-size: 11px; } /* ─── Body (right) ─── */ .gg-srch__row-body{ display: flex; flex-direction: column; gap: 8px; padding: 18px 20px 16px; min-width: 0; } .gg-srch__row-head{ display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .gg-srch__row-cat{ display: inline-flex; align-items: center; padding: 3px 10px; background: var(--gg-red-subtle, rgba(237,41,56,.07)); color: var(--gg-red-deep, #B91C28); border-radius: 999px; font-family: var(--gg-font-head, 'Outfit', sans-serif); font-weight: 700; font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase; } .gg-srch__row-rating{ display: inline-flex; align-items: center; gap: 4px; font-size: var(--gg-text-sm, .8125rem); color: var(--gg-gray-700, #374151); } .gg-srch__row-rating i{ color: #F59E0B; font-size: 13px; } .gg-srch__row-rating strong{ color: var(--gg-gray-900, #111827); font-weight: 700; } .gg-srch__row-rating-n{ color: var(--gg-gray-400, #9CA3AF); font-size: 11.5px; } .gg-srch__row-open{ display: inline-flex; align-items: center; gap: 5px; margin-left: auto; padding: 2px 9px; background: rgba(22,163,74,.10); color: var(--gg-success, #16A34A); border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: .02em; } .gg-srch__row-pulse{ width: 7px; height: 7px; border-radius: 999px; background: var(--gg-success, #16A34A); box-shadow: 0 0 0 0 rgba(22,163,74,.5); animation: gg-srch-pulse 2s ease-out infinite; } /* Listing title (the listing's H1) */ .gg-srch__row-title{ margin: 2px 0 0; font-family: var(--gg-font-head, 'Outfit', sans-serif); font-weight: 700; font-size: var(--gg-text-lg, 1.125rem); line-height: 1.25; letter-spacing: -.01em; } .gg-srch__row-title a{ color: var(--gg-gray-900, #111827); text-decoration: none; transition: color var(--gg-dur-fast, 150ms) ease; } .gg-srch__row-title a:hover{ color: var(--gg-red, #ED2938); } /* Sub-services preview line */ .gg-srch__row-subs{ margin: 0; color: var(--gg-gray-500, #6B7280); font-size: var(--gg-text-sm, .8125rem); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; } /* Business row — name + verified tick + city */ .gg-srch__row-biz{ display: inline-flex; align-items: center; gap: 6px; color: var(--gg-gray-700, #374151); font-size: var(--gg-text-sm, .8125rem); flex-wrap: wrap; } .gg-srch__row-biz-ico{ font-size: 13px; color: var(--gg-red, #ED2938); } .gg-srch__row-biz-name{ font-weight: 700; color: var(--gg-gray-800, #1F2937); } .gg-srch__row-biz-tick{ color: #2563EB; font-size: 14px; } .gg-srch__row-biz-sep{ width: 3px; height: 3px; border-radius: 999px; background: var(--gg-gray-300, #D1D5DB); margin: 0 4px; } /* Footer: starts-from + actions */ .gg-srch__row-foot{ margin-top: auto; padding-top: 12px; border-top: 1px dashed var(--gg-gray-200, #E5E7EB); display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .gg-srch__row-price{ display: flex; flex-direction: column; gap: 2px; } .gg-srch__row-price-label{ font-family: var(--gg-font-head, 'Outfit', sans-serif); text-transform: uppercase; letter-spacing: .04em; font-size: 10.5px; font-weight: 700; color: var(--gg-gray-500, #6B7280); } .gg-srch__row-price-value{ font-family: var(--gg-font-head, 'Outfit', sans-serif); font-size: 1.25rem; font-weight: 800; color: var(--gg-red-deep, #B91C28); letter-spacing: -.01em; line-height: 1; } .gg-srch__row-actions{ display: inline-flex; gap: 8px; } .gg-srch__row-cta{ display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border-radius: 10px; font-family: var(--gg-font-head, 'Outfit', sans-serif); font-weight: 700; font-size: var(--gg-text-sm, .8125rem); text-decoration: none; transition: background var(--gg-dur-fast, 150ms) ease, color var(--gg-dur-fast, 150ms) ease, border-color var(--gg-dur-fast, 150ms) ease, transform var(--gg-dur-fast, 150ms) ease, box-shadow var(--gg-dur-fast, 150ms) ease; } .gg-srch__row-cta--ghost{ background: var(--gg-white, #FFFFFF); border: 1px solid var(--gg-gray-200, #E5E7EB); color: var(--gg-gray-700, #374151); } .gg-srch__row-cta--ghost:hover{ border-color: var(--gg-red, #ED2938); color: var(--gg-red, #ED2938); } .gg-srch__row-cta--primary{ background: var(--gg-gray-900, #111827); color: var(--gg-white, #FFFFFF); border: 1px solid var(--gg-gray-900, #111827); } .gg-srch__row-cta--primary:hover{ background: var(--gg-red, #ED2938); border-color: var(--gg-red, #ED2938); transform: translateY(-1px); box-shadow: 0 8px 18px -4px rgba(237,41,56,.36); } /* ─── Buttons used by the drawer footer + load-more progress block ─── */ .gg-srch__btn{ display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 16px; border-radius: 10px; border: 0; font-family: var(--gg-font-head, 'Outfit', sans-serif); font-weight: 700; font-size: var(--gg-text-sm, .8125rem); cursor: pointer; text-decoration: none; transition: background var(--gg-dur-fast, 150ms) ease, color var(--gg-dur-fast, 150ms) ease, border-color var(--gg-dur-fast, 150ms) ease, transform var(--gg-dur-fast, 150ms) ease, box-shadow var(--gg-dur-fast, 150ms) ease; } .gg-srch__btn--ghost{ background: var(--gg-white, #FFFFFF); color: var(--gg-gray-700, #374151); border: 1px solid var(--gg-gray-200, #E5E7EB); } .gg-srch__btn--ghost:hover{ border-color: var(--gg-red, #ED2938); color: var(--gg-red, #ED2938); } .gg-srch__btn--primary{ background: linear-gradient(135deg, var(--gg-red, #ED2938), var(--gg-red-deep, #B91C28)); color: var(--gg-white, #FFFFFF); box-shadow: 0 4px 12px -2px rgba(237,41,56,.32); } .gg-srch__btn--primary:hover{ transform: translateY(-1px); box-shadow: 0 8px 18px -4px rgba(237,41,56,.42); } /* ─── Load more (replaces pagination) ─── */ .gg-srch__loadmore{ margin-top: 22px; display: flex; flex-direction: column; align-items: center; gap: 12px; } .gg-srch__loadmore[hidden]{ display: none; } .gg-srch__loadmore-meta{ width: 100%; max-width: 320px; display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: var(--gg-text-xs, .75rem); color: var(--gg-gray-500, #6B7280); } .gg-srch__loadmore-meta strong{ color: var(--gg-gray-900, #111827); font-weight: 700; } .gg-srch__loadmore-track{ width: 100%; height: 4px; background: var(--gg-gray-200, #E5E7EB); border-radius: 999px; overflow: hidden; } .gg-srch__loadmore-fill{ display: block; height: 100%; background: linear-gradient(90deg, var(--gg-red, #ED2938), var(--gg-red-deep, #B91C28)); border-radius: 999px; transition: width var(--gg-dur, 250ms) var(--gg-ease, cubic-bezier(.16,1,.3,1)); } .gg-srch__loadmore-btn{ display: inline-flex; align-items: center; gap: 8px; padding: 12px 26px; background: var(--gg-white, #FFFFFF); border: 1px solid var(--gg-gray-200, #E5E7EB); border-radius: 999px; font-family: var(--gg-font-head, 'Outfit', sans-serif); font-weight: 700; font-size: var(--gg-text-sm, .8125rem); color: var(--gg-gray-800, #1F2937); cursor: pointer; transition: transform var(--gg-dur-fast, 150ms) ease, background var(--gg-dur-fast, 150ms) ease, border-color var(--gg-dur-fast, 150ms) ease, color var(--gg-dur-fast, 150ms) ease, box-shadow var(--gg-dur-fast, 150ms) ease; } .gg-srch__loadmore-btn i{ font-size: 16px; color: var(--gg-red, #ED2938); transition: transform var(--gg-dur, 250ms) ease; } .gg-srch__loadmore-btn:hover{ background: var(--gg-red, #ED2938); border-color: var(--gg-red, #ED2938); color: var(--gg-white, #FFFFFF); transform: translateY(-2px); box-shadow: 0 10px 26px -6px rgba(237,41,56,.32); } .gg-srch__loadmore-btn:hover i{ color: var(--gg-white, #FFFFFF); transform: translateY(2px); } .gg-srch__loadmore-btn.is-loading{ pointer-events: none; opacity: .8; } .gg-srch__loadmore-btn.is-loading i{ animation: gg-srch-spin .9s linear infinite; } @keyframes gg-srch-spin{ to{ transform: rotate(360deg); } } .gg-srch__sentinel{ height: 1px; margin-top: 22px; } /* ═════════════════════════════════════════════════════════════════════ END-OF-RESULTS ALERT — flat full-width rectangle, text-based ═════════════════════════════════════════════════════════════════════ */ .gg-srch__end{ margin: 28px 0 0; padding: 14px 18px; display: flex; align-items: center; gap: 14px; background: var(--gg-red-subtle, rgba(237,41,56,.07)); border-left: 3px solid var(--gg-red, #ED2938); border-radius: 8px; color: var(--gg-gray-800, #1F2937); } .gg-srch__end[hidden]{ display: none; } .gg-srch__end-icon{ flex-shrink: 0; font-size: 20px; color: var(--gg-red, #ED2938); line-height: 1; } .gg-srch__end-text{ flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; line-height: 1.4; } .gg-srch__end-text strong{ font-family: var(--gg-font-head, 'Outfit', sans-serif); font-weight: 700; font-size: var(--gg-text-sm, .8125rem); color: var(--gg-gray-900, #111827); letter-spacing: -.005em; } .gg-srch__end-text span{ font-size: var(--gg-text-xs, .75rem); color: var(--gg-gray-600, #4B5563); } .gg-srch__end-links{ display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; } .gg-srch__end-link{ background: transparent; border: 0; padding: 4px 0; font-family: var(--gg-font-head, 'Outfit', sans-serif); font-weight: 700; font-size: var(--gg-text-xs, .75rem); color: var(--gg-gray-700, #374151); text-decoration: none; cursor: pointer; transition: color var(--gg-dur-fast, 150ms) ease; } .gg-srch__end-link:hover{ color: var(--gg-red, #ED2938); text-decoration: underline; } .gg-srch__end-link--accent{ color: var(--gg-red, #ED2938); } .gg-srch__end-link--accent:hover{ color: var(--gg-red-deep, #B91C28); } .gg-srch__end-sep{ color: var(--gg-gray-300, #D1D5DB); font-weight: 700; } @media (max-width: 600px){ .gg-srch__end{ flex-wrap: wrap; gap: 10px; } .gg-srch__end-links{ width: 100%; padding-left: 32px; } } /* ═════════════════════════════════════════════════════════════════════ MAP — sticky right rail ═════════════════════════════════════════════════════════════════════ */ /* Map column — flush against the right viewport edge, sticky, full-height. `top` = header (72) + sticky-bar (52) so the map starts exactly where the bar ends; `height` fills the remaining viewport so it stays full height as the user scrolls listings on the left. */ .gg-srch__map-wrap{ position: sticky; top: calc(72px + 52px); height: calc(100vh - 72px - 52px); align-self: stretch; } .gg-srch__map{ position: relative; height: 100%; width: 100%; border-radius: 0; /* no rounding — edge-to-edge */ overflow: hidden; background: #F4F6F8; border-left: 1px solid var(--gg-gray-200, #E5E7EB); box-shadow: none; } /* The Google Maps canvas mounts here. Hidden under the loading state until JS adds `.has-map` (called inside initGgSearchMap). */ .gg-srch__map-canvas{ position: absolute; inset: 0; } /* ─── Loading state ─────────────────────────────────────────────────── Default state: shown while the tile library is loading. Hidden as soon as `.has-map` is added to the wrapper. */ .gg-srch__map-loading{ position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #FAFBFC 0%, #F1F3F5 100%); transition: opacity 350ms ease; } .gg-srch__map.has-map .gg-srch__map-loading{ opacity: 0; pointer-events: none; } .gg-srch__map-loading-card{ display: inline-flex; align-items: center; gap: 12px; padding: 14px 22px 14px 16px; background: var(--gg-white, #FFFFFF); border-radius: 999px; box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 16px 36px -10px rgba(237,41,56,.22); } .gg-srch__map-loading-spin{ width: 22px; height: 22px; border-radius: 999px; border: 2px solid rgba(237,41,56,.20); border-top-color: var(--gg-red, #ED2938); border-right-color: var(--gg-red, #ED2938); animation: gg-srch-spin 850ms linear infinite; flex-shrink: 0; } .gg-srch__map-loading-text{ display: inline-flex; flex-direction: column; gap: 2px; font-family: var(--gg-font-head, 'Outfit', sans-serif); } .gg-srch__map-loading-text strong{ color: var(--gg-gray-900, #111827); font-weight: 700; font-size: var(--gg-text-sm, .8125rem); letter-spacing: -.01em; } .gg-srch__map-loading-text small{ color: var(--gg-gray-500, #6B7280); font-size: 11px; font-weight: 500; letter-spacing: .01em; } /* No-key state — overrides the spinner-card when the API key is missing */ .gg-srch__map.is-no-key .gg-srch__map-loading{ display: none; } .gg-srch__map-nokey{ position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 24px; text-align: center; background: linear-gradient(135deg, #FAFBFC 0%, #F1F3F5 100%); } .gg-srch__map-nokey i{ font-size: 28px; color: var(--gg-gray-300, #D1D5DB); } .gg-srch__map-nokey p{ margin: 0; color: var(--gg-gray-500, #6B7280); font-size: var(--gg-text-xs, .75rem); line-height: 1.5; } .gg-srch__map-nokey code{ font-family: ui-monospace, SFMono-Regular, monospace; color: var(--gg-red-deep, #B91C28); font-size: 11px; background: var(--gg-red-subtle, rgba(237,41,56,.07)); padding: 1px 6px; border-radius: 4px; } .gg-srch__pins{ position: absolute; inset: 0; } .gg-srch__pin{ position: absolute; transform: translate(-50%, -100%); display: inline-flex; align-items: center; gap: 4px; padding: 5px 10px 5px 6px; background: var(--gg-white, #FFFFFF); color: var(--gg-gray-900, #111827); border: 0; border-radius: 999px; box-shadow: 0 2px 6px rgba(0,0,0,.18), 0 0 0 1px var(--gg-gray-200, #E5E7EB); font-family: var(--gg-font-head, 'Outfit', sans-serif); font-weight: 700; font-size: 11.5px; cursor: pointer; transition: transform var(--gg-dur-fast, 150ms) var(--gg-ease, cubic-bezier(.16,1,.3,1)), background var(--gg-dur-fast, 150ms) ease, color var(--gg-dur-fast, 150ms) ease, box-shadow var(--gg-dur-fast, 150ms) ease; } .gg-srch__pin::after{ content: ''; position: absolute; left: 50%; bottom: -5px; transform: translateX(-50%) rotate(45deg); width: 8px; height: 8px; background: inherit; border-bottom: 1px solid var(--gg-gray-200, #E5E7EB); border-right: 1px solid var(--gg-gray-200, #E5E7EB); } .gg-srch__pin-dot{ width: 14px; height: 14px; border-radius: 999px; background: var(--gg-red, #ED2938); box-shadow: inset 0 0 0 2px var(--gg-white, #FFFFFF); flex-shrink: 0; } .gg-srch__pin:hover, .gg-srch__pin.is-active{ background: var(--gg-red, #ED2938); color: var(--gg-white, #FFFFFF); transform: translate(-50%, -100%) scale(1.08); box-shadow: 0 8px 18px -4px rgba(237,41,56,.42), 0 0 0 1px var(--gg-red-deep, #B91C28); z-index: 5; } .gg-srch__pin:hover .gg-srch__pin-dot, .gg-srch__pin.is-active .gg-srch__pin-dot{ background: var(--gg-white, #FFFFFF); box-shadow: inset 0 0 0 2px var(--gg-red, #ED2938); } .gg-srch__pin.is-featured .gg-srch__pin-dot{ background: linear-gradient(135deg, #F59E0B, #B45309); } /* Map controls */ .gg-srch__map-ctrls{ position: absolute; top: 14px; right: 14px; display: flex; flex-direction: column; gap: 4px; background: var(--gg-white, #FFFFFF); border-radius: 10px; padding: 4px; box-shadow: 0 2px 8px rgba(0,0,0,.12); } .gg-srch__map-ctrl{ width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 7px; background: transparent; color: var(--gg-gray-700, #374151); cursor: pointer; font-size: 14px; transition: background var(--gg-dur-fast, 150ms) ease; } .gg-srch__map-ctrl:hover{ background: var(--gg-gray-100, #F3F4F6); color: var(--gg-red, #ED2938); } /* "Search this area" pill */ .gg-srch__map-redo{ position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; background: var(--gg-white, #FFFFFF); border: 0; border-radius: 999px; color: var(--gg-red, #ED2938); font-family: var(--gg-font-head, 'Outfit', sans-serif); font-weight: 700; font-size: var(--gg-text-xs, .75rem); cursor: pointer; box-shadow: 0 4px 14px -2px rgba(0,0,0,.18); transition: transform var(--gg-dur-fast, 150ms) ease, box-shadow var(--gg-dur-fast, 150ms) ease; } .gg-srch__map-redo:hover{ transform: translateX(-50%) translateY(-2px); box-shadow: 0 8px 22px -4px rgba(237,41,56,.32); } /* Hover-preview tile */ .gg-srch__map-preview{ position: absolute; left: 14px; bottom: 14px; display: flex; align-items: center; gap: 10px; padding: 8px 12px 8px 8px; background: var(--gg-white, #FFFFFF); border-radius: 12px; box-shadow: 0 8px 22px -4px rgba(0,0,0,.18); min-width: 220px; } .gg-srch__map-preview[hidden]{ display: none; } .gg-srch__map-preview-thumb{ width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; background: var(--gg-gray-100, #F3F4F6); border-radius: 8px; overflow: hidden; } .gg-srch__map-preview-thumb img{ width: 50%; height: 50%; opacity: .5; filter: grayscale(1); } .gg-srch__map-preview-body{ display: flex; flex-direction: column; gap: 2px; min-width: 0; } .gg-srch__map-preview-body strong{ font-size: var(--gg-text-sm, .8125rem); color: var(--gg-gray-900, #111827); } .gg-srch__map-preview-body span{ font-size: var(--gg-text-xs, .75rem); color: var(--gg-gray-500, #6B7280); } /* ═════════════════════════════════════════════════════════════════════ OFF-CANVAS FILTER DRAWER ═════════════════════════════════════════════════════════════════════ */ .gg-srch__aside{ position: fixed; top: 0; right: 0; width: min(420px, 92vw); height: 100vh; background: var(--gg-white, #FFFFFF); box-shadow: -10px 0 40px -10px rgba(0,0,0,.18); z-index: var(--gg-z-modal, 500); display: flex; flex-direction: column; transform: translateX(100%); transition: transform var(--gg-dur-slow, 400ms) var(--gg-ease, cubic-bezier(.16,1,.3,1)); } .gg-srch__aside.is-open{ transform: translateX(0); } .gg-srch__aside-bar{ display: flex; align-items: center; gap: 10px; padding: 16px 18px; border-bottom: 1px solid var(--gg-gray-100, #F3F4F6); } .gg-srch__aside-grip{ display: none; width: 40px; height: 4px; border-radius: 999px; background: var(--gg-gray-300, #D1D5DB); } .gg-srch__aside-bar-title{ margin: 0; font-family: var(--gg-font-head, 'Outfit', sans-serif); font-size: var(--gg-text-md, 1rem); font-weight: 700; flex: 1; } .gg-srch__aside-close{ width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 999px; background: var(--gg-gray-100, #F3F4F6); color: var(--gg-gray-700, #374151); cursor: pointer; transition: background var(--gg-dur-fast, 150ms) ease, color var(--gg-dur-fast, 150ms) ease; } .gg-srch__aside-close:hover{ background: var(--gg-red, #ED2938); color: var(--gg-white, #FFFFFF); } .gg-srch__aside-scroll{ flex: 1; overflow-y: auto; padding: 18px; } .gg-srch__widget{ padding: 16px 0; border-bottom: 1px solid var(--gg-gray-100, #F3F4F6); } .gg-srch__widget:first-child{ padding-top: 0; } .gg-srch__widget:last-child{ border-bottom: 0; padding-bottom: 0; } .gg-srch__widget-title{ margin: 0 0 12px; font-family: var(--gg-font-head, 'Outfit', sans-serif); font-size: var(--gg-text-sm, .8125rem); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--gg-gray-700, #374151); display: flex; align-items: center; justify-content: space-between; } .gg-srch__widget-hint{ font-size: 11px; font-weight: 500; color: var(--gg-gray-400, #9CA3AF); text-transform: none; letter-spacing: 0; } /* ─── Drawer services widget — grouped by trade, filtered by top-bar ─── */ .gg-srch__svc-list{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; } .gg-srch__svc-group{ padding: 12px 12px 10px; background: var(--gg-gray-50, #F9FAFB); border: 1px solid var(--gg-gray-100, #F3F4F6); border-radius: 10px; transition: background var(--gg-dur-fast, 150ms) ease, border-color var(--gg-dur-fast, 150ms) ease; } .gg-srch__svc-group[hidden]{ display: none; } .gg-srch__svc-group.is-active{ background: var(--gg-white, #FFFFFF); border-color: rgba(237,41,56,.16); box-shadow: 0 1px 2px rgba(237,41,56,.04); } .gg-srch__svc-group-title{ margin: 0 0 8px; display: inline-flex; align-items: center; gap: 6px; font-family: var(--gg-font-head, 'Outfit', sans-serif); font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--gg-gray-700, #374151); } .gg-srch__svc-group-title i{ color: var(--gg-red, #ED2938); font-size: 12px; } .gg-srch__svc-chips{ display: flex; flex-wrap: wrap; gap: 5px; } .gg-srch__svc-chip{ display: inline-flex; align-items: center; padding: 6px 11px; background: var(--gg-white, #FFFFFF); border: 1px solid var(--gg-gray-200, #E5E7EB); border-radius: 999px; font-size: var(--gg-text-xs, .75rem); font-weight: 600; color: var(--gg-gray-700, #374151); cursor: pointer; transition: background var(--gg-dur-fast, 150ms) ease, border-color var(--gg-dur-fast, 150ms) ease, color var(--gg-dur-fast, 150ms) ease; } .gg-srch__svc-chip input{ display: none; } .gg-srch__svc-chip:hover{ border-color: var(--gg-red, #ED2938); color: var(--gg-red, #ED2938); } .gg-srch__svc-chip:has(input:checked){ background: var(--gg-red, #ED2938); color: var(--gg-white, #FFFFFF); border-color: var(--gg-red, #ED2938); } .gg-srch__svc-empty{ margin: 6px 0 0; padding: 10px 12px; background: var(--gg-gray-50, #F9FAFB); border: 1px dashed var(--gg-gray-200, #E5E7EB); border-radius: 10px; font-size: var(--gg-text-xs, .75rem); color: var(--gg-gray-500, #6B7280); font-style: italic; } .gg-srch__widget-val{ font-size: 11.5px; font-weight: 600; color: var(--gg-red, #ED2938); text-transform: none; letter-spacing: 0; } /* ─── Bootstrap-Select skin overrides — make the vendor selectpicker sit cleanly inside a GG widget. We only restyle the trigger button and the dropdown shell; the inner list keeps its plugin behaviour. */ .gg-srch__widget .bootstrap-select{ width: 100% !important; } .gg-srch__widget .bootstrap-select > .dropdown-toggle{ position: relative; display: flex !important; align-items: center; justify-content: flex-start !important; width: 100%; padding: 10px 36px 10px 14px; background: var(--gg-white, #FFFFFF) !important; border: 1px solid var(--gg-gray-200, #E5E7EB) !important; border-radius: 10px !important; box-shadow: none !important; font-family: var(--gg-font-body, 'Figtree', sans-serif); font-size: var(--gg-text-sm, .8125rem); color: var(--gg-gray-800, #1F2937) !important; text-align: left; min-height: 42px; white-space: nowrap; } .gg-srch__widget .bootstrap-select > .dropdown-toggle:focus, .gg-srch__widget .bootstrap-select.show > .dropdown-toggle{ border-color: var(--gg-red, #ED2938) !important; box-shadow: 0 0 0 3px var(--gg-red-subtle, rgba(237,41,56,.07)) !important; outline: 0 !important; } .gg-srch__widget .bootstrap-select > .dropdown-toggle::after{ content: '\F282'; /* bi-chevron-down */ font-family: 'bootstrap-icons'; position: absolute; right: 14px; top: 50%; transform: translateY(-50%); border: 0 !important; margin: 0 !important; font-size: 12px; line-height: 1; color: var(--gg-gray-500, #6B7280); transition: transform var(--gg-dur-fast, 150ms) ease; pointer-events: none; } .gg-srch__widget .bootstrap-select.show > .dropdown-toggle::after{ transform: translateY(-50%) rotate(180deg); } .gg-srch__widget .bootstrap-select .filter-option{ position: static; display: flex; align-items: center; width: 100%; height: 100%; min-width: 0; padding: 0; overflow: hidden; } .gg-srch__widget .bootstrap-select .filter-option-inner, .gg-srch__widget .bootstrap-select .filter-option-inner-inner{ width: 100%; min-width: 0; color: var(--gg-gray-800, #1F2937); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.2; } .gg-srch__widget .bootstrap-select .dropdown-menu{ border: 0; border-radius: var(--gg-r-lg, 12px); box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 20px 40px -8px rgba(15,23,42,.18); padding: 6px; overflow: hidden; } .gg-srch__widget .bootstrap-select .dropdown-menu .inner{ scrollbar-width: thin; scrollbar-color: var(--gg-gray-300, #D1D5DB) transparent; } .gg-srch__widget .bootstrap-select .dropdown-menu .inner::-webkit-scrollbar{ width: 6px; } .gg-srch__widget .bootstrap-select .dropdown-menu .inner::-webkit-scrollbar-track{ background: transparent; margin: 4px 0; } .gg-srch__widget .bootstrap-select .dropdown-menu .inner::-webkit-scrollbar-thumb{ background: var(--gg-gray-300, #D1D5DB); border-radius: 999px; border: 1px solid transparent; background-clip: content-box; transition: background var(--gg-dur-fast, 150ms) ease; } .gg-srch__widget .bootstrap-select .dropdown-menu .inner:hover::-webkit-scrollbar-thumb{ background: var(--gg-red, #ED2938); background-clip: content-box; } .gg-srch__widget .bootstrap-select .dropdown-menu li > a{ padding: 9px 12px; border-radius: 8px; font-size: var(--gg-text-sm, .8125rem); color: var(--gg-gray-800, #1F2937); transition: background var(--gg-dur-fast, 150ms) ease; } .gg-srch__widget .bootstrap-select .dropdown-menu li > a:hover, .gg-srch__widget .bootstrap-select .dropdown-menu li.selected > a, .gg-srch__widget .bootstrap-select .dropdown-menu li > a.active, .gg-srch__widget .bootstrap-select .dropdown-menu li > a:active, .gg-srch__widget .bootstrap-select .dropdown-menu .dropdown-item.active, .gg-srch__widget .bootstrap-select .dropdown-menu .dropdown-item:active, .gg-srch__widget .bootstrap-select .dropdown-menu .dropdown-item:focus{ background: var(--gg-red-subtle, rgba(237,41,56,.07)) !important; color: var(--gg-red-deep, #B91C28) !important; } .gg-srch__widget .bootstrap-select .dropdown-menu .dropdown-divider{ background: var(--gg-gray-100, #F3F4F6); margin: 4px 0; } /* Borderless search input — feels like one continuous surface */ .gg-srch__widget .bootstrap-select .bs-searchbox{ padding: 0; border-bottom: 1px solid var(--gg-gray-100, #F3F4F6); } .gg-srch__widget .bootstrap-select .bs-searchbox input{ width: 100%; border: 0 !important; border-radius: 0 !important; padding: 10px 14px; background: transparent !important; box-shadow: none !important; font-size: var(--gg-text-sm, .8125rem); color: var(--gg-gray-800, #1F2937); outline: 0; } .gg-srch__widget .bootstrap-select .bs-searchbox input::placeholder{ color: var(--gg-gray-400, #9CA3AF); font-weight: 500; } .gg-srch__widget .bootstrap-select .bs-searchbox input:focus{ background: var(--gg-red-subtle, rgba(237,41,56,.04)) !important; border: 0 !important; box-shadow: none !important; outline: 0 !important; } .gg-srch__widget .bootstrap-select .bs-actionsbox{ padding: 8px; gap: 6px; display: flex; } .gg-srch__widget .bootstrap-select .bs-actionsbox .btn{ flex: 1; padding: 6px 10px; border-radius: 8px; font-family: var(--gg-font-head, 'Outfit', sans-serif); font-weight: 600; font-size: var(--gg-text-xs, .75rem); border: 1px solid var(--gg-gray-200, #E5E7EB); background: var(--gg-white, #FFFFFF); color: var(--gg-gray-700, #374151); } .gg-srch__widget .bootstrap-select .bs-actionsbox .btn:hover{ border-color: var(--gg-red, #ED2938); color: var(--gg-red, #ED2938); } .gg-srch__widget .bootstrap-select .dropdown-header{ padding: 6px 12px; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; color: var(--gg-gray-500, #6B7280); text-transform: uppercase; } /* Range slider */ .gg-srch__range{ width: 100%; -webkit-appearance: none; appearance: none; height: 6px; background: var(--gg-gray-200, #E5E7EB); border-radius: 999px; outline: none; } .gg-srch__range::-webkit-slider-thumb{ -webkit-appearance: none; appearance: none; width: 20px; height: 20px; border-radius: 999px; background: var(--gg-red, #ED2938); cursor: pointer; box-shadow: 0 0 0 4px rgba(237,41,56,.18); transition: transform var(--gg-dur-fast, 150ms) ease; } .gg-srch__range::-moz-range-thumb{ width: 20px; height: 20px; border: 0; border-radius: 999px; background: var(--gg-red, #ED2938); cursor: pointer; box-shadow: 0 0 0 4px rgba(237,41,56,.18); } .gg-srch__range::-webkit-slider-thumb:hover{ transform: scale(1.1); } .gg-srch__range-marks{ display: flex; justify-content: space-between; margin-top: 6px; font-size: 10.5px; color: var(--gg-gray-400, #9CA3AF); } /* Stars (rating) */ .gg-srch__stars{ display: flex; flex-direction: column; gap: 4px; } .gg-srch__stars-row{ display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; cursor: pointer; transition: background var(--gg-dur-fast, 150ms) ease; } .gg-srch__stars-row:hover{ background: var(--gg-gray-50, #F9FAFB); } .gg-srch__stars-row input{ accent-color: var(--gg-red, #ED2938); } .gg-srch__stars-pill{ display: inline-flex; gap: 1px; color: #F59E0B; font-size: 13px; } .gg-srch__stars-pill .bi-star{ color: var(--gg-gray-300, #D1D5DB); } .gg-srch__stars-label{ font-size: var(--gg-text-xs, .75rem); font-weight: 600; color: var(--gg-gray-700, #374151); } /* Starts-from price bucket */ .gg-srch__price{ display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } .gg-srch__price-pill{ display: inline-flex; align-items: center; justify-content: center; padding: 10px 12px; background: var(--gg-white, #FFFFFF); border: 1px solid var(--gg-gray-200, #E5E7EB); border-radius: 10px; font-family: var(--gg-font-head, 'Outfit', sans-serif); font-weight: 700; font-size: var(--gg-text-sm, .8125rem); color: var(--gg-gray-700, #374151); cursor: pointer; transition: background var(--gg-dur-fast, 150ms) ease, border-color var(--gg-dur-fast, 150ms) ease, color var(--gg-dur-fast, 150ms) ease; } .gg-srch__price-pill input{ display: none; } .gg-srch__price-pill:hover{ border-color: var(--gg-red, #ED2938); color: var(--gg-red, #ED2938); } .gg-srch__price-pill:has(input:checked){ background: var(--gg-red, #ED2938); color: var(--gg-white, #FFFFFF); border-color: var(--gg-red, #ED2938); } /* Switch (iOS-style) */ .gg-srch__switch-list{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; } .gg-srch__switch{ display: flex; align-items: center; gap: 12px; padding: 8px 4px; cursor: pointer; font-size: var(--gg-text-sm, .8125rem); color: var(--gg-gray-800, #1F2937); } .gg-srch__switch input{ display: none; } .gg-srch__switch i{ position: relative; width: 38px; height: 22px; background: var(--gg-gray-200, #E5E7EB); border-radius: 999px; flex-shrink: 0; transition: background var(--gg-dur, 250ms) ease; } .gg-srch__switch i::before{ content: ''; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; background: var(--gg-white, #FFFFFF); border-radius: 999px; box-shadow: 0 1px 3px rgba(0,0,0,.18); transition: transform var(--gg-dur, 250ms) var(--gg-ease, cubic-bezier(.16,1,.3,1)); } .gg-srch__switch:has(input:checked) i{ background: var(--gg-red, #ED2938); } .gg-srch__switch:has(input:checked) i::before{ transform: translateX(16px); } /* Aside footer */ .gg-srch__aside-foot{ display: flex; gap: 10px; padding: 14px 18px; border-top: 1px solid var(--gg-gray-100, #F3F4F6); background: var(--gg-white, #FFFFFF); } .gg-srch__aside-foot .gg-srch__btn{ flex: 1; padding: 12px 16px; } /* Scrim */ .gg-srch__scrim{ position: fixed; inset: 0; background: rgba(15,23,42,.46); backdrop-filter: blur(2px); z-index: calc(var(--gg-z-modal, 500) - 1); opacity: 0; transition: opacity var(--gg-dur, 250ms) ease; pointer-events: none; } .gg-srch__scrim.is-open{ opacity: 1; pointer-events: auto; } /* ═════════════════════════════════════════════════════════════════════ RESPONSIVE ═════════════════════════════════════════════════════════════════════ */ /* Bar wraps gracefully as the viewport shrinks. The tag-box always takes the full width on the first row when wrapping happens so the chips are never cropped. */ @media (max-width: 1280px){ .gg-srch__bar-form{ grid-template-columns: repeat(3, minmax(0, 1fr)); } .gg-srch__cell--tags{ grid-column: 1 / -1; min-height: 56px; } .gg-srch__bar-form > .gg-srch__cell, .gg-srch__bar-form > .gg-srch__bar-btn{ border-top: 1px solid var(--gg-gray-200, #E5E7EB); } .gg-srch__cell--tags{ border-top: 0; } } @media (max-width: 880px){ .gg-srch__bar-form{ grid-template-columns: repeat(2, minmax(0, 1fr)); } .gg-srch__cell--tags{ grid-column: 1 / -1; } } /* Collapse to single column — map becomes a tab */ @media (max-width: 880px){ .gg-srch__body{ grid-template-columns: 1fr; } .gg-srch__map-wrap{ display: none; position: static; height: 60vh; } .gg-srch__map{ height: 100%; min-height: 0; border-left: 0; } .gg-srch__view-btn--mob{ display: inline-flex; } .gg-srch[data-srch-view-mode="map"] .gg-srch__results{ display: none; } .gg-srch[data-srch-view-mode="map"] .gg-srch__map-wrap{ display: block; } } /* Cards stack vertically on phones */ @media (max-width: 700px){ .gg-srch{ padding: 12px 12px 64px; } .gg-srch__bar{ top: 60px; padding: 0; } .gg-srch__bar-form{ grid-template-columns: 1fr 1fr; } .gg-srch__bar-form .gg-srch__bar-btn{ grid-column: 1 / -1; } .gg-srch__cell{ min-height: 48px; } .gg-srch__cell-ico{ left: 12px; font-size: 13px; } .gg-srch__cell .bootstrap-select > .dropdown-toggle{ height: 48px; padding: 0 30px 0 36px; } .gg-srch__bar-btn{ min-height: 48px; padding: 0 14px; justify-content: center; } .gg-srch__context{ grid-template-columns: 1fr; } .gg-srch__context-actions{ flex-wrap: wrap; } .gg-srch__toolbar{ flex-direction: column; align-items: flex-start; } .gg-srch__count-num{ font-size: 1.25rem; } .gg-srch__tools{ width: 100%; justify-content: space-between; } .gg-srch__list, .gg-srch__list[data-view-mode="grid"], .gg-srch__list[data-view-mode="list"]{ display: flex; flex-direction: column; } /* Stack the horizontal row vertically on phones so the image is on top */ .gg-srch__row{ grid-template-columns: 1fr; } .gg-srch__row-media{ aspect-ratio: 16 / 9; } .gg-srch__row-body{ padding: 14px; } .gg-srch__row-foot{ flex-direction: column; align-items: stretch; gap: 10px; } .gg-srch__row-actions{ width: 100%; } .gg-srch__row-actions .gg-srch__row-cta{ flex: 1; justify-content: center; } /* Drawer: bottom-sheet style on phones */ .gg-srch__aside{ top: auto; right: 0; left: 0; bottom: 0; width: 100%; height: 86vh; border-radius: 22px 22px 0 0; transform: translateY(100%); } .gg-srch__aside.is-open{ transform: translateY(0); } .gg-srch__aside-bar{ position: relative; padding-top: 22px; } .gg-srch__aside-grip{ display: block; position: absolute; top: 8px; left: 50%; transform: translateX(-50%); } } /* Tiny phones */ @media (max-width: 420px){ .gg-srch__count{ flex-wrap: wrap; } .gg-srch__view-btn--mob span{ display: none; } .gg-srch__view-btn--mob{ width: 36px; padding: 0; } }