/* MangoEngin Chauffeur Booking — front end.
   Scoped under .mecb-app / .mecb-account so it can't leak into the theme. */

.mecb-app,
.mecb-account{
	--mecb-ink:#7E2019;
	--mecb-slate:#5E514D;
	--mecb-line:#EBE0D8;
	--mecb-mist:#FAF6F2;
	--mecb-brass:#D89922;
	--mecb-brass-lift:#E8B04A;
	--mecb-brass-ink:#8F6115;
	--mecb-on-brass:#4A0F0B;
	--mecb-brass-wash:#FBF0DC;
	--mecb-ink-deep:#4A0F0B;
	--mecb-radius:12px;
	--mecb-shadow:0 1px 2px rgba(11,31,51,.06),0 8px 24px rgba(11,31,51,.07);
	color:var(--mecb-ink);
	font-size:16px;
	line-height:1.6;
	box-sizing:border-box;
}
.mecb-app *,.mecb-app *::before,.mecb-app *::after,
.mecb-account *,.mecb-account *::before,.mecb-account *::after{box-sizing:inherit}

.mecb-app__title{margin:0 0 1.25rem;font-size:1.6rem}

/* ---------- Progress ---------- */
.mecb-steps{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;margin:0 0 1.5rem;padding:0;counter-reset:none}
.mecb-step{display:flex;align-items:center;gap:.5rem;flex:1 1 150px;padding:.7rem .9rem;background:var(--mecb-mist);
	border:1px solid var(--mecb-line);border-radius:999px;font-size:.85rem;font-weight:600;color:var(--mecb-slate)}
