/*!
* BFL Book V6
* Phase 1, Commit 3 — Step 1 UI (Date + Pax) + container shell.
* Version: 6.6.7
*
* Class names follow plan §6 DOM tree.
* All selectors scoped under body.bfl-v6 to prevent leakage.
* Phase 1: TM booking bar remains visible below V6 for comparison.
*/
/* ─────────────────────────────────────────────
TOKENS — local to V6
───────────────────────────────────────────── */
body.bfl-v6 {
--bv6-blue: #2563eb;
--bv6-blue-deep: #1d4ed8;
--bv6-blue-soft: #eff6ff;
--bv6-blue-tint: #f5f9ff;
--bv6-blue-shadow-sm: rgba(37, 99, 235, .15);
--bv6-blue-shadow-md: rgba(37, 99, 235, .30);
--bv6-ink: #0a1628;
--bv6-ink-soft: #5a6a7e;
--bv6-ink-faint: #94a3b8;
--bv6-line: #e1e7f0;
--bv6-line-soft: #eef2f8;
--bv6-bg: #f8fafc;
--bv6-card: #ffffff;
--bv6-shadow: 0 6px 20px -8px rgba(10, 22, 40, 0.10);
--bv6-shadow-lg: 0 12px 40px -12px rgba(37, 99, 235, 0.18);
--bv6-radius: 14px;
--bv6-radius-sm: 10px;
--bv6-green-soft: #ecfdf5;
--bv6-green-deep: #047857;
--bv6-amber-soft: #fef3c7;
--bv6-amber-deep: #92400e;
--bv6-rose-soft: #ffe4e6;
--bv6-rose-deep: #9f1239;
/* C32a — extended palette */
--bv6-amber: #d97706;
--bv6-indigo: #6366f1;
--bv6-indigo-soft: #eef2ff;
/* C32a — radius scale (coexists with --bv6-radius / --bv6-radius-sm) */
--bv6-r-sm: 8px;
--bv6-r-md: 12px;
--bv6-r-lg: 16px;
--bv6-r-xl: 20px;
/* C32a — shadow scale (coexists with --bv6-shadow-lg) */
--bv6-shadow-xs: 0 1px 2px rgba(15, 23, 42, .04);
--bv6-shadow-sm: 0 1px 3px rgba(15, 23, 42, .06), 0 1px 2px rgba(15, 23, 42, .04);
--bv6-shadow-md: 0 1px 3px rgba(15, 23, 42, .04), 0 4px 16px rgba(15, 23, 42, .06);
--bv6-shadow-focus: 0 0 0 4px rgba(37, 99, 235, .18);
/* C32a — timing scale */
--bv6-t-fast: 120ms cubic-bezier(.4, 0, .2, 1);
--bv6-t-base: 200ms cubic-bezier(.4, 0, .2, 1);
--bv6-t-slow: 320ms cubic-bezier(.4, 0, .2, 1);
}
/* ─────────────────────────────────────────────
ROOT CONTAINER
───────────────────────────────────────────── */
body.bfl-v6 .bfl-bv6-root {
background: var(--bv6-card);
/* C1–C3: hairline border, 20px radius, layered shadow. */
border: 0.5px solid var(--bv6-line);
border-radius: var(--bv6-r-xl);
padding: 0;
margin: 0 0 18px 0;
box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04), 0 12px 32px rgba(15, 23, 42, 0.08);
font-family: 'DM Sans', system-ui, sans-serif !important;
color: var(--bv6-ink);
font-size: 15px !important;
line-height: 1.5 !important;
font-size-adjust: none !important;
word-break: normal !important;
}
body.bfl-v6 .bfl-bv6-root *,
body.bfl-v6 .bfl-bv6-root *::before,
body.bfl-v6 .bfl-bv6-root *::after {
box-sizing: border-box;
}
/* Override parent-theme leaks per memory: parent injects line-height/font-size-adjust/word-break */
body.bfl-v6 .bfl-bv6-root h1,
body.bfl-v6 .bfl-bv6-root h2,
body.bfl-v6 .bfl-bv6-root h3,
body.bfl-v6 .bfl-bv6-root h4,
body.bfl-v6 .bfl-bv6-root p,
body.bfl-v6 .bfl-bv6-root span,
body.bfl-v6 .bfl-bv6-root label,
body.bfl-v6 .bfl-bv6-root button,
body.bfl-v6 .bfl-bv6-root input {
line-height: 1.5 !important;
font-size-adjust: none !important;
word-break: normal !important;
}
/* Dev-only marker — visible during Phase 1 since TM bar still shows */
body.bfl-v6 .bfl-bv6-root::before {
content: 'V6 — Phase 1 preview';
display: block;
font-size: 10px !important;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--bv6-blue);
background: var(--bv6-blue-soft);
padding: 6px 22px;
border-radius: var(--bv6-radius) var(--bv6-radius) 0 0;
}
/* ─────────────────────────────────────────────
HEADER
───────────────────────────────────────────── */
body.bfl-v6 .bfl-bv6-header {
/* D1 + C2: padding 20px 22px 18px, hairline bottom border. */
padding: 20px 22px 18px;
border-bottom: 0.5px solid var(--bv6-line);
background: var(--bv6-card);
}
body.bfl-v6 .bfl-bv6-from-label {
font-size: 11px !important;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--bv6-ink-soft);
/* D2: margin-bottom 4 → 6 */
margin-bottom: 6px;
display: block;
font-family: 'DM Sans', system-ui, sans-serif !important;
}
body.bfl-v6 .bfl-bv6-from-price {
font-family: 'Fraunces', Georgia, serif !important;
font-size: 32px !important;
font-weight: 500;
color: var(--bv6-ink);
line-height: 1.15 !important;
letter-spacing: -0.02em;
/* Item 15: Fraunces is a variable font — the optical-size axis only
responds to font-variation-settings, not font-feature-settings.
Drive both opsz and wght so the renderer picks the right master. */
font-variation-settings: 'opsz' 32, 'wght' 500;
}
body.bfl-v6 .bfl-bv6-from-price .bv6-amount {
color: var(--bv6-ink);
}
/* 6.5.5: defend the from-price amount spans against bfl-tour-v2.css:76-84
which sets `body.bfl-v2 span { font-family: 'DM Sans', ... }` and beats
inheritance from the .bfl-bv6-from-price parent. Specificity (0,3,1) +
!important wins cleanly. */
body.bfl-v6 .bfl-bv6-from-price .bv6-amount,
body.bfl-v6 .bfl-bv6-from-price .bv6-amount-sym,
body.bfl-v6 .bfl-bv6-from-price .bv6-amount-num {
font-family: 'Fraunces', Georgia, serif !important;
font-weight: 500 !important;
font-variation-settings: 'opsz' 32, 'wght' 500;
}
/* Item 2 + D3: gap between € symbol and the digits — 4 → 6px. */
body.bfl-v6 .bfl-bv6-from-price .bv6-amount-sym {
margin-right: 6px;
}
body.bfl-v6 .bfl-bv6-from-price small {
font-family: 'DM Sans', system-ui, sans-serif !important;
font-size: 13px !important;
font-weight: 400;
letter-spacing: 0;
color: var(--bv6-ink-soft);
margin-left: 6px;
}
body.bfl-v6 .bfl-bv6-tour-meta {
margin-top: 4px;
font-size: 12px !important;
color: var(--bv6-ink-soft);
}
/* ─────────────────────────────────────────────
BODY + STEP CARDS
───────────────────────────────────────────── */
body.bfl-v6 .bfl-bv6-body {
/* 6.5.6 Fix 1: top padding dropped — trust strip's padding-bottom + card
header's padding-top already supply the gap.
6.5.9 Fix 1: horizontal padding dropped too — step cards own their
own left/right padding (.bfl-bv6-card padding 0 22px), letting the
per-step bottom hairline run edge-to-edge of the widget.
6.5.35: bottom padding halved (22 → 10) — the .bfl-bv6-footer below
owns its own 16px padding-top + border-top, so the previous 22px
was creating ~38px of dead space below the last (pilled) step. */
padding: 0 0 10px;
}
/* A1: Flush card chrome — no per-card border/radius/shadow. Steps separate
only via a bottom hairline. Card's horizontal+bottom padding lives here;
header owns vertical padding via .bfl-bv6-card-header below. Active state
does NOT change the chrome (only the body opens + chevron rotates). */
body.bfl-v6 .bfl-bv6-card {
background: var(--bv6-card);
border-bottom: 0.5px solid var(--bv6-line);
padding: 0 22px 22px;
transition: background .25s, opacity .25s;
}
body.bfl-v6 .bfl-bv6-card:last-of-type {
border-bottom: none;
}
body.bfl-v6 .bfl-bv6-card-header {
display: flex;
align-items: center;
/* B5: gap 10 → 14 */
gap: 14px;
padding: 18px 0;
margin-bottom: 0;
}
/* B1–B4: 28px circle, neutral default (line-soft bg / ink-soft fg), 13/600. */
body.bfl-v6 .bfl-bv6-card-num {
width: 28px;
height: 28px;
border-radius: 50%;
background: var(--bv6-line-soft);
color: var(--bv6-ink-soft);
font-size: 13px !important;
font-weight: 600;
/* 6.5.6 Fix 2: flex-centre the digit + check glyph reliably. The old
line-height: 28px + text-align: center stack drifted off-axis for
narrow glyphs like "1" because of font-metric ascender/descender
asymmetry. */
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 1 !important;
font-variant-numeric: tabular-nums;
flex-shrink: 0;
transition: background .2s, color .2s, box-shadow .2s;
}
/* B3: active circle — blue fill + 4px halo. */
body.bfl-v6 .bfl-bv6-card.is-active .bfl-bv6-card-num {
background: var(--bv6-blue);
color: #fff;
box-shadow: 0 0 0 4px var(--bv6-blue-soft);
}
/* A2: title typography — DM Sans 14/600 (was Fraunces 18/600). */
body.bfl-v6 .bfl-bv6-card-title {
font-family: 'DM Sans', system-ui, sans-serif !important;
font-size: 14px !important;
font-weight: 600;
letter-spacing: -0.01em;
color: var(--bv6-ink);
line-height: 1.2 !important;
}
/* ─────────────────────────────────────────────
FIELD LABELS + DATE INPUT
───────────────────────────────────────────── */
body.bfl-v6 .bfl-bv6-field-group {
margin-bottom: 16px;
}
body.bfl-v6 .bfl-bv6-field-group:last-child {
margin-bottom: 0;
}
body.bfl-v6 .bfl-bv6-field-label {
font-size: 11px !important;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--bv6-ink-soft);
margin-bottom: 8px;
display: block;
}
/* Chunk 2: section-label row — left label + right-aligned hint span. */
body.bfl-v6 .bfl-bv6-field-label-row {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 8px;
margin-bottom: 8px;
}
body.bfl-v6 .bfl-bv6-field-label-row .bfl-bv6-field-label {
margin-bottom: 0;
}
body.bfl-v6 .bfl-bv6-field-hint {
font-size: 11px !important;
color: var(--bv6-ink-soft);
text-align: right;
line-height: 1.3;
}
body.bfl-v6 .bfl-bv6-date-picker {
position: relative;
}
body.bfl-v6 .bfl-bv6-date-input {
width: 100%;
border: 1.5px solid var(--bv6-line);
border-radius: var(--bv6-radius-sm);
padding: 12px 14px;
font-family: 'DM Sans', system-ui, sans-serif !important;
font-size: 15px !important;
font-weight: 500;
color: var(--bv6-ink);
background: var(--bv6-blue-tint);
outline: none;
transition: border-color .2s, background .2s, box-shadow .2s;
cursor: pointer;
-webkit-appearance: none;
appearance: none;
}
body.bfl-v6 .bfl-bv6-date-input:focus,
body.bfl-v6 .bfl-bv6-date-input:hover {
border-color: var(--bv6-blue);
background: var(--bv6-card);
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.10);
}
body.bfl-v6 .bfl-bv6-date-input.has-value {
background: var(--bv6-card);
border-color: var(--bv6-blue);
}
/* ─────────────────────────────────────────────
PAX LIST (Chunk 3 — vertical card grid)
Auto-fit columns: production may add more tiers (student/male/female)
beyond the standard adult/child/infant trio; do NOT hardcode 3.
───────────────────────────────────────────── */
body.bfl-v6 .bfl-bv6-pax-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
gap: 8px;
}
body.bfl-v6 .bfl-bv6-pax-row {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 2px;
padding: 10px 8px 8px;
/* I1–I3: white default bg, hairline border, 12px radius. */
background: var(--bv6-card);
border: 0.5px solid var(--bv6-line);
border-radius: var(--bv6-r-md);
transition: border-color .2s, background .2s;
}
body.bfl-v6 .bfl-bv6-pax-row.has-value {
border-color: var(--bv6-blue);
background: var(--bv6-blue-soft);
}
body.bfl-v6 .bfl-bv6-pax-label {
display: flex;
flex-direction: column;
gap: 1px;
min-width: 0;
width: 100%;
}
body.bfl-v6 .bfl-bv6-pax-name {
font-family: 'DM Sans', system-ui, sans-serif !important;
font-size: 12px !important;
font-weight: 600;
color: var(--bv6-ink);
line-height: 1.2 !important;
}
body.bfl-v6 .bfl-bv6-pax-age {
font-size: 10px !important;
color: var(--bv6-ink-soft);
line-height: 1.2 !important;
/* I7: 4px breathing room before the stepper. */
margin-bottom: 4px;
}
body.bfl-v6 .bfl-bv6-pax-stepper {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
flex-shrink: 0;
margin-top: 2px;
}
/* 6.5.10 Fix 1: pax tier icon dropped from renderStep1 markup. Rules left
commented for now — restoring is a 1-block uncomment + restoring the
iconHtml string in the JS template.
.bfl-bv6-pax-icon { width: 28px; height: 28px; border-radius: 50%;
background: var(--bv6-blue-soft); color: var(--bv6-blue);
display: inline-flex; align-items: center; justify-content: center;
flex: 0 0 auto; font-size: 15px; margin: 0 auto 2px; }
.bfl-bv6-pax-row.has-value .bfl-bv6-pax-icon { background: var(--bv6-card); }
*/
body.bfl-v6 .bfl-bv6-pax-btn {
width: 24px;
height: 24px;
min-width: 24px;
padding: 0;
/* I4–I6: hairline border, neutral grey glyph, 12px font. */
border: 0.5px solid var(--bv6-line);
background: var(--bv6-card);
color: #334155;
font-size: 12px !important;
font-weight: 700;
line-height: 1 !important;
border-radius: 50%;
cursor: pointer;
transition: all .15s;
display: inline-flex;
align-items: center;
justify-content: center;
font-family: inherit;
outline: none;
}
body.bfl-v6 .bfl-bv6-pax-btn:hover:not(:disabled) {
background: var(--bv6-blue);
color: #fff;
border-color: var(--bv6-blue);
transform: scale(1.04);
}
body.bfl-v6 .bfl-bv6-pax-btn:active:not(:disabled) {
transform: scale(0.92);
}
body.bfl-v6 .bfl-bv6-pax-btn:disabled {
opacity: 0.35;
cursor: not-allowed;
}
body.bfl-v6 .bfl-bv6-pax-count {
font-family: 'DM Sans', system-ui, sans-serif !important;
font-size: 14px !important;
font-weight: 700;
color: var(--bv6-ink);
min-width: 18px;
text-align: center;
font-variant-numeric: tabular-nums;
line-height: 1 !important;
}
/* ─────────────────────────────────────────────
ERROR REGION (placeholder; populated by validateState)
───────────────────────────────────────────── */
body.bfl-v6 .bfl-bv6-error-region {
margin-top: 6px;
color: #b91c1c;
font-size: 13px !important;
min-height: 0;
}
body.bfl-v6 .bfl-bv6-error-region:empty {
display: none;
}
/* ─────────────────────────────────────────────
FOOTER PLACEHOLDER (Commit 6 fills in total bar)
───────────────────────────────────────────── */
body.bfl-v6 .bfl-bv6-footer {
padding: 14px 22px 18px;
border-top: 1px solid var(--bv6-line);
background: var(--bv6-bg);
border-radius: 0 0 var(--bv6-radius) var(--bv6-radius);
font-size: 12px !important;
color: var(--bv6-ink-soft);
text-align: center;
}
body.bfl-v6 .bfl-bv6-footer-progress {
display: inline-flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
justify-content: center;
}
body.bfl-v6 .bfl-bv6-footer-progress-step {
color: var(--bv6-ink-soft);
}
body.bfl-v6 .bfl-bv6-footer-progress-step.is-done {
color: var(--bv6-blue);
font-weight: 600;
}
/* ─────────────────────────────────────────────
C31e-2: inline calendar mode — Step 1 body mount.
The !important annotations below are kept as defensive measure
against parent theme leak. The older popup-mode rules these were
originally layered against were removed in C32a (no longer
relevant; cleanup audit trail).
───────────────────────────────────────────── */
/* 6.5.32: calendar visual upgrade — V6-native styling. Replaces the
blue-tinted look from 6.5.9 with a neutral #e1e7f0 hairline + tighter
inner padding. All selectors carry !important because both the parent
theme + bfl-custom.css fight for these properties. */
body.bfl-v6 .bfl-bv6-cal-mount .ui-datepicker {
width: 100%;
padding: 12px !important;
border: 0.5px solid #e1e7f0 !important;
border-radius: 12px !important;
background: #ffffff !important;
box-shadow: none !important;
z-index: auto !important;
font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif !important;
}
/* 6.5.32: header row — chevrons + title (with month/year selects). */
body.bfl-v6 .bfl-bv6-cal-mount .ui-datepicker-header {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 8px !important;
position: relative;
background: transparent !important;
border: 0 !important;
color: var(--bv6-ink);
padding: 0 0 10px !important;
margin: 0 !important;
}
body.bfl-v6 .bfl-bv6-cal-mount .ui-datepicker .ui-datepicker-title {
margin: 0 !important;
padding: 0 !important;
/* 6.5.36: flex: 1 lets the title expand between the chevrons so the
month + year selects sit dead center via justify-content. Was
flex: 0 1 auto, which hugged the prev chevron on the left. */
flex: 1 !important;
display: flex !important;
justify-content: center !important;
align-items: center !important;
gap: 6px !important;
text-align: center !important;
font-size: 14px !important;
font-weight: 500 !important;
color: var(--bv6-ink) !important;
/* bfl-custom forces order:2 on the title to sit between prev/next.
We keep that order so the header reads [prev] [title] [next]. */
}
/* 6.5.32: native month/year selects styled as ghost buttons — no border,
transparent bg, soft hover. Beats bfl-custom.css:405-421 via specificity
(body.bfl-v6 .bfl-bv6-cal-mount = 0,4,1) + !important. */
body.bfl-v6 .bfl-bv6-cal-mount .ui-datepicker .ui-datepicker-month,
body.bfl-v6 .bfl-bv6-cal-mount .ui-datepicker .ui-datepicker-year {
appearance: none !important;
-webkit-appearance: none !important;
font-family: inherit !important;
font-size: 14px !important;
font-weight: 500 !important;
color: #0a1628 !important;
background: transparent !important;
border: 0 !important;
border-radius: 6px !important;
padding: 4px 8px !important;
margin: 0 !important;
line-height: 1.2 !important;
cursor: pointer !important;
transition: background .12s;
}
body.bfl-v6 .bfl-bv6-cal-mount .ui-datepicker .ui-datepicker-month:hover,
body.bfl-v6 .bfl-bv6-cal-mount .ui-datepicker .ui-datepicker-year:hover {
background: #f8fafc !important;
}
body.bfl-v6 .bfl-bv6-cal-mount .ui-datepicker .ui-datepicker-month:focus,
body.bfl-v6 .bfl-bv6-cal-mount .ui-datepicker .ui-datepicker-year:focus {
outline: none !important;
background: #f8fafc !important;
box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.18) !important;
}
/* 6.5.32: chevron buttons — rounded square with neutral hairline border.
position: relative + top/left/right zeroed beats jQuery UI base's
absolute positioning that would otherwise place them outside the
header flex layout. */
body.bfl-v6 .bfl-bv6-cal-mount .ui-datepicker .ui-datepicker-prev,
body.bfl-v6 .bfl-bv6-cal-mount .ui-datepicker .ui-datepicker-next {
position: relative !important;
top: 0 !important;
right: 0 !important;
left: 0 !important;
width: 32px !important;
height: 32px !important;
border-radius: 8px !important;
background: transparent !important;
border: 0.5px solid #e1e7f0 !important;
padding: 0 !important;
cursor: pointer !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
color: var(--bv6-ink-soft) !important;
flex: 0 0 auto !important;
transition: background .12s, border-color .12s;
}
body.bfl-v6 .bfl-bv6-cal-mount .ui-datepicker-prev:hover,
body.bfl-v6 .bfl-bv6-cal-mount .ui-datepicker-next:hover {
background: #f8fafc !important;
border-color: #cbd5e1 !important;
color: var(--bv6-ink) !important;
}
body.bfl-v6 .bfl-bv6-cal-mount .ui-datepicker-prev .ui-icon,
body.bfl-v6 .bfl-bv6-cal-mount .ui-datepicker-next .ui-icon,
body.bfl-v6 .bfl-bv6-cal-mount .ui-datepicker-prev::before,
body.bfl-v6 .bfl-bv6-cal-mount .ui-datepicker-next::before,
body.bfl-v6 .bfl-bv6-cal-mount .ui-datepicker-prev::after,
body.bfl-v6 .bfl-bv6-cal-mount .ui-datepicker-next::after {
display: none !important;
content: none !important;
background: none !important;
}
body.bfl-v6 .bfl-bv6-cal-mount .ui-datepicker-prev > svg.bfl-bv6-icon,
body.bfl-v6 .bfl-bv6-cal-mount .ui-datepicker-next > svg.bfl-bv6-icon {
width: 18px;
height: 18px;
stroke: currentColor;
}
body.bfl-v6 .bfl-bv6-cal-mount table.ui-datepicker-calendar {
width: 100%;
border-collapse: collapse;
margin: 0;
}
/* 6.5.32: day-of-week headers (Mon Tue Wed…). Beats bfl-custom.css's
`.tourmaster-body .ui-datepicker table thead th { font-size: 11px !important }`
via specificity + !important. */
body.bfl-v6 .bfl-bv6-cal-mount .ui-datepicker .ui-datepicker-calendar th {
font-weight: 500 !important;
font-size: 10px !important;
color: #94a3b8 !important;
letter-spacing: 0.08em !important;
text-transform: uppercase !important;
padding: 10px 0 6px !important;
text-align: center;
border: 0 !important;
background: transparent !important;
}
body.bfl-v6 .bfl-bv6-cal-mount .ui-datepicker .ui-datepicker-calendar th:nth-child(6),
body.bfl-v6 .bfl-bv6-cal-mount .ui-datepicker .ui-datepicker-calendar th:nth-child(7) {
color: #64748b !important;
}
body.bfl-v6 .bfl-bv6-cal-mount .ui-datepicker-calendar td {
padding: 2px !important;
text-align: center;
background: transparent !important;
border: 0 !important;
}
/* 6.5.32: day cells — simpler padding-based layout (was aspect-ratio
flex column at 6.5.x). Specificity 0,4,1 beats bfl-custom.css's
`.tourmaster-body .ui-datepicker table tr td a.ui-state-default` at 0,3,1. */
body.bfl-v6 .bfl-bv6-cal-mount .ui-datepicker .ui-state-default {
display: block !important;
width: 100% !important;
aspect-ratio: auto !important;
min-height: 0 !important;
border: 0 !important;
background: transparent !important;
color: #0a1628 !important;
padding: 9px 0 !important;
border-radius: 8px !important;
font-size: 13px !important;
font-weight: 400 !important;
line-height: 1.3 !important;
text-align: center !important;
text-decoration: none !important;
transition: background .12s, color .12s !important;
}
/* 6.5.8 Fix 4: calendar prices are gone by design. Belt-and-braces hide
in case any future injection path slips a .bv6-cal-price span back into
the DOM. The JS short-circuit in injectCalendarPrices is the primary
gate. Keep selector broad so it suppresses anywhere V6 renders. */
body.bfl-v6 .bv6-cal-price {
display: none !important;
}
/* Fix 1 (6.5.2): suppress every V6-injected decoration on other-month
overflow cells. bfl-custom.css:570 hides the parent | with
visibility:hidden but the .bv6-cal-price + today dot leak through in
some engines due to the flex layout. display:none kills layout outright.
Also belt-and-braces gated at the JS layer (see injectCalendarPrices). */
body.bfl-v6 .bfl-bv6-cal-mount .ui-datepicker .ui-datepicker-other-month .bv6-cal-price,
body.bfl-v6 .bfl-bv6-cal-mount .ui-datepicker .ui-datepicker-other-month .ui-state-highlight::after {
display: none !important;
}
/* 6.5.32: hover — soft blue-50, no lift / no color shift. */
body.bfl-v6 .bfl-bv6-cal-mount .ui-state-hover {
background: #eff6ff !important;
color: #0a1628 !important;
}
/* 6.5.32: selected — solid blue fill, white text. Box-shadow + pop
animation dropped for a calmer look. */
body.bfl-v6 .bfl-bv6-cal-mount .ui-state-active {
background: #2563eb !important;
color: #fff !important;
font-weight: 500 !important;
box-shadow: none !important;
animation: none !important;
}
/* 6.5.32: disabled — gray text, no opacity (cleaner than the 0.3 fade). */
body.bfl-v6 .bfl-bv6-cal-mount .ui-state-disabled,
body.bfl-v6 .bfl-bv6-cal-mount .ui-datepicker-unselectable .ui-state-default {
color: #cbd5e1 !important;
background: transparent !important;
opacity: 1 !important;
cursor: not-allowed !important;
}
/* 6.5.32: other-month dates — barely visible. */
body.bfl-v6 .bfl-bv6-cal-mount .ui-datepicker-calendar td.ui-datepicker-other-month > a,
body.bfl-v6 .bfl-bv6-cal-mount .ui-datepicker-calendar td.ui-datepicker-other-month > span {
color: #e1e7f0 !important;
opacity: 0.6 !important;
background: transparent !important;
}
body.bfl-v6 .bfl-bv6-date-input { display: none !important; }
@media (max-width: 600px) {
body.bfl-v6 .bfl-bv6-cal-mount .ui-datepicker { padding: 4px !important; }
body.bfl-v6 .bfl-bv6-cal-mount .ui-state-default { padding: 7px 0 !important; font-size: 12px; }
body.bfl-v6 .bfl-bv6-cal-mount .ui-datepicker-calendar th { font-size: 10px; padding: 4px 0; }
body.bfl-v6 .bfl-bv6-cal-mount .ui-datepicker-prev,
body.bfl-v6 .bfl-bv6-cal-mount .ui-datepicker-next { width: 26px; height: 26px; }
}
/* ─────────────────────────────────────────────
C31e-3: today indicator — subtle ring on today's cell.
jQuery UI auto-applies .ui-state-highlight to today's .
Ring suppressed when today === selected (.ui-state-active wins
via the :not() exclusion — inset box-shadow paints above bg-color
so we cannot rely on solid bg to cover the ring).
Specificity (0,4,1) beats unscoped bfl-custom.css rule at (0,3,0).
───────────────────────────────────────────── */
/* 6.5.32: today indicator — subtle blue ring (inset box-shadow) +
blue text. Replaces the "bold digit + dot below" approach from
C31e-3; matches the new V6 calendar spec. ::after dot dropped.
:not(.ui-state-active) suppresses the ring when today is also
the selected cell (blue fill wins).
Specificity (0,4,1) beats unscoped bfl-custom.css rules at 0,3,0. */
body.bfl-v6 .bfl-bv6-cal-mount .ui-state-default { position: relative; }
body.bfl-v6 .bfl-bv6-cal-mount .ui-state-highlight:not(.ui-state-active) {
box-shadow: inset 0 0 0 0.5px #2563eb !important;
color: #2563eb !important;
font-weight: 500 !important;
}
body.bfl-v6 .bfl-bv6-cal-mount .ui-state-highlight:not(.ui-state-active)::after {
content: none !important;
}
/* ─────────────────────────────────────────────
C31e-4: strikethrough on future rule-disabled days.
beforeShowDay tags | with .bv6-cal-cell-strike when the cell
is rule-blocked AND lies strictly in the future. Past rule-blocked
cells stay grayed via .ui-state-disabled opacity only (no strike).
Specificity (0,4,1) overrides V6's text-decoration: none on
.ui-state-default at (0,3,1).
───────────────────────────────────────────── */
body.bfl-v6 .bfl-bv6-cal-mount .bv6-cal-cell-strike .ui-state-default {
text-decoration: line-through;
text-decoration-skip-ink: none;
}
/* ─────────────────────────────────────────────
6.5.32: cheap-day green REMOVED. The C31e-5 green-fill indicator
conflicted with the new neutral V6 calendar look. The .bv6-cal-cell-cheap
class is still tagged by beforeShowDay in JS, but the styling collapses
to a no-op here. Left dead-coded so the JS tagging path stays inert.
If we want a price-cheap indicator back later, do it via a tiny dot or
subtle text-color shift, not a full-cell fill.
───────────────────────────────────────────── */
body.bfl-v6 .bfl-bv6-cal-mount .bv6-cal-cell-cheap .ui-state-default {
background: transparent !important;
color: #0a1628 !important;
}
/* ─────────────────────────────────────────────
PACKAGE TILES (Step 2) — class names per plan §6
───────────────────────────────────────────── */
body.bfl-v6 .bfl-bv6-package-list {
display: grid;
gap: 10px;
}
body.bfl-v6 .bfl-bv6-package-tile {
display: grid;
grid-template-columns: auto 1fr auto;
grid-template-areas:
"eyebrow eyebrow eyebrow"
"radio name price"
"radio caption caption"
"meta meta meta"
"details details details"
"includes includes includes"
"excludes excludes excludes";
column-gap: 12px;
row-gap: 4px;
align-items: center;
padding: 14px 16px;
background: var(--bv6-blue-tint);
border: 1.5px solid var(--bv6-line);
border-radius: var(--bv6-radius-sm);
cursor: pointer;
transition: border-color .2s, background .2s, transform .15s, box-shadow .2s;
position: relative;
-webkit-tap-highlight-color: transparent;
outline: none;
}
body.bfl-v6 .bfl-bv6-package-tile:hover {
border-color: var(--bv6-blue);
background: var(--bv6-card);
}
body.bfl-v6 .bfl-bv6-package-tile:focus-visible {
border-color: var(--bv6-blue);
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18);
}
body.bfl-v6 .bfl-bv6-package-tile.is-selected {
border-color: var(--bv6-blue);
background: var(--bv6-card);
box-shadow: 0 4px 16px -6px rgba(37, 99, 235, 0.25);
}
body.bfl-v6 .bfl-bv6-package-tile:active {
transform: scale(0.99);
}
body.bfl-v6 .bfl-bv6-package-radio {
grid-area: radio;
width: 20px;
height: 20px;
border-radius: 50%;
border: 2px solid var(--bv6-line);
background: var(--bv6-card);
flex-shrink: 0;
transition: border-color .2s, background .2s;
display: inline-flex;
align-items: center;
justify-content: center;
}
body.bfl-v6 .bfl-bv6-package-tile.is-selected .bfl-bv6-package-radio {
border-color: var(--bv6-blue);
background: var(--bv6-blue);
}
body.bfl-v6 .bfl-bv6-package-tile.is-selected .bfl-bv6-package-radio::after {
content: '';
width: 8px;
height: 8px;
border-radius: 50%;
background: #fff;
}
body.bfl-v6 .bfl-bv6-package-name {
grid-area: name;
font-family: 'DM Sans', system-ui, sans-serif !important;
font-size: 14px !important;
font-weight: 700;
color: var(--bv6-ink);
line-height: 1.3 !important;
align-self: end;
word-break: normal !important;
}
body.bfl-v6 .bfl-bv6-package-price {
grid-area: price;
font-family: 'Fraunces', Georgia, serif !important;
font-size: 18px !important;
font-weight: 500;
letter-spacing: -0.01em;
/* Item 15: drive opsz via the variable-font axis, not OT features. */
font-variation-settings: 'opsz' 18, 'wght' 500;
color: var(--bv6-blue);
line-height: 1 !important;
text-align: right;
white-space: nowrap;
align-self: end;
}
body.bfl-v6 .bfl-bv6-package-price-suffix {
font-size: 11px !important;
font-weight: 500;
color: var(--bv6-ink-soft);
margin-left: 2px;
}
/* C33h: package-strike (was-price) — line-through above the active
price. Renders only when admin populates pkg.bfl-strike-price > 0. */
body.bfl-v6 .bfl-bv6-package-strike {
display: block;
font-size: 13px;
font-weight: 500;
color: var(--bv6-ink-soft);
text-decoration: line-through;
text-decoration-thickness: 1px;
line-height: 1.2;
margin-bottom: 2px;
}
body.bfl-v6 .bfl-bv6-package-caption {
grid-area: caption;
font-size: 12px !important;
color: var(--bv6-ink-soft);
line-height: 1.4 !important;
align-self: start;
}
body.bfl-v6 .bfl-bv6-package-caption:empty {
display: none;
}
/* ─────────────────────────────────────────────
C31f-2: package eyebrow chip (admin-driven via
bfl-eyebrow-type combobox surfaced by C31f-1).
3 variants: savings (green), popular (amber),
scarcity (rose). Replaces the old auto-derived
absolute corner badge.
───────────────────────────────────────────── */
body.bfl-v6 .bfl-bv6-package-eyebrow {
grid-area: eyebrow;
display: inline-block;
justify-self: start;
padding: 2px 8px;
border-radius: 4px;
font-size: 11px;
font-weight: 600;
line-height: 1.5;
margin-bottom: 4px;
letter-spacing: 0.02em;
}
body.bfl-v6 .bfl-bv6-package-eyebrow--savings { background: var(--bv6-green-soft); color: var(--bv6-green-deep); }
body.bfl-v6 .bfl-bv6-package-eyebrow--popular { background: var(--bv6-amber-soft); color: var(--bv6-amber-deep); }
body.bfl-v6 .bfl-bv6-package-eyebrow--scarcity { background: var(--bv6-rose-soft); color: var(--bv6-rose-deep); }
/* ─────────────────────────────────────────────
C32e (P14): inline pkg tag pill — admin-driven via
per-package 'tag' field. Renders next to the package
name when populated; suppressed when empty.
───────────────────────────────────────────── */
body.bfl-v6 .bfl-bv6-package-tag {
display: inline-flex;
align-items: center;
gap: 3px;
padding: 2px 8px;
margin-left: 8px;
background: var(--bv6-indigo-soft);
color: var(--bv6-indigo);
border-radius: 999px;
font-size: 10px !important;
font-weight: 600;
line-height: 1.4 !important;
letter-spacing: 0.04em;
text-transform: uppercase;
vertical-align: middle;
white-space: nowrap;
}
/* ─────────────────────────────────────────────
C31f-3a: auto-composed meta line under the package
tile body. Format: [pickup_type] · [duration] · Max [N]
Composed in JS via bv6ComposeMeta; empty parts skipped.
───────────────────────────────────────────── */
body.bfl-v6 .bfl-bv6-package-meta {
grid-area: meta;
display: flex;
flex-wrap: wrap;
gap: 6px 14px;
font-size: 11px;
color: var(--bv6-ink-soft);
line-height: 1.4;
margin-top: 10px;
padding-top: 10px;
border-top: 0.5px solid var(--bv6-line-soft);
}
body.bfl-v6 .bfl-bv6-package-meta-item {
display: inline-flex;
align-items: center;
gap: 4px;
}
body.bfl-v6 .bfl-bv6-package-meta-item .bfl-bv6-icon {
font-size: 13px;
color: var(--bv6-ink-faint);
}
body.bfl-v6 .bfl-bv6-package-tile.is-selected .bfl-bv6-package-meta {
border-top-color: var(--bv6-blue-shadow-sm);
}
/* ─────────────────────────────────────────────
C31f-3b: long-description bullets sourced from
the per-package bfl-details textarea. Empty /
whitespace-only content suppresses the
entirely — no orphan markup.
───────────────────────────────────────────── */
body.bfl-v6 .bfl-bv6-package-details {
grid-area: details;
list-style: none;
margin: 8px 0 0;
padding-left: 0;
font-size: 13px;
line-height: 1.5;
color: var(--bv6-ink);
}
body.bfl-v6 .bfl-bv6-package-details li {
margin-bottom: 4px;
}
body.bfl-v6 .bfl-bv6-package-details li:last-child {
margin-bottom: 0;
}
body.bfl-v6 .bfl-bv6-package-details li::before {
content: '\2022';
color: var(--bv6-blue);
font-weight: 700;
margin-right: 8px;
display: inline-block;
min-width: 14px;
}
@media (max-width: 600px) {
body.bfl-v6 .bfl-bv6-package-details { font-size: 12px; }
}
/* ─────────────────────────────────────────────
C31f-3c: includes / excludes lists with ✓ and
✗ markers via CSS ::before pseudo-elements.
list-style: none + padding-left: 0 cleanly
suppresses default disc bullets that would
otherwise stack with the markers. Empty fields
are suppressed entirely by bv6PkgSection (no
header label without items).
───────────────────────────────────────────── */
body.bfl-v6 .bfl-bv6-package-section {
grid-column: 1 / -1;
margin-top: 12px;
}
body.bfl-v6 .bfl-bv6-package-section--includes {
grid-area: includes;
/* Chunk 4: translucent rounded sub-card for the includes bullets,
matching .bw-pkg-incl. Slightly more opaque when the tile is
selected (handled below). */
background: rgba(255, 255, 255, 0.6);
border-radius: var(--bv6-r-sm);
padding: 10px 12px;
}
body.bfl-v6 .bfl-bv6-package-tile.is-selected .bfl-bv6-package-section--includes {
background: rgba(255, 255, 255, 0.7);
}
body.bfl-v6 .bfl-bv6-package-section--includes .bfl-bv6-package-section-label {
margin-bottom: 6px;
}
body.bfl-v6 .bfl-bv6-package-section--excludes { grid-area: excludes; }
body.bfl-v6 .bfl-bv6-package-section-label {
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--bv6-ink-soft);
margin-bottom: 4px;
}
body.bfl-v6 .bfl-bv6-package-includes,
body.bfl-v6 .bfl-bv6-package-excludes {
margin: 0;
padding-left: 0;
list-style: none;
font-size: 13px;
line-height: 1.5;
color: var(--bv6-ink);
}
body.bfl-v6 .bfl-bv6-package-includes li,
body.bfl-v6 .bfl-bv6-package-excludes li {
margin-bottom: 4px;
padding-left: 0;
}
body.bfl-v6 .bfl-bv6-package-includes li:last-child,
body.bfl-v6 .bfl-bv6-package-excludes li:last-child {
margin-bottom: 0;
}
body.bfl-v6 .bfl-bv6-package-includes li::before {
content: '\2713';
color: var(--bv6-green-deep);
font-weight: 700;
margin-right: 8px;
display: inline-block;
min-width: 14px;
}
body.bfl-v6 .bfl-bv6-package-excludes li::before {
content: '\2717';
color: var(--bv6-rose-deep);
font-weight: 700;
margin-right: 8px;
display: inline-block;
min-width: 14px;
}
@media (max-width: 600px) {
body.bfl-v6 .bfl-bv6-package-includes,
body.bfl-v6 .bfl-bv6-package-excludes { font-size: 12px; }
}
/* ─────────────────────────────────────────────
STEP 3 — Hotel + Decide_later + Pickup time
Class names per plan §6:
.bfl-bv6-hotel-input (wrapper)
input.bfl-bv6-hotel-search (the text input)
.bfl-bv6-hotel-suggestions (dropdown)
.bfl-bv6-pickup-time-row (wrapper, revealed after pick)
select.bfl-bv6-pickup-time
.bfl-bv6-decide-later
───────────────────────────────────────────── */
body.bfl-v6 .bfl-bv6-hotel-input {
position: relative;
}
body.bfl-v6 .bfl-bv6-hotel-search {
width: 100%;
border: 1.5px solid var(--bv6-line);
border-radius: var(--bv6-radius-sm);
padding: 12px 14px;
padding-left: 42px;
padding-right: 36px;
font-family: 'DM Sans', system-ui, sans-serif !important;
font-size: 15px !important;
font-weight: 500;
color: var(--bv6-ink);
background: var(--bv6-blue-tint);
outline: none;
transition: border-color .2s, background .2s, box-shadow .2s;
-webkit-appearance: none;
appearance: none;
}
body.bfl-v6 .bfl-bv6-hotel-search:focus,
body.bfl-v6 .bfl-bv6-hotel-search:hover {
border-color: var(--bv6-blue);
background: var(--bv6-card);
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.10);
}
body.bfl-v6 .bfl-bv6-hotel-search.has-value {
border-color: var(--bv6-blue);
background: var(--bv6-card);
}
body.bfl-v6 .bfl-bv6-hotel-search:disabled {
background: var(--bv6-line-soft);
color: var(--bv6-ink-faint);
cursor: not-allowed;
}
body.bfl-v6 .bfl-bv6-hotel-loading {
position: absolute;
right: 12px;
top: 50%;
transform: translateY(-50%) rotate(0deg);
width: 16px;
height: 16px;
border: 2px solid var(--bv6-blue-soft);
border-top-color: var(--bv6-blue);
border-radius: 50%;
animation: bfl-bv6-spin 0.7s linear infinite;
display: none;
pointer-events: none;
}
body.bfl-v6 .bfl-bv6-hotel-loading.is-active { display: block; }
/* C32g (P-NEW-1): leading search-icon inside hotel input. */
body.bfl-v6 .bfl-bv6-hotel-search-icon {
position: absolute;
left: 14px;
top: 50%;
transform: translateY(-50%);
width: 18px;
height: 18px;
color: var(--bv6-ink-soft);
pointer-events: none;
transition: color var(--bv6-t-fast);
display: inline-flex;
align-items: center;
justify-content: center;
}
body.bfl-v6 .bfl-bv6-hotel-search:focus ~ .bfl-bv6-hotel-search-icon,
body.bfl-v6 .bfl-bv6-hotel-search.has-value ~ .bfl-bv6-hotel-search-icon {
color: var(--bv6-blue);
}
/* C32g (P18): trailing clear-X button. Show on .has-value, hide
when loading spinner active (has-value rule first, loading rule
second — document order matters for cascade). */
body.bfl-v6 .bfl-bv6-hotel-clear {
position: absolute;
right: 12px;
top: 50%;
transform: translateY(-50%);
width: 24px;
height: 24px;
border: none;
border-radius: 50%;
background: var(--bv6-line);
color: var(--bv6-ink-soft);
font-family: inherit;
cursor: pointer;
display: none;
align-items: center;
justify-content: center;
padding: 0;
transition: background var(--bv6-t-fast),
color var(--bv6-t-fast),
transform var(--bv6-t-fast);
-webkit-appearance: none;
appearance: none;
}
body.bfl-v6 .bfl-bv6-hotel-clear .bfl-bv6-icon {
width: 12px;
height: 12px;
}
body.bfl-v6 .bfl-bv6-hotel-search.has-value ~ .bfl-bv6-hotel-clear {
display: inline-flex;
}
body.bfl-v6 .bfl-bv6-hotel-loading.is-active ~ .bfl-bv6-hotel-clear {
display: none;
}
body.bfl-v6 .bfl-bv6-hotel-clear:hover {
background: var(--bv6-ink-soft);
color: #fff;
transform: translateY(-50%) scale(1.05);
}
body.bfl-v6 .bfl-bv6-hotel-clear:active {
transform: translateY(-50%) scale(0.92);
}
@keyframes bfl-bv6-spin {
to { transform: translateY(-50%) rotate(360deg); }
}
body.bfl-v6 .bfl-bv6-hotel-suggestions {
position: absolute;
top: calc(100% + 4px);
left: 0;
right: 0;
background: var(--bv6-card);
border: 1px solid var(--bv6-line);
border-radius: var(--bv6-radius-sm);
box-shadow: var(--bv6-shadow-lg);
/* C12: 5.5 × ~57px item height — 6th item peeks below as a "scroll for more" affordance */
max-height: 315px;
overflow-y: auto;
z-index: 10;
display: none;
/* C12: hide visible scrollbar (scrolling stays functional) */
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* IE / Edge legacy */
}
body.bfl-v6 .bfl-bv6-hotel-suggestions::-webkit-scrollbar {
display: none; /* Chrome / Safari / Opera / Edge modern */
width: 0;
height: 0;
}
body.bfl-v6 .bfl-bv6-hotel-suggestions.is-open { display: block; }
body.bfl-v6 .bfl-bv6-hotel-result {
padding: 10px 14px;
font-size: 14px !important;
color: var(--bv6-ink);
cursor: pointer;
border-bottom: 0.5px solid var(--bv6-line-soft);
transition: background .12s;
line-height: 1.4 !important;
}
body.bfl-v6 .bfl-bv6-hotel-result:last-child { border-bottom: none; }
body.bfl-v6 .bfl-bv6-hotel-result:hover,
body.bfl-v6 .bfl-bv6-hotel-result.is-focused {
background: var(--bv6-blue-soft);
}
body.bfl-v6 .bfl-bv6-hotel-result-name {
font-weight: 600;
color: var(--bv6-ink);
display: block;
}
body.bfl-v6 .bfl-bv6-hotel-result-meta {
display: block;
font-size: 12px !important;
color: var(--bv6-ink-soft);
margin-top: 1px;
line-height: 1.3 !important;
}
body.bfl-v6 .bfl-bv6-hotel-no-results {
padding: 12px 14px;
font-size: 13px !important;
color: var(--bv6-ink-soft);
text-align: center;
font-style: italic;
}
/* "or" divider */
body.bfl-v6 .bfl-bv6-or-divider {
display: flex;
align-items: center;
gap: 12px;
margin: 14px 0;
color: var(--bv6-ink-soft);
font-size: 11px !important;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
}
body.bfl-v6 .bfl-bv6-or-divider::before,
body.bfl-v6 .bfl-bv6-or-divider::after {
content: '';
flex: 1;
height: 1px;
background: var(--bv6-line);
}
/* Chunk 6: hotel-pickup info banner. Sits at the top of step 3 when the
active package is hotel-pickup (renderStep3HotelAutocomplete branch).
6.5.25: dead-coded — replaced by stripped .bfl-bv6-step2-prose below.
No markup uses these rules post-6.5.25; kept for unscoped cleanup. */
body.bfl-v6 .bfl-bv6-pickup-prompt {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 10px 12px;
margin-bottom: 12px;
background: var(--bv6-blue-soft);
color: #1e40af;
border-radius: var(--bv6-r-sm);
font-size: 12px !important;
line-height: 1.5 !important;
}
body.bfl-v6 .bfl-bv6-pickup-prompt .bfl-bv6-icon {
color: var(--bv6-blue);
font-size: 16px;
flex: 0 0 auto;
margin-top: 1px;
}
/* 6.5.25: stripped two-sentence prose replacing the hotel-pickup callout.
Font-family !important on the inner spans defends against the parent
theme leaking -apple-system onto inline spans (would otherwise render
as system serif). */
body.bfl-v6 .bfl-bv6-step2-prose {
margin: 8px 0 12px;
padding: 0;
font-size: 13px;
line-height: 1.55;
}
body.bfl-v6 .bfl-bv6-step2-prose-lead,
body.bfl-v6 .bfl-bv6-step2-prose-body {
font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif !important;
}
body.bfl-v6 .bfl-bv6-step2-prose-lead {
color: #0a1628;
font-weight: 500;
}
body.bfl-v6 .bfl-bv6-step2-prose-body {
color: #5a6a7e;
font-weight: 400;
}
/* 6.5.38: step-3 prose for the area-picker mode. Same look as the
step2-prose autocomplete header, separate class so the two copies
stay independent if we later tune one. */
body.bfl-v6 .bfl-bv6-step3-prose {
margin: 8px 0 12px;
padding: 0;
font-size: 13px;
line-height: 1.55;
}
body.bfl-v6 .bfl-bv6-step3-prose-lead,
body.bfl-v6 .bfl-bv6-step3-prose-body {
font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif !important;
}
body.bfl-v6 .bfl-bv6-step3-prose-lead {
color: #0a1628;
font-weight: 500;
}
body.bfl-v6 .bfl-bv6-step3-prose-body {
color: #5a6a7e;
font-weight: 400;
}
/* 6.5.38: decide-later area picker — radio rows + WhatsApp + back link. */
body.bfl-v6 .bfl-bv6-area-lbl {
font-size: 11px;
font-weight: 500;
color: #5a6a7e;
letter-spacing: 0.08em;
text-transform: uppercase;
margin: 14px 0 10px;
}
body.bfl-v6 .bfl-bv6-areas {
/* 6.5.41: 2-col grid replaces the stacked column. Long names truncate
with ellipsis; full name lives in the row's title attribute. */
display: grid !important;
grid-template-columns: 1fr 1fr;
gap: 6px;
}
body.bfl-v6 .bfl-bv6-area-row {
/* 6.5.42: tighter horizontal padding + min-height so the now-stacked
name+price content has vertical room without each cell overgrowing. */
display: flex !important;
align-items: center;
gap: 10px;
padding: 10px 12px !important;
min-height: 56px;
background: #fff;
border: 0.5px solid #e1e7f0;
border-radius: 10px;
cursor: pointer;
transition: background .15s, border-color .15s;
}
body.bfl-v6 .bfl-bv6-area-row:hover {
background: #f8fafc;
border-color: #cbd5e1;
}
body.bfl-v6 .bfl-bv6-area-row.is-selected {
background: #eff6ff;
border-color: #2563eb;
}
body.bfl-v6 .bfl-bv6-area-radio {
width: 16px;
height: 16px;
border-radius: 50%;
border: 1.5px solid #cbd5e1;
flex-shrink: 0;
position: relative;
background: #fff;
}
/* 6.5.42: name + price stacked vertically inside the cell. min-width:0 lets
the name's ellipsis kick in instead of forcing the cell wider. */
body.bfl-v6 .bfl-bv6-area-content {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
body.bfl-v6 .bfl-bv6-area-row.is-selected .bfl-bv6-area-radio {
border-color: #2563eb;
}
body.bfl-v6 .bfl-bv6-area-row.is-selected .bfl-bv6-area-radio::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 8px;
height: 8px;
border-radius: 50%;
background: #2563eb;
}
body.bfl-v6 .bfl-bv6-area-name {
/* 6.5.42: no longer a flex child of the row — flex:1 dropped, sits inside
.bfl-bv6-area-content (flex column). Truncation still applies. */
font-size: 13px !important;
color: #0a1628;
font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif !important;
/* 6.5.41: truncate long names at 2-col width (full text in row title). */
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
line-height: 1.3;
}
body.bfl-v6 .bfl-bv6-area-row.is-selected .bfl-bv6-area-name {
color: #1d4ed8;
font-weight: 500;
}
body.bfl-v6 .bfl-bv6-area-px {
/* 6.5.42: stacked under the name — smaller (12 vs 13) so the name is
the visual anchor. flex-shrink dropped (no longer a horizontal sibling
of the name). */
font-size: 12px !important;
font-weight: 500;
color: #2563eb;
font-variant-numeric: tabular-nums;
font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif !important;
line-height: 1.2;
}
body.bfl-v6 .bfl-bv6-area-row.is-selected .bfl-bv6-area-px {
color: #1d4ed8;
}
body.bfl-v6 .bfl-bv6-area-foot {
display: flex;
flex-direction: column;
gap: 8px;
margin-top: 14px;
padding-top: 14px;
border-top: 0.5px solid #eef2f8;
}
body.bfl-v6 .bfl-bv6-area-unsure {
/* 6.5.41: caption text reads as a complete sentence — bumped 12 → 13
and added line-height for proportional balance with the now-larger
WA button below. */
font-size: 13px !important;
color: #5a6a7e;
margin: 0 0 4px;
line-height: 1.45;
}
/* 6.5.41: WhatsApp CTA full-width with hairline border + 14/18 padding +
12px radius. Was a small inline pill aligned to the start. */
body.bfl-v6 .bfl-bv6-area-wa {
display: flex !important;
width: 100% !important;
align-items: center;
justify-content: center;
gap: 10px;
padding: 14px 18px !important;
background: #dcfce7 !important;
color: #15803d !important;
border: 0.5px solid #86efac !important;
border-radius: 12px !important;
font-size: 14px;
font-weight: 500;
text-decoration: none !important;
transition: background .15s, border-color .15s;
align-self: stretch;
}
body.bfl-v6 .bfl-bv6-area-wa:hover {
background: #bbf7d0 !important;
border-color: #4ade80 !important;
color: #15803d !important;
text-decoration: none !important;
}
body.bfl-v6 .bfl-bv6-area-wa svg {
width: 18px !important;
height: 18px !important;
}
body.bfl-v6 .bfl-bv6-area-back {
font-size: 12px;
color: #2563eb !important;
text-decoration: none !important;
align-self: flex-start;
padding: 4px 0;
}
body.bfl-v6 .bfl-bv6-area-back:hover {
text-decoration: underline !important;
}
/* Decide-later row */
body.bfl-v6 .bfl-bv6-decide-later {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 14px;
background: var(--bv6-blue-tint);
border: 1.5px solid var(--bv6-line);
border-radius: var(--bv6-radius-sm);
cursor: pointer;
transition: border-color .2s, background .2s;
user-select: none;
-webkit-tap-highlight-color: transparent;
outline: none;
}
body.bfl-v6 .bfl-bv6-decide-later:hover { border-color: var(--bv6-blue); }
body.bfl-v6 .bfl-bv6-decide-later:focus-visible {
border-color: var(--bv6-blue);
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18);
}
body.bfl-v6 .bfl-bv6-decide-later.is-active {
border-color: var(--bv6-blue);
background: var(--bv6-card);
}
body.bfl-v6 .bfl-bv6-decide-later-info {
flex: 1;
min-width: 0;
}
body.bfl-v6 .bfl-bv6-decide-later-name {
font-size: 14px !important;
font-weight: 600;
color: var(--bv6-ink);
line-height: 1.3 !important;
}
body.bfl-v6 .bfl-bv6-decide-later-sub {
font-size: 12px !important;
color: var(--bv6-ink-soft);
margin-top: 1px;
line-height: 1.3 !important;
}
/* iOS-style switch */
body.bfl-v6 .bfl-bv6-switch {
width: 42px;
height: 24px;
background: var(--bv6-line);
border-radius: 100px;
position: relative;
transition: background .2s;
flex-shrink: 0;
margin-left: 12px;
}
body.bfl-v6 .bfl-bv6-switch::after {
content: '';
position: absolute;
top: 2px;
left: 2px;
width: 20px;
height: 20px;
background: #fff;
border-radius: 50%;
box-shadow: 0 1px 3px rgba(0,0,0,0.2);
transition: transform .25s cubic-bezier(0.32, 0.72, 0, 1);
}
body.bfl-v6 .bfl-bv6-decide-later.is-active .bfl-bv6-switch { background: var(--bv6-blue); }
body.bfl-v6 .bfl-bv6-decide-later.is-active .bfl-bv6-switch::after { transform: translateX(18px); }
/* Pickup-time row (revealed after hotel selected) */
body.bfl-v6 .bfl-bv6-pickup-time-row {
display: none;
margin-top: 14px;
padding-top: 14px;
border-top: 0.5px solid var(--bv6-line-soft);
}
body.bfl-v6 .bfl-bv6-pickup-time-row.is-visible { display: block; }
body.bfl-v6 .bfl-bv6-pickup-time {
width: 100%;
border: 1.5px solid var(--bv6-line);
border-radius: var(--bv6-radius-sm);
padding: 10px 14px;
padding-right: 36px;
font-family: 'DM Sans', system-ui, sans-serif !important;
font-size: 14px !important;
font-weight: 500;
color: var(--bv6-ink);
background-color: var(--bv6-blue-tint);
outline: none;
cursor: pointer;
-webkit-appearance: none;
appearance: none;
background-image: url('data:image/svg+xml;utf8,');
background-repeat: no-repeat;
background-position: right 14px center;
transition: border-color .2s, background-color .2s, box-shadow .2s;
}
body.bfl-v6 .bfl-bv6-pickup-time:hover,
body.bfl-v6 .bfl-bv6-pickup-time:focus {
border-color: var(--bv6-blue);
background-color: var(--bv6-card);
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.10);
}
body.bfl-v6 .bfl-bv6-pickup-time.has-value {
border-color: var(--bv6-blue);
background-color: var(--bv6-card);
}
body.bfl-v6 .bfl-bv6-pickup-time:disabled {
background-color: var(--bv6-line-soft);
color: var(--bv6-ink-faint);
cursor: not-allowed;
}
/* ─────────────────────────────────────────────
STEP 1 ENHANCEMENT — Per-pax price (revealed when package selected)
Class name per plan §6: .bfl-bv6-pax-price
───────────────────────────────────────────── */
body.bfl-v6 .bfl-bv6-pax-price {
font-family: 'DM Sans', system-ui, sans-serif !important;
font-size: 14px !important;
font-weight: 700;
color: var(--bv6-blue);
line-height: 1 !important;
min-width: 52px;
text-align: right;
font-variant-numeric: tabular-nums;
margin-left: 10px;
flex-shrink: 0;
opacity: 0;
transition: opacity .25s, color .25s;
}
body.bfl-v6 .bfl-bv6-pax-row.has-pkg-price .bfl-bv6-pax-price {
opacity: 1;
}
body.bfl-v6 .bfl-bv6-pax-price--free {
color: #047857;
font-size: 11px !important;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
}
body.bfl-v6 .bfl-bv6-pax-price--zero {
color: var(--bv6-ink-faint);
font-weight: 500;
font-size: 12px !important;
}
/* ─────────────────────────────────────────────
ERROR REGION — class .bfl-bv6-error-region per plan §6
Replaces the placeholder rules from Commit 3.
───────────────────────────────────────────── */
body.bfl-v6 .bfl-bv6-error-region {
margin: 0 22px 14px;
padding: 12px 14px;
background: #fef2f2;
border: 1px solid #fecaca;
border-radius: var(--bv6-radius-sm);
color: #991b1b;
font-size: 13px !important;
line-height: 1.5 !important;
display: none;
min-height: 0;
text-align: left;
}
body.bfl-v6 .bfl-bv6-error-region.is-visible { display: block; }
body.bfl-v6 .bfl-bv6-error-region-title {
font-weight: 700;
margin-bottom: 4px;
display: flex;
align-items: center;
gap: 6px;
font-size: 13px !important;
color: #991b1b;
}
body.bfl-v6 .bfl-bv6-error-region-title::before {
content: '⚠';
font-size: 14px;
}
body.bfl-v6 .bfl-bv6-error-region-list {
margin: 0;
padding-left: 20px;
font-size: 12px !important;
}
body.bfl-v6 .bfl-bv6-error-region-list li {
line-height: 1.5 !important;
margin: 1px 0;
color: #991b1b;
}
/* ─────────────────────────────────────────────
FOOTER TOTAL BAR — repurposes .bfl-bv6-footer (Commit 3)
Plan §6 names: .bfl-bv6-total-line, .bfl-bv6-total-label,
.bfl-bv6-total-amount, .bfl-bv6-zone-line, button.bfl-bv6-submit
───────────────────────────────────────────── */
body.bfl-v6 .bfl-bv6-footer {
padding: 16px 22px 18px;
border-top: 1px solid var(--bv6-line);
background: var(--bv6-bg);
border-radius: 0 0 var(--bv6-radius) var(--bv6-radius);
font-size: 14px !important;
color: var(--bv6-ink);
text-align: left;
}
body.bfl-v6 .bfl-bv6-footer-rows {
margin-bottom: 14px;
}
/* Generic line (pkg subtotal + zone surcharge use this) */
body.bfl-v6 .bfl-bv6-package-line,
body.bfl-v6 .bfl-bv6-zone-line {
display: flex;
align-items: baseline;
justify-content: space-between;
padding: 4px 0;
font-size: 13px !important;
color: var(--bv6-ink-soft);
line-height: 1.4 !important;
}
body.bfl-v6 .bfl-bv6-line-label {
color: var(--bv6-ink-soft);
}
body.bfl-v6 .bfl-bv6-line-amount {
color: var(--bv6-ink);
font-weight: 600;
font-variant-numeric: tabular-nums;
}
/* Zone-line: hidden by default, shown via .is-visible when surcharge > 0.
6.5.22: dead-coded for zone tours (the area block + per-pax breakdown
replace it). Kept in place for non-zone tours, though _zone_subtotal is
always 0 there so the line never surfaces. */
body.bfl-v6 .bfl-bv6-zone-line { display: none; }
body.bfl-v6 .bfl-bv6-zone-line.is-visible { display: flex; }
body.bfl-v6 .bfl-bv6-zone-line .bfl-bv6-line-amount { color: var(--bv6-blue); }
/* 6.5.22: footer pickup-area block — "PICKUP AREA" eyebrow + status value.
State A (no hotel): "Choose your hotel below" or "Decide later".
State B (hotel resolved): "Kemer hotels" / "Side hotels" / etc. */
body.bfl-v6 .bfl-bv6-foot-area {
margin-bottom: 12px;
padding-bottom: 12px;
border-bottom: 0.5px solid var(--bv6-line);
}
body.bfl-v6 .bfl-bv6-foot-area-lbl {
display: block;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--bv6-ink-soft);
line-height: 1;
margin-bottom: 4px;
}
body.bfl-v6 .bfl-bv6-foot-area-val {
display: block;
font-size: 14px;
font-weight: 500;
color: var(--bv6-ink);
line-height: 1.35;
}
/* State A basket line — flat pax summary, no per-pax math. */
body.bfl-v6 .bfl-bv6-foot-basket {
font-size: 13px;
color: var(--bv6-ink-soft);
line-height: 1.4;
margin-bottom: 8px;
}
/* State B per-pax breakdown — only renders when a zone is resolved. */
body.bfl-v6 .bfl-bv6-foot-rows {
margin-bottom: 6px;
}
body.bfl-v6 .bfl-bv6-foot-row {
display: flex;
align-items: baseline;
justify-content: space-between;
padding: 4px 0;
font-size: 13px;
color: var(--bv6-ink-soft);
line-height: 1.4;
}
body.bfl-v6 .bfl-bv6-foot-row-unit {
color: var(--bv6-ink-soft);
}
body.bfl-v6 .bfl-bv6-foot-row-sub {
color: var(--bv6-ink);
font-weight: 600;
font-variant-numeric: tabular-nums;
}
/* State A "From " prefix on the total amount. Inline so it sits flush
against the price. Smaller and lighter than the price itself. */
body.bfl-v6 .bfl-bv6-foot-total-prefix {
font-family: 'DM Sans', system-ui, sans-serif;
font-size: 13px;
font-weight: 500;
color: var(--bv6-ink-soft);
letter-spacing: 0;
margin-right: 2px;
}
/* State A info note under the total — explains why the price is "from". */
body.bfl-v6 .bfl-bv6-foot-note {
display: flex;
align-items: center;
gap: 6px;
margin-top: 8px;
font-size: 11px;
color: var(--bv6-ink-faint);
line-height: 1.4;
}
body.bfl-v6 .bfl-bv6-foot-note .bfl-bv6-icon { font-size: 13px; }
/* Total line (grand total) */
body.bfl-v6 .bfl-bv6-total-line {
display: flex;
align-items: baseline;
justify-content: space-between;
margin-top: 6px;
padding-top: 10px;
border-top: 0.5px dashed var(--bv6-line);
}
body.bfl-v6 .bfl-bv6-total-label {
font-size: 12px !important;
text-transform: uppercase;
letter-spacing: 0.06em;
font-weight: 600;
color: var(--bv6-ink-soft);
line-height: 1.2 !important;
}
body.bfl-v6 .bfl-bv6-total-amount {
font-family: 'Fraunces', Georgia, serif !important;
font-size: 28px !important;
font-weight: 500;
font-synthesis: none;
color: var(--bv6-ink);
line-height: 1 !important;
letter-spacing: -0.02em;
font-feature-settings: 'opsz' 28;
font-variant-numeric: tabular-nums;
transition: color .25s, transform .15s;
}
body.bfl-v6 .bfl-bv6-total-line.is-pulsing .bfl-bv6-total-amount {
animation: bfl-bv6-total-pulse 0.4s ease-out;
}
@keyframes bfl-bv6-total-pulse {
0% { transform: scale(1); color: var(--bv6-ink); }
50% { transform: scale(1.04); color: var(--bv6-blue); }
100% { transform: scale(1); color: var(--bv6-ink); }
}
@keyframes bfl-bv6-cell-pop {
0% { transform: scale(1); }
40% { transform: scale(1.08); }
100% { transform: scale(1); }
}
@keyframes bfl-bv6-pin-pulse {
0% { box-shadow: 0 0 0 0 var(--bv6-blue-shadow-md); }
70% { box-shadow: 0 0 0 8px rgba(37, 99, 235, 0); }
100% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0); }
}
/* Empty state when pkg or pax not yet set */
body.bfl-v6 .bfl-bv6-empty-state {
text-align: center;
color: var(--bv6-ink-soft);
font-size: 13px !important;
padding: 6px 0 12px;
line-height: 1.5 !important;
}
body.bfl-v6 .bfl-bv6-empty-progress {
display: inline-flex;
gap: 6px;
flex-wrap: wrap;
justify-content: center;
margin-top: 6px;
font-size: 11px !important;
}
body.bfl-v6 .bfl-bv6-empty-progress-step { color: var(--bv6-ink-soft); }
body.bfl-v6 .bfl-bv6-empty-progress-step.is-done { color: var(--bv6-blue); font-weight: 600; }
/* Submit button — class .bfl-bv6-submit per plan §6 */
body.bfl-v6 .bfl-bv6-submit {
display: block;
width: 100%;
background: var(--bv6-blue);
color: #fff;
border: none;
border-radius: var(--bv6-radius-sm);
padding: 14px 20px;
font-family: 'DM Sans', system-ui, sans-serif !important;
font-size: 15px !important;
font-weight: 700;
line-height: 1.2 !important;
letter-spacing: -0.01em;
cursor: pointer;
transition: background .2s, box-shadow .2s, transform .12s, opacity .2s;
-webkit-appearance: none;
appearance: none;
-webkit-tap-highlight-color: transparent;
text-align: center;
}
body.bfl-v6 .bfl-bv6-submit:hover:not(:disabled) {
background: var(--bv6-blue-deep);
box-shadow: 0 6px 20px -8px rgba(37, 99, 235, 0.5);
}
body.bfl-v6 .bfl-bv6-submit:active:not(:disabled) { transform: scale(0.99); }
/* C32f (P23): foot-trust line below submit CTA. */
body.bfl-v6 .bfl-bv6-foot-trust {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
margin-top: 12px;
font-size: 11px !important;
line-height: 1.4 !important;
color: var(--bv6-ink-soft);
text-align: center;
}
body.bfl-v6 .bfl-bv6-foot-trust .bfl-bv6-icon {
color: var(--bv6-green-deep);
flex-shrink: 0;
}
body.bfl-v6 .bfl-bv6-submit:disabled {
background: var(--bv6-line);
color: var(--bv6-ink-faint);
cursor: not-allowed;
}
body.bfl-v6 .bfl-bv6-submit-arrow {
display: inline-block;
margin-left: 6px;
transition: transform .2s;
}
body.bfl-v6 .bfl-bv6-submit:hover:not(:disabled) .bfl-bv6-submit-arrow {
transform: translateX(3px);
}
/* Submit — loading state during AJAX (Commit 7) */
body.bfl-v6 .bfl-bv6-submit.is-loading {
background: var(--bv6-blue) !important;
color: rgba(255, 255, 255, 0.85) !important;
opacity: 0.92;
cursor: progress !important;
position: relative;
padding-right: 40px;
}
body.bfl-v6 .bfl-bv6-submit.is-loading .bfl-bv6-submit-arrow {
display: none;
}
body.bfl-v6 .bfl-bv6-submit.is-loading::after {
content: '';
position: absolute;
top: 50%;
right: 18px;
width: 14px;
height: 14px;
margin-top: -7px;
border: 2px solid rgba(255, 255, 255, 0.4);
border-top-color: #fff;
border-radius: 50%;
animation: bfl-bv6-spin 0.7s linear infinite;
}
/* ─────────────────────────────────────────────
MOBILE
───────────────────────────────────────────── */
@media (max-width: 600px) {
body.bfl-v6 .bfl-bv6-header { padding: 14px 16px; }
body.bfl-v6 .bfl-bv6-body { padding: 0 0 16px; }
body.bfl-v6 .bfl-bv6-footer { padding: 14px 16px 16px; }
/* A1 mobile: narrower side padding, header padding follows desktop 18px 0. */
body.bfl-v6 .bfl-bv6-card { padding: 0 16px 16px; }
/* A2 mobile: title inherits desktop 14px — old 16px override dropped. */
/* Chunk 3: pax-row sizes inherit the desktop vertical-card defaults
(28px icon, 24px btn). Min-height override removed — column flex
sizes itself organically and the auto-fit grid handles the column
count at narrower widths. */
body.bfl-v6 .bfl-bv6-package-tile { padding: 12px 14px; column-gap: 10px; }
body.bfl-v6 .bfl-bv6-package-name { font-size: 13px !important; }
body.bfl-v6 .bfl-bv6-package-price { font-size: 13px !important; }
body.bfl-v6 .bfl-bv6-hotel-search { padding: 10px 12px; padding-left: 36px; padding-right: 32px; font-size: 14px !important; }
body.bfl-v6 .bfl-bv6-decide-later { padding: 10px 12px; }
body.bfl-v6 .bfl-bv6-pickup-time { padding: 9px 12px; padding-right: 32px; }
body.bfl-v6 .bfl-bv6-error-region { margin: 0 16px 12px; }
body.bfl-v6 .bfl-bv6-total-amount { font-size: 22px !important; }
body.bfl-v6 .bfl-bv6-submit { padding: 13px 18px; font-size: 14px !important; }
body.bfl-v6 .bfl-bv6-pax-price { font-size: 13px !important; min-width: 44px; }
}
/* ─────────────────────────────────────────────
PHASE 1 FINALE — Hide TM booking bar when V6 active
Plan §7 canonical hide rules. Form element stays in
DOM (positioned offscreen) so BFL_BV6.bridge.findTMForm()
+ native form.submit() keep working.
───────────────────────────────────────────── */
body.bfl-v6 .tourmaster-tour-booking-bar-wrap,
body.bfl-v6 .tourmaster-tour-booking-bar-cover,
body.bfl-v6 #tourmaster-tour-booking-bar-wrap {
display: none !important;
}
/* Form stays focusable-by-JS but not visible. Plan §7:
"We do NOT use display:none on the form itself because some
browsers strip focus / disable submission semantics on
display:none forms. position:absolute; left:-9999px is safer." */
body.bfl-v6 #tourmaster-single-tour-booking-fields {
position: absolute !important;
left: -9999px !important;
top: -9999px !important;
width: 1px !important;
height: 1px !important;
overflow: hidden !important;
}
/* Remove the dev "V6 — Phase 1 preview" banner.
Overrides the ::before rule earlier in this file. */
body.bfl-v6 .bfl-bv6-root::before {
content: none !important;
display: none !important;
padding: 0 !important;
background: transparent !important;
}
/* Now that the banner is gone, the V6 header sits flush at the
top of the rounded container. Round the header's top corners
so the gradient honors the radius. */
body.bfl-v6 .bfl-bv6-header {
/* C1: header top corners follow the root's 20px radius. */
border-radius: var(--bv6-r-xl) var(--bv6-r-xl) 0 0 !important;
}
/* ─────────────────────────────────────────────
COMMIT 10 — C2 Pill Collapse pattern
Three step states: locked (dim header), active (full card with
Continue), pill (header with summary + Edit). Body content hidden
in locked + pill via :not(.bfl-bv6-card-header) selector — keeps
DOM structure simple, no body-wrapper required.
───────────────────────────────────────────── */
body.bfl-v6 .bfl-bv6-card {
transition:
opacity .25s ease,
background .25s ease,
border-color .25s ease,
box-shadow .25s ease;
}
/* LOCKED — dimmed header visible, body hidden. Future steps not yet reached. */
body.bfl-v6 .bfl-bv6-card.is-locked {
opacity: 0.55;
pointer-events: none;
background: var(--bv6-bg);
/* A1: card's bottom padding is empty space when body is hidden. */
padding-bottom: 0;
}
body.bfl-v6 .bfl-bv6-card.is-locked .bfl-bv6-card-num {
background: var(--bv6-line) !important;
color: var(--bv6-ink-soft) !important;
box-shadow: none !important;
}
/* PILL — completed step. Green check, summary text, Edit button. Body hidden. */
body.bfl-v6 .bfl-bv6-card.is-pill {
background: var(--bv6-card);
/* A1: same as locked — drop the 22px reserved for body content. */
padding-bottom: 0;
}
/* 6.5.36: card-header bottom padding halved (18 → 8) in pill state.
The default header keeps its 18/18 symmetry while active/locked,
but when collapsed to a pill the bottom 18px reads as dead space
between the pill row and whatever follows (next card or footer).
Top kept at 18 so the pill content stays centered against the
step's top hairline / border. */
body.bfl-v6 .bfl-bv6-card.is-pill .bfl-bv6-card-header {
padding-bottom: 8px !important;
}
body.bfl-v6 .bfl-bv6-card.is-pill .bfl-bv6-card-num {
background: #15803d !important; /* green check pill */
color: #fff !important;
font-size: 0 !important;
box-shadow: none !important;
}
body.bfl-v6 .bfl-bv6-card.is-pill .bfl-bv6-card-num::before {
content: '✓';
font-size: 14px !important;
font-weight: 700;
/* 6.5.6 Fix 2: inherit flex centering from parent .bfl-bv6-card-num —
line-height: 28px hack no longer needed. */
line-height: 1 !important;
}
/* Hide body content (everything except the header) in locked + pill */
body.bfl-v6 .bfl-bv6-card.is-locked > *:not(.bfl-bv6-card-header),
body.bfl-v6 .bfl-bv6-card.is-pill > *:not(.bfl-bv6-card-header) {
display: none !important;
}
/* A1: locked.is-active / pill.is-active no longer need a border-reset
override — chrome is now fixed via the active state being chrome-free.
Block removed. */
/* Card title hidden in pill state — the summary takes its place */
body.bfl-v6 .bfl-bv6-card.is-pill .bfl-bv6-card-title {
display: none;
}
/* Summary text — only visible in pill state */
body.bfl-v6 .bfl-bv6-card-summary {
display: none;
flex: 1;
text-align: left;
font-size: 13px !important;
color: var(--bv6-ink-soft);
font-weight: 500;
line-height: 1.3 !important;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
min-width: 0;
}
body.bfl-v6 .bfl-bv6-card-summary strong {
color: var(--bv6-ink);
font-weight: 700;
}
body.bfl-v6 .bfl-bv6-card.is-pill .bfl-bv6-card-summary {
display: block;
}
/* Edit button — only visible in pill state */
body.bfl-v6 .bfl-bv6-card-edit {
display: none;
background: transparent;
border: none;
color: var(--bv6-blue);
font-family: inherit;
font-size: 12px !important;
font-weight: 700;
cursor: pointer;
padding: 4px 10px;
border-radius: 6px;
flex-shrink: 0;
text-transform: uppercase;
letter-spacing: 0.04em;
transition: background .15s;
}
body.bfl-v6 .bfl-bv6-card-edit:hover {
background: var(--bv6-blue-soft);
}
body.bfl-v6 .bfl-bv6-card.is-pill .bfl-bv6-card-edit {
display: inline-block;
}
/* ─────────────────────────────────────────────
6.5.15 Change 1: progressive disclosure for step 1.
Three view-states driven by [data-step1-view] on the card:
idle — only the "Pick a date" chip is visible.
calendar — the inline jQuery UI picker is visible.
summary — collapsed date line + Edit affordance.
Travelers + Continue blocks hidden until [data-has-date="true"].
The .bfl-bv6-date-picker wrapper holds the .bfl-bv6-cal-mount; we
toggle the wrapper so jQuery UI's internal DOM stays mounted.
───────────────────────────────────────────── */
/* Defaults: hide all three view children. */
body.bfl-v6 .bfl-bv6-step-1 .bfl-bv6-step1-chip,
body.bfl-v6 .bfl-bv6-step-1 .bfl-bv6-date-picker,
body.bfl-v6 .bfl-bv6-step-1 .bfl-bv6-step1-summary {
display: none;
}
body.bfl-v6 .bfl-bv6-step-1[data-step1-view="idle"] .bfl-bv6-step1-chip {
display: flex;
}
body.bfl-v6 .bfl-bv6-step-1[data-step1-view="calendar"] .bfl-bv6-date-picker {
display: block;
}
body.bfl-v6 .bfl-bv6-step-1[data-step1-view="summary"] .bfl-bv6-step1-summary {
display: flex;
}
/* 6.5.20: travelers hidden until a date is picked; on reveal, fade-up
once (320ms ease-out, translateY 10→0). data-has-date persists across
subsequent edits, so the keyframes only run on the first false→true
transition. Continue button stays gated on data-has-date as before. */
body.bfl-v6 .bfl-bv6-step1-pax { display: none; }
body.bfl-v6 .bfl-bv6-step-1[data-has-date="true"] .bfl-bv6-step1-pax {
display: block;
animation: bv6-pax-reveal 320ms ease-out both;
}
@keyframes bv6-pax-reveal {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
body.bfl-v6 .bfl-bv6-step-1:not([data-has-date="true"]) .bfl-bv6-step-continue {
display: none;
}
/* 6.5.20 → 6.5.33: .bfl-bv6-step1-pax-hint dead-coded.
The "Tap to add travelers" copy is now driven through the existing
[data-hint="pax"] span in _updateStep1Hints, so the Travelers label
row has only two flex children and flex space-between right-aligns
the hint to match the DATE row layout. */
/* "See Dates" chip — full-width tappable affordance.
6.5.18: text-transform: none defends against parent-theme button rules
that uppercase the label otherwise. */
body.bfl-v6 .bfl-bv6-step1-chip {
align-items: center;
gap: 10px;
width: 100%;
padding: 14px 16px;
background: var(--bv6-card);
border: 0.5px solid var(--bv6-line);
border-radius: 10px;
font-family: 'DM Sans', system-ui, sans-serif;
font-size: 14px;
font-weight: 500;
color: var(--bv6-ink);
text-transform: none;
cursor: pointer;
transition: border-color .15s;
-webkit-tap-highlight-color: transparent;
}
body.bfl-v6 .bfl-bv6-step1-chip:hover,
body.bfl-v6 .bfl-bv6-step1-chip:focus {
border-color: var(--bv6-blue);
outline: none;
}
body.bfl-v6 .bfl-bv6-step1-chip-label {
flex: 1;
text-align: left;
}
body.bfl-v6 .bfl-bv6-step1-chip .bfl-bv6-icon { font-size: 16px; color: var(--bv6-ink-soft); }
body.bfl-v6 .bfl-bv6-step1-chip-chev { font-size: 14px !important; color: var(--bv6-ink-faint); }
/* Summary line — collapsed view after a date is picked. */
body.bfl-v6 .bfl-bv6-step1-summary {
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 14px 16px;
background: var(--bv6-card);
border: 0.5px solid var(--bv6-line);
border-radius: 10px;
}
body.bfl-v6 .bfl-bv6-step1-summary-text {
font-size: 14px;
font-weight: 600;
color: var(--bv6-ink);
line-height: 1.3;
}
body.bfl-v6 .bfl-bv6-step1-edit {
background: transparent;
border: 0;
color: var(--bv6-blue);
font-family: inherit;
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
cursor: pointer;
padding: 4px 8px;
border-radius: 6px;
transition: background .15s;
}
body.bfl-v6 .bfl-bv6-step1-edit:hover {
background: var(--bv6-blue-soft);
}
/* Continue / Done button at bottom of step body */
body.bfl-v6 .bfl-bv6-step-continue {
width: 100%;
background: var(--bv6-blue);
color: #fff;
border: none;
border-radius: var(--bv6-radius-sm);
padding: 12px 16px;
font-family: 'DM Sans', system-ui, sans-serif !important;
font-size: 14px !important;
font-weight: 700;
line-height: 1.2 !important;
cursor: pointer;
margin-top: 14px;
transition: background .2s, transform .12s, box-shadow .2s;
-webkit-appearance: none;
appearance: none;
-webkit-tap-highlight-color: transparent;
}
body.bfl-v6 .bfl-bv6-step-continue:hover:not(:disabled) {
background: var(--bv6-blue-deep);
box-shadow: 0 4px 14px -6px rgba(37, 99, 235, 0.5);
}
body.bfl-v6 .bfl-bv6-step-continue:active:not(:disabled) {
transform: scale(0.99);
}
body.bfl-v6 .bfl-bv6-step-continue:disabled {
background: var(--bv6-line);
color: var(--bv6-ink-faint);
cursor: not-allowed;
}
/* ─────────────────────────────────────────────
COMMIT 11 — Kill .bfl-v2-sidebar-inner wrapper
The 20px-padded inner wrapper adds no value to V6.
`display: contents` removes its layout box entirely
while preserving the DOM (no template surgery).
Discovery confirmed sidebar-inner has only visual chrome
(bg/border/radius/padding/shadow); sticky+overflow live
on the OUTER .bfl-v2-sidebar and are unaffected.
───────────────────────────────────────────── */
body.bfl-v6 .bfl-v2-sidebar-inner {
display: contents !important;
}
body.bfl-v6 .bfl-v2-sidebar {
padding: 0 !important;
}
/* ─────────────────────────────────────────────
COMMIT 13 — Hide outer sidebar scrollbar on V6
.bfl-v2-sidebar is sticky + overflow-y:auto at >=1024px
(bfl-tour-v2.css:1264). When V6 form content exceeds the
viewport, a scrollbar appears on the right edge of the
booking column. Hide it visually; scrolling stays functional.
Scoped to body.bfl-v6 so non-V6 V2 pages keep their thin bar.
Specificity 0,2,0 beats the global .bfl-v2-sidebar rule (0,1,0).
───────────────────────────────────────────── */
body.bfl-v6 .bfl-v2-sidebar {
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* IE / Edge legacy */
}
body.bfl-v6 .bfl-v2-sidebar::-webkit-scrollbar {
display: none; /* Chrome / Safari / Opera / modern Edge */
width: 0;
height: 0;
}
/* ─────────────────────────────────────────────
6.5.27 — Hotel autocomplete dropdown was being clipped vertically by
.bfl-v2-sidebar (the structural V2 sticky sidebar). At >=1024px,
bfl-tour-v2.css:1264-1269 sets `max-height: calc(100vh − …);
overflow-y: auto` on .bfl-v2-sidebar so its own contents can scroll
when they exceed the viewport. That overflow context clips the
absolutely-positioned .bfl-bv6-hotel-suggestions (z-index: 10,
max-height: 315px) whenever the input sits near the bottom of the
sticky pane — the dropdown opens, but its lower rows are cut off.
Fix path 1 from the brief: drop the overflow context on V6 only.
Trade-off: if the V6 form ever exceeds the viewport at desktop,
the user scrolls the page rather than the sidebar pane. Acceptable
given the dropdown UX matters more and V6 is height-budgeted.
Sticky positioning itself stays intact (top + position: sticky
unchanged).
───────────────────────────────────────────── */
@media (min-width: 1024px) {
body.bfl-v6 .bfl-v2-sidebar {
max-height: none !important;
overflow: visible !important;
}
}
/* ─────────────────────────────────────────────
CHUNK 8 — V6 mobile layout + V6-owned mobile bar
The Commit-14 hijack of .bfl-v2-bb-cta / #bflMobileBarBtn is retired.
At ≤1023px the V6 widget stacks above content-col as usual. At ≤980px
the V6-owned .bfl-bv6-mobile-bar provides the single sticky CTA + live
total. Both V2/legacy mobile bars are suppressed on V6 pages.
───────────────────────────────────────────── */
/* Suppress the V2 + legacy mobile bars on V6 pages — single entry point. */
body.bfl-v6 .bfl-v2-bottom-bar,
body.bfl-v6 .bfl-mobile-bar,
body.bfl-v6 #bflMobileBar {
display: none !important;
}
@media (max-width: 1023px) {
/* Sidebar reorder — V6 stacks above content-col */
body.bfl-v6 .bfl-v2-body-grid {
display: flex !important;
flex-direction: column !important;
}
body.bfl-v6 .bfl-v2-sidebar {
order: -1 !important;
margin-top: 0 !important;
padding-bottom: 0 !important;
}
body.bfl-v6 .bfl-v2-content-col {
padding-bottom: 24px;
}
/* Anchor offset for #book hash-link (sticky tabbar ≈ 52px) */
body.bfl-v6 #bflBV6Root,
body.bfl-v6 #book {
scroll-margin-top: var(--bfl-tabbar-h, 52px);
}
}
/* V6-owned mobile bar — fixed-bottom CTA + live total, ≤980px only. */
body.bfl-v6 .bfl-bv6-mobile-bar {
display: none;
position: fixed;
left: 0; right: 0; bottom: 0;
background: var(--bv6-card);
border-top: 0.5px solid var(--bv6-line);
padding: 10px 16px;
padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
z-index: 100;
align-items: center;
gap: 12px;
box-shadow: 0 -4px 24px rgba(15, 23, 42, 0.08);
}
@media (max-width: 980px) {
body.bfl-v6 .bfl-bv6-mobile-bar {
display: flex;
}
/* 6.5.26: zone tours keep the mobile bar hidden until the user picks
a hotel (or commits to "Decide later"). Override the @media flex
at the same specificity + later in the cascade. */
body.bfl-v6 .bfl-bv6-mobile-bar[data-zone-tour="true"][data-pickup-chosen="false"] {
display: none;
}
/* Reserve clearance below the V6 widget so it doesn't underflow the bar. */
body.bfl-v6 .bfl-bv6-root {
margin-bottom: 90px !important;
}
}
/* 6.5.26: gate the entire desktop footer block on the zone-tour pickup
choice. Area label, basket, total, note, Reserve button, trust line —
all hidden together. Non-zone tours have data-zone-tour="false" and
skip both gates. */
body.bfl-v6 .bfl-bv6-root[data-zone-tour="true"][data-pickup-chosen="false"] .bfl-bv6-footer {
display: none;
}
/* Reveal animation: reuses the step-1 pax-reveal motion (320ms ease-out,
opacity 0→1, translateY 10→0) so the progressive-disclosure rhythm
stays consistent. data-pickup-chosen flips false→true exactly once
per session per side (Reserve button doesn't re-attach), so the
animation runs once on first reveal. */
body.bfl-v6 .bfl-bv6-root[data-zone-tour="true"][data-pickup-chosen="true"] .bfl-bv6-footer,
body.bfl-v6 .bfl-bv6-mobile-bar[data-zone-tour="true"][data-pickup-chosen="true"] {
animation: bv6-pax-reveal 320ms ease-out both;
}
body.bfl-v6 .bfl-bv6-mobile-bar-total {
flex: 1;
min-width: 0;
}
body.bfl-v6 .bfl-bv6-mobile-bar-total-label {
font-size: 11px !important;
color: var(--bv6-ink-soft);
font-weight: 500;
line-height: 1.2 !important;
}
body.bfl-v6 .bfl-bv6-mobile-bar-total-val {
font-family: 'Fraunces', Georgia, serif !important;
font-weight: 500;
font-size: 22px !important;
letter-spacing: -0.02em;
line-height: 1 !important;
color: var(--bv6-ink);
font-variant-numeric: tabular-nums;
margin-top: 2px;
transition: transform var(--bv6-t-fast);
}
body.bfl-v6 .bfl-bv6-mobile-bar-total-val.is-pulsing {
animation: bfl-bv6-total-pulse var(--bv6-t-base);
}
body.bfl-v6 .bfl-bv6-mobile-bar-cta {
padding: 11px 22px;
background: var(--bv6-blue);
color: #fff;
border: none;
border-radius: var(--bv6-r-md);
font-family: 'DM Sans', system-ui, sans-serif !important;
font-size: 14px !important;
font-weight: 600;
line-height: 1 !important;
cursor: pointer;
transition: background .15s;
-webkit-appearance: none;
appearance: none;
-webkit-tap-highlight-color: transparent;
}
body.bfl-v6 .bfl-bv6-mobile-bar-cta:hover:not(:disabled) {
background: var(--bv6-blue-deep);
}
body.bfl-v6 .bfl-bv6-mobile-bar-cta:disabled {
background: var(--bv6-line);
color: var(--bv6-ink-faint);
cursor: not-allowed;
}
/* ─────────────────────────────────────────────────────────
PICKUP TIME UX — C18
Three states: inline chip in autocomplete, static text
for single-time, chip-styled radios for multi-time.
───────────────────────────────────────────────────────── */
/* Autocomplete result row: name/address on the left, time chip on the right */
body.bfl-v6 .bfl-bv6-hotel-result {
display: flex;
align-items: center;
gap: 8px;
}
body.bfl-v6 .bfl-bv6-hotel-result-main {
flex: 1;
min-width: 0;
}
body.bfl-v6 .bfl-bv6-hotel-result-time {
flex-shrink: 0;
display: inline-flex;
align-items: center;
gap: 4px;
padding: 3px 8px;
background: #f0f9ff;
color: #0284c7;
font-size: 12px;
font-weight: 600;
border-radius: 12px;
line-height: 1.2;
white-space: nowrap;
}
body.bfl-v6 .bfl-bv6-hotel-result-time .bfl-bv6-pt-icon {
color: #0284c7;
flex-shrink: 0;
}
/* Post-selection static info text (case 0: no times, case 1: single time) */
body.bfl-v6 .bfl-bv6-pickup-info {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 0 4px 0;
color: #374151;
font-size: 14px;
line-height: 1.4;
}
body.bfl-v6 .bfl-bv6-pickup-info--muted {
color: #6b7280;
}
body.bfl-v6 .bfl-bv6-pickup-info .bfl-bv6-pt-icon {
color: #6b7280;
flex-shrink: 0;
}
body.bfl-v6 .bfl-bv6-pickup-info strong {
color: #111827;
font-weight: 700;
margin-left: 2px;
}
/* Post-selection chip-styled radios (case 2: multi-time) */
body.bfl-v6 .bfl-bv6-pickup-label {
margin: 8px 0 6px 0;
font-size: 13px;
font-weight: 600;
color: #374151;
}
body.bfl-v6 .bfl-bv6-pickup-chips {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
body.bfl-v6 .bfl-bv6-pt-input {
position: absolute;
opacity: 0;
pointer-events: none;
}
body.bfl-v6 .bfl-bv6-pt-chip {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 64px;
min-height: 36px;
padding: 6px 14px;
border: 1.5px solid #d1d5db;
border-radius: 8px;
background: #fff;
color: #374151;
font-size: 14px;
font-weight: 600;
cursor: pointer;
user-select: none;
transition: border-color .12s, background-color .12s, color .12s;
}
body.bfl-v6 .bfl-bv6-pt-chip:hover {
border-color: #9ca3af;
}
body.bfl-v6 .bfl-bv6-pt-input:checked + .bfl-bv6-pt-chip {
border-color: #2563eb;
background: #eff6ff;
color: #1d4ed8;
}
body.bfl-v6 .bfl-bv6-pt-input:focus-visible + .bfl-bv6-pt-chip {
outline: 2px solid #2563eb;
outline-offset: 2px;
}
@media (max-width: 640px) {
body.bfl-v6 .bfl-bv6-pt-chip {
min-height: 44px;
min-width: 72px;
}
}
/* Item 5: per-date pricing cell layout. The old body.bv6-cal-priced block
(C25) is collapsed — flex-column + .bv6-cal-price styling are now
always-on under body.bfl-v6 (see the .ui-state-default + .bv6-cal-price
blocks earlier in this file). Mobile shrink kept here. */
@media (max-width: 480px) {
body.bfl-v6 .bfl-bv6-cal-mount .ui-state-default { min-height: 46px; }
body.bfl-v6 .bv6-cal-price { font-size: 9px; }
}
/* ─────────────────────────────────────────────
6.5.14: Variation 4 — boxed tier-card zone header.
Replaces the C29 compact-range-with-toggle UI for zone-surcharge tours.
Old .bfl-bv6-zone-prices* rules below are dead-coded (no markup uses
them post-6.5.14) — kept in place for unscoped cleanup later.
───────────────────────────────────────────── */
/* 6.5.18: bottom padding zeroed — the previous 18px was sized for the
now-removed .bfl-bv6-zone-foot info element and rendered as a 40–50px
gap above step-1. Grid's border-bottom is the visual stop. */
body.bfl-v6 .bfl-bv6-zone-theme { padding: 20px 22px 0; }
body.bfl-v6 .bfl-bv6-zone-head-lbl {
font-size: 11px; font-weight: 600;
color: var(--bv6-ink-soft);
letter-spacing: 0.1em; text-transform: uppercase;
margin: 0; line-height: 1;
}
body.bfl-v6 .bfl-bv6-zone-head-sub {
font-size: 12px; color: var(--bv6-ink-faint);
margin: 5px 0 0; line-height: 1.4;
}
body.bfl-v6 .bfl-bv6-zone-tiers {
/* 6.5.15 Change 2: 2-column grid (was flex-column). With 4 tiers
renders as 2 rows of 2 cards. Odd counts leave one cell empty in
the last row — fine. */
margin-top: 14px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 6px;
}
body.bfl-v6 .bfl-bv6-zone-tier {
display: flex; align-items: center; gap: 14px;
padding: 11px 14px;
background: var(--bv6-bg);
border: 0.5px solid var(--bv6-line-soft);
border-radius: 10px;
}
body.bfl-v6 .bfl-bv6-zone-tier-px {
font-size: 14px; font-weight: 700;
color: var(--bv6-blue);
font-variant-numeric: tabular-nums;
/* 6.5.15 Change 2: tighter width for narrower 2-col cards. */
min-width: 30px; flex-shrink: 0;
}
body.bfl-v6 .bfl-bv6-zone-tier-names {
font-size: 12.5px; font-weight: 500;
color: var(--bv6-ink);
line-height: 1.35;
}
/* 6.5.16: hairline-bounded 2-col grid replaces the boxed tier cards.
Old .bfl-bv6-zone-tier / -tier-px / -tier-names rules above are
dead-coded post-6.5.16 (no markup uses them) — kept for unscoped
cleanup later. */
body.bfl-v6 .bfl-bv6-zone-grid {
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: 18px;
row-gap: 8px;
/* 6.5.35: padding-top tightened (14 → 4) to close the gap to the
month divider. Bottom kept at ~14 for breathing room above the
grid's bottom hairline. */
padding: 4px 0 14px !important;
/* 6.5.34: top hairline dropped — the "MAY 2026 PRICES" month
divider already provides the visual top separator, the old
border-top was creating a double-line. */
border-top: 0 !important;
border-bottom: 0.5px solid var(--bv6-line, #e1e7f0);
/* 6.5.18: bottom margin zeroed — see .bfl-bv6-zone-theme note above. */
margin: 10px 0 0;
}
body.bfl-v6 .bfl-bv6-zone-cell {
display: flex;
justify-content: space-between;
/* 6.5.51: flex-start (was baseline) so the row top-aligns when the
name wraps to a second line — price stays level with the first line
rather than dropping to align with the wrapped baseline. */
align-items: flex-start !important;
gap: 10px;
min-width: 0;
}
body.bfl-v6 .bfl-bv6-zone-name {
font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif !important;
font-size: 13px;
font-weight: 400;
color: var(--bv6-ink, #0a1628);
/* 6.5.51: long names ("Antalya Centrum Hotels") wrap to a second line
instead of ellipsizing. overflow:visible + white-space:normal +
overflow-wrap:break-word handle the wrap; the !important pair
defends against the global `.bfl-bv6-zone-name` rule sharing the
class with the area-row name selector (truncates there). */
overflow: visible !important;
text-overflow: clip !important;
white-space: normal !important;
line-height: 1.35;
word-break: normal;
overflow-wrap: break-word;
}
body.bfl-v6 .bfl-bv6-zone-px {
font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif !important;
font-size: 13px;
font-weight: 600;
color: var(--bv6-blue, #2563eb);
font-variant-numeric: tabular-nums;
flex-shrink: 0;
letter-spacing: -0.005em;
/* 6.5.51: line-height matched to the name + 1px top padding so the
price visually aligns with the first line of a wrapped name. */
line-height: 1.35;
padding-top: 1px;
}
body.bfl-v6 .bfl-bv6-zone-foot {
margin-top: 14px; padding-top: 12px;
border-top: 0.5px solid var(--bv6-line-soft);
display: flex; align-items: center; gap: 6px;
font-size: 11px; color: var(--bv6-ink-faint);
line-height: 1.4;
}
body.bfl-v6 .bfl-bv6-zone-foot .bfl-bv6-icon { font-size: 13px; }
/* 6.5.31: month divider between the prose + the zone grid. Rebuilt on
every renderHeader from state.activeMonth so calendar month nav and
date picks both refresh it. */
body.bfl-v6 .bfl-bv6-zone-month {
display: flex;
align-items: center;
gap: 6px;
/* 6.5.35: bottom margin tightened (4 → 2) to close the gap between
the divider and the first cell. Paired with the grid's reduced
padding-top below. */
margin: 8px 0 2px !important;
}
body.bfl-v6 .bfl-bv6-zone-month::before,
body.bfl-v6 .bfl-bv6-zone-month::after {
content: "";
flex: 1;
height: 0.5px;
/* 6.5.34: matched to the grid's bottom hairline (#e1e7f0) so the
header + grid read as one continuous boxed rule weight. */
background: var(--bv6-line, #e1e7f0) !important;
}
body.bfl-v6 .bfl-bv6-zone-month-text {
font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif !important;
font-size: 10px;
font-weight: 500;
color: var(--bv6-ink-soft, #5a6a7e);
letter-spacing: 0.12em;
text-transform: uppercase;
padding: 0 8px;
white-space: nowrap;
}
/* 6.5.31 → 6.5.33: Self Transfer separate-row rules dead-coded.
The Self Transfer entry is now appended as a 5th .bfl-bv6-zone-cell
inside the grid; no separate-row markup is emitted. Kept here for
the unscoped cleanup pass — no live selectors reference them. */
/* Self-transfer-on-zone variant — flat rate, no tiers. */
body.bfl-v6 .bfl-bv6-zone-flat-price {
margin-top: 12px;
font-family: 'Fraunces', Georgia, serif;
font-weight: 500;
font-size: 32px;
letter-spacing: -0.02em;
color: var(--bv6-ink);
font-variant-numeric: tabular-nums;
font-variation-settings: 'opsz' 32, 'wght' 500;
}
/* ─────────────────────────────────────────────
DEAD-CODED: C29 zone-prices range+toggle UI (replaced by tier cards above).
───────────────────────────────────────────── */
.bfl-bv6-zone-prices {
padding: 16px 20px 16px;
}
.bfl-bv6-zone-prices-label {
font-size: 11px;
font-weight: 500;
color: #9ca3af;
letter-spacing: 0.8px;
text-transform: uppercase;
margin: 0 0 4px;
}
.bfl-bv6-zone-prices-range {
font-size: 28px;
font-weight: 500;
color: #2563eb;
margin: 0;
line-height: 1.1;
letter-spacing: -0.5px;
font-variant-numeric: tabular-nums;
}
.bfl-bv6-zone-prices-sub {
font-size: 12px;
color: #6b7280;
margin: 6px 0 10px;
line-height: 1.5;
}
.bfl-bv6-zone-prices-toggle {
width: 100%;
background: #eff6ff;
border: 0;
padding: 9px 14px;
display: flex;
align-items: center;
justify-content: space-between;
font-family: inherit;
font-size: 12px;
color: #1d4ed8;
font-weight: 500;
text-align: left;
cursor: pointer;
line-height: 1.3;
border-radius: 8px;
}
.bfl-bv6-zone-prices-toggle:hover {
background: #dbeafe;
}
.bfl-bv6-zone-prices-toggle:focus {
outline: 2px solid #2563eb;
outline-offset: 2px;
}
.bfl-bv6-zone-prices-toggle-text {
flex: 1;
}
.bfl-bv6-zone-prices-arrow {
font-size: 11px;
color: #1d4ed8;
margin-left: 8px;
flex-shrink: 0;
}
.bfl-bv6-zone-prices-list {
margin-top: 8px;
background: #f9fafb;
border: 0.5px solid #e5e7eb;
border-radius: 10px;
overflow: hidden;
}
.bfl-bv6-zone-price-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 14px;
font-size: 13px;
border-bottom: 0.5px solid #f3f4f6;
}
.bfl-bv6-zone-price-row:last-child {
border-bottom: 0;
}
.bfl-bv6-zone-price-name {
color: #1a1a2e;
font-weight: 500;
}
.bfl-bv6-zone-price-value {
color: #2563eb;
font-weight: 500;
font-variant-numeric: tabular-nums;
font-size: 14px;
}
/* Hide /pp inline price on zone-priced tours (preserved from C28). */
body.bv6-zone-priced .bfl-bv6-pax-price {
display: none;
}
@media (max-width: 480px) {
.bfl-bv6-zone-prices {
padding: 14px 16px 14px;
}
.bfl-bv6-zone-prices-range {
font-size: 24px;
}
.bfl-bv6-zone-price-row {
padding: 9px 12px;
font-size: 12px;
}
.bfl-bv6-zone-price-value {
font-size: 13px;
}
}
/* ─────────────────────────────────────────────
C30b: meeting-point card (Step 3 self-transfer branch).
Replaces the hotel-autocomplete UI when the active package's
is_self_transfer flag is true. 3-row layout with hairline separators
between rows, --bv6-blue icons, --bv6-ink/-soft text tokens.
───────────────────────────────────────────── */
/* 6.6.7: real Google Maps Embed iframe replaces the gradient-grid
placeholder + pulsing pin + "Tap to open in Maps" pill. The iframe is
interactive (pan/zoom) and clicking through opens Google Maps natively,
so the old wrapper + pill are gone. */
body.bfl-v6 .bfl-bv6-mp-map {
position: relative;
width: 100%;
height: 180px;
border-radius: var(--bv6-radius-sm) var(--bv6-radius-sm) 0 0;
overflow: hidden;
background: #eef2f8;
}
body.bfl-v6 .bfl-bv6-mp-map-frame {
width: 100%;
height: 100%;
border: 0;
display: block;
}
/* Chunk 5: full-width "Open in Google Maps" CTA below the row stack. */
body.bfl-v6 .bfl-bv6-mp-cta {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
width: 100%;
margin-top: 10px;
padding: 10px 12px;
background: var(--bv6-blue);
color: #fff;
border-radius: var(--bv6-r-sm);
font-size: 13px !important;
font-weight: 600;
text-decoration: none;
transition: background .15s;
}
body.bfl-v6 .bfl-bv6-mp-cta:hover { background: var(--bv6-blue-deep); color: #fff; }
body.bfl-v6 .bfl-bv6-mp-cta .bfl-bv6-icon { font-size: 16px; }
/* Chunk 5: outline "Got it — continue" confirmation button. Routes
through handleContinue(3) which collapses the step to a pill. */
body.bfl-v6 .bfl-bv6-mp-confirm {
display: block;
width: 100%;
margin-top: 10px;
padding: 11px;
background: var(--bv6-card);
border: 1.5px solid var(--bv6-blue);
color: var(--bv6-blue);
border-radius: var(--bv6-r-md);
font-family: 'DM Sans', system-ui, sans-serif !important;
font-size: 13px !important;
font-weight: 600;
cursor: pointer;
transition: background .15s, color .15s;
}
body.bfl-v6 .bfl-bv6-mp-confirm:hover {
background: var(--bv6-blue-soft);
}
body.bfl-v6 .bfl-bv6-meeting-point {
border: 1px solid var(--bv6-line);
border-radius: 0 0 var(--bv6-radius-sm) var(--bv6-radius-sm);
background: var(--bv6-card);
padding: 0 14px;
}
body.bfl-v6 .bfl-bv6-mp-row {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 12px 0;
}
body.bfl-v6 .bfl-bv6-mp-row + .bfl-bv6-mp-row {
border-top: 0.5px solid var(--bv6-line-soft);
}
body.bfl-v6 .bfl-bv6-mp-icon {
flex: 0 0 auto;
color: var(--bv6-blue);
font-size: 16px;
line-height: 1.4;
width: 20px;
text-align: center;
}
body.bfl-v6 .bfl-bv6-mp-icon--pin {
border-radius: 50%;
animation: bfl-bv6-pin-pulse 2s ease-out infinite;
}
body.bfl-v6 .bfl-bv6-mp-content {
flex: 1 1 auto;
min-width: 0;
line-height: 1.4;
}
body.bfl-v6 .bfl-bv6-mp-title {
color: var(--bv6-ink);
font-weight: 500;
font-size: 14px;
}
body.bfl-v6 .bfl-bv6-mp-sub {
color: var(--bv6-ink-soft);
font-size: 13px;
margin-top: 2px;
}
body.bfl-v6 .bfl-bv6-mp-action {
flex: 0 0 auto;
margin-left: auto;
align-self: flex-start;
color: var(--bv6-blue);
font-size: 12px;
font-weight: 500;
text-decoration: none;
padding-top: 1px;
}
body.bfl-v6 .bfl-bv6-mp-action:hover {
text-decoration: underline;
}
@media (min-width: 768px) {
body.bfl-v6 .bfl-bv6-meeting-point {
padding: 0 18px;
}
body.bfl-v6 .bfl-bv6-mp-row {
padding: 16px 0;
}
}
/* ─────────────────────────────────────────────
C30c: zone block visibility under bv6-cal-priced.
Design choice: the flat-rate header for self-transfer is rendered INTO
the same .bfl-bv6-zone-prices container (different inner content) via
renderHeader's self-transfer branch. Adding `body.bv6-cal-priced
.bfl-bv6-zone-prices { display: none }` would hide the flat-rate too.
Mutex is therefore maintained via JS replaceWith content-swap, not CSS
visibility. The C28 rule `body.bv6-zone-priced .bfl-bv6-pax-price
{ display: none }` and the C25/C26 calendar-cell rules under
bv6-cal-priced cover the rest of the visibility contract.
───────────────────────────────────────────── */
/* ─────────────────────────────────────────────
C31a: Inline SVG icon sprite + base icon class.
Sprite container is hidden off-flow (not display:none, which would
suppress rendering in some browsers). Each .bfl-bv6-icon
inherits its colour from `currentColor` (parent's `color` property)
and its size from `1em` (parent's `font-size`). vertical-align tweak
keeps the glyph centered with adjacent text in mp-action links.
───────────────────────────────────────────── */
#bfl-bv6-icons {
position: absolute;
width: 0;
height: 0;
overflow: hidden;
}
.bfl-bv6-icon {
width: 1em;
height: 1em;
display: inline-block;
vertical-align: -0.125em;
flex-shrink: 0;
fill: none;
stroke: currentColor;
}
/* ─────────────────────────────────────────────
C31b: Trust pill strip below header.
Sits as its own band between .bfl-bv6-header and .bfl-bv6-body —
bg matches the header gradient's bottom stop (--bv6-card) for
visual continuity, no border-bottom (the header already supplies
the line, doubling would look heavy). Pills wrap to a second row
on narrow screens via flex-wrap. Pill text uses --bv6-blue-deep
for the blue variant; green and indigo are scoped colors.
───────────────────────────────────────────── */
body.bfl-v6 .bfl-bv6-trust-strip {
display: flex;
flex-wrap: wrap;
/* Item 3: tighter gap so 3 pills fit one row in the V6 sidebar. */
gap: 4px;
padding: 12px 22px 14px;
background: var(--bv6-card);
}
body.bfl-v6 .bfl-bv6-trust-pill {
display: inline-flex;
align-items: center;
/* Item 3: tighter pill (3px 8px padding, 4px icon-text gap, 10px font)
so "Free cancellation · Pay on the day · WhatsApp · real humans"
lives on one row at the live sidebar width. */
gap: 4px;
padding: 3px 8px;
border-radius: 999px;
font-size: 10px !important;
font-weight: 500;
line-height: 1 !important;
white-space: nowrap;
}
body.bfl-v6 .bfl-bv6-trust-pill--green {
background: #ecfdf5;
color: #047857;
}
body.bfl-v6 .bfl-bv6-trust-pill--blue {
background: var(--bv6-blue-soft);
color: var(--bv6-blue-deep);
}
body.bfl-v6 .bfl-bv6-trust-pill--indigo {
background: #eef2ff;
color: #6366f1;
}
@media (max-width: 600px) {
body.bfl-v6 .bfl-bv6-trust-strip {
padding: 10px 16px 12px;
}
}
/* ─────────────────────────────────────────────
C32c — calendar foot legend (Lowest price · Today)
───────────────────────────────────────────── */
body.bfl-v6 .bfl-bv6-cal-foot {
display: flex;
align-items: center;
justify-content: flex-start;
margin-top: 12px;
padding-top: 10px;
border-top: 0.5px solid var(--bv6-line-soft);
font-size: 11px !important;
color: var(--bv6-ink-soft);
}
body.bfl-v6 .bfl-bv6-cal-legend {
display: flex;
align-items: center;
gap: 14px;
}
body.bfl-v6 .bfl-bv6-cal-legend-item {
display: inline-flex;
align-items: center;
gap: 5px;
line-height: 1 !important;
}
body.bfl-v6 .bfl-bv6-cal-legend-dot {
width: 8px;
height: 8px;
border-radius: 50%;
display: inline-block;
flex-shrink: 0;
}
body.bfl-v6 .bfl-bv6-cal-legend-dot.is-cheap {
background: var(--bv6-green-deep);
}
body.bfl-v6 .bfl-bv6-cal-legend-dot.is-today {
background: var(--bv6-blue);
}
/* Chunk 2: right-aligned unit indicator on the calendar foot. */
body.bfl-v6 .bfl-bv6-cal-foot {
justify-content: space-between;
}
body.bfl-v6 .bfl-bv6-cal-foot-unit {
display: inline-flex;
align-items: center;
gap: 4px;
color: var(--bv6-ink-soft);
font-size: 11px;
line-height: 1;
}
body.bfl-v6 .bfl-bv6-cal-foot-unit .bfl-bv6-icon {
font-size: 12px;
color: var(--bv6-ink-faint);
}
/* C32h: respect prefers-reduced-motion. Disables decorative motion
(cellPop, total-pulse, hover lifts, scale presses, arrow nudge)
while preserving essential UI feedback (bfl-bv6-spin loading
indicators stay on — disabling them would make searches feel
broken) and state positioning (decide-later switch thumb,
mobile bottom-bar defensive translateY). */
@media (prefers-reduced-motion: reduce) {
/* Decorative animations OFF */
body.bfl-v6 .bfl-bv6-cal-mount .ui-state-active {
animation: none !important;
}
body.bfl-v6 .bfl-bv6-total-line.is-pulsing .bfl-bv6-total-amount {
animation: none !important;
}
/* Decorative transforms OFF (state still visible via color/bg) */
body.bfl-v6 .bfl-bv6-cal-mount .ui-state-hover {
transform: none !important;
}
body.bfl-v6 .bfl-bv6-pax-btn:hover:not(:disabled),
body.bfl-v6 .bfl-bv6-pax-btn:active:not(:disabled) {
transform: none !important;
}
body.bfl-v6 .bfl-bv6-package-tile:active {
transform: none !important;
}
body.bfl-v6 .bfl-bv6-submit:active:not(:disabled) {
transform: none !important;
}
body.bfl-v6 .bfl-bv6-submit:hover:not(:disabled) .bfl-bv6-submit-arrow {
transform: none !important;
}
body.bfl-v6 .bfl-bv6-step-continue:active:not(:disabled) {
transform: none !important;
}
/* Hotel clear-X: preserve translateY(-50%) positioning,
drop scale (button stays vertically centered, no press feedback) */
body.bfl-v6 .bfl-bv6-hotel-clear:hover,
body.bfl-v6 .bfl-bv6-hotel-clear:active {
transform: translateY(-50%) !important;
}
/* C33f: pin-pulse decorative ripple OFF */
body.bfl-v6 .bfl-bv6-mp-icon--pin {
animation: none !important;
}
}
/* ─────────────────────────────────────────────
6.6.1 — Footer trust line: avatar stack
───────────────────────────────────────────── */
body.bfl-v6 .bfl-bv6-foot-trust {
display: flex !important;
align-items: center;
gap: 12px;
padding: 12px 10px;
background: #f5f9ff;
border-radius: 12px;
margin-top: 14px;
}
body.bfl-v6 .bfl-bv6-trust-avatars {
display: flex;
align-items: center;
position: relative;
flex-shrink: 0;
}
body.bfl-v6 .bfl-bv6-trust-avatar {
width: 28px;
height: 28px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.02em;
border: 2px solid #ffffff;
flex-shrink: 0;
font-family: 'DM Sans', system-ui, sans-serif;
position: relative;
}
body.bfl-v6 .bfl-bv6-trust-avatar + .bfl-bv6-trust-avatar {
margin-left: -10px;
}
body.bfl-v6 .bfl-bv6-trust-avatar.is-h { background: #fef3c7; color: #92400e; }
body.bfl-v6 .bfl-bv6-trust-avatar.is-d { background: #fce7f3; color: #9f1239; }
body.bfl-v6 .bfl-bv6-trust-avatar.is-a { background: #dcfce7; color: #166534; }
body.bfl-v6 .bfl-bv6-trust-dot {
width: 9px;
height: 9px;
border-radius: 50%;
background: #16a34a;
border: 2px solid #ffffff;
position: absolute;
right: -1px;
bottom: -1px;
z-index: 3;
animation: bv6TrustPulse 2s ease-in-out infinite;
}
@keyframes bv6TrustPulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.5); }
50% { box-shadow: 0 0 0 4px rgba(22, 163, 74, 0); }
}
body.bfl-v6 .bfl-bv6-trust-text { min-width: 0; }
body.bfl-v6 .bfl-bv6-trust-primary {
font-size: 13px;
font-weight: 500;
color: #0a1628;
line-height: 1.25;
}
body.bfl-v6 .bfl-bv6-trust-secondary {
font-size: 11.5px;
color: #5a6a7e;
line-height: 1.3;
margin-top: 2px;
}
/* ─────────────────────────────────────────────
6.6.3 — Zone-theme header: "Booking form" + hairline rule
Replaces the old .bfl-bv6-zone-head label+sub block.
───────────────────────────────────────────── */
body.bfl-v6 .bfl-bv6-form-title {
font-family: 'Fraunces', Georgia, serif;
font-variation-settings: 'opsz' 24;
font-weight: 500;
font-size: 19px;
color: #0a1628;
letter-spacing: -0.01em;
font-synthesis: none;
}
body.bfl-v6 .bfl-bv6-form-rule {
height: 0.5px;
background: #e1e7f0;
margin: 12px 0 0;
}
/* ─────────────────────────────────────────────
6.6.5 — Mobile: gap above the V6 widget so it
doesn't sit flush against the parent theme's
sticky anchor-nav bar.
───────────────────────────────────────────── */
@media (max-width: 980px) {
body.bfl-v6 .bfl-v2-sidebar {
margin-top: 20px !important;
}
}
|