/* PJS Empty Legs — front-end listing styles.
   Prime Jet brand: navy + gold. Override in your theme if needed. */

/* Brand variables at :root so every plugin element (cards, filter bar, modal)
   can use them — not just elements inside .pjs-el-list. */
:root {
	--pjs-navy: #0c1c3a;
	--pjs-navy-deep: #0a1730;
	--pjs-gold: #c9a24b;
	--pjs-gold-dark: #b08d3f;
	--pjs-ink: #16233c;
	--pjs-muted: #6b7280;
	--pjs-line: #e6e8ec;
}

.pjs-el-list {
	display: grid;
	/* Wide cards so the route fits on one line; 1 column on typical content
	   widths, 2+ on very wide layouts, and never overflows on mobile. */
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 560px), 1fr));
	gap: 1.25rem;
	margin: 1.5rem 0;
}

/* Search + sort bar */
.pjs-el-filters {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.6rem;
	margin: 0 0 1.25rem;
}

/* Search field and sort select share the same fixed width; buttons go right. */
.pjs-el-search {
	position: relative;
	flex: 0 1 220px;
	max-width: 220px;
	min-width: 0;
}

.pjs-el-filters select {
	flex: 0 1 240px;
	width: 100%;
	max-width: 200px; /* overrides a theme's global select { width: 100% } */
	min-width: 0;
	box-sizing: border-box;
}

.pjs-el-filter-actions {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 0.6rem;
}

.pjs-el-filters input[type="search"] {
	width: 100%;
	box-sizing: border-box;
	padding: 0.55rem 0.8rem;
	border: 1px solid #cbd2db;
	border-radius: 6px;
	font-size: 1rem;
}

/* Date search + flexibility controls in the filter bar. */
.pjs-el-date {
	box-sizing: border-box;
	flex: 0 1 165px;
	max-width: 165px;
	min-width: 0;
	padding: 0.5rem 0.7rem;
	border: 1px solid #cbd2db;
	border-radius: 6px;
	font-size: 1rem;
	background: #fff;
	color: var(--pjs-navy, #0c1c3a);
}
.pjs-el-flex {
	max-width: 150px;
}

/* Airport autocomplete dropdown */
.pjs-el-suggest {
	position: absolute;
	z-index: 50;
	left: 0;
	right: 0;
	top: calc(100% + 2px);
	margin: 0;
	padding: 0.25rem 0;
	list-style: none;
	background: #fff;
	border: 1px solid var(--pjs-line);
	border-radius: 8px;
	box-shadow: 0 8px 24px rgba(12, 28, 58, 0.14);
	max-height: 280px;
	overflow-y: auto;
}

.pjs-el-suggest[hidden] { display: none; }

.pjs-el-suggest li {
	padding: 0.5rem 0.8rem;
	font-size: 0.95rem;
	color: var(--pjs-navy);
	cursor: pointer;
}

.pjs-el-suggest li.is-active,
.pjs-el-suggest li:hover {
	background: #f3f1ea;
}

.pjs-el-filters select {
	padding: 0.55rem 0.7rem;
	border: 1px solid #cbd2db;
	border-radius: 6px;
	font-size: 1rem;
	background: #fff;
}

.pjs-el-filters button.pjs-el-cta {
	border: 0;
	cursor: pointer;
}

.pjs-el-clear {
	font-size: 0.9rem;
	color: #6b7280;
	text-decoration: underline;
}

/* Pagination */
.pjs-el-pagination {
	margin: 1.5rem 0 0.5rem;
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	justify-content: center;
}

.pjs-el-pagination .page-numbers {
	display: inline-block;
	padding: 0.45rem 0.8rem;
	border: 1px solid #e6e8ec;
	border-radius: 6px;
	text-decoration: none;
	color: #0c1c3a;
	font-size: 0.95rem;
	line-height: 1;
}

.pjs-el-pagination .page-numbers.current {
	background: #0c1c3a;
	color: #fff;
	border-color: #0c1c3a;
}

.pjs-el-pagination a.page-numbers:hover {
	border-color: #c9a24b;
	color: #b08d3f;
}

.pjs-el-card {
	position: relative;
	border: 1px solid var(--pjs-line);
	border-top: 3px solid var(--pjs-gold);
	border-radius: 12px;
	padding: 1.4rem 1.6rem;
	background: #fff;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.8rem 2rem;
	box-shadow: 0 2px 10px rgba(12, 28, 58, 0.06);
	transition: box-shadow 0.18s ease, transform 0.18s ease;
}

/* Aircraft thumbnail */
.pjs-el-thumb {
	flex: 0 0 150px;
	width: 150px;
	height: 100px;
	border-radius: 8px;
	overflow: hidden;
	background: #eef0f3;
}

.pjs-el-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Left: route + details. Right: price + buttons. */
.pjs-el-body {
	flex: 1 1 320px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}

.pjs-el-side {
	flex: 0 0 auto;
	margin-left: auto;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 0.7rem;
}

.pjs-el-card:hover {
	box-shadow: 0 8px 24px rgba(12, 28, 58, 0.12);
	transform: translateY(-2px);
}

.pjs-el-route {
	font-size: 1.2rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--pjs-navy);
	letter-spacing: 0.2px;
	overflow-wrap: break-word;
}