.mecb-step span{width:24px;height:24px;flex:none;display:grid;place-items:center;border-radius:50%;
	background:#fff;border:1px solid var(--mecb-line);font-size:.78rem}
.mecb-step.is-active{background:var(--mecb-ink);border-color:var(--mecb-ink);color:#fff}
.mecb-step.is-active span{background:var(--mecb-brass);border-color:var(--mecb-brass);color:#fff}
.mecb-step.is-done{border-color:var(--mecb-brass);color:var(--mecb-ink)}
.mecb-step.is-done span{background:var(--mecb-brass-wash);border-color:var(--mecb-brass);color:var(--mecb-brass)}

/* ---------- Alerts ---------- */
.mecb-alert{margin:0 0 1.25rem;padding:.9rem 1.1rem;border-radius:var(--mecb-radius);
	background:#FDECEC;border:1px solid #F3C0C0;color:#8B2020;font-size:.92rem}
.mecb-error{color:#B02525;font-size:.85rem;margin:.5rem 0 0;min-height:1em}

/* ---------- Panels ---------- */
.mecb-panel{background:#fff;border:1px solid var(--mecb-line);border-radius:var(--mecb-radius);
	box-shadow:var(--mecb-shadow);overflow:hidden}
.mecb-panel[hidden]{display:none}

/* ---------- Tabs ---------- */
.mecb-tabs{display:flex;background:var(--mecb-ink)}
.mecb-tab{flex:1;display:flex;align-items:center;justify-content:center;gap:.5rem;padding:1.05rem .8rem;
	background:none;border:0;border-bottom:3px solid transparent;cursor:pointer;
	color:rgba(255,255,255,.66);font-weight:700;font-size:.92rem;font-family:inherit;transition:.18s}
.mecb-tab:hover{color:#fff;background:rgba(255,255,255,.05)}
.mecb-tab.is-active{color:#fff;background:rgba(255,255,255,.07);border-bottom-color:var(--mecb-brass)}
.mecb-tab__icon{font-size:1.05rem}

/* ---------- Form ---------- */
.mecb-form{padding:1.6rem}
.mecb-row{display:grid;grid-template-columns:repeat(12,1fr);gap:.9rem}
.mecb-field{grid-column:span 12;display:flex;flex-direction:column;gap:.35rem;min-width:0}
.mecb-field--half{grid-column:span 6}
.mecb-field--quarter{grid-column:span 3}
.mecb-field--full{grid-column:span 12}
.mecb-field label{font-size:.8rem;font-weight:700}
.mecb-field label em{color:var(--mecb-brass);font-style:normal}
.mecb-field label small{font-weight:500;color:var(--mecb-slate)}
.mecb-field input,.mecb-field select,.mecb-field textarea{
	width:100%;padding:.72rem .85rem;border:1.5px solid var(--mecb-line);border-radius:6px;
	font-size:.95rem;font-family:inherit;background:#fff;color:var(--mecb-ink);transition:border-color .18s,box-shadow .18s}
.mecb-field input:focus,.mecb-field select:focus,.mecb-field textarea:focus{
	outline:none;border-color:var(--mecb-brass);box-shadow:0 0 0 3px var(--mecb-brass-wash)}
.mecb-hint{color:var(--mecb-slate);font-size:.78rem}

.mecb-toggle{display:flex;border:1.5px solid var(--mecb-line);border-radius:6px;overflow:hidden;height:46px}
.mecb-toggle label{flex:1;margin:0}
.mecb-toggle input{position:absolute;opacity:0;pointer-events:none}
.mecb-toggle span{display:grid;place-items:center;height:100%;font-size:.88rem;font-weight:600;
	color:var(--mecb-slate);cursor:pointer;transition:.18s}
.mecb-toggle input:checked + span{background:var(--mecb-ink);color:#fff}

.mecb-return{margin-top:.9rem;padding-top:.9rem;border-top:1px dashed var(--mecb-line)}
.mecb-return[hidden]{display:none}

.mecb-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem;
	padding:1.25rem 1.6rem;border-top:1px solid var(--mecb-line);background:var(--mecb-mist)}
.mecb-panel[data-panel="1"] .mecb-actions{margin:1.6rem -1.6rem -1.6rem}
/* With the reassurance moved out this bar holds one button, and
   space-between would push it to the left of an empty strip. */
.mecb-actions--single{justify-content:flex-end}
.mecb-assure--standalone{margin-top:1.4rem}
.mecb-note{margin:0;font-size:.82rem;color:var(--mecb-slate)}
.mecb-note--secure{margin-top:.6rem}

/* ---------- Buttons ---------- */
.mecb-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.85rem 1.6rem;
	border:1.5px solid transparent;border-radius:999px;font-weight:700;font-size:.92rem;font-family:inherit;
	cursor:pointer;text-decoration:none;transition:.18s}
.mecb-btn--primary{background:var(--mecb-brass);color:var(--mecb-on-brass)}
.mecb-btn--primary:hover{background:var(--mecb-brass-lift);color:var(--mecb-on-brass)}
.mecb-btn--ghost{background:#fff;border-color:var(--mecb-line);color:var(--mecb-ink)}
.mecb-btn--ghost:hover{border-color:var(--mecb-ink)}
.mecb-btn:disabled,.mecb-btn.is-busy{opacity:.65;cursor:progress}

/* ---------- Step 2: results ---------- */
.mecb-trip-summary{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;padding:1.1rem 1.6rem;
	background:var(--mecb-mist);border-bottom:1px solid var(--mecb-line);font-size:.85rem;color:var(--mecb-slate)}
.mecb-trip-summary b{color:var(--mecb-ink);font-weight:700;margin-right:.3rem}

.mecb-results{display:grid;grid-template-columns:1fr 1.15fr;gap:0}
.mecb-results__map{border-right:1px solid var(--mecb-line);display:flex;flex-direction:column}
.mecb-map{flex:1;min-height:420px;background:var(--mecb-mist)}
.mecb-map.is-hidden{display:none}
/* Fixed fares show the map and the trip card together, so the map gives up
   its stretch and takes a fixed slice of the panel instead. */
.mecb-results__map.is-split .mecb-map{flex:0 0 auto;min-height:0;height:300px}
.mecb-results__map.is-split .mecb-trip{flex:1;border-top:1px solid var(--mecb-line)}
.mecb-map__fallback{padding:1.5rem;color:var(--mecb-slate);font-size:.9rem;text-align:center}
.mecb-map__stats{display:flex;gap:1.5rem;padding:.9rem 1.25rem;border-top:1px solid var(--mecb-line);font-size:.85rem;color:var(--mecb-slate)}
.mecb-map__stats strong{color:var(--mecb-ink);display:block;font-size:1rem}
.mecb-results__list{max-height:640px;overflow-y:auto;padding:1rem}

.mecb-car{display:grid;grid-template-columns:110px 1fr auto;gap:1rem;align-items:center;
	padding:.9rem;border:1px solid var(--mecb-line);border-radius:var(--mecb-radius);margin-bottom:.75rem;transition:.18s}
.mecb-car:hover{border-color:var(--mecb-brass);box-shadow:var(--mecb-shadow)}
.mecb-car__media img{width:100%;height:74px;object-fit:cover;border-radius:8px;display:block}
.mecb-car__noimg{height:74px;display:grid;place-items:center;background:var(--mecb-mist);border-radius:8px;font-size:1.6rem}
.mecb-car__body h4{margin:0 0 .15rem;font-size:1.02rem}
.mecb-car__class{margin:0 0 .4rem;font-size:.78rem;color:var(--mecb-slate)}
.mecb-car__specs{list-style:none;margin:0 0 .35rem;padding:0;display:flex;flex-wrap:wrap;gap:.3rem .85rem;
	font-size:.78rem;color:var(--mecb-slate)}
.mecb-car__desc{margin:0;font-size:.8rem;color:var(--mecb-slate)}
.mecb-car__price{text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:.15rem}
.mecb-car__price strong{font-size:1.35rem;line-height:1.1}
.mecb-car__price small{color:var(--mecb-slate);font-size:.7rem;margin-bottom:.4rem}
.mecb-car__price .mecb-btn{padding:.55rem 1.2rem;font-size:.85rem}

/* ---------- Step 3: checkout ---------- */
.mecb-checkout{display:grid;grid-template-columns:1.5fr 1fr;gap:0}
.mecb-checkout__form{padding:1.6rem;border-right:1px solid var(--mecb-line)}
.mecb-h3{margin:0 0 .9rem;font-size:1.05rem}
.mecb-checkout__form .mecb-h3:not(:first-child){margin-top:1.75rem}
.mecb-checkout__form .mecb-actions{margin:1.6rem -1.6rem -1.6rem}

.mecb-extras{display:grid;gap:.5rem}
.mecb-extra{display:flex;align-items:center;gap:.75rem;padding:.7rem .9rem;border:1px solid var(--mecb-line);
	border-radius:8px;cursor:pointer;font-size:.9rem;transition:.18s}
.mecb-extra:hover{border-color:var(--mecb-brass)}
.mecb-extra__label{flex:1;display:flex;flex-direction:column}
.mecb-extra__label small{color:var(--mecb-slate);font-size:.74rem}
.mecb-extra__price{font-weight:700}
.mecb-extra--qty select{width:auto;min-width:130px;padding:.45rem .6rem;border:1.5px solid var(--mecb-line);
	border-radius:6px;font-family:inherit;font-size:.85rem}

.mecb-card{padding:1rem;border:1.5px solid var(--mecb-line);border-radius:8px;background:#fff;min-height:60px}

.mecb-summary{padding:1.6rem;background:var(--mecb-mist)}
.mecb-summary__car{display:flex;gap:.75rem;align-items:center;padding-bottom:1rem;margin-bottom:1rem;
	border-bottom:1px solid var(--mecb-line)}
.mecb-summary__car img{width:70px;height:52px;object-fit:cover;border-radius:6px}
.mecb-summary__car small{display:block;color:var(--mecb-slate);font-size:.78rem}
.mecb-summary__lines{list-style:none;margin:0;padding:0}
.mecb-summary__lines li{display:flex;justify-content:space-between;gap:1rem;padding:.4rem 0;font-size:.85rem;color:var(--mecb-slate)}
.mecb-summary__total{display:flex;justify-content:space-between;align-items:center;margin-top:.9rem;
	padding-top:.9rem;border-top:2px solid var(--mecb-ink);font-size:.95rem;font-weight:700}
.mecb-summary__total strong{font-size:1.4rem}

/* ---------- Step 4 ---------- */
.mecb-done{padding:3rem 1.6rem;text-align:center}
.mecb-done__icon{width:64px;height:64px;margin:0 auto 1.25rem;border-radius:50%;display:grid;place-items:center;
	background:#E6F4EC;color:#1E7A47;font-size:1.9rem}
.mecb-done h3{margin:0 0 .5rem;font-size:1.5rem}
.mecb-done__ref{font-size:.95rem;color:var(--mecb-slate)}
.mecb-done__thanks{margin:0 0 1.35rem;font-size:1.02rem;color:var(--mecb-slate)}

/* The reference is what a customer reads out on the phone, so it is set as a
   plate to be copied from rather than a sentence to be read past. */
.mecb-done__code{
	display:inline-block;margin:0 auto 1.4rem;padding:.75rem 1.5rem;
	background:var(--mecb-brass-wash);border:1px solid var(--mecb-brass);border-radius:10px;
	text-align:center;
}
.mecb-done__code span{
	display:block;font-size:.68rem;font-weight:700;letter-spacing:.14em;
	text-transform:uppercase;color:var(--mecb-slate);margin-bottom:.3rem;
}
.mecb-done__code strong{
	display:block;font-size:1.3rem;font-weight:800;letter-spacing:.06em;
	color:var(--mecb-ink-deep);
}
.mecb-done__blurb{max-width:46ch;margin:0 auto;color:var(--mecb-slate);line-height:1.65}

@media (max-width:600px){
	.mecb-done{padding:2.25rem 1.1rem}
	.mecb-done__code strong{font-size:1.1rem}
	.mecb-done__actions .mecb-btn{flex:1 1 100%;justify-content:center}
}
.mecb-done__actions{display:flex;flex-wrap:wrap;gap:.75rem;justify-content:center;margin-top:1.5rem}

/* ---------- Account ---------- */
.mecb-account__head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:1.5rem}
.mecb-bookings{display:grid;gap:1rem}
.mecb-booking{border:1px solid var(--mecb-line);border-radius:var(--mecb-radius);background:#fff;overflow:hidden}
.mecb-booking__head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.75rem;
	padding:1rem 1.25rem;background:var(--mecb-mist);border-bottom:1px solid var(--mecb-line)}
.mecb-booking__ref{font-weight:700}
.mecb-booking__body{padding:1.25rem;display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1rem}
.mecb-booking__body dt{font-size:.74rem;font-weight:700;color:var(--mecb-slate);margin-bottom:.15rem}
.mecb-booking__body dd{margin:0;font-size:.9rem}
.mecb-booking__foot{padding:1rem 1.25rem;border-top:1px solid var(--mecb-line);display:flex;flex-wrap:wrap;
	gap:.75rem;justify-content:space-between;align-items:center}
.mecb-badge{display:inline-block;padding:.25rem .7rem;border-radius:999px;font-size:.74rem;font-weight:700}
.mecb-badge--pending{background:#FFF4DC;color:#8A6217}
.mecb-badge--confirmed,.mecb-badge--assigned{background:#E6F4EC;color:#1E7A47}
.mecb-badge--completed{background:#E9EEF3;color:#41566B}
.mecb-badge--cancelled,.mecb-badge--refunded{background:#FDECEC;color:#8B2020}
.mecb-empty{padding:2.5rem;text-align:center;border:1px dashed var(--mecb-line);border-radius:var(--mecb-radius);color:var(--mecb-slate)}
.mecb-login{max-width:420px;margin:0 auto;padding:1.75rem;border:1px solid var(--mecb-line);border-radius:var(--mecb-radius);background:#fff}

/* --------------------------------------------------------------------------
   What every booking includes.

   A quiet green panel, deliberately not the gold used for the fare caveat
   beside it: one is a benefit and the other a condition, and they should not
   look like the same kind of message. Same green as the "no card needed"
   reassurance, so the two positives read as one family.
   -------------------------------------------------------------------------- */
.mecb-perks{
	display:flex; align-items:flex-start; gap:.75rem;
	margin:1.1rem 1.6rem; padding:.9rem 1.1rem;
	background:rgba(16,107,51,.07);
	border:1px solid rgba(16,107,51,.24);
	border-radius:.5rem;
}
.mecb-perks strong{
	display:block; color:#0d5c2c; font-size:.92rem; letter-spacing:.01em;
}
.mecb-perks p{
	margin:.2rem 0 0; color:var(--mecb-slate);
	font-size:.85rem; line-height:1.55;
}
.mecb-perks__mark{
	flex:none; width:24px; height:24px; margin-top:.05rem;
	display:grid; place-items:center; border-radius:50%;
	background:#0d5c2c; color:#fff; font-size:.8rem; line-height:1;
}

/* On the confirmation the panel is centred with everything else there. */
.mecb-perks--done{margin:1.5rem 0; text-align:left}

@media (max-width:600px){
	.mecb-perks{margin:1.1rem}
}

/* --------------------------------------------------------------------------
   The fare caveat.

   A condition that can change what somebody pays should not be in the grey
   small print that people have learned to skip. So: the brass wash, an accent
   bar, a mark, and bold text in the brand burgundy — which measures 8.8:1 on
   that wash, AAA at this size, where the readable gold would only have made
   AA. The 1px edge is the darker gold so the box has a real boundary; the
   brass bar is the accent on top of it.
   -------------------------------------------------------------------------- */
.mecb-fare-note{
	display:flex; align-items:flex-start; gap:.7rem;
	margin:1.1rem 1.6rem; padding:.85rem 1.1rem;
	background:var(--mecb-brass-wash);
	border:1px solid rgba(143,97,21,.45);
	border-left:4px solid var(--mecb-brass);
	border-radius:.5rem;
	color:var(--mecb-ink);
	font-size:.88rem; font-weight:700; line-height:1.55;
}

/* Drawn rather than an emoji, so it is the brand's gold on every platform
   instead of whichever glyph the operating system supplies. */
.mecb-fare-note__mark{
	flex:none; width:22px; height:22px; margin-top:.05rem;
	display:grid; place-items:center;
	border-radius:50%;
	background:var(--mecb-brass); color:var(--mecb-on-brass);
	font-size:.86rem; font-weight:800; line-height:1;
}

/* In the summary aside it is already inside a padded panel. */
.mecb-summary .mecb-fare-note{margin:1rem 0 0}

@media (max-width:600px){
	.mecb-fare-note{margin:1.1rem}
}

/* --------------------------------------------------------------------------
   Blowout guards.

   A grid or flex child defaults to min-width:auto, which refuses to shrink
   below its contents — so one long vehicle name or pasted address can push a
   column wider than the screen and take the whole page with it. These cost
   nothing and make that impossible.
   -------------------------------------------------------------------------- */
.mecb-app{max-width:100%}
.mecb-checkout__form,.mecb-summary,
.mecb-results__map,.mecb-results__list{min-width:0}
.mecb-summary__lines li span,
.mecb-summary__sub span,
.mecb-summary__car div{min-width:0; overflow-wrap:anywhere}
.mecb-summary__car strong{overflow-wrap:anywhere}

/* ---------- Responsive ---------- */
@media (max-width:900px){
	.mecb-results,.mecb-checkout{grid-template-columns:1fr}
	.mecb-results__map{border-right:0;border-bottom:1px solid var(--mecb-line)}
	.mecb-checkout__form{border-right:0}
	.mecb-map{min-height:280px}
	.mecb-results__map.is-split .mecb-map{height:230px}
	.mecb-results__list{max-height:none}
	.mecb-field--half,.mecb-field--quarter{grid-column:span 6}
}
/*
 * Form controls on anything tapped rather than clicked.
 *
 * Below 16px a mobile browser zooms the page in when a field is focused, to
 * make the text it is about to read legible. Once the page is zoomed, the
 * browser's own date and time dialogs are laid out against the wider page but
 * drawn into the narrower screen, so their right-hand edge — the Set button —
 * falls off it. The field is what has to change: the dialog belongs to the
 * browser and takes no styling from here.
 *
 * Keyed on the pointer, not the width, because a tablet in portrait is 768px
 * wide and zooms exactly the same way. And on every control rather than the
 * time one alone, since the zoom happens on whichever field is tapped first
 * and then persists across the whole form.
 */
/* The two halves of a pick-up time. Side by side, and wide enough apart that
   a thumb cannot take the minute when it meant the hour. */
.mecb-time{display:grid; grid-template-columns:1fr 1fr; gap:.5rem; min-width:0}
.mecb-time select{min-width:0}

@media (pointer:coarse){
	.mecb-field input,.mecb-field select,.mecb-field textarea,
	.mecb-coupon__input,.mecb-extra--qty select{font-size:16px}

	/*
	 * The step's primary action rides with the screen.
	 *
	 * The booking form is long on a phone, so "Show me the price" sat below
	 * the fold and had to be hunted for.
	 *
	 * Fixed rather than sticky, which cannot work here: the bar is the last
	 * thing in its panel, and a sticky element is held inside its parent's
	 * box — a parent that ends exactly where the bar does, leaving nothing to
	 * stick against. So the bar leaves the flow while its resting place is
	 * off screen, and drops back into it once that place is reached.
	 *
	 * --mecb-dock is the height of whatever the theme already fixes to the
	 * bottom of the screen, measured at runtime. Without it this would sit
	 * underneath the Call bar.
	 */
	.mecb-panel[data-panel="1"] .mecb-actions.is-docked,
	.mecb-panel[data-panel="3"] .mecb-actions.is-docked,
	.mecb-panel[data-panel="4"] .mecb-actions.is-docked{
		position:fixed;
		left:0; right:0;
		bottom:var(--mecb-dock,0px);
		margin:0;
		z-index:20;
		border-top:1px solid var(--mecb-line);
		box-shadow:0 -8px 22px -12px rgba(0,0,0,.45);
		padding-left:max(1.1rem, env(safe-area-inset-left));
		padding-right:max(1.1rem, env(safe-area-inset-right));
	}

	/* Holds the space the bar left, so the page does not jump as it docks. */
	.mecb-dock-slot{display:block}

	/* Pinned, the bar is furniture rather than a section, so the button takes
	   the full width and the whole strip is one target. */
	.mecb-actions--single .mecb-btn{width:100%}

	/* Taller targets for the date, which still opens the browser's calendar,
	   and for the time dropdowns beside it. */
	.mecb-field input[type="date"],.mecb-time select{min-height:48px}
}

@media (max-width:600px){
	.mecb-field--half,.mecb-field--quarter{grid-column:span 12}
	.mecb-tab{flex-direction:column;gap:.25rem;font-size:.78rem;padding:.8rem .4rem}
	.mecb-car{grid-template-columns:1fr;text-align:left}

	/*
	 * One column, so the photo runs the width of the card. At the desktop
	 * height of 74px that makes a slot roughly four times wider than it is
	 * tall, and cover then crops a car photo down to its middle — no wheels,
	 * no roof.
	 *
	 * height:auto lets each photo keep its own shape, so nothing is cropped
	 * and nothing is padded: a wide shot stays wide, a squarer one is simply
	 * a little taller. Forcing one ratio here would crop half the fleet or
	 * frame the other half in bars, because these are whatever the operator
	 * uploaded.
	 *
	 * max-height is the guard against a portrait photo filling the screen;
	 * only then does contain step in and fit it inside.
	 */
	/*
	 * A short, fixed band the photo fills edge to edge.
	 *
	 * cover crops whatever does not fit rather than leaving space at the
	 * sides. object-position keeps the crop just above centre, because a car
	 * photographed in the open has sky or wall above it and road below, and
	 * dropping the horizon a little keeps the vehicle itself in the band.
	 */
	.mecb-car__media{
		background:var(--mecb-mist);
		border-radius:8px;
		overflow:hidden;
	}
	.mecb-car__media img{
		height:140px;
		max-height:none;
		object-fit:cover;
		object-position:center 45%;
		background:transparent;
		border-radius:0;
	}
	.mecb-car__noimg{height:140px}
	.mecb-car__price{align-items:stretch;text-align:left}
	.mecb-car__price .mecb-btn{width:100%}
	.mecb-form,.mecb-checkout__form,.mecb-summary{padding:1.1rem}
	.mecb-actions{padding:1.1rem}
	.mecb-panel[data-panel="1"] .mecb-actions,.mecb-checkout__form .mecb-actions{margin:1.1rem -1.1rem -1.1rem}
	.mecb-steps{gap:.35rem}
}

/* --------------------------------------------------------------------------
   Transport groups.

   These were relying on JavaScript to hide them. If the script does not run,
   all three groups render at once and a plain browser submit puts every field
   from every tab into the URL. Hiding them in CSS as well means the form
   degrades to one visible group instead of three.
   -------------------------------------------------------------------------- */
.mecb-fields[hidden],
.mecb-return[hidden],
.mecb-panel[hidden],
.mecb-app [hidden] { display: none !important; }

.mecb-fields { display: block; }

/* --------------------------------------------------------------------------
   Number fields (passengers, cars needed).

   Typed entry and the browser's own stepper, styled to match the selects
   beside them so the row still reads as one set of controls.
   -------------------------------------------------------------------------- */
.mecb-app input.mecb-number {
	width: 100%;
	-moz-appearance: textfield;
	appearance: textfield;
}
.mecb-app input.mecb-number::-webkit-outer-spin-button,
.mecb-app input.mecb-number::-webkit-inner-spin-button {
	opacity: 1;                 /* keep the stepper visible, Chrome hides it until hover */
	height: 2rem;
	margin-left: .25rem;
}
.mecb-app .mecb-hint {
	display: block;
	margin-top: .3rem;
	font-size: .75rem;
	opacity: .65;
}

/* A completed step doubles as the way back, so it has to look like one. */
.mecb-app .mecb-step.is-clickable { cursor: pointer; }
.mecb-app .mecb-step.is-clickable:hover,
.mecb-app .mecb-step.is-clickable:focus-visible { opacity: .85; text-decoration: underline; }

/* --------------------------------------------------------------------------
   Coupons, deposits and the offer note
   -------------------------------------------------------------------------- */
.mecb-offer{
	display:flex; align-items:center; gap:.75rem;
	margin:0 0 1rem; padding:.85rem 1.1rem;
	background:var(--mecb-ink-deep); color:#fff;
	border:0; border-left:4px solid var(--mecb-brass);
	border-radius:.6rem; font-size:.92rem; font-weight:500; line-height:1.5;
}
.mecb-offer__mark{
	flex:none; width:30px; height:30px; border-radius:50%;
	background:var(--mecb-brass); color:var(--mecb-on-brass);
	font-style:normal; font-weight:800;
	display:grid; place-items:center; font-size:.85rem;
}

.mecb-coupon{display:flex; gap:.5rem; margin-bottom:.5rem}
.mecb-coupon__input{flex:1; min-width:0; text-transform:uppercase}
.mecb-coupon__clear{flex:none}
/* A code that has been accepted reads as settled, and the box holding it goes
   read-only so it cannot drift out of step with the discount on the fare. */
.mecb-coupon.is-applied .mecb-coupon__input{
	background:var(--mecb-mist); font-weight:700; letter-spacing:.06em; cursor:default;
}
.mecb-coupon__msg{margin:0 0 1rem; font-size:.85rem}
.mecb-coupon__msg.is-ok{color:#106b33}
.mecb-coupon__msg.is-bad{color:#8a1f1f}

.mecb-paymode{display:grid; gap:.5rem; margin-bottom:1.25rem}
.mecb-paymode__opt{
	display:flex; gap:.7rem; align-items:flex-start;
	padding:.85rem 1rem; border:1.5px solid rgba(0,0,0,.12); border-radius:.6rem; cursor:pointer;
}
.mecb-paymode__opt:has(input:checked){border-color:var(--mecb-brass); background:rgba(216,153,34,.06)}
.mecb-paymode__opt strong{display:block; font-size:.92rem}
.mecb-paymode__opt small{display:block; font-size:.85rem; opacity:.7}

.mecb-summary__lines li.is-discount span:last-child{color:#106b33; font-weight:700}
.mecb-summary__lines li.is-gift span:first-child{font-style:italic}
.mecb-summary__split{
	margin-top:.75rem; padding-top:.75rem; border-top:1px dashed rgba(0,0,0,.15);
	display:grid; gap:.35rem; font-size:.9rem;
}
.mecb-summary__split div{display:flex; justify-content:space-between; gap:1rem}
.mecb-summary__split .is-later{opacity:.7}

.mecb-done__balance{
	margin:1rem auto; padding:.85rem 1.1rem; max-width:34rem;
	background:rgba(216,153,34,.1); border-radius:.6rem; font-size:.95rem;
}

/* --------------------------------------------------------------------------
   New customer / returning customer tabs
   -------------------------------------------------------------------------- */
.mecb-who{margin:0 0 1.5rem}

.mecb-who__tabs{
	display:grid; grid-template-columns:1fr 1fr; gap:.75rem;
	margin-bottom:1.25rem;
}
.mecb-who__tab{
	display:flex; align-items:center; gap:.8rem; text-align:left; cursor:pointer;
	padding:.9rem 1rem;
	background:#fff; border:1.5px solid rgba(0,0,0,.14); border-radius:.7rem;
	transition:border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.mecb-who__tab:hover{border-color:rgba(216,153,34,.55)}
.mecb-who__tab.is-on{
	border-color:var(--mecb-brass); background:rgba(216,153,34,.07);
	box-shadow:0 0 0 3px rgba(216,153,34,.12);
}
.mecb-who__tab strong{display:block; font-size:.95rem; line-height:1.3}
.mecb-who__tab small{display:block; font-size:.8rem; opacity:.65; line-height:1.35; margin-top:.1rem}

.mecb-who__icon{
	flex:none; width:34px; height:34px; border-radius:50%;
	display:grid; place-items:center; font-style:normal; font-size:1.05rem; font-weight:700;
	background:rgba(0,0,0,.06); color:rgba(0,0,0,.55);
	transition:background .15s ease, color .15s ease;
}
.mecb-who__tab.is-on .mecb-who__icon{background:var(--mecb-brass); color:#fff}

.mecb-who__pane[data-who-pane="return"]{
	padding:1.25rem;
	background:rgba(0,0,0,.025);
	border:1px solid rgba(0,0,0,.1); border-radius:.7rem;
}
.mecb-who__signed{
	margin:0 0 1rem; padding:.75rem 1rem;
	background:rgba(16,107,51,.08); border:1px solid rgba(16,107,51,.25);
	border-radius:.6rem; font-size:.9rem; color:#106b33;
}

.mecb-login__actions{display:flex; align-items:center; gap:1.25rem; flex-wrap:wrap; margin-top:1rem}
.mecb-login__actions a{font-size:.85rem}
.mecb-login__msg{margin:.9rem 0 0; font-size:.85rem}
.mecb-login__msg.is-ok{color:#106b33}
.mecb-login__msg.is-bad{color:#8a1f1f}

@media (max-width:560px){
	.mecb-who__tabs{grid-template-columns:1fr}
	.mecb-who__tab small{display:none}
}

/* --------------------------------------------------------------------------
   Signed in already
   -------------------------------------------------------------------------- */
.mecb-signed{
	display:flex; align-items:center; gap:.85rem; flex-wrap:wrap;
	margin:0 0 1.5rem; padding:.85rem 1.1rem;
	background:rgba(16,107,51,.08); border:1px solid rgba(16,107,51,.25); border-radius:.6rem;
}
.mecb-signed__mark{
	flex:none; width:26px; height:26px; border-radius:50%;
	background:#106b33; color:#fff; display:grid; place-items:center; font-size:.8rem;
}
.mecb-signed strong{display:block; font-size:.92rem}
.mecb-signed small{display:block; opacity:.7; font-size:.82rem}
.mecb-signed__out{margin-left:auto; font-size:.85rem}

/* --------------------------------------------------------------------------
   Review step
   -------------------------------------------------------------------------- */
/* The outer box is gone: each section carries its own frame now, so a return
   trip reads as customer / outbound / return rather than one long list. */
.mecb-review{margin:1rem 0 1.75rem}

.mecb-review__group{
	border:1px solid var(--mecb-line); border-radius:.7rem; overflow:hidden;
	margin-bottom:1rem; background:#fff;
}
.mecb-review__group:last-child{margin-bottom:0}

.mecb-review__title{
	margin:0; padding:.7rem 1.1rem;
	background:var(--mecb-ink); color:#fff;
	font-size:.78rem; font-weight:800; letter-spacing:.09em; text-transform:uppercase;
}
.mecb-review__list{margin:0}
.mecb-review__row{
	display:flex; gap:1rem; padding:.7rem 1.1rem;
	border-bottom:1px solid rgba(0,0,0,.07);
}
.mecb-review__row:last-child{border-bottom:0}
.mecb-review__row:nth-child(even){background:rgba(0,0,0,.025)}
.mecb-review__row dt{
	flex:0 0 34%; margin:0; font-size:.82rem; font-weight:700;
	text-transform:uppercase; letter-spacing:.03em; opacity:.6;
}
.mecb-review__row dd{margin:0; flex:1; font-size:.93rem; overflow-wrap:anywhere}
@media (max-width:520px){
	.mecb-review__row{flex-direction:column; gap:.15rem}
	.mecb-review__row dt{flex:none}
}

/* --------------------------------------------------------------------------
   Step indicator on small screens

   Five full-width pills pushed the form itself below the fold. On a phone the
   steps collapse to one row of numbered dots with a connecting rule, and only
   the step you are on carries its label.

   The label is a bare text node next to the <span>, so it cannot be targeted
   directly. font-size:0 on the item hides it while the span keeps its own
   size; the active item then restores a real font-size to reveal just that
   one label.
   -------------------------------------------------------------------------- */
@media (max-width:640px){

	.mecb-steps{
		display:flex; flex-wrap:nowrap; align-items:center; gap:0;
		margin-bottom:1.25rem;
	}

	.mecb-step{
		flex:0 0 auto;
		gap:0;
		padding:0;
		background:none;
		border:0;
		border-radius:0;
		font-size:0;                 /* hides the label text node */
		position:relative;
		min-width:0;
	}

	/* the connecting rule between dots */
	.mecb-step:not(:last-child){flex:1 1 auto}
	.mecb-step:not(:last-child)::after{
		content:""; display:block; height:2px; flex:1 1 auto;
		margin:0 .4rem; background:var(--mecb-line); border-radius:2px;
	}
	.mecb-step.is-done::after{background:var(--mecb-brass)}

	.mecb-step span{
		width:26px; height:26px; font-size:.78rem; font-weight:700;
		background:#fff; border:1.5px solid var(--mecb-line); color:var(--mecb-slate);
	}

	.mecb-step.is-done span{
		background:var(--mecb-brass); border-color:var(--mecb-brass); color:#fff;
	}

	.mecb-step.is-active{
		/* Must still grow, or the connecting rule inside it has no room and
		   the line after the current step disappears. */
		flex:1 1 auto;
		font-size:.82rem; font-weight:700; color:var(--mecb-ink);
		gap:.45rem;
		background:none;
		white-space:nowrap;
	}
	.mecb-step.is-active span{
		background:var(--mecb-ink); border-color:var(--mecb-ink); color:#fff;
	}

	/* The active label needs room, so its neighbours give up theirs. */
	.mecb-step.is-active + .mecb-step::after{margin-left:.5rem}

	/* Underlining a dot on tap looks like a mistake; keep the cue subtle. */
	.mecb-app .mecb-step.is-clickable:hover,
	.mecb-app .mecb-step.is-clickable:focus-visible{text-decoration:none; opacity:.7}
}

/* Very narrow: drop the active label too and let the dots speak. */
@media (max-width:360px){
	.mecb-step.is-active{font-size:0}
	.mecb-step.is-active + .mecb-step::after{margin-left:.4rem}
}

/* A vehicle that takes no baby seat states it, greyed so it reads as an
   absence rather than a feature. */
.mecb-car__specs li.is-off{opacity:.55}

/* ==========================================================================
   CUSTOMER DASHBOARD
   ========================================================================== */
.mecb-dash{
	display:grid;
	grid-template-columns:250px minmax(0,1fr);
	gap:1.75rem;
	align-items:start;
}

/* ---- Sidebar ---- */
.mecb-dash__side{
	position:sticky; top:1.5rem;
	background:#fff; border:1px solid var(--mecb-line);
	border-radius:var(--mecb-radius); overflow:hidden;
	box-shadow:var(--mecb-shadow);
}
.mecb-dash__me{
	display:flex; align-items:center; gap:.75rem;
	padding:1.25rem 1.1rem;
	background:var(--mecb-ink); color:#fff;
}
.mecb-dash__avatar{
	flex:none; width:42px; height:42px; border-radius:50%;
	background:var(--mecb-brass); color:#fff;
	display:grid; place-items:center; font-size:1.1rem; font-weight:700;
}
.mecb-dash__me strong{display:block; font-size:.95rem; line-height:1.3}
.mecb-dash__me small{
	display:block; font-size:.78rem; color:rgba(255,255,255,.7);
	overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:150px;
}

.mecb-dash__nav{display:flex; flex-direction:column; padding:.5rem}
.mecb-dash__link{
	display:flex; align-items:center; gap:.7rem;
	padding:.75rem .8rem; border-radius:.5rem;
	color:var(--mecb-slate); text-decoration:none;
	font-size:.92rem; font-weight:600;
	transition:background .15s ease, color .15s ease;
}
.mecb-dash__link i{font-style:normal; font-size:1rem; opacity:.75}
.mecb-dash__link:hover{background:var(--mecb-mist); color:var(--mecb-ink)}
.mecb-dash__link.is-on{background:var(--mecb-brass-wash); color:var(--mecb-ink)}
.mecb-dash__link.is-on i{opacity:1}
.mecb-dash__count{
	margin-left:auto; font-style:normal; font-size:.72rem; font-weight:700;
	min-width:20px; height:20px; padding:0 .35rem; border-radius:999px;
	background:var(--mecb-brass); color:#fff; display:grid; place-items:center;
}

.mecb-dash__side-foot{
	padding:1rem 1.1rem 1.25rem;
	border-top:1px solid var(--mecb-line);
	display:flex; flex-direction:column; gap:.6rem; align-items:stretch; text-align:center;
}
.mecb-dash__out{font-size:.85rem; color:var(--mecb-slate)}

/* ---- Main column ---- */
.mecb-dash__head{margin-bottom:1.25rem}
.mecb-dash__head h2{margin:0 0 .2rem; font-size:1.4rem}
.mecb-dash__head .mecb-note{margin:0}

.mecb-dash__panel{
	background:#fff; border:1px solid var(--mecb-line);
	border-radius:var(--mecb-radius); padding:1.5rem;
	box-shadow:var(--mecb-shadow);
}
.mecb-dash__actions{margin:1.5rem 0 0; padding-top:1.25rem; border-top:1px solid var(--mecb-line)}

/* A read-only field should look settled, not broken. */
.mecb-dash__panel input[readonly]{
	background:var(--mecb-mist); color:var(--mecb-slate);
	border-style:dashed; cursor:default;
}
.mecb-dash__panel input[readonly]:focus{box-shadow:none; border-color:var(--mecb-line)}
.mecb-field__note{display:block; margin-top:.35rem; font-size:.78rem; opacity:.7; line-height:1.45}

/* ---- Flash messages ---- */
.mecb-flash{
	margin:0 0 1.25rem; padding:.9rem 1.1rem;
	border-radius:var(--mecb-radius); font-size:.92rem;
}
.mecb-flash.is-ok{background:#E6F4EC; border:1px solid #B7DCC6; color:#1E7A47}
.mecb-flash.is-bad{background:#FDECEC; border:1px solid #F3C0C0; color:#8B2020}

@media (max-width:820px){
	.mecb-dash{grid-template-columns:1fr; gap:1.25rem}
	.mecb-dash__side{position:static}
	.mecb-dash__nav{flex-direction:row; overflow-x:auto; padding:.5rem; gap:.25rem}
	.mecb-dash__link{flex:0 0 auto; white-space:nowrap}
	.mecb-dash__me small{max-width:none}
	.mecb-dash__side-foot{flex-direction:row; align-items:center; justify-content:space-between}
	.mecb-dash__side-foot .mecb-btn{flex:1}
}

/* ==========================================================================
   SIGN-IN CARD
   ========================================================================== */
.mecb-signin{
	max-width:420px; margin:2rem auto;
	background:#fff; border:1px solid var(--mecb-line);
	border-radius:var(--mecb-radius); box-shadow:var(--mecb-shadow);
	padding:2rem 1.85rem 1.75rem;
}

.mecb-signin__head{text-align:center; margin-bottom:1.5rem}
.mecb-signin__icon{
	display:grid; place-items:center;
	width:56px; height:56px; margin:0 auto .9rem;
	border-radius:50%; background:var(--mecb-brass-wash);
	font-size:1.5rem; line-height:1;
}
.mecb-signin__head h2{margin:0 0 .4rem; font-size:1.35rem}
.mecb-signin__head p{margin:0; font-size:.88rem; color:var(--mecb-slate); line-height:1.55}

.mecb-signin__form .mecb-field{margin-bottom:1rem}
.mecb-signin__form label{
	display:block; margin-bottom:.35rem;
	font-size:.82rem; font-weight:700; color:var(--mecb-ink);
}

/* Field with a leading icon. The icon sits inside the box rather than beside
   it, so the input keeps a single clean outline when focused. */
.mecb-input{position:relative; display:block}
.mecb-input__icon{
	position:absolute; left:.85rem; top:50%; transform:translateY(-50%);
	font-size:.95rem; opacity:.45; pointer-events:none; line-height:1;
}
.mecb-input input{
	width:100%; padding:.75rem .9rem .75rem 2.6rem;
	border:1.5px solid var(--mecb-line); border-radius:.55rem;
	font-size:16px;              /* 16px stops iOS zooming on focus */
	background:#fff;
}
.mecb-input input:focus{
	outline:none; border-color:var(--mecb-brass);
	box-shadow:0 0 0 3px rgba(216,153,34,.15);
}
.mecb-input input:focus + .mecb-input__icon,
.mecb-input:focus-within .mecb-input__icon{opacity:.8}

.mecb-signin__row{
	display:flex; align-items:center; justify-content:space-between;
	gap:1rem; flex-wrap:wrap; margin:.35rem 0 1.25rem; font-size:.85rem;
}
.mecb-check{display:inline-flex; align-items:center; gap:.45rem; margin:0; font-weight:500!important}
.mecb-check input{width:auto; margin:0}

.mecb-signin__submit{width:100%; justify-content:center; padding-block:.8rem}

.mecb-signin__foot{
	margin:1.5rem 0 0; padding-top:1.25rem;
	border-top:1px solid var(--mecb-line);
	text-align:center; font-size:.85rem; color:var(--mecb-slate); line-height:1.6;
}

@media (max-width:480px){
	.mecb-signin{margin:1rem auto; padding:1.5rem 1.25rem}
}

/* All three dashboard panels are in the page; only one is shown. Themes
   sometimes override [hidden], so this is stated rather than assumed. */
.mecb-dash [hidden]{display:none!important}
.mecb-dash__head h2:focus{outline:none}

/* Regular price beside a discounted line, and the tax breakdown. */
.mecb-was{opacity:.55; margin-right:.35rem; font-weight:400}
.mecb-summary__lines li.is-sale span:last-child{white-space:nowrap}

.mecb-summary__sub{
	margin-top:.6rem; padding-top:.6rem;
	border-top:1px dashed rgba(0,0,0,.15);
	display:grid; gap:.3rem; font-size:.9rem;
}
.mecb-summary__sub div{display:flex; justify-content:space-between; gap:1rem}
.mecb-summary__sub span:last-child{white-space:nowrap}

/* --------------------------------------------------------------------------
   Tip chooser
   -------------------------------------------------------------------------- */
.mecb-tip{display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:.75rem}
.mecb-tip__btn{
	flex:1 1 auto; min-width:72px;
	padding:.6rem .9rem; cursor:pointer;
	background:#fff; border:1.5px solid rgba(0,0,0,.14); border-radius:.55rem;
	font-size:.92rem; font-weight:600;
	transition:border-color .15s ease, background .15s ease;
}
.mecb-tip__btn:hover{border-color:rgba(216,153,34,.6)}
.mecb-tip__btn.is-on{border-color:var(--mecb-brass); background:rgba(216,153,34,.1)}
.mecb-tip__custom{margin-bottom:.75rem}
.mecb-tip__custom input{max-width:180px}
.mecb-summary__lines li.is-tip span:last-child{font-weight:600}

/* --------------------------------------------------------------------------
   Advertised discount codes
   -------------------------------------------------------------------------- */
.mecb-codes{display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:.75rem}
.mecb-codes__chip{
	display:flex; flex-direction:column; gap:.1rem; align-items:flex-start;
	padding:.55rem .9rem; cursor:pointer; text-align:left;
	background:rgba(216,153,34,.08);
	border:1.5px dashed var(--mecb-brass); border-radius:.5rem;
	transition:background .15s ease, border-style .15s ease;
}
.mecb-codes__chip:hover,
.mecb-codes__chip.is-on{background:rgba(216,153,34,.18); border-style:solid}
.mecb-codes__chip strong{
	font-size:.95rem; font-weight:800; letter-spacing:.06em;
	font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
}
.mecb-codes__chip small{font-size:.78rem; opacity:.75}

/* The typed code should read as a code, not as prose. */
.mecb-coupon__input{
	text-transform:uppercase; letter-spacing:.08em; font-weight:700;
	font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
}
.mecb-btn[disabled]{opacity:.45; cursor:not-allowed}

/* --------------------------------------------------------------------------
   The "no card details needed" reassurance
   -------------------------------------------------------------------------- */
.mecb-assure{
	display:flex; align-items:center; gap:.6rem; margin:0;
	padding:.7rem 1rem;
	background:rgba(16,107,51,.08);
	border:1px solid rgba(16,107,51,.25); border-radius:.55rem;
	font-size:.88rem; color:#106b33; font-weight:600; line-height:1.5;
}
.mecb-assure__mark{flex:none; font-size:1rem; line-height:1}
@media (max-width:640px){
	.mecb-assure{font-size:.84rem}
}

/* --------------------------------------------------------------------------
   Extra stops
   -------------------------------------------------------------------------- */
.mecb-stops-wrap{margin-top:-.35rem}
.mecb-stops{display:grid; gap:.5rem}
.mecb-stop{display:flex; align-items:center; gap:.6rem}
.mecb-stop__n{
	flex:none; width:26px; height:26px; border-radius:50%;
	background:var(--mecb-brass); color:#fff;
	display:grid; place-items:center; font-size:.78rem; font-weight:700;
}
.mecb-stop__input{flex:1 1 auto; min-width:0}
.mecb-stop__x{
	flex:none; width:32px; height:32px; border-radius:50%; cursor:pointer;
	border:1.5px solid rgba(0,0,0,.14); background:#fff;
	font-size:1.2rem; line-height:1; color:var(--mecb-slate);
	display:grid; place-items:center;
}
.mecb-stop__x:hover{border-color:#8a1f1f; color:#8a1f1f}

.mecb-stops__add{
	display:inline-flex; align-items:center; gap:.45rem; margin-top:.6rem;
	padding:.5rem .95rem; cursor:pointer;
	background:#fff; border:1.5px dashed var(--mecb-brass); border-radius:.55rem;
	font-size:.88rem; font-weight:600; color:var(--mecb-brass);
}
.mecb-stops__add:hover{background:rgba(216,153,34,.08)}
.mecb-stops__add span{font-size:1.05rem; line-height:1}
.mecb-stops__note{display:block; margin-top:.45rem; font-size:.8rem; opacity:.7}

/* --------------------------------------------------------------------------
   Cancellation
   -------------------------------------------------------------------------- */
.mecb-cancel summary{list-style:none; cursor:pointer; display:inline-block}
.mecb-cancel summary::-webkit-details-marker{display:none}
.mecb-cancel[open] summary{margin-bottom:.85rem}

.mecb-cancel__form{
	margin-top:.5rem; padding:1.1rem 1.25rem;
	background:rgba(0,0,0,.03); border:1px solid rgba(0,0,0,.1); border-radius:.6rem;
	display:grid; gap:.4rem; max-width:460px;
}
.mecb-cancel__sum{
	margin:0 0 .5rem; padding:.7rem .9rem;
	background:#fff; border-left:3px solid var(--mecb-brass); border-radius:.4rem;
	font-size:.9rem; line-height:1.55;
}
.mecb-cancel__form label{font-size:.82rem; font-weight:700; margin-top:.3rem}
.mecb-cancel__form button{margin-top:.75rem}

.mecb-cancel-note{
	margin:0 0 .25rem; padding:.75rem 1rem;
	border-radius:.5rem; font-size:.88rem; line-height:1.55;
}
.mecb-cancel-note strong{display:block}
.mecb-cancel-note.is-pending{background:#FDF0D9; border:1px solid #EBD3A5; color:#8A5B06}
.mecb-cancel-note.is-done{background:#E6F4EC; border:1px solid #B7DCC6; color:#1E7A47}

/* --------------------------------------------------------------------------
   Balance still to pay, on a booking card in the account area

   The amount and the button sit on one row on a desktop and stack on a
   phone, where a full-width button is easier to hit than one floated beside
   a figure.
   -------------------------------------------------------------------------- */
.mecb-balance{
	margin:0 1.25rem .9rem; padding:.85rem 1rem;
	background:var(--mecb-brass-wash); border:1px solid #EBD3A5; border-radius:.5rem;
	display:flex; flex-wrap:wrap; align-items:center; gap:.65rem 1rem;
}
.mecb-balance__sum{flex:1 1 8rem; min-width:8rem}
.mecb-balance__sum span{
	display:block; font-size:.7rem; font-weight:700;
	letter-spacing:.09em; text-transform:uppercase; color:var(--mecb-brass-ink);
}
.mecb-balance__sum strong{display:block; font-size:1.35rem; line-height:1.25; color:var(--mecb-ink-deep)}
.mecb-balance .mecb-btn{flex:0 0 auto}
.mecb-balance .mecb-note{flex:1 1 100%}

@media (max-width:30rem){
	.mecb-balance{display:block}
	.mecb-balance__sum{margin-bottom:.6rem}
	.mecb-balance .mecb-btn{display:block; width:100%; text-align:center}
	.mecb-balance .mecb-note{margin-top:.6rem}
}

/* --------------------------------------------------------------------------
   Fixed-fare transfer: the two ends of the journey, and the reverse button
   -------------------------------------------------------------------------- */
.mecb-swapper{margin-bottom:.25rem}

/* Its own grid rather than the shared 12-column one.
   The two fields span 6 columns each, which fills the row — the swap button
   was a third item with nowhere to go, so the destination wrapped underneath.
   Three explicit tracks keep all three on one line whatever the widths. */
.mecb-swapper__row{
	display:grid; grid-template-columns:1fr auto 1fr;
	gap:.9rem; align-items:end;
}
.mecb-swapper__row > .mecb-field{grid-column:auto; min-width:0}

/* Reversing swaps where the two fields sit. Their lists cannot trade places —
   one holds airports, the other suburbs — so the fields themselves move. */
.mecb-swapper__row [data-leg="a"]{order:1}
.mecb-swapper__row .mecb-swap{order:2}
.mecb-swapper__row [data-leg="b"]{order:3}
.mecb-swapper__row.is-reversed [data-leg="a"]{order:3}
.mecb-swapper__row.is-reversed [data-leg="b"]{order:1}

.mecb-swap{
	order:2; align-self:end; margin-bottom:.35rem;
	width:42px; height:42px; border-radius:50%; cursor:pointer;
	background:var(--mecb-brass-wash); border:1.5px solid var(--mecb-brass);
	color:var(--mecb-brass-ink); font-size:1.15rem; line-height:1;
	display:grid; place-items:center;
	transition:background .15s ease, transform .2s ease;
}
.mecb-swap:hover{background:var(--mecb-brass); color:var(--mecb-on-brass)}
.mecb-swap[aria-pressed="true"] span{display:block; transform:rotate(180deg)}

@media (max-width:640px){
	/* Stacked on a phone, so the button sits between the two rather than
	   beside them and the arrows point the way the eye travels. */
	.mecb-swapper__row{grid-template-columns:1fr; gap:.5rem}
	.mecb-swap{justify-self:center; margin:.1rem 0 .35rem; transform:rotate(90deg)}
	.mecb-swap[aria-pressed="true"] span{transform:rotate(180deg)}
}

/* --------------------------------------------------------------------------
   Discount code, on a dark panel

   Contrast against #4A0F0B, measured rather than guessed:
     white          15.4:1
     gold #D89922    6.2:1
     gold #E8B04A    7.9:1
   The input stays light — typing into a dark field is harder to proofread,
   and a code is exactly the thing people check before pressing Apply.
   -------------------------------------------------------------------------- */
.mecb-promo{
	margin:0 0 1.5rem; padding:1.35rem 1.4rem;
	background:var(--mecb-ink-deep); border-radius:.8rem;
	box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
}
.mecb-promo .mecb-h3{color:#fff; margin-top:0}
.mecb-promo .mecb-h3::after{background:var(--mecb-brass)}

.mecb-promo .mecb-codes__chip{
	background:rgba(255,255,255,.06);
	border-color:var(--mecb-brass-lift);
}
.mecb-promo .mecb-codes__chip:hover,
.mecb-promo .mecb-codes__chip.is-on{background:rgba(232,176,74,.2); border-style:solid}
.mecb-promo .mecb-codes__chip strong{color:var(--mecb-brass-lift)}
.mecb-promo .mecb-codes__chip small{color:rgba(255,255,255,.75)}

.mecb-promo .mecb-coupon__input{
	background:#fff; color:var(--mecb-ink); border-color:transparent;
}
.mecb-promo .mecb-coupon__input::placeholder{color:#9b8f8b; letter-spacing:.04em}
.mecb-promo .mecb-coupon__input:focus{
	border-color:var(--mecb-brass); box-shadow:0 0 0 3px rgba(216,153,34,.35);
}

.mecb-promo .mecb-btn--ghost{
	background:var(--mecb-brass); border-color:var(--mecb-brass); color:var(--mecb-on-brass); font-weight:700;
}
.mecb-promo .mecb-btn--ghost:hover:not([disabled]){background:var(--mecb-brass-lift); border-color:var(--mecb-brass-lift)}
.mecb-promo .mecb-btn[disabled]{opacity:.4}

/* Remove is the quieter of the two: outlined against the panel rather than
   filled, so it never competes with Apply for the eye. Brass-lift measures
   7.9:1 on the deep ink behind it. */
.mecb-promo .mecb-coupon__clear,
.mecb-promo .mecb-coupon__clear:hover:not([disabled]){
	background:transparent; color:var(--mecb-brass-lift);
	border-color:rgba(232,176,74,.55); font-weight:600;
}
.mecb-promo .mecb-coupon__clear:hover:not([disabled]){
	background:rgba(232,176,74,.16); border-color:var(--mecb-brass-lift);
}
.mecb-promo .mecb-coupon.is-applied .mecb-coupon__input{
	background:#fff; color:var(--mecb-ink);
	box-shadow:0 0 0 2px rgba(232,176,74,.55);
}

/* The verdict has to read on the dark panel, so the light-background
   greens and reds are replaced rather than inherited. */
.mecb-promo .mecb-coupon__msg.is-ok{color:#7FD79F}
.mecb-promo .mecb-coupon__msg.is-bad{color:#FFAFA8}

@media (max-width:560px){
	.mecb-promo{padding:1.1rem}
}

/* --------------------------------------------------------------------------
   Payment method chooser
   -------------------------------------------------------------------------- */
.mecb-methods{display:grid; gap:.5rem; margin-bottom:1.25rem}
.mecb-method{
	display:flex; gap:.75rem; align-items:flex-start; cursor:pointer;
	padding:.85rem 1rem;
	background:#fff; border:1.5px solid rgba(0,0,0,.14); border-radius:.6rem;
	transition:border-color .15s ease, background .15s ease;
}
.mecb-method:hover{border-color:var(--mecb-brass)}
.mecb-method.is-on{border-color:var(--mecb-brass); background:var(--mecb-brass-wash)}
.mecb-method input{margin-top:.2rem; flex:none}
/* Ink, not brass: a 1.6px stroke in brass measures 2.5:1 on white, under the
   3:1 that WCAG asks of a graphic carrying meaning. Ink reaches 9.9:1 on the
   plain row and 8.8:1 on the wash the chosen row gets. */
.mecb-method__icon{
	flex:none; width:24px; height:24px; margin-top:.12rem;
	color:var(--mecb-ink);
}
.mecb-method.is-on .mecb-method__icon{color:var(--mecb-ink)}
.mecb-method strong{display:block; font-size:.95rem; line-height:1.35}
.mecb-method small{display:block; font-size:.83rem; opacity:.72; line-height:1.5; margin-top:.1rem}

.mecb-offline{
	margin-bottom:1.25rem; padding:1.1rem 1.25rem;
	background:var(--mecb-mist); border:1px solid var(--mecb-line); border-radius:.6rem;
}
.mecb-offline h4{margin:0 0 .6rem; font-size:.95rem}
.mecb-offline .mecb-note{margin:0}

.mecb-bank{margin:0 0 .75rem}
.mecb-bank div{display:flex; gap:1rem; padding:.35rem 0; border-bottom:1px dashed var(--mecb-line)}
.mecb-bank div:last-child{border-bottom:0}
.mecb-bank dt{flex:0 0 40%; margin:0; font-size:.83rem; opacity:.7}
.mecb-bank dd{margin:0; font-weight:700; font-size:.92rem; overflow-wrap:anywhere}

/* Repeated on the confirmation screen, where people screenshot it. */
.mecb-done__bank{
	margin:1rem auto; padding:1.1rem 1.25rem; max-width:34rem; text-align:left;
	background:var(--mecb-mist); border:1px solid var(--mecb-line); border-radius:.6rem;
}
.mecb-done__bank > strong{display:block; margin-bottom:.5rem}
.mecb-done__bank p{margin:.25rem 0; font-size:.9rem}

/* --------------------------------------------------------------------------
   Trip card — the results panel for journeys with no map
   -------------------------------------------------------------------------- */
.mecb-trip{padding:1.5rem 1.4rem; display:flex; flex-direction:column; gap:1.25rem}
.mecb-trip[hidden]{display:none}

/* Date reads as a calendar tear-off, which is quicker to check than a line
   of prose — this is the fact people re-read before they commit. */
.mecb-trip__when{display:flex; align-items:center; gap:.9rem}
.mecb-trip__date{
	flex:none; width:62px; border-radius:.6rem; overflow:hidden; text-align:center;
	border:1px solid var(--mecb-line); background:#fff; line-height:1;
}
.mecb-trip__date b{
	display:block; padding:.4rem 0 .35rem;
	font-size:1.6rem; font-weight:800; color:var(--mecb-ink);
}
.mecb-trip__date span{
	display:block; padding:.22rem 0;
	background:var(--mecb-ink); color:#fff;
	font-size:.68rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
}
.mecb-trip__clock strong{display:block; font-size:1rem}
.mecb-trip__clock span{display:block; font-size:1.35rem; font-weight:700; color:var(--mecb-brass-ink)}

.mecb-trip__legs{list-style:none; margin:0; padding:0}
.mecb-trip__legs li{display:flex; gap:.75rem; align-items:flex-start; position:relative; padding-bottom:1rem}
.mecb-trip__legs li:last-child{padding-bottom:0}

/* The line joining A to B, drawn from the marker rather than guessed at. */
.mecb-trip__legs li:not(:last-child)::before{
	content:""; position:absolute; left:11px; top:26px; bottom:4px;
	width:2px; background:var(--mecb-line);
}
.mecb-trip__legs span{
	flex:none; width:24px; height:24px; border-radius:50%; z-index:1;
	background:var(--mecb-brass); color:var(--mecb-on-brass);
	display:grid; place-items:center; font-size:.72rem; font-weight:800;
}
.mecb-trip__legs p{margin:.15rem 0 0; font-size:.92rem; line-height:1.45}

.mecb-trip__facts{
	list-style:none; margin:0; padding:.9rem 0 0; border-top:1px solid var(--mecb-line);
	display:flex; flex-wrap:wrap; gap:.4rem .9rem;
}
.mecb-trip__facts li{font-size:.86rem; color:var(--mecb-slate)}

.mecb-trip__note{
	margin:0; padding:.75rem .9rem;
	background:var(--mecb-brass-wash); border-radius:.5rem;
	font-size:.84rem; line-height:1.5; color:var(--mecb-on-brass);
}

@media (max-width:860px){
	.mecb-trip{padding:1.25rem}
}

/* How the booking was paid, on the confirmation screen. */
.mecb-done__method{margin:0 auto .9rem;font-size:.92rem;color:var(--mecb-slate)}