/*
Theme Name: MBE BiH
Theme URI: https://mbe.ba
Author: MBE BA d.o.o.
Description: Block theme for Mail Boxes Etc. Bosnia and Herzegovina. Hand-written — no page builder. Design tokens live in theme.json; this file holds only what tokens cannot express.
Version: 0.1.0
Requires at least: 6.5
Tested up to: 6.7
Requires PHP: 8.0
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mbe
Tags: full-site-editing, block-theme
*/

/* ==========================================================================
   Everything here is deliberate. Colours, fonts, and spacing come from
   theme.json as CSS custom properties — never hard-code a hex value below.
   ========================================================================== */

:root {
	--mbe-transition: 160ms ease;
	--mbe-shadow-card: 0 1px 2px rgb(33 30 30 / 4%), 0 8px 24px rgb(33 30 30 / 6%);
	--mbe-shadow-card-hover: 0 2px 4px rgb(33 30 30 / 6%), 0 16px 40px rgb(33 30 30 / 10%);
}

/* Respect users who ask for less motion. Not optional. */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* --------------------------------------------------------------------------
   Buttons
   Primary (filled red) is the theme.json default. Secondary is an outline,
   registered as a block style in functions.php.
   -------------------------------------------------------------------------- */

.wp-block-button__link {
	transition: background-color var(--mbe-transition), color var(--mbe-transition);
}

.wp-block-button.is-style-mbe-outline .wp-block-button__link {
	background-color: transparent;
	color: var(--wp--preset--color--ink);
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--ink);
}

.wp-block-button.is-style-mbe-outline .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--base);
}

/* --------------------------------------------------------------------------
   Hero — spec 2.2: headline left, visual right, two CTAs with clear hierarchy
   -------------------------------------------------------------------------- */

.mbe-hero {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--50);
	align-items: center;
	padding-block: var(--wp--preset--spacing--60);
}

@media (min-width: 900px) {
	.mbe-hero {
		grid-template-columns: 1.05fr 0.95fr;
		gap: var(--wp--preset--spacing--70);
		padding-block: var(--wp--preset--spacing--70);
	}
}

.mbe-hero__lede {
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.55;
	max-width: 46ch;
}

/* The branded MBE box, sitting straight on the page.

   Deliberately NO background, no border-radius and no padding: the render is a
   cut-out with its own soft shadow, so any panel behind it just reads as a grey
   card the box is trapped in. The transparency is in the file — this rule is
   what lets it show.

   This is a core/image block (a <figure>) so the editor can swap the picture
   from the media library, hence the margin reset: WordPress gives figures a
   default margin that would knock it out of the grid cell. */
.mbe-hero__visual {
	position: relative;
	aspect-ratio: 4 / 3;
	display: grid;
	place-items: center;
	margin: 0;
}

/* 82%, not 100%: the render fills its own canvas edge to edge, so at full width
   the box crowds the headline beside it. Held back a little, it reads as a
   product shot rather than wallpaper. `contain` because the box must never be
   cropped — it is the product. */
.mbe-hero__visual img {
	display: block;
	width: 82%;
	height: 82%;
	max-width: 100%;
	object-fit: contain;
	/* The render carries its own soft shadow; nothing more is needed here. */
}

/* --------------------------------------------------------------------------
   Service cards — spec 2.2: three cards, subtle hover
   -------------------------------------------------------------------------- */

/* These sections are built from core blocks so editors can rewrite the copy, and
   WordPress adds its own flow-layout margins between block children. Those
   margins fight a grid/flex gap and would reintroduce uneven spacing the moment
   someone edits a card. The gap owns the spacing here; the margins go. */
.mbe-cards > *,
.mbe-card > *,
.mbe-stats > *,
.mbe-stat > * {
	margin-block: 0;
}

.mbe-cards {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--40);
}

@media (min-width: 700px) {
	.mbe-cards {
		grid-template-columns: repeat(3, 1fr);
	}
}

.mbe-card {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--30);
	padding: var(--wp--preset--spacing--50);
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 3px;
	transition: transform var(--mbe-transition), box-shadow var(--mbe-transition);
}

.mbe-card:hover,
.mbe-card:focus-within {
	transform: translateY(-3px);
	box-shadow: var(--mbe-shadow-card-hover);
}

.mbe-card__icon {
	width: 40px;
	height: 40px;
	color: var(--wp--preset--color--mbe-red);
}

.mbe-card__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--large);
}

.mbe-card__body {
	margin: 0;
	color: var(--wp--preset--color--ink-muted);
	flex-grow: 1;
}

/* The link now sits in its own paragraph block (so its label is editable). The
   paragraph is only a carrier — it must not add space of its own. */
.mbe-card__more {
	margin: 0;
}

/* Make the whole card clickable without nesting <a> inside <a>. */
.mbe-card__link {
	font-weight: 500;
	text-decoration: none;
}

.mbe-card__link::after {
	content: "";
	position: absolute;
	inset: 0;
}

.mbe-card {
	position: relative;
}

.mbe-card__link:hover {
	text-decoration: underline;
}

