/*
 * Boga Jaya Commerce -- branded Checkout page (Phase 3B).
 *
 * WooCommerce remains the commerce engine end to end: every field,
 * shipping rate, payment gateway, and total rendered here comes from
 * WooCommerce's own real checkout templates (see
 * templates/checkout-bjf.php and templates/woocommerce/checkout/*.php)
 * -- this file only styles the result.
 *
 * Layout-polish pass root cause (fixed here): the workspace card had a
 * clamped height, but the box chain BETWEEN that clamp and the actual
 * scrollable field content was never fully converted to flex -- three
 * Woo fragment-boundary wrappers (#order_review,
 * .bjf-checkout-dynamic-review, .bjf-checkout-dynamic-payment) were
 * still `display:block`, and .bjf-checkout__section-panel (the direct
 * parent of both the field area AND the Next/Back footer) had no flex
 * treatment at all. Every one of those wrappers now has to actively
 * pass "fill available height" down to whichever child is real content
 * -- a plain block box just grows to its natural content height and
 * ignores an ancestor's clamp, which is exactly why fields, the
 * "Additional information" heading, and the nav buttons were spilling
 * out below the visible card and eventually into the site footer.
 * `overflow: hidden` on the workspace card itself is also added as a
 * safety net so nothing can visually escape it even if a future change
 * reintroduces an unconstrained child.
 */

.bjf-checkout {
	max-width: 1200px;
	margin: 0 auto;
	/* Header clearance (see --bjf-header-clearance in commerce.css) + 40px intentional breathing room. */
	padding: calc(var(--bjf-header-clearance) + 40px) 32px 80px;
}

