/** * HomeRunner Skin — multi-level playground. * * Two kinds of customization layer over the HR plugin's native output: * * 1. Tokens (CSS custom properties) drive *values*. Color, radius, font, * shadow, spacing. The active preset's tokens are emitted as an inline * `.hrtk-skin { --hrtk-skin-*: ... }` block on wp_head. * * 2. Flag modifier classes drive *structure*. When a preset toggles * `card.image_aspect: "1/1"`, the skin adds `hrtk-skin--card-image- * aspect-1-1` to . Rules guarded by that class swap aspect ratio, * reorder flex children, hide/show elements, or reposition surfaces. * * Architectural note — cascade strategy: * The skin used to wrap rules in @layer hrtk-skin-base/preset, but * un-layered HR-plugin CSS (e.g. `.hfse-form-primary-fields .hk-input * { background: #DDDFE0 }` in _explorer-form.scss:94) always beats layered * rules regardless of specificity. We now ship reset + preset rules * un-layered with `.hrtk-skin` ancestor for natural specificity, and * reserve `@layer hrtk-skin-site` as an opt-in hook for site authors who * want a clean override seam without raising specificity. Surgical * `!important` is used only where the plugin uses `!important` on the * same property and we need to override it. */ @layer hrtk-skin-site { /* Intentionally empty. Site authors can opt into this layer to override * skin output without raising specificity: * * @layer hrtk-skin-site { .hrtk-skin .hfse-form { background: red; } } * * Anything *outside* this @layer (including the skin's own rules * below) takes precedence. */ } /* =========================================================================== * Base resets — neutralize theme styles that bleed into HR markup. * ========================================================================= */ .hrtk-skin .hfse-form, .hrtk-skin .hfse-form *, .hrtk-skin .hfse-form *::before, .hrtk-skin .hfse-form *::after { box-sizing: border-box; } .hrtk-skin .hfse-form { font-family: var(--hrtk-skin-font-family, inherit); } .hrtk-skin .hfse-form a, .hrtk-skin .hfse-form a:hover, .hrtk-skin .hfse-form a:focus, .hrtk-skin .hfse-form a:visited { color: inherit; text-decoration: none; } .hrtk-skin .hfse-form ul, .hrtk-skin .hfse-form ol { list-style: none; margin: 0; padding: 0; } .hrtk-skin .hfse-form li { list-style: none; } /* =========================================================================== * Searchbar — Explorer primary fields. * ========================================================================= */ /* Outer pill / surface. */ .hrtk-skin .hfse-form .hfse-form-primary-fields { display: flex; align-items: stretch; background: var(--hrtk-skin-color-surface); border: 1px solid var(--hrtk-skin-color-border); border-radius: var(--hrtk-skin-radius-pill); box-shadow: var(--hrtk-skin-shadow-searchbar); padding: 6px; } /* Field containers — equal flex weight, interior dividers between siblings. */ .hrtk-skin .hfse-form .hfse-form-primary-fields > * { position: relative; flex: 1 1 0; padding: var(--hrtk-skin-space-field-y) var(--hrtk-skin-space-field-x); } .hrtk-skin .hfse-form .hfse-form-primary-fields > * + * { border-left: 1px solid var(--hrtk-skin-color-divider); } /* Flag: searchbar.show_field_dividers = false → remove the interior separators between search fields. */ .hrtk-skin--searchbar-show-field-dividers-off .hfse-form .hfse-form-primary-fields > * + * { border-left: 0; } /* Solid-button field-containers (filters + submit) shrink to fit and have * no divider edge against neighbors. Drawing a divider next to a colored * button reads as a stripe of the divider color sitting on top of the * button-color background — visually noisy. */ .hrtk-skin .hfse-form .hfse-form-primary-fields > .hfse-additional-filters-field-container, .hrtk-skin .hfse-form .hfse-form-primary-fields > .hfse-form-submit-field-container { flex: 0 0 auto; border-left: 0; padding: 4px; } .hrtk-skin .hfse-form .hfse-form-primary-fields > .hfse-additional-filters-field-container + * { border-left: 0; } /* Inputs — beat the HR plugin's un-layered `.hfse-form-primary-fields * .hk-input { background: #DDDFE0 }` rule. Plugin uses no `!important` so * specificity wins; we still ship background+border+padding overrides. */ .hrtk-skin .hfse-form .hfse-form-primary-fields .hk-input, .hrtk-skin .hfse-form .hfse-form-primary-fields input[type="text"] { background: var(--hrtk-skin-color-bg-input); border: 0; outline: 0; box-shadow: none; border-radius: var(--hrtk-skin-radius-input); color: var(--hrtk-skin-color-text); font-size: var(--hrtk-skin-font-size-input); padding: 8px 12px; width: 100%; min-height: inherit; line-height: 1.3; } .hrtk-skin .hfse-form .hfse-form-primary-fields .hk-input:focus, .hrtk-skin .hfse-form .hfse-form-primary-fields input[type="text"]:focus { background: var(--hrtk-skin-color-bg-input); color: var(--hrtk-skin-color-text); } .hrtk-skin .hfse-form .hfse-form-primary-fields .hk-input::placeholder { color: var(--hrtk-skin-color-muted); } /* Inline field icons. */ .hrtk-skin .hfse-form .hk-form-icon { color: var(--hrtk-skin-color-muted); } /* Field labels — visible by default. The flag-modifier rule lower hides * them when `searchbar.show_labels: false`. */ .hrtk-skin .hfse-form .field-label, .hrtk-skin .hfse-form [class*="hfse-form-"][class*="-field-label"] { display: block; font-size: var(--hrtk-skin-font-size-label); color: var(--hrtk-skin-color-muted); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 2px; } /* Submit button — square or pill via radius token; size from token. */ .hrtk-skin .hfse-form .hfse-form-submit-field-container { flex: 0 0 auto; padding: 4px; display: flex; align-items: center; } /* Search (submit) button. Dedicated submit color tokens fall back to the global primary when unset. The `.hfse-form .hfse-form-submit-btn` selector matches the admin preview mock; the real front-end selector is further below. Keep both in sync. */ .hrtk-skin .hfse-form .hfse-form-submit-btn { min-width: var(--hrtk-skin-submit-size); height: var(--hrtk-skin-submit-size); padding: 0 24px; border-radius: var(--hrtk-skin-radius-button); background: var(--hrtk-skin-color-searchbar-submit-bg, var(--hrtk-skin-color-primary)); color: var(--hrtk-skin-color-searchbar-submit-text, var(--hrtk-skin-color-on-primary)); border: 0; font-weight: 500; display: inline-flex; align-items: center; justify-content: center; transition: background 200ms ease; white-space: nowrap; } .hrtk-skin .hfse-form .hfse-form-submit-btn:hover, .hrtk-skin .hfse-form .hfse-form-submit-btn:focus-visible { background: var(--hrtk-skin-color-searchbar-submit-hover, var(--hrtk-skin-color-primary-hover, var(--hrtk-skin-color-primary))); color: var(--hrtk-skin-color-searchbar-submit-text, var(--hrtk-skin-color-on-primary)); } /* The filters field container isn't flexed by the plugin, so the button sits top-justified and breaks vertical alignment against the (already flex-centered) submit field container. Center it to match. */ .hrtk-skin .hfse-additional-filters-field-container { display: flex; align-items: center; } /* Filters button (additional-filters). Dedicated filters color tokens, independent of the submit button, fall back to the global primary. */ .hrtk-skin .hfse-form .hfse-form-additional-filters-btn { background: var(--hrtk-skin-color-searchbar-filters-bg, var(--hrtk-skin-color-primary)); color: var(--hrtk-skin-color-searchbar-filters-text, var(--hrtk-skin-color-on-primary)); border: 0; border-radius: var(--hrtk-skin-radius-button); min-width: 44px; height: var(--hrtk-skin-submit-size); display: inline-flex; align-items: center; justify-content: center; } .hrtk-skin .hfse-form .hfse-form-additional-filters-btn:hover { background: var(--hrtk-skin-color-searchbar-filters-hover, var(--hrtk-skin-color-primary-hover, var(--hrtk-skin-color-primary))); color: var(--hrtk-skin-color-searchbar-filters-text, var(--hrtk-skin-color-on-primary)); } /* Real front-end Explorer submit button is `.hk-button` inside `.hfse-form-submit-field-container` — NOT `.hfse-form-submit-btn`, which only exists in the admin preview mock. The plugin paints it #000 via `.hfse-form-submit-field-container .hk-button:not(:disabled)` (0,3,0), so the `.hrtk-skin`-prefixed selector below wins at 0,4,0 without !important. Uses the same submit tokens as the preview-mock rule above for parity. */ .hrtk-skin .hfse-form-submit-field-container .hk-button:not(:disabled) { background: var(--hrtk-skin-color-searchbar-submit-bg, var(--hrtk-skin-color-primary)); color: var(--hrtk-skin-color-searchbar-submit-text, var(--hrtk-skin-color-on-primary)); } .hrtk-skin .hfse-form-submit-field-container .hk-button:not(:disabled):hover, .hrtk-skin .hfse-form-submit-field-container .hk-button:not(:disabled):focus-visible { background: var(--hrtk-skin-color-searchbar-submit-hover, var(--hrtk-skin-color-primary-hover, var(--hrtk-skin-color-primary))); color: var(--hrtk-skin-color-searchbar-submit-text, var(--hrtk-skin-color-on-primary)); } /* Reset (Start Over) button — default style. */ .hrtk-skin .hfse-form .hfse-form-reset-btn { background: transparent; color: var(--hrtk-skin-color-text); border: 1px solid var(--hrtk-skin-color-border); border-radius: var(--hrtk-skin-radius-button); padding: 6px 14px; font-size: 14px; display: inline-flex; align-items: center; gap: 6px; } /* =========================================================================== * Flag: searchbar.show_labels = false → hide every field label. * ========================================================================= */ .hrtk-skin--searchbar-show-labels-off .hfse-form .field-label, .hrtk-skin--searchbar-show-labels-off .hfse-form [class*="hfse-form-"][class*="-field-label"] { display: none; } /* =========================================================================== * Flag: searchbar.position = floating → searchbar floats above the * grid+map area instead of sitting inline above the grid only. * * The .homepagesearch wrapper (HCS convention for the homepage Explorer * placement) reverts this so the same preset supports both placements. * ========================================================================= */ @media (min-width: 960px) { .hrtk-skin--searchbar-position-floating .hfse { position: relative; padding-top: 90px; } .hrtk-skin--searchbar-position-floating .hfse > form .hfse-form-primary-fields, .hrtk-skin--searchbar-position-floating .hfse .hfse-form-primary-fields { position: absolute; top: 0; left: 0; right: 0; width: 100%; /* Constrain + center so the floating bar isn't forced edge-to-edge. Blank token → 100% (full width, prior behavior). */ max-width: var(--hrtk-skin-searchbar-floating-max-width, 100%); margin-left: auto; margin-right: auto; } /* Flag: searchbar.sticky = true (floating only) → the bar keeps its floating overlay look, and once the Explorer scrolls under it the `hrtk-skin-searchbar-pinned` class (toggled by homerunner-skin.js) switches it to position:fixed so it stays pinned over the content at the top of the viewport. left/right/max-width/margin carry over from the floating rule above, so it stays centered + width-constrained. */ body.hrtk-skin-searchbar-pinned.hrtk-skin--searchbar-position-floating.hrtk-skin--searchbar-sticky-on .hfse > form .hfse-form-primary-fields, body.hrtk-skin-searchbar-pinned.hrtk-skin--searchbar-position-floating.hrtk-skin--searchbar-sticky-on .hfse .hfse-form-primary-fields { position: fixed; top: 0; z-index: 50; } /* Homepage placement opt-out — keep static positioning. */ .hrtk-skin--searchbar-position-floating .homepagesearch .hfse { position: static; padding-top: 0; } .hrtk-skin--searchbar-position-floating .homepagesearch .hfse-form-primary-fields { position: static; top: auto; left: auto; right: auto; width: auto; } /* Homepage never pins — keep static even when the body carries the pinned class. Specificity beats the pinned rule above. */ body.hrtk-skin-searchbar-pinned.hrtk-skin--searchbar-position-floating.hrtk-skin--searchbar-sticky-on .homepagesearch .hfse-form-primary-fields, .hrtk-skin--searchbar-position-floating.hrtk-skin--searchbar-sticky-on .homepagesearch .hfse-form-primary-fields { position: static; } } /* =========================================================================== * Flag: searchbar.reset_btn_style = text-minimal → Start Over becomes a * borderless text/icon link. * ========================================================================= */ /* The reset btn carries the UIkit `.hk-button` class which ships a default * border-radius/padding/border via UIkit itself. Beat the lot with defensive * resets so the text-minimal variant reads as a plain text link with an * icon. */ .hrtk-skin--searchbar-reset-btn-style-text-minimal .hfse-form-reset-btn, .hrtk-skin--searchbar-reset-btn-style-text-minimal .hfse-form .hfse-form-reset-btn { background: transparent; color: var(--hrtk-skin-color-muted); border: 0; outline: 0; box-shadow: none; padding: 0; font-size: 14px; line-height: 1.4; text-transform: none; font-weight: 400; min-height: 0; } .hrtk-skin--searchbar-reset-btn-style-text-minimal .hfse-form-reset-btn:hover, .hrtk-skin--searchbar-reset-btn-style-text-minimal .hfse-form .hfse-form-reset-btn:hover { color: var(--hrtk-skin-color-text); background: transparent; } /* =========================================================================== * Flag: searchbar.submit_text_transform = uppercase. * ========================================================================= */ .hrtk-skin--searchbar-submit-text-transform-uppercase .hfse-form .hfse-form-submit-btn { text-transform: uppercase; letter-spacing: 0.05em; } /* =========================================================================== * Property card — base. * ========================================================================= */ .hrtk-skin .hfse-property-container .hk-card { border-radius: var(--hrtk-skin-radius-card); box-shadow: var(--hrtk-skin-shadow-card); overflow: hidden; } .hrtk-skin .hfse-property-card .hk-slideshow, .hrtk-skin .hfse-property-card .hk-slideshow-items, .hrtk-skin .hfse-property-card .hk-slideshow-items > li, .hrtk-skin .hfse-property-card img, .hrtk-skin .hfse-property-card .hfse-property-slideshow-image { /* Slideshow corner radius is independent of the card radius; blank token falls back to the card radius so existing presets are unchanged. */ border-radius: var(--hrtk-skin-radius-slideshow, var(--hrtk-skin-radius-card)); } /* Slideshow dot navigation. */ .hrtk-skin .hk-dotnav a, .hrtk-skin .hfse-property-card .hk-dotnav a { width: var(--hrtk-skin-card-dotnav-size); height: var(--hrtk-skin-card-dotnav-size); } /* Card body & content padding — the HR plugin's `.hk-card-small .hk-card-body` * ships with 20px vertical padding that creates a tall empty gap between the * image and the title/meta block when subtitle/type-icon are hidden. Tighten * the body and reset top spacing on the property-body so meta hugs the image. * * Per-side controls (not a shorthand) so a theme that wants extra side gutter * can re-add it via @layer hrtk-skin-site without us reverting the vertical. * * `flex: 0 1 auto` stops UIkit's hk-card-body from growing to fill the card * column. The card is `hk-flex hk-flex-column`; meta renders as a sibling * below body; without this rule the body grows to fill remaining height and * leaves an empty gap between the title (top of body) and meta (after body). */ .hrtk-skin .hfse-property-card .hk-card-body { padding-top: var(--hrtk-skin-space-card-body-y, 12px); padding-bottom: var(--hrtk-skin-space-card-body-y, 0px); padding-left: var(--hrtk-skin-space-card-body-x, 0px); padding-right: var(--hrtk-skin-space-card-body-x, 0px); flex: 0 1 auto; } .hrtk-skin .hfse-property-body { padding-top: 8px; } /* Vertical gap between meta-primary (locations/type) and meta-secondary * (guests/beds/baths). Default keeps prior behavior (no row gap). */ .hrtk-skin .hfse-property-meta { display: flex; flex-direction: column; gap: var(--hrtk-skin-space-card-meta-gap, 0px); /* Card is a flex column; pushing the meta block to the bottom keeps the * guests/beds/baths row aligned across cards with different title heights. */ margin-top: auto; } /* Bottom margin on the media area (image) before card body content begins. */ .hrtk-skin .hfse-property-card .hk-card-media-top { margin-bottom: var(--hrtk-skin-space-card-image-mb, 0px); } /* Title typography. */ .hrtk-skin .hfse-property-title { font-family: var(--hrtk-skin-font-family-title, inherit); font-size: var(--hrtk-skin-font-size-card-title); text-transform: var(--hrtk-skin-text-transform-title); margin-top: 0.6rem; margin-bottom: 0; } /* Location text. Neutral by default so it matches the property-type label; * was previously forced to the brand primary, which read as an unwanted * link-blue/purple on the card. */ .hrtk-skin .hfse-property-locations { color: inherit; } /* Secondary meta (guests/beds/baths). Spacing is gap-driven: items sit left * with a fixed gap so they never crowd. The secondary-meta-width token now * acts as an optional max-width cap rather than the spacing driver. */ .hrtk-skin .hfse-property-meta-secondary { max-width: var(--hrtk-skin-card-secondary-meta-width, none); width: auto; font-size: var(--hrtk-skin-font-size-secondary-meta); display: flex; justify-content: flex-start; gap: 14px; } .hrtk-skin .hfse-property-meta-secondary .hfse-property-guests, .hrtk-skin .hfse-property-meta-secondary .hfse-property-bedrooms, .hrtk-skin .hfse-property-meta-secondary .hfse-property-bathrooms { background-size: var(--hrtk-skin-card-icon-size); padding: 4px 0 4px 22px; } /* Price block — default position (inline below meta). */ .hrtk-skin .hfse-property-price-container { font-size: 15px; line-height: 1.4; } /* =========================================================================== * Flag: card.image_aspect = 1/1 | 3/4 | 4/3 | 16/9 * ========================================================================= */ .hrtk-skin--card-image-aspect-1-1 .hfse-property-card .hk-slideshow-items, .hrtk-skin--card-image-aspect-1-1 .hfse-property-card .hk-card-media-top { aspect-ratio: 1 / 1; } .hrtk-skin--card-image-aspect-3-4 .hfse-property-card .hk-slideshow-items, .hrtk-skin--card-image-aspect-3-4 .hfse-property-card .hk-card-media-top { aspect-ratio: 3 / 4; } .hrtk-skin--card-image-aspect-4-3 .hfse-property-card .hk-slideshow-items, .hrtk-skin--card-image-aspect-4-3 .hfse-property-card .hk-card-media-top { aspect-ratio: 4 / 3; } .hrtk-skin--card-image-aspect-16-9 .hfse-property-card .hk-slideshow-items, .hrtk-skin--card-image-aspect-16-9 .hfse-property-card .hk-card-media-top { aspect-ratio: 16 / 9; } /* When any fixed aspect ratio is selected, the aspect-locked media box is taller/shorter than the image's natural size. Make the slideshow chain and images fill that box and cover-crop, otherwise the image renders at its natural height and leaves an empty band below it (the "gap under image"). NOTE: do NOT set height:100% on .hk-card-media-top itself — its height must come from aspect-ratio. In a stretched grid row, height:100% would let it absorb leftover card height and break the ratio (inconsistent image heights). */ [class*="hrtk-skin--card-image-aspect-"] .hfse-property-card .hk-slideshow, [class*="hrtk-skin--card-image-aspect-"] .hfse-property-card .hk-slideshow-items, [class*="hrtk-skin--card-image-aspect-"] .hfse-property-card .hk-slideshow-items > li { /* The HR Explorer renders the slideshow as a UIkit `hk-slideshow` with a * `ratio:` attr (explorer.js). When that ratio is empty UIkit sizes each * slideshow to its first image's natural ratio via an INLINE min-height, * which beats a plain stylesheet `height:100%` and leaves card images at * inconsistent heights. Override that inline sizing so the media box's * aspect-ratio (set above) is the single source of truth. */ height: 100% !important; min-height: 0 !important; } [class*="hrtk-skin--card-image-aspect-"] .hfse-property-card img, [class*="hrtk-skin--card-image-aspect-"] .hfse-property-card .hfse-property-slideshow-image { width: 100%; height: 100%; object-fit: cover; } /* =========================================================================== * Flag: card.show_subtitle = false * ========================================================================= */ .hrtk-skin--card-show-subtitle-off .hfse-property-subtitle { display: none; } /* =========================================================================== * Flag: card.show_type_icon = false → drop the property-types prefix icon. * ========================================================================= */ .hrtk-skin--card-show-type-icon-off .hfse-property-types { background-image: none; padding-left: 0; } /* =========================================================================== * Flag: card.show_card_shadow = false * ========================================================================= */ .hrtk-skin--card-show-card-shadow-off .hfse-property-container .hk-card, .hrtk-skin--card-show-card-shadow-off .hfse-property-container:hover .hk-card { box-shadow: none; } /* =========================================================================== * Flag: card.show_top_divider = true → thin divider above each card. * ========================================================================= */ .hrtk-skin--card-show-top-divider-on .hfse-property-container { border-top: 1px solid var(--hrtk-skin-color-divider); padding-top: 20px; } /* =========================================================================== * Flag: card.show_secondary_meta_divider = false → drop the line above * guests/beds/baths. * ========================================================================= */ .hrtk-skin--card-show-secondary-meta-divider-off .hfse-property-meta-secondary { border-top: none; padding-top: 0; } /* =========================================================================== * Flag: card.meta_layout = row-spaced → title/location/type sit on one * row, justified between, instead of stacked. * ========================================================================= */ .hrtk-skin--card-meta-layout-row-spaced .hfse-property-meta-primary { display: flex; flex-direction: row; justify-content: space-between; align-items: baseline; margin-bottom: 10px; } /* =========================================================================== * Flag: card.price_arrangement = ... * Reorders the three siblings inside .hfse-property-price-container via * flex `order`, and hides the separator dot. * ========================================================================= */ .hrtk-skin--card-price-arrangement-per-night-only .hfse-property-price-container, .hrtk-skin--card-price-arrangement-per-night-then-total .hfse-property-price-container, .hrtk-skin--card-price-arrangement-total-only .hfse-property-price-container { display: flex; flex-direction: column; } .hrtk-skin--card-price-arrangement-per-night-only .hfse-property-price-container .hfse-property-price-sep, .hrtk-skin--card-price-arrangement-per-night-then-total .hfse-property-price-container .hfse-property-price-sep, .hrtk-skin--card-price-arrangement-total-only .hfse-property-price-container .hfse-property-price-sep { display: none; } /* per-night-only: hide total + tax */ .hrtk-skin--card-price-arrangement-per-night-only .hfse-property-price-container .hfse-property-price { order: 1; } .hrtk-skin--card-price-arrangement-per-night-only .hfse-property-price-container .hfse-property-price-total, .hrtk-skin--card-price-arrangement-per-night-only .hfse-property-price-container .hfse-property-tax-note { display: none; } /* per-night-then-total: per-night on top, total below, tax hidden */ .hrtk-skin--card-price-arrangement-per-night-then-total .hfse-property-price-container .hfse-property-price { order: 1; } .hrtk-skin--card-price-arrangement-per-night-then-total .hfse-property-price-container .hfse-property-price-total { order: 2; } .hrtk-skin--card-price-arrangement-per-night-then-total .hfse-property-price-container .hfse-property-tax-note { display: none; } /* total-only: hide per-night + tax */ .hrtk-skin--card-price-arrangement-total-only .hfse-property-price-container .hfse-property-price-total { order: 1; } .hrtk-skin--card-price-arrangement-total-only .hfse-property-price-container .hfse-property-price, .hrtk-skin--card-price-arrangement-total-only .hfse-property-price-container .hfse-property-tax-note { display: none; } /* =========================================================================== * Flag: card.price_position = absolute-bottom-right * ========================================================================= */ /* `.hfse-property-price-container` is rendered as a child of * `.hfse-property-body` (see homerunner-plugin/assets/js/explorer.js:1679 * + 1717), NOT of .hfse-property-meta. Position against the outermost * `.hfse-property-card` so the price floats over the bottom-right of the * full card, alongside the secondary meta which sits to its left. */ .hrtk-skin--card-price-position-absolute-bottom-right .hfse-property-card { position: relative; } .hrtk-skin--card-price-position-absolute-bottom-right .hfse-property-price-container { position: absolute; bottom: 16px; right: 16px; min-width: 140px; text-align: right; display: flex; flex-direction: column; align-items: flex-end; z-index: 1; margin-top: 0; } .hrtk-skin--card-price-position-absolute-bottom-right .hfse-property-price, .hrtk-skin--card-price-position-absolute-bottom-right .hfse-property-price-total { text-align: right; width: 100%; } /* =========================================================================== * Flag: card.show_tax_line = false * ========================================================================= */ .hrtk-skin--card-show-tax-line-off .hfse-property-tax-note { display: none; } /* =========================================================================== * Modal / dropdown panels (zone, date, guests, additional-filters). * * Plugin templates emit `.hfse-form-zone-options .hk-modal`, * `.hfse-form-date-options .hk-modal`, etc. The additional-filters modal * carries no variant class so we target it by id-prefix. * ========================================================================= */ .hrtk-skin .hk-modal-dialog, .hrtk-skin .hfse-form-zone-options .hk-modal, .hrtk-skin .hfse-form-date-options .hk-modal, .hrtk-skin .hfse-form-guests-options .hk-modal, .hrtk-skin [id^="hfse-form-additional-filters-modal-"] .hk-modal { background: #ffffff; border-radius: var(--hrtk-skin-radius-modal); box-shadow: var(--hrtk-skin-shadow-modal); border: 1px solid var(--hrtk-skin-color-border); } .hrtk-skin .hk-modal-dialog .hk-modal-header, .hrtk-skin .hk-modal-dialog .hk-modal-footer { border-color: var(--hrtk-skin-color-divider); } .hrtk-skin .hk-modal-dialog .hk-h4, .hrtk-skin .hk-modal-dialog .hk-modal-title { font-family: var(--hrtk-skin-font-family-title, inherit); color: var(--hrtk-skin-color-text); } /* Region / city buttons inside the location modal. */ .hrtk-skin .hfse-form-zone-location, .hrtk-skin .hfse-form-zone-city { background: var(--hrtk-skin-color-surface); border: 1px solid var(--hrtk-skin-color-border); border-radius: var(--hrtk-skin-radius-input); transition: border-color 200ms ease, box-shadow 200ms ease; } .hrtk-skin .hfse-form-zone-location:hover, .hrtk-skin .hfse-form-zone-city:hover { border-color: var(--hrtk-skin-color-primary); } /* Guests modal +/− controls. */ .hrtk-skin .hfse-number-with-control { display: inline-flex; align-items: stretch; border: 1px solid var(--hrtk-skin-color-border); border-radius: var(--hrtk-skin-radius-input); overflow: hidden; } .hrtk-skin .hfse-number-with-control .reduce-btn, .hrtk-skin .hfse-number-with-control .increase-btn { background: var(--hrtk-skin-color-surface); color: var(--hrtk-skin-color-text); border: 0; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; transition: background 200ms ease, color 200ms ease; } .hrtk-skin .hfse-number-with-control .reduce-btn:hover, .hrtk-skin .hfse-number-with-control .increase-btn:hover { background: var(--hrtk-skin-color-primary); color: var(--hrtk-skin-color-on-primary); } .hrtk-skin .hfse-number-with-control .number-input { border: 0; border-left: 1px solid var(--hrtk-skin-color-border); border-right: 1px solid var(--hrtk-skin-color-border); background: #ffffff; width: 34px; height: 32px; text-align: center; font-weight: 600; color: var(--hrtk-skin-color-text); } /* Filters modal checkboxes. */ .hrtk-skin .filter-feature .hk-checkbox, .hrtk-skin .filter-type .hk-checkbox { border: 1px solid var(--hrtk-skin-color-primary); border-radius: var(--hrtk-skin-radius-input); } .hrtk-skin .filter-feature .hk-checkbox:checked, .hrtk-skin .filter-type .hk-checkbox:checked, .hrtk-skin .hk-checkbox:checked { background-color: var(--hrtk-skin-color-primary); border-color: var(--hrtk-skin-color-primary); } /* Modal footer "Apply" / "Next" button. */ .hrtk-skin .hk-modal-dialog .hfse-modal-next-button, .hrtk-skin .hk-modal-dialog .hfse-modal-apply-button { background: var(--hrtk-skin-color-primary); color: var(--hrtk-skin-color-on-primary); border: 0; border-radius: var(--hrtk-skin-radius-button); padding: 10px 22px; text-transform: var(--hrtk-skin-text-transform-title); } .hrtk-skin .hk-modal-dialog .hfse-modal-next-button:hover, .hrtk-skin .hk-modal-dialog .hfse-modal-apply-button:hover { background: var(--hrtk-skin-color-primary-hover, var(--hrtk-skin-color-primary)); } /* =========================================================================== * Map tooltip — desktop accent color on the price. * ========================================================================= */ .hrtk-skin .hfse-map-tooltip-content .hfse-property-infowindow-price strong { color: var(--hrtk-skin-color-primary); } /* =========================================================================== * Mobile baseline — ensure inputs are ≥16px so iOS doesn't auto-zoom on * focus. The HR plugin's _explorer-modal.scss patches .hk-input only at * Abode-discovered min-size; we extend coverage. * ========================================================================= */ @media (max-width: 640px) { .hrtk-skin .hfse-form-additional-filters-options input, .hrtk-skin .hfse-form-additional-filters-options select, .hrtk-skin .hfse-form-additional-filters-options textarea, .hrtk-skin .hfse-form-modal input, .hrtk-skin .hfse-form-modal select, .hrtk-skin .hfse-form-modal textarea { font-size: 16px; } }