/* --------------------------------------------------------------------------
   Stats strip — spec 2.2: social proof
   -------------------------------------------------------------------------- */

.mbe-stats {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--50);
	text-align: center;
	padding-block: var(--wp--preset--spacing--60);
}

@media (min-width: 700px) {
	.mbe-stats {
		grid-template-columns: repeat(3, 1fr);
		text-align: left;
	}
}

.mbe-stat__value {
	display: block;
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--mbe-red);
}

.mbe-stat__label {
	display: block;
	margin-top: var(--wp--preset--spacing--20);
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--small);
}

/* --------------------------------------------------------------------------
   Tracking — spec 2.2 + 4.2
   Public page. Renders where a parcel is, never who is sending or receiving it.

   Reading order is the whole design: a worried customer wants "is it delivered
   or not" before anything else, then "how far along", and only then the full
   history. The layout puts those in exactly that order and sizes them to match.
   -------------------------------------------------------------------------- */

.mbe-track {
	padding-block: var(--wp--preset--spacing--60) var(--wp--preset--spacing--70);
}

/* One centred column. Everything on this page is read, not scanned across, so a
   measure that keeps lines short beats filling the viewport. */
.mbe-track__panel {
	max-width: 46rem;
	margin-inline: auto;
}

.mbe-track__intro {
	text-align: center;
}

.mbe-track__eyebrow {
	margin: 0;
	color: var(--wp--preset--color--mbe-red);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.mbe-track__title {
	margin: var(--wp--preset--spacing--20) 0 0;
	font-size: var(--wp--preset--font-size--x-large);
	line-height: 1.15;
}

.mbe-track__lede {
	margin: var(--wp--preset--spacing--30) auto 0;
	max-width: 44ch;
	color: var(--wp--preset--color--ink-muted);
}

/* --- Search --------------------------------------------------------------- */

.mbe-track__form {
	margin-top: var(--wp--preset--spacing--50);
}

/* The field and its button share one bordered shell, so they read as a single
   control rather than two things that happen to sit side by side. */
.mbe-track__field {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	padding: 0.4rem 0.4rem 0.4rem 0.9rem;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 3px;
	box-shadow: var(--mbe-shadow-card);
	transition: border-color var(--mbe-transition), box-shadow var(--mbe-transition);
}

/* :focus-within, not :focus — the ring belongs to the whole control, and the
   input inside it then drops its own outline without becoming unfocusable. */
.mbe-track__field:focus-within {
	border-color: var(--wp--preset--color--mbe-red);
	box-shadow: 0 0 0 3px rgb(213 26 0 / 12%);
}

.mbe-track__field-icon {
	flex: none;
	color: var(--wp--preset--color--ink-muted);
}

.mbe-track__input {
	flex: 1;
	min-width: 0;
	padding: 0.75rem 0;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--large);
	color: var(--wp--preset--color--ink);
	background: none;
	border: 0;

	/* Numbers are read off a receipt and typed in. Extra tracking makes a wrong
	   digit far easier to spot. */
	letter-spacing: 0.04em;
}

.mbe-track__input:focus {
	outline: none; /* The shell shows focus — see :focus-within above. */
}

.mbe-track__input::placeholder {
	color: var(--wp--preset--color--ink-muted);
	opacity: 0.55;
	letter-spacing: normal;
}

.mbe-track__submit {
	flex: none;
	padding: 0.8rem 1.5rem;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 500;
	color: var(--wp--preset--color--base);
	background: var(--wp--preset--color--mbe-red);
	border: 0;
	border-radius: 2px;
	cursor: pointer;
	transition: background-color var(--mbe-transition);
}

.mbe-track__submit:hover {
	background: var(--wp--preset--color--mbe-red-dark);
}

.mbe-track__hint {
	margin: var(--wp--preset--spacing--30) 0 0;
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--small);
	text-align: center;
}

.mbe-track__hint strong {
	color: var(--wp--preset--color--ink);
	font-weight: 500;
	white-space: nowrap;
}

/* --- Result region -------------------------------------------------------- */

.mbe-track__result:not(:empty) {
	margin-top: var(--wp--preset--spacing--50);
}

.mbe-track__loading,
.mbe-track__error {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
	margin: 0;
	padding: var(--wp--preset--spacing--40);
	border-radius: 3px;
	background: var(--wp--preset--color--sand-light);
	border: 1px solid var(--wp--preset--color--line);
}

.mbe-track__error {
	color: var(--wp--preset--color--ink);
	border-left: 3px solid var(--wp--preset--color--mbe-red);
}

.mbe-track__error svg {
	flex: none;
	color: var(--wp--preset--color--mbe-red);
}

.mbe-track__spinner {
	flex: none;
	width: 18px;
	height: 18px;
	border: 2px solid var(--wp--preset--color--line);
	border-top-color: var(--wp--preset--color--mbe-red);
	border-radius: 50%;
	animation: mbe-spin 700ms linear infinite;
}

@keyframes mbe-spin {
	to { transform: rotate(360deg); }
}

/* --- The answer ----------------------------------------------------------- */

.mbe-result {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 3px;
	box-shadow: var(--mbe-shadow-card);
	overflow: hidden;
}

