/* ============================================================================
   MOBILE BOOKING SHEET (pilot, 2026-07-17) — mock: Downloads/booking-mobile_3.html
   One fullscreen 4-step booking surface for BOTH mobile entry points:
   tour page (mobar CTA) and catalog/booknow card taps (≤900px).
   Same architecture as bw2/bm2: the legacy .booking form is the source of
   truth; step 1 is a proxy pick-UI, steps 2-4 the real form steps reskinned.
   Mock guide honored: 100dvh (not vh), safe-area footer padding, 16px inputs
   (Safari zoom), constant-height footer (Back lives in the header), compact
   one-line package rows, no card fields (gateway redirect note).
   Fonts per brand policy: Plus Jakarta Sans + JetBrains Mono. Red #FF2800.
   Namespace: t4-bwm.
   ========================================================================== */

/* the in-flow widget is replaced by the sheet on mobile pilot pages */
@media (max-width: 900px) {
	body.t4-bwm-on .t4-aside { display: none !important; }
}

.t4-bwm {
	--bwm-red: #FF2800;
	--bwm-red-soft: #ffece7;
	--bwm-ink: #141414;
	--bwm-body: #4a4a4a;
	--bwm-muted: #8a8a8a;
	--bwm-line: #e8e3d9;
	--bwm-line2: #f0ece4;
	--bwm-page: #f7f3ec;
	--bwm-card: #fff;
	--bwm-ok: #1F7A3D;
	--bwm-ok-bg: #e9f5ec;
	--bwm-warn: #B26A00;
	--bwm-err: #C4271B;
	position: fixed;
	inset: 0;
	z-index: 1300;
	width: 100%;
	height: 100dvh; /* dvh, not vh — Safari URL bar eats the footer otherwise (guide p.2a) */
	background: var(--bwm-card);
	border-top: 3px solid var(--bwm-red);
	display: flex;
	flex-direction: column;
	font-family: var(--t4-sans);
	color: var(--bwm-ink);
	/* iOS sheet curve — slides up from the bottom edge, GPU transform only */
	animation: t4bwmUp .38s cubic-bezier(.32, .72, 0, 1) both;
}
@keyframes t4bwmUp { from { transform: translateY(100%); } to { transform: none; } }
.t4-bwm--closing { animation: t4bwmDown .3s cubic-bezier(.5, 0, .75, 1) both; }
@keyframes t4bwmDown { from { transform: none; } to { transform: translateY(100%); } }
.t4-bwm *, .t4-bwm *::before, .t4-bwm *::after { box-sizing: border-box; }
.t4-bwm button { font-family: inherit; -webkit-tap-highlight-color: transparent; }

/* page-scroll lock while the sheet is open (guide p.2d; body keeps NATURAL height) */
html.t4-bwm-lock {
	overflow: hidden !important;
	height: 100% !important;
}
html.t4-bwm-lock body {
	position: fixed !important;
	left: 0 !important;
	right: 0 !important;
	width: 100% !important;
	height: auto !important;
	overflow: visible !important;
}

/* ================= HEADER ================= */
.t4-bwm__hd { padding: 12px 16px 0; flex: none; background: var(--bwm-card); border-bottom: 1px solid var(--bwm-line); }
.t4-bwm__hdtop { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.t4-bwm__prc { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }
.t4-bwm__prc .was { font-size: var(--t4-fs-small); color: var(--bwm-muted); text-decoration: line-through; font-weight: 600; }
.t4-bwm__prc .now { font-size: var(--t4-fs-h4); font-weight: 800; line-height: 1; letter-spacing: -.3px; }
.t4-bwm__prc .u { font-family: var(--t4-mono); font-size: var(--t4-fs-micro); color: var(--bwm-muted); letter-spacing: .5px; }
.t4-bwm__tourline { font-size: var(--t4-fs-micro); color: var(--bwm-muted); margin-top: 4px; }
.t4-bwm__x {
	width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--bwm-line);
	background: var(--bwm-page); display: flex; align-items: center; justify-content: center;
	flex: none; cursor: pointer; padding: 0;
}
.t4-bwm__x svg { width: 14px; height: 14px; stroke: var(--bwm-body); fill: none; stroke-width: 2; }

/* slim stepper bars + step line (Back lives HERE, never in the footer — guide p.3) */
.t4-bwm__bars { display: flex; gap: 4px; margin-top: 11px; }
/* each bar FILLS smoothly left→right via a scaled ::after (GPU), colors crossfade */
.t4-bwm__bar {
	position: relative; flex: 1; height: 3px; border-radius: 2px; background: #e6e1d7;
	border: none; padding: 0; overflow: hidden;
}
.t4-bwm__bar::after {
	content: ''; position: absolute; inset: 0; border-radius: 2px;
	background: var(--bwm-red); transform: scaleX(0); transform-origin: left center;
	transition: transform .45s cubic-bezier(.32, .72, 0, 1), background-color .3s ease;
}
.t4-bwm__bar.on::after { transform: scaleX(1); background: var(--bwm-red); }
.t4-bwm__bar.done::after { transform: scaleX(1); background: var(--bwm-ok); }
.t4-bwm__stline { display: flex; align-items: center; justify-content: space-between; padding: 8px 0 10px; gap: 8px; }
.t4-bwm__stline .lft { display: flex; align-items: center; gap: 7px; min-width: 0; }
.t4-bwm__stline .cur {
	font-family: var(--t4-mono);
	font-size: var(--t4-fs-micro); letter-spacing: 1.5px; text-transform: uppercase; font-weight: 600;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.t4-bwm__stline .cnt { font-size: var(--t4-fs-micro); color: var(--bwm-muted); flex: none; }
.t4-bwm__bkb {
	width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--bwm-line); background: var(--bwm-page);
	display: flex; align-items: center; justify-content: center; flex: none; padding: 0; cursor: pointer;
}
.t4-bwm__bkb svg { width: 13px; height: 13px; stroke: var(--bwm-body); fill: none; stroke-width: 2.4; }
/* visibility, NOT display — the slot always holds space so the step name never shifts (guide p.3) */
.t4-bwm__bkb.off { visibility: hidden; }

