via for=/id= still
has the node to attach to.
Breakpoint: 785.98px = Bootstrap convention for "strictly less than
786px", avoiding fractional-pixel edges at the boundary. Adjust to
767.98px if 768 was the intended tablet boundary.
Selector covers both the default-state label and the cancelled-state
label (which carries an additional .bfp-res-label-muted modifier);
both share .bfp-res-widget-label so a single rule reaches them.
The already-reserved state has no label at all, so it's unaffected.
═══════════════════════════════════════════════════════════════════════════ */
@media ( max-width: 785.98px ) {
.bfp-res-widget-label {
display: none;
}
}
/* ═══════════════════════════════════════════════════════════════════════════
1.18.3 — Author lockout on reservation widget + offer-input validity states
───────────────────────────────────────────────────────────────────────────
Two related additions that share a common goal: stop authors from
reserving their own posts (with a visually obvious masked state),
and tighten the offer-gate's visual feedback so visitors see at a
glance whether their typed amount passes the auto-acceptance bar
the author set.
AUTHOR LOCKOUT
──────────────
When the viewing user is the post's own author, render_reservation_inner()
emits the row with class bfp-res-widget-row--author-locked instead of
the regular bfp-res-widget-row. All interactive controls in that
branch carry the `disabled` attribute already (CSS belt-and-suspenders
below in case downstream code adds a control without it), and an
author note explains the masked state. The opacity-mask + pointer-
events: none on the row makes it visually obvious the controls are
for preview, not interaction.
OFFER-INPUT VALIDITY STATES
───────────────────────────
The visitor-side offer-gate JS now toggles two modifier classes on
the input itself to communicate format / minimum-floor status:
– bfp-res-offer-input--valid → green border, "good to go"
– bfp-res-offer-input--invalid → red border, "fix me"
A live status pill (.bfp-res-offer-status) appears next to / under
the input with a short message ("Below minimum ($99.99)", "Enter
amount as $0,000.00", "✓ Looks good"). The static "Minimum: $X.XX"
hint pill rendered server-side remains untouched — it's the pre-
input expectation; the live status is the post-input verdict.
═══════════════════════════════════════════════════════════════════════════ */
/* ── Author lockout: opacity mask + no pointer events ──────────────────── */
.bfp-res-widget-row--author-locked {
/* Visual cue: dim the whole row but keep it readable so the
author can preview the layout. 0.55 matches the [disabled]
opacity used elsewhere on .bfp-res-reserve-btn for consistency. */
opacity: 0.55;
/* Click-through prevention: even if a downstream theme or
browser quirk leaves a button visually pressable, this
rule blocks the click from doing anything. */
pointer-events: none;
/* The native cursor on the row itself reverts to default; we
set not-allowed on the descendant controls below so a hovering
author hand sees the "no" sign over the actual interactive
atoms. */
user-select: none;
}
.bfp-res-widget-row--author-locked .bfp-res-widget-select,
.bfp-res-widget-row--author-locked .bfp-res-reserve-btn,
.bfp-res-widget-row--author-locked .bfp-res-offer-input,
.bfp-res-widget-row--author-locked .bfp-res-offer-input--inline {
cursor: not-allowed;
}
/* The author note that sits below the masked row. Same visual
grammar as .bfp-res-widget-note (the visitor's "Please reserve only
what You truly need..." nudge) so the two read as siblings, but a
little darker tone so the author registers that this is informational
about THEM, not a generic visitor message. */
.bfp-res-author-note {
margin-top: 6px;
padding: 8px 12px;
border-radius: 6px;
background: #fef3c7; /* amber-100 — gentle "heads up" tone */
border: 1px solid #fde68a; /* amber-200 */
color: #78350f; /* amber-900 — accessible on amber-100 */
font-size: 12.5px;
font-style: italic;
line-height: 1.5;
}
/* ── Offer-input validity states: green / red border ───────────────────── */
/* The currency-chip + input wrapper used by the standalone price tag
(pill chrome, no reservation widget) — colours the OUTER pill so the
chip + input read as a single coloured atom. */
.bfp-res-offer-input-wrap:has( .bfp-res-offer-input--valid ) {
border-color: #15803d;
box-shadow: 0 0 0 2px rgba( 21, 128, 61, 0.15 );
}
.bfp-res-offer-input-wrap:has( .bfp-res-offer-input--invalid ) {
border-color: #b91c1c;
box-shadow: 0 0 0 2px rgba( 185, 28, 28, 0.15 );
}
/* The inline input used inside the reservation row — no pill wrap to
tint, so we colour the input's own border. Wins over the default
.bfp-res-offer-input--inline border thanks to specificity. */
.bfp-res-offer-input--inline.bfp-res-offer-input--valid {
border-color: #15803d;
box-shadow: 0 0 0 2px rgba( 21, 128, 61, 0.15 );
}
.bfp-res-offer-input--inline.bfp-res-offer-input--invalid {
border-color: #b91c1c;
box-shadow: 0 0 0 2px rgba( 185, 28, 28, 0.15 );
}
/* Fallback for browsers that don't support :has() yet (Firefox pre-121,
etc.) — colour the input itself when the modifier is present. The
pill wrap stays its default colour in that case, which is fine — the
inner field's coloured border still telegraphs the state. */
.bfp-res-offer-input.bfp-res-offer-input--valid {
outline: 1px solid #15803d;
outline-offset: -1px;
}
.bfp-res-offer-input.bfp-res-offer-input--invalid {
outline: 1px solid #b91c1c;
outline-offset: -1px;
}
/* ── Live status pill below the entire row ─────────────────────────────── */
/* Three states share a common pill shape; the ok / bad modifiers tint
the colour. Hidden via display:none until the JS has something to
say (no aria-live on empty content) so the row doesn't visibly grow
on first paint.
1.18.6: positioned as a SIBLING of .bfp-res-widget-row, on its own
horizontal line below the row. The single here serves both
purposes: display:block claims its own line, width:fit-content
shrinks the box to the message text so the rounded-pill chrome hugs
the words instead of stretching full-width. fit-content has wide
browser support (Chrome 46+, Firefox 94+, Safari 11+); the
max-content fallback line keeps Safari < 14 happy. */
.bfp-res-offer-status {
display: block;
width: -moz-max-content;
width: -webkit-max-content;
width: max-content;
max-width: 100%;
margin: 6px 0 0 0;
padding: 2px 10px;
border-radius: 999px;
font-size: 12px;
font-weight: 600;
line-height: 1.5;
transition: background-color 0.18s ease, color 0.18s ease;
text-align: left;
box-sizing: border-box;
}
.bfp-res-offer-status--ok {
background: #dcfce7; /* green-100 */
color: #15803d; /* green-700 */
}
.bfp-res-offer-status--bad {
background: #fee2e2; /* red-100 */
color: #b91c1c; /* red-700 */
}
/* ═══════════════════════════════════════════════════════════════════════════
1.18.7 → 1.18.8 — Explicit 12px gap between offer wrapper and Reserve Now
───────────────────────────────────────────────────────────────────────────
The row's flex `gap: 10px` is the same between every pair of adjacent
atoms (label↔select, select↔offer, offer↔button, button↔counter), so
strictly speaking there's no real "extra" gap after the offer wrapper —
but visually the offer↔button distance reads larger than the others
because the input's typed value (or placeholder) sits inside the
input's right padding, so the value-to-button perceptive distance
picks up the padding on top of the row gap.
1.18.8: explicit margin override pins the offer→button spacing to
exactly 12px (the user-specified target). Implementation: row `gap`
contributes 10px between the offer wrapper and the next flex child;
`margin-left: 2px` on the immediately-after-offer button adds the
remaining 2px to land at exactly 12px edge-to-edge. `!important`
trumps any theme stylesheet that might reset button margins for
buttons inside post content.
Companion rule below forces `margin-right: 0` on the offer wrapper
itself, neutralising any theme rule that injects post-content
horizontal margins on inline-flex spans.
The "invisible div footprint" the user suspected does NOT exist in
the current renders — the offer-status pill (1.18.6+) is rendered
as a SIBLING of .bfp-res-widget-row, not inside it, so it cannot
contribute horizontal space to the row. The perceived gap was the
value-to-button perceptive distance described above plus, possibly,
a stale cached older bundle where the pill DID briefly live inside
the row (1.18.3 and 1.18.5). The version bump + filemtime cache
buster takes care of the latter; this rule pins the former.
═══════════════════════════════════════════════════════════════════════════ */
.bfp-res-widget-row .bfp-res-inline-price--offer + .bfp-res-reserve-btn {
margin-left: 2px !important;
}
.bfp-res-widget-row > .bfp-res-inline-price--offer {
margin-right: 0 !important;
/* 1.18.9: explicit max-width clamp so the offer wrapper doesn't
leave a trailing "pseudo gap" on its right edge in themes that
give inline-flex elements an extra flex-shrink-derived width.
150px comfortably fits the "Offer:" label + "$" chip + the 90px
input below, with no room for stray slack. */
max-width: 150px;
}
/* Defensive: clear any margin a theme might be injecting between flex
children inside the row. Some block-editor themes (Twenty Twenty-Four,
recent Astra builds) set `margin-block: 1em` on direct children of
post content; the row sits inside post content via the_content
filter, so its flex children inherit. The explicit 0 below blocks
that override without affecting the row's own gap. */
.bfp-res-widget-row > .bfp-res-widget-label,
.bfp-res-widget-row > .bfp-res-widget-select,
.bfp-res-widget-row > .bfp-res-inline-price,
.bfp-res-widget-row > .bfp-res-reserve-btn,
.bfp-res-widget-row > .bfp-res-counter {
margin-block: 0;
margin-top: 0;
margin-bottom: 0;
}