by ProWhereField, so the `[data-state]` half never matches
Where. Specificity is (0,2,0) / (0,3,0) against the base rule's
(0,1,0) / (0,2,0), so this wins without !important. */
.hfse-sbp-mobile-stage .hfse-sbp-field-active,
.hfse-sbp-mobile-stage .hfse-sbp-field-btn[data-state="open"] {
background-color: transparent;
box-shadow: none;
}
.hfse-sbp-mobile-stage .hfse-sbp-listbox {
position: static;
box-shadow: none;
max-width: none;
/* The base popover floor (280px, explorer.css ~2894) exceeds a 320px
viewport minus the sheet gutters; inline in the sheet the card sets the
width, so the floor only clips (#1072 D1 tabs made it visible). */
min-width: 0;
padding-top: 0;
/* r7 #936: module architecture — each stage scrolls INSIDE its card
(suggestions capped at 32vh, searchbar-pro.css:3201-3221) so the stages
below stay reachable without scrolling the whole sheet body.
r8 #937: rail hidden along with the other sheet rails — one sheet, one
rule; a lone visible rail here would read as an oversight. */
max-height: 32vh;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.hfse-sbp-mobile-stage .hfse-sbp-listbox::-webkit-scrollbar {
display: none;
}
/* --- Sheet Where dress (#935 item 3): module __mobile-input-wrap + the
two-line rounded suggestion rows (searchbar-pro.css:2911-2948, 3186-3273).
All sheet-scoped — the desktop combobox keeps its own shape. --- */
.hfse-sbp-where-input-row-sheet {
display: flex;
align-items: center;
gap: 10px;
background: var(--hfse-card-bg, #fff);
border: 1px solid var(--hfse-border, #ddd);
border-radius: min(12px, var(--hfse-sbp-shape-max, 999px));
padding: 0 14px;
transition: border-color 0.15s ease;
}
.hfse-sbp-where-input-row-sheet:focus-within {
border-color: var(--hfse-foreground, #222);
box-shadow: 0 0 0 1px var(--hfse-foreground, #222);
}
.hfse-sbp-where-input-icon {
display: inline-flex;
flex: 0 0 auto;
color: var(--hfse-muted-foreground, #717171);
}
.hfse-sbp-where-input-row-sheet .hfse-sbp-where-input {
padding: 14px 0; /* module __mobile-input: tall touch target inside the wrap */
font-size: calc(var(--hfse-sbp-input-size, 15px) + 1px); /* module: 16px */
border: 0;
background: transparent;
}
.hfse-sbp-suggestions-label {
margin: 20px 0 10px;
font-size: calc(var(--hfse-sbp-input-size, 15px) - 2px); /* module __mobile-suggestions-label: 13px */
font-weight: 600;
color: var(--hfse-muted-foreground, #717171);
letter-spacing: 0.02em;
text-transform: uppercase;
}
/* r6 item 3 dress: rounded hover/active rows (the widget's were sharp) with
the module's 48px icon tile and two-line name + dimension subtitle. */
.hfse-sbp-mobile-stage .hfse-sbp-listbox-item {
gap: 14px;
padding: 12px 8px;
border-radius: min(12px, var(--hfse-sbp-shape-max, 999px));
}
.hfse-sbp-mobile-stage .hfse-sbp-listbox-item-icon {
width: 48px;
height: 48px;
border-radius: min(12px, var(--hfse-sbp-shape-max, 999px));
}
.hfse-sbp-mobile-stage .hfse-sbp-listbox-item-icon svg {
width: 22px;
height: 22px;
}
.hfse-sbp-listbox-item-text {
display: flex;
flex-direction: column;
min-width: 0;
}
.hfse-sbp-listbox-item-name {
font-weight: 600; /* module __mobile-suggestion-label: 15px/600 */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.hfse-sbp-listbox-item-sub {
font-size: calc(var(--hfse-sbp-input-size, 15px) - 2px); /* module __mobile-suggestion-sub: 13px */
color: var(--hfse-muted-foreground, #717171);
margin-top: 2px;
}
/* --- Sheet accordion (Eli r5): stage headers + inline section bodies -------
The module sheet expands each section IN PLACE (one active stage, others
collapsed to label+summary rows); the widget's stage dialogs are gone below
933px. The header button reuses the field-card classes, so the collapsed
look is exactly the previous stage card; while its stage is active the
value/summary line hides (module: the active header keeps only the small
label) and the body renders inside the same card. */
.hfse-sbp-mobile-stage .hfse-sbp-stage-header {
border: 0;
background: transparent;
text-align: left;
cursor: pointer;
/* r6 item 5 (#935): collapsed rows read name LEFT + instruction RIGHT on
one line (module __mobile-stage-header, css:2842-2856) instead of the
old stacked caps-label-over-value. r7 (#936): the module row is padded
16px 20px with no minimum height — the field rule's 12px 18px + 60px
min-height made collapsed rows read denser and taller than the module's. */
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 16px 20px;
min-height: 0;
}
.hfse-sbp-mobile-stage .hfse-sbp-stage-header .hfse-sbp-field-label {
font-size: calc(var(--hfse-sbp-input-size, 15px) - 1px); /* module __mobile-stage-label: 14px/500 */
font-weight: 500;
line-height: 1.4;
text-transform: none;
letter-spacing: normal;
}
.hfse-sbp-mobile-stage .hfse-sbp-stage-header .hfse-sbp-field-value {
font-size: calc(var(--hfse-sbp-input-size, 15px) - 1px); /* module __mobile-stage-summary: 14px/600 */
font-weight: 600;
max-width: 60%;
}
/* Module instructions render in the summary's own strength ("When | Add
dates" both read as content, css:2862-2870), not a muted placeholder tone. */
.hfse-sbp-mobile-stage .hfse-sbp-stage-header .hfse-sbp-field-placeholder {
color: var(--hfse-foreground, #222);
}
.hfse-sbp-stage-active .hfse-sbp-stage-header .hfse-sbp-field-value {
display: none;
}
.hfse-sbp-stage-active .hfse-sbp-stage-header {
min-height: 0;
padding-bottom: 0;
}
.hfse-sbp-mobile-stage .hfse-sbp-stage-body {
padding: 4px 20px 22px; /* module __mobile-stage-body (css:2872-2875) */
}
/* Stage-advance fade-up (r7 #936): the module animates the incoming stage
body — 0.28s ease-out fade with a 6px drop-in, plus the shrunk header
label fading from 40% (hrtk-sbp-stage-fade-in / -label-shrink,
searchbar-pro.css:2876-2896). The animation rides the active-class flip,
so the JS stays a pure class toggle. */
@keyframes hfse-sbp-stage-fade-in {
from { opacity: 0; transform: translateY(-6px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes hfse-sbp-stage-label-fade {
from { opacity: 0.4; }
to { opacity: 1; }
}
.hfse-sbp-mobile-stage.hfse-sbp-stage-active .hfse-sbp-stage-body {
animation: hfse-sbp-stage-fade-in 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
.hfse-sbp-mobile-stage.hfse-sbp-stage-active .hfse-sbp-stage-header .hfse-sbp-field-label {
animation: hfse-sbp-stage-label-fade 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Killed in the file-final reduced-motion block, like every other hfse-sbp
animation — the QA guard maps each animation selector into that one list. */
/* Sheet header: module centres the title between the back and close circles
(searchbar-pro.css:2769-2816) — and the absolutely-positioned Back would
otherwise sit on top of a left-aligned title. */
.hr-dialog-content.hfse-sbp-mobile-sheet .hk-modal-header {
display: flex;
justify-content: center;
align-items: center;
/* Module header: 14px vertical (css:2760-2768); sides stay 56px so the
title clears the circular Back/Close buttons. */
padding: 14px 56px;
}
/* Module __mobile-title: 16px/600 (searchbar-pro.css:2769-2774). */
.hr-dialog-content.hfse-sbp-mobile-sheet .hk-modal-header .hk-h4 {
font-size: calc(var(--hfse-sbp-input-size, 15px) + 1px);
font-weight: 600;
}
/* Module Back: circular header icon button, mirror of the close X
(searchbar-pro.css:2794-2816): 36px circle at left 12px, 1px #ddd border,
vertically centred on the title line (top 7px lands the 36px circle's
centre on the 14px-padded 16px title). r7 #936 dressed the border/offsets
to the module values — the old 16/16 + shadow rode above the title. */
.hfse-sbp-mobile-back-btn {
position: absolute;
top: 7px;
left: 12px;
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border: 1px solid var(--hfse-border, #ddd);
border-radius: var(--hfse-sbp-shape-max, 999px);
background: var(--hfse-card-bg, #fff);
color: var(--hfse-foreground, #222);
cursor: pointer;
}
.hfse-sbp-mobile-back-btn:hover {
background: var(--hfse-input-bg, #f3f3f3);
}
/* Module close (searchbar-pro.css:2774-2792): same circle on the right. The
element carries inline base styles (ui/dialog.tsx closeButtonStyle), so
the sheet-scoped restyle needs !important to beat them. */
.hr-dialog-content.hfse-sbp-mobile-sheet .hr-dialog-close {
top: 7px !important;
right: 12px !important;
width: 36px !important;
height: 36px !important;
border: 1px solid var(--hfse-border, #ddd) !important;
border-radius: var(--hfse-sbp-shape-max, 999px) !important;
background: var(--hfse-card-bg, #fff) !important;
opacity: 1 !important;
color: var(--hfse-foreground, #222);
}
.hr-dialog-content.hfse-sbp-mobile-sheet .hr-dialog-close:hover {
background: var(--hfse-input-bg, #f3f3f3) !important;
}
.hr-dialog-content.hfse-sbp-mobile-sheet .hr-dialog-close svg {
width: 14px;
height: 14px;
}
.hfse-sbp-mobile-back-btn svg {
display: block;
}
/* Inline calendar sizing: #930's 44px cells were sized for the 850px desktop
panel — 7 of them plus border-spacing need 308px, and the stage body offers
~282px at a 390px viewport, clipping the Saturday column (measured on the
first accordion strip). Size cells for the card and let fixed table layout
split whatever width is actually there. */
.hfse-sbp-mobile-stage .hfse-rdp {
--rdp-cell: 38px;
}
.hfse-sbp-mobile-stage .hfse-rdp-month-grid {
width: 100%;
table-layout: fixed;
}
/* Section question — module __mobile-stage-question ("Where to?" etc.). */
.hfse-sbp-stage-question {
margin: 2px 0 16px;
font-size: calc(var(--hfse-sbp-input-size, 15px) + 7px);
font-weight: 700; /* module __mobile-stage-question: 22px/700 (css:2904-2909) */
line-height: 1.2;
color: var(--hfse-foreground, #111827);
}
/* Inline what panes sit inside the padded stage body — swap the dialog pane's
asymmetric gutters (-4px/+4px left, 12px right) for a symmetric negative-
margin pair. Net content position is the stage-body edge (the bare
padding-left:0 of the first pass left the base rule's -4px margin unbalanced,
shifting the pane 4px left of the question), and the clip edge moves 4px out
both sides so the 28px price-slider thumbs — which overhang the 12px-inset
track by 14px at the extremes — paint fully instead of losing 2px to the
pane's overflow-x:hidden (overflow tripwire catch, 2026-08-08). */
.hfse-sbp-what-inline .hfse-sbp-what-pane {
margin: 0 -4px;
padding: 0 4px;
}
/* Footer actions pair (module __mobile-footer-actions): outlined Next beside
the Search CTA, right-aligned as a unit. */
.hfse-sbp-mobile-footer-actions {
display: flex;
align-items: center;
gap: 10px;
margin-left: auto;
}
.hfse-sbp-mobile-next-btn {
padding: 12px 20px;
border: 1px solid var(--hfse-border, #d1d5db);
border-radius: min(10px, var(--hfse-sbp-shape-max, 999px));
background: transparent;
color: var(--hfse-foreground, #111827);
font-size: calc(var(--hfse-sbp-input-size, 15px) + 1px);
font-weight: 600;
text-transform: none;
cursor: pointer;
}
/* Sheet footer CTA. The reference's mobile action button is content-sized and
ALWAYS labelled — the collapse/expand morph is desktop-only
(searchbar-pro.css:2836-2880, `__mobile-action`) — so it deliberately
shares nothing with `.hfse-sbp-submit`. What it does need is to stop
inheriting the widget's generic `.hk-button` chrome (uppercase, 13px, 4px
radius), which is where Eli's "SEARCH · 6" casing came from. */
.hfse-sbp-mobile-search-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 14px 22px;
border-radius: min(10px, var(--hfse-sbp-shape-max, 999px));
background-color: var(--hfse-sbp-accent, #ff385c) !important;
color: #fff !important;
font-size: 16px;
font-weight: 600;
text-transform: none;
}
.hfse-sbp-mobile-search-btn svg {
display: block;
width: 16px;
height: 16px;
}
/* r6 item 4 (#935): footer dress. The reset is module __mobile-clear-all —
sentence case, underlined, ONE line (the generic .hk-button chrome
uppercased it and let "CLEAR ALL" wrap); Next takes the module's
foreground outline (css:3070-3078); both action labels refuse to wrap
like the module's content-sized buttons. */
.hr-dialog-content.hfse-sbp-mobile-sheet .hfse-modal-reset-button {
font-size: var(--hfse-sbp-input-size, 15px); /* module __mobile-clear-all: 15px/600 */
font-weight: 600;
text-transform: none;
text-decoration: underline;
color: var(--hfse-foreground, #222);
white-space: nowrap;
padding: 8px 4px;
flex: 0 0 auto;
}
.hr-dialog-content.hfse-sbp-mobile-sheet .hfse-sbp-mobile-next-btn {
border-color: var(--hfse-foreground, #222); /* module __mobile-next: 1px solid #222 */
white-space: nowrap;
}
.hr-dialog-content.hfse-sbp-mobile-sheet .hfse-sbp-mobile-search-btn {
white-space: nowrap;
}
/* Breakpoint swap — 932/933px, matching the toolkit's functional breakpoint */
@media (max-width: 932px) {
.hfse-sbp-bar {
display: none;
}
.hfse-sbp-mobile-trigger {
display: flex;
}
}
/* ==========================================================================
Searchbar Pro motion system (#870 — toolkit motion parity)
Durations/easings transcribed from assets/css/searchbar-pro.debug.css and
assets/js/searchbar-pro.js in homerunner-toolkit; line refs inline.
========================================================================== */
/* --- Sliding hover + active indicator pills -------------------------------
Toolkit css:442-500. Two absolutely-positioned pills share the bar: one
paints the hovered field, one the open field. JS writes left/width as
inline styles; CSS springs both so the pill slides laterally between
adjacent fields instead of cross-fading in place. Both sit at z-index 0,
under the field text (z-index 1). */
.hfse-sbp-hover-indicator,
.hfse-sbp-active-pill {
position: absolute;
top: 6px; /* matches the bar's padding */
left: 0;
width: 0;
height: calc(100% - 12px);
border-radius: min(999px, var(--hfse-sbp-shape-max, 999px));
opacity: 0;
pointer-events: none;
z-index: 0;
transition:
left 320ms var(--hfse-sbp-spring, ease),
width 320ms var(--hfse-sbp-spring, ease),
opacity 180ms ease;
will-change: left, width;
}
.hfse-sbp-hover-indicator {
background-color: var(--hfse-input-bg, #ebebeb);
}
.hfse-sbp-active-pill {
background-color: var(--hfse-card-bg, #fff);
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.10), 0 2px 4px rgba(0, 0, 0, 0.08);
}
.hfse-sbp-hover-indicator-visible,
.hfse-sbp-active-pill-visible {
opacity: 1;
}
/* An open field outranks a hovered one: the active pill takes over rendering
entirely (toolkit css:466-469). */
.hfse-sbp-bar-has-active .hfse-sbp-hover-indicator {
opacity: 0 !important;
}
/* --- Popover open/close crossfade -----------------------------------------
Toolkit css:1786-1807: 180ms opacity + translateY(4px) in, translateY(2px)
out, symmetric so two popovers overlap during the swap. The toolkit drives
this with --entering/--leaving classes and a JS setTimeout; Radix already
exposes the same lifecycle as [data-state], and expressing it as a real
@keyframes animation (not a transition) is what makes Radix's Presence
defer unmount until the exit finishes.
Scoped to .hfse-sbp-popover / .hfse-sbp-popover-overlay — classes the
filter dialogs add ONLY in their pro variant. The bare .hr-dialog-content
selector would have replaced common.css's scale-in and added exit
animations on every dialog in the widget, legacy variant included
(codex r1 HIGH). The dialogs are portaled, so ancestor scoping under
.hfse-sbp is not possible; a call-site class is. */
/* ENTRANCE ONLY, by structural constraint, not oversight: Radix's
DialogPortal wraps each of its DIRECT children in a Presence
(@radix-ui/react-dialog Portal — React.Children.map(children, child =>
…)), and our portal child is the unanimated .hr-dialog-wrapper
div, which unmounts the instant `open` flips. A [data-state="closed"]
animation down here on the content can never render a frame — the first
cut shipped exactly that dead code (codex fresh pass). Close is therefore
immediate, as it was before this branch; a real exit needs the shared
dialog wrapper restructured (follow-up on #870), not more CSS. */
@keyframes hfse-sbp-popover-in {
from { opacity: 0; transform: translateY(4px); }
to { opacity: 1; transform: translateY(0); }
}
.hr-dialog-content.hfse-sbp-popover[data-state="open"] {
animation: hfse-sbp-popover-in 180ms ease;
}
@keyframes hfse-sbp-overlay-in {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes hfse-sbp-overlay-out {
from { opacity: 1; }
to { opacity: 0; }
}
.hr-dialog-overlay.hfse-sbp-popover-overlay[data-state="open"] {
animation: hfse-sbp-overlay-in 180ms ease;
}
.hr-dialog-overlay.hfse-sbp-popover-overlay[data-state="closed"] {
animation: hfse-sbp-overlay-out 180ms ease;
}
/* --- Desktop popover anchoring (QA item 1) --------------------------------
The toolkit renders When/Who/Filters as popovers under the bar with NO
scrim (searchbar-pro.css:887-903 guests, 1054-1071 what, 1780-1796
datepicker); the port's dialogs are portaled, so useSbpPopover measures
the bar rect on open and writes it onto the wrapper as fixed coordinates.
These classes are stamped ONLY while such a measurement is live — the
legacy explorer, the mobile sheet's staged fields, and the below-933px
fallback never carry them. */
/* Same trick as the mobile overlay below: the scrim is an INLINE
rgba(0,0,0,0.6), and only an important author declaration outranks a
non-important inline style. The node stays (it is Radix's outside-click
catcher); only its paint goes. */
.hr-dialog-overlay.hfse-sbp-popover-overlay-anchored {
background-color: transparent !important;
}
/* The wrapper's measured width IS the popover width (full bar, or the
right-anchored 50% / min 320px) — the centred-modal caps must not
shrink it. Max height arrives from the hook via custom property: a
percentage would resolve against the auto-height wrapper and become
none. Radius/shadow/border transcribed from the toolkit popover tokens
(--hrtk-sbp-popover-radius 16px, --hrtk-sbp-popover-shadow, css:171-172,
896-900). */
.hr-dialog-content.hfse-sbp-popover-anchored {
max-width: none;
max-height: var(--hfse-sbp-popover-max-h, 85vh);
border-radius: 16px;
border: 1px solid var(--hfse-border, rgba(0, 0, 0, 0.08));
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.16);
}
/* Datepicker shell is the one popover with its own tokens in the reference:
radius 12, softer shadow (searchbar-pro.css:1790-1793). Same specificity
as the rule above — order in this file is what lets it win. */
.hfse-form-date-options.hfse-sbp-popover-anchored {
border-radius: 12px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}
/* The months FILL the full-bar-width panel (#930, Eli 8/7 parity review):
month panes flex:1 apart (base rule) and .hfse-rdp-month-grid stretches
each table to its pane, so day cells spread like the module's
repeat(7, 1fr) rows — ~55px cells around the fixed 44px circles at the
850px bar, matching the reference at the same viewport. (An earlier port
deliberately held these content-sized and centred here; that deferral was
called in by the 8/7 strip review, so no anchored-scope rules remain.) */
/* --- Guests popover: module guest-picker treatment (#931) -----------------
Transcribed from the toolkit guest picker (searchbar-pro.css:1032-1133 +
live DOM 2026-08-07): rows padded 20/0 with #ebebeb rules between (first
row 4px top, last 4px bottom), 16px/600 title over 13px muted hint, 32px
circular hairline steppers (#b0b0b0 → #222 on hover, 0.4 opacity when
capped), plain 16px count, and an underlined 13/600 footer affordance in
a 12px-top row. Scoped to the DRESS class (carried by the pro popover
dialog AND the sheet accordion's inline guests body — Eli r5) so the
classic explorer's guests modal keeps its hk form look untouched. The
DIALOG keeps its stage-until-Apply semantics and Apply label (Eli 8/5
divergence); the sheet stage live-applies like the module. Light values;
dark rides useExplorerCss (--gp-* block next to the --dp-* one). */
.hfse-sbp-guests-dress.hfse-form-guests-options {
--gp-row-border: #ebebeb;
--gp-btn-border: #b0b0b0;
--gp-btn-color: #717171;
--gp-btn-hover: #222222;
--gp-hint-color: #6b7280;
padding: 20px;
}
.hfse-sbp-guests-dress.hfse-form-guests-options .hk-modal-body > .hk-flex {
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 20px 0;
border-bottom: 1px solid var(--gp-row-border);
margin-top: 0;
}
.hfse-sbp-guests-dress.hfse-form-guests-options .hk-modal-body > .hk-flex:first-child {
padding-top: 4px;
}
.hfse-sbp-guests-dress.hfse-form-guests-options .hk-modal-body > .hk-flex:last-child {
border-bottom: 0;
padding-bottom: 4px;
}
/* The module row is a space-between pair, not a 3/5–2/5 grid — columns go
content-sized. */
.hfse-sbp-guests-dress.hfse-form-guests-options .hk-width-3-5,
.hfse-sbp-guests-dress.hfse-form-guests-options .hk-width-2-5 {
width: auto;
}
.hfse-sbp-guests-dress.hfse-form-guests-options .hk-form-label {
font-size: calc(var(--hfse-sbp-input-size, 15px) + 1px);
font-weight: 600;
color: var(--hfse-foreground, #111827);
}
.hfse-sbp-guests-dress.hfse-form-guests-options .hk-text-meta {
font-size: calc(var(--hfse-sbp-input-size, 15px) - 2px);
color: var(--gp-hint-color);
}
/* Stepper: minus / plain count / plus (module css:1102-1133). width: auto is
load-bearing — the base .hfse-number-with-control is 90px wide, which
flex-squeezed the 32px circles into 21px OVALS (r3 strip finding). */
.hfse-sbp-guests-dress.hfse-form-guests-options .hfse-number-with-control {
display: flex;
align-items: center;
gap: 12px;
width: auto;
}
.hfse-sbp-guests-dress.hfse-form-guests-options .reduce-btn,
.hfse-sbp-guests-dress.hfse-form-guests-options .increase-btn {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
flex: 0 0 32px; /* a shrinking flex item ovals the circle — never shrink */
border: 1px solid var(--gp-btn-border);
border-radius: 50%;
background: transparent;
color: var(--gp-btn-color);
font-size: calc(var(--hfse-sbp-input-size, 15px) + 3px);
line-height: 1;
cursor: pointer;
user-select: none;
transition: border-color 0.12s ease, color 0.12s ease;
}
.hfse-sbp-guests-dress.hfse-form-guests-options .reduce-btn:hover,
.hfse-sbp-guests-dress.hfse-form-guests-options .increase-btn:hover {
border-color: var(--gp-btn-hover);
color: var(--gp-btn-hover);
}
.hfse-sbp-guests-dress.hfse-form-guests-options .hfse-number-control-disabled,
.hfse-sbp-guests-dress.hfse-form-guests-options .hfse-number-control-disabled:hover {
opacity: 0.4;
cursor: not-allowed;
border-color: var(--gp-btn-border);
color: var(--gp-btn-color);
}
/* Count reads as plain text (module