/* ==========================================================================
   Empty Legs — board (template-empty-legs.php) and detail
   (template-empty-leg-detail.php). All values pull from variables.css.
   ========================================================================== */

.eyebrow-gold {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 3px;
	color: var(--st-gold);
	text-transform: uppercase;
	margin-bottom: 16px;
	display: block;
}

.mp-sort-label {
	font-size: 11px;
	color: var(--st-white-60);
	text-transform: uppercase;
	letter-spacing: 1px;
}

.mp-toggle {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	background: var(--st-navy-light);
	border: 1px solid var(--st-navy-mid);
	border-radius: 4px;
	padding: 12px;
	cursor: pointer;
}

.mp-toggle input {
	margin-top: 3px;
	accent-color: var(--st-gold);
	flex-shrink: 0;
}

.mp-terms-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: 16px;
	font-size: 12px;
	color: var(--st-white-60);
	cursor: pointer;
}

.mp-terms-row.is-accepted {
	color: var(--st-green);
}

.mp-loi-confirmed {
	text-align: center;
	padding: 40px 20px;
}

.mp-loi-confirmed__title {
	font-size: 20px;
	font-weight: 600;
	margin-bottom: 10px;
	color: var(--st-white);
}

.mp-loi-confirmed__ref {
	font-family: "JetBrains Mono", ui-monospace, monospace;
	color: var(--st-gold);
	font-size: 13px;
	margin-bottom: 16px;
}

/* ---- Hero ---- */

.el-hero {
	position: relative;
	padding: var(--st-space-3xl) 0;
	background: linear-gradient(180deg, var(--st-navy) 0%, var(--st-navy-light) 100%);
	overflow: hidden;
}

.el-hero__overlay {
	position: absolute;
	inset: -20% -10% auto auto;
	width: 60%;
	height: 140%;
	background: radial-gradient(circle, var(--st-arc-dim) 0%, transparent 70%);
	pointer-events: none;
}

.el-hero__content {
	position: relative;
	max-width: 760px;
}

.el-hero__headline {
	font-family: var(--st-font-display);
	font-size: clamp(32px, 5vw, 48px);
	font-weight: 700;
	line-height: 1.1;
	color: var(--st-white);
	margin: var(--st-space-sm) 0 var(--st-space-md);
}

.el-hero__headline span {
	color: var(--st-gold);
}

.el-hero__sub {
	color: var(--st-white-60);
	font-size: var(--st-text-body-large-size);
	line-height: 1.6;
	max-width: 620px;
}

.el-hero__trust {
	display: flex;
	flex-wrap: wrap;
	gap: var(--st-space-xs);
	margin-top: var(--st-space-lg);
}

.el-hero__trust .trust-pill {
	padding: 7px 14px;
	border-radius: 24px;
	border: 1px solid rgba(201, 168, 76, 0.25);
	background: rgba(201, 168, 76, 0.07);
	color: var(--st-white-60);
	font-size: 12px;
	font-weight: 500;
}

/* ---- Toolbar / filters ---- */

.el-shell {
	padding: var(--st-space-2xl) 0;
}

.el-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--st-space-sm);
	margin-bottom: var(--st-space-sm);
}

.el-toolbar--secondary {
	margin-bottom: var(--st-space-lg);
}

.el-toolbar__search {
	flex: 1 1 320px;
	max-width: 420px;
}

.el-toolbar__quick,
.el-toolbar__categories {
	display: flex;
	flex-wrap: wrap;
	gap: var(--st-space-xs);
}

.el-toolbar__sort {
	display: flex;
	align-items: center;
	gap: var(--st-space-xs);
	margin-left: auto;
}

.el-chip {
	font-family: var(--st-font-body);
	font-size: 12px;
	color: var(--st-white-60);
	background: var(--st-navy-light);
	border: 1px solid var(--st-navy-mid);
	border-radius: 999px;
	padding: 7px 14px;
	cursor: pointer;
	transition: all 0.15s ease;
	white-space: nowrap;
}

.el-chip:hover {
	border-color: var(--st-gold);
	color: var(--st-white);
}

.el-chip.is-active {
	background: var(--st-gold);
	border-color: var(--st-gold);
	color: var(--st-navy);
	font-weight: 700;
}

/* ---- Status row ---- */

.el-status-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--st-space-xs);
	margin-bottom: var(--st-space-sm);
	font-size: 12px;
	color: var(--st-white-60);
}

.el-status-row__count {
	font-weight: 600;
	color: var(--st-white-90);
}

.el-status-row__live {
	display: flex;
	align-items: center;
	gap: 6px;
	letter-spacing: 0.3px;
}

.el-live-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--st-green);
	display: inline-block;
	animation: el-pulse 1.6s ease-in-out infinite;
}

@keyframes el-pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.35; }
}

/* ---- Board / grid ---- */

.el-board {
	background: var(--st-navy-light);
	border: 1px solid var(--st-navy-mid);
	border-radius: var(--st-radius-card);
	overflow: hidden;
}