/* A single accent stripe carries the outcome, so state is legible before a word
   is read. Red = moving, ink = needs attention. */
.mbe-result__head {
	padding: var(--wp--preset--spacing--40);
	border-top: 3px solid var(--wp--preset--color--mbe-red);
	background: var(--wp--preset--color--sand-light);
}

.mbe-result--problem .mbe-result__head {
	border-top-color: var(--wp--preset--color--ink);
}

.mbe-result__badge {
	display: inline-block;
	margin: 0;
	padding: 0.25rem 0.6rem;
	border-radius: 2px;
	background: var(--wp--preset--color--mbe-red);
	color: var(--wp--preset--color--base);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.mbe-result--problem .mbe-result__badge {
	background: var(--wp--preset--color--ink);
}

.mbe-result__status {
	margin: var(--wp--preset--spacing--30) 0 0;
	font-size: var(--wp--preset--font-size--large);
	font-weight: 500;
	line-height: 1.25;
}

.mbe-result__meta {
	margin: var(--wp--preset--spacing--20) 0 0;
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--small);
}

.mbe-result__meta strong {
	color: var(--wp--preset--color--ink);
	font-weight: 500;
	font-variant-numeric: tabular-nums;
}

/* --- The four stages (spec 2.2) ------------------------------------------- */

.mbe-stages {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	list-style: none;
	margin: 0;
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--40) var(--wp--preset--spacing--30);
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.mbe-stage {
	position: relative;
	text-align: center;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--ink-muted);
}

/* The rail between dots. Drawn per-stage and stopped before the first and after
   the last, so the line never dangles off either end. */
.mbe-stage::before {
	content: "";
	position: absolute;
	top: 6px;
	left: -50%;
	width: 100%;
	height: 2px;
	background: var(--wp--preset--color--line);
}

.mbe-stage:first-child::before {
	display: none;
}

.mbe-stage.is-done::before,
.mbe-stage.is-current::before {
	background: var(--wp--preset--color--mbe-red);
}

.mbe-result--problem .mbe-stage.is-done::before,
.mbe-result--problem .mbe-stage.is-current::before {
	background: var(--wp--preset--color--ink);
}

.mbe-stage__dot {
	position: relative;
	display: block;
	width: 14px;
	height: 14px;
	margin: 0 auto var(--wp--preset--spacing--20);
	border-radius: 50%;
	background: var(--wp--preset--color--base);
	border: 2px solid var(--wp--preset--color--line);
}

.mbe-stage.is-done .mbe-stage__dot,
.mbe-stage.is-current .mbe-stage__dot {
	background: var(--wp--preset--color--mbe-red);
	border-color: var(--wp--preset--color--mbe-red);
}

.mbe-result--problem .mbe-stage.is-done .mbe-stage__dot,
.mbe-result--problem .mbe-stage.is-current .mbe-stage__dot {
	background: var(--wp--preset--color--ink);
	border-color: var(--wp--preset--color--ink);
}

/* A halo marks where the parcel is right now — the one stage worth finding fast. */
.mbe-stage.is-current .mbe-stage__dot {
	box-shadow: 0 0 0 4px rgb(213 26 0 / 15%);
}

.mbe-result--problem .mbe-stage.is-current .mbe-stage__dot {
	box-shadow: 0 0 0 4px rgb(33 30 30 / 12%);
}

.mbe-stage.is-done .mbe-stage__label,
.mbe-stage.is-current .mbe-stage__label {
	color: var(--wp--preset--color--ink);
}

.mbe-stage.is-current .mbe-stage__label {
	font-weight: 500;
}

/* --- History -------------------------------------------------------------- */

.mbe-result__body {
	padding: var(--wp--preset--spacing--40);
}

.mbe-result__subtitle {
	margin: 0 0 var(--wp--preset--spacing--40);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-muted);
}

.mbe-timeline {
	list-style: none;
	margin: 0;
	padding: 0;
}

.mbe-timeline__event {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.15rem;
	position: relative;
	padding: 0 0 var(--wp--preset--spacing--40) var(--wp--preset--spacing--40);

	/* The spine connecting the dots. */
	border-left: 1px solid var(--wp--preset--color--line);
}

.mbe-timeline__event:last-child {
	border-left-color: transparent;
	padding-bottom: 0;
}

@media (min-width: 640px) {
	.mbe-timeline__event {
		grid-template-columns: 10rem 1fr;
		gap: 0 var(--wp--preset--spacing--40);
		align-items: baseline;
	}

	.mbe-timeline__loc {
		grid-column: 2;
	}
}

/* The dot on the spine. */
.mbe-timeline__event::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.4em;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--wp--preset--color--base);
	border: 2px solid var(--wp--preset--color--line);
	transform: translateX(-5px);
}

/* Only the newest event is filled — that is where the parcel is now. */
.mbe-timeline__event.is-current::before {
	background: var(--wp--preset--color--mbe-red);
	border-color: var(--wp--preset--color--mbe-red);
}

.mbe-timeline__event--problem.is-current::before {
	background: var(--wp--preset--color--ink);
	border-color: var(--wp--preset--color--ink);
}

