/* ═══════════════════════════════════════════════════════════════════════ 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; /* Fill the row height in list view — the grid cell stretches to match the content column. Grid-view + mobile-stacked overrides below re-impose their own aspect-ratio when the media isn't sitting next to a tall content column. */ align-self: stretch; min-height: 200px; 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; } } /* ════════════════════════════════════════════════════════════════════════ MOBILE ACTION BAR — Filter · Sort · Reset The 7-cell desktop bar (.gg-srch__bar) reads well on wide screens but is a wall of dropdowns on a phone. On ≤700px we hide it entirely and swap in a fixed bottom bar (.gg-srch__mact) that sits above the mobile nav (.gg-mnv). Each button proxies its click to the desktop trigger via a tiny inline script, so all wiring (drawer open, reset submit, sort menu toggle) reuses existing handlers — no duplicate JS state. ════════════════════════════════════════════════════════════════════════ */ .gg-srch__mact{ display: none; } /* Desktop: mobile-only elements are invisible (rendered but hidden). The mobile media query below flips them on and reshapes the bar. Kept OUT of the media query so there's no chance of any of them briefly showing during viewport resize. */ .gg-srch__bar-mhead{ display: none; } .gg-srch__bar-btn-lbl--sm{ display: none; } /* The Apply button only exists for mobile — desktop auto-submits on every dropdown change. */ .gg-srch__bar-btn--apply{ display: none !important; } /* Mobile footer wrapper: on desktop it collapses (display: contents) so its children participate directly in the .gg-srch__bar-form grid. Mobile media query below flips it to a fixed-bottom flex row. */ .gg-srch__bar-mfoot{ display: contents; } @media (max-width: 700px){ /* Convert the 7-cell top bar into a full-height e-commerce style sheet: normally off-screen (translateY(-100%)), slides in when `.is-open`. Sheet is a flex column so the header stays sticky at top, the form scrolls in the middle, and the "Advanced filters" pill anchors the bottom. Same DOM, same form, same submit — pure CSS + a JS class. */ .gg-srch__bar{ display: flex !important; flex-direction: column; position: fixed; top: 0; left: 0; right: 0; bottom: 0; height: 100dvh; background: #fff; border-radius: 0; box-shadow: none; transform: translateY(-100%); transition: transform .38s cubic-bezier(.32, .72, 0, 1); z-index: calc(var(--gg-z-modal, 9999) + 12); padding: 0 !important; visibility: hidden; overflow: hidden; } .gg-srch__bar.is-open{ transform: translateY(0); visibility: visible; } /* Backdrop when the bar sheet is open — pseudo on body, zero markup. */ body.is-srch-bar-open::after{ content: ''; position: fixed; inset: 0; background: rgba(15, 23, 42, .5); z-index: calc(var(--gg-z-modal, 9999) + 11); animation: ggSrchFadeIn .25s ease both; } /* Prevent background scroll while the sheet is open. */ body.is-srch-bar-open{ overflow: hidden; } /* Mobile sheet header — grip + title + close X. */ .gg-srch__bar-mhead{ display: flex; align-items: center; gap: 12px; padding: 18px 16px 12px; position: sticky; top: 0; background: #fff; border-bottom: 1px solid var(--gg-gray-100, #F3F4F6); z-index: 2; } .gg-srch__bar-mhead-grip{ position: absolute; top: 8px; left: 50%; transform: translateX(-50%); width: 40px; height: 4px; border-radius: 999px; background: var(--gg-gray-300, #D1D5DB); } .gg-srch__bar-mhead-title{ margin: 0; font-size: 1rem; font-weight: 700; color: var(--gg-gray-900, #111827); flex: 1 1 auto; } .gg-srch__bar-mhead-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); font-size: 16px; cursor: pointer; flex: 0 0 auto; } .gg-srch__bar-mhead-close:hover{ background: var(--gg-gray-200, #E5E7EB); } /* Form is the SCROLL region — flex-column so the footer wrapper (display:flex on mobile) sits reliably at the bottom regardless of chip-row scroll position. `margin-top: auto` on the footer pushes it down when content is short; sticky pins it while scrolling long content. */ .gg-srch__bar-form{ display: flex !important; flex-direction: column !important; grid-template-columns: none !important; gap: 0 !important; padding: 0 !important; background: #fff; flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; } .gg-srch__cell{ flex: 0 0 auto; } .gg-srch__bar-mfoot{ flex: 0 0 auto !important; margin-top: auto !important; } /* Cell = one labeled group. Flex row so icon + label sit together, chip strip drops to a full-width second row (flex-wrap does the line break; chip strip has width:100% below). */ .gg-srch__cell{ display: flex !important; flex-wrap: wrap; align-items: center; gap: 8px 10px; background: #fff; border: 0 !important; border-radius: 0 !important; border-top: 1px solid var(--gg-gray-100, #F3F4F6) !important; padding: 14px 16px 12px !important; min-height: 0 !important; } /* Phones do not need a section-level hover/focus wash. Tapping an option should highlight only that option; the section stays white. */ .gg-srch__cell:not(.gg-srch__bar-btn):hover, .gg-srch__cell:not(.gg-srch__bar-btn):focus-within{ background: #fff !important; box-shadow: none !important; } .gg-srch__cell:first-of-type{ border-top: 0 !important; } /* Un-hide the leading icon — becomes the header glyph next to the label. */ .gg-srch__cell > .gg-srch__cell-ico{ display: inline-flex !important; align-items: center; justify-content: center; position: static !important; inset: auto !important; transform: none !important; width: 32px; height: 32px; flex: 0 0 auto; align-self: center; line-height: 1 !important; font-size: 16px !important; background: var(--gg-red-subtle, rgba(237, 41, 56, .1)); color: var(--gg-red, #ED2938) !important; border-radius: 999px; order: 1; } .gg-srch__cell > .gg-srch__cell-ico::before{ display: block; line-height: 1; vertical-align: 0; } /* Section label as ::before, driven by data-cell. Sits inline with the icon (both at top of the flex row). */ .gg-srch__cell::before{ display: flex; align-items: center; min-height: 32px; font-size: 13px; font-weight: 700; line-height: 1.25; letter-spacing: .01em; color: var(--gg-gray-900, #111827); order: 2; flex: 1 1 auto; } .gg-srch__cell[data-cell="posted"]::before { content: 'Posted by'; } .gg-srch__cell[data-cell="service"]::before { content: 'Service offered'; } .gg-srch__cell[data-cell="property"]::before { content: 'Property type'; } .gg-srch__cell[data-cell="availability"]::before{ content: 'Availability'; } .gg-srch__cell[data-cell="price"]::before { content: 'Pricing'; } .gg-srch__cell[data-cell="rating"]::before { content: 'Minimum rating'; } /* The existing selectpicker becomes the mobile pill control. No second option list is rendered: CSS exposes the plugin's generated menu in place and the original