/*
 * Mbus — Bus Booking Manager output.
 *
 * The plugin renders the search results, the seat picker and the booking
 * drawer, and it ships its own palette: a crimson accent (#b30c3b) with
 * warm pink and grey tints. Next to this theme's green that reads as two
 * products stitched together, so this sheet re-themes the plugin's output
 * into the mockup's palette.
 *
 * Almost all of it is done by redefining the plugin's own custom
 * properties rather than by chasing individual rules — wbbm-search-modern.css
 * declares a full token set on `:root, .wbbm-modern-search`, and everything
 * built on those tokens (including the datepicker skin) follows along. Only
 * the handful of places the plugin hardcodes a literal colour, or sets one
 * inline, need a rule of their own.
 *
 * Nothing here changes layout or behaviour; it is colour, radius and type.
 */

/* ---------------------------------------------------------------------------
 * The plugin's design tokens, remapped
 *
 * Declared on the same selectors the plugin uses, so these win on source
 * order — inc/enqueue.php lists the plugin's handles as dependencies of
 * this sheet to guarantee it loads second.
 * ------------------------------------------------------------------------ */

:root,
.wbbm-modern-search {
	--wbbm-accent: #0ea472;
	--wbbm-accent-hover: #0b8259;
	--wbbm-accent-tint: #e7f7ef;

	--wbbm-ink: #0f172a;
	--wbbm-muted: #475569;
	--wbbm-soft: #94a3b8;

	--wbbm-line: #e2e8f0;
	--wbbm-line-strong: #cbd5e1;

	--wbbm-ground: #f8fafc;
	--wbbm-surface: #ffffff;

	/* The mockup's radii: rounded-3xl on cards, rounded-2xl on fields. */
	--wbbm-radius-card: 24px;
	--wbbm-radius-field: 16px;

	/* Manrope is the theme's display face; Inter carries body text. */
	--wbbm-display: Manrope, ui-sans-serif, system-ui, sans-serif;

	--wbbm-shadow-card: rgba(0, 0, 0, 0.04) 0 2px 12px;
	--wbbm-shadow-pop: rgba(0, 0, 0, 0.14) 0 24px 64px;
}

/* ---------------------------------------------------------------------------
 * Literals the tokens do not reach
 *
 * The calendar skin hardcodes the crimson with !important, so matching it
 * is the only way to recolour the selected and hovered day.
 * ------------------------------------------------------------------------ */

.wbbm-datepicker-modern td a:hover {
	color: var(--mbus-primary) !important;
}

.wbbm-datepicker-modern td .ui-state-active,
.wbbm-datepicker-modern td.ui-datepicker-current-day a {
	background: var(--mbus-primary) !important;
	color: #fff !important;
}

/* ---------------------------------------------------------------------------
 * Search results
 *
 * SearchClass prints `background-color: #b30c3b12` inline on every result
 * card (a crimson at 7% alpha), falling back to that literal whenever the
 * operator has not set a colour of their own. An inline style outranks any
 * rule, so this is the one place !important is unavoidable.
 * ------------------------------------------------------------------------ */

.mage_search_list {
	background-color: #fff !important;
	border-color: rgb(226, 232, 240);
	border-radius: 16px;
	font-family: Inter, sans-serif;
}

.mage_search_list.theme_minimal {
	border-radius: 16px;
	box-shadow: rgba(0, 0, 0, 0.04) 0 2px 12px;
}

.mage_search_list.theme_minimal:hover {
	box-shadow: rgba(0, 0, 0, 0.08) 0 8px 24px;
}

/* "Already in your cart" is a real state. The plugin marks it with a green
   border and a heavy grey shadow. The border survives on specificity, but
   the shadow would have been flattened by the theme_minimal rule above,
   which ties with it and prints later — so it is restated here in the
   theme's own idiom, and the state stays obvious. */
.mage_search_list.booked,
.mage_search_list.theme_minimal.booked {
	border-color: var(--mbus-primary);
	box-shadow: 0 0 0 1px var(--mbus-primary), rgba(0, 0, 0, 0.06) 0 8px 24px;
}

.mage_search_list .bus-title,
.mage_search_list .mage_bus_info h3 a,
.mage-bus-title .bus-title {
	color: rgb(15, 23, 42);
	font-family: Manrope, sans-serif;
	font-weight: 700;
	text-decoration: none;
}

.mage_search_list .bus-title:hover,
.mage_search_list .mage_bus_info h3 a:hover {
	color: var(--mbus-primary);
}

/* Fares are the one figure a passenger scans for, and the mockup paints
   every price in the brand colour. */