.mbe-timeline__date {
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--small);
	font-variant-numeric: tabular-nums;
}

.mbe-timeline__desc {
	font-weight: 500;
}

.mbe-timeline__loc {
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--small);
}

/* Past events recede, so the current one reads first. */
.mbe-timeline__event:not(.is-current) .mbe-timeline__desc {
	font-weight: 400;
	color: var(--wp--preset--color--ink-muted);
}

/* --- Empty state ---------------------------------------------------------- */

.mbe-track__help {
	margin-top: var(--wp--preset--spacing--50);
	padding: var(--wp--preset--spacing--40);
	background: var(--wp--preset--color--sand-light);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 3px;
}

.mbe-track__help-title {
	margin: 0 0 var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 500;
}

.mbe-track__help-list {
	list-style: none;
	display: grid;
	gap: var(--wp--preset--spacing--30);
	margin: 0;
	padding: 0;
}

@media (min-width: 560px) {
	.mbe-track__help-list {
		grid-template-columns: 1fr 1fr;
		gap: var(--wp--preset--spacing--40);
	}
}

.mbe-track__help-list li {
	display: grid;
	gap: 0.2rem;
	padding-left: var(--wp--preset--spacing--30);
	border-left: 2px solid var(--wp--preset--color--mbe-red);
}

.mbe-track__help-list strong {
	font-weight: 500;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.03em;
}

.mbe-track__help-list span,
.mbe-track__help-foot {
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--small);
}

.mbe-track__help-foot {
	margin: var(--wp--preset--spacing--40) 0 0;
}

/* --------------------------------------------------------------------------
   Accessibility
   -------------------------------------------------------------------------- */

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.skip-link:focus {
	position: fixed;
	top: 1rem;
	left: 1rem;
	z-index: 999;
	padding: 0.75rem 1.25rem;
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--base);
	clip-path: none;
	width: auto;
	height: auto;
}

/* Visible focus everywhere. Never remove this without a replacement. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
	outline: 2px solid var(--wp--preset--color--ink);
	outline-offset: 2px;
}


/* ==========================================================================
   Quick Ship wizard — spec 4.2. Ported from the design prototype; every colour,
   size and space is a theme.json token. Layout only — behaviour is in
   assets/js/quick-ship.js. Markup: patterns/quick-ship.php.
   ========================================================================== */

.mbe-qs, .mbe-qs *, .mbe-qs *::before, .mbe-qs *::after { box-sizing: border-box; }

/* ---- Card shell -------------------------------------------------------- */
.mbe-qs {
	max-width: 1120px;
	margin: 0 auto;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 3px;
	box-shadow: var(--mbe-shadow-card);
	overflow: hidden;
}

.mbe-qs__head {
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
	border-bottom: 1px solid var(--wp--preset--color--line);
	background:
		radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--wp--preset--color--mbe-red) 6%, transparent), transparent 60%),
		var(--wp--preset--color--base);
}
.mbe-qs__eyebrow {
	margin: 0 0 var(--wp--preset--spacing--20);
	font-size: 0.72rem;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--mbe-red);
}
.mbe-qs__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 700;
	line-height: 1.12;
	letter-spacing: -0.02em;
	text-wrap: balance;
}
.mbe-qs__sub {
	margin: var(--wp--preset--spacing--20) 0 0;
	color: var(--wp--preset--color--ink-muted);
	max-width: 54ch;
}

/* ---- Stepper ----------------------------------------------------------- */
.mbe-stepper {
	list-style: none;
	margin: var(--wp--preset--spacing--40) 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--wp--preset--spacing--20);
	counter-reset: step;
}
.mbe-step {
	position: relative;
	padding-top: 0.9rem;
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	min-width: 0;
}
.mbe-step__rail {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	border-radius: 3px;
	background: var(--wp--preset--color--line);
	overflow: hidden;
}
.mbe-step__rail::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--wp--preset--color--mbe-red);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 320ms ease;
}
.mbe-step.is-done .mbe-step__rail::after,
.mbe-step.is-active .mbe-step__rail::after { transform: scaleX(1); }
.mbe-step__n {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	font-size: 0.72rem;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-muted);
}
.mbe-step__n::before {
	counter-increment: step;
	content: counter(step);
	display: grid;
	place-items: center;
	width: 1.35rem;
	height: 1.35rem;
	border-radius: 50%;
	background: var(--wp--preset--color--sand);
	color: var(--wp--preset--color--ink-muted);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0;
	transition: background var(--mbe-transition), color var(--mbe-transition);
}
.mbe-step.is-active .mbe-step__n { color: var(--wp--preset--color--ink); }
.mbe-step.is-active .mbe-step__n::before { background: var(--wp--preset--color--mbe-red); color: #fff; }
.mbe-step.is-done .mbe-step__n::before {
	background: var(--wp--preset--color--ink);
	color: #fff;
	content: "\2713";
}
.mbe-step__label {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	color: var(--wp--preset--color--ink);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.mbe-step:not(.is-active):not(.is-done) .mbe-step__label { color: var(--wp--preset--color--ink-muted); font-weight: 400; }

/* ---- Body: form + summary rail ---------------------------------------- */
.mbe-qs__body {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0;
}
@media (min-width: 900px) {
	.mbe-qs__body { grid-template-columns: 1fr 20rem; }
}

.mbe-qs__main { padding: var(--wp--preset--spacing--50); min-width: 0; }
@media (max-width: 560px) { .mbe-qs__main { padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30); } }

/* Step panels animate in */
.mbe-panel { display: none; }
.mbe-panel.is-current { display: block; animation: panelIn 280ms ease both; }
@keyframes panelIn {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: none; }
}
.mbe-panel__legend {
	margin: 0 0 var(--wp--preset--spacing--30);
}
.mbe-panel__legend h2 {
	margin: 0;
	font-size: var(--wp--preset--font-size--large);
	font-weight: 700;
	letter-spacing: -0.01em;
}
.mbe-panel__legend p { margin: 0.3rem 0 0; color: var(--wp--preset--color--ink-muted); font-size: var(--wp--preset--font-size--small); }

