/* ========================================================================== Note: the search bar itself (fields, button, location toggle switch) is no longer styled here — this page now uses the reusable search-bar component (components/search-bar.php), which is fully self-contained with its own scoped styles. ========================================================================== */ .empty { padding: var(--paddingSmall); text-align: center; font-size: var(--fontSmall); color: rgb(var(--textFaint)); background: rgb(var(--background)); border-radius: var(--borderRadiusLarge); } .view-toggle { display: flex; margin-top: var(--paddingSmall); margin-bottom: var(--paddingSmall); border-bottom: var(--borderThickness) solid rgb(var(--textFaint)); } .view-toggle button { flex: 1 1 0; /* both tabs share the full width equally */ position: relative; display: flex; align-items: center; justify-content: center; gap: calc(var(--paddingMinimum) / 2); padding: var(--paddingMinimum) calc(var(--paddingMinimum) * 1.5); font-size: var(--fontSmall); font-weight: var(--fontWeightNormal); color: rgb(var(--textFaint)); background: transparent; border: none; border-bottom: calc(var(--borderThickness) * 2) solid transparent; margin-bottom: calc(var(--borderThickness) * -2); /* sits on top of the container's border-bottom */ cursor: pointer; transition: color var(--transitionTime) ease, border-color var(--transitionTime) ease; } .view-toggle button i{ color: rgb(var(--textFaint)); } .view-toggle button:hover { color: rgb(var(--text)); } .view-toggle button.active i{ color: rgb(var(--highlight2)); } .view-toggle button.active { color: rgb(var(--highlight2)); font-weight: var(--fontWeightBold); border-bottom-color: rgb(var(--highlight2)); } /* ========================================================================== Map view (Leaflet) — discover/index.php ========================================================================== */ .results-map-wrapper { display: none; position: relative; width: 100%; height: 65vh; min-height: 350px; margin-top: var(--paddingSmall); border-radius: var(--borderRadiusLarge); overflow: hidden; } #resultsMap { width: 100%; height: 100%; } /* ========================================================================== Map marker popup — overrides Leaflet's own default popup chrome to match the site's design language instead of the library's plain white box. Scoped to #resultsMap for specificity, since leaflet.css actually loads AFTER this stylesheet in and would otherwise win. ========================================================================== */ #resultsMap .leaflet-popup-content-wrapper { padding: 0; border-radius: var(--borderRadiusLarge); box-shadow: var(--shadowStrong); } #resultsMap .leaflet-popup-content { margin: 0; } #resultsMap .leaflet-popup-tip { background: rgb(var(--background)); box-shadow: none; } #resultsMap .leaflet-popup-close-button { top: calc(var(--paddingMinimum) / 2) !important; right: calc(var(--paddingMinimum) / 2) !important; display: flex !important; align-items: center; justify-content: center; width: 22px !important; height: 22px !important; font-size: var(--fontSmall) !important; font-weight: var(--fontWeightBold); color: rgb(var(--textFaint)) !important; background: rgb(var(--backgroundFaint)); border-radius: 50%; transition: background var(--transitionTime) ease, color var(--transitionTime) ease; } #resultsMap .leaflet-popup-close-button:hover { background: rgb(var(--errorFaint)); color: rgb(var(--error)) !important; } .map-popup-content { box-sizing: border-box; min-width: 180px; padding: var(--paddingSmall); font-size: var(--fontSmall); line-height: 1.4; } .map-popup-content h3 { margin: 0 0 calc(var(--paddingMinimum) / 4) 0; font-size: var(--fontSmall); font-weight: var(--fontWeightBold); color: rgb(var(--text)); } .map-popup-content p { margin: 0 0 var(--paddingMinimum) 0; color: rgb(var(--textFaint)); } #resultsMap .map-popup-view-btn { display: inline-block; padding: calc(var(--paddingMinimum) / 2) var(--paddingMinimum); font-size: var(--fontSmallest); font-weight: var(--fontWeightBold); color: rgb(var(--background)); /* Leaflet's own .leaflet-container a rule is more specific than a plain class selector and was overriding this */ background: rgb(var(--highlight2)); border-radius: var(--borderRadiusPill); text-decoration: none; -webkit-tap-highlight-color: rgba(var(--highlight2), 0.4); /* was Leaflet's default blue flash on mobile tap */ transition: background var(--transitionTime) ease, box-shadow var(--transitionTime) ease, transform var(--transitionTime) ease; } #resultsMap .map-popup-view-btn:hover { background: rgb(var(--highlight2Faint)); box-shadow: var(--shadowSoft); transform: translateY(-2px); } .colored-marker span { display: block; width: 20px; height: 20px; border-radius: 50%; border: 2px solid rgb(var(--background)); box-shadow: var(--shadowStrong); } .map-truncated-note { margin-top: var(--paddingMinimum); font-size: var(--fontSmall); color: rgb(var(--textFaint)); text-align: center; } /* ========================================================================== Results header — count on the left, sort/tag controls on the right. discover/index.php only, not part of the shared search-bar component ========================================================================== */ .results-header { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--paddingSmall); margin-bottom: var(--paddingSmall); } .results-count { margin: 0; font-size: var(--fontMedium); color: rgb(var(--text)); } .results-count strong { font-weight: var(--fontWeightBold); } .results-count-detail { margin-left: calc(var(--paddingMinimum) / 2); font-size: var(--fontSmall); font-weight: var(--fontWeightNormal); color: rgb(var(--textFaint)); } .results-controls-form { display: flex; position: relative; /* lets the tag panel span both dropdowns' combined width, not just its own field */ gap: calc(var(--paddingMinimum) / 2); margin-left: auto; /* keeps the controls pinned right even if they wrap to their own line */ max-width: 320px; } .results-control-field { flex: 1 1 0; min-width: 0; margin-bottom: 0; /* .input-box normally carries its own bottom margin, not needed in this compact inline layout */ } .results-control-field label { margin-bottom: calc(var(--paddingMinimum) / 4); font-size: 0.7rem; } .results-controls-form select { width: 100%; padding: calc(var(--paddingMinimum) / 3) calc(var(--paddingMinimum) / 2); font-size: var(--fontSmallest); } /* ---------- Tag filter: toggle button + checkbox popover ---------- */ .tag-filter-toggle { display: flex; align-items: center; justify-content: space-between; gap: calc(var(--paddingMinimum) / 3); width: 100%; padding: calc(var(--paddingMinimum) / 3) calc(var(--paddingMinimum) / 2); font-size: var(--fontSmallest); font-family: inherit; color: rgb(var(--text)); background: rgb(var(--background)); border: var(--borderThickness) solid rgb(var(--backgroundFaint)); border-radius: var(--borderRadius); cursor: pointer; } .tag-filter-toggle i { font-size: 0.6rem; color: rgb(var(--textFaint)); } .tag-filter-panel { display: none; position: absolute; top: 100%; margin-top: calc(var(--paddingMinimum) / 3); left: 0; right: 0; z-index: 50; max-height: 240px; overflow-y: auto; padding: calc(var(--paddingMinimum) / 2); background: rgb(var(--background)); border-radius: var(--borderRadius); box-shadow: var(--shadowStrong); } .tag-filter-panel.open { display: block; } .tag-filter-option { display: flex; flex-direction: row; align-items: center; justify-content: flex-start; text-align: left; gap: calc(var(--paddingMinimum) / 1.5); padding: calc(var(--paddingMinimum) / 2) 0; font-size: var(--fontSmall); color: rgb(var(--text)); cursor: pointer; } .tag-filter-option + .tag-filter-option { border-top: var(--borderThickness) solid rgb(var(--backgroundFaint)); } .tag-filter-option input[type="checkbox"] { order: -1; /* guarantees the checkbox renders first (left), regardless of source order */ align-self: center; vertical-align: middle; flex: 0 0 auto; /* was inheriting .input-box input's width:100%, stretching it across the whole row */ width: 1.1em; height: 1.1em; margin: 0; padding: 0; border: none; /* was inheriting .input-box input's padded-pill border — let the browser's native checkbox render its own box */ border-radius: 0; background: none; accent-color: rgb(var(--highlight2)); cursor: pointer; } .tag-filter-option span { align-self: center; flex: 1 1 auto; /* Matches the checkbox's own height exactly, so both have equal box height and align-items: center gives them the same visual center line — rather than the text keeping whatever taller line-height it inherited from the page's base styles */ line-height: 1.1em; text-align: left; } .tag-filter-empty { margin: 0; padding: calc(var(--paddingMinimum) / 4) 0; font-size: var(--fontSmallest); color: rgb(var(--textFaint)); } @media only screen and (max-width: 480px) { .results-header { flex-direction: column; align-items: stretch; } .results-controls-form { max-width: 100%; margin-left: 0; } /* These are comfortably compact at desktop pointer-precision, but need a genuinely tappable height on a phone — floors both controls at 44px and bumps the font to 16px (same iOS auto-zoom fix used for text inputs in forms.css) without touching their desktop sizing. */ .results-controls-form select, .tag-filter-toggle { min-height: 44px; padding: calc(var(--paddingMinimum) / 2) var(--paddingMinimum); font-size: 16px; } } /* ========================================================================== Load More button — identical to the existing .load-more-btn used on the attraction page's Reviews section, kept in sync rather than duplicated inline, since this stylesheet isn't loaded there and vice versa. ========================================================================== */ .load-more-btn { display: block; width: 100%; min-height: 44px; /* tokens can shrink quite small on narrow screens — this floor keeps the button genuinely tappable */ margin-top: var(--paddingSmall); padding: var(--paddingMinimum) calc(var(--paddingMinimum) * 1.5); font-size: var(--fontSmall); font-weight: var(--fontWeightBold); color: rgb(var(--text)); background: rgb(var(--background)); border: none; border-radius: var(--borderRadiusPill); cursor: pointer; transition: background var(--transitionTime) ease, box-shadow var(--transitionTime) ease, transform var(--transitionTime) ease; } .load-more-btn:hover { background: rgb(var(--highlight2)); color: rgb(var(--background)); box-shadow: var(--shadowSoft); transform: translateY(-2px); } .load-more-btn:disabled { opacity: 0.6; pointer-events: none; }