.mage-search-fare-value .woocommerce-Price-amount,
.mage_price_info .woocommerce-Price-amount {
	color: var(--mbus-primary);
	font-family: Manrope, sans-serif;
	font-weight: 700;
}

.mage-bus-stopage .dashicons {
	color: var(--mbus-primary);
}

.wbbm-feature-icon .customCheckbox span {
	color: rgb(100, 116, 139);
}

/* ---------------------------------------------------------------------------
 * Buttons
 *
 * mage_css.css paints these #22D02D, a brighter green than the theme's.
 * Matched to the mockup's own button: primary fill, 16px radius, Manrope.
 * ------------------------------------------------------------------------ */

button.mage_button,
.mage-bus-detail-action,
.wbbm-wc-confirm {
	background-color: var(--mbus-primary);
	color: #fff;
	border: 0;
	border-radius: 16px;
	font-family: Manrope, sans-serif;
	font-weight: 700;
	transition: opacity 0.15s;
}

button.mage_button:hover,
.mage-bus-detail-action:hover,
.wbbm-wc-confirm:hover {
	background-color: var(--mbus-primary);
	color: #fff;
	opacity: 0.9;
}

/* The secondary actions in the booking drawer must not read as the
   primary one; the mockup's quiet button is a bordered slate pill. */
.mage_offline_modal_cancel,
.mage_offline_modal_cancel:hover {
	background-color: #fff;
	color: rgb(71, 85, 105);
	border: 1px solid rgb(226, 232, 240);
}

/* ---------------------------------------------------------------------------
 * Seat quantity stepper and notices
 * ------------------------------------------------------------------------ */

.mage_form_group .mage_qty_dec,
.mage_form_group .mage_qty_inc {
	color: var(--mbus-primary);
	border-color: rgb(226, 232, 240);
}

.mage_form_group .mage_seat_qty {
	border-color: rgb(226, 232, 240);
	font-family: Manrope, sans-serif;
	font-weight: 600;
	color: rgb(15, 23, 42);
}

.mage-notification.mage-seat-available {
	color: var(--mbus-primary);
}

.mage_subtotal_figure {
	color: var(--mbus-primary);
	font-family: Manrope, sans-serif;
	font-weight: 700;
}

/* ---------------------------------------------------------------------------
 * Booking drawer
 * ------------------------------------------------------------------------ */

.mage_offline_modal_box {
	border-radius: 24px;
	border: 1px solid rgb(226, 232, 240);
}

.mage_offline_modal_title {
	font-family: Manrope, sans-serif;
	color: rgb(15, 23, 42);
}

/* ---------------------------------------------------------------------------
 * Small screens
 *
 * The plugin ships its own breakpoints and most of its output already
 * responds. What it cannot guarantee is that every piece of it fits the
 * theme's container — a fixed width anywhere in that much CSS pushes the
 * whole page sideways, and a horizontal scrollbar on a phone is the one
 * layout bug a visitor always notices.
 *
 * So this is a floor, not a redesign: nothing here changes how the plugin
 * looks at desktop width. It stops its content exceeding the space it has.
 * ------------------------------------------------------------------------ */

/* Media and embeds never exceed their column, whatever width the markup
   asks for. Sizing attributes on <img> are the usual culprit. */
.mbus-woocommerce img,
.mage_container img,
.mage_search_list img,
.wbbm-ticket-body img,
.mage_offline_modal img {
	max-width: 100%;
	height: auto;
}

.mage_container iframe,
.mage_search_list iframe {
	max-width: 100%;
}

/* A wide table scrolls inside its own box rather than widening the page.
   Applied to the wrapper where the plugin provides one, and to the table
   itself where it does not. */
.mage_container table,
.mage_search_list table,
.wbbm-ticket-body table {
	max-width: 100%;
}

@media (max-width: 782px) {
	.mage_container table,
	.mage_search_list table {
		display: block;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	/* The booking drawer is position:fixed and sized for a desktop
	   viewport; on a phone it should use the screen it has. */
	.mage_offline_modal_box {
		width: calc(100vw - 2rem);
		max-width: 100%;
		max-height: 90vh;
		overflow-y: auto;
	}

	/* The seat quantity stepper and its label sit on one row at desktop
	   width and have nowhere to go on a narrow one. */
	.mage_flex.xs_not_flex {
		display: block;
	}
}

/* Last line of defence. A single overflowing descendant anywhere in the
   plugin's output is enough to make the whole document scroll sideways;
   this contains it to the element that caused it. Deliberately scoped to
   the plugin's own wrappers rather than set on body, which would hide the
   symptom everywhere and make the next one harder to find. */
.mage_container,
.mage_search_list,
.wbbm-modern-search {
	max-width: 100%;
	overflow-wrap: break-word;
}