.mbe-fieldset { border: 0; margin: 0 0 var(--wp--preset--spacing--40); padding: 0; }
.mbe-fieldset > legend {
	padding: 0;
	margin: 0 0 var(--wp--preset--spacing--30);
	font-size: 0.72rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-muted);
	display: flex;
	align-items: center;
	gap: 0.5rem;
	width: 100%;
}
.mbe-fieldset > legend::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--wp--preset--color--line);
}

/* Address group cards — sender & recipient as clearly bounded, distinct blocks */
.mbe-fieldset--addr {
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 2px;
	background: var(--wp--preset--color--base);
	box-shadow: var(--mbe-shadow-card);
	overflow: hidden;
	margin-bottom: 0;
}
.mbe-fieldset.mbe-fieldset--addr > legend {
	float: left;
	width: 100%;
	margin: 0;
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	background: var(--wp--preset--color--sand-light);
	border-bottom: 1px solid var(--wp--preset--color--line);
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 700;
	letter-spacing: -0.01em;
	text-transform: none;
	display: flex;
	align-items: center;
	gap: 0.6rem;
}
.mbe-fieldset.mbe-fieldset--addr > legend::after { content: none; }
.mbe-fieldset__body { clear: both; padding: var(--wp--preset--spacing--40); }
@media (max-width: 560px) { .mbe-fieldset__body { padding: var(--wp--preset--spacing--30); } }
.mbe-addr__icon {
	flex: none;
	width: 1.9rem; height: 1.9rem;
	display: grid; place-items: center;
	border-radius: 50%;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--line);
	color: var(--wp--preset--color--mbe-red);
}
.mbe-addr__hint {
	margin-left: auto;
	font-weight: 400;
	color: var(--wp--preset--color--ink-muted);
	font-size: 0.8rem;
	letter-spacing: 0;
}
@media (max-width: 480px) { .mbe-addr__hint { display: none; } }

/* Flow connector between the two address cards: reinforces from -> to */
.mbe-addr-flow { display: grid; place-items: center; padding-block: var(--wp--preset--spacing--20); }
.mbe-addr-flow__chip {
	width: 2rem; height: 2rem; border-radius: 50%;
	background: var(--wp--preset--color--mbe-red); color: #fff;
	display: grid; place-items: center;
	box-shadow: 0 0 0 4px var(--wp--preset--color--base), var(--mbe-shadow-card);
	position: relative; z-index: 1;
}

.mbe-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--wp--preset--spacing--30);
}
.mbe-grid--3 { grid-template-columns: repeat(3, 1fr); }
.col-span-2 { grid-column: 1 / -1; }
@media (max-width: 560px) {
	.mbe-grid, .mbe-grid--3 { grid-template-columns: 1fr; }
	.mbe-grid--3 { grid-template-columns: repeat(3, 1fr); } /* keep dims compact */
}

.mbe-field { display: flex; flex-direction: column; gap: 0.4rem; min-width: 0; }
.mbe-field > label {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	color: var(--wp--preset--color--ink);
	display: flex;
	gap: 0.3rem;
	align-items: baseline;
}
.mbe-field .opt { color: var(--wp--preset--color--ink-muted); font-weight: 400; font-size: 0.8rem; }
.req { color: var(--wp--preset--color--mbe-red); }

.mbe-input, .mbe-select, .mbe-textarea {
	font-family: inherit;
	font-size: var(--wp--preset--font-size--medium);
	color: var(--wp--preset--color--ink);
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 2px;
	padding: 0.72rem 0.85rem;
	width: 100%;
	transition: border-color var(--mbe-transition), box-shadow var(--mbe-transition);
	appearance: none;
}
.mbe-textarea { resize: vertical; min-height: 5.5rem; line-height: 1.5; }
.mbe-input:focus, .mbe-select:focus, .mbe-textarea:focus {
	outline: none;
	border-color: var(--wp--preset--color--ink);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--wp--preset--color--mbe-red) 16%, transparent);
}
.mbe-input::placeholder { color: var(--wp--preset--color--ink-muted); opacity: 0.55; }
.mbe-input.is-mono { letter-spacing: 0.03em; font-variant-numeric: tabular-nums; }
/* Read-only fields the wizard fills for the customer (postal code from city).
   Greyed and un-focusable so it reads as "set for you", not "type here". */
