/*Start Block1*/ body{ background: #fff !important; } .block1 { padding-top: 100px; } .block1-form { width: 100%; background: #fff; border-radius: 8px; border: 1px solid #DDDDDD; padding: 20px; position: sticky; margin-bottom: 30px; top: 100px; } .block1-form:after { content: ""; position: absolute; top: 60px; left: 0; width: 100%; height: 1px; background: #DDDDDD; margin-bottom: 30px; } .block1-form-p { color: #122C5A; font-weight: 700; font-size: 18px; line-height: 22px; margin-bottom: 50px; } .block1-form-head { font-size: 28px; font-weight: 700; line-height: 38px; color: #122C5A; margin: 15px auto; } .block1-form-form-control { font-size: 18px; height: calc(2.25rem + 20px) !important; padding-top: 20px; width: 100%; position: relative; padding-left: 50px; color: #000101; } #state_filter { background: url(../images/arrow-down.svg) no-repeat ; -webkit-appearance: none; background-position: 97% 50%; background-size: 6%; } .form-group.search:before { content: "Where would you like to play?"; position: absolute; font-size: 12px; font-weight: 500; line-height: 16px; text-align: left; left: 52px; color: #000101; z-index: 5; top: 7px; } .form-group.search:after { content: url(../images/global-search.svg); position: absolute; left: 10px; z-index: 5; top: 25%; } .form-group.gameType:before { content: "What type of game?"; position: absolute; font-size: 12px; font-weight: 500; line-height: 16px; text-align: left; left: 52px; color: #000; z-index: 5; top: 7px; } .form-group.gameType:after { content: url(../images/games.svg); position: absolute; left: 14px; z-index: 5; top: 25%; } .block1-form-btn { background: #122C5A; border-radius: 8px; color: #fff; width: 100%; font-size: 16px; font-weight: 500; line-height: 2.5; } /* jQuery UI appends this to and works its own z-index out from the input's ancestors, which lands on single digits. That is under both surfaces the filter panel now uses: the mobile bottom sheet and the card that floats over the map, each at 1050. The calendar opened in the right place and was painted straight over, so the field looked dead on tap. Above both. */ #ui-datepicker-div { z-index: 1100 !important; } #datepicker { padding-top: .375rem ; } #datepicker::placeholder { color: #000101; } .form-group.data:after { content: url(../images/calendar.svg); position: absolute; left: 14px; z-index: 5; top: 25%; } .block3-head { font-size: 28px; font-weight: 700; line-height: 38px; text-align: left; color: #122D5A; margin-bottom: 10px; } .block3-p { font-size: 18px; line-height: 27px; text-align: left; margin-bottom: 35px; } .block3-place-contatiner1 { position: relative; } .block3-place-contatiner1:after { content: ""; position: absolute; bottom: 0; left: 0; background: #0000006b; width: 100%; height: 30%; z-index: 4; } .block3-place-contatiner1 > img{ height: 230px; width: 100%; object-fit: cover; } .block3-place-feature { display: flex; font-size: 11px; font-weight: 600; line-height: 12px; background: #FFC800; color: #000101; border-radius: 4px; padding: 7px 15px 8px 12px; position: absolute; top: 10px; left: 10px; } .block3-place-heart { cursor: pointer; margin-top: 3px; } .block3-place-head { font-size: 20px; font-weight: 700; line-height: 22px; margin: 7px auto; position: absolute; bottom: 15px; color: #fff; left: 15px; } .block3-feature-container { border: 1px solid #DDDDDD; border-radius: 8px; overflow: hidden; padding: 0 0 15px; margin-bottom: 30px; } .block3-view-btn { z-index: 2; /* Ensures "View tee time" is visible and functional */ position: relative; } .block3-view-btn { z-index: 2; position: relative; } .block3-mmr { background: #2BB673; border-radius: 0px 8px; color: #fff; position: absolute; top: 0; right: 0; padding: 10px 15px; display: flex; align-items: center; justify-content: space-between; } .block3-mmr img { margin-right: 10px; } .block3-place-location ,.block3-place-hole{ font-size: 14px; line-height: 17px; margin: 20px auto; } .block3-place-location img,.block3-place-hole img{ margin-right: 7px; } .block3-place-price2 { color: #122C5A; font-weight: 500; font-size: 14px; margin-top: 20px; text-align: center; } .block3-place-price2 span { font-weight: 500; font-size: 1.5em; line-height: 27px; font-family: 'Inter', 'Roboto', sans-serif; } .block3-place-price2 .price-pass-amount { color: #4681EB; font-weight: 700; font-size: 1em; } .price-original-strikethrough { display: block; font-size: 0.85em !important; color: #999; text-decoration: line-through; line-height: 1.2; margin-bottom: 2px; text-align: end; } .course-pass-logo { height: 16px; width: auto; vertical-align: middle; margin-left: 3px; } .block3-view-btn { font-family: 'Inter', 'Roboto', sans-serif; background: #122C5A; border-radius: 8px; color: #fff; width: 100%; line-height: 3; font-weight: 600; margin: 10px auto 0; } .block3-view-btn:hover { color: #fff; } .block3-place-head span { position: absolute; right: 0; color: #646464; font-size: 12px; line-height: 14px; top: 2px; } .block3-place-star { display: flex; align-items: center; position: relative; } .block3-place-star img{ width: 16px !important; height: 16px; margin-right: 2px; } .block3-place-star .price { font-size: 10px; font-weight: 600; line-height: 14px; text-align: left; color: #FFC800; margin-left: 5px; } .block3-place-star .price2 { font-size: 12px; font-weight: 700; line-height: 19px; text-align: left; position: absolute; right: 0; top: 0; color: #122C5A; } .block3-place-time { font-size: 12px; line-height: 14px; color: #000101; margin-top: 8px; } @media (max-width: 1199px) { } @media (max-width: 991px) { .block1-form { width: 50%; } } @media (max-width: 767px) { .block1-form-form-control { font-size: 15px; height: calc(2.25rem + 12px) !important; padding-top: 21px; } .block1-form-head { font-size: 20px; } .block3-place-head { font-size: 16px; } .block3-mmr { padding: 6px 20px; font-size: 14px; } .block3-place-star img { width: 15px !important; height: 15px; margin-right: 2px; } .block3-place-location, .block3-place-hole { font-size: 14px; line-height: 17px; margin: 12px auto; } .block3-place-time { font-size: 10px; margin-top: 5px; } .block3-place-price2 { font-size: 11px; margin-top: 10px; } .block3-view-btn { font-size: 15px; line-height: 2; margin: 5px auto 0; } .block3-place-location img, .block3-place-hole img { margin-right: 7px; width: 12px; } } @media (max-width: 576px) { .block1-form { width: 100%; padding: 15px; } .block1-form-p ,.block1-form:after{ display: none; } .search-filter-form { display: flex; } .search-filter-form .search { width: 60%; margin-right: 5vw; } .search-filter-form .data { width: 40%; } .block1-form-form-control { font-size: 3.5vw; height: calc(2.25rem + 2vw) !important; padding-top: 4.5vw; padding-left: 7vw; } .form-group.search:after { content: ""; background: url(../images/global-search.svg) no-repeat center; background-size: contain; width: 3vw; height: 3vw; top: 50%; transform: translate(-50% , -50%); left: 4vw; } .form-group.data:after { content: ""; background: url(../images/calendar.svg) no-repeat center; background-size: contain; width: 3vw; height: 3vw; top: 50%; transform: translate(-50% , -50%); left: 4vw; } .form-group.search:before { font-size: 2.5vw; left: 7vw; top: 3px; } .block3-mmr { padding: 2vw 5vw; font-size: 3vw; top: 0; right: 0; } .block3-place-feature { font-size: 2vw; padding: 3px 8px 5px 8px; } .block3-mmr img { margin-right: 2vw; width: 4vw; top: -2px; } .block3-place-head { font-size: 3vw; bottom: 1vw; } .block3-place-location, .block3-place-hole { font-size: 3.5vw; line-height: 17px; margin: 3vw auto; } .block3-place-price2 { font-size: 2.5vw; } .block3-view-btn { font-size: 3vw; line-height: 2; position: absolute; bottom: 0; left: 0; margin: 0 15px; width: 80%; } .block3-place-contatiner1 { margin-bottom: 2vw; } .block3-place-star img { width: 12px !important; height: 12px; margin-right: 1px; } .block3-place-location, .block3-place-hole { font-size: 3vw; line-height: 17px; margin: 3vw auto; } .block3-place-location img, .block3-place-hole img { margin-right: 4px; width: 12px; } #state_filter { background-position: 95% 50%; } } /* --------------------------------------------------------------------------- Course card Scoped to .course-card (used only by livewire/courses-filter.blade.php). Three columns — photo, detail, price rail — matching the app's own card, so a golfer comparing on the phone and on the desktop reads the same object. The card was a stacked banner: a full-width photo above the text, which made each row ~270px tall and put roughly two courses on a screen. Comparing is the whole job of a listing, so the photo became a fixed-width thumbnail and the price/CTA moved into a ruled rail on the right. Grid rather than the old Bootstrap row: the middle column is the only one that should absorb slack, and `1fr` says exactly that. The rail's width is fixed so every CTA on the page lines up in one vertical run — under the old percentage columns it stepped in and out with the address length. --------------------------------------------------------------------------- */ .course-card { position: relative; display: grid; grid-template-columns: 232px 1fr 232px; align-items: stretch; margin-bottom: 16px; background: #FFF; border: 1px solid #DFDFDF; border-radius: 12px; /* Deliberately NOT `overflow: hidden`, which is the obvious way to clip the photo to the card's radius: it would also clip the add-on panel, which opens upward out of the rail. The media clips itself instead. */ transition: box-shadow .18s ease, border-color .18s ease; } .course-card:hover { border-color: #C7D4EC; box-shadow: 0 6px 16px rgba(22, 31, 66, .10); } /* The whole card is clickable, but only the name is the link — one anchor stretched over the card rather than a wrapper around everything, so the gallery's dots and the CTA can be real controls instead of nested interactive elements inside an . */ .course-card-link { color: inherit; text-decoration: none; } .course-card-link:after { content: ""; position: absolute; inset: 0; z-index: 1; } .course-card-link:hover { color: #161F42; text-decoration: none; } /* Media ----- The photo must not have a say in how tall the card is. Left in flow at `height: 100%` it had none to inherit — a grid item's height is what the row resolves to, and the row was resolving from this very image — so the browser fell back to the file's own aspect ratio and a portrait photo made the card 300px tall, stretching the rail into empty space beside it. Out of flow it contributes nothing and simply fills whatever the text columns settle on. */ .course-card-media { position: relative; /* Above the stretched link so a swipe or a dot works on the photo. */ z-index: 2; min-height: 190px; background: #F1F3F7; /* Clips the photo to the card's own radius, since the card can't. */ border-radius: 11px 0 0 11px; overflow: hidden; } /* One frame per view, snapped, scrolled horizontally — the app's gallery, with the browser doing the paging instead of a carousel library. */ .course-card-track { position: absolute; inset: 0; display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; /* Firefox and IE; the WebKit bar is hidden below. */ scrollbar-width: none; } .course-card-track::-webkit-scrollbar { display: none; } .course-card-track img { flex: 0 0 100%; width: 100%; height: 100%; /* Course photography is every aspect ratio there is. Cover crops to the column instead of letterboxing, which is what made the old banner rows different heights. */ object-fit: cover; scroll-snap-align: start; } /* Revealed on hover so the photo is not permanently overlaid with chrome; on touch they never appear, because swiping already works there. */ .course-card-arrow { position: absolute; top: 50%; z-index: 3; display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; margin-top: -13px; padding: 0; background: rgba(255, 255, 255, .92); border: 0; border-radius: 50%; box-shadow: 0 1px 5px rgba(0, 0, 0, .28); color: #161F42; cursor: pointer; opacity: 0; transition: opacity .15s ease; } .course-card-arrow svg { width: 14px; height: 14px; } .course-card-arrow.is-prev { left: 8px; } .course-card-arrow.is-next { right: 8px; } .course-card:hover .course-card-arrow, .course-card-arrow:focus-visible { opacity: 1; } @media (hover: none) { .course-card-arrow { display: none; } } .course-card-dots { position: absolute; left: 0; right: 0; bottom: 10px; z-index: 3; display: flex; justify-content: center; gap: 5px; } .course-card-dots button { width: 6px; height: 6px; padding: 0; background: rgba(255, 255, 255, .55); border: 0; border-radius: 50%; /* Photos are unpredictable, so the dots carry their own contrast rather than relying on whatever is behind them. */ box-shadow: 0 0 3px rgba(0, 0, 0, .45); cursor: pointer; transition: width .18s ease, background .18s ease; } .course-card-dots button.is-on { width: 16px; background: #FFF; border-radius: 3px; } /* Badges stack in one corner and wrap as a set. */ .course-card-badges { position: absolute; top: 10px; left: 10px; z-index: 3; display: flex; flex-wrap: wrap; gap: 6px; max-width: calc(100% - 20px); } /* Body ---- */ .course-card-body { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 16px 20px; min-width: 0; } .course-card-rating { display: flex; align-items: center; gap: 5px; font-size: 13px; line-height: 16px; color: #161F42; } .course-card-rating img { width: 16px; height: 16px; } .course-card-rating strong { font-weight: 600; } /* Was a 10px yellow number, indistinguishable from the stars themselves. */ .course-card-reviews { font-weight: 500; color: #6B7280; } /* Descendant-scoped on purpose: `courses.css` loads after this file and sets a bare `.course-card-header` at 20px, so a single-class rule here loses on source order. That same rule also carries a `z-index: 5`, left from when the name sat on the photo and had to clear its dark wash. It reads as inert now — the heading is `position: static` — but this heading is a FLEX ITEM, and a flex item honours `z-index` as though it were positioned. So it was quietly a stacking context at level 5, carrying the stretched link's overlay up with it and painting it over the add-on strip, which then could not be hovered. Reset here rather than in `courses.css`, which is shared and, unlike this file, is loaded without a cache-busting `filemtime` query. */ .course-card .course-card-header { z-index: auto; margin: 0; font-size: 17px; font-weight: 600; line-height: 24px; color: #161F42; } /* Icon and text sit on one baseline; wrapped text indents under itself instead of running back under the icon. */ .course-card-meta { display: flex; align-items: flex-start; gap: 7px; min-width: 0; font-size: 13px; line-height: 18px; color: #4A5568; } /* location.svg is 12px wide and games.svg 16px, so the labels started at different x positions. Fix a common icon box and centre each glyph in it. */ .course-card-meta img { flex: 0 0 16px; width: 16px; height: 16px; margin-top: 1px; object-fit: contain; } /* Long addresses are capped at two lines so cards keep a consistent height. */ .course-card-meta span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* Venue and minimum-players share a line where there is room, and wrap to two when there isn't — they are both one short phrase, and giving each its own row spent a third of the card's height on eight words. */ .course-card-meta-row { display: flex; flex-wrap: wrap; gap: 4px 20px; } /* Was overlaid on the photo, where it competed with the badges and sat over whatever the image happened to have in that corner. */ .course-card-credits { display: inline-flex; align-items: center; gap: 5px; margin-top: auto; padding: 4px 10px; background: #FEF6E7; border-radius: 999px; font-size: 12px; font-weight: 500; line-height: 16px; color: #8A5A00; } /* Price rail ---------- */ .course-card-rail { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; padding: 16px 20px; /* One hairline, not a filled panel: the rail is a column of the same card, and shading it read as two cards stuck together. */ border-left: 1px solid #EDEFF3; } .course-card-venue { padding: 3px 10px; background: #EEF3FD; border-radius: 6px; font-size: 11px; font-weight: 500; line-height: 16px; color: #3A5A9B; } /* The venue chip sits at the top of the rail and everything else is a group at the bottom, so the CTA lands on the same line on every card. Whichever element opens that bottom group takes the `auto` margin — the price usually, the strip or the button on a card that has no price to show. Pinning it to the price alone left "View details" floating under the chip on unpriced courses, which is most of a directory market like Vietnam. The chip is always rendered, so one of these three always matches. */ .course-card-price, .course-card-venue + .course-card-addons, .course-card-venue + .course-card-cta { margin-top: auto; } /* The one blue thing in the rail, so price is what the eye lands on. */ .course-card-price { font-size: 22px; font-weight: 700; line-height: 28px; color: #4681EB; text-align: right; white-space: nowrap; } .course-card-price small { display: block; font-size: 11px; font-weight: 500; line-height: 14px; color: #6B7280; } /* Add-on strip ------------ */ .course-card-addons { position: relative; /* Clears the stretched link and the CTA so the panel is not painted under either of them. */ z-index: 4; display: flex; align-items: center; gap: 6px; cursor: help; } /* Hover panel ----------- The app's, rebuilt: navy, bulleted, one line per add-on reading " ". CSS-only — twenty cards on a page, and each one holding a JS popover instance to show four lines of text it already has is a poor trade. */ .course-card-addon-tip { position: absolute; right: 0; bottom: calc(100% + 8px); z-index: 5; margin: 0; padding: 10px 14px 10px 26px; width: max-content; max-width: 220px; background: #161F42; border-radius: 10px; box-shadow: 0 6px 18px rgba(22, 31, 66, .22); list-style: disc; font-size: 12px; font-weight: 500; line-height: 18px; color: #FFF; text-align: left; /* Hidden by visibility rather than `display`, so the fade has something to animate and the list keeps its place for screen readers. */ visibility: hidden; opacity: 0; transition: opacity .14s ease, visibility .14s ease; } /* The pointer, drawn on the panel rather than added to the markup. */ .course-card-addon-tip:after { content: ""; position: absolute; right: 18px; top: 100%; border: 6px solid transparent; border-top-color: #161F42; } /* `is-open` is the tap path. A touch device fires no hover, so on a phone the panel would never have opened — and the strip alone is four unlabelled glyphs. Alpine toggles the class; hover still works untouched on a mouse. */ .course-card-addons:hover .course-card-addon-tip, .course-card-addons:focus .course-card-addon-tip, .course-card-addons:focus-within .course-card-addon-tip, .course-card-addons.is-open .course-card-addon-tip { visibility: visible; opacity: 1; } @media (prefers-reduced-motion: reduce) { .course-card-addon-tip { transition: none; } } .course-card-addon { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; } .course-card-addon img { width: 18px; height: 18px; object-fit: contain; /* The icons ship near-black; the strip is secondary to the price. */ opacity: .55; } .course-card-addon.is-included img { opacity: 1; } /* A tick, not a colour swap: "included in the price" is worth its own mark, and tinting the glyph alone would be invisible to anyone who cannot pick the two greys apart. */ .course-card-addon.is-included:after { content: ""; position: absolute; right: -1px; bottom: -1px; width: 10px; height: 10px; background: #16A34A url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.2 2.2 4.8-4.8' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 8px 8px no-repeat; border: 1.5px solid #FFF; border-radius: 50%; box-sizing: content-box; } .course-card-addon-more { font-size: 12px; font-weight: 500; line-height: 16px; color: #6B7280; } /* Was full-width with line-height 3, which made it the loudest thing on the card. Trimmed a little so the venue leads, without losing tap target. */ .course-card-cta { /* Its own layer, above the stretched link, so it stays a real anchor. */ position: relative; z-index: 2; width: 100%; padding: 0 16px; background: #161F42; border-radius: 8px; line-height: 2.6; font-size: 14px; font-weight: 600; color: #FFF; white-space: nowrap; } .course-card:hover .course-card-cta, .course-card-cta:hover, .course-card-cta:focus { background: #0F1631; color: #FFF; text-decoration: none; } /* Tablet: the rail is the first thing to go — a 232px column of price and CTA costs the address the room it needs to stay on two lines. It becomes a row under the detail column, still ruled off, still with the CTA on the right. */ @media (max-width: 991px) { .course-card { grid-template-columns: 200px 1fr; } .course-card-rail { grid-column: 2; flex-direction: row; align-items: center; flex-wrap: wrap; gap: 8px 12px; padding: 0 20px 16px; border-left: 0; } /* `margin-top: auto` pushed these apart down a column; along a row it would push them apart horizontally, which is not the same instruction. */ .course-card-price, .course-card-venue, .course-card-venue + .course-card-addons, .course-card-venue + .course-card-cta { margin-top: 0; } .course-card-cta { width: auto; margin-left: auto; } .course-card-credits { margin-top: 4px; } } /* Phone: back to a stack. Below ~600px a side-by-side photo is too narrow to show a golf course and too wide to leave the name a readable measure. */ @media (max-width: 575px) { .course-card { grid-template-columns: 1fr; } /* Now the top of the card rather than its left edge, so the corners it needs to round have changed. */ .course-card-media { min-height: 0; aspect-ratio: 16 / 9; border-radius: 11px 11px 0 0; } .course-card-rail { grid-column: 1; align-items: center; /* The strip qualifies the price — it says what that number covers — so it has to sit with it. At the rail's default 8px row gap, plus the strip centring itself against a 40px button, the two drifted far enough apart to read as unrelated. */ row-gap: 0; padding: 0 16px 16px; } .course-card-body { padding: 14px 16px 10px; } .course-card .course-card-header { font-size: 16px; line-height: 22px; } /* Onto the photo's top corner, where the app puts it. In the rail's row it sat inline ahead of the price — a grey chip and a blue number reading as one phrase, "Course VND 2,500,000". It is a label for the card, not for the price. */ .course-card-venue { position: absolute; top: 10px; right: 10px; z-index: 3; background: rgba(255, 255, 255, .92); box-shadow: 0 1px 4px rgba(0, 0, 0, .18); } /* Price left, button right, on one line. `text-align: right` is for the desktop rail, where the price is the column's own right edge; here it pushed "From" away from the number it belongs to. */ /* `text-align: right` is for the desktop rail, where the price is the column's own right edge; here it pushed "From" away from the number it belongs to. */ .course-card-price { font-size: 20px; text-align: left; } /* The button always finishes the card's last line — beside the strip where there is one, beside the price where there isn't. Giving the price a full row unconditionally pushed the button down on its own, so a course with no add-ons ended in a band of white space. The full row is therefore conditional on a strip actually being there to occupy the next line. */ .course-card-rail:has(.course-card-addons) .course-card-price { width: 100%; } /* Under the price, where the app puts it — the strip reads as a footnote to the number it qualifies, so it has to follow it. Sharing the bottom line with the button rather than taking one of its own, which left the button stranded on the row above with white space under it. This is the screen where the strip matters most: it is the only place on a phone that says what the price covers before you open the course. */ .course-card-addons { order: 1; justify-content: flex-start; /* Absorbs the icon boxes' own 3px of slack so the strip reads as the price's second line rather than a separate item. */ margin-top: -3px; } .course-card-cta { order: 2; width: auto; margin-left: auto; } .course-card-addon-tip { right: auto; left: 0; } .course-card-addon-tip:after { right: auto; left: 18px; } /* Count and sort take the full row so they land on opposite edges, rather than huddling together against the right margin under the heading. */ .course-listing-controls { width: 100%; margin-left: 0; justify-content: space-between; } } /* Course filter panel ------------------- Tokens taken from the Figma revamp so the listing sidebar matches the design system the app already uses: 12px radii, #DFDFDF hairlines, a 45px control height, and #161F42 for the one filled action. Every control here is applied by the single Search button at the foot — nothing takes effect on change. */ .block1-form { box-sizing: border-box; padding: 20px; background: #FFF; border: 1px solid #DFDFDF; box-shadow: 0 4px 6px rgba(0, 0, 0, .02); border-radius: 12px; } /* The old layout drew its header rule with an absolutely positioned `.block1-form:after` pinned at `top: 60px`. That only lined up with the original heading and padding; against this card it lands across the first field. Spacing here is done with margins, so the pseudo-element goes. */ .block1-form:after { display: none; } .block1-form .block1-form-p { margin: 0 0 14px; font-size: 15px; font-weight: 600; line-height: 1.5; letter-spacing: .01em; color: #1A1A1A; } .course-panel { display: flex; flex-direction: column; gap: 14px; } /* The label lives inside the control rather than above it: one bordered box per field instead of a label line plus a box, which is a whole row of height saved twice over, and the question stays visible once an answer is chosen. */ .course-panel-field { box-sizing: border-box; display: flex; flex-direction: column; gap: 2px; padding: 9px 14px; background: #FFF; border: 1px solid #DFDFDF; border-radius: 12px; } .course-panel-field:focus-within { border-color: #161F42; } .course-panel-label { margin: 0; font-size: 12px; font-weight: 500; line-height: 16px; color: #8A8A8A; } /* Borderless inside its own box — the field is the control's outline. */ .course-panel-input { box-sizing: border-box; width: 100%; height: 24px; padding: 0; margin: 0; background: transparent; border: 0; font-size: 14px; font-weight: 500; line-height: 22px; color: #1A1A1A; appearance: none; } .course-panel-input::placeholder { color: #999; } .course-panel-input:focus { outline: none; } /* Chevron for the state select, drawn rather than shipped as an asset. */ select.course-panel-input { padding-right: 22px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%23363636' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right center; } /* Sections are separated by the same hairline as the card border. */ .course-panel-section { display: flex; flex-direction: column; gap: 10px; padding-top: 16px; border-top: 1px solid #DFDFDF; } .course-panel-heading { margin: 0; font-size: 15px; font-weight: 600; line-height: 1.4; letter-spacing: .01em; color: #1A1A1A; } /* Heading with its ⓘ. The bubble is positioned against this row so it can sit above the icon without being clipped by the section. */ .course-panel-heading-row { display: flex; align-items: center; gap: 8px; } .course-info { position: relative; display: inline-flex; align-items: center; padding: 0; border: 0; background: none; color: #999; line-height: 0; cursor: pointer; } .course-info:hover, .course-info:focus-visible { color: #161F42; } .course-info-bubble { position: absolute; bottom: calc(100% + 10px); left: -10px; z-index: 20; display: flex; flex-direction: column; gap: 6px; width: 260px; padding: 12px 14px; background: #3A3F87; border-radius: 10px; box-shadow: 0 8px 20px rgba(0, 0, 0, .18); font-size: 12px; font-weight: 400; line-height: 17px; color: #FFF; text-align: left; white-space: normal; cursor: default; } /* The little arrow pointing back down at the icon. */ .course-info-bubble:after { content: ""; position: absolute; top: 100%; left: 14px; border: 6px solid transparent; border-top-color: #3A3F87; } .course-info-line { display: block; padding-left: 10px; text-indent: -10px; } .course-info-line:before { content: "\2022"; padding-right: 6px; } .course-info-line b { font-weight: 700; } /* Until Alpine boots, x-show elements would flash visible. */ [x-cloak] { display: none !important; } /* Add-ons: name on the left, a Required/Optional pair on the right. Clicking the active half clears it, so the row can return to "either". */ .course-addon { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .course-addon-name { font-size: 13px; font-weight: 500; line-height: 21px; color: #1A1A1A; } .course-addon-segment { display: flex; gap: 8px; } .course-addon-option { min-width: 76px; height: 34px; padding: 7px 12px; background: #FFF; border: 1px solid #DFDFDF; border-radius: 9px; font-size: 13px; font-weight: 500; line-height: 20px; color: #363636; text-align: center; white-space: nowrap; cursor: pointer; transition: border-color .12s, background-color .12s, color .12s; } .course-addon-option:hover { border-color: #B9BECD; } .course-addon-option.is-selected { border-color: #161F42; background: #F0F3FA; color: #161F42; font-weight: 600; } /* Two tags per row, matching the design. An odd tag left on the last row stretches across rather than sitting in a half-empty row. */ .course-panel-chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .course-chip { margin: 0; cursor: pointer; } .course-chip:last-child:nth-child(odd) { grid-column: 1 / -1; } /* The checkbox carries the state; the label is the target. Kept a real input so the control stays keyboard reachable. */ .course-chip input { position: absolute; width: 0; height: 0; opacity: 0; } .course-chip span { box-sizing: border-box; display: flex; align-items: center; justify-content: center; height: 36px; padding: 8px 12px; background: #FFF; border: 1px solid #DFDFDF; border-radius: 9px; font-size: 13px; font-weight: 500; line-height: 20px; color: #1A1A1A; text-align: center; transition: border-color .12s, background-color .12s; } .course-chip:hover span { border-color: #B9BECD; } .course-chip input:checked + span { border-color: #161F42; background: #F0F3FA; color: #161F42; font-weight: 600; } .course-chip input:focus-visible + span { outline: 2px solid #161F42; outline-offset: 2px; } .course-panel-actions { display: flex; align-items: center; gap: 12px; margin-top: 6px; } /* Search is the only filled control on the page; Clear all stays quiet because it undoes work rather than doing any. */ .course-panel-actions .block1-form-btn { flex: 1; height: 44px; margin: 0; padding: 12px; background: #161F42; border: 0; border-radius: 12px; font-size: 15px; font-weight: 700; line-height: 22px; letter-spacing: .01em; color: #F0F6FE; } .course-panel-clear { padding: 0; border: 0; background: none; font-size: 14px; font-weight: 500; color: #999; white-space: nowrap; cursor: pointer; } .course-panel-clear:hover { color: #161F42; } /* Listing header: title left, count and sort right, wrapping to their own line on narrow screens rather than squeezing the heading. */ .course-listing-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px; } .course-listing-controls { display: flex; align-items: center; gap: 12px; margin-left: auto; } .course-listing-count { font-size: 14px; font-weight: 500; color: #666; white-space: nowrap; } .course-listing-sort { width: auto; height: 40px; padding: 8px 34px 8px 12px; background: #FFF; border: 1px solid #DFDFDF; border-radius: 12px; font-size: 14px; font-weight: 500; color: #1A1A1A; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%23363636' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; } /* Keep the panel on screen ------------------------ The filters are only useful while you're looking at results, and the results column is far longer than this one. Sticking the panel to the viewport means it never runs past the fold and stays reachable however far you scroll; if it is ever taller than the screen it scrolls within itself rather than pushing the page down. Desktop only — on mobile it stacks above the list, where pinning it would eat the screen. */ @media (min-width: 992px) { .block1-form { position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #DFDFDF transparent; } .block1-form::-webkit-scrollbar { width: 6px; } .block1-form::-webkit-scrollbar-thumb { background: #DFDFDF; border-radius: 3px; } } /* Public holidays in the date picker --------------------------------- Same language as the course page's tee-time calendar: the day turns orange and the month's holidays are named underneath. A public holiday prices and fills like a weekend, so golfers plan around it. */ /* Shown under the date field when the chosen date is a public holiday. A hint, not a warning: the field itself carries the answer, this only says why the day was orange. Muted and small enough to skip, keeping the orange dot so it ties back to the calendar. */ .course-panel-note { display: flex; align-items: flex-start; gap: 6px; margin: -2px 2px 0; font-size: 11px; line-height: 1.4; color: #8A8A8A; } .course-panel-note .date-cal-foot-o { width: 5px; height: 5px; margin-top: 5px; } /* Appended to the calendar popup by the picker, so it shows and hides with it. */ .ui-datepicker .date-cal-foot { padding: 10px 12px 12px; border-top: 1px solid #EEE; background: #FFF; } .date-cal-foot-t { margin-bottom: 7px; font-size: 13px; font-weight: 600; color: #000101; } /* Aligned to the first line, not the middle of the block: a long holiday name wraps in this popup, and a centred dot then floats between the two lines. */ .date-cal-foot-i { display: flex; align-items: flex-start; gap: 8px; margin-top: 4px; font-size: 12px; line-height: 1.45; color: #000101; } .date-cal-foot-o { flex: 0 0 auto; width: 6px; height: 6px; margin-top: 6px; border-radius: 50%; background: #FE8527; } /* jQuery UI puts the class on the ; the anchor inside carries the colour. */ .ui-datepicker td.date-cal-ph > a, .ui-datepicker td.date-cal-ph > span { color: #FE8527; font-weight: 600; } /* Date picker ----------- jQuery UI ships a gradient-and-bevel theme from another era. These rules give it the same face as the tee-time calendar on the course page — same 12px card, same #DFDFDF hairline, same blue for today and the chosen day, same orange for a public holiday — so a golfer meets one calendar across the site rather than two. Values copied from `.date-cal*` in games-filter.blade.php; if that calendar is ever lifted into a shared component, these follow it. Scoped to this stylesheet, which only the listing page loads. */ .ui-datepicker { width: 324px; padding: 16px 18px 18px; box-sizing: border-box; background: #FFF; border: 1px solid #DFDFDF; border-radius: 12px; box-shadow: 0 12px 28px rgba(0, 0, 0, .1); font-family: inherit; } .ui-datepicker .ui-datepicker-header { position: relative; padding: 0; margin-bottom: 12px; background: none; border: 0; } .ui-datepicker .ui-datepicker-title { margin: 0 32px; line-height: 28px; font-size: 15px; font-weight: 600; color: #000101; text-align: center; } /* Chevrons as text, matching the course page's `‹ ›`. The stock arrows are sprite images that depend on the jQuery UI theme's assets loading. */ .ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next { top: 0; width: 28px; height: 28px; background: none; border: 0; border-radius: 8px; cursor: pointer; } .ui-datepicker .ui-datepicker-prev { left: 0; } .ui-datepicker .ui-datepicker-next { right: 0; } .ui-datepicker .ui-datepicker-prev.ui-state-hover, .ui-datepicker .ui-datepicker-next.ui-state-hover, .ui-datepicker .ui-datepicker-prev:hover, .ui-datepicker .ui-datepicker-next:hover { top: 0; background: #F3F4F6; border: 0; } .ui-datepicker .ui-datepicker-prev:hover { left: 0; } .ui-datepicker .ui-datepicker-next:hover { right: 0; } .ui-datepicker .ui-datepicker-prev span, .ui-datepicker .ui-datepicker-next span { display: none; } .ui-datepicker .ui-datepicker-prev:before, .ui-datepicker .ui-datepicker-next:before { display: block; font-size: 20px; line-height: 28px; color: #000101; text-align: center; } .ui-datepicker .ui-datepicker-prev:before { content: "\2039"; } .ui-datepicker .ui-datepicker-next:before { content: "\203A"; } .ui-datepicker .ui-datepicker-prev.ui-state-disabled:before { color: #DDD; } .ui-datepicker table { margin: 0; border-collapse: collapse; } .ui-datepicker th { padding: 0 0 10px; font-size: 11px; font-weight: 400; color: #ADADAD; text-align: center; } .ui-datepicker td { padding: 3px 0; border: 0; } /* A 32px disc, centred in its cell — the course page's `.date-cal-n`. `.ui-state-default` and `.ui-state-highlight` are named explicitly: the stock theme puts a border and a gradient on every day and a yellow wash on today, and those selectors outrank a bare `td a`. */ .ui-datepicker td a, .ui-datepicker td span, .ui-datepicker td a.ui-state-default, .ui-datepicker td span.ui-state-default, .ui-datepicker td a.ui-state-highlight, .ui-datepicker td a.ui-state-hover { display: block; width: 32px; height: 32px; margin: 0 auto; padding: 0; background: none; background-image: none; border: 0; border-radius: 50%; font-size: 14px; font-weight: 600; line-height: 32px; color: #000101; text-align: center; } .ui-datepicker td a:hover, .ui-datepicker td a.ui-state-hover { background: #EEF2FC; } .ui-datepicker td.ui-state-disabled span, .ui-datepicker td .ui-state-disabled, .ui-datepicker td span.ui-state-default { color: #C7CBD1; font-weight: 400; opacity: 1; } /* Public holiday, today, chosen — in that order of precedence, so a holiday you have selected still reads as selected. */ .ui-datepicker td.date-cal-ph a, .ui-datepicker td.date-cal-ph span { color: #FE8527; } .ui-datepicker td.ui-datepicker-today a, .ui-datepicker td.ui-datepicker-today a.ui-state-highlight { background: none; box-shadow: inset 0 0 0 1.5px #4681EB; } .ui-datepicker td.ui-datepicker-current-day a, .ui-datepicker td a.ui-state-active, .ui-datepicker td.ui-datepicker-current-day a.ui-state-default { background: #4681EB; box-shadow: none; color: #FFF; } /* Appended to the popup by the picker, so it shows and hides with the calendar. Same footer the course page draws under its own grid. */ .ui-datepicker .date-cal-foot { margin-top: 16px; padding-top: 14px; border-top: 1px solid #EEE; } .date-cal-foot-t { margin-bottom: 7px; font-size: 13px; font-weight: 600; color: #000101; } .date-cal-foot-i { display: flex; align-items: center; gap: 8px; margin-top: 3px; font-size: 12px; color: #000101; } .date-cal-foot-o { flex: 0 0 auto; width: 6px; height: 6px; border-radius: 50%; background: #FE8527; } /* Country switcher ---------------- The homepage's country tabs, brought to the listing. `home.css` owns `.country-tab` and `.course-suggestions-tabs`, but only the homepage loads it, so the shared appearance is restated here rather than made to look similar by hand. If the tabs are ever lifted into a shared stylesheet, both sides drop these. Wrapped rather than scrolled, which is where this parts company with the homepage: that row sits under a full-width search box, this one in a 320px rail, where a scrolling row shows two and a half markets and hides the rest behind a swipe. Six wrap to two lines and all of them stay visible. Sits above the state, being the wider choice. */ .course-panel-countries { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 2px; } .course-panel-countries .country-tab { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; padding: 5px 10px; background: #F4F6FA; border: 1px solid transparent; border-radius: 20px; font-size: 13px; font-weight: 600; color: #161F42; text-decoration: none; transition: background .15s ease, color .15s ease; } .course-panel-countries .country-tab:hover { background: #E9EEF7; color: #161F42; } /* The market you are on. Given a ring as well as a fill: this row is the only thing on the page that says which country the listing describes, and at six pills wrapped over two lines the reader needs to find it at a glance. Not a link — it points at the page you are already reading. */ .course-panel-countries .country-tab.active { background: #4681EB; border-color: #4681EB; box-shadow: 0 0 0 3px rgba(70, 129, 235, .18); color: #FFF; font-weight: 700; cursor: default; pointer-events: none; } .course-panel-countries .country-tab img { width: 20px; height: 14px; border-radius: 2px; object-fit: cover; } /* Badges together in one corner rather than one per corner, so they read as a set of facts about the offer instead of decoration scattered on a photo. */ .course-card .course-card-badge { padding: 5px 10px; border-radius: 6px; font-size: 11px; font-weight: 600; line-height: 12px; white-space: nowrap; } /* Orange for a promotion, matching the app. */ .course-card .course-card-badge.is-promo { background: #FE8527; color: #FFF; } .course-card .course-card-badge.is-instant { background: #FFC800; color: #000101; } /* Filter panel as a bottom sheet on mobile ---------------------------------------- Same mechanism as the course page's booking sheet — a `filter-sheet-open` class on , a fixed panel that slides up, and the page behind locked so scrolling happens inside the sheet. Reused rather than reinvented so the two sheets behave identically. The reason: on a phone this panel stacks above the results, so a full screen of filters stood between the visitor and the first course — on the surface where most of the traffic arrives. */ .filter-backdrop, .filter-sheet-close, .filter-sheet-trigger { display: none; } @media (max-width: 991px) { /* Scroll inside the sheet, not the page behind it. */ body.filter-sheet-open { overflow: hidden; } .filter-backdrop { display: none; position: fixed; inset: 0; z-index: 1040; background: rgba(0, 0, 0, .5); } body.filter-sheet-open .filter-backdrop { display: block; } .filter-panel { position: fixed; left: 0; right: 0; top: 8vh; bottom: 0; z-index: 1050; display: flex; flex-direction: column; overflow: hidden; margin: 0; border-radius: 16px 16px 0 0; box-shadow: 0 -4px 24px rgba(0, 0, 0, .18); transform: translateY(110%); transition: transform .3s ease; } body.filter-sheet-open .filter-panel { transform: translateY(0); } .filter-panel-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; } .filter-sheet-close { display: block; position: absolute; top: 8px; right: 12px; z-index: 2; padding: 0; background: transparent; border: 0; font-size: 26px; line-height: 1; color: #888; } /* 16px so iOS Safari doesn't zoom the page when a field takes focus. */ .filter-panel .course-panel-input, .filter-panel select { font-size: 16px; } /* A sheet needs more room than a sidebar: it is the only thing on screen, and the legacy mobile rules squeezed this panel to 15px of padding and hid its heading entirely, leaving a close button floating over the first control. */ .filter-panel { padding: 0; } /* Restores the title the old mobile CSS hid, as a proper sheet header the close button belongs to rather than floats over. */ .filter-panel .block1-form-p { display: block; flex-shrink: 0; margin: 0; padding: 16px 18px; border-bottom: 1px solid #EDF0F5; font-size: 16px; } .filter-panel-scroll { padding: 18px 18px 4px; } .filter-panel .course-panel { gap: 18px; } .filter-panel .course-panel-section { gap: 12px; padding-top: 18px; } .filter-panel .course-panel-countries { gap: 8px; } /* Bigger targets, because these are being tapped rather than clicked. */ .filter-panel .course-panel-chips { gap: 10px; } .filter-panel .course-chip span, .filter-panel .course-addon-option { height: 42px; line-height: 26px; font-size: 14px; } .filter-panel .course-panel-field { padding: 10px 14px; } .filter-sheet-close { top: 14px; right: 16px; } /* The way back in, once the sheet is closed. Pinned above the fold so it is reachable at any scroll depth, and carrying the result count so it reports what the filters did. */ .filter-sheet-trigger { position: fixed; left: 50%; bottom: 16px; z-index: 1030; display: flex; align-items: center; gap: 12px; padding: 10px 18px; transform: translateX(-50%); background: #161F42; border: 0; border-radius: 24px; box-shadow: 0 6px 20px rgba(0, 0, 0, .25); font-size: 14px; font-weight: 600; color: #FFF; white-space: nowrap; } body.filter-sheet-open .filter-sheet-trigger { display: none; } .filter-sheet-trigger-label { display: inline-flex; align-items: center; gap: 8px; } .filter-sheet-trigger-count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: #FFF; font-size: 12px; font-weight: 700; color: #161F42; } .filter-sheet-trigger-results { opacity: .75; font-weight: 500; } /* Search closes the sheet as well as applying — it is the bottom of the panel, and leaving it open over the results it just changed is the wrong answer. */ .filter-panel .course-panel-actions { position: sticky; bottom: 0; margin: 0 -18px; padding: 14px 18px; background: #FFF; box-shadow: 0 -2px 8px rgba(0, 0, 0, .06); } } /* ── Map view ───────────────────────────────────────────────────────────────── Two maps: the thumbnail above the filter panel that acts as the way in, and the full-screen map that replaces the results at ?view=map. Leaflet measures its container on init, so every map element needs a real height in CSS before the script runs or it renders one grey tile. */ /* ── The way in: thumbnail above the filter panel ─────────────────────────── */ .course-map-cta { position: relative; margin-bottom: 16px; border: 1px solid #DFDFDF; border-radius: 8px; overflow: hidden; } .course-map-cta-canvas { height: 132px; width: 100%; background: #F0F3FA; } .course-map-cta-canvas .leaflet-pane, .course-map-cta-canvas .leaflet-control { z-index: 1; } .course-map-cta-btn { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2; display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border: 0; border-radius: 6px; background: #161F42; color: #fff; font-size: 14px; font-weight: 600; line-height: 1; white-space: nowrap; box-shadow: 0 2px 10px rgba(0, 0, 0, .25); cursor: pointer; } .course-map-cta-btn:hover { background: #122C5A; } .course-map-cta-btn svg { width: 18px; height: 18px; flex: none; } /* ── Map mode: the map takes the frame, the panel opens over it ──────────── */ .courses-map-mode { position: relative; margin: 0; } /* The thumbnail is the way in; once you are in, it is just a second exit. */ /* The shared listing head carries a sort dropdown that means nothing on a map, so the map renders its own head with its own title instead. Hidden as a whole — hiding `.course-index-header` alone also hid the map's title, which is the same class. */ .courses-map-mode .course-map-cta, .courses-map-mode .course-listing-head { display: none; } .courses-map-mode .col-lg-8 { flex: 0 0 100%; max-width: 100%; padding: 0; } /* Closed by default, and a card over the map's top-left corner when opened. The column carries Bootstrap's `.position-relative`, whose utility rule is `!important`, so overriding it has to be as well. */ .courses-map-mode .col-lg-4 { position: absolute !important; /* Clears the map head above, so the card opens over the map itself. */ top: 142px; left: 20px; z-index: 1050; width: 340px; max-width: calc(100% - 40px); flex: 0 0 340px; padding: 0; display: none; } body.filter-sheet-open .courses-map-mode .col-lg-4 { display: block; } /* The filter list scrolls; Search does not. A filter column is taller than any map, so something has to give — but what made the scrolling version unusable was the button sitting below the fold, not the scrolling. Pinned to the foot, the action is always there and the list above it can be as long as it likes. No scroll conflict with the map behind: Leaflet takes the wheel over itself, this panel takes it over itself. */ .courses-map-mode .filter-panel { display: flex; flex-direction: column; max-height: calc(100vh - 300px); overflow: hidden; box-shadow: 0 6px 26px rgba(0, 0, 0, .22); border-radius: 12px; } .courses-map-mode .filter-panel-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; } .courses-map-mode .course-panel-actions { position: sticky; bottom: 0; z-index: 1; padding-top: 10px; padding-bottom: 2px; background: #fff; /* A soft edge so the list reads as continuing underneath rather than ending. */ box-shadow: 0 -10px 12px -10px rgba(0, 0, 0, .22); } /* Six markets on one strip you push sideways, rather than three wrapped rows. The single biggest saving available in this panel, and the only one taken: compacting the rest of it made everything feel cramped for less than this. */ .courses-map-mode .course-panel-countries { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; } .courses-map-mode .course-panel-countries::-webkit-scrollbar { display: none; } .courses-map-mode .country-tab { flex: none; } /* The panel's own ✕, normally mobile-only, is the way to dismiss it here. */ .courses-map-mode .filter-sheet-close { display: block; position: absolute; top: 10px; right: 14px; z-index: 2; border: 0; background: none; font-size: 26px; line-height: 1; color: #8A8A8A; cursor: pointer; } .course-map-frame { position: relative; } .course-map { /* Site header and map head above, breathing room below: a map you have to scroll to see the bottom of is not a map. */ height: calc(100vh - 250px); min-height: 430px; width: 100%; margin-bottom: 28px; border-radius: 10px; background: #F0F3FA; } /* Leaflet's default zoom control is a small square pair with hairline borders; these match the round white controls used everywhere else on the map. */ .course-map .leaflet-control-zoom { margin: 0 20px 22px 0; border: 0; border-radius: 22px; overflow: hidden; box-shadow: 0 2px 12px rgba(0, 0, 0, .2); } .course-map .leaflet-control-zoom a { width: 40px; height: 40px; line-height: 40px; border: 0; background: #fff; color: #161F42; font-size: 20px; font-weight: 400; } .course-map .leaflet-control-zoom a:hover { background: #F0F3FA; color: #161F42; } .course-map .leaflet-control-zoom a.leaflet-disabled { background: #fff; color: #C7CCD8; } /* ── Map head ─────────────────────────────────────────────────────────────── */ .course-map-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; /* Room above so the title isn't pinned to the site header, and below so it isn't pinned to the map either. */ padding: 26px 0 18px; } .course-map-head-text { min-width: 0; } .course-map-sub { margin: 4px 0 0; font-size: 13.5px; color: #8A8A8A; } .course-map-sub strong { color: #161F42; font-weight: 600; } .course-map-head-actions { display: flex; gap: 8px; flex: none; } .course-map-btn { display: inline-flex; align-items: center; gap: 7px; padding: 10px 18px; border-radius: 22px; border: 1px solid #DFDFDF; background: #fff; color: #161F42; font-size: 14px; font-weight: 600; line-height: 1; white-space: nowrap; cursor: pointer; } .course-map-btn:hover { background: #F0F3FA; } .course-map-btn.is-primary { background: #161F42; border-color: #161F42; color: #fff; } .course-map-btn.is-primary:hover { background: #122C5A; } .course-map-btn svg { width: 17px; height: 17px; flex: none; } .course-map-btn-count { display: inline-flex; align-items: center; justify-content: center; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 10px; background: #161F42; color: #fff; font-size: 11px; } .course-map-btn.is-primary .course-map-btn-count { background: #fff; color: #161F42; } .course-map-empty { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 850; margin: 0; padding: 14px 20px; max-width: 320px; border-radius: 8px; background: rgba(255, 255, 255, .96); text-align: center; font-size: 14px; color: #8A8A8A; box-shadow: 0 2px 12px rgba(0, 0, 0, .16); } /* ── Mobile ───────────────────────────────────────────────────────────────── */ @media (max-width: 991px) { .course-map-cta-canvas { height: 108px; } /* The panel is a bottom sheet here, so the sheet's own fixed positioning has to win over the floating card the desktop map uses. */ .courses-map-mode .col-lg-4 { position: static !important; display: block; width: auto; max-width: none; flex: 0 0 100%; } .courses-map-mode .filter-panel { max-height: none; box-shadow: 0 -4px 24px rgba(0, 0, 0, .18); border-radius: 16px 16px 0 0; } /* The sheet has the room for the countries to wrap as they always did. */ .courses-map-mode .course-panel-countries { flex-wrap: wrap; overflow-x: visible; } /* The head earns its space on a desktop; on a phone it was eating a third of the screen before the map began. Everything tightens: less padding, a smaller title, and buttons sized to the text rather than the row. */ /* `section.block1` reserves 100px at the top for the fixed header, which is generous once a phone has a map to fit underneath it. Pulled back rather than reduced at source, because the list view on the same section still wants the full gap. */ .courses-map-mode { margin-top: -18px; } .course-map-head { padding: 18px 0 14px; gap: 10px; } .course-map-head .course-index-header { font-size: 20px; } .course-map-sub { margin-top: 2px; font-size: 12.5px; line-height: 1.4; } .course-map-btn { padding: 9px 15px; font-size: 13px; } .course-map { height: calc(100vh - 210px); min-height: 360px; margin-bottom: 18px; } /* The listing's own sticky filter bar would sit under the map's. */ .courses-map-mode .filter-sheet-trigger { display: none; } }