.mb-portal {
	max-width: 640px !important;
	margin: 0 auto !important;
	/* Inherit the theme's body font so the portal reads as part of the site;
	   the stack is only a fallback for pages that set none. */
	font-family: inherit !important;
	color: var(--mb-text, #0A1330) !important;
}

.mb-portal h2, .mb-portal h3 {
	font-family: inherit !important;
	color: var(--mb-text, #0A1330) !important;
	letter-spacing: -0.01em !important;
	font-weight: 700 !important;
	line-height: 1.3 !important;
	letter-spacing: -0.01em !important;
	text-transform: none !important;
	text-shadow: none !important;
	margin: 0 0 8px !important;
	padding: 0 !important;
	border: none !important;
}

.mb-portal h2 { font-size: 20px !important; }
.mb-portal h3 { font-size: 16px !important; }

/* Zero-specificity resets (see booking-widget.css for the control set):
   neutralise theme globals for text elements without out-ranking the
   component rules below. */
:where(.mb-portal) :where(p) {
	margin: 0 0 10px !important;
	font-size: 14px !important;
	line-height: 1.5 !important;
	letter-spacing: normal !important;
	text-transform: none !important;
}

:where(.mb-portal, .mb-widget, .mb-modal) :where(label) {
	font-size: 13px !important;
	font-weight: 600 !important;
	line-height: 1.4 !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	color: var(--mb-text, #0A1330) !important;
	margin: 0 !important;
}

:where(.mb-portal, .mb-widget, .mb-modal) :where(a) {
	color: var(--mb-primary, #0B1A4D) !important;
	text-decoration: none !important;
	text-transform: none !important;
	letter-spacing: normal !important;
}

:where(.mb-portal, .mb-widget, .mb-modal) :where(ul, ol) {
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

/* The booking widget's own "My Account / Log In" link is redundant when the
   widget is embedded inside a portal the user is already logged into. */
.mb-customer-dashboard .mb-account-row,
.mb-admin-dashboard .mb-account-row {
	display: none !important;
}

.mb-portal-card {
	border: 1px solid var(--mb-border, #E3E6F0) !important;
	background: var(--mb-bg, #fff) !important;
	border-radius: 12px !important;
	padding: 16px 18px !important;
	margin-bottom: 12px !important;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03) !important;
}

.mb-portal-card .button {
	margin-top: 8px !important;
}

.mb-portal-gate {
	max-width: 480px !important;
	width: 100% !important;
	padding: 32px !important;
	background: var(--mb-bg, #fff) !important;
	border: 1px solid var(--mb-border, #E3E6F0) !important;
	border-radius: 14px !important;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06) !important;
}

.mb-portal-gate h2 {
	margin-top: 0 !important;
}

.mb-portal-tab-panel[hidden] {
	display: none !important;
}

.mb-portal-signup-form label {
	display: block !important;
	font-weight: 600 !important;
	font-size: 13px !important;
	margin: 10px 0 4px !important;
}

.mb-portal-signup-form label:first-of-type {
	margin-top: 0 !important;
}

.mb-portal-gate .mb-input {
	margin-bottom: 0 !important;
}

/* wp_login_form()'s default markup (unstyled <p> wrappers + label/input) */
.mb-portal-gate form p {
	margin: 10px 0 !important;
}

.mb-portal-gate form label {
	display: block !important;
	font-weight: 600 !important;
	font-size: 13px !important;
	margin-bottom: 4px !important;
}

.mb-portal-gate form input[type="text"],
.mb-portal-gate form input[type="email"],
.mb-portal-gate form input[type="password"] {
	width: 100% !important;
	padding: 10px 12px !important;
	border: 1px solid var(--mb-border, #E3E6F0) !important;
	border-radius: 8px !important;
	font-size: 14px !important;
}

.mb-portal-gate form input[type="submit"] {
	width: 100% !important;
	padding: 12px !important;
	border: none !important;
	border-radius: 8px !important;
	background: var(--mb-primary, #0B1A4D) !important;
	color: #fff !important;
	font-weight: 700 !important;
	font-size: 14px !important;
	cursor: pointer !important;
	margin-top: 6px !important;
}

.mb-portal-gate form input[type="submit"]:hover {
	background: var(--mb-primary-dark, #071230) !important;
}

.mb-portal-gate form input[type="checkbox"] {
	width: auto !important;
	margin-right: 6px !important;
}

/* -------- Buttons used inside the customer/driver portals --------
   These use wp-admin's class names (.button / .button-primary) so the same
   section markup can render in wp-admin too, but wp-admin's stylesheet is
   never loaded on the public site, so they need their own definition here.
   Matches the .mercy-ui system in admin-portal.css. */

.mb-portal .button,
.mb-portal a.button {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 6px !important;
	min-height: 38px !important;
	padding: 0 16px !important;
	border: 1px solid var(--mb-border, #E3E6F0) !important;
	border-radius: 8px !important;
	background: var(--mb-bg, #fff) !important;
	color: var(--mb-text, #0A1330) !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	cursor: pointer !important;
	width: auto !important;
}

.mb-portal .button:hover {
	background: var(--mb-bg-soft, #F6F7FB) !important;
	border-color: var(--mb-primary, #0B1A4D) !important;
	color: var(--mb-primary, #0B1A4D) !important;
}

.mb-portal .button:focus-visible {
	outline: none !important;
	box-shadow: 0 0 0 3px rgba(33, 62, 250, 0.22) !important;
}

.mb-portal .button-primary {
	background: var(--mb-primary, #0B1A4D) !important;
	border-color: var(--mb-primary, #0B1A4D) !important;
	color: #fff !important;
}

.mb-portal .button-primary:hover {
	background: var(--mb-primary-dark, #071230) !important;
	border-color: var(--mb-primary-dark, #071230) !important;
	color: #fff !important;
}

.mb-portal .button-small {
	min-height: 30px !important;
	padding: 0 11px !important;
	font-size: 12px !important;
	border-radius: 6px !important;
}

.mb-portal .button:disabled {
	opacity: .55 !important;
	cursor: not-allowed !important;
}

.mb-portal .mb-input {
	display: block !important;
	width: 100% !important;
	min-height: 40px !important;
	padding: 0 12px !important;
	border: 1px solid var(--mb-border, #E3E6F0) !important;
	border-radius: 8px !important;
	background: var(--mb-bg, #fff) !important;
	font-size: 14px !important;
	color: var(--mb-text, #0A1330) !important;
	margin-bottom: 8px !important;
}

.mb-portal textarea.mb-input {
	min-height: 84px !important;
	padding: 10px 12px !important;
	line-height: 1.5 !important;
	resize: vertical !important;
}

.mb-portal .mb-input:focus {
	outline: none !important;
	border-color: var(--mb-primary, #0B1A4D) !important;
	box-shadow: 0 0 0 3px rgba(33, 62, 250, 0.15) !important;
}

.mb-portal table.widefat {
	width: 100% !important;
	border-collapse: separate !important;
	border-spacing: 0 !important;
	border: 1px solid var(--mb-border, #E3E6F0) !important;
	border-radius: 10px !important;
	overflow: hidden !important;
	background: var(--mb-bg, #fff) !important;
	margin: 0 0 16px !important;
}

.mb-portal table.widefat th,
.mb-portal table.widefat td {
	padding: 10px 12px !important;
	text-align: left !important;
	font-size: 13px !important;
	border: none !important;
	border-bottom: 1px solid var(--mb-border, #E3E6F0) !important;
	background: transparent !important;
	vertical-align: top !important;
}

.mb-portal table.widefat thead th {
	background: var(--mb-bg-soft, #F6F7FB) !important;
	color: var(--mb-muted, #5B6478) !important;
	font-size: 11px !important;
	font-weight: 700 !important;
	letter-spacing: .06em !important;
	text-transform: uppercase !important;
}

.mb-portal table.widefat tbody tr:last-child td {
	border-bottom: none !important;
}

.mb-portal .mercy-flag {
	display: inline-flex !important;
	align-items: center !important;
	font-size: 11px !important;
	font-weight: 700 !important;
	line-height: 1 !important;
	letter-spacing: .02em !important;
	text-transform: uppercase !important;
	padding: 5px 9px !important;
	border-radius: 999px !important;
	background: #EEF0EF !important;
	color: var(--mb-muted, #5B6478) !important;
}

.mb-portal .mercy-flag-mod { background: #FFF3D6 !important; color: #8A5A00 !important; }
.mb-portal .mercy-flag-pod { background: #E7F3E9 !important; color: #1E5C2B !important; }

/* -------- Customer + Driver dashboard (shared sidebar layout) -------- */

.mb-customer-dashboard,
.mb-admin-dashboard,
.mb-driver-dashboard {
	max-width: 1360px !important;
	width: 100% !important;
	display: flex !important;
	align-items: stretch !important;
	background: var(--mb-bg, #fff) !important;
	border: 1px solid var(--mb-border, #E3E6F0) !important;
	border-radius: 14px !important;
	overflow: hidden !important;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06) !important;
	min-height: 640px !important;
}

.mb-customer-sidebar {
	flex: 0 0 248px !important;
	background: var(--mb-dark, #0A1330) !important;
	background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(0, 0, 0, 0.08)) !important;
	color: #fff !important;
	padding: 28px 18px 22px !important;
	display: flex !important;
	flex-direction: column !important;
}

.mb-customer-brand {
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
	font-weight: 800 !important;
	font-size: 17px !important;
	line-height: 1.2 !important;
	color: #fff !important;
	margin: 0 6px 28px !important;
	letter-spacing: 0.01em !important;
}

.mb-customer-brand::before {
	content: "" !important;
	flex: 0 0 10px !important;
	width: 10px !important;
	height: 10px !important;
	border-radius: 50% !important;
	background: var(--mb-accent, #C9962E) !important;
	box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.12) !important;
}

.mb-portal-tab-nav {
	display: flex !important;
	flex-direction: column !important;
	gap: 3px !important;
	flex: 1 1 auto !important;
}

.mb-portal-tab-nav .mercy-tab-link {
	position: relative !important;
	display: flex !important;
	align-items: center !important;
	gap: 8px !important;
	padding: 11px 14px !important;
	border-radius: 9px !important;
	color: rgba(255, 255, 255, 0.72) !important;
	text-decoration: none !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	line-height: 1.3 !important;
	transition: background-color .15s ease, color .15s ease !important;
}

.mb-portal-tab-nav .mercy-tab-link:hover {
	background: rgba(255, 255, 255, 0.08) !important;
	color: #fff !important;
}

.mb-portal-tab-nav .mercy-tab-link.is-active {
	background: rgba(255, 255, 255, 0.16) !important;
	color: #fff !important;
	box-shadow: inset 3px 0 0 var(--mb-accent, #C9962E) !important;
}

.mb-customer-sidebar .mb-logout-link {
	display: inline-flex !important;
	align-items: center !important;
	color: rgba(255, 255, 255, 0.62) !important;
	font-size: 12.5px !important;
	font-weight: 600 !important;
	text-decoration: none !important;
	margin: 18px 6px 0 !important;
	padding: 6px 0 !important;
	border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
}

.mb-customer-sidebar .mb-logout-link:hover {
	color: #fff !important;
}

.mb-customer-main {
	flex: 1 1 auto !important;
	padding: 28px 30px 34px !important;
	min-width: 0 !important;
	background: var(--mb-bg, #fff) !important;
}

/* The booking widget is designed to be a standalone, ~480px-wide card when
   it's embedded directly on a page (e.g. the homepage). Nested inside the
   much wider "New Reservation" tab of the portal, that same fixed width
   just leaves the rest of the panel empty — so here it's allowed to use
   the full width of the tab instead, up to a comfortable reading width. */
#mb-cust-tab-new .mb-widget,
#mercy-fe-tab-book .mb-widget {
	max-width: 720px !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	border: none !important;
	box-shadow: none !important;
}

.mb-portal-header {
	display: flex !important;
	justify-content: space-between !important;
	align-items: flex-start !important;
	flex-wrap: wrap !important;
	gap: 10px !important;
	margin-bottom: 18px !important;
}

.mb-portal-header h2 {
	margin: 0 0 2px !important;
	font-size: 22px !important;
	font-weight: 700 !important;
	letter-spacing: -0.01em !important;
	line-height: 1.25 !important;
}

.mb-portal-date {
	font-size: 12.5px !important;
	color: var(--mb-muted, #5B6478) !important;
}

.mb-book-ride-btn {
	display: inline-block !important;
	width: auto !important;
	padding: 10px 18px !important;
	text-decoration: none !important;
	font-size: 13px !important;
}

.mb-portal-meta {
	font-size: 12px !important;
	color: var(--mb-muted, #5B6478) !important;
	margin-top: 2px !important;
}

.mb-status-pill {
	display: inline-flex !important;
	align-items: center !important;
	font-size: 11px !important;
	font-weight: 700 !important;
	line-height: 1 !important;
	padding: 5px 10px !important;
	border-radius: 999px !important;
	text-transform: uppercase !important;
	letter-spacing: 0.02em !important;
	white-space: nowrap !important;
}

.mb-status-confirmed { background: #E7F3E9 !important; color: #1e5c2b !important; }
.mb-status-active { background: #E6F0FA !important; color: #1e4f8a !important; }
.mb-status-completed { background: #EAF0ED !important; color: var(--mb-primary, #0B1A4D) !important; }
.mb-status-cancelled { background: #FBE7E6 !important; color: #a3241c !important; }
.mb-status-default { background: var(--mb-bg-soft, #F6F7FB) !important; color: var(--mb-muted, #5B6478) !important; }

.mb-modify-form {
	margin-top: 8px !important;
}

.mb-modify-form textarea {
	width: 100% !important;
	min-height: 60px !important;
	padding: 8px 10px !important;
	border: 1px solid var(--mb-border, #E3E6F0) !important;
	border-radius: 8px !important;
	font-size: 13px !important;
	margin-bottom: 6px !important;
}

.mb-previous-search {
	width: 100% !important;
	margin-bottom: 12px !important;
}

.mb-fare-table {
	font-size: 13px !important;
}

.mb-pod-card .mb-pod-signature img {
	max-width: 220px !important;
	border: 1px solid var(--mb-border, #E3E6F0) !important;
	border-radius: 6px !important;
	background: #fff !important;
	margin-top: 6px !important;
}

.mb-pod-photo {
	margin-top: 6px !important;
	font-size: 13px !important;
}

.mb-signature-pad {
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	height: auto !important;
	aspect-ratio: 640 / 220 !important;
	border: 1px solid var(--mb-border, #E3E6F0) !important;
	border-radius: 8px !important;
	background: #fff !important;
	margin: 0 !important;
	touch-action: none !important;
	cursor: crosshair !important;
}

.mb-account-form label {
	display: block !important;
	font-weight: 600 !important;
	font-size: 13px !important;
	margin: 10px 0 4px !important;
}

.mb-account-form label:first-of-type {
	margin-top: 0 !important;
}

.mb-nav-count {
	display: inline-block !important;
	background: rgba(255, 255, 255, 0.22) !important;
	color: #fff !important;
	font-size: 10px !important;
	font-weight: 800 !important;
	line-height: 1 !important;
	padding: 3px 6px !important;
	border-radius: 999px !important;
	margin-left: 4px !important;
	vertical-align: middle !important;
}

.mercy-tab-link.is-active .mb-nav-count {
	background: rgba(255, 255, 255, 0.32) !important;
}

/* -------- Driver trip cards -------- */

.mb-trip-card-top {
	display: flex !important;
	justify-content: space-between !important;
	align-items: center !important;
	flex-wrap: wrap !important;
	gap: 8px !important;
	margin-bottom: 6px !important;
}

.mb-trip-passenger {
	font-size: 13px !important;
	color: var(--mb-text, #0A1330) !important;
	margin: 8px 0 !important;
	line-height: 1.6 !important;
}

.mb-trip-passenger > div {
	margin-bottom: 2px !important;
}

.mb-trip-notes {
	background: var(--mb-bg, #fff) !important;
	border: 1px solid var(--mb-border, #E3E6F0) !important;
	border-radius: 8px !important;
	padding: 8px 10px !important;
	margin-top: 6px !important;
}

.mb-accept-btn,
.mb-reached-btn {
	margin-top: 4px !important;
}

/* -------- Expandable trip cards -------- */

.mb-trip-toggle {
	cursor: pointer !important;
	border-radius: 8px !important;
	margin: -4px -4px 6px !important;
	padding: 4px !important;
}

.mb-trip-toggle:hover,
.mb-trip-toggle:focus-visible {
	background: var(--mb-bg-soft, #F6F7FB) !important;
	outline: none !important;
}

.mb-trip-title {
	display: flex !important;
	flex-direction: column !important;
	gap: 2px !important;
}

.mb-trip-route-summary {
	font-size: 12px !important;
	color: var(--mb-muted, #5B6478) !important;
	font-weight: 400 !important;
}

.mb-trip-expand-icon {
	font-size: 18px !important;
	line-height: 1 !important;
	color: var(--mb-muted, #5B6478) !important;
	transition: transform 0.15s ease !important;
	flex: 0 0 auto !important;
}

.mb-trip-card.is-expanded .mb-trip-expand-icon {
	transform: rotate(180deg) !important;
}

.mb-trip-body {
	margin-top: 10px !important;
	padding-top: 10px !important;
	border-top: 1px dashed var(--mb-border, #E3E6F0) !important;
}

.mb-pod-form {
	margin-top: 12px !important;
	padding-top: 12px !important;
	border-top: 1px dashed var(--mb-border, #E3E6F0) !important;
}

.mb-pod-form label {
	display: block !important;
	font-weight: 600 !important;
	font-size: 12px !important;
	margin: 10px 0 4px !important;
}

.mb-pod-form label:first-of-type {
	margin-top: 0 !important;
}

.mb-pod-summary {
	font-size: 12px !important;
	color: var(--mb-muted, #5B6478) !important;
	margin-top: 6px !important;
}

.mb-error {
	color: #a3241c !important;
	font-size: 12px !important;
	margin: 6px 0 0 !important;
}

@media (max-width: 900px) {
	.mb-customer-dashboard,
	.mb-admin-dashboard,
	.mb-driver-dashboard {
		max-width: 100% !important;
	}
}

@media (max-width: 720px) {
	.mb-customer-dashboard,
	.mb-admin-dashboard,
	.mb-driver-dashboard {
		flex-direction: column !important;
	}
	.mb-customer-sidebar {
		flex-direction: row !important;
		flex-wrap: wrap !important;
		align-items: center !important;
		gap: 8px 12px !important;
		padding: 16px 14px !important;
	}
	.mb-customer-brand {
		margin: 0 !important;
		flex: 1 1 auto !important;
	}
	.mb-portal-tab-nav {
		flex-direction: row !important;
		flex-wrap: wrap !important;
		flex: 1 1 100% !important;
		gap: 6px !important;
		order: 3 !important;
	}
	.mb-portal-tab-nav .mercy-tab-link {
		padding: 8px 12px !important;
		font-size: 13px !important;
		border-radius: 999px !important;
		background: rgba(255, 255, 255, 0.08) !important;
	}
	.mb-portal-tab-nav .mercy-tab-link.is-active {
		box-shadow: none !important;
		background: rgba(255, 255, 255, 0.22) !important;
	}
	.mb-customer-sidebar .mb-logout-link {
		margin: 0 !important;
		padding: 0 !important;
		border-top: none !important;
		order: 2 !important;
	}
	.mb-customer-sidebar .mb-build-stamp {
		display: none !important;
	}
	.mb-customer-main {
		padding: 20px 16px 24px !important;
	}
}

@media (max-width: 480px) {
	.mb-portal-header {
		flex-direction: column !important;
		align-items: stretch !important;
	}
	.mb-book-ride-btn {
		width: 100% !important;
		text-align: center !important;
	}
	.mb-trip-card-top {
		flex-direction: column !important;
		align-items: flex-start !important;
	}
}

.mb-customer-sidebar .mb-build-stamp {
	display: block !important;
	margin: 8px 6px 0 !important;
	font-size: 10px !important;
	color: rgba(255, 255, 255, 0.38) !important;
	letter-spacing: 0.06em !important;
	font-variant-numeric: tabular-nums !important;
}

.mb-portal-date-sep {
	margin: 0 4px !important;
	opacity: .5 !important;
}

.mb-portal-tz {
	display: inline-block !important;
	margin-left: 6px !important;
	padding: 2px 7px !important;
	border-radius: 999px !important;
	background: var(--mb-bg-soft, #F6F7FB) !important;
	border: 1px solid var(--mb-border, #E3E6F0) !important;
	font-size: 11px !important;
	font-weight: 600 !important;
	color: var(--mb-muted, #5B6478) !important;
	vertical-align: middle !important;
}

.mb-kind-badge {
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
	font-size: 11px !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
	letter-spacing: .04em !important;
	color: var(--mb-primary, #0B1A4D) !important;
	background: #E4EBE8 !important;
	border-radius: 999px !important;
	padding: 4px 9px !important;
	margin-bottom: 6px !important;
}

.mb-portal-service {
	font-weight: 700 !important;
	color: var(--mb-primary, #0B1A4D) !important;
	text-transform: uppercase !important;
	letter-spacing: .04em !important;
	font-size: 11px !important;
}

/* -------- Sign-in gate (shared by all portals) -------- */

.mb-gate-brand {
	font-size: 11px !important;
	font-weight: 700 !important;
	letter-spacing: 0.08em !important;
	text-transform: uppercase !important;
	color: var(--mb-accent, #C9962E) !important;
	margin-bottom: 6px !important;
}

.mb-gate-form label {
	display: block !important;
	font-weight: 600 !important;
	font-size: 13px !important;
	margin: 12px 0 4px !important;
	color: var(--mb-text, #0A1330) !important;
}

.mb-gate-form .mb-input {
	margin-bottom: 0 !important;
}

.mb-gate-password {
	position: relative !important;
}

.mb-gate-password .mb-input {
	padding-right: 64px !important;
}

.mb-gate-toggle {
	position: absolute !important;
	right: 6px !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	padding: 5px 9px !important;
	border: none !important;
	border-radius: 6px !important;
	background: var(--mb-bg-soft, #F6F7FB) !important;
	color: var(--mb-primary, #0B1A4D) !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	cursor: pointer !important;
}

.mb-gate-remember {
	display: flex !important;
	align-items: center !important;
	gap: 8px !important;
	font-weight: 500 !important;
	font-size: 13px !important;
	margin: 12px 0 4px !important;
	cursor: pointer !important;
}

.mb-gate-error:empty {
	display: none !important;
}

.mb-gate-error {
	margin: 8px 0 0 !important;
}

.mb-gate-submit {
	margin-top: 14px !important;
}

.mb-gate-links {
	margin-top: 12px !important;
	text-align: center !important;
	font-size: 13px !important;
}

.mb-gate-links a {
	color: var(--mb-primary, #0B1A4D) !important;
	text-decoration: none !important;
	font-weight: 600 !important;
}

.mb-gate-links a:hover {
	text-decoration: underline !important;
}

.mb-gate-help {
	margin: 16px 0 0 !important;
	padding-top: 14px !important;
	border-top: 1px solid var(--mb-border, #E3E6F0) !important;
	font-size: 12.5px !important;
	line-height: 1.5 !important;
	color: var(--mb-muted, #5B6478) !important;
}

/* -------- Driver portal: trip cards -------- */

.mb-driver-stats {
	display: flex !important;
	gap: 10px !important;
}

.mb-driver-stat {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	min-width: 76px !important;
	padding: 8px 12px !important;
	background: var(--mb-bg-soft, #F6F7FB) !important;
	border: 1px solid var(--mb-border, #E3E6F0) !important;
	border-radius: 10px !important;
}

.mb-driver-stat strong {
	font-size: 20px !important;
	line-height: 1.1 !important;
	color: var(--mb-primary, #0B1A4D) !important;
}

.mb-driver-stat span {
	font-size: 11px !important;
	font-weight: 600 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.04em !important;
	color: var(--mb-muted, #5B6478) !important;
}

.mb-driver-empty strong {
	display: block !important;
	font-size: 15px !important;
	margin-bottom: 4px !important;
}

.mb-driver-empty p {
	margin: 0 !important;
	font-size: 13px !important;
	color: var(--mb-muted, #5B6478) !important;
}

.mb-trip-title {
	display: flex !important;
	flex-direction: column !important;
	gap: 2px !important;
	min-width: 0 !important;
}

.mb-trip-id {
	font-size: 11px !important;
	font-weight: 700 !important;
	letter-spacing: 0.04em !important;
	text-transform: uppercase !important;
	color: var(--mb-muted, #5B6478) !important;
}

.mb-trip-when {
	font-size: 15px !important;
	color: var(--mb-text, #0A1330) !important;
}

.mb-trip-steps {
	display: flex !important;
	list-style: none !important;
	margin: 10px 0 14px !important;
	padding: 0 !important;
	gap: 0 !important;
}

.mb-trip-steps li {
	flex: 1 1 0 !important;
	position: relative !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	gap: 6px !important;
	margin: 0 !important;
	padding: 0 !important;
	font-size: 11px !important;
	font-weight: 600 !important;
	color: var(--mb-muted, #5B6478) !important;
	text-align: center !important;
}

.mb-trip-steps li::before {
	content: "" !important;
	position: absolute !important;
	top: 6px !important;
	left: -50% !important;
	width: 100% !important;
	height: 2px !important;
	background: var(--mb-border, #E3E6F0) !important;
}

.mb-trip-steps li:first-child::before {
	display: none !important;
}

.mb-trip-steps li.is-done::before,
.mb-trip-steps li.is-current::before {
	background: var(--mb-primary, #0B1A4D) !important;
}

.mb-trip-step-dot {
	position: relative !important;
	z-index: 1 !important;
	width: 14px !important;
	height: 14px !important;
	border-radius: 50% !important;
	background: #fff !important;
	border: 2px solid var(--mb-border, #E3E6F0) !important;
	box-sizing: border-box !important;
}

.mb-trip-steps li.is-done .mb-trip-step-dot {
	background: var(--mb-primary, #0B1A4D) !important;
	border-color: var(--mb-primary, #0B1A4D) !important;
}

.mb-trip-steps li.is-current .mb-trip-step-dot {
	border-color: var(--mb-primary, #0B1A4D) !important;
	box-shadow: 0 0 0 3px rgba(33, 62, 250, 0.18) !important;
}

.mb-trip-steps li.is-current {
	color: var(--mb-primary, #0B1A4D) !important;
}

.mb-trip-route {
	display: flex !important;
	flex-direction: column !important;
	gap: 8px !important;
	padding: 12px 14px !important;
	background: var(--mb-bg-soft, #F6F7FB) !important;
	border-radius: 10px !important;
	margin-bottom: 12px !important;
}

.mb-trip-leg {
	display: grid !important;
	grid-template-columns: 84px 1fr auto !important;
	gap: 10px !important;
	align-items: center !important;
	font-size: 13px !important;
}

.mb-trip-leg-label {
	font-size: 11px !important;
	font-weight: 700 !important;
	letter-spacing: 0.04em !important;
	text-transform: uppercase !important;
	color: var(--mb-muted, #5B6478) !important;
}

.mb-trip-leg-addr {
	font-weight: 600 !important;
	color: var(--mb-text, #0A1330) !important;
	line-height: 1.4 !important;
	min-width: 0 !important;
	overflow-wrap: anywhere !important;
}

.mb-trip-nav {
	font-size: 12px !important;
	font-weight: 700 !important;
	color: var(--mb-primary, #0B1A4D) !important;
	text-decoration: none !important;
	padding: 5px 10px !important;
	border: 1px solid var(--mb-primary, #0B1A4D) !important;
	border-radius: 999px !important;
	white-space: nowrap !important;
}

.mb-trip-nav:hover {
	background: var(--mb-primary, #0B1A4D) !important;
	color: #fff !important;
}

.mb-trip-leg-note {
	font-size: 12px !important;
	color: var(--mb-muted, #5B6478) !important;
}

.mb-trip-details {
	display: grid !important;
	grid-template-columns: 1fr 1fr !important;
	gap: 8px 16px !important;
	margin: 0 0 12px !important;
	font-size: 13px !important;
}

.mb-trip-details > div {
	margin: 0 !important;
	min-width: 0 !important;
}

.mb-trip-details dt {
	font-size: 11px !important;
	font-weight: 700 !important;
	letter-spacing: 0.04em !important;
	text-transform: uppercase !important;
	color: var(--mb-muted, #5B6478) !important;
	margin: 0 0 2px !important;
}

.mb-trip-details dd {
	margin: 0 !important;
	color: var(--mb-text, #0A1330) !important;
	line-height: 1.45 !important;
	overflow-wrap: anywhere !important;
}

.mb-trip-details dd a {
	color: var(--mb-primary, #0B1A4D) !important;
	font-weight: 600 !important;
	text-decoration: none !important;
}

.mb-trip-details--compact {
	grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	margin-bottom: 8px !important;
}

.mb-trip-cash {
	padding: 10px 12px !important;
	margin-bottom: 12px !important;
	border-radius: 8px !important;
	background: #FFF6DF !important;
	border: 1px solid #F0D38A !important;
	color: #6B4E00 !important;
	font-size: 13px !important;
	font-weight: 600 !important;
}

.mb-trip-notes strong {
	display: block !important;
	font-size: 11px !important;
	letter-spacing: 0.04em !important;
	text-transform: uppercase !important;
	color: var(--mb-muted, #5B6478) !important;
	margin-bottom: 2px !important;
}

.mb-trip-actions {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 8px !important;
	align-items: center !important;
}

.mb-trip-actions .button {
	margin-top: 0 !important;
}

.mb-trip-actions .button[hidden] {
	display: none !important;
}

.mb-status-error {
	margin: 8px 0 0 !important;
}

.mb-status-error[hidden] {
	display: none !important;
}

.mb-trip-history-route {
	font-size: 13px !important;
	font-weight: 600 !important;
	color: var(--mb-text, #0A1330) !important;
	margin: 4px 0 10px !important;
}

.mb-trip-history-route span {
	color: var(--mb-muted, #5B6478) !important;
	padding: 0 4px !important;
}

/* Proof of delivery form */

.mb-pod-form[hidden] {
	display: none !important;
}

.mb-pod-form h4 {
	margin: 0 0 6px !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	color: var(--mb-primary, #0B1A4D) !important;
}

.mb-pod-form .mb-pod-recipient {
	margin-bottom: 0 !important;
}

.mb-pod-optional {
	font-weight: 400 !important;
	color: var(--mb-muted, #5B6478) !important;
}

.mb-signature-wrap {
	position: relative !important;
	max-width: 560px !important;
}

.mb-sig-clear {
	position: absolute !important;
	top: 8px !important;
	right: 8px !important;
	padding: 4px 10px !important;
	border: 1px solid var(--mb-border, #E3E6F0) !important;
	border-radius: 999px !important;
	background: #fff !important;
	color: var(--mb-muted, #5B6478) !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	cursor: pointer !important;
}

.mb-pod-photo-row {
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
	flex-wrap: wrap !important;
}

.mb-pod-photo-row .mb-pod-photo-btn {
	margin: 0 !important;
	cursor: pointer !important;
}

.mb-pod-photo-name {
	font-size: 12px !important;
	color: var(--mb-muted, #5B6478) !important;
}

.mb-pod-photo-preview {
	display: block !important;
	max-width: 220px !important;
	max-height: 160px !important;
	margin-top: 8px !important;
	border-radius: 8px !important;
	border: 1px solid var(--mb-border, #E3E6F0) !important;
}

.mb-pod-photo-preview[hidden] {
	display: none !important;
}

.mb-pod-actions {
	display: flex !important;
	gap: 8px !important;
	flex-wrap: wrap !important;
	margin-top: 14px !important;
}

.mb-pod-actions .button {
	margin-top: 0 !important;
}

.mb-pod-record {
	display: flex !important;
	justify-content: space-between !important;
	align-items: center !important;
	gap: 12px !important;
	flex-wrap: wrap !important;
	margin-top: 8px !important;
	padding: 10px 12px !important;
	background: var(--mb-bg-soft, #F6F7FB) !important;
	border-radius: 10px !important;
}

.mb-pod-record-text {
	display: flex !important;
	flex-direction: column !important;
	gap: 2px !important;
	font-size: 13px !important;
}

.mb-pod-record-text strong {
	font-size: 11px !important;
	letter-spacing: 0.04em !important;
	text-transform: uppercase !important;
	color: var(--mb-muted, #5B6478) !important;
}

.mb-pod-record-text a {
	color: var(--mb-primary, #0B1A4D) !important;
	font-weight: 600 !important;
	text-decoration: none !important;
}

.mb-pod-record .mb-pod-signature img {
	max-width: 180px !important;
	max-height: 62px !important;
	border: 1px solid var(--mb-border, #E3E6F0) !important;
	border-radius: 6px !important;
	background: #fff !important;
}

@media (max-width: 600px) {
	.mb-trip-leg {
		grid-template-columns: 1fr auto !important;
	}
	.mb-trip-leg-label {
		grid-column: 1 / -1 !important;
	}
	.mb-trip-details,
	.mb-trip-details--compact {
		grid-template-columns: 1fr !important;
	}
	.mb-trip-steps li {
		font-size: 10px !important;
	}
	.mb-trip-actions .button {
		flex: 1 1 100% !important;
		justify-content: center !important;
	}
	.mb-driver-stats {
		width: 100% !important;
	}
	.mb-driver-stat {
		flex: 1 1 0 !important;
	}
}

/* -------- Brand shape: pill buttons, soft cards (matches the website) -------- */

.mb-portal .button,
.mb-portal .button-primary,
.mb-portal .mb-next-btn,
.mb-portal .mb-pay-btn,
.mb-portal .mb-book-ride-btn,
.mb-gate-submit {
	border-radius: 999px !important;
}

.mb-portal .mb-input,
.mb-gate-form .mb-input {
	border-radius: 10px !important;
}

.mb-portal-card,
.mb-portal-gate {
	border-radius: 16px !important;
}

.mb-portal-tab-nav .mercy-tab-link {
	border-radius: 999px !important;
}

.mb-portal-tab-nav .mercy-tab-link.is-active {
	background: var(--mb-primary, #0B1A4D) !important;
	color: #fff !important;
}