.mbe-input.is-locked,
.mbe-input.is-locked:focus {
	background: color-mix(in srgb, var(--wp--preset--color--line) 22%, var(--wp--preset--color--base));
	color: var(--wp--preset--color--ink-muted);
	border-color: var(--wp--preset--color--line);
	box-shadow: none;
	cursor: default;
}
.mbe-select {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%235F5F5F' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
	background-repeat: no-repeat;
	background-position: right 0.85rem center;
	padding-right: 2.2rem;
}
.mbe-inputwrap { position: relative; }
.mbe-inputwrap__unit {
	position: absolute;
	right: 0.85rem;
	top: 50%;
	transform: translateY(-50%);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--ink-muted);
	pointer-events: none;
}
.mbe-inputwrap .mbe-input { padding-right: 3rem; }

.mbe-field__err {
	font-size: 0.8rem;
	color: var(--wp--preset--color--mbe-red);
	display: none;
	gap: 0.35rem;
	align-items: center;
}
.mbe-field.has-err .mbe-input,
.mbe-field.has-err .mbe-select { border-color: var(--wp--preset--color--mbe-red); }
.mbe-field.has-err .mbe-field__err { display: flex; }

/* Toggle (fragile, COD) */
.mbe-toggle {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	cursor: pointer;
	user-select: none;
}
.mbe-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.mbe-toggle__track {
	width: 2.6rem; height: 1.5rem;
	border-radius: 1rem;
	background: var(--wp--preset--color--sand);
	border: 1px solid var(--wp--preset--color--line);
	position: relative;
	transition: background var(--mbe-transition), border-color var(--mbe-transition);
	flex: none;
}
.mbe-toggle__track::after {
	content: "";
	position: absolute;
	top: 50%; left: 3px;
	transform: translateY(-50%);
	width: 1.1rem; height: 1.1rem;
	border-radius: 50%;
	background: var(--wp--preset--color--base);
	box-shadow: 0 1px 2px rgb(0 0 0 / 25%);
	transition: transform var(--mbe-transition);
}
.mbe-toggle input:checked + .mbe-toggle__track { background: var(--wp--preset--color--mbe-red); border-color: var(--wp--preset--color--mbe-red); }
.mbe-toggle input:checked + .mbe-toggle__track::after { transform: translateY(-50%) translateX(1.1rem); }
.mbe-toggle input:focus-visible + .mbe-toggle__track { outline: 2px solid var(--wp--preset--color--ink); outline-offset: 2px; }
.mbe-toggle__text { font-size: var(--wp--preset--font-size--medium); }
.mbe-toggle__text small { display: block; color: var(--wp--preset--color--ink-muted); font-size: 0.8rem; }

/* Selectable option cards (service type, payer) */
.mbe-choices { display: grid; grid-template-columns: 1fr 1fr; gap: var(--wp--preset--spacing--30); }
@media (max-width: 560px) { .mbe-choices { grid-template-columns: 1fr; } }
.mbe-choice {
	position: relative;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 2px;
	padding: var(--wp--preset--spacing--30);
	cursor: pointer;
	transition: border-color var(--mbe-transition), box-shadow var(--mbe-transition), background var(--mbe-transition);
	display: flex;
	gap: 0.8rem;
	align-items: flex-start;
}
.mbe-choice:hover { border-color: var(--wp--preset--color--ink); }
.mbe-choice input { position: absolute; opacity: 0; }
.mbe-choice__mark {
	flex: none; margin-top: 0.15rem;
	width: 1.2rem; height: 1.2rem; border-radius: 50%;
	border: 2px solid var(--wp--preset--color--line);
	display: grid; place-items: center;
	transition: border-color var(--mbe-transition);
}
.mbe-choice__mark::after {
	content: ""; width: 0.6rem; height: 0.6rem; border-radius: 50%;
	background: var(--wp--preset--color--mbe-red); transform: scale(0); transition: transform var(--mbe-transition);
}
.mbe-choice__icon { color: var(--wp--preset--color--mbe-red); flex: none; }
.mbe-choice__t { display: block; font-weight: 500; }
.mbe-choice__d { display: block; font-size: 0.82rem; color: var(--wp--preset--color--ink-muted); margin-top: 0.15rem; }
.mbe-choice input:checked ~ .mbe-choice__mark { border-color: var(--wp--preset--color--mbe-red); }
.mbe-choice input:checked ~ .mbe-choice__mark::after { transform: scale(1); }
.mbe-choice:has(input:checked) {
	border-color: var(--wp--preset--color--mbe-red);
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--mbe-red);
	background: color-mix(in srgb, var(--wp--preset--color--mbe-red) 4%, transparent);
}
.mbe-choice input:focus-visible ~ .mbe-choice__mark { outline: 2px solid var(--wp--preset--color--ink); outline-offset: 3px; }