/* ================= BODY ================= */
.t4-bwm__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 16px 16px 18px; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
/* direction-aware step transition (forward slides in from the right, back from the left) */
.t4-bwm__body--fwd { animation: t4bwmStepFwd .28s cubic-bezier(.25, .8, .35, 1) both; }
.t4-bwm__body--bck { animation: t4bwmStepBck .28s cubic-bezier(.25, .8, .35, 1) both; }
@keyframes t4bwmStepFwd { from { opacity: 0; transform: translateX(26px); } to { opacity: 1; transform: none; } }
@keyframes t4bwmStepBck { from { opacity: 0; transform: translateX(-26px); } to { opacity: 1; transform: none; } }
.t4-bwm__secl {
	font-family: var(--t4-mono);
	font-size: var(--t4-fs-micro); letter-spacing: 1.6px; color: var(--bwm-muted);
	text-transform: uppercase; font-weight: 600; margin-bottom: 8px;
}
.t4-bwm__sec + .t4-bwm__sec { margin-top: 18px; }
.t4-bwm__sec[hidden] { display: none; }
.t4-bwm__h2 { font-size: var(--t4-fs-body); font-weight: 800; letter-spacing: .2px; text-transform: uppercase; margin: 0; }
.t4-bwm__subnote { font-size: var(--t4-fs-micro); color: var(--bwm-muted); margin: 4px 0 14px; line-height: 1.4; }