/* Keep each airport name intact so a long route wraps cleanly AT THE ARROW
   (from on one line, → to on the next) instead of breaking mid-name or
   overflowing the card border. Short routes still sit on one line. */
.pjs-el-from,
.pjs-el-to {
	white-space: nowrap;
}

@media (min-width: 768px) {
	.pjs-el-route {
		font-size: 1.08rem;
	}
}

.pjs-el-arrow {
	margin: 0 0.45rem;
	color: var(--pjs-gold);
	font-weight: 700;
}

.pjs-el-badge {
	display: inline-block;
	margin-left: 0.55rem;
	padding: 0.16rem 0.6rem;
	background: #f4ecd8;
	color: #8a6d28;
	border: 1px solid #e6d6ab;
	border-radius: 999px;
	font-size: 0.72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.4px;
	vertical-align: middle;
	white-space: nowrap;
}

.pjs-el-aircraft a {
	color: var(--pjs-navy);
	text-decoration: underline;
	text-decoration-color: var(--pjs-gold);
	text-underline-offset: 2px;
}

.pjs-el-aircraft a:hover {
	color: var(--pjs-gold-dark);
}

.pjs-el-meta {
	list-style: none;
	margin: 0;
	padding: 0;
	color: var(--pjs-muted);
	font-size: 0.95rem;
}

.pjs-el-meta li {
	margin: 0.18rem 0;
}

.pjs-el-price {
	font-size: 1.2rem;
	font-weight: 700;
	color: var(--pjs-navy);
}

.pjs-el-cta {
	display: inline-block;
	padding: 0.55rem 1.3rem;
	border-radius: 6px;
	background: var(--pjs-gold);
	color: var(--pjs-navy);
	text-decoration: none;
	font-size: 0.95rem;
	font-weight: 600;
	letter-spacing: 0.3px;
	text-transform: uppercase;
	transition: background 0.18s ease, color 0.18s ease;
}

.pjs-el-cta:hover,
.pjs-el-cta:focus {
	background: var(--pjs-navy);
	color: var(--pjs-gold);
}

/* Two-button action row on cards */
.pjs-el-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.pjs-el-cta.pjs-el-wa {
	background: #25d366;
	color: #0c1c3a;
}

.pjs-el-cta.pjs-el-wa:hover,
.pjs-el-cta.pjs-el-wa:focus {
	background: #1ebe5b;
	color: #0c1c3a;
}