.bjf-checkout {
	--bjf-green: var(--theme-palette-color-1, #55a630);
	--bjf-green-dark: var(--theme-palette-color-2, #438b22);
	--bjf-green-deep: var(--theme-palette-color-3, #213631);
	--bjf-ink: var(--theme-palette-color-4, #0f1a17);
	--bjf-surface: var(--theme-palette-color-6, #F8FAFB);
}

/* ============================================================
   INTRO
   ============================================================ */

.bjf-checkout__intro {
	max-width: 640px;
	margin: 0 0 24px;
}

.bjf-checkout__eyebrow {
	display: inline-block;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--bjf-gold, #c6a15b);
	margin-bottom: 10px;
}

.bjf-checkout__title {
	font-size: 28px;
	font-weight: 800;
	line-height: 1.15;
	color: var(--bjf-green-deep, #213631);
	margin: 0 0 6px;
}

.bjf-checkout__text {
	font-size: 14px;
	line-height: 1.6;
	color: var(--bjf-ink, #0f1a17);
	opacity: 0.72;
	margin: 0;
}

.bjf-checkout__notice {
	font-size: 14px;
	color: var(--bjf-ink, #0f1a17);
}

/* Woo's own cart/checkout notices (required-field errors, payment
   failures) -- compact and visually intentional, never allowed to blow
   up the layout above the shell. Genuine errors are never hidden, only
   tightened. */
.woocommerce-notices-wrapper {
	margin: 0 0 16px;
}

.woocommerce-error,
.woocommerce-message,
.woocommerce-info {
	margin: 0 0 10px;
	padding: 12px 16px;
	border-radius: 8px;
	font-size: 13.5px;
	list-style: none;
}

/* ============================================================
   SHELL -- left rail + right workspace
   ============================================================ */

.bjf-checkout__shell {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

/* ---- Left rail: step navigation ---- */

.bjf-checkout__rail {
	position: relative;
	background: #ffffff;
	border: 1px solid rgba(33, 54, 49, 0.08);
	border-radius: 12px;
	box-shadow: 0 1px 2px rgba(15, 26, 23, 0.03);
	padding: 8px;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

/* Single connector line running behind every step marker, top marker
   to bottom marker -- 8px rail padding + 14px row padding + half the
   28px marker width, aligning it through the marker centers. */
.bjf-checkout__rail::before {
	content: "";
	position: absolute;
	top: 38px;
	bottom: 38px;
	left: 35px;
	width: 1px;
	background: rgba(33, 54, 49, 0.14);
	z-index: 0;
}

.bjf-checkout__rail-step {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	gap: 14px;
	width: 100%;
	min-height: 52px;
	padding: 10px 14px;
	background: none;
	border: none;
	border-radius: 8px;
	font: inherit;
	text-align: left;
	color: var(--bjf-ink, #0f1a17);
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.bjf-checkout__rail-step:hover {
	background: var(--bjf-surface, #F8FAFB);
}

.bjf-checkout__rail-step:focus-visible {
	outline: 2px solid var(--bjf-green, #55a630);
	outline-offset: -2px;
}

.bjf-checkout__rail-marker {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--bjf-surface, #F8FAFB);
	color: var(--bjf-green-deep, #213631);
	font-size: 12.5px;
	font-weight: 800;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.bjf-checkout__rail-label {
	font-size: 13.5px;
	font-weight: 700;
	line-height: 1.3;
	opacity: 0.6;
}

/* .bjf-checkout__rail-copy wraps the label (+ mobile-only subtitle) so the
   mobile stepper can stack/animate them together without touching the 5
   real button elements. `display: contents` removes its own box entirely
   on desktop/tablet, so .bjf-checkout__rail-label is still a direct flex
   child of .bjf-checkout__rail-step exactly as before this change --
   desktop layout/spacing is byte-for-byte unaffected. The subtitle itself
   is desktop-hidden by default; only the mobile media query below reveals
   it, and only for the active step. */
.bjf-checkout__rail-copy {
	display: contents;
}

.bjf-checkout__rail-subtitle {
	display: none;
}

/* ---- Rail step states ---- */

.bjf-checkout__rail-step.is-active {
	background: var(--bjf-surface, #F8FAFB);
}

.bjf-checkout__rail-step.is-active .bjf-checkout__rail-marker {
	background: var(--bjf-green-deep, #213631);
	color: #ffffff;
	box-shadow: 0 0 0 3px rgba(33, 54, 49, 0.12);
}

.bjf-checkout__rail-step.is-active .bjf-checkout__rail-label {
	color: var(--bjf-green-deep, #213631);
	opacity: 1;
}

.bjf-checkout__rail-step.is-completed .bjf-checkout__rail-marker {
	background: var(--bjf-green, #55a630);
	color: #ffffff;
	font-size: 13px;
}

.bjf-checkout__rail-step.is-completed .bjf-checkout__rail-label {
	opacity: 0.85;
}

/* ---- Right workspace ---- */

.bjf-checkout__workspace {
	background: #ffffff;
	border: 1px solid rgba(33, 54, 49, 0.08);
	border-radius: 12px;
	box-shadow: 0 1px 2px rgba(15, 26, 23, 0.03), 0 14px 26px -22px rgba(15, 26, 23, 0.18);
	padding: 26px 30px;
	/* Safety net: nothing may visually escape the card, regardless of
	   what any descendant's own sizing does. */
	overflow: hidden;
}

/* Step 05 place-order-blocker fix: always-in-workspace destination for
   Woo's own real checkout error (assets/checkout.js listens for the
   'checkout_error' event WooCommerce's own submit_error() already
   fires, and fills .bjf-checkout__error-banner-message with the exact
   same message HTML Woo produced -- never a fabricated message).
   Hidden by default via the native `hidden` attribute. */
.bjf-checkout__error-banner {
	background: #fdecea;
	border: 1px solid #b3261e;
	border-radius: 8px;
	padding: 14px 18px;
	margin-bottom: 20px;
}

.bjf-checkout__error-banner-title {
	margin: 0 0 6px;
	font-weight: 700;
	color: #7a1712;
}

.bjf-checkout__error-banner-message {
	font-size: 13.5px;
	color: #7a1712;
}

.bjf-checkout__error-banner-message .woocommerce-error,
.bjf-checkout__error-banner-message .woocommerce-message,
.bjf-checkout__error-banner-message .woocommerce-info {
	margin: 0;
	padding: 0;
	background: transparent;
	border: none;
	list-style: none;
}

/* Only the active step's content shows -- visibility is presentation
   state only, driven entirely by assets/checkout.js; no field is ever
   removed from the DOM or recreated. */
.bjf-checkout__section {
	display: none;
}

.bjf-checkout__section.is-active {
	display: block;
}

.bjf-checkout__workspace-header {
	margin: 0 0 18px;
	padding-bottom: 16px;
	border-bottom: 1px solid rgba(33, 54, 49, 0.08);
}

.bjf-checkout__workspace-title {
	font-size: 18px;
	font-weight: 800;
	color: var(--bjf-green-deep, #213631);
	margin: 0 0 4px;
}

.bjf-checkout__workspace-subtitle {
	font-size: 13px;
	color: var(--bjf-ink, #0f1a17);
	opacity: 0.6;
	margin: 0;
}

.bjf-checkout__section-panel-inner {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

/* Woo's own form-shipping.php prints an "Additional information" <h3>
   ahead of the order-notes field whenever shipping doesn't need its
   own address block (true here, since billing = shipping) -- a
   redundant, oversized heading inside a workspace that already has its
   own header above. The order_comments FIELD's own label already
   reads "Catatan Pesanan" (see the woocommerce_checkout_fields filter
   in boga-jaya-commerce-core.php) -- only this extra wrapper heading
   is hidden, the field/hook/validation underneath is untouched. */
.bjf-checkout__section-panel-inner .woocommerce-additional-fields > h3 {
	display: none;
}

/* ---- Next / Back navigation (action footer) ---- */

.bjf-checkout__nav {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	align-items: center;
	gap: 10px;
	flex: none;
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px solid rgba(33, 54, 49, 0.08);
}

.bjf-checkout__nav-buttons {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-left: auto;
}

.bjf-checkout__back,
.bjf-checkout__next {
	min-height: 44px;
	padding: 0 20px;
	border-radius: 8px;
	font-weight: 700;
	font-size: 13.5px;
	cursor: pointer;
}

.bjf-checkout__next {
	background: var(--bjf-green-deep, #213631);
	color: #ffffff;
	border: none;
}

.bjf-checkout__next:hover {
	background: var(--bjf-green, #55a630);
}

.bjf-checkout__next.is-loading {
	opacity: 0.6;
	cursor: wait;
}

.bjf-checkout__back {
	background: none;
	color: var(--bjf-green-deep, #213631);
	border: 1px solid rgba(33, 54, 49, 0.16);
}

.bjf-checkout__back:hover {
	border-color: var(--bjf-green-deep, #213631);
}

.bjf-checkout__nav--final .bjf-checkout__back {
	flex: none;
}

.bjf-checkout__nav--final #place_order {
	flex: 1 1 auto;
}

/*
 * Root cause of the header-position inconsistency (this pass): these
 * three elements exist ONLY to satisfy WooCommerce's fragment-
 * replacement contract (#order_review is the static ancestor;
 * .bjf-checkout-dynamic-review wraps step 03;
 * .bjf-checkout-dynamic-payment wraps steps 04+05 -- see the override
 * files' own docblocks). The previous pass gave all three real flex
 * boxes (flex:1 1 auto) so the active step's content could fill the
 * workspace -- but .bjf-checkout-dynamic-review and
 * .bjf-checkout-dynamic-payment are SIBLINGS inside #order_review, and
 * BOTH kept flex:1 1 auto regardless of which one actually held the
 * active step. Since .bjf-checkout-dynamic-review (step 03) comes
 * first in DOM order, it always claimed its full flex share of empty
 * space ABOVE .bjf-checkout-dynamic-payment -- which is exactly why
 * Steps 04/05's header rendered lower than Steps 01/02/03's: an
 * invisible, empty flex sibling was sitting above it every time.
 *
 * Fixed with `display: contents` on all three wrappers: this removes
 * their own CSS box entirely (no flex/grid participation, nothing to
 * compete for space) while leaving them fully intact in the DOM --
 * WooCommerce's own jQuery `.replaceWith()` still finds and replaces
 * them by class exactly as before (display has no bearing on DOM
 * presence or class-selector matching), and this project's own
 * assets/checkout.js still finds every #bjf-checkout-step-N-panel by
 * ID exactly as before. Their children (the actual
 * .bjf-checkout__section elements) become direct flex children of
 * .bjf-checkout__accordion once these wrappers are flattened out of
 * the box tree -- so at any given moment there are 5 flat section
 * siblings, exactly one of which is not display:none, and that one
 * always starts at the same top position because none of the other
 * four (all display:none, fully removed from flex layout) can ever
 * occupy space above it. No ARIA role/relationship lives on these
 * three wrappers themselves (role="tabpanel" etc. is on
 * .bjf-checkout__section-panel, untouched), so display:contents has no
 * accessibility-tree impact here.
 */
.bjf-checkout__order-review,
.bjf-checkout-dynamic-review,
.bjf-checkout-dynamic-payment {
	display: contents;
}

/*
 * Fields kept as real, submitted, Woo-validated inputs (native field
 * definitions, per the V1 field-model decision) but not part of this
 * V1 visual layout: billing_last_name (identity is a single "Nama
 * Lengkap" field -- billing_first_name -- per owner decision),
 * billing_company, and billing_country (Indonesia is the only allowed
 * country, already pre-selected by WooCommerce itself). display:none
 * rather than removal from the DOM, so the field's value/state stays
 * exactly what WooCommerce resolves it to.
 */
.bjf-field-suppressed {
	display: none;
}

/* ============================================================
   COMPACT FORM SYSTEM
   ============================================================ */

.bjf-checkout__section-panel-inner .form-row {
	margin: 0 0 12px;
}

.bjf-checkout__section-panel-inner label {
	display: block;
	margin-bottom: 4px;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--bjf-ink, #0f1a17);
	opacity: 0.75;
}

.bjf-checkout__section-panel-inner .input-text,
.bjf-checkout__section-panel-inner select {
	height: 44px;
	padding: 0 12px;
	font-size: 13.5px;
	border-radius: 7px;
}

.bjf-checkout__section-panel-inner textarea {
	min-height: 72px;
	padding: 10px 12px;
	font-size: 13.5px;
	border-radius: 7px;
}

/* ============================================================
   COMPACT FIELD GRIDS -- Step 01 / Step 02 (desktop/tablet)
   ============================================================ */

@media (min-width: 641px) {
	#bjf-checkout-step-1-panel .woocommerce-billing-fields__field-wrapper,
	#bjf-checkout-step-2-panel .woocommerce-billing-fields__field-wrapper {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 0 16px;
	}

	/* Step 01: Nama Lengkap full row, Email | Nomor WhatsApp half+half. */
	#billing_first_name_field {
		grid-column: 1 / -1;
	}
	#billing_email_field {
		grid-column: 1 / 2;
	}
	#billing_phone_field {
		grid-column: 2 / 3;
	}

	/* Step 02: Alamat Lengkap full row, Detail Alamat full row,
	   Kota | Provinsi half+half, Kode Pos | Catatan Pesanan half+half
	   (Catatan's textarea reads comfortably wider than "compact" Kode
	   Pos in the same row, per the target layout). */
	#billing_address_1_field,
	#billing_address_2_field {
		grid-column: 1 / -1;
	}
	#billing_city_field {
		grid-column: 1 / 2;
	}
	#billing_state_field {
		grid-column: 2 / 3;
	}
	#billing_postcode_field {
		grid-column: 1 / 2;
	}
	#billing_postcode_field .input-text {
		max-width: 160px;
	}
	#order_comments_field {
		grid-column: 2 / 3;
	}
}

/* ============================================================
   STEP 03 -- SHIPPING (real Woo rates, honest empty state)
   ============================================================ */

.bjf-checkout__shipping-table {
	width: 100%;
	border-collapse: collapse;
}

.bjf-checkout__shipping-table th,
.bjf-checkout__shipping-table td {
	text-align: left;
	padding: 0;
	border: none;
	font-weight: 400;
}

.bjf-checkout__shipping-table .woocommerce-shipping-methods {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Centered comfortably within the available body space (flex:auto
   margins on a column flex container -- no fixed height guess needed)
   rather than sitting flush at the top of an otherwise-empty card. */
.bjf-checkout__empty-state {
	margin: auto 0;
	padding: 24px 0;
	text-align: center;
	font-size: 13.5px;
	color: var(--bjf-ink, #0f1a17);
	opacity: 0.6;
	font-style: italic;
}

/* ============================================================
   STEP 04 -- PAYMENT (real Woo gateway state)
   ============================================================ */

.wc_payment_methods {
	list-style: none;
	margin: 0 0 16px;
	padding: 0;
}

/* ============================================================
   STEP 05 -- CONFIRMATION -- desktop two-column composition:
   products/order details | totals
   ============================================================ */

.bjf-checkout__confirmation {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

@media (min-width: 641px) {
	.bjf-checkout__confirmation {
		display: grid;
		grid-template-columns: 1.3fr 1fr;
		gap: 0 32px;
		align-items: start;
	}
}

.woocommerce-checkout-review-order-confirmation-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 13.5px;
}

.woocommerce-checkout-review-order-confirmation-table th,
.woocommerce-checkout-review-order-confirmation-table td {
	padding: 9px 0;
	border-bottom: 1px solid rgba(33, 54, 49, 0.07);
	text-align: left;
}

.woocommerce-checkout-review-order-confirmation-table thead th {
	font-size: 11.5px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	opacity: 0.55;
}

.woocommerce-checkout-review-order-confirmation-table .product-total {
	text-align: right;
}

.woocommerce-checkout-review-order-totals-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 13.5px;
}

.woocommerce-checkout-review-order-totals-table th,
.woocommerce-checkout-review-order-totals-table td {
	padding: 7px 0;
	text-align: left;
}

.woocommerce-checkout-review-order-totals-table td {
	text-align: right;
}

.woocommerce-checkout-review-order-totals-table .order-total {
	border-top: 1.5px solid rgba(33, 54, 49, 0.14);
}

.woocommerce-checkout-review-order-totals-table .order-total th,
.woocommerce-checkout-review-order-totals-table .order-total td {
	font-size: 16px;
	font-weight: 800;
	color: var(--bjf-green-deep, #213631);
	padding-top: 12px;
}

.bjf-checkout #place_order {
	height: 46px;
	border-radius: 9px;
	background: var(--bjf-green-deep, #213631);
	color: #ffffff;
	font-weight: 700;
	font-size: 13.5px;
	border: none;
}

.bjf-checkout #place_order:hover {
	background: var(--bjf-green, #55a630);
}

.bjf-checkout__nav--final .woocommerce-terms-and-conditions-wrapper {
	flex-basis: 100%;
	font-size: 12px;
	margin-bottom: 4px;
}

/* ============================================================
   DESKTOP ONLY (>=1024px) -- two-column shell, height-constrained
   workspace. Unchanged from the prior pass except the breakpoint
   itself: this used to start at 701px, which is what pushed the
   two-column grid (and the height-clamped, internally-scrolling
   workspace it requires) onto genuine tablets -- there was never
   enough horizontal room there for a 220-260px rail column plus a
   comfortable workspace, which is what made the composition feel
   cramped/offside at tablet widths. Moving the threshold to 1024px
   is the only change in this block; every rule inside is identical
   to before.
   ============================================================ */

@media (min-width: 1024px) {
	.bjf-checkout__shell {
		display: grid;
		grid-template-columns: minmax(220px, 260px) minmax(0, 1fr);
		align-items: start;
		gap: 24px;
	}

	/* clamp(): scales with viewport but never crushes below a usable
	   floor or grows past a sensible ceiling. ~300px accounts for the
	   normal-flow header + intro block + top/bottom breathing room --
	   an approximation, not a pixel-exact measurement (this page uses
	   normal document flow for its header per the existing
	   bjf-header-normal-flow fix, so there is no fixed/overlay height
	   to subtract precisely without a JS measurement, which this pass
	   deliberately avoids). Exact fit should be confirmed during
	   owner browser UAT and this constant nudged if needed -- it does
	   NOT need to be pixel-perfect for the fix in this pass to hold,
	   since the actual overflow bug was the broken flex chain below,
	   not this height value itself. Fixed regardless of which step is
	   active, so switching steps never changes the card's own height. */
	.bjf-checkout__workspace {
		height: clamp(440px, calc(100vh - 300px), 760px);
		display: flex;
		flex-direction: column;
		min-height: 0;
	}

	/* #order_review, .bjf-checkout-dynamic-review, and
	   .bjf-checkout-dynamic-payment are display:contents (see the base
	   rule above) -- they generate no box at all, so only the real
	   flex container needs sizing here. Their children (steps 03/04/05)
	   are flattened into direct children of this element. */
	.bjf-checkout__accordion {
		flex: 1 1 auto;
		min-height: 0;
		display: flex;
		flex-direction: column;
	}

	.bjf-checkout__section {
		min-height: 0;
	}

	.bjf-checkout__section.is-active {
		flex: 1 1 auto;
		display: flex;
		flex-direction: column;
	}

	.bjf-checkout__workspace-header {
		flex: none;
	}

	.bjf-checkout__section-panel {
		flex: 1 1 auto;
		min-height: 0;
		display: flex;
		flex-direction: column;
	}

	/* Only the content area scrolls if a step's content is taller than
	   the available workspace height -- the header stays put above it,
	   and the Next/Back footer (a sibling, not a descendant, of this
	   element) stays reachable without ever scrolling past it. */
	.bjf-checkout__section-panel-inner {
		flex: 1 1 auto;
		min-height: 0;
		overflow-y: auto;
		padding-right: 4px;
	}
}

/* ============================================================
   TABLET (701px-1023px) -- single column, stacked: the same
   connected-chevron progress track approved for mobile sits above
   a FULL-WIDTH workspace (no 220-260px rail column, no height
   clamp/internal scroll -- those are desktop-only concerns, see
   the >=1024px block above). This deliberately does not touch
   .bjf-checkout__shell's layout at all: its base (non-media) rule
   is already `flex-direction: column`, and the only thing that
   used to switch it to a two-column grid at this width was the
   old 701px desktop breakpoint, now moved to 1024px -- so simply
   NOT re-declaring a grid here is what keeps this range stacked.

   The chevron track itself reuses the exact mobile mechanism
   (assets/checkout.js's is-active/is-completed/is-available
   classes, the same .bjf-checkout__rail-copy reveal/collapse
   transition) with slightly larger numbers, since there is more
   horizontal room to work with than on a phone:

   - Compact flex-basis 60px (mobile: 46px), skew/overlap 10px
     (mobile: 9px) -- same "skew == overlap" seam-welding rule as
     mobile, just scaled up.
   - Active stays flex:1 1 auto and fills the remainder, full width
     edge-to-edge like the approved mobile bar (no artificial cap
     was introduced -- capping it would leave a dead gap at the end
     of the row instead, which reads worse than a generously padded
     active segment). Checked against the 4 requested checkpoints
     (container = viewport - 2*28px page padding, rail carries no
     extra padding of its own, same convention as mobile):
       768px  -> container 712px -> active ~512px
       820px  -> container 764px -> active ~564px
       912px  -> container 856px -> active ~656px
       1023px -> container 967px -> active ~767px
     All comfortably above the 200px floor the active step's own
     content needs, and every one of the 4 compact steps keeps a
     ~50px readable center width -- well clear of the ~37px that
     was already proven legible on mobile -- so 02/03/04/05 stay
     fully readable and nothing overflows at any width in this
     range.
   ============================================================ */

@media (min-width: 701px) and (max-width: 1023px) {
	.bjf-checkout {
		padding: calc(var(--bjf-header-clearance) + 32px) 28px 64px;
	}

	.bjf-checkout__rail {
		flex-direction: row;
		align-items: stretch;
		overflow: hidden;
		background: transparent;
		border: none;
		box-shadow: none;
		border-radius: 10px;
		padding: 0;
		gap: 0;
	}

	.bjf-checkout__rail::before {
		display: none;
	}

	.bjf-checkout__rail-step {
		position: relative;
		flex: 0 0 60px;
		width: 60px;
		min-width: 60px;
		min-height: 56px;
		max-height: none;
		padding: 10px 10px 10px 18px;
		margin: 0 0 0 -10px;
		border-radius: 0;
		background: rgba(33, 54, 49, 0.08);
		clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
		justify-content: flex-start;
		gap: 0;
		transition: flex-basis 0.3s ease, min-width 0.3s ease, background-color 0.25s ease, padding 0.3s ease;
	}

	.bjf-checkout__rail-step:first-child {
		margin-left: 0;
		clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
	}

	.bjf-checkout__rail-step:nth-child(1) { z-index: 5; }
	.bjf-checkout__rail-step:nth-child(2) { z-index: 4; }
	.bjf-checkout__rail-step:nth-child(3) { z-index: 3; }
	.bjf-checkout__rail-step:nth-child(4) { z-index: 2; }
	.bjf-checkout__rail-step:nth-child(5) { z-index: 1; }

	.bjf-checkout__rail-step:hover {
		background: rgba(33, 54, 49, 0.14);
	}

	.bjf-checkout__rail-step:focus-visible {
		outline: 2px solid var(--bjf-green, #55a630);
		outline-offset: -3px;
	}

	.bjf-checkout__rail-step.is-active {
		flex: 1 1 auto;
		min-width: 200px;
		padding-left: 22px;
		background: var(--bjf-green-deep, #213631);
	}

	.bjf-checkout__rail-step.is-completed {
		background: var(--bjf-green, #55a630);
	}

	.bjf-checkout__rail-marker {
		flex: none;
		width: 28px;
		height: 28px;
		border-radius: 50%;
		background: transparent;
		box-shadow: none;
		color: var(--bjf-green-deep, #213631);
		font-size: 14px;
		font-weight: 800;
		opacity: 0.85;
		transition: background-color 0.25s ease, color 0.25s ease, width 0.25s ease, height 0.25s ease;
	}

	.bjf-checkout__rail-step.is-active .bjf-checkout__rail-marker {
		width: 30px;
		height: 30px;
		background: rgba(255, 255, 255, 0.16);
		color: #ffffff;
		opacity: 1;
		font-size: 13.5px;
	}

	.bjf-checkout__rail-step.is-completed .bjf-checkout__rail-marker {
		background: transparent;
		color: #ffffff;
		opacity: 1;
		font-size: 15px;
	}

	.bjf-checkout__rail-copy {
		display: flex;
		flex-direction: column;
		justify-content: center;
		min-width: 0;
		max-width: 0;
		margin-left: 0;
		overflow: hidden;
		opacity: 0;
		white-space: nowrap;
		transition: max-width 0.3s ease, opacity 0.2s ease, margin-left 0.3s ease;
	}

	.bjf-checkout__rail-step.is-active .bjf-checkout__rail-copy {
		max-width: 420px;
		margin-left: 14px;
		opacity: 1;
		white-space: normal;
	}

	.bjf-checkout__rail-label {
		font-size: 14px;
		font-weight: 800;
		line-height: 1.25;
		color: var(--bjf-ink, #0f1a17);
		opacity: 1;
		overflow-wrap: break-word;
	}

	.bjf-checkout__rail-step.is-active .bjf-checkout__rail-label {
		color: #ffffff;
	}

	.bjf-checkout__rail-subtitle {
		font-size: 12px;
		line-height: 1.35;
		color: var(--bjf-ink, #0f1a17);
		opacity: 0.65;
		margin-top: 3px;
		overflow-wrap: break-word;
	}

	.bjf-checkout__rail-step.is-active .bjf-checkout__rail-subtitle {
		display: block;
		color: #ffffff;
		opacity: 0.8;
	}

	.bjf-checkout__workspace {
		height: auto;
		overflow: visible;
	}
}

/* ============================================================
   MOBILE (<701px) -- single column workspace below; the rail
   becomes ONE continuous connected chevron/parallelogram progress
   track (no card, no per-step border-radius, no horizontal
   scroll). Root cause this replaces: the previous mobile rail
   forced 5 equal-width columns with nowrap labels, which is what
   produced overlapping/clipped text and the horizontal scrollbar
   (overflow-x:auto on a row wider than the viewport). The 5 real
   <button> elements, their IDs/data-step/ARIA, and
   assets/checkout.js's is-active/is-completed/is-available class
   contract are all unchanged -- only their mobile geometry and
   paint are redefined here.

   Geometry (revised after owner visual UAT -- first pass was too
   aggressive: 40px compacts with a 14px skew left only ~12px of
   flat width at mid-height, which is why 04/05 read as clipped
   slivers instead of readable two-digit numbers):

   - Compact flex-basis: 46px. Skew (clip-path inset) and the
     welding overlap margin are both 9px -- using the SAME value
     for both is what keeps the seam between two chevrons flush
     with no gap and no double-slant artifact.
   - At a parallelogram's vertical center, the two 9px slants each
     eat ~4.5px, so a 46px box's own readable center width is
     ~46-9 = 37px -- comfortable for a bold 2-digit number plus
     margin, which is what "full 02/03/04/05, not clipped" needed.
   - The active step is still flex:1 1 auto (fills whatever the 4
     compacts don't use), but because compacts are now correctly
     sized the leftover is naturally proportionate instead of
     lopsided. With exactly 4 non-first welded seams contributing
     -9px each regardless of which step is active, the algebra is:
       active_width = container_width - 4 * (46px - 9px)
                    = container_width - 148px
     Checked against the 4 target widths (container = viewport -
     32px page padding, rail itself carries no extra padding):
       320px -> container 288px -> active ~140px
       360px -> container 328px -> active ~180px
       390px -> container 358px -> active ~210px
       430px -> container 398px -> active ~250px
     All comfortably clear the 130px floor the active step's own
     content (28px marker + gap + wrapped 2-line title) needs, and
     the browser computes this live via flexbox -- no per-
     breakpoint override is needed, the single flex rule below
     already resolves correctly at every one of these widths (and
     everything in between).
   ============================================================ */

@media (max-width: 700px) {
	.bjf-checkout {
		padding: calc(var(--bjf-header-clearance) + 28px) 16px 56px;
	}

	.bjf-checkout__title {
		font-size: 23px;
	}

	.bjf-checkout__rail {
		flex-direction: row;
		align-items: stretch;
		overflow: hidden;
		background: transparent;
		border: none;
		box-shadow: none;
		border-radius: 10px;
		padding: 0;
		gap: 0;
	}

	.bjf-checkout__rail::before {
		/* Steps now touch edge-to-edge as overlapping chevrons --
		   a separate connector line would sit on top of/underneath
		   that seam and read as visual noise. */
		display: none;
	}

	.bjf-checkout__rail-step {
		position: relative;
		flex: 0 0 46px;
		width: 46px;
		min-width: 46px;
		min-height: 52px;
		max-height: none;
		padding: 8px 8px 8px 15px;
		margin: 0 0 0 -9px;
		border-radius: 0;
		background: rgba(33, 54, 49, 0.08);
		/* Parallelogram: left edge slants in, right edge slants the
		   same direction, so consecutive steps' slants overlap into
		   one continuous zig-free strip once the negative margin +
		   z-index stacking below is applied. */
		clip-path: polygon(9px 0, 100% 0, calc(100% - 9px) 100%, 0 100%);
		justify-content: flex-start;
		gap: 0;
		transition: flex-basis 0.3s ease, min-width 0.3s ease, background-color 0.25s ease, padding 0.3s ease;
	}

	.bjf-checkout__rail-step:first-child {
		margin-left: 0;
		clip-path: polygon(0 0, 100% 0, calc(100% - 9px) 100%, 0 100%);
	}

	/* Explicit stacking so each step's overlapping slant edge is
	   hidden cleanly under the previous step (there are always
	   exactly 5 real steps, so fixed nth-child indices are safe). */
	.bjf-checkout__rail-step:nth-child(1) { z-index: 5; }
	.bjf-checkout__rail-step:nth-child(2) { z-index: 4; }
	.bjf-checkout__rail-step:nth-child(3) { z-index: 3; }
	.bjf-checkout__rail-step:nth-child(4) { z-index: 2; }
	.bjf-checkout__rail-step:nth-child(5) { z-index: 1; }

	.bjf-checkout__rail-step:hover {
		background: rgba(33, 54, 49, 0.14);
	}

	.bjf-checkout__rail-step:focus-visible {
		outline: 2px solid var(--bjf-green, #55a630);
		outline-offset: -3px;
	}

	/* ---- Active: the one segment that expands and becomes the
	   focal point -- deep Boga Jaya green with white copy, per
	   owner UAT direction. flex:1 1 auto makes it absorb exactly
	   whatever width the 4 compact steps don't use (see the
	   geometry note above for the derived per-width numbers), so
	   the whole track keeps filling the viewport with zero overflow
	   at any width. ---- */
	.bjf-checkout__rail-step.is-active {
		flex: 1 1 auto;
		min-width: 130px;
		padding-left: 18px;
		background: var(--bjf-green-deep, #213631);
	}

	/* ---- Completed: compact again, solid green, checkmark (marker
	   text is already swapped to "✓" by assets/checkout.js). ---- */
	.bjf-checkout__rail-step.is-completed {
		background: var(--bjf-green, #55a630);
	}

	.bjf-checkout__rail-marker {
		flex: none;
		width: 24px;
		height: 24px;
		border-radius: 50%;
		background: transparent;
		box-shadow: none;
		color: var(--bjf-green-deep, #213631);
		font-size: 13px;
		font-weight: 800;
		opacity: 0.85;
		transition: background-color 0.25s ease, color 0.25s ease, width 0.25s ease, height 0.25s ease;
	}

	.bjf-checkout__rail-step.is-active .bjf-checkout__rail-marker {
		width: 26px;
		height: 26px;
		background: rgba(255, 255, 255, 0.16);
		color: #ffffff;
		opacity: 1;
		font-size: 12.5px;
	}

	.bjf-checkout__rail-step.is-completed .bjf-checkout__rail-marker {
		background: transparent;
		color: #ffffff;
		opacity: 1;
		font-size: 14px;
	}

	/* ---- Copy (label + subtitle): collapsed to nothing on compact
	   steps, revealed only when the step becomes active -- the width
	   transition here is what makes the focus block feel like it
	   slides/expands along the track rather than just popping. ---- */
	.bjf-checkout__rail-copy {
		display: flex;
		flex-direction: column;
		justify-content: center;
		min-width: 0;
		max-width: 0;
		margin-left: 0;
		overflow: hidden;
		opacity: 0;
		white-space: nowrap;
		transition: max-width 0.3s ease, opacity 0.2s ease, margin-left 0.3s ease;
	}

	.bjf-checkout__rail-step.is-active .bjf-checkout__rail-copy {
		max-width: 260px;
		margin-left: 10px;
		opacity: 1;
		white-space: normal;
	}

	.bjf-checkout__rail-label {
		font-size: 12px;
		font-weight: 800;
		line-height: 1.25;
		color: var(--bjf-ink, #0f1a17);
		opacity: 1;
		overflow-wrap: break-word;
	}

	.bjf-checkout__rail-step.is-active .bjf-checkout__rail-label {
		color: #ffffff;
	}

	.bjf-checkout__rail-subtitle {
		font-size: 10px;
		line-height: 1.3;
		color: var(--bjf-ink, #0f1a17);
		opacity: 0.65;
		margin-top: 2px;
		overflow-wrap: break-word;
	}

	.bjf-checkout__rail-step.is-active .bjf-checkout__rail-subtitle {
		display: block;
		color: #ffffff;
		opacity: 0.8;
	}

	.bjf-checkout__workspace {
		padding: 20px 16px;
		/* Mobile uses normal page flow/scroll, never an internal
		   scroll trap -- no height clamp, no overflow:hidden here. */
		height: auto;
		overflow: visible;
	}

	.bjf-checkout__nav {
		flex-wrap: wrap;
	}

	.bjf-checkout__nav-buttons {
		width: 100%;
		margin-left: 0;
	}

	.bjf-checkout__back,
	.bjf-checkout__next {
		flex: 1 1 auto;
	}
}