.el-board__head,
.el-row {
	display: grid;
	grid-template-columns: 1.6fr 1fr 1fr 0.7fr 0.6fr 0.7fr 0.9fr 32px;
	align-items: center;
	gap: var(--st-space-sm);
	padding: 14px var(--st-space-md);
}

.el-board__head {
	font-size: 10px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--st-gold);
	background: var(--st-arc-dim);
	border-bottom: 1px solid var(--st-navy-mid);
}

.el-row {
	border-bottom: 1px solid var(--st-navy-mid);
	cursor: pointer;
	transition: background 0.15s ease;
}

.el-row:last-child {
	border-bottom: none;
}

.el-row:hover {
	background: rgba(255, 255, 255, 0.03);
}

.el-row__route strong {
	font-family: var(--st-font-body);
	font-weight: 700;
	color: var(--st-white);
	letter-spacing: 0.5px;
}

.el-row__route span {
	display: block;
	font-size: 11px;
	color: var(--st-white-60);
	margin-top: 2px;
}

.el-row__cell {
	font-size: 13px;
	color: var(--st-white-90);
}

.el-row__price {
	font-family: monospace;
	font-weight: 600;
	color: var(--st-gold);
	font-size: 14px;
}

.el-row__expires {
	font-size: 12px;
	color: var(--st-white-60);
}