.pjs-el-empty {
	color: var(--pjs-muted, #666);
	font-style: italic;
}

/* Single leg page: detail + enquiry form */
/* Single-leg page wrapper: generous top padding so the title clears the site's
   (often transparent / sticky) header, plus a comfortable reading column. */
.pjs-el-single-main {
	max-width: 980px;
	margin: 0 auto;
	padding: 130px 24px 70px;
	box-sizing: border-box;
}
.pjs-el-single-title {
	font-size: clamp(1.7rem, 4vw, 2.5rem);
	line-height: 1.18;
	font-weight: 700;
	color: var(--pjs-navy, #0c1c3a);
	margin: 0 0 0.4rem;
}
@media (max-width: 782px) {
	.pjs-el-single-main { padding: 96px 16px 50px; }
}

.pjs-el-single {
	--pjs-navy: #0c1c3a;
	--pjs-gold: #c9a24b;
	--pjs-line: #e6e8ec;
	max-width: 640px;
	margin: 1.5rem 0;
}

.pjs-el-single .pjs-el-route {
	font-size: 1.6rem;
	font-weight: 700;
	color: var(--pjs-navy);
}

.pjs-el-single .pjs-el-arrow { color: var(--pjs-gold); }

.pjs-el-detail-meta {
	color: #6b7280;
	font-size: 1rem;
	margin: 0.4rem 0;
}

.pjs-el-single .pjs-el-actions { margin: 1rem 0 1.5rem; }

.pjs-el-notice {
	padding: 0.8rem 1rem;
	border-radius: 6px;
	margin: 1rem 0;
	font-size: 0.95rem;
}
.pjs-el-notice-ok  { background: #e7f6ec; color: #136c34; border: 1px solid #b7e2c4; }
.pjs-el-notice-err { background: #fdecec; color: #8a1f1f; border: 1px solid #f3c2c2; }

.pjs-el-form {
	border: 1px solid var(--pjs-line);
	border-top: 3px solid var(--pjs-gold);
	border-radius: 12px;
	padding: 1.4rem;
	background: #fff;
}

.pjs-el-form h3 {
	margin-top: 0;
	color: var(--pjs-navy);
}

.pjs-el-form label {
	font-size: 0.9rem;
	color: #374151;
	font-weight: 600;
}

.pjs-el-form input[type="text"],
.pjs-el-form input[type="email"],
.pjs-el-form textarea {
	width: 100%;
	max-width: 100%;
	padding: 0.6rem 0.7rem;
	margin-top: 0.25rem;
	border: 1px solid #cbd2db;
	border-radius: 6px;
	font-size: 1rem;
	box-sizing: border-box;
}

.pjs-el-form button.pjs-el-cta {
	border: 0;
	cursor: pointer;
}

/* Request modal (listing popup) */
.pjs-el-modal-overlay {
	position: fixed;
	inset: 0;
	background: rgba(12, 28, 58, 0.55);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
	z-index: 99999;
}

.pjs-el-modal {
	position: relative;
	background: #fff;
	border-top: 4px solid #c9a24b;
	border-radius: 12px;
	width: 100%;
	max-width: 460px;
	max-height: 90vh;
	overflow-y: auto;
	padding: 1.6rem 1.6rem 1.4rem;
	box-shadow: 0 20px 60px rgba(12, 28, 58, 0.35);
}

.pjs-el-modal h3 {
	margin: 0 0 0.25rem;
	color: #0c1c3a;
}

.pjs-el-modal-leg {
	margin: 0 0 1rem;
	color: #6b7280;
	font-size: 0.95rem;
}

.pjs-el-modal-close {
	position: absolute;
	top: 0.5rem;
	right: 0.7rem;
	border: 0;
	background: none;
	font-size: 1.6rem;
	line-height: 1;
	color: #9aa1ac;
	cursor: pointer;
}
.pjs-el-modal-close:hover { color: #0c1c3a; }

.pjs-el-modal-form p { margin: 0 0 0.7rem; }

.pjs-el-modal-form label {
	font-size: 0.9rem;
	color: #374151;
	font-weight: 600;
}

.pjs-el-modal-form input[type="text"],
.pjs-el-modal-form input[type="email"],
.pjs-el-modal-form textarea {
	width: 100%;
	padding: 0.6rem 0.7rem;
	margin-top: 0.25rem;
	border: 1px solid #cbd2db;
	border-radius: 6px;
	font-size: 1rem;
	box-sizing: border-box;
}

.pjs-el-modal-form button.pjs-el-cta {
	border: 0;
	cursor: pointer;
	width: 100%;
	text-align: center;
}

.pjs-el-modal-msg {
	padding: 0.7rem 0.9rem;
	border-radius: 6px;
	margin-bottom: 0.8rem;
	font-size: 0.95rem;
}
.pjs-el-modal-msg-ok  { background: #e7f6ec; color: #136c34; border: 1px solid #b7e2c4; }
.pjs-el-modal-msg-err { background: #fdecec; color: #8a1f1f; border: 1px solid #f3c2c2; }

/* Honeypot — hidden from real users */
.pjs-el-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Lock background scroll while the modal is open (iOS-friendly) */
body.pjs-el-noscroll { overflow: hidden; }

/* ---------- Mobile / iPhone ---------- */
@media ( max-width: 600px ) {
	.pjs-el-list { gap: 1rem; }

	.pjs-el-card {
		flex-direction: column;
		align-items: stretch;
		padding: 1.2rem;
		gap: 0.9rem;
	}

	.pjs-el-thumb {
		flex: 1 1 auto;
		width: 100%;
		height: 180px;
	}

	.pjs-el-route { font-size: 1.15rem; }

	/* Price + buttons go full width, left-aligned, easy to tap */
	.pjs-el-side {
		margin-left: 0;
		width: 100%;
		align-items: stretch;
	}

	.pjs-el-actions { width: 100%; }

	.pjs-el-actions .pjs-el-cta {
		flex: 1 1 0;
		text-align: center;
	}

	/* Comfortable tap targets (Apple HIG ≈ 44px) */
	.pjs-el-cta {
		min-height: 44px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}

	/* Search/sort bar stacks full width; Search + Clear share a row */
	.pjs-el-search,
	.pjs-el-filters select {
		flex: 1 1 100%;
		width: 100%;
		max-width: none;
	}
	.pjs-el-filter-actions {
		width: 100%;
		margin-left: 0;
	}
	.pjs-el-filter-actions button.pjs-el-cta {
		flex: 1 1 auto;
	}

	/* Modal fills the small screen comfortably */
	.pjs-el-modal-overlay { padding: 0.6rem; align-items: flex-start; }
	.pjs-el-modal { margin-top: 1.5rem; padding: 1.3rem 1.2rem 1.2rem; }

	.pjs-el-pagination .page-numbers { padding: 0.55rem 0.85rem; }
}

.pjs-el-disclaimer {
	margin-top: 1.25rem;
	font-size: 0.8rem;
	color: #9aa1ac;
	line-height: 1.5;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Modern listing — responsive GRID of vertical cards (photo on top), styled
   after the reference layout. Last in the file so it wins over older rules.
   ═══════════════════════════════════════════════════════════════════════════ */
.pjs-el-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
	gap: 1.6rem;
}

.pjs-el-card {
	flex-direction: column;
	align-items: stretch;
	padding: 0;
	gap: 0;
	overflow: hidden;
	border-radius: 14px;
}

/* Photo on top, full width */
.pjs-el-thumb {
	flex: 0 0 auto;
	width: 100%;
	height: 210px;
	border-radius: 0;
}
.pjs-el-thumb a { display: block; width: 100%; height: 100%; }
.pjs-el-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.pjs-el-main {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
	padding: 1.1rem 1.2rem 1.2rem;
}

/* Route header */
.pjs-el-route {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	font-size: inherit;
	font-weight: 400;
	white-space: normal;
	letter-spacing: 0;
	min-height: 3.4rem; /* reserve ~2 lines so the date/model rows align across cards */
}
.pjs-el-ep { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 0.3rem; }
.pjs-el-ep-from { align-items: flex-start; text-align: left; }
.pjs-el-ep-to   { align-items: flex-end;   text-align: right; }
.pjs-el-icao {
	display: inline-block;
	font-size: 0.66rem;
	font-weight: 700;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	color: #6b7280;
	background: #f1f3f6;
	border-radius: 5px;
	padding: 0.12rem 0.45rem;
}
.pjs-el-place {
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.25;
	color: var(--pjs-navy);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.pjs-el-path {
	flex: 0 0 56px;
	align-self: center;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.2rem;
	padding-top: 1.4rem;
}
.pjs-el-path-line { height: 1px; flex: 1 1 auto; min-width: 8px; background: #d7dbe0; }
.pjs-el-path-dot { width: 5px; height: 5px; border-radius: 50%; background: #c9ccd2; flex: 0 0 auto; }
.pjs-el-path-plane { color: var(--pjs-gold); font-size: 0.9rem; line-height: 1; flex: 0 0 auto; }

/* Date + time — the key fact for a one-off empty leg, so make it stand out:
   gold calendar icon + bold navy date, with the time kept light as a suffix. */
.pjs-el-when {
	display: flex;
	align-items: center;
	gap: 0.45rem;
	font-size: 1rem;
	color: var(--pjs-navy);
	border-top: 1px solid #eef0f3;
	padding-top: 0.8rem;
}
.pjs-el-when-ic {
	width: 16px;
	height: 16px;
	flex: 0 0 auto;
	color: var(--pjs-gold);
}
.pjs-el-date {
	font-weight: 700;
	color: var(--pjs-navy);
	letter-spacing: 0.2px;
}
.pjs-el-time {
	color: var(--pjs-muted);
	font-size: 0.85rem;
	font-weight: 500;
}
.pjs-el-time::before {
	content: "·";
	margin: 0 0.4rem 0 0.1rem;
	color: #c9ccd2;
}

/* Model + price row */
.pjs-el-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.8rem;
	border-top: 1px solid #eef0f3;
	padding-top: 0.8rem;
}
.pjs-el-ac { font-size: 0.9rem; min-width: 0; }
.pjs-el-model { display: block; font-weight: 600; color: var(--pjs-navy); }
.pjs-el-model a { color: var(--pjs-navy); text-decoration: underline; text-decoration-color: var(--pjs-gold); text-underline-offset: 2px; }
.pjs-el-acsub { color: var(--pjs-muted); font-size: 0.84rem; }
.pjs-el-price { font-size: 1.45rem; font-weight: 700; color: var(--pjs-navy); white-space: nowrap; }

/* Actions — pushed to the bottom so buttons align across cards of differing height */
.pjs-el-actions { display: flex; gap: 0.6rem; margin-top: auto; }
.pjs-el-actions .pjs-el-cta { flex: 1 1 0; text-align: center; }

@media ( max-width: 480px ) {
	.pjs-el-list { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Search bar — unified "From · To · When · Aircraft · Search" pill.
   ═══════════════════════════════════════════════════════════════════════════ */
.pjs-el-filters { display: block; margin: 0 0 1.6rem; }

.pjs-el-searchbar {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0;
	background: #f6f1e8;
	border: 1px solid #e8dec9;
	border-radius: 18px;
	padding: 0.45rem 0.5rem;
}
.pjs-el-field {
	flex: 1 1 160px;
	min-width: 0;
	min-height: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 0.2rem;
	padding: 0.7rem 1.1rem;
	position: relative;
}
.pjs-el-field-when, .pjs-el-field-ac { border-left: 1px solid #e8dec9; }
.pjs-el-field > label {
	font-size: 0.64rem;
	font-weight: 700;
	letter-spacing: 0.9px;
	text-transform: uppercase;
	color: #a3957a;
}
.pjs-el-field input,
.pjs-el-field select {
	border: none;
	background: transparent;
	font-size: 0.98rem;
	color: var(--pjs-navy);
	padding: 0.1rem 0;
	width: 100%;
	/* !important so the WordPress theme can't inflate the select/date control. */
	height: 38px !important;
	min-height: 0 !important;
	max-height: 38px !important;
	line-height: 1.4;
	box-sizing: border-box;
	outline: none;
	box-shadow: none;
	min-width: 0;
}
.pjs-el-searchbar,
.pjs-el-field,
.pjs-el-acwrap,
.pjs-el-when-row { min-height: 0 !important; }
.pjs-el-field input::placeholder { color: #b3a98a; }
.pjs-el-acwrap { position: relative; display: block; }
.pjs-el-when-row { display: flex; gap: 0.5rem; align-items: center; }
.pjs-el-when-row input[type="date"] { flex: 1 1 auto; }
.pjs-el-when-row select { flex: 0 0 auto; width: auto; font-size: 0.85rem; }

.pjs-el-swap {
	align-self: center;
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	border: 1px solid #e8dec9;
	background: #fff;
	color: var(--pjs-navy);
	cursor: pointer;
	font-size: 1rem;
	line-height: 1;
}
.pjs-el-swap:hover { background: #fbf8f2; }

.pjs-el-searchbtn {
	flex: 0 0 auto;
	align-self: center;
	height: 58px;
	margin-left: 0.5rem;
	padding: 0 1.7rem;
	border: none;
	border-radius: 13px;
	background: var(--pjs-navy);
	color: #fff;
	font-weight: 600;
	font-size: 0.95rem;
	letter-spacing: 0.4px;
	cursor: pointer;
}
.pjs-el-searchbtn:hover { background: #13294f; }

.pjs-el-field .pjs-el-suggest {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	right: 0;
	z-index: 60;
	background: #fff;
	border: 1px solid var(--pjs-line);
	border-radius: 10px;
	max-height: 260px;
	overflow-y: auto;
	box-shadow: 0 10px 28px rgba(12, 28, 58, 0.14);
	list-style: none;
	margin: 0;
	padding: 4px 0;
}
.pjs-el-field .pjs-el-suggest li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 9px 14px;
	cursor: pointer;
	color: var(--pjs-navy);
	border-bottom: 1px solid var(--pjs-line);
}
.pjs-el-field .pjs-el-suggest li:last-child { border-bottom: 0; }
.pjs-el-field .pjs-el-suggest li.is-active,
.pjs-el-field .pjs-el-suggest li:hover { background: #f6f1e8; }
/* Left column: City, Country (muted) over airport name (primary). */
.pjs-el-ac-main { min-width: 0; display: flex; flex-direction: column; }
.pjs-el-ac-city { font-size: 0.72rem; color: var(--pjs-muted); letter-spacing: 0.2px; }
.pjs-el-ac-name { font-size: 0.9rem; font-weight: 600; color: var(--pjs-navy); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Right column: IATA (gold) over ICAO (mono). */
.pjs-el-ac-codes { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.pjs-el-ac-iata { color: var(--pjs-gold); font-weight: 700; font-size: 0.8rem; letter-spacing: 0.5px; }
.pjs-el-ac-icao { color: var(--pjs-muted); font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 0.66rem; margin-top: 1px; }

.pjs-el-subrow { display: flex; align-items: center; gap: 1.2rem; margin-top: 0.8rem; }
.pjs-el-sort { padding: 0.45rem 0.7rem; border: 1px solid var(--pjs-line); border-radius: 9px; background: #fff; font-size: 0.9rem; color: var(--pjs-navy); }
.pjs-el-clear { font-size: 0.86rem; color: var(--pjs-muted); text-decoration: underline; }

@media ( max-width: 820px ) {
	.pjs-el-searchbar { padding: 0.5rem 0.55rem; }
	/* From / To stay 2-up; the compound When + Aircraft fields take a full row each. */
	.pjs-el-field { flex: 1 1 45%; border-left: none; }
	.pjs-el-field-when, .pjs-el-field-ac { flex: 1 1 100%; border-left: none; border-top: 1px solid #e8dec9; }
	.pjs-el-swap { display: none; }
	.pjs-el-searchbtn { flex: 1 1 100%; height: 50px; margin: 0.6rem 0 0; padding: 0.75rem; }
}

@media ( max-width: 560px ) {
	/* Phones: stack every field full width with clean separators so nothing overlaps. */
	.pjs-el-searchbar { display: block; padding: 0.4rem 0.7rem; }
	.pjs-el-field { width: 100%; padding: 0.65rem 0.4rem; border-left: none; border-top: 1px solid #e8dec9; }
	.pjs-el-field:first-of-type { border-top: none; }
	.pjs-el-when-row { flex-wrap: wrap; }
	.pjs-el-when-row input[type="date"] { flex: 1 1 100%; }
	.pjs-el-when-row select { flex: 1 1 100%; width: 100%; }
	.pjs-el-searchbtn { width: 100%; height: 50px; margin: 0.7rem 0 0; }
}

/* In-modal "Continue on WhatsApp" option + the "or" divider above the form. */
.pjs-el-modal-wa {
	display: block;
	width: 100%;
	box-sizing: border-box;
	text-align: center;
	margin: 0.2rem 0 0;
}
.pjs-el-modal-or {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	margin: 1rem 0;
	color: var(--pjs-muted);
	font-size: 0.85rem;
}
.pjs-el-modal-or::before,
.pjs-el-modal-or::after {
	content: "";
	flex: 1 1 auto;
	height: 1px;
	background: var(--pjs-line, #e0ddd6);
}
.pjs-el-modal-or span { white-space: nowrap; }


/* Single empty-leg page: keep the post title (theme H1) readable on phones */
.single-pjs_empty_leg h1 {
	font-size: clamp(1.35rem, 4.5vw, 2.1rem) !important;
	line-height: 1.25 !important;
	overflow-wrap: break-word;
}

/* ── Indicative value: savings % vs a typical full charter, or a "from" anchor ─ */
.pjs-el-value { margin: 6px 0 0; font-size: 12.5px; color: #6b7280; line-height: 1.4; }
.pjs-el-value-amt { font-weight: 600; color: var(--pjs-navy, #0c1c3a); }
.pjs-el-value-note { font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: #9aa0a6; margin-left: 4px; }
.pjs-el-value-save { display: inline-flex; align-items: baseline; gap: 5px; margin-top: 8px; padding: 4px 10px; border-radius: 100px; background: rgba(201,162,75,0.14); color: var(--pjs-gold-dark, #b08d3f); font-weight: 600; font-size: 12px; }
.pjs-el-value-save .pjs-el-value-pct { font-size: 14px; font-weight: 700; color: var(--pjs-navy, #0c1c3a); }

/* ── Route-match alert subscribe form ─────────────────────────────────────── */
.pjs-el-alerts { margin: 24px 0; padding: 20px 22px; border: 1px solid #e6e1d6; border-radius: 12px; background: #faf9f6; }
.pjs-el-alerts-title { font-weight: 600; color: var(--pjs-navy,#0c1c3a); margin-bottom: 12px; font-size: 16px; }
.pjs-el-alerts-row { display: flex; flex-wrap: wrap; gap: 8px; }
.pjs-el-alerts-row input { flex: 1 1 160px; height: 42px; padding: 0 12px; border: 1px solid #d8d2c4; border-radius: 8px; font-size: 14px; background: #fff; }
.pjs-el-alerts-row button { flex: 0 0 auto; height: 42px; padding: 0 22px; border: none; border-radius: 8px; background: var(--pjs-gold,#c9a24b); color: var(--pjs-navy,#0c1c3a); font-weight: 600; cursor: pointer; }
.pjs-el-alerts-row button:hover { background: var(--pjs-gold-dark,#b08d3f); }
.pjs-el-alerts-note { margin: 10px 0 0; font-size: 12px; color: #8a8478; }
.pjs-el-alerts-msg { margin: 0 0 12px; padding: 9px 12px; border-radius: 8px; font-size: 13.5px; }
.pjs-el-alerts-msg.ok { background: #E7F3EC; color: #1F7A4D; }
.pjs-el-alerts-msg.err { background: #FDF0EE; color: #B23A2E; }