/**
 * Gap-filling only.
 *
 * Everything the plugin renders reuses WooCommerce's own class names, so the
 * theme styles it for free. This file covers the few places WooCommerce has no
 * class for — and uses the theme's CSS variables (--mfn-woo-*, set by Betheme)
 * with plain fallbacks, so it tracks the brand palette instead of fighting it.
 */

/* --------------------------------------------------------------------------
   My Account navigation
   -------------------------------------------------------------------------- */

/**
 * Betheme applies font-family "mfn-icons" to every nav item's a:before and
 * each endpoint declares only its glyph. \e937 is Betheme's own icon-ticket
 * (fonts/mfn/icons.css), so this matches the neighbouring items exactly.
 * Inert under other themes: an unknown glyph in an unset font renders nothing.
 */
.woocommerce .woocommerce-MyAccount-navigation-link--tickets a:before {
	content: '\e937';
}

/* --------------------------------------------------------------------------
   Product page — people selector
   -------------------------------------------------------------------------- */

.bt-people-field {
	margin-bottom: 15px;
}

.bt-people-field .form-row {
	padding: 0;
	margin: 0;
}

.bt-people-field select {
	width: 100%;
	max-width: 320px;
}

.bt-line-total {
	margin: 0 0 15px;
	font-size: 105%;
}

.bt-line-total-value {
	font-weight: 700;
	color: var(--mfn-woo-heading-color, inherit);
}

/* "/ person" after the price. Quieter than the figure it qualifies. */
.bt-per-person {
	font-size: 70%;
	font-weight: 400;
	opacity: 0.75;
	white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Checkout — one weight field per basket
   -------------------------------------------------------------------------- */

.bt-passenger-details {
	margin-top: 30px;
}

.bt-passenger-details > h3 {
	margin-bottom: 4px;
}

/**
 * Each basket is a distinct card: tinted panel, theme border, and a thick
 * accent stripe down the left edge. Two flights on one order have to read as
 * two separate things at a glance — a customer who fills the same box twice
 * sends a pilot the wrong load figures.
 *
 * Colours come from Betheme's variables, with fallbacks, so this follows the
 * brand palette instead of pinning its own.
 */
.woocommerce .bt-passenger-details .bt-slot,
.bt-passenger-details .bt-slot {
	position: relative;
	padding: 20px 22px;
	margin: 0 0 18px;
	background: var(--mfn-woo-bg-box, rgba(0, 0, 0, 0.02));
	border: 1px solid var(--mfn-woo-border, rgba(0, 0, 0, 0.12));
	border-left: 4px solid var(--mfn-woo-themecolor, var(--mfn-woo-border, rgba(0, 0, 0, 0.35)));
	border-radius: var(--mfn-woo-border-radius-box, 5px);
}

.bt-slot-title {
	margin: 0 0 6px;
	font-size: 110%;
	color: var(--mfn-woo-heading-color, inherit);
}

.bt-slot-time,
.bt-slot-people,
.bt-slot-hint {
	margin: 0 0 4px;
	font-size: 90%;
	opacity: 0.75;
}

.bt-slot-hint {
	margin-top: 6px;
}

.woocommerce .bt-slot .form-row,
.bt-slot .form-row {
	padding: 0;
	margin: 14px 0 0;
}

/**
 * The weight field holds at most a 3-digit number, so a full-width input reads
 * as though a long answer is expected. Capped on the WRAPPER as well as the
 * input: WooCommerce core sets `width: 100%` on .input-text, and constraining
 * only the input leaves the wrapper stretched on some themes.
 */
.woocommerce .bt-slot .bt-kg-row .woocommerce-input-wrapper,
.bt-slot .bt-kg-row .woocommerce-input-wrapper {
	display: block;
	max-width: 180px;
}

.woocommerce .bt-slot .bt-kg-row input.bt-kg-input,
.bt-slot .bt-kg-row input.bt-kg-input {
	width: 100%;
	max-width: 180px;
	text-align: right;
}

/* --------------------------------------------------------------------------
   Order details + account tickets
   -------------------------------------------------------------------------- */

.bt-order-tickets {
	margin: 1.5em 0;
}

.bt-order-tickets .button {
	margin: 0 0.5em 0.5em 0;
}

.bt-tickets-table code {
	font-size: 105%;
	letter-spacing: 1px;
}

/* --------------------------------------------------------------------------
   Resend form
   -------------------------------------------------------------------------- */

.bt-resend {
	max-width: 520px;
}

/**
 * Honeypot. Off-screen rather than display:none — some bots skip hidden
 * inputs, and screen readers get aria-hidden plus a negative tabindex.
 */
.bt-resend-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}