/* Reveal region (COD amount) */
.mbe-reveal { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 260ms ease; }
.mbe-reveal.is-open { grid-template-rows: 1fr; }
.mbe-reveal > div { overflow: hidden; }
.mbe-reveal__inner { padding-top: var(--wp--preset--spacing--30); }

/* ---- Summary rail ------------------------------------------------------ */
.mbe-rail {
	background: var(--wp--preset--color--sand-light);
	border-top: 1px solid var(--wp--preset--color--line);
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
}
@media (min-width: 900px) {
	.mbe-rail { border-top: 0; border-left: 1px solid var(--wp--preset--color--line); }
}
.mbe-rail__title {
	margin: 0 0 var(--wp--preset--spacing--30);
	font-size: 0.72rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-muted);
}
.mbe-rail__route {
	display: flex; align-items: center; gap: 0.6rem;
	font-weight: 500; margin-bottom: var(--wp--preset--spacing--40);
}
.mbe-rail__city { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mbe-rail__city small { display: block; font-size: 0.7rem; font-weight: 400; color: var(--wp--preset--color--ink-muted); text-transform: uppercase; letter-spacing: 0.08em; }
.mbe-rail__arrow { color: var(--wp--preset--color--mbe-red); flex: none; }
.mbe-rail__list { display: flex; flex-direction: column; gap: 0; margin: 0; padding: 0; list-style: none; }
.mbe-rail__row {
	display: flex; justify-content: space-between; gap: var(--wp--preset--spacing--30);
	padding: 0.6rem 0;
	border-top: 1px solid var(--wp--preset--color--line);
	font-size: var(--wp--preset--font-size--small);
}
.mbe-rail__row dt { color: var(--wp--preset--color--ink-muted); }
.mbe-rail__row dd { margin: 0; text-align: right; font-weight: 500; font-variant-numeric: tabular-nums; }
.mbe-rail__row dd.muted { color: var(--wp--preset--color--ink-muted); font-weight: 400; }
.mbe-rail__cod {
	margin-top: var(--wp--preset--spacing--40);
	padding: var(--wp--preset--spacing--30);
	border-radius: 2px;
	background: color-mix(in srgb, var(--wp--preset--color--mbe-red) 8%, transparent);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--mbe-red) 24%, transparent);
}
.mbe-rail__cod dt { font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--wp--preset--color--mbe-red); }
.mbe-rail__cod dd { margin: 0.2rem 0 0; font-size: var(--wp--preset--font-size--large); font-weight: 700; font-variant-numeric: tabular-nums; }
.mbe-rail__note { margin: var(--wp--preset--spacing--40) 0 0; font-size: 0.78rem; color: var(--wp--preset--color--ink-muted); line-height: 1.5; }

/* ---- Footer nav -------------------------------------------------------- */
.mbe-qs__foot {
	display: flex; align-items: center; justify-content: space-between; gap: var(--wp--preset--spacing--30);
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
	border-top: 1px solid var(--wp--preset--color--line);
	background: var(--wp--preset--color--base);
}
@media (max-width: 560px) { .mbe-qs__foot { padding: var(--wp--preset--spacing--30); } }
.mbe-btn {
	font-family: inherit; font-size: var(--wp--preset--font-size--medium); font-weight: 500;
	border-radius: 2px; padding: 0.85rem 1.6rem; cursor: pointer;
	border: 1px solid transparent; transition: background var(--mbe-transition), color var(--mbe-transition), box-shadow var(--mbe-transition);
	display: inline-flex; align-items: center; gap: 0.5rem;
}
.mbe-btn--primary { background: var(--wp--preset--color--mbe-red); color: #fff; }
.mbe-btn--primary:hover { background: var(--wp--preset--color--mbe-red-dark); }
.mbe-btn--ghost { background: transparent; color: var(--wp--preset--color--ink); box-shadow: inset 0 0 0 1px var(--wp--preset--color--line); }
.mbe-btn--ghost:hover { box-shadow: inset 0 0 0 1px var(--wp--preset--color--ink); }
.mbe-btn:focus-visible { outline: 2px solid var(--wp--preset--color--ink); outline-offset: 2px; }
.mbe-btn[hidden] { display: none; }
.mbe-btn__spin {
	width: 1rem; height: 1rem; border-radius: 50%;
	border: 2px solid rgb(255 255 255 / 45%); border-top-color: #fff;
	animation: spin 700ms linear infinite; display: none;
}
.mbe-btn.is-busy .mbe-btn__spin { display: inline-block; }
.mbe-btn.is-busy { opacity: 0.85; pointer-events: none; }
@keyframes spin { to { transform: rotate(360deg); } }
.mbe-foot__count { font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--ink-muted); }

