/** * PWD Tour Cards - Public styles * Colors/fonts/radius are all driven by CSS custom properties printed in * by PWD_Tour_Cards_Assets (see class-pwd-tour-cards-assets.php), * which resolve theme-inherited values or the manual Settings fallback. */ .pwd-tour-cards-grid { display: grid; gap: var( --pwd-grid-gap, 24px ); /* * minmax( 0, 1fr ) rather than 1fr: a bare 1fr has a min-content floor, so a * long unbroken word in a card can force the column wider than its share and * push the grid into horizontal overflow. */ grid-template-columns: repeat( var( --pwd-tour-cols, 4 ), minmax( 0, 1fr ) ); } .pwd-tour-cards-grid--cols-1 { --pwd-tour-cols: 1; } .pwd-tour-cards-grid--cols-2 { --pwd-tour-cols: 2; } .pwd-tour-cards-grid--cols-3 { --pwd-tour-cols: 3; } .pwd-tour-cards-grid--cols-4 { --pwd-tour-cols: 4; } .pwd-tour-cards-grid--cols-5 { --pwd-tour-cols: 5; } .pwd-tour-cards-grid--cols-6 { --pwd-tour-cols: 6; } /* * Tablet and mobile counts are configurable in Grid Design and ride on their own * classes. Until 2.6.0 these breakpoints were hardcoded to 2 and 1, so the stored * tablet and mobile settings had no effect at all. */ @media ( max-width: 980px ) { .pwd-tour-cards-grid { grid-template-columns: repeat( var( --pwd-tour-cols-tab, 2 ), minmax( 0, 1fr ) ); } .pwd-tour-cards-grid--tab-1 { --pwd-tour-cols-tab: 1; } .pwd-tour-cards-grid--tab-2 { --pwd-tour-cols-tab: 2; } .pwd-tour-cards-grid--tab-3 { --pwd-tour-cols-tab: 3; } .pwd-tour-cards-grid--tab-4 { --pwd-tour-cols-tab: 4; } } @media ( max-width: 600px ) { .pwd-tour-cards-grid { grid-template-columns: repeat( var( --pwd-tour-cols-mob, 1 ), minmax( 0, 1fr ) ); } .pwd-tour-cards-grid--mob-1 { --pwd-tour-cols-mob: 1; } .pwd-tour-cards-grid--mob-2 { --pwd-tour-cols-mob: 2; } } /* A list row is always full width, whatever the column count says. */ .pwd-tour-cards-grid[data-layout="list"] { grid-template-columns: minmax( 0, 1fr ); } /* ---------- Base card ---------- */ .pwd-tour-card { font-family: var( --pwd-tour-font-body, inherit ); color: var( --pwd-tour-text, #1a1a1a ); background: var( --pwd-card-surface, #fff ); border-radius: var( --pwd-tour-radius, 8px ); overflow: hidden; box-shadow: var( --pwd-card-shadow, 0 1px 3px rgba( 0, 0, 0, 0.08 ) ); display: flex; flex-direction: column; } /* ---------- Equal height ---------- * Grid stretch alone only equalises the card boxes. It does not align what is * inside them, so with titles and descriptions of different lengths the price * and button rows end up at different heights across a row. * * Three things are needed: the card fills its grid cell, the body grows to * absorb the slack, and the last row inside the body is pushed to the bottom. * Applied per column-direction style so the horizontal styles are unaffected. */ .pwd-tour-cards-grid--equal > .pwd-tour-card { height: 100%; } .pwd-tour-cards-grid--equal > .pwd-tour-card--grid .pwd-tour-card-body, .pwd-tour-cards-grid--equal > .pwd-tour-card--feature .pwd-tour-card-body, .pwd-tour-cards-grid--equal > .pwd-tour-card--explorer .pwd-tour-card-body, .pwd-tour-cards-grid--equal > .pwd-tour-card--marketplace .pwd-tour-card-body { flex: 1 1 auto; } .pwd-tour-cards-grid--equal > .pwd-tour-card--grid .pwd-tour-card-footer:last-child, .pwd-tour-cards-grid--equal > .pwd-tour-card--feature .pwd-tour-card-footer:last-child { margin-top: auto; } /* * Explorer and Marketplace end with a band or footer after the body, so pushing * the footer down would leave a gap. Growing the body is what aligns their bands * and buttons across a row instead. */ .pwd-tour-cards-grid--equal > .pwd-tour-card--explorer .pwd-tour-card-body, .pwd-tour-cards-grid--equal > .pwd-tour-card--marketplace .pwd-tour-card-body { flex: 1 1 auto; } /* Overlay content is absolutely positioned, so only the box needs stretching. */ .pwd-tour-cards-grid--equal > .pwd-tour-card--overlay .pwd-tour-card-media { height: 100%; } /* * Keep titles and descriptions from varying so wildly that equal height leaves * large gaps. Clamping is what makes the aligned footers look deliberate. */ .pwd-tour-cards-grid--equal .pwd-tour-card-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .pwd-tour-cards-grid--equal .pwd-tour-card-excerpt { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .pwd-tour-card-media { position: relative; display: block; line-height: 0; } .pwd-tour-card-image { width: 100%; height: auto; display: block; object-fit: var( --pwd-img-fit, cover ); } .pwd-tour-card-title { font-family: var( --pwd-tour-font-heading, inherit ); font-size: 17px; color: var( --pwd-card-title, inherit ); line-height: 1.3; margin: 0 0 6px; } .pwd-tour-card-title a { color: inherit; text-decoration: none; } .pwd-tour-card-body { padding: 16px; display: flex; flex-direction: column; gap: 8px; } .pwd-tour-card-excerpt { font-size: 14px; line-height: 1.5; color: var( --pwd-card-body, rgba( 0, 0, 0, 0.65 ) ); margin: 0; } .pwd-tour-card-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 4px; } /* ---------- Badge ---------- * Background resolves through a chain so every layer can take over without * !important: an Elementor widget override or a preset rule beats the per-term * --pwd-badge-bg (set by a generated .pwd-tour-badge--tNN rule), which in turn * beats the global accent. Nothing is ever styled inline on the element. */ .pwd-tour-badge { position: absolute; top: 10px; left: 10px; background: var( --pwd-badge-bg, var( --pwd-tour-accent, #1a1a1a ) ); color: var( --pwd-badge-text, #fff ); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; padding: 4px 10px; border-radius: 999px; } .pwd-tour-photo-count { position: absolute; top: 10px; right: 10px; background: rgba( 0, 0, 0, 0.6 ); color: #fff; font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 999px; display: inline-flex; align-items: center; gap: 4px; } .pwd-tour-photo-count svg { width: 13px; height: 13px; } /* ---------- Popular badge ---------- * A separate marker from the type badge: it uses the primary colour and sits * low-left over the image on the media layouts, or inline on the list row. */ .pwd-tour-popular { display: inline-flex; align-items: center; background: var( --pwd-tour-primary, #ef7d24 ); color: #fff; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; line-height: 1.2; padding: 4px 10px; border-radius: 999px; } .pwd-tour-card-media .pwd-tour-popular { position: absolute; left: 10px; bottom: 10px; z-index: 2; } .pwd-tour-card--list .pwd-tour-popular { margin-left: 6px; vertical-align: middle; } /* ---------- Stars ---------- */ .pwd-tour-stars { display: inline-flex; gap: 2px; } .pwd-tour-star svg { width: 14px; height: 14px; } .pwd-tour-star.is-filled { color: var( --pwd-card-star, var( --pwd-tour-primary, #ef7d24 ) ); } .pwd-tour-star.is-empty { color: #d8d8d8; } /* ---------- Meta row (duration / transport) ---------- */ .pwd-tour-meta-row { display: flex; flex-wrap: wrap; gap: 12px; font-size: 12.5px; color: var( --pwd-card-muted, rgba( 0, 0, 0, 0.6 ) ); } .pwd-tour-meta-item { display: inline-flex; align-items: center; gap: 4px; } .pwd-tour-meta-item svg { width: 14px; height: 14px; } /* ---------- Price ---------- */ .pwd-tour-price { display: flex; flex-direction: column; line-height: 1.1; } .pwd-tour-price-prefix, .pwd-tour-price-suffix { font-size: 10px; text-transform: uppercase; color: var( --pwd-card-muted, rgba( 0, 0, 0, 0.5 ) ); font-weight: 600; } .pwd-tour-price-amount { font-size: 18px; font-weight: 800; color: var( --pwd-tour-primary, #ef7d24 ); } /* ---------- CTA button ---------- */ .pwd-tour-cta { display: inline-flex; align-items: center; justify-content: center; border: 2px solid var( --pwd-btn-bg, var( --pwd-tour-primary, #ef7d24 ) ); border-radius: var( --pwd-btn-radius, 6px ); padding: 8px 18px; font-size: 13px; font-weight: 700; text-decoration: none; cursor: pointer; background: var( --pwd-btn-bg, var( --pwd-tour-primary, #ef7d24 ) ); color: var( --pwd-btn-text, #fff ); transition: background .18s ease, color .18s ease, border-color .18s ease; } .pwd-tour-cta:hover, .pwd-tour-cta:focus { background: var( --pwd-btn-hover-bg, var( --pwd-tour-primary, #ef7d24 ) ); color: var( --pwd-btn-hover-text, #fff ); border-color: var( --pwd-btn-hover-bg, var( --pwd-tour-primary, #ef7d24 ) ); } /* * The variant is read from the button's own data-style attribute, written by * PWD_Tour_Cards_Render::render_cta_button(). The previous selector targeted a * :root inline style attribute that is never written, so it never matched and * the Outline setting did nothing. */ .pwd-tour-cta[data-style="outline"] { background: transparent; color: var( --pwd-btn-bg, var( --pwd-tour-primary, #ef7d24 ) ); } .pwd-tour-cta[data-style="outline"]:hover, .pwd-tour-cta[data-style="outline"]:focus { background: var( --pwd-btn-hover-bg, var( --pwd-tour-primary, #ef7d24 ) ); color: var( --pwd-btn-hover-text, #fff ); } .pwd-tour-cta[data-style="ghost"] { background: transparent; border-color: transparent; color: var( --pwd-btn-bg, var( --pwd-tour-primary, #ef7d24 ) ); padding-left: 0; padding-right: 0; } .pwd-tour-cta[data-style="ghost"]:hover, .pwd-tour-cta[data-style="ghost"]:focus { background: transparent; border-color: transparent; color: var( --pwd-btn-hover-bg, var( --pwd-tour-primary, #ef7d24 ) ); } .pwd-tour-cta-arrow { display: inline-flex; margin-left: 6px; line-height: 0; } .pwd-tour-cta-arrow svg { width: 14px; height: 14px; } /* ---------- Grid layout ---------- */ .pwd-tour-card--grid .pwd-tour-card-media { aspect-ratio: var( --pwd-img-ratio, 4 / 3 ); } .pwd-tour-card--grid .pwd-tour-card-image { height: 100%; } /* ---------- Feature layout ---------- */ .pwd-tour-card--feature .pwd-tour-card-media { aspect-ratio: var( --pwd-img-ratio, 16 / 10 ); } .pwd-tour-card--feature .pwd-tour-card-body { padding: 20px; gap: 10px; } .pwd-tour-card-footer--top { font-size: 13px; } /* ---------- Compact layout ---------- */ .pwd-tour-card--compact { flex-direction: row; align-items: center; box-shadow: none; background: transparent; gap: 10px; } .pwd-tour-card--compact .pwd-tour-card-media { flex: 0 0 64px; width: 64px; height: 64px; border-radius: var( --pwd-tour-radius, 8px ); overflow: hidden; } .pwd-tour-card--compact .pwd-tour-card-image { height: 100%; object-fit: cover; } .pwd-tour-card--compact .pwd-tour-card-body { padding: 0; gap: 2px; } .pwd-tour-card--compact .pwd-tour-card-title { font-size: 13.5px; margin: 0; } .pwd-tour-card--compact .pwd-tour-price-amount { font-size: 14px; } /* ---------- Overlay layout ---------- */ .pwd-tour-card--overlay { background: none; box-shadow: none; } .pwd-tour-card--overlay .pwd-tour-card-media { aspect-ratio: var( --pwd-img-ratio, 3 / 4 ); border-radius: var( --pwd-tour-radius, 8px ); overflow: hidden; } .pwd-tour-card--overlay .pwd-tour-card-image { height: 100%; } .pwd-tour-card-scrim { position: absolute; inset: 0; background: linear-gradient( to top, rgba( 0, 0, 0, 0.85 ), rgba( 0, 0, 0, 0.05 ) 60% ); } .pwd-tour-card-overlay-content { position: absolute; left: 0; right: 0; bottom: 0; padding: 16px; color: #fff; display: flex; flex-direction: column; gap: 6px; } .pwd-tour-card--overlay .pwd-tour-meta-item, .pwd-tour-card--overlay .pwd-tour-price-prefix, .pwd-tour-card--overlay .pwd-tour-price-suffix { color: rgba( 255, 255, 255, 0.75 ); } .pwd-tour-card-cta-wrap { padding: 12px 16px; } /* ---------- List Row layout ---------- */ .pwd-tour-card--list { flex-direction: row; align-items: center; gap: 16px; padding: 12px; } .pwd-tour-card--list .pwd-tour-card-media { flex: 0 0 96px; width: 96px; height: 96px; border-radius: var( --pwd-tour-radius, 8px ); overflow: hidden; } .pwd-tour-card--list .pwd-tour-card-image { height: 100%; object-fit: cover; } .pwd-tour-card-main { flex: 1; display: flex; flex-direction: column; gap: 4px; } .pwd-tour-card--list .pwd-tour-card-title { font-size: 15px; margin: 0; } .pwd-tour-card-side { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; } @media ( max-width: 480px ) { .pwd-tour-card--list, .pwd-tour-card--compact { flex-wrap: wrap; } .pwd-tour-card-side { align-items: flex-start; } } /* ========================================================================== Explorer style A white title panel overlaps the image; a tinted band carries meta and price. The card box itself is transparent so the panel can read as its own sheet. Every value routes through the same tokens as the other styles. ========================================================================== */ .pwd-tour-card--explorer { background: transparent; box-shadow: none; overflow: visible; } .pwd-tour-card--explorer .pwd-tour-card-media { aspect-ratio: var( --pwd-img-ratio, 4 / 3 ); border-radius: var( --pwd-tour-radius, 8px ) var( --pwd-tour-radius, 8px ) 0 0; overflow: hidden; } .pwd-tour-card--explorer .pwd-tour-card-image { height: 100%; } /* The overlapping title sheet. */ .pwd-tour-card--explorer .pwd-tour-card-panel { position: relative; z-index: 1; margin: -52px 14px 0; padding: 16px 18px; display: flex; flex-direction: column; gap: 8px; background: var( --pwd-card-surface, #fff ); border-radius: var( --pwd-tour-radius, 8px ); box-shadow: var( --pwd-card-shadow, 0 1px 3px rgba( 0, 0, 0, 0.08 ) ); } .pwd-tour-card--explorer .pwd-tour-card-title { font-size: 19px; font-weight: 800; line-height: 1.25; text-transform: uppercase; letter-spacing: 0.01em; margin: 0; } .pwd-tour-card--explorer .pwd-tour-card-band { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 18px; background: var( --pwd-card-band, #f1f1f1 ); } .pwd-tour-card--explorer .pwd-tour-card-body { padding: 16px 18px; background: var( --pwd-card-surface, #fff ); } .pwd-tour-card--explorer .pwd-tour-card-footer { padding: 0 18px 18px; background: var( --pwd-card-surface, #fff ); border-radius: 0 0 var( --pwd-tour-radius, 8px ) var( --pwd-tour-radius, 8px ); } /* * The reference design has the button overhanging the card edge. It is offset * upward instead of outside the box, because a button hanging beyond the card * gets clipped by any parent with overflow hidden, which includes plenty of * themes and Elementor containers. */ .pwd-tour-card-footer--offset { justify-content: flex-start; margin-top: -4px; } .pwd-tour-card-footer--offset .pwd-tour-cta { padding: 11px 22px; } /* ========================================================================== Marketplace style Badge low on the image, photo chip straddling the image edge, tinted band, full-width button. Built for day tours in a browsable grid. ========================================================================== */ .pwd-tour-card--marketplace .pwd-tour-card-media { aspect-ratio: var( --pwd-img-ratio, 4 / 3 ); overflow: hidden; } .pwd-tour-card--marketplace .pwd-tour-card-image { height: 100%; } /* * The badge sits inside the image rather than overhanging it, because the image * wrapper needs overflow hidden for the hover zoom and would clip it. */ .pwd-tour-card--marketplace .pwd-tour-badge { top: auto; bottom: 12px; left: 14px; } .pwd-tour-card--marketplace .pwd-tour-card-body { position: relative; padding: 16px; gap: 7px; } /* The chip straddles the image edge. The body has no overflow clipping. */ .pwd-tour-card--marketplace .pwd-tour-photo-count { top: -14px; right: 14px; background: rgba( 0, 0, 0, 0.72 ); padding: 5px 10px; } .pwd-tour-card--marketplace .pwd-tour-card-title { font-size: 16px; font-weight: 800; line-height: 1.3; margin: 0; } .pwd-tour-card--marketplace .pwd-tour-card-band { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 13px 16px; background: var( --pwd-card-band, #f1f1f1 ); } .pwd-tour-card--marketplace .pwd-tour-card-footer { padding: 14px 16px; background: var( --pwd-card-surface, #fff ); } .pwd-tour-card-footer--full { justify-content: center; } .pwd-tour-card-footer--full .pwd-tour-cta { width: 100%; padding: 12px 18px; font-size: 14px; } /* ========================================================================== Shared additions for both new styles ========================================================================== */ /* Meta items stacked vertically rather than in one inline row. */ .pwd-tour-meta-row--stack { flex-direction: column; align-items: flex-start; gap: 5px; } .pwd-tour-meta-row--stack .pwd-tour-meta-item { gap: 7px; } .pwd-tour-meta-row--stack .pwd-tour-meta-item svg { flex-shrink: 0; color: var( --pwd-tour-primary, #ef7d24 ); } /* Price with an optional strikethrough was-price beside the amount. */ .pwd-tour-price-row { display: inline-flex; align-items: baseline; gap: 7px; } .pwd-tour-price-was { font-size: 13px; font-weight: 600; text-decoration: line-through; color: var( --pwd-card-muted, rgba( 0, 0, 0, 0.45 ) ); } .pwd-tour-card--explorer .pwd-tour-price, .pwd-tour-card--marketplace .pwd-tour-price { align-items: flex-end; text-align: right; flex-shrink: 0; } @media ( max-width: 420px ) { .pwd-tour-card--explorer .pwd-tour-card-band, .pwd-tour-card--marketplace .pwd-tour-card-band { flex-direction: column; align-items: flex-start; gap: 10px; } .pwd-tour-card--explorer .pwd-tour-price, .pwd-tour-card--marketplace .pwd-tour-price { align-items: flex-start; text-align: left; } } /* ---------- CTA popup / iframe modal ---------- */ .pwd-tour-modal-overlay { position: fixed; inset: 0; background: rgba( 0, 0, 0, 0.6 ); z-index: 100000; display: flex; align-items: center; justify-content: center; } .pwd-tour-modal-box { position: relative; background: #fff; border-radius: 8px; overflow: hidden; max-width: 96vw; max-height: 92vh; } .pwd-tour-modal-box iframe { display: block; width: 100%; height: 100%; border: 0; } .pwd-tour-modal-close { position: absolute; top: 8px; right: 8px; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; background: #fff; border-radius: 50%; border: 1px solid #ddd; cursor: pointer; z-index: 1; } .pwd-tour-modal-close svg { width: 16px; height: 16px; } /* ---------- Grid filter bar (2.9.0) ---------- */ /* * The section spacing rule: no top margin, 16px below, no outer padding and no * width of its own, so Elementor's spacing controls have nothing to fight. */ .pwd-tour-cards-wrap { margin: 0 0 16px; padding: 0; } .pwd-tour-cards-wrap > .pwd-tour-cards-grid { margin: 0; } /* * Hidden cards need to beat the display value the card styles set on * .pwd-tour-card, so this is scoped by the grid and a second class rather than * reaching for !important, which would put it beyond every later override. */ .pwd-tour-cards-grid > .pwd-tour-card.pwd-tour-hidden { display: none; } .pwd-tour-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect( 0, 0, 0, 0 ); white-space: nowrap; border: 0; } .pwd-tour-filters { margin: 0 0 16px; font-family: var( --pwd-tour-font-body, inherit ); color: var( --pwd-tour-text, #1a1a1a ); } .pwd-tour-filters-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } /* ---------- Search ---------- */ .pwd-tour-search { position: relative; display: flex; align-items: center; flex: 1 1 240px; min-width: 0; } .pwd-tour-search > svg { position: absolute; left: 12px; width: 17px; height: 17px; pointer-events: none; color: var( --pwd-card-muted, rgba( 0, 0, 0, 0.5 ) ); } .pwd-tour-search-input { width: 100%; box-sizing: border-box; padding: 10px 36px 10px 38px; font: inherit; font-size: 14px; color: inherit; background: var( --pwd-card-surface, #fff ); border: 1px solid var( --pwd-filter-border, rgba( 0, 0, 0, 0.15 ) ); border-radius: var( --pwd-tour-radius, 8px ); } .pwd-tour-search-input:focus { outline: 2px solid var( --pwd-tour-primary, #ef7d24 ); outline-offset: 1px; border-color: transparent; } .pwd-tour-search-clear { position: absolute; right: 8px; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; background: none; border: 0; border-radius: 50%; cursor: pointer; color: var( --pwd-card-muted, rgba( 0, 0, 0, 0.55 ) ); } .pwd-tour-search-clear:hover { background: rgba( 0, 0, 0, 0.06 ); } .pwd-tour-search-clear svg { width: 14px; height: 14px; } .pwd-tour-autocomplete { position: absolute; top: calc( 100% + 4px ); left: 0; right: 0; z-index: 20; margin: 0; padding: 4px; list-style: none; background: var( --pwd-card-surface, #fff ); border: 1px solid var( --pwd-filter-border, rgba( 0, 0, 0, 0.15 ) ); border-radius: var( --pwd-tour-radius, 8px ); box-shadow: 0 8px 24px rgba( 0, 0, 0, 0.12 ); } .pwd-tour-autocomplete-item { padding: 8px 10px; font-size: 14px; border-radius: calc( var( --pwd-tour-radius, 8px ) - 2px ); cursor: pointer; } .pwd-tour-autocomplete-item:hover, .pwd-tour-autocomplete-item.is-active { background: rgba( 0, 0, 0, 0.06 ); } /* ---------- Facets ---------- */ .pwd-tour-facet { display: flex; flex-wrap: wrap; gap: 6px; } .pwd-tour-facet-btn { display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; font: inherit; font-size: 13.5px; line-height: 1; color: inherit; background: var( --pwd-card-surface, #fff ); border: 1px solid var( --pwd-filter-border, rgba( 0, 0, 0, 0.15 ) ); border-radius: 999px; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease; } .pwd-tour-facet-btn:hover { border-color: var( --pwd-tour-primary, #ef7d24 ); } .pwd-tour-facet-btn:focus-visible { outline: 2px solid var( --pwd-tour-primary, #ef7d24 ); outline-offset: 2px; } .pwd-tour-facet-btn.is-active { background: var( --pwd-tour-primary, #ef7d24 ); border-color: var( --pwd-tour-primary, #ef7d24 ); color: var( --pwd-btn-text, #fff ); } .pwd-tour-facet-count { font-size: 11.5px; opacity: 0.65; } /* ---------- Chips, count and the approximate-match note ---------- */ .pwd-tour-filters-status { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; } .pwd-tour-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .pwd-tour-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; font: inherit; font-size: 12.5px; line-height: 1; color: inherit; background: rgba( 0, 0, 0, 0.06 ); border: 0; border-radius: 999px; cursor: pointer; } .pwd-tour-chip:hover { background: rgba( 0, 0, 0, 0.12 ); } .pwd-tour-chip svg { width: 11px; height: 11px; opacity: 0.7; } .pwd-tour-chip-clear { padding: 5px 4px; font: inherit; font-size: 12.5px; color: var( --pwd-tour-primary, #ef7d24 ); background: none; border: 0; cursor: pointer; text-decoration: underline; } .pwd-tour-result-count { margin: 0; font-size: 13px; color: var( --pwd-card-muted, rgba( 0, 0, 0, 0.6 ) ); } .pwd-tour-approx { flex: 1 1 100%; margin: 0; font-size: 13px; color: var( --pwd-card-muted, rgba( 0, 0, 0, 0.7 ) ); } .pwd-tour-approx-undo { margin-left: 6px; padding: 0; font: inherit; font-size: 13px; color: var( --pwd-tour-primary, #ef7d24 ); background: none; border: 0; cursor: pointer; text-decoration: underline; } /* ---------- Empty state and Show more ---------- */ .pwd-tour-filters-empty { margin: 24px 0 0; text-align: center; color: var( --pwd-card-muted, rgba( 0, 0, 0, 0.6 ) ); } .pwd-tour-more { margin-top: 16px; text-align: center; } .pwd-tour-more-btn { padding: 10px 22px; font: inherit; font-size: 14px; color: var( --pwd-tour-primary, #ef7d24 ); background: none; border: 2px solid var( --pwd-tour-primary, #ef7d24 ); border-radius: var( --pwd-btn-radius, 6px ); cursor: pointer; } .pwd-tour-more-btn:hover { color: var( --pwd-btn-text, #fff ); background: var( --pwd-tour-primary, #ef7d24 ); } @media ( max-width: 600px ) { .pwd-tour-filters-row { gap: 8px; } .pwd-tour-search { flex: 1 1 100%; } .pwd-tour-facet { width: 100%; } }