.el-row__expires.is-expired {
	color: var(--st-error, #e53e3e);
}

.el-row__arrow {
	color: var(--st-gold);
	text-align: right;
}

.el-skeleton-row {
	height: 56px;
	margin: 1px 0;
	background: rgba(255, 255, 255, 0.03);
}

.shimmer {
	background: linear-gradient(90deg, var(--st-navy-mid) 25%, rgba(26, 48, 84, 0.8) 50%, var(--st-navy-mid) 75%);
	background-size: 200% 100%;
	animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
	0% { background-position: 200% 0; }
	100% { background-position: -200% 0; }
}

.el-empty {
	padding: var(--st-space-2xl);
	text-align: center;
}

.el-empty__title {
	color: var(--st-white-90);
	font-size: 16px;
	font-weight: 600;
	margin-bottom: 6px;
}

.el-empty__sub {
	color: var(--st-white-60);
	font-size: 13px;
	margin-bottom: var(--st-space-md);
}

/* ---- Mobile board: stack cells ---- */

@media (max-width: 860px) {
	.el-board__head {
		display: none;
	}

	.el-row {
		grid-template-columns: 1fr auto;
		grid-template-areas:
			"route price"
			"meta  meta";
		row-gap: 6px;
	}

	.el-row__route { grid-area: route; }
	.el-row__price { grid-area: price; text-align: right; }
	.el-row__aircraft,
	.el-row__departs,
	.el-row__duration,
	.el-row__seats,
	.el-row__expires {
		grid-area: meta;
		display: inline-block;
		margin-right: var(--st-space-sm);
		font-size: 11px;
	}
	.el-row__arrow { display: none; }
}

/* ---- FAQ ---- */

.el-faq-section {
	background: var(--st-navy-light);
}

.el-faq {
	max-width: 760px;
	margin: 0 auto;
}

.el-faq__item {
	border-bottom: 1px solid var(--st-navy-mid);
	padding: var(--st-space-md) 0;
}

.el-faq__item summary {
	cursor: pointer;
	list-style: none;
	position: relative;
	padding-right: 28px;
	font-family: var(--st-font-display);
	font-size: 19px;
	color: var(--st-white);
}

.el-faq__item summary::-webkit-details-marker {
	display: none;
}

.el-faq__item summary::after {
	content: '+';
	position: absolute;
	right: 0;
	top: 0;
	color: var(--st-gold);
	font-size: 20px;
	transition: transform 0.2s ease;
}

.el-faq__item[open] summary::after {
	transform: rotate(45deg);
}

.el-faq__item p {
	color: var(--st-white-60);
	margin-top: var(--st-space-sm);
	line-height: 1.6;
	font-size: 14px;
}

.el-shell-trust {
	margin: var(--st-space-2xl) 0;
}

/* ---- Process section ---- */

.el-process-section {
	background: var(--st-navy-light);
}

.el-process-section .medevac-process-card {
	background: var(--st-navy);
	border: 1px solid var(--st-navy-mid);
	border-radius: 12px;
	padding: 24px;
	transition: transform 0.25s;
}

.el-process-section .medevac-process-card:hover {
	transform: translateY(-4px);
}

.el-process-section .medevac-process-card__num {
	font-family: var(--st-font-display);
	font-size: 40px;
	font-weight: 700;
	color: rgba(201, 168, 76, 0.2);
	line-height: 1;
	margin-bottom: 12px;
}

.el-process-section .medevac-process-card h3 {
	font-size: 15px;
	font-weight: 700;
	color: var(--st-white);
	margin-bottom: 8px;
}

.el-process-section .medevac-process-card p {
	font-size: 13px;
	color: var(--st-white-60);
	line-height: 1.6;
}

/* ==========================================================================
   Detail / booking page
   ========================================================================== */

.mp-back-link {
	background: none;
	border: none;
	color: var(--st-gold);
	font-size: 13px;
	cursor: pointer;
	margin-bottom: 20px;
	padding: 0;
	font-family: inherit;
}

.mp-loading {
	color: var(--st-white-60);
	font-size: 13px;
	padding: 24px 0;
}

.el-detail-shell {
	padding: var(--st-space-2xl) 0;
}

.el-detail-layout {
	display: grid;
	grid-template-columns: 1.6fr 1fr;
	gap: var(--st-space-2xl);
	align-items: start;
}

@media (max-width: 900px) {
	.el-detail-layout {
		grid-template-columns: 1fr;
	}
}

.el-section-label {
	font-size: 9px;
	letter-spacing: 3px;
	font-weight: 600;
	color: var(--st-gold);
	margin: var(--st-space-lg) 0 var(--st-space-sm);
	text-transform: uppercase;
}

.el-flight-card {
	padding: var(--st-space-lg);
	border-radius: 8px;
	border: 1px solid var(--st-arc-dim);
	background: linear-gradient(135deg, var(--st-navy-light) 0%, var(--st-navy) 100%);
}

.el-included {
	display: flex;
	flex-wrap: wrap;
	gap: var(--st-space-xs);
}

.el-badge {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 5px 10px;
	border-radius: 20px;
	font-size: 11px;
	border: 1px solid var(--st-navy-mid);
	color: var(--st-white-60);
}

.el-badge.is-included {
	border-color: rgba(56, 161, 105, 0.4);
	background: rgba(56, 161, 105, 0.08);
	color: var(--st-green);
}

.el-badge.is-excluded {
	opacity: 0.45;
}

.el-seats-note {
	color: var(--st-white-60);
	font-size: 11px;
	margin-bottom: var(--st-space-sm);
}

.el-seat-counter {
	display: flex;
	align-items: center;
	gap: var(--st-space-sm);
}

.el-seat-btn {
	width: 40px;
	height: 40px;
	border: 1px solid var(--st-navy-mid);
	background: transparent;
	color: var(--st-white-60);
	border-radius: 3px;
	font-size: 18px;
	cursor: pointer;
}

.el-seat-btn:hover {
	border-color: var(--st-gold);
	color: var(--st-gold);
}

.el-seat-count {
	font-family: monospace;
	font-size: 22px;
	color: var(--st-white);
	min-width: 24px;
	text-align: center;
}

.el-seat-label {
	color: var(--st-white-60);
	font-size: 13px;
}

.el-notice {
	margin-top: var(--st-space-lg);
	padding: 12px;
	border: 1px solid var(--st-arc-dim);
	background: rgba(201, 168, 76, 0.06);
	border-radius: 4px;
	color: var(--st-white-60);
	font-size: 12px;
	line-height: 1.5;
}

.el-confirm-toggle {
	margin: var(--st-space-sm) 0 0;
}

.el-terms-box {
	border: 1px solid var(--st-navy-mid);
	background: var(--st-navy);
	border-radius: 4px;
	padding: 14px;
}

.el-terms-box ul {
	margin: 0;
	padding-left: 18px;
	color: var(--st-white-60);
	font-size: 12px;
	line-height: 1.7;
}

.el-uppercase {
	text-transform: uppercase;
}

.el-price-panel {
	position: sticky;
	top: 100px;
	background: var(--st-navy-light);
	border: 1px solid var(--st-navy-mid);
	border-radius: var(--st-radius-card);
	padding: var(--st-space-lg);
}

.el-detail-trust {
	margin-top: var(--st-space-md);
}

.el-confirmed-instructions p {
	color: var(--st-white-60);
	font-size: 13px;
	margin: 6px 0;
}

@media (prefers-reduced-motion: reduce) {
	.el-live-dot {
		animation: none;
	}

	.shimmer {
		animation: none;
	}

	.el-process-section .medevac-process-card:hover {
		transform: none;
	}
}

/* ---- Booking urgency badge (under Departs cell) ---- */

.el-row__departs {
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.el-urgency-badge {
	display: inline-block;
	width: fit-content;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.3px;
	padding: 2px 8px;
	border-radius: 20px;
	text-transform: uppercase;
}

.el-urgency-badge.is-urgent {
	color: var(--st-red);
	background: rgba(229, 62, 62, 0.12);
	border: 1px solid rgba(229, 62, 62, 0.4);
}

.el-urgency-badge.is-soon {
	color: var(--st-gold);
	background: rgba(201, 168, 76, 0.12);
	border: 1px solid rgba(201, 168, 76, 0.35);
}

.el-urgency-badge.is-open {
	color: var(--st-white-60);
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid var(--st-navy-mid);
	text-transform: none;
	font-weight: 600;
}

@media (max-width: 860px) {
	.el-row__departs {
		flex-direction: row;
		align-items: center;
		gap: 8px;
	}
}