/* ---- Review step ------------------------------------------------------- */
.mbe-review { display: grid; gap: var(--wp--preset--spacing--30); }
.mbe-review__block {
	border: 1px solid var(--wp--preset--color--line); border-radius: 2px;
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
}
.mbe-review__head {
	display: flex; justify-content: space-between; align-items: baseline;
	margin-bottom: var(--wp--preset--spacing--20);
}
.mbe-review__head h3 { margin: 0; font-size: var(--wp--preset--font-size--small); text-transform: uppercase; letter-spacing: 0.1em; color: var(--wp--preset--color--ink-muted); font-weight: 500; }
.mbe-review__edit { background: none; border: 0; color: var(--wp--preset--color--mbe-red); font: inherit; font-size: 0.8rem; font-weight: 500; cursor: pointer; padding: 0; }
.mbe-review__edit:hover { text-decoration: underline; }
.mbe-review__block dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 0.25rem var(--wp--preset--spacing--30); }
.mbe-review__block dt { color: var(--wp--preset--color--ink-muted); font-size: var(--wp--preset--font-size--small); }
.mbe-review__block dd { margin: 0; font-size: var(--wp--preset--font-size--small); text-align: right; }

.mbe-enquiry {
	display: flex; gap: 0.9rem; align-items: flex-start;
	padding: var(--wp--preset--spacing--40);
	border-radius: 2px;
	background: var(--wp--preset--color--sand-light);
	border: 1px solid var(--wp--preset--color--line);
	border-left: 3px solid var(--wp--preset--color--mbe-red);
}
.mbe-enquiry svg { color: var(--wp--preset--color--mbe-red); flex: none; margin-top: 0.15rem; }
.mbe-enquiry strong { display: block; margin-bottom: 0.15rem; }
.mbe-enquiry p { margin: 0; font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--ink-muted); }

.mbe-agree { display: flex; gap: 0.7rem; align-items: flex-start; cursor: pointer; margin-top: var(--wp--preset--spacing--30); }
.mbe-agree input { margin-top: 0.25rem; width: 1.1rem; height: 1.1rem; accent-color: var(--wp--preset--color--mbe-red); flex: none; }
.mbe-agree span { font-size: var(--wp--preset--font-size--small); }
.mbe-agree a { color: var(--wp--preset--color--mbe-red); }
.mbe-agree.has-err span { color: var(--wp--preset--color--mbe-red); }

/* ---- Success ----------------------------------------------------------- */
.mbe-done { padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--50); text-align: center; display: none; }
.mbe-done.is-current { display: block; animation: panelIn 320ms ease both; }
.mbe-done__badge {
	width: 4.5rem; height: 4.5rem; border-radius: 50%;
	background: color-mix(in srgb, var(--wp--preset--color--mbe-red) 12%, transparent);
	display: grid; place-items: center; margin: 0 auto var(--wp--preset--spacing--30);
	color: var(--wp--preset--color--mbe-red);
}
.mbe-done__badge svg { animation: pop 400ms 120ms ease both; }
@keyframes pop { from { transform: scale(0.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.mbe-done h2 { margin: 0 0 var(--wp--preset--spacing--20); font-size: var(--wp--preset--font-size--x-large); letter-spacing: -0.02em; }
.mbe-done p { margin: 0 auto; color: var(--wp--preset--color--ink-muted); max-width: 46ch; }
.mbe-done__ref {
	display: inline-flex; flex-direction: column; gap: 0.2rem;
	margin: var(--wp--preset--spacing--40) 0;
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--50);
	background: var(--wp--preset--color--sand-light); border: 1px solid var(--wp--preset--color--line); border-radius: 2px;
}
.mbe-done__ref span { font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--wp--preset--color--ink-muted); }
.mbe-done__ref strong { font-size: var(--wp--preset--font-size--large); font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
.mbe-done__next { text-align: left; max-width: 30rem; margin: var(--wp--preset--spacing--40) auto 0; }
.mbe-done__next h3 { font-size: var(--wp--preset--font-size--small); text-transform: uppercase; letter-spacing: 0.1em; color: var(--wp--preset--color--ink-muted); margin: 0 0 var(--wp--preset--spacing--20); }
.mbe-done__next ol { margin: 0; padding-left: 1.2rem; display: flex; flex-direction: column; gap: 0.5rem; font-size: var(--wp--preset--font-size--small); }

.mbe-visually-hidden {
	position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* --- Quick Ship: helpers introduced when porting inline styles ------------ */
.mbe-qs-wrap { padding-block: var(--wp--preset--spacing--60); }
.mbe-qs__noscript {
	margin: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50) 0;
	padding: var(--wp--preset--spacing--40);
	background: var(--wp--preset--color--sand-light);
	border: 1px solid var(--wp--preset--color--line);
	border-left: 3px solid var(--wp--preset--color--mbe-red);
	border-radius: 2px;
}
.mbe-field__note { margin: var(--wp--preset--spacing--20) 0 0; font-size: 0.8rem; color: var(--wp--preset--color--ink-muted); }
.mbe-field__err--block { margin-top: var(--wp--preset--spacing--20); }
.mbe-legend__opt { text-transform: none; letter-spacing: 0; font-weight: 400; }
.mbe-enquiry { margin-top: var(--wp--preset--spacing--40); }
.mbe-rail__city--to { text-align: right; }
.mbe-submit-error {
	margin: var(--wp--preset--spacing--30) 0 0;
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	background: var(--wp--preset--color--sand-light);
	border: 1px solid var(--wp--preset--color--line);
	border-left: 3px solid var(--wp--preset--color--mbe-red);
	border-radius: 2px;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--ink);
}