/* --- dates: horizontal snap rail --- */
.t4-bwm__datehd { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.t4-bwm__datehd .t4-bwm__secl { margin: 0; }
.t4-bwm__calbtn {
	display: inline-flex; align-items: center; gap: 5px; background: var(--bwm-card); border: 1px solid var(--bwm-line);
	border-radius: 8px; padding: 6px 10px; font-size: var(--t4-fs-micro); font-weight: 600; color: var(--bwm-ink); cursor: pointer;
}
.t4-bwm__calbtn svg { width: 12px; height: 12px; stroke: var(--bwm-red); fill: none; stroke-width: 2; }
.t4-bwm__drow {
	display: flex; gap: 6px; overflow-x: auto; padding: 7px 0 4px;
	scrollbar-width: none; scroll-snap-type: x mandatory;
}
.t4-bwm__drow::-webkit-scrollbar { display: none; }
.t4-bwm__d {
	position: relative; flex: none; width: 60px; border: 1px solid var(--bwm-line); background: var(--bwm-card);
	border-radius: 10px; padding: 8px 2px 7px; text-align: center; scroll-snap-align: start; cursor: pointer;
}
.t4-bwm__d .dow { font-family: var(--t4-mono); font-size: var(--t4-fs-micro); letter-spacing: .6px; color: var(--bwm-muted); text-transform: uppercase; font-weight: 600; }
.t4-bwm__d .dd { font-size: var(--t4-fs-lg); font-weight: 800; line-height: 1.1; margin: 1px 0; }
.t4-bwm__d .mo { font-family: var(--t4-mono); font-size: 8.5px; letter-spacing: .6px; color: var(--bwm-muted); text-transform: uppercase; }
.t4-bwm__d.sel { background: var(--bwm-red); border-color: var(--bwm-red); }
.t4-bwm__d.sel .dow, .t4-bwm__d.sel .mo { color: rgba(255, 255, 255, .85); }
.t4-bwm__d.sel .dd { color: #fff; }
.t4-bwm__d .today {
	position: absolute; top: -6px; left: 50%; transform: translateX(-50%);
	background: #F5A623; color: #fff; font-size: 7.5px; font-weight: 600;
	letter-spacing: .4px; padding: 1.5px 6px; border-radius: 7px; white-space: nowrap;
}

/* --- slots --- */
.t4-bwm__slots { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.t4-bwm__slot { border: 1px solid var(--bwm-line); background: var(--bwm-card); border-radius: 10px; padding: 10px 11px; text-align: left; cursor: pointer; }
.t4-bwm__slot .t { font-size: var(--t4-fs-body); font-weight: 800; line-height: 1; }
.t4-bwm__slot .s { font-size: var(--t4-fs-micro); color: var(--bwm-muted); margin-top: 4px; }
.t4-bwm__slot .s.low { color: var(--bwm-warn); font-weight: 600; }
/* selected = inset shadow, not a thicker border (desktop decision — no layout shift) */
.t4-bwm__slot.sel { border-color: var(--bwm-red); box-shadow: inset 0 0 0 1px var(--bwm-red); background: var(--bwm-red-soft); }
.t4-bwm__slot.sel .t { color: var(--bwm-red); }
.t4-bwm__slot:disabled { opacity: .4; cursor: not-allowed; }
.t4-bwm__slotsbox .t4-cutoff { margin: 0; }
.t4-bwm__loading { display: flex; align-items: center; gap: 9px; padding: 12px 2px; color: var(--bwm-body); font-size: var(--t4-fs-micro); font-weight: 600; }
.t4-bwm__dots { display: inline-flex; gap: 4px; align-items: center; }
.t4-bwm__dots i {
	width: 5px; height: 5px; border-radius: 50%; background: var(--bwm-red); display: block;
	animation: t4bwmDot 1.1s infinite ease-in-out;
}
.t4-bwm__dots i:nth-child(2) { animation-delay: .18s; }
.t4-bwm__dots i:nth-child(3) { animation-delay: .36s; }
@keyframes t4bwmDot { 0%, 70%, 100% { opacity: .25; transform: translateY(0); } 32% { opacity: 1; transform: translateY(-4px); } }
.t4-bwm__empty { padding: 10px 2px; color: var(--bwm-muted); font-size: var(--t4-fs-micro); }

/* --- qty --- */
.t4-bwm__qty {
	display: flex; align-items: center; justify-content: space-between; gap: 12px;
	border: 1px solid var(--bwm-line); border-radius: 10px; padding: 10px 12px;
}
.t4-bwm__qty .lb { font-size: var(--t4-fs-small); font-weight: 600; }
.t4-bwm__qty .sb { font-size: var(--t4-fs-micro); color: var(--bwm-muted); margin-top: 1px; }
.t4-bwm__stepper { display: flex; align-items: center; border: 1px solid var(--bwm-line); border-radius: 8px; overflow: hidden; flex: none; }
.t4-bwm__stepper button {
	width: 40px; height: 40px; border: none; background: var(--bwm-page); cursor: pointer;
	display: flex; align-items: center; justify-content: center; font-size: var(--t4-fs-body); font-weight: 600; color: var(--bwm-ink);
}
.t4-bwm__stepper button:disabled { opacity: .3; }
.t4-bwm__stepper .n { width: 34px; text-align: center; font-size: var(--t4-fs-small); font-weight: 600; }

/* --- addon rows (private / refund / terms) --- */
.t4-bwm__addon {
	position: relative;
	display: flex; align-items: center; gap: 11px; border: 1px solid var(--bwm-line);
	background: var(--bwm-card); border-radius: 10px; padding: 11px 12px; cursor: pointer;
}
.t4-bwm__addon.on { border-color: var(--bwm-red); background: var(--bwm-red-soft); }
.t4-bwm__cbx {
	width: 20px; height: 20px; border: 1.5px solid #cfc8ba; border-radius: 5px; flex: none;
	background: #fff; display: flex; align-items: center; justify-content: center; transition: .12s;
}
.t4-bwm__addon.on .t4-bwm__cbx { background: var(--bwm-red); border-color: var(--bwm-red); }
.t4-bwm__cbx svg { width: 11px; height: 11px; stroke: #fff; fill: none; stroke-width: 3; opacity: 0; }
.t4-bwm__addon.on .t4-bwm__cbx svg { opacity: 1; }
.t4-bwm__addon .txt { flex: 1; min-width: 0; }
.t4-bwm__addon .txt b { font-size: var(--t4-fs-small); font-weight: 600; display: block; }
.t4-bwm__addon .txt span { font-size: var(--t4-fs-micro); color: var(--bwm-muted); line-height: 1.35; display: block; margin-top: 2px; }
.t4-bwm__addon .pr { font-size: var(--t4-fs-small); font-weight: 600; color: var(--bwm-red); flex: none; }
/* refund with Pay later: dimmed contents (row opacity would dim the popover child too) */
.t4-bwm__addon--off { cursor: not-allowed; border-color: var(--bwm-line2) !important; background: #fbf9f5 !important; }
.t4-bwm__addon--off > .t4-bwm__cbx,
.t4-bwm__addon--off > .txt,
.t4-bwm__addon--off > .pr { opacity: .45; }
/* unchecked terms: point at the row instead of greying the CTA (desktop decision) */
.t4-bwm__addon--err {
	border-color: var(--bwm-err) !important;
	box-shadow: 0 0 0 3px rgba(196, 39, 27, .12) !important;
	animation: t4bwmShake .4s ease 1;
}
@keyframes t4bwmShake {
	0%, 100% { transform: translateX(0); }
	25% { transform: translateX(-5px); }
	50% { transform: translateX(5px); }
	75% { transform: translateX(-3px); }
}

/* "?" badge + dark popover (desktop parity) */
.t4-bwm__q {
	width: 20px; height: 20px; border-radius: 50%; border: 1px solid #cfc8ba; background: #fff;
	color: var(--bwm-muted); font-size: var(--t4-fs-micro); font-weight: 600; line-height: 1;
	display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex: none; padding: 0;
}
.t4-bwm__pop {
	position: absolute; right: 0; bottom: calc(100% + 10px); z-index: 8;
	max-width: min(300px, calc(100vw - 48px)); background: #17181c; color: #fff; border-radius: 12px; padding: 12px 14px;
	font-size: var(--t4-fs-micro); line-height: 1.55; font-weight: 400; box-shadow: 0 12px 34px rgba(0, 0, 0, .28);
	animation: t4bwmIn .18s ease both;
}
.t4-bwm__pop::after {
	content: ''; position: absolute; right: 20px; top: 100%;
	border: 7px solid transparent; border-top-color: #17181c;
}
@keyframes t4bwmIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ================= FORM HOST (steps 2-4 = the real .booking, reskinned) ================= */
.t4-bwm__formhost { overflow: hidden; }
.t4-bwm__formhost .booking,
.t4-bwm__formhost .booking-step,
.t4-bwm__formhost .booking-step > div {
	width: 100% !important; max-width: 100% !important; min-width: 0 !important;
}
.t4-bwm__formhost .booking { display: block; padding: 0 !important; margin: 0 !important; }
.t4-bwm__formhost .booking-step { padding: 0 !important; margin: 0 !important; }
.t4-bwm__formhost .section-header,
.t4-bwm__formhost .booking-step__title,
.t4-bwm__formhost .booking-step__header,
.t4-bwm__formhost .calendar,
.t4-bwm__formhost .booking .variants,
.t4-bwm__formhost .booking-step__label,
.t4-bwm__formhost .js-number_of_buggies_list,
.t4-bwm__formhost .number-of-buggies,
.t4-bwm__formhost .booking-step__extra,
.t4-bwm__formhost .booking-step__extra-hint,
.t4-bwm__formhost .field:has(.field__select),
.t4-bwm__formhost .booking-step__footer,
.t4-bwm__formhost .booking-step__back,
.t4-bwm__formhost .js-create-order-button,
.t4-bwm__formhost .booking-checkout__total,
.t4-bwm__formhost .js-selected_tour_options,
.t4-bwm__formhost .modal__current,
.t4-bwm__formhost .booking__attention,
.t4-bwm__formhost .booking-step__recap,
.t4-bwm__formhost .booking-step__addons-toggle,
.t4-bwm__formhost .booking-step__note,
.t4-bwm__formhost .booking-checkout__title,
.t4-bwm__formhost .booking-checkout__table,
.t4-bwm__formhost .booking-checkout__btn,
.t4-bwm__formhost .modal__divider,
.t4-bwm__formhost .t4-formhead,
.t4-bwm__formhost .t4-paylabel,
.t4-bwm__formhost .t4-paytrust,
.t4-bwm__formhost .t4-picksum,
.t4-bwm__formhost .t4-refund,
.t4-bwm__formhost .booking-checkout__privacy,
.t4-bwm__formhost .tabby-roadmap { display: none !important; }
.t4-bwm__formhost .booking-step__addons-collapsible {
	display: block !important; height: auto !important; max-height: none !important; overflow: visible !important;
}

/* --- step 2: contact fields, single stack --- */
.t4-bwm__formhost .booking-step__fields {
	display: grid; gap: 13px; grid-template-columns: 1fr;
	max-width: none !important; width: 100% !important;
}
.t4-bwm__formhost .field { display: block !important; margin: 0 !important; padding: 0 !important; width: 100% !important; max-width: none !important; }
.t4-bwm__formhost .field:has(.js-fullname) { order: 1; }
.t4-bwm__formhost .field:has(.js-email) { order: 2; }
.t4-bwm__formhost .field:has(.js-phone) { order: 3; }
.t4-bwm__formhost .field:has(.js-pickup_location) { order: 4; }
.t4-bwm__formhost .field__label { display: block !important; padding: 0 !important; margin: 0 !important; }
.t4-bwm__formhost .field__placeholder { display: none !important; }
.t4-bwm__flabel { display: block; font-size: var(--t4-fs-micro); font-weight: 600; color: var(--bwm-body); margin-bottom: 6px; }
.t4-bwm__flabel small { color: var(--bwm-muted); font-weight: 400; }
/* 16px is MANDATORY — anything smaller and Safari zooms the viewport on focus (guide p.2c) */
.t4-bwm__formhost .field__input {
	width: 100%; border: 1px solid #ded8cc !important; background: var(--bwm-card) !important;
	border-radius: 10px !important; padding: 12px 13px !important; font-size: var(--t4-fs-body) !important;
	font-family: inherit !important; color: var(--bwm-ink) !important; height: auto !important;
}
.t4-bwm__formhost .field__input::placeholder { color: #b8b2a6 !important; opacity: 1 !important; font-weight: 400; }
.t4-bwm__formhost .field__input:focus {
	outline: none; border-color: var(--bwm-red) !important;
	box-shadow: 0 0 0 3px rgba(255, 40, 0, .1);
}
.t4-bwm__formhost .field.t4-invalid .field__input { border-color: var(--bwm-err) !important; box-shadow: 0 0 0 3px rgba(196, 39, 27, .08) !important; }
.t4-bwm__formhost .t4-ferr { color: var(--bwm-err); font-size: var(--t4-fs-micro); margin-top: 6px; }
.t4-bwm__formhost .iti { width: 100% !important; display: block !important; }
.t4-bwm__formhost .iti input.field__input,
.t4-bwm__formhost .iti input[type="tel"] { padding-left: 90px !important; }
.t4-bwm__formhost .iti__flag-container { padding: 0 !important; }
.t4-bwm__formhost .iti__selected-flag { padding: 0 8px 0 11px !important; background: none !important; width: 80px !important; }

/* --- step 3: packages = compact one-line radio rows (guide p.7c: NO vertical lists) --- */
.t4-bwm__formhost .booking-step__cards {
	display: flex !important; flex-direction: column; gap: 7px; margin: 0 !important; width: 100% !important;
}
.t4-bwm__formhost .extra-card {
	position: relative;
	display: grid !important; grid-template-columns: 18px minmax(0, 1fr) auto; column-gap: 9px;
	align-items: start;
	border: 1px solid var(--bwm-line) !important; background: var(--bwm-card) !important;
	border-radius: 11px !important; padding: 10px 11px !important; cursor: pointer;
	margin: 0 !important; width: 100% !important; min-height: 0 !important; box-shadow: none !important;
}
.t4-bwm__formhost .extra-card.active {
	border-color: var(--bwm-red) !important; box-shadow: inset 0 0 0 1px var(--bwm-red) !important; background: var(--bwm-red-soft) !important;
}
.t4-bwm__formhost .extra-card::before {
	content: ''; grid-column: 1; grid-row: 1; width: 18px; height: 18px; border-radius: 50%;
	border: 1.5px solid #cfc8ba; background: #fff; margin-top: 1px; transition: .12s;
	box-sizing: border-box;
}
.t4-bwm__formhost .extra-card.active::before { border-color: var(--bwm-red); border-width: 5.5px; }
.t4-bwm__formhost .extra-card::after { display: none !important; content: none !important; }
.t4-bwm__formhost .extra-card__header { display: contents !important; }
.t4-bwm__formhost .extra-card__title {
	grid-column: 2; grid-row: 1;
	font-family: var(--t4-mono); font-size: var(--t4-fs-micro) !important; letter-spacing: 1.1px;
	text-transform: uppercase; font-weight: 600 !important; display: flex; align-items: center; gap: 6px;
	line-height: 1.7; margin: 0 !important; padding: 0 !important; background: none !important; text-align: left !important;
}
.t4-bwm__formhost .extra-card__title::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #9AA0A6; flex: none; }
.t4-bwm__formhost .extra-card--bronze .extra-card__title { color: #9C6633 !important; }
.t4-bwm__formhost .extra-card--bronze .extra-card__title::before { background: #C08552; }
.t4-bwm__formhost .extra-card--silver .extra-card__title { color: #6E7176 !important; }
.t4-bwm__formhost .extra-card--silver .extra-card__title::before { background: #9AA0A6; }
.t4-bwm__formhost .extra-card--gold .extra-card__title { color: #9A7B1F !important; }
.t4-bwm__formhost .extra-card--gold .extra-card__title::before { background: #D4AF37; }
.t4-bwm__pksub { grid-column: 2; grid-row: 2; font-size: var(--t4-fs-micro); color: var(--bwm-body); line-height: 1.35; margin-top: 3px; text-align: left; }
/* struck original under the contents line — "worth" info the mock keeps (guide p.5c) */
.t4-bwm__pkworth { grid-column: 2; grid-row: 3; font-size: var(--t4-fs-micro); color: var(--bwm-muted); margin-top: 3px; text-align: left; }
.t4-bwm__pkworth s { color: var(--bwm-muted); }
.t4-bwm__formhost .extra-card__price {
	grid-column: 3; grid-row: 1; justify-self: end; text-align: right !important;
	font-size: var(--t4-fs-body) !important; font-weight: 800 !important; line-height: 1.1 !important;
	margin: 0 !important; padding: 0 !important; color: var(--bwm-ink) !important; letter-spacing: -.2px;
}
.t4-bwm__formhost .extra-card__price * {
	font-size: inherit !important; font-weight: inherit !important; color: inherit !important;
	margin: 0 !important; padding: 0 !important; letter-spacing: inherit !important; line-height: inherit !important;
	display: inline !important; vertical-align: baseline !important;
}
.t4-bwm__formhost .extra-card__price::before,
.t4-bwm__formhost .extra-card__price::after { display: none !important; content: none !important; }
.t4-bwm__formhost .extra-card__saved {
	grid-column: 3; grid-row: 2; justify-self: end;
	font-size: var(--t4-fs-micro) !important; font-weight: 600 !important; color: var(--bwm-ok) !important;
	background: var(--bwm-ok-bg) !important; padding: 2px 6px !important; border-radius: 7px !important;
	margin: 4px 0 0 !important; line-height: 1.3 !important; display: inline-block !important;
	letter-spacing: 0 !important; text-transform: none !important; width: auto !important; white-space: nowrap;
}
.t4-bwm__formhost .extra-card__old-price,
.t4-bwm__formhost .extra-card__list,
.t4-bwm__formhost .extra-card__btn,
.t4-bwm__formhost .extra-card hr { display: none !important; }
.t4-bwm__formhost .extra-card .checkbox__input { position: absolute; opacity: 0; pointer-events: none; }
/* "Most Popular" pill — absolute on the card edge; parent must never get overflow:hidden (guide p.7e) */
.t4-bwm .t4-bwm__formhost .extra-card .extra-card__sticker {
	position: absolute !important; top: 0 !important; bottom: auto !important; right: 10px !important; left: auto !important;
	transform: translateY(-50%) !important; width: auto !important; height: auto !important;
	background: var(--bwm-red) !important; color: #fff !important; font-size: 8px !important; font-weight: 600 !important;
	letter-spacing: .7px !important; padding: 2.5px 7px !important; border-radius: 8px !important;
	white-space: nowrap !important; text-transform: uppercase !important; line-height: 1.3 !important; margin: 0 !important;
	display: inline-block !important; z-index: 2;
}
/* per-buggy qty stepper appears under the row when selected */
.t4-bwm__formhost .extra-card__quantity {
	grid-column: 2 / -1; grid-row: 4; justify-self: start;
	display: flex !important; align-items: center !important; gap: 0 !important;
	border: 1px solid var(--bwm-line) !important; border-radius: 8px !important; overflow: hidden !important;
	margin: 8px 0 0 !important; width: auto !important;
}
.t4-bwm__formhost .extra-card__quantity.hidden { display: none !important; }
.t4-bwm .t4-bwm__formhost .extra-card__quantity .quantity__btn {
	width: 36px !important; height: 36px !important; border: none !important; border-radius: 0 !important;
	background: var(--bwm-page) !important; color: var(--bwm-ink) !important; font-size: var(--t4-fs-body) !important;
	display: flex !important; align-items: center; justify-content: center; padding: 0 !important; min-width: 0 !important;
	box-shadow: none !important;
}
.t4-bwm .t4-bwm__formhost .extra-card__quantity .quantity__btn svg { width: 13px !important; height: 13px !important; stroke: var(--bwm-ink) !important; fill: none; }
.t4-bwm .t4-bwm__formhost .extra-card__quantity .quantity__input,
.t4-bwm .t4-bwm__formhost .extra-card__quantity input {
	width: 34px !important; height: 36px !important; border: none !important; text-align: center !important;
	font-size: var(--t4-fs-small) !important; font-weight: 600 !important; background: #fff !important; padding: 0 !important;
	color: var(--bwm-ink) !important; opacity: 1 !important; display: block !important; min-width: 0 !important;
}
/* "Continue without extras" = the 4th radio option, same circle (guide p.7b) */
.t4-bwm__skip {
	display: flex; align-items: center; gap: 9px; margin-top: 7px; padding: 10px 11px;
	border: 1px solid var(--bwm-line); border-radius: 11px; font-size: var(--t4-fs-micro); color: var(--bwm-body);
	cursor: pointer; background: var(--bwm-card); width: 100%; text-align: left;
}
.t4-bwm__skip .rdo {
	width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid #cfc8ba; flex: none;
	background: #fff; box-sizing: border-box; transition: .12s;
}
.t4-bwm__skip.sel { border-color: var(--bwm-red); box-shadow: inset 0 0 0 1px var(--bwm-red); background: var(--bwm-red-soft); color: var(--bwm-ink); font-weight: 600; }
.t4-bwm__skip.sel .rdo { border-color: var(--bwm-red); border-width: 5.5px; }

/* --- step 4: recap + payment --- */
.t4-bwm__recap { border: 1px solid var(--bwm-line); background: #fbf9f5; border-radius: 11px; padding: 3px 13px; }
.t4-bwm__rc { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0; font-size: var(--t4-fs-micro); }
.t4-bwm__rc + .t4-bwm__rc { border-top: 1px solid var(--bwm-line2); }
.t4-bwm__rc .k { color: var(--bwm-muted); flex: none; }
.t4-bwm__rc .vwrap { display: flex; align-items: center; gap: 9px; min-width: 0; }
.t4-bwm__rc .v { font-weight: 600; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.t4-bwm__rc .ed { background: none; border: none; color: var(--bwm-red); font-size: var(--t4-fs-micro); font-weight: 600; flex: none; cursor: pointer; padding: 0; }

.t4-bwm__formhost .booking-checkout,
.t4-bwm__formhost .booking-checkout__order,
.t4-bwm__formhost .booking-step__columns,
.t4-bwm__formhost .booking-step__column {
	width: 100% !important; max-width: none !important; min-width: 0 !important;
	margin: 0 !important; padding: 0 !important; display: block !important;
}
.t4-bwm__formhost .booking-checkout__payments {
	display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	gap: 7px !important; margin: 0 !important; width: 100% !important;
}
.t4-bwm__formhost .booking-checkout__payment {
	display: flex !important; align-items: center !important; gap: 8px; border: 1px solid var(--bwm-line) !important;
	background: var(--bwm-card) !important; border-radius: 10px !important; padding: 11px 10px !important;
	cursor: pointer; min-height: 0 !important; margin: 0 !important;
	width: 100% !important; min-width: 0 !important; max-width: none !important;
}
.t4-bwm__formhost .booking-checkout__payment:has(input:checked) {
	border-color: var(--bwm-red) !important; box-shadow: inset 0 0 0 1px var(--bwm-red) !important; background: var(--bwm-red-soft) !important;
}
.t4-bwm__formhost .booking-checkout__payment input { position: absolute; opacity: 0; pointer-events: none; }
.t4-bwm__formhost .booking-checkout__payment-inner {
	display: flex !important; align-items: center !important; justify-content: flex-start !important;
	gap: 8px; flex-direction: row !important; min-height: 0 !important; width: 100% !important;
	background: none !important; border: none !important; box-shadow: none !important;
	padding: 0 !important; margin: 0 !important; border-radius: 0 !important;
}
.t4-bwm__formhost .booking-checkout__payment-inner::before {
	content: ''; width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid #cfc8ba; background: #fff; flex: none;
	transition: .12s; box-sizing: border-box;
}
.t4-bwm__formhost .booking-checkout__payment:has(input:checked) .booking-checkout__payment-inner::before {
	border-color: var(--bwm-red); border-width: 5px;
}
.t4-bwm__formhost .booking-checkout__payment-title {
	font-size: var(--t4-fs-micro) !important; font-weight: 600 !important; margin: 0 !important;
	flex: 1 !important; text-align: left !important; color: var(--bwm-ink) !important; white-space: nowrap;
	overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.t4-bwm__formhost .booking-checkout__payment-icons { display: flex !important; gap: 3px; align-items: center; flex: none !important; margin: 0 0 0 auto !important; }
.t4-bwm__formhost .booking-checkout__payment-icon,
.t4-bwm__formhost .booking-checkout__payment svg,
.t4-bwm__formhost .booking-checkout__payment img { height: 14px !important; width: 21px !important; flex: none; }
.t4-bwm__formhost .booking-checkout__payment img.t4-bwm__paycellico { height: 15px !important; width: auto !important; max-width: 28px; }
/* gateway redirect note — no card fields, ever (guide p.6) */
.t4-bwm__redir {
	display: flex; align-items: flex-start; gap: 8px; margin-top: 9px; padding: 10px 12px;
	background: #fbf9f5; border: 1px solid var(--bwm-line); border-radius: 10px;
	font-size: var(--t4-fs-micro); color: var(--bwm-body); line-height: 1.4;
}
.t4-bwm__redir svg { width: 13px; height: 13px; stroke: var(--bwm-muted); fill: none; stroke-width: 2; flex: none; margin-top: 1px; }
.t4-bwm__link {
	background: none; border: none; padding: 0; color: var(--bwm-red); text-decoration: underline;
	font: inherit; cursor: pointer;
}

/* ================= STICKY FOOTER =================
   CONSTANT HEIGHT across steps — nothing that appears/disappears lives here
   (Back is in the header, guide p.3). Collapsible breakdown + Total + CTA + trust. */
.t4-bwm__foot {
	flex: none; border-top: 1px solid var(--bwm-line); background: var(--bwm-card);
	box-shadow: 0 -6px 20px rgba(0, 0, 0, .06);
	padding-bottom: env(safe-area-inset-bottom); /* home indicator (guide p.2b) */
}
.t4-bwm__brk { max-height: 0; overflow: hidden; transition: max-height .22s ease; }
.t4-bwm__brk.open { max-height: 220px; }
.t4-bwm__brkin { padding: 12px 16px 0; display: flex; flex-direction: column; gap: 7px; }
.t4-bwm__br { display: flex; justify-content: space-between; font-size: var(--t4-fs-micro); }
.t4-bwm__br .k { color: var(--bwm-muted); }
.t4-bwm__br .v { font-weight: 600; }
.t4-bwm__br[hidden] { display: none; }
.t4-bwm__totrow { display: flex; align-items: center; justify-content: space-between; padding: 11px 16px 0; cursor: pointer; }
.t4-bwm__totrow .l { display: flex; align-items: center; gap: 6px; }
.t4-bwm__totrow .k {
	font-family: var(--t4-mono); font-size: var(--t4-fs-micro); letter-spacing: 1.4px;
	text-transform: uppercase; color: var(--bwm-muted); font-weight: 600;
}
.t4-bwm__totrow .chev { width: 13px; height: 13px; stroke: var(--bwm-muted); fill: none; stroke-width: 2.4; transition: transform .2s; }
.t4-bwm__totrow.open .chev { transform: rotate(180deg); }
.t4-bwm__totrow .v { font-size: var(--t4-fs-h4); font-weight: 800; line-height: 1; }
.t4-bwm__ctawrap { padding: 9px 16px 14px; }
.t4-bwm__cta {
	display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
	background: var(--bwm-red); color: #fff; border: none; font-size: var(--t4-fs-body); font-weight: 600;
	padding: 15px; border-radius: 12px; cursor: pointer;
}
.t4-bwm__cta:disabled { background: #d9d3c6; }
.t4-bwm__cta svg { width: 15px; height: 15px; stroke: #fff; fill: none; stroke-width: 2.2; flex: none; }
/* fixed 26px so a rewrapping trust line can't make the footer breathe (guide p.3) */
.t4-bwm__tr {
	display: flex; align-items: center; justify-content: center; gap: 6px; font-size: var(--t4-fs-micro);
	color: var(--bwm-body); padding-top: 9px; height: 26px; overflow: hidden;
}
.t4-bwm__tr svg { width: 11px; height: 11px; stroke: var(--bwm-ok); fill: none; stroke-width: 2.4; flex: none; }

/* ================= BOTTOM SHEETS (calendar / terms) =================
   Siblings of .t4-bwm on <body> — the palette vars must be re-declared here,
   otherwise every var(--bwm-*) fails and the sheets render TRANSPARENT. */
.t4-bwm__ovl, .t4-bwm__confirm {
	--bwm-red: #FF2800; --bwm-red-soft: #ffece7; --bwm-ink: #141414; --bwm-body: #4a4a4a;
	--bwm-muted: #8a8a8a; --bwm-line: #e8e3d9; --bwm-line2: #f0ece4; --bwm-page: #f7f3ec;
	--bwm-card: #fff; --bwm-ok: #1F7A3D; --bwm-ok-bg: #e9f5ec; --bwm-warn: #B26A00; --bwm-err: #C4271B;
	font-family: var(--t4-sans); color: var(--bwm-ink);
}
.t4-bwm__ovl *, .t4-bwm__ovl *::before, .t4-bwm__ovl *::after,
.t4-bwm__confirm *, .t4-bwm__confirm *::before, .t4-bwm__confirm *::after { box-sizing: border-box; }
.t4-bwm__ovl button, .t4-bwm__confirm button { font-family: inherit; -webkit-tap-highlight-color: transparent; }
.t4-bwm__ovl {
	position: fixed; inset: 0; z-index: 1400; background: rgba(20, 16, 10, .35);
	backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
	display: flex; align-items: flex-end;
	animation: t4bwmFade .24s ease both;
}
.t4-bwm__ovl[hidden] { display: none; }
@keyframes t4bwmFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes t4bwmFadeOut { from { opacity: 1; } to { opacity: 0; } }
.t4-bwm__sheet {
	background: var(--bwm-card); border-radius: 20px 20px 0 0; width: 100%; max-height: 88%;
	display: flex; flex-direction: column;
	animation: t4bwmSheetUp .34s cubic-bezier(.32, .72, 0, 1) both;
	padding-bottom: env(safe-area-inset-bottom);
}
@keyframes t4bwmSheetUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
/* animated dismissal — JS adds --closing, hides after the run */
.t4-bwm__ovl--closing { animation: t4bwmFadeOut .26s ease both; }
.t4-bwm__ovl--closing .t4-bwm__sheet { animation: t4bwmSheetDown .26s cubic-bezier(.5, 0, .75, 1) both; }
@keyframes t4bwmSheetDown { from { transform: translateY(0); } to { transform: translateY(100%); } }
.t4-bwm__grab { width: 36px; height: 4px; background: #ddd7c9; border-radius: 2px; margin: 8px auto 0; flex: none; }
.t4-bwm__shhd { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--bwm-line); flex: none; }
.t4-bwm__shhd h3 { font-size: var(--t4-fs-small); font-weight: 800; letter-spacing: .6px; text-transform: uppercase; margin: 0; }
.t4-bwm__calbody { padding: 8px 12px 14px; overflow-y: auto; overscroll-behavior: contain; }
.t4-bwm__calbody .calendar { display: block !important; }
.t4-bwm__readbody {
	padding: 4px 18px 20px; overflow-y: auto; font-size: var(--t4-fs-small); line-height: 1.65; color: var(--bwm-body);
	overscroll-behavior: contain;
}
.t4-bwm__readbody h1, .t4-bwm__readbody h2, .t4-bwm__readbody h3 { font-size: var(--t4-fs-body); margin: 16px 0 8px; color: var(--bwm-ink); }
.t4-bwm__readbody p, .t4-bwm__readbody li { margin: 0 0 10px; }

/* AirDatepicker reskin inside the calendar sheet (bw2 rules, bwm scope) */
.t4-bwm__calbody .calendar { background: none !important; padding: 0 !important; margin: 0 !important; width: 100% !important; box-shadow: none !important; border: none !important; }
.t4-bwm__calbody .air-datepicker,
.t4-bwm__calbody .air-datepicker--content,
.t4-bwm__calbody .air-datepicker--pointer { background: none !important; border: none !important; box-shadow: none !important; width: 100% !important; }
.t4-bwm__calbody .air-datepicker-nav {
	background: none !important; border: none !important; padding: 6px 4px 10px !important;
	display: flex !important; align-items: center; justify-content: space-between;
}
.t4-bwm__calbody .air-datepicker-nav--title {
	font-family: var(--t4-sans) !important; font-size: var(--t4-fs-small) !important; font-weight: 600 !important;
	color: var(--bwm-ink) !important; background: none !important; text-transform: none !important; letter-spacing: 0 !important;
}
.t4-bwm__calbody .air-datepicker-nav--title i { color: var(--bwm-muted) !important; font-style: normal; margin-left: 5px; }
.t4-bwm__calbody .air-datepicker-nav--action {
	width: 32px !important; height: 32px !important; border: 1px solid rgb(74, 74, 74) !important;
	background: #fff !important; border-radius: 8px !important; color: #000 !important;
	opacity: 1 !important; visibility: visible !important;
}
.t4-bwm__calbody .air-datepicker-nav--action svg,
.t4-bwm__calbody .air-datepicker-nav--action path { fill: #000 !important; stroke: #000 !important; color: #000 !important; }
.t4-bwm__calbody .air-datepicker-nav--action svg { width: 15px !important; height: 15px !important; }
.t4-bwm__calbody .air-datepicker-body--day-name {
	font-family: var(--t4-mono) !important; font-size: var(--t4-fs-micro) !important; letter-spacing: .8px !important;
	color: var(--bwm-muted) !important; text-transform: uppercase !important; font-weight: 600 !important;
}
.t4-bwm__calbody .air-datepicker-cell {
	border-radius: 9px !important; border: 1px solid transparent !important; background: none !important;
	font-size: var(--t4-fs-small) !important; font-weight: 600 !important; color: var(--bwm-ink) !important;
	height: 42px !important; width: auto !important;
}
.t4-bwm__calbody .air-datepicker-cell.-current- { color: var(--bwm-red) !important; font-weight: 600 !important; }
.t4-bwm__calbody .air-datepicker-cell.-selected- {
	background: var(--bwm-red) !important; border-color: var(--bwm-red) !important; color: #fff !important; font-weight: 600 !important;
}
.t4-bwm__calbody .air-datepicker-cell.-disabled- { opacity: .28 !important; color: var(--bwm-muted) !important; }
.t4-bwm__calbody .air-datepicker-cell.-other-month- { opacity: 0 !important; pointer-events: none; }

/* ================= CLOSE CONFIRM (bm2 parity: progress must not die on a stray tap) ================= */
.t4-bwm__confirm {
	position: fixed; inset: 0; z-index: 1500; background: rgba(20, 16, 10, .4);
	display: flex; align-items: center; justify-content: center; padding: 24px;
	animation: t4bwmFade .2s ease both;
}
.t4-bwm__confirm[hidden] { display: none; }
.t4-bwm__confirm--closing { animation: t4bwmFadeOut .18s ease both; }
.t4-bwm__confirm--closing .t4-bwm__confirmbox { animation: t4bwmBoxOut .18s ease both; }
@keyframes t4bwmBoxOut { to { opacity: 0; transform: scale(.96); } }
.t4-bwm__confirmbox {
	background: var(--bwm-card); border-radius: 16px; width: 340px; max-width: 100%;
	padding: 22px; text-align: center; box-shadow: 0 20px 60px rgba(0, 0, 0, .3);
	animation: t4bwmIn .18s ease both;
}
.t4-bwm__confirmbox h4 { font-size: var(--t4-fs-body); font-weight: 800; margin: 0 0 6px; }
.t4-bwm__confirmbox p { font-size: var(--t4-fs-micro); color: var(--bwm-body); margin: 0 0 14px; line-height: 1.5; }
.t4-bwm__confirmbox .t4-bwm__cta { padding: 12px; }
.t4-bwm__confirmleave {
	background: none; border: none; font-size: var(--t4-fs-micro); color: var(--bwm-muted); cursor: pointer;
	margin-top: 10px; text-decoration: underline;
}

/* ================= STEP VISIBILITY ================= */
.t4-bwm__p1, .t4-bwm__formhost, .t4-bwm__p4extra { display: none; }
.t4-bwm--s1 .t4-bwm__p1 { display: block; }
.t4-bwm--s2 .t4-bwm__formhost, .t4-bwm--s3 .t4-bwm__formhost, .t4-bwm--s4 .t4-bwm__formhost { display: block; }
.t4-bwm--s4 .t4-bwm__p4extra { display: block; }

/* ================= MOTION POLISH (user 2026-07-17: "premium smoothness") =================
   transform/opacity + short color transitions ONLY — nothing that touches layout,
   so scroll and tap latency stay untouched. */
.t4-bwm__d,
.t4-bwm__slot,
.t4-bwm__addon,
.t4-bwm__skip,
.t4-bwm__calbtn,
.t4-bwm__bkb,
.t4-bwm__x,
.t4-bwm__stepper button,
.t4-bwm__formhost .extra-card,
.t4-bwm__formhost .booking-checkout__payment {
	transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease,
		color .18s ease, transform .12s ease, opacity .18s ease;
}
.t4-bwm__slot .t, .t4-bwm__slot .s { transition: color .18s ease; }
/* iOS press feedback — a whisper of scale on touch */
.t4-bwm__d:active,
.t4-bwm__slot:active:not(:disabled),
.t4-bwm__addon:active:not(.t4-bwm__addon--off),
.t4-bwm__skip:active,
.t4-bwm__formhost .extra-card:active,
.t4-bwm__formhost .booking-checkout__payment:active { transform: scale(.975); }
.t4-bwm__cta { transition: background-color .2s ease, transform .12s ease; }
.t4-bwm__cta:active:not(:disabled) { transform: scale(.98); }
/* checks & radios settle with a tiny spring */
.t4-bwm__cbx { transition: background-color .18s ease, border-color .18s ease; }
.t4-bwm__cbx svg { transition: opacity .16s ease, transform .18s cubic-bezier(.34, 1.56, .64, 1); transform: scale(.4); }
.t4-bwm__addon.on .t4-bwm__cbx svg { transform: scale(1); }
.t4-bwm__formhost .extra-card::before,
.t4-bwm__formhost .booking-checkout__payment-inner::before,
.t4-bwm__skip .rdo { transition: border-color .18s ease, border-width .18s cubic-bezier(.34, 1.3, .64, 1); }
/* freshly loaded content rises in softly (retriggers on show — display-gated).
   Includes the same-day cutoff banner and the "no sessions" note (user 2026-07-17). */
.t4-bwm__slots, .t4-bwm__qty,
.t4-bwm__slotsbox .t4-cutoff,
.t4-bwm__empty { animation: t4bwmRise .26s cubic-bezier(.25, .8, .35, 1) both; }
@keyframes t4bwmRise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
/* breakdown drawer on the Apple curve */
.t4-bwm__brk { transition: max-height .3s cubic-bezier(.32, .72, 0, 1); }
.t4-bwm__totrow .chev { transition: transform .3s cubic-bezier(.32, .72, 0, 1); }

@media (prefers-reduced-motion: reduce) {
	.t4-bwm, .t4-bwm *, .t4-bwm *::before, .t4-bwm *::after,
	.t4-bwm__ovl, .t4-bwm__ovl *, .t4-bwm__confirm, .t4-bwm__confirm * {
		animation: none !important;
		transition: none !important;
	}
}