/* ============================================================================
   Tripyana Meet & Greet — form styles (tpmg-*)
   Built strictly from ~/tmg-design-tokens.md (brand v12 tokens). No navy.
   All colour vars consumed with brand fallbacks; logical properties for RTL.
   ========================================================================== */

.tpmg-wrap {
	--tpmg-emerald: var(--tp-emerald, #0c211a);
	--tpmg-emerald-2: var(--tp-emerald-2, #123127);
	--tpmg-gold: var(--tp-gold, #d4af37);
	--tpmg-gold-2: var(--tp-gold-2, #c19d2e);
	--tpmg-ink: var(--tp-ink, #0c211a);
	--tpmg-muted: var(--tp-muted, #4a5551);
	--tpmg-line: var(--tp-line, #e7e3d7);
	--tpmg-green: #1d6b4f;          /* site positive accent */
	--tpmg-red: #8a5b5b;            /* site negative accent */
	--tpmg-radius: var(--tp-radius, 1.25rem);
	--tpmg-pill: var(--tp-radius-pill, 999px);
	--tpmg-shadow: var(--tp-shadow, 0 8px 24px -14px rgba(12, 33, 26, .22));
	max-inline-size: 860px;
	margin-inline: auto;
	padding-block: 1.5rem 3rem;
	color: var(--tpmg-ink);
	position: relative;
}
body.rtl .tpmg-wrap,
body.rtl .tpmg-wrap input,
body.rtl .tpmg-wrap select,
body.rtl .tpmg-wrap textarea,
body.rtl .tpmg-wrap button {
	font-family: "Tajawal", Tahoma, Arial, sans-serif;
}

/* [hidden] must ALWAYS win: author display (flex/block/inline-block) on toggled
   elements otherwise overrides the UA [hidden] rule and they render anyway. */
.tpmg-wrap [hidden] { display: none !important; }

/* =============================================================================
   CONTRAST SYSTEM (v1.3). Every interactive state declares an explicit
   background/text PAIR as literal hexes in --ctl-bg / --ctl-fg; the control
   consumes ONLY these two props. docs/contrast-check.php parses the FINAL
   served CSS for these pairs and fails the build if any state < 4.5:1
   (disabled < 2.5:1). Gradients keep a solid background-color fallback and
   the pair documents the LIGHTER stop (worst case for light text).
   Mobile browsers' default grey tap overlay (-webkit-tap-highlight-color)
   dimmed pressed labels — neutralized here; :active states are our own.
   ========================================================================== */
.tpmg-wrap button,
.tpmg-wrap .tpmg-opt,
.tpmg-wrap a { -webkit-tap-highlight-color: transparent; }

/* ---- header --------------------------------------------------------------- */
.tpmg-head { text-align: center; margin-block-end: 1.6rem; }
.tpmg-title { color: var(--tpmg-emerald); line-height: 1.25; margin: 0 0 .4rem; }
.tpmg-sub { color: var(--tpmg-muted); font-size: 1rem; line-height: 1.8; margin: 0; }
.tpmg-adminnote {
	background: #fffaf0; border: 1px dashed var(--tpmg-gold);
	border-radius: 10px; padding: .6rem 1rem; font-size: .85rem;
	margin-block-end: 1rem; text-align: start;
}

/* ---- cards (tp-card look, no hover lift on a form) ------------------------ */
.tpmg-card {
	background: var(--tp-card-bg, #fff);
	border: 1px solid var(--tpmg-line);
	border-radius: var(--tpmg-radius);
	box-shadow: var(--tpmg-shadow);
	padding: 1.5rem 1.6rem;
	margin-block-end: 1.2rem;
}
.tpmg-card__title {
	color: var(--tpmg-emerald);
	font-size: 1.05rem;
	font-weight: 800;
	margin: 0 0 1rem;
	padding-block-end: .6rem;
	border-block-end: 2px solid rgba(212, 175, 55, .3);
}

/* ---- section 1: service type (premium segmented control) ------------------- */
.tpmg-svc {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: .7rem;
	padding-block-start: .55rem; /* room for the −5% badge, never clipped */
}
.tpmg-svc__btn {
	--ctl-bg: #ffffff;
	--ctl-fg: #0c211a;
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: .4rem;
	padding: 1rem .75rem .9rem;
	border: 1.5px solid rgba(12, 33, 26, .55);
	border-radius: 14px;
	background-color: var(--ctl-bg);
	color: var(--ctl-fg);
	font-weight: 700;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	/* v1.5 (4.1): NEVER transition color — a lagging color transition rendered
	   the selected label dark-on-dark mid-press on iOS. Background only. */
	transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.tpmg-svc__btn::after {           /* subtle gold bottom accent, active only */
	content: "";
	position: absolute;
	inset-block-end: 0;
	inset-inline: 18%;
	block-size: 3px;
	border-radius: 3px 3px 0 0;
	background: var(--tpmg-gold);
	opacity: 0;
	transition: opacity .15s ease;
}
.tpmg-svc__icon {
	inline-size: 24px;
	block-size: 24px;
	color: var(--tpmg-emerald);
	/* no color transition (4.1) — icon must flip to gold instantly with the state */
}
body.rtl .tpmg-svc__icon--dir { transform: scaleX(-1); }  /* directional icons mirror in RTL */
.tpmg-svc__label {
	font-size: .88rem;
	font-weight: 800;
	letter-spacing: .04em;
	white-space: nowrap;
}
body.rtl .tpmg-svc__label { letter-spacing: 0; }
/* v1.5.1 (5.1): GeneratePress ships a GLOBAL `button:hover,button:focus
   {color:#fff;background-color:#61626f}` at (0,1,1) which outranks the bare
   class (0,1,0), and mobile taps leave buttons in plain :focus (never
   :focus-visible). Every state is therefore declared INCLUDING plain :focus,
   scoped under .tpmg-wrap for unbeatable specificity, with
   -webkit-text-fill-color pinned so no WebKit text-fill rule can repaint it. */
.tpmg-wrap .tpmg-svc__btn:hover,
.tpmg-wrap .tpmg-svc__btn:focus,
.tpmg-wrap .tpmg-svc__btn:focus-visible {
	--ctl-bg: #ffffff;
	--ctl-fg: #0c211a;
	background-color: var(--ctl-bg);
	color: var(--ctl-fg);
	-webkit-text-fill-color: var(--ctl-fg);
	border-color: var(--tpmg-gold-2);
	box-shadow: 0 2px 10px -6px rgba(12, 33, 26, .35);
}
.tpmg-wrap .tpmg-svc__btn:active {
	--ctl-bg: #f2ecda;
	--ctl-fg: #0c211a;
	background-color: var(--ctl-bg);
	color: var(--ctl-fg);
	-webkit-text-fill-color: var(--ctl-fg);
}
.tpmg-svc__btn:focus-visible { outline: 2px solid #c19d2e; outline-offset: 2px; }
.tpmg-wrap .tpmg-svc__btn.is-on,
.tpmg-wrap .tpmg-svc__btn.is-on:hover,
.tpmg-wrap .tpmg-svc__btn.is-on:focus,
.tpmg-wrap .tpmg-svc__btn.is-on:focus-visible,
.tpmg-wrap .tpmg-svc__btn.is-on:active {
	--ctl-bg: #123127;               /* lighter gradient stop = audit worst case */
	--ctl-fg: #e8c65a;
	background-color: var(--ctl-bg); /* solid fallback survives a lost gradient */
	background-image: linear-gradient(160deg, #0c211a, #123127);
	color: var(--ctl-fg);
	-webkit-text-fill-color: var(--ctl-fg);
	border-color: #d4af37;
	box-shadow: 0 0 0 1px #d4af37;
}
.tpmg-wrap .tpmg-svc__btn.is-on .tpmg-svc__icon,
.tpmg-wrap .tpmg-svc__btn.is-on:hover .tpmg-svc__icon,
.tpmg-wrap .tpmg-svc__btn.is-on:focus .tpmg-svc__icon,
.tpmg-wrap .tpmg-svc__btn.is-on:focus-visible .tpmg-svc__icon,
.tpmg-wrap .tpmg-svc__btn.is-on:active .tpmg-svc__icon { color: #e8c65a; }
/* explicit label colour + text-fill pin on EVERY dark-background state —
   never inherited through a transitioning parent, never repaintable by a
   global button rule (4.1 / 5.1) */
.tpmg-wrap .tpmg-svc__btn.is-on .tpmg-svc__label,
.tpmg-wrap .tpmg-svc__btn.is-on:hover .tpmg-svc__label,
.tpmg-wrap .tpmg-svc__btn.is-on:focus .tpmg-svc__label,
.tpmg-wrap .tpmg-svc__btn.is-on:focus-visible .tpmg-svc__label,
.tpmg-wrap .tpmg-svc__btn.is-on:active .tpmg-svc__label {
	color: #e8c65a;
	-webkit-text-fill-color: #e8c65a;
	transition: none;
}
.tpmg-svc__btn.is-on::after { opacity: 1; }
.tpmg-svc__badge {
	position: absolute;
	inset-block-start: -0.5rem;
	inset-inline-end: 0.55rem;
	background: var(--tpmg-green);
	color: #fff;
	font-size: .7rem;
	font-weight: 800;
	line-height: 1.4;
	border-radius: var(--tpmg-pill);
	padding: .12rem .55rem;
	box-shadow: 0 2px 6px -2px rgba(12, 33, 26, .4), 0 0 0 2px #fff;
	direction: ltr;
}
.tpmg-roundstrip {
	margin-block-start: .9rem;
	text-align: center;
	background: rgba(212, 175, 55, .12);
	color: var(--tpmg-emerald);
	border: 1px solid rgba(212, 175, 55, .3);
	border-radius: var(--tpmg-pill);
	font-size: .88rem;
	font-weight: 700;
	padding: .45rem .9rem;
}

/* ---- fields ---------------------------------------------------------------- */
.tpmg-field { display: flex; flex-direction: column; margin-block-end: .9rem; }
.tpmg-field label {
	font-size: .85rem; font-weight: 700; color: var(--tpmg-muted);
	margin-block-end: .35rem;
}
.tpmg-req { color: var(--tpmg-red); }
.tpmg-optional { font-weight: 400; color: var(--tpmg-muted); font-size: .78rem; }
/* scoped `.tpmg-wrap …` (0,2,0) so GP's `input[type=text]{border-radius:0;…}` (0,1,1)
   can never square the boxes; min-block-size carries !important to counter a
   site-wide `input[type="text"]{…;min-height:0!important}` rule. Padding must
   stay UN-important: intl-tel-input reserves flag room via inline padding. */
.tpmg-wrap .tpmg-input, .tpmg-wrap .tpmg-select, .tpmg-wrap .tpmg-textarea {
	inline-size: 100%;
	box-sizing: border-box;
	padding: 11px 14px;
	border: 1.5px solid var(--tpmg-line);
	border-radius: 10px;
	background: #fff;
	color: var(--tpmg-ink);
	font: inherit;
	font-size: 1rem;
	line-height: 1.35;
	transition: border-color .2s ease, box-shadow .2s ease;
}
.tpmg-wrap .tpmg-input, .tpmg-wrap .tpmg-select { min-block-size: 46px !important; block-size: 46px; }
.tpmg-wrap .tpmg-textarea { block-size: auto; }
/* date inputs: kill native (iOS) chrome so they match text inputs exactly */
.tpmg-wrap input[type="date"] {
	-webkit-appearance: none;
	appearance: none;
	block-size: 46px;
	padding: 11px 14px;
	border: 1.5px solid var(--tpmg-line);
	border-radius: 10px;
	background: #fff;
	font-size: 1rem;
	line-height: 1.35;
}
.tpmg-wrap input[type="date"]::-webkit-date-and-time-value { text-align: start; margin: 0; }
body.rtl .tpmg-wrap input[type="date"]::-webkit-date-and-time-value { text-align: right; }
.tpmg-wrap .tpmg-input:focus, .tpmg-wrap .tpmg-select:focus, .tpmg-wrap .tpmg-textarea:focus {
	outline: none;
	border-color: var(--tpmg-gold);
	box-shadow: 0 0 0 3px rgba(212, 175, 55, .16);
}
.tpmg-wrap .tpmg-input::placeholder, .tpmg-wrap .tpmg-textarea::placeholder { color: #6b7570; opacity: 1; font-weight: 400; }
.tpmg-wrap .tpmg-input.is-bad { border-color: var(--tpmg-red); }
/* dates / flight numbers / email always display LTR, even in the RTL form */
.tpmg-ltr, .tpmg-wrap input[type="date"] { direction: ltr; text-align: start; }
body.rtl .tpmg-ltr, body.rtl .tpmg-wrap input[type="date"] { text-align: right; }
/* The date field is forced LTR so a picked d/m/Y never reorders — but its hint is
   Arabic prose, which would be pushed to the wrong edge. While the field is still
   empty the direction is free, so flip it back; it reverts the moment a date lands.
   Scoped to .tpmg-datefield ON PURPOSE: the email field is also .tpmg-ltr with a
   placeholder, and name@example.com must stay left-aligned. */
body.rtl .tpmg-wrap .tpmg-datefield:placeholder-shown { direction: rtl; text-align: right; }
.tpmg-wrap .tpmg-input::placeholder { color: #6b7570; opacity: 1; }
.tpmg-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
.tpmg-hint { font-size: .8rem; color: var(--tpmg-muted); margin-block-start: .1rem; }
.tpmg-walink, .tpmg-wrap .tpmg-hint a {
	--ctl-bg: #ffffff;
	--ctl-fg: #1d6b4f;
	color: var(--ctl-fg); font-weight: 700; text-decoration: underline; text-underline-offset: 2px;
}
.tpmg-walink:hover, .tpmg-walink:active, .tpmg-wrap .tpmg-hint a:hover, .tpmg-wrap .tpmg-hint a:active {
	--ctl-bg: #ffffff;
	--ctl-fg: #14503a;
	color: var(--ctl-fg);
}
.tpmg-err { color: var(--tpmg-red); font-size: .85rem; font-weight: 600; margin-block-start: .4rem; }

/* ---- legs & flight result card -------------------------------------------- */
.tpmg-leg {
	border: 1px solid var(--tpmg-line);
	border-radius: calc(var(--tpmg-radius) - .45rem);
	padding: 1rem 1.1rem .8rem;
	margin-block-start: 1rem;
}
.tpmg-leg__name {
	font-size: .8rem; font-weight: 800; color: var(--tpmg-gold);
	letter-spacing: .05em; margin-block-end: .6rem; text-transform: uppercase;
}
body.rtl .tpmg-leg__name { letter-spacing: 0; }
.tpmg-flres {
	margin-block-start: .6rem;
	border-radius: 12px;
	padding: .8rem 1rem;
	font-size: .9rem;
	line-height: 1.65;
}
.tpmg-flres--busy { background: #f7f5ef; color: var(--tpmg-muted); }
.tpmg-flres--err { background: #fdf3f3; border: 1px solid #ecd6d6; color: var(--tpmg-red); font-weight: 600; }
.tpmg-flres--soft { background: #fffaf0; border: 1px solid var(--tpmg-line); color: var(--tpmg-muted); }
/* verified result: boarding-pass card (reference layout) + slim note below */
.tpmg-flres--ok {
	background: linear-gradient(135deg, var(--tpmg-emerald), var(--tpmg-emerald-2));
	color: #fff;
	border-radius: 12px;
	position: relative;
	overflow: hidden;
}
.tpmg-bpwrap { padding: 0; background: none; border: none; }
.tpmg-bp {
	display: grid;
	grid-template-columns: 1fr 102px;
	grid-template-rows: auto auto;
	background-color: #0c211a;
	background-image:
		radial-gradient(120% 90% at 88% -20%, rgba(212, 175, 55, .16), transparent 62%),
		linear-gradient(135deg, #0c211a, #143a2c);
	color: #fff;
	border-radius: 16px;
	position: relative;
	overflow: hidden;
	box-shadow: inset 0 0 0 1px rgba(212, 175, 55, .16), 0 14px 30px -20px rgba(12, 33, 26, .6);
	animation: tpmg-bp-in .4s ease both;
}
@keyframes tpmg-bp-in {
	from { opacity: 0; transform: translateY(10px); }
	to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .tpmg-bp { animation: none; } }
/* v1.5 (4.2): slim green confirmation strip INSIDE the card, along its bottom */
.tpmg-bp__verified {
	grid-column: 1 / -1;
	background: #1d6b4f;
	color: #fff;
	font-weight: 700;
	font-size: .8rem;
	letter-spacing: .01em;
	text-align: center;
	padding: .5rem .9rem;
	border-block-start: 1px solid rgba(212, 175, 55, .25);
}
.tpmg-bp__main { padding: 1.15rem 1.25rem 1.2rem; min-inline-size: 0; }
.tpmg-bp__route { display: flex; align-items: center; justify-content: space-between; gap: .7rem; }
.tpmg-bp__iata {
	font-size: clamp(1.25rem, 6.4vw, 1.55rem); font-weight: 800;
	letter-spacing: .06em; line-height: 1.1; color: #fff; direction: ltr;
}
/* route track: a dotted gold line with a dot at each end, and the plane sitting
   ABOVE the line (owner: never on it). Line + end dots are one pseudo-element. */
.tpmg-bp__path {
	flex: 1; position: relative;
	display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
	min-inline-size: 3.2rem; block-size: 36px;
	padding-block-end: 14px;
}
.tpmg-bp__path::before {
	content: "";
	position: absolute;
	inset-inline: 0;
	inset-block-end: 7px;
	block-size: 5px;
	background-image:
		radial-gradient(circle at 2.5px 50%, var(--tp-gold-bright, #e8c65a) 0 2.4px, transparent 2.6px),
		radial-gradient(circle at calc(100% - 2.5px) 50%, var(--tp-gold-bright, #e8c65a) 0 2.4px, transparent 2.6px),
		repeating-linear-gradient(90deg, rgba(212, 175, 55, .85) 0 4px, transparent 4px 9px);
	background-repeat: no-repeat;
	background-size: 100% 100%, 100% 100%, calc(100% - 16px) 1.5px;
	background-position: 0 50%, 100% 50%, center;
}
.tpmg-bp__plane { position: relative; inline-size: 19px; block-size: 19px; color: var(--tp-gold-bright, #e8c65a); }
body.rtl .tpmg-bp__plane { transform: scaleX(-1); }
.tpmg-bp__airline {
	color: rgba(255, 255, 255, .66); font-size: .78rem; line-height: 1.5;
	letter-spacing: .02em; text-align: center; margin-block-start: .55rem;
}
.tpmg-bp__grid {
	display: grid; grid-template-columns: repeat(3, 1fr);
	gap: .25rem .6rem;
	margin-block-start: .9rem; padding-block-start: .85rem;
	border-block-start: 1px solid rgba(212, 175, 55, .2);
}
.tpmg-bp__grid > div { min-inline-size: 0; }
.tpmg-bp__grid > div:nth-child(2) { text-align: center; }
.tpmg-bp__grid > div:nth-child(3) { text-align: end; }
.tpmg-bp__grid i {
	display: block; font-style: normal;
	font-size: 9.5px; letter-spacing: .13em; text-transform: uppercase;
	color: rgba(255, 255, 255, .58); margin-block-end: .15rem;
}
body.rtl .tpmg-bp__grid i { letter-spacing: 0; font-size: 10.5px; }
.tpmg-bp__grid b { font-size: 1rem; font-weight: 800; direction: ltr; unicode-bidi: isolate; }
.tpmg-bp__time { color: var(--tp-gold-bright, #e8c65a); }
.tpmg-bp__stub {
	position: relative;
	/* fine gold dotted perforation (4.2) */
	border-inline-start: 2px dotted rgba(212, 175, 55, .5);
	background: rgba(255, 255, 255, .035);
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem;
	padding: 1.15rem .45rem;
}
.tpmg-bp__stub::before, .tpmg-bp__stub::after {
	content: "";
	position: absolute;
	inline-size: 16px; block-size: 16px;
	border-radius: 50%;
	background: var(--tp-card-bg, #fff);   /* punched circles, page-bg coloured */
	inset-inline-start: -9px;
}
.tpmg-bp__stub::before { inset-block-start: -8px; }
.tpmg-bp__stub::after { inset-block-end: -8px; }
/* vertical "TRIPYANA" — gold, letterspaced caps (4.2) */
.tpmg-bp__vert { writing-mode: vertical-rl; text-orientation: mixed; font-size: .55rem; font-weight: 800; letter-spacing: .3em; text-transform: uppercase; color: rgba(212, 175, 55, .85); }
.tpmg-bp__code { color: var(--tp-gold-bright, #e8c65a); font-weight: 800; font-size: 1.1rem; letter-spacing: .07em; direction: ltr; }
.tpmg-bp__date { font-size: .66rem; line-height: 1.35; letter-spacing: 0; color: rgba(255, 255, 255, .8); text-align: center; padding-inline: .1rem; }
/* faint barcode block (4.2) — pure CSS, restrained */
.tpmg-bp__barcode {
	display: block;
	inline-size: 52px;
	block-size: 17px;
	background: repeating-linear-gradient(90deg,
		rgba(255, 255, 255, .8) 0 1px, transparent 1px 3px,
		rgba(255, 255, 255, .8) 3px 5px, transparent 5px 6px);
	opacity: .34;
	border-radius: 1px;
}
.tpmg-flres__tag {
	display: inline-block;
	font-size: .72rem; font-weight: 800;
	border-radius: var(--tpmg-pill);
	padding: .12rem .6rem;
	margin-block-start: .3rem;
}
.tpmg-flres--ok .tpmg-flres__tag { background: var(--tpmg-green); color: #fff; }
.tpmg-flres--soft .tpmg-flres__tag { background: rgba(212, 175, 55, .16); color: var(--tpmg-emerald); }
.tpmg-flres__meet { font-size: .82rem; color: var(--tp-gold-bright, #e8c65a); margin-block-start: .25rem; }

/* ---- passengers & bags counters --------------------------------------------- */
.tpmg-counters { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
@media (max-width: 520px) { .tpmg-counters { grid-template-columns: 1fr; } }
.tpmg-count {
	border: 1.5px solid var(--tpmg-line);
	border-radius: 14px;
	padding: 1rem;
	display: flex; flex-direction: column; align-items: center; gap: .45rem;
	text-align: center;
}
.tpmg-count__icon { inline-size: 22px; block-size: 22px; color: var(--tpmg-emerald); }
.tpmg-count__label { font-size: .85rem; font-weight: 700; color: var(--tpmg-muted); }
.tpmg-count__ctl { display: flex; align-items: center; gap: 1.1rem; }
.tpmg-step__btn {
	--ctl-bg: #ffffff;
	--ctl-fg: #0c211a;
	inline-size: 44px; block-size: 44px;
	display: grid; place-items: center; padding: 0;   /* optical centering */
	border: 1.5px solid #0c211a; border-radius: 50%;
	background-color: var(--ctl-bg); color: var(--ctl-fg);
	cursor: pointer;
	/* v1.5 (4.1): background only — color must flip instantly on dark states */
	transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.tpmg-step__btn svg { inline-size: 20px; block-size: 20px; display: block; }
/* dark fill is pointer-hover + active only: emulated :hover sticks after a touch tap,
   and GP's global button:focus (grey #61626f) must never survive past the press */
@media (hover: hover) and (pointer: fine) {
	.tpmg-wrap .tpmg-step__btn:hover:not(:disabled) {
		--ctl-bg: #0c211a;
		--ctl-fg: #ffffff;
		border-color: #0c211a;
	}
}
.tpmg-wrap .tpmg-step__btn:active:not(:disabled) {
	--ctl-bg: #0c211a;
	--ctl-fg: #ffffff;
	border-color: #0c211a;
}
/* the sitewide combined CSS carries button.tpmg-step__btn.tpmg-step__btn:is(:hover,:focus,:active)
   {color:#fff!important} from the dark-state era — this rule must outgun it (specificity + !important)
   or the glyph goes white-on-white the moment the post-press background turns light */
.tpmg-wrap button.tpmg-step__btn.tpmg-step__btn:focus:not(:active) {
	--ctl-bg: #ffffff;
	--ctl-fg: #0c211a;
	background-color: var(--ctl-bg);
	color: var(--ctl-fg) !important;
	-webkit-text-fill-color: var(--ctl-fg) !important;
	border-color: #0c211a;
}
.tpmg-step__btn:active:not(:disabled), .tpmg-step__btn:focus-visible { box-shadow: 0 0 0 3px rgba(212, 175, 55, .5); }
.tpmg-step__btn:disabled {
	--ctl-bg: #ffffff;
	--ctl-fg: #7d8884;               /* 3.6:1 — explicit, no opacity dimming */
	border-color: #b9c1bd;
	cursor: not-allowed;
}
.tpmg-step__val {
	min-inline-size: 2.4rem; text-align: center;
	font-weight: 800; font-size: 1.5rem;
	font-variant-numeric: tabular-nums;
	color: var(--tpmg-emerald);
}

/* ---- notes ----------------------------------------------------------------- */
.tpmg-note {
	border-radius: 12px; padding: .8rem 1rem; font-size: .88rem;
	margin-block-start: .8rem; line-height: 1.7;
}
.tpmg-note--warn { background: #fffaf0; border: 1px solid rgba(212, 175, 55, .35); color: var(--tpmg-ink); }
.tpmg-note--late { background: #fff4e0; border: 1px solid #e2a93d; color: #7a4a12; font-weight: 600; }
.tpmg-note--block {
	background: #fdf3f3; border: 1px solid #ecd6d6; color: var(--tpmg-red);
	font-weight: 600;
	display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
}

/* ---- core service card (gold wash) ----------------------------------------- */
.tpmg-card--core { background: rgba(212, 175, 55, .10); border-color: rgba(212, 175, 55, .45); }
.tpmg-core__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
.tpmg-core__name { font-size: 1.15rem; font-weight: 800; color: var(--tpmg-emerald); }
.tpmg-core__meta { color: var(--tpmg-muted); font-size: .88rem; margin-block-start: .2rem; }
.tpmg-core__price { text-align: end; }
.tpmg-core__gross { display: block; color: var(--tpmg-muted); font-size: .95rem; direction: ltr; }
.tpmg-core__amount { font-size: 1.7rem; font-weight: 800; color: var(--tpmg-emerald); }
.tpmg-core__badge {
	display: inline-block;
	background: var(--tpmg-green); color: #fff;
	font-size: .78rem; font-weight: 800;
	border-radius: var(--tpmg-pill); padding: .25rem .8rem;
	margin-block-start: .6rem;
}
.tpmg-core__feat { list-style: none; margin: 1rem 0 0; padding: 0; }
.tpmg-core__feat li {
	position: relative;
	padding-inline-start: 1.5rem;
	margin-block-end: .45rem;
	font-size: .92rem;
	line-height: 1.65;
}
.tpmg-core__feat li::before {
	content: "✓";
	position: absolute;
	inset-inline-start: 0;
	color: var(--tpmg-green);
	font-weight: 800;
}

/* ---- option rows (porter, vehicles) ----------------------------------------- */
.tpmg-opt {
	--ctl-bg: #ffffff;
	--ctl-fg: #0c211a;
	display: flex; align-items: flex-start; gap: .8rem;
	border: 1.6px solid var(--tpmg-line);
	border-radius: 14px;
	padding: .9rem 1rem;
	margin-block-end: .6rem;
	cursor: pointer;
	background-color: var(--ctl-bg);
	color: var(--ctl-fg);
	transition: border-color .2s ease, background-color .2s ease;
}
.tpmg-opt:hover { border-color: var(--tpmg-gold); }
.tpmg-opt.is-on {
	/* #a8842a = deep brand gold, 3.5:1 vs white (WCAG 1.4.11 UI-state minimum);
	   bg = rgba(212,175,55,.14) over white, pre-blended for the audit */
	--ctl-bg: #f9f4e3;
	--ctl-fg: #0c211a;
	border-color: #a8842a;
	box-shadow: inset 0 0 0 1px #a8842a;
}
.tpmg-opt.is-off {
	/* explicit dim, no opacity stacking */
	--ctl-bg: #ffffff;
	--ctl-fg: #869089;
	border-color: #d5d9d2;
	cursor: not-allowed;
}
.tpmg-opt.is-off .tpmg-opt__name, .tpmg-opt.is-off .tpmg-opt__desc,
.tpmg-opt.is-off .tpmg-opt__price, .tpmg-opt.is-off .tpmg-opt__dirs small { color: #869089; }
.tpmg-opt.is-off:hover { border-color: #d5d9d2; }
.tpmg-opt input { accent-color: var(--tpmg-gold-2); inline-size: 1.1rem; block-size: 1.1rem; margin-block-start: .2rem; flex: none; }
.tpmg-opt__body { flex: 1; min-inline-size: 0; }
.tpmg-opt__name { display: block; font-weight: 800; font-size: .98rem; }
.tpmg-opt__price { color: var(--tpmg-emerald); }
/* vehicles: price on its own line, inline-end aligned, deep gold.
   v1.5 (4.3): the best-value tag sits INSIDE the card, on the price side,
   directly ABOVE the price — the old floating/overlapping pill is retired. */
#tpmg-veh .tpmg-opt { position: relative; }   /* containing block for the straddling tag */
#tpmg-veh .tpmg-opt__body { display: flex; flex-direction: column; }
#tpmg-veh .tpmg-opt__name  { order: 1; }
#tpmg-veh .tpmg-opt__tag   { order: 2; }
#tpmg-veh .tpmg-opt__price { order: 3; }
#tpmg-veh .tpmg-opt__desc  { order: 4; }
#tpmg-veh .tpmg-opt__dirs  { order: 5; }
#tpmg-veh .tpmg-opt__price {
	align-self: flex-end;
	font-size: 18px;
	font-weight: 800;
	color: #a8842a;
	line-height: 1.3;
}
.tpmg-opt__desc { display: block; font-size: .84rem; color: var(--tpmg-muted); margin-block-start: .15rem; }
/* v1.5.1 (5.4): the tag straddles the card's top border — half above, half
   inside — on the price side. The card gets breathing room via :has() so the
   tag can never overlap the vehicle name or the previous card. */
.tpmg-opt__tag {
	position: absolute;
	inset-block-start: -0.72rem;     /* half of its ~1.44rem height sits above the border */
	inset-inline-end: 0.9rem;        /* price side (left in the RTL layout) */
	inline-size: max-content;
	max-inline-size: calc(100% - 2rem);
	background: var(--tpmg-green); color: #fff;
	font-size: .72rem; font-weight: 800; line-height: 1.5;
	border: 2px solid #fff;
	border-radius: 999px;
	padding: 2px 10px;
	z-index: 1;
}
#tpmg-veh .tpmg-opt:has(.tpmg-opt__tag:not([hidden])) { margin-block-start: 1rem; }
#tpmg-veh .tpmg-opt:has(.tpmg-opt__tag:not([hidden])) .tpmg-opt__body { padding-block-start: .45rem; }
.tpmg-opt__tag.is-bad { background: #fdf3f3; color: var(--tpmg-red); border-color: #ecd6d6; }
.tpmg-opt__dirs { display: block; margin-block-start: .35rem; }
.tpmg-opt__dirs small { display: block; color: var(--tpmg-muted); font-size: .78rem; line-height: 1.6; }

/* ---- summary ---------------------------------------------------------------- */
.tpmg-sumlines { border-block-end: 1px solid var(--tpmg-line); padding-block-end: .6rem; }
.tpmg-sumline {
	display: flex; justify-content: space-between; gap: 1rem;
	font-size: .93rem; padding-block: .35rem;
}
.tpmg-sumline b { direction: ltr; }
.tpmg-sumline--neg, .tpmg-sumline--neg b { color: var(--tpmg-green); font-weight: 700; }
.tpmg-sumtotal {
	display: flex; justify-content: space-between; align-items: center;
	font-size: 1.05rem; font-weight: 800;
	padding-block: .8rem;
}
.tpmg-sumtotal b { font-size: 1.5rem; color: var(--tpmg-emerald); }
.tpmg-deadline {
	font-size: .88rem; font-weight: 700; color: var(--tpmg-green);
	margin-block-end: .8rem;
}
.tpmg-ack { display: flex; align-items: flex-start; gap: .5rem; font-weight: 700; margin-block-start: .5rem; cursor: pointer; }
.tpmg-ack input { accent-color: var(--tpmg-gold-2); inline-size: 1.1rem; block-size: 1.1rem; flex: none; margin-block-start: .2rem; }

/* ---- breathing room (item 6, v1.2) ------------------------------------------ */
.tpmg-field--gap { margin-block-end: 1.6rem; }   /* special requests → next block */
#tpmg-pay { margin-block-start: 1.5rem; }        /* ack box / errors → pay button */
#tpmg-ackwrap { margin-block-end: 1.5rem; }

/* ---- buttons (tp-btn geometry) ---------------------------------------------- */
.tpmg-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
	font-weight: 700; font-size: .95rem; line-height: 1.2;
	padding: .8rem 1.6rem;
	border-radius: var(--tpmg-pill);
	border: 1.6px solid transparent;
	text-decoration: none; cursor: pointer;
	transition: background-color .25s ease, color .25s ease, border-color .25s ease, transform .2s ease, filter .2s ease;
}
.tpmg-btn--sm { padding: .5rem 1.1rem; font-size: .85rem; }
.tpmg-btn--gold, .tpmg-btn--gold:hover, .tpmg-btn--gold:focus-visible, .tpmg-btn--gold:active {
	--ctl-bg: #d4af37;
	--ctl-fg: #0c211a;
	background-color: var(--ctl-bg); color: var(--ctl-fg);
}
.tpmg-btn--gold:hover, .tpmg-btn--gold:focus-visible, .tpmg-btn--gold:active {
	--ctl-bg: #c19d2e;
	transform: translateY(-1px);
}
.tpmg-btn--outline {
	--ctl-bg: #ffffff;
	--ctl-fg: #0c211a;
	background-color: transparent; color: var(--ctl-fg); border-color: #0c211a;
}
.tpmg-btn--outline:hover, .tpmg-btn--outline:focus-visible, .tpmg-btn--outline:active {
	--ctl-bg: #0c211a;
	--ctl-fg: #ffffff;
	background-color: var(--ctl-bg); color: var(--ctl-fg);
}
/* pay button — homepage CHBS gold-gradient submit treatment
   pair documents the LIGHTER gradient stop (worst case) */
.tpmg-btn--pay, .tpmg-btn--pay:hover:not(:disabled), .tpmg-btn--pay:focus-visible:not(:disabled), .tpmg-btn--pay:active:not(:disabled) {
	--ctl-bg: #d9b45e;
	--ctl-fg: #10382d;
	inline-size: 100%;
	background-image: linear-gradient(135deg, #D9B45E, #C9A24B);
	background-color: #C9A24B;
	color: var(--ctl-fg);
	border: 1px solid #B8912F;
	font-weight: 800;
	font-size: 1.05rem;
	padding: 1rem 1.6rem;
	box-shadow: 0 6px 20px rgba(201, 162, 75, .30);
}
.tpmg-btn--pay:hover:not(:disabled), .tpmg-btn--pay:focus-visible:not(:disabled), .tpmg-btn--pay:active:not(:disabled) {
	filter: brightness(.94);
	box-shadow: 0 8px 26px rgba(201, 162, 75, .42);
}
.tpmg-btn--pay:disabled {
	--ctl-bg: #98a1ab;
	--ctl-fg: #ffffff;
	background-image: none;
	background-color: var(--ctl-bg);
	border-color: #98a1ab;
	color: var(--ctl-fg);
	opacity: 1;
	cursor: not-allowed;
	box-shadow: none;
}
.tpmg-paynote { text-align: center; font-size: .8rem; color: var(--tpmg-muted); margin-block-start: .6rem; }

/* ---- sticky bottom bar ------------------------------------------------------- */
.tpmg-sticky {
	position: fixed;
	inset-block-end: 0;
	inset-inline: 0;
	z-index: 999;
	display: flex; align-items: center; justify-content: space-between; gap: 1rem;
	background: var(--tpmg-emerald);
	color: #fff;
	padding: .7rem 1.1rem;
	padding-block-end: calc(.7rem + env(safe-area-inset-bottom, 0px));
	box-shadow: 0 -8px 24px rgba(12, 33, 26, .35);
}
.tpmg-sticky__total { display: flex; flex-direction: column; line-height: 1.3; }
.tpmg-sticky__total span { font-size: .72rem; color: rgba(255, 255, 255, .74); }
.tpmg-sticky__total b { font-size: 1.15rem; color: var(--tp-gold-bright, #e8c65a); }
.tpmg-sticky .tpmg-btn--pay { inline-size: auto; }

/* ---- coming-soon state -------------------------------------------------------- */
.tpmg-wrap--soon .tpmg-form { pointer-events: none; filter: grayscale(.4); opacity: .45; user-select: none; }
.tpmg-soon { margin-block-end: 1.2rem; }
.tpmg-soon__box {
	background: linear-gradient(135deg, var(--tpmg-emerald), var(--tpmg-emerald-2));
	color: #fff;
	border-radius: var(--tpmg-radius);
	padding: 2rem 1.6rem;
	text-align: center;
	box-shadow: var(--tpmg-shadow);
}
.tpmg-soon__title { font-size: 1.25rem; font-weight: 800; color: var(--tp-gold-bright, #e8c65a); margin-block-end: .5rem; }
.tpmg-soon__box p { color: rgba(255, 255, 255, .74); margin: 0 0 1.2rem; line-height: 1.8; }

/* ---- confirmation -------------------------------------------------------------- */
.tpmg-conf { text-align: center; padding-block: 2.4rem; }
.tpmg-conf__tick {
	inline-size: 64px; block-size: 64px; line-height: 64px;
	border-radius: 50%;
	background: var(--tpmg-green); color: #fff;
	font-size: 30px; font-weight: 800;
	margin: 0 auto 1rem;
}
.tpmg-conf__title { color: var(--tpmg-emerald); margin: 0 0 .5rem; }
.tpmg-conf__sub { color: var(--tpmg-muted); line-height: 1.8; max-inline-size: 34rem; margin-inline: auto; }
.tpmg-conf__ref { margin-block-start: 1.2rem; font-size: 1rem; }
.tpmg-conf__amount { font-size: 1.6rem; font-weight: 800; color: var(--tpmg-emerald); margin-block-start: .3rem; }
.tpmg-conf__xsell { border-block-start: 1px solid var(--tpmg-line); margin-block-start: 1.6rem; padding-block-start: 1.4rem; }
.tpmg-conf__xtitle { font-weight: 800; margin-block-end: .9rem; }
.tpmg-conf__xsell .tpmg-btn { margin: .25rem .35rem; }

/* ---- honeypot ------------------------------------------------------------------- */
.tpmg-hp { position: absolute; inset-inline-start: -9999px; block-size: 1px; inline-size: 1px; opacity: 0; }

/* ---- flatpickr theming (desktop custom datepicker, site tokens) ------------------- */
.flatpickr-calendar { border-radius: 12px; box-shadow: 0 12px 34px -12px rgba(12, 33, 26, .45); }
.flatpickr-months { background: #0c211a; border-radius: 12px 12px 0 0; }
.flatpickr-months .flatpickr-month,
.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year { background: transparent; color: #e8c65a; fill: #e8c65a; }
.flatpickr-months .flatpickr-prev-month, .flatpickr-months .flatpickr-next-month { color: #e8c65a; fill: #e8c65a; }
.flatpickr-months .flatpickr-prev-month:hover svg, .flatpickr-months .flatpickr-next-month:hover svg { fill: #d4af37; }
.flatpickr-weekdays { background: #0c211a; }
span.flatpickr-weekday { background: #0c211a; color: rgba(232, 198, 90, .85); font-weight: 700; }
.flatpickr-day.selected, .flatpickr-day.selected:hover, .flatpickr-day.selected:focus {
	background: #d4af37; border-color: #d4af37; color: #0c211a; font-weight: 700;
}
.flatpickr-day.today { border-color: #c19d2e; }
.flatpickr-day.today:hover { background: rgba(212, 175, 55, .2); color: #0c211a; }
.flatpickr-day:hover { background: rgba(212, 175, 55, .15); border-color: transparent; }
.flatpickr-day.flatpickr-disabled, .flatpickr-day.prevMonthDay, .flatpickr-day.nextMonthDay { color: #9aa39f; }
body.rtl .flatpickr-calendar { direction: rtl; font-family: "Tajawal", Tahoma, Arial, sans-serif; }

/* Size-up: flatpickr ships a 308px / 39px-cell calendar that reads as cramped
   next to our 56px inputs. Widen it and grow the cells so dates are legible
   and comfortably clickable. Widths must stay in sync: .flatpickr-days,
   .dayContainer and .flatpickr-rContainer all key off the same 7-column grid
   (7 x 52px = 364px), otherwise rows wrap. */
.flatpickr-calendar { inline-size: 364px; }
.flatpickr-calendar .flatpickr-days,
.flatpickr-calendar .flatpickr-rContainer,
.flatpickr-calendar .dayContainer {
	inline-size: 364px;
	min-inline-size: 364px;
	max-inline-size: 364px;
}
.flatpickr-calendar .flatpickr-day {
	max-inline-size: 52px;
	block-size: 46px;
	line-height: 46px;
	font-size: 15px;
}
.flatpickr-calendar .flatpickr-months { padding-block: 4px; }
.flatpickr-calendar .flatpickr-months .flatpickr-month { block-size: 40px; }
.flatpickr-calendar .flatpickr-current-month { font-size: 108%; padding-block-start: 8px; }
.flatpickr-calendar span.flatpickr-weekday { font-size: 13px; }
.flatpickr-calendar .flatpickr-months .flatpickr-prev-month,
.flatpickr-calendar .flatpickr-months .flatpickr-next-month { padding: 10px; }

/* ---- intl-tel-input glue --------------------------------------------------------- */
.tpmg-wrap .iti { inline-size: 100%; }
.tpmg-wrap .iti input[type="tel"] { direction: ltr; }
.tpmg-wrap .iti__selected-dial-code { direction: ltr; }

/* ---- responsive ------------------------------------------------------------------ */
@media (max-width: 700px) {
	.tpmg-grid2, .tpmg-grid2--contact { grid-template-columns: 1fr; }
	.tpmg-card { padding: 1.1rem 1rem; }
	/* service control keeps three equal columns; labels shrink, never wrap */
	.tpmg-svc { gap: .5rem; }
	.tpmg-svc__btn { padding: .85rem .3rem .8rem; }
	.tpmg-svc__label { font-size: .8rem; letter-spacing: .02em; }
}
@media (max-width: 380px) {
	.tpmg-svc__label { font-size: .72rem; letter-spacing: 0; }
	.tpmg-svc__icon { inline-size: 20px; block-size: 20px; }
}
@media (min-width: 861px) {
	.tpmg-sticky { display: none !important; }
}

/* ============================================================================
   v1.5.1 additions — note line + icon bullets for the 2.2 sections
   ========================================================================== */
.tpmgp-note {
	margin: 1rem 0 0;
	font-size: .92rem;
	line-height: 1.8;
	color: var(--tp-muted, #4a5551);
}
.tpmgp-note a { color: #1d6b4f; font-weight: 700; }
.tpmgp-bullets { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.tpmgp-bullet {
	display: flex;
	align-items: flex-start;
	gap: .8rem;
	background: var(--tp-card-bg, #fff);
	border: 1px solid var(--tp-line, #e7e3d7);
	border-radius: 14px;
	box-shadow: var(--tp-shadow, 0 8px 24px -14px rgba(12, 33, 26, .22));
	padding: .9rem 1.1rem;
	font-size: .95rem;
	line-height: 1.75;
	color: var(--tp-ink, #0c211a);
}
.tpmgp-bullet__icon {
	flex: none;
	inline-size: 36px;
	block-size: 36px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: rgba(212, 175, 55, .12);
	color: var(--tp-emerald, #0c211a);
}
.tpmgp-bullet__icon svg { inline-size: 20px; block-size: 20px; }

/* ============================================================================
   v1.5 Phase 5 — booking-page content sections (tpmgp-*), design-token styled
   ========================================================================== */
html { scroll-behavior: smooth; }   /* this stylesheet loads ONLY on the two booking pages */
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

.tpmgp {
	max-inline-size: 860px;
	margin-inline: auto;
	color: var(--tp-ink, #0c211a);
}
body.rtl .tpmgp { font-family: "Tajawal", Tahoma, Arial, sans-serif; }
.tpmgp-sec { margin-block: 2.4rem; }
.tpmgp-h2 {
	color: var(--tp-emerald, #0c211a);
	line-height: 1.25;
	margin: 0 0 1.1rem;
	padding-block-end: .55rem;
	border-block-end: 2px solid rgba(212, 175, 55, .3);
}

/* feature / cross-sell cards: white, thin gold border, icon + bold title + line */
.tpmgp-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: .9rem;
}
.tpmgp-cards--x2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.tpmgp-card {
	display: flex;
	flex-direction: column;
	gap: .45rem;
	background: var(--tp-card-bg, #fff);
	border: 1.2px solid rgba(212, 175, 55, .55);
	border-radius: var(--tp-radius, 1.25rem);
	box-shadow: var(--tp-shadow, 0 8px 24px -14px rgba(12, 33, 26, .22));
	padding: 1.3rem 1.35rem;
}
.tpmgp-card__icon {
	inline-size: 44px;
	block-size: 44px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: rgba(212, 175, 55, .12);
	color: var(--tp-emerald, #0c211a);
}
.tpmgp-card__icon svg { inline-size: 24px; block-size: 24px; }
.tpmgp-card__title { font-weight: 800; font-size: 1.02rem; color: var(--tp-emerald, #0c211a); }
.tpmgp-card__line { font-size: .9rem; line-height: 1.7; color: var(--tp-muted, #4a5551); }
.tpmgp-card--link { text-decoration: none; transition: transform .25s ease, box-shadow .25s ease; }
.tpmgp-card--link:hover {
	transform: translateY(-4px);
	box-shadow: var(--tp-shadow-hover, 0 26px 40px -20px rgba(12, 33, 26, .38)), inset 0 3px 0 var(--tp-gold, #d4af37);
}

/* numbered steps */
.tpmgp-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; }
.tpmgp-step {
	display: flex;
	align-items: flex-start;
	gap: .9rem;
	background: var(--tp-card-bg, #fff);
	border: 1px solid var(--tp-line, #e7e3d7);
	border-radius: calc(var(--tp-radius, 1.25rem) - .35rem);
	box-shadow: var(--tp-shadow, 0 8px 24px -14px rgba(12, 33, 26, .22));
	padding: 1rem 1.15rem;
}
.tpmgp-step__num {
	flex: none;
	inline-size: 2.1rem;
	block-size: 2.1rem;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--tp-emerald, #0c211a);
	color: var(--tp-gold-bright, #e8c65a);
	font-weight: 800;
	font-size: 1rem;
}
.tpmgp-step__body { display: flex; flex-direction: column; gap: .15rem; }
.tpmgp-step__body b { font-weight: 800; color: var(--tp-emerald, #0c211a); }
.tpmgp-step__body span { font-size: .9rem; color: var(--tp-muted, #4a5551); line-height: 1.7; }

/* FAQ — details/summary, first item open, chevron flips */
.tpmgp-faq { display: grid; gap: .6rem; }
.tpmgp-faq__item {
	background: var(--tp-card-bg, #fff);
	border: 1px solid var(--tp-line, #e7e3d7);
	border-radius: 14px;
	box-shadow: var(--tp-shadow, 0 8px 24px -14px rgba(12, 33, 26, .22));
	padding: 0;
	overflow: hidden;
}
.tpmgp-faq__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	cursor: pointer;
	list-style: none;
	font-weight: 800;
	color: var(--tp-emerald, #0c211a);
	padding: 1rem 1.2rem;
	-webkit-tap-highlight-color: transparent;
}
.tpmgp-faq__q::-webkit-details-marker { display: none; }
.tpmgp-faq__chev { color: var(--tp-gold-2, #c19d2e); transition: transform .2s ease; flex: none; }
.tpmgp-faq__item[open] .tpmgp-faq__chev { transform: rotate(180deg); }
.tpmgp-faq__a {
	padding: 0 1.2rem 1.05rem;
	color: var(--tp-muted, #4a5551);
	line-height: 1.85;
	font-size: .95rem;
}

/* trust bar + CTA */
.tpmgp-trust {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	background: linear-gradient(135deg, var(--tp-emerald, #0c211a), var(--tp-emerald-2, #123127));
	border-radius: var(--tp-radius, 1.25rem);
	box-shadow: var(--tp-shadow, 0 8px 24px -14px rgba(12, 33, 26, .22));
	padding: 1.2rem 1.5rem;
}
.tpmgp-trust__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: .4rem 1.4rem;
}
.tpmgp-trust__list li { color: rgba(255, 255, 255, .88); font-size: .92rem; font-weight: 600; }
.tpmgp-trust__tick { color: var(--tp-gold-bright, #e8c65a); font-weight: 800; margin-inline-end: .4rem; }
.tpmgp-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background-image: linear-gradient(135deg, #D9B45E, #C9A24B);
	background-color: #C9A24B;
	color: #10382D;
	border: 1px solid #B8912F;
	border-radius: 999px;
	font-weight: 800;
	font-size: 1rem;
	padding: .8rem 2rem;
	text-decoration: none;
	box-shadow: 0 6px 20px rgba(201, 162, 75, .30);
	transition: filter .2s ease, box-shadow .2s ease, transform .2s ease;
}
.tpmgp-cta:hover, .tpmgp-cta:focus-visible {
	color: #10382D;
	filter: brightness(.95);
	transform: translateY(-1px);
	box-shadow: 0 8px 26px rgba(201, 162, 75, .42);
}
@media (max-width: 640px) {
	.tpmgp-trust { justify-content: center; text-align: center; }
	.tpmgp-cta { inline-size: 100%; }
}

/* v1.7.1 (5 Aug, owner): extras (porter/lounge) price matches the vehicle
   cards — own line, inline-end aligned, deep gold 18px. */
#tpmg-s5 .tpmg-opt__body { display: flex; flex-direction: column; }
#tpmg-s5 .tpmg-opt__name  { order: 1; }
#tpmg-s5 .tpmg-opt__price { order: 2; align-self: flex-end; font-size: 18px; font-weight: 800; color: #a8842a; line-height: 1.3; }
#tpmg-s5 .tpmg-opt__desc  { order: 3; }

/* v1.7.4 (6 Aug, owner): the min-notice WhatsApp handoff reads as a friendly
   invitation, not an error — soft green card + recognisable WhatsApp button
   (deep WA teal #128c7e keeps white text at ~4.7:1). */
#tpmg-noticeblock {
	background: #f4faf6;
	border: 1px solid #c8e2d1;
	color: #1d4d33;
	flex-direction: column;
	align-items: stretch;
	gap: .9rem;
	border-radius: 14px;
	padding: 16px 18px;
	font-weight: 600;
	line-height: 1.75;
}
#tpmg-noticeblock .tpmg-btn {
	--ctl-bg: #128c7e; /* WhatsApp teal */
	--ctl-fg: #ffffff;
	background: #128c7e;
	border: none;
	color: #fff;
	font-weight: 800;
	align-self: flex-start;
	padding: .7rem 1.5rem;
	border-radius: 999px;
}
#tpmg-noticeblock .tpmg-btn:hover,
#tpmg-noticeblock .tpmg-btn:focus,
#tpmg-noticeblock .tpmg-btn:focus-visible {
	background: #0e7367;
	color: #fff;
}

/* v1.7.7 (6 Aug, user screenshots): the country list's containing block is the
   ABSOLUTE .iti__flag-container (v1.7.6's right:0 pinned it to that tiny box).
   Anchor at the flag side with a real fixed width instead — wide enough for
   full names + dial codes, capped for phones, and it can never escape the card
   because the flag container sits at the field's inline edge. */
.tpmg-wrap .iti { position: relative; }
.tpmg-wrap .iti__country-list {
	position: absolute;
	left: 0 !important;
	right: auto !important;
	width: min(340px, 86vw) !important;
	max-inline-size: none;
	max-block-size: 280px;
	overflow-y: auto;
	overflow-x: hidden;
	white-space: normal;
	box-shadow: 0 10px 28px rgba(29, 45, 36, .16);
	border-radius: 12px;
	border: 1px solid #d9ddd6;
}
.tpmg-wrap .iti__country {
	display: flex;
	align-items: center;
	gap: .5rem;
	padding-block: .55rem;
}
.tpmg-wrap .iti__country-name { flex: 1; min-inline-size: 0; }
.tpmg-wrap .iti__dial-code { direction: ltr; color: #5b6660; }
.tpmg-wrap .iti__divider { border-block-end: 1px solid #e3e0d6; }

/* v1.9.9 (6 Aug, owner): the trust strip now matches the BOOKING PAGE strip
   (`.tpbh-trust`, inline <style> in page 1418) card-for-card — same grid, card
   chrome, icon chip and accented payment card. Values mirrored deliberately; if
   the booking page's strip is restyled, re-copy from there, do not re-invent.
   This replaces the v1.8 -> v1.9.4 pill design and every mobile squeeze hack it
   needed (the pills clipped because a pill must fit its text on one line; cards
   wrap instead, so none of that applies any more). */
.tpmg-wrap .tpmg-trust {
	list-style: none;
	margin: 1.1rem 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
	text-align: start;
}
@media (min-width: 960px) {
	.tpmg-wrap .tpmg-trust { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
}
.tpmg-wrap .tpmg-trust li {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	min-block-size: 52px;
	font-size: clamp(.7rem, 2.95vw, .88rem);
	line-height: 1.35;
	font-weight: 500;
	color: #16241f;
	border: 1px solid rgba(12, 33, 26, .10);
	border-radius: 12px;
	padding: 9px 10px;
	background: #fff;
	box-shadow: 0 1px 2px rgba(12, 33, 26, .06);
	cursor: default;
}
/* Owner: a card's label never wraps. The column counts above are chosen so the
   label always fits at its normal size — nowrap is the enforcement, not the fit. */
.tpmg-wrap .tpmg-trust li > span { min-inline-size: 0; white-space: nowrap; }
/* The licence label ("UK-licensed · PHOP950") is longer than the booking page's
   "UK-licensed company", so it wrapped to a second line and stretched the whole
   row to 80px. The booking page already shrinks this one label below 960px; we
   need it at every width. Measured at 1512px: .9em is enough for the Arabic
   label but the wider Latin one still wrapped — .85em holds both at the 52px the
   other three cards sit at. */
.tpmg-wrap .tpmg-trust li:first-child > span { font-size: .85em; }
.tpmg-wrap .tpmg-trust svg {
	inline-size: 26px;
	block-size: 26px;
	flex: 0 0 26px;
	padding: 4px;
	border-radius: 8px;
	background: rgba(212, 175, 55, .12);
	color: #8a6a10;
	box-sizing: border-box;
}
/* Accent card, styled exactly as `.tpbh-pay` is on the booking page. Owner moved
   it from the payment card (4th) to FREE CANCELLATION (3rd) — that is the claim
   worth drawing the eye to here. Order in form.php: 1 licence, 2 airside,
   3 cancellation, 4 payment; keep this selector in step if that order changes. */
.tpmg-wrap .tpmg-trust li:nth-child(3) {
	font-weight: 600;
	color: #0c211a;
	background: rgba(212, 175, 55, .07);
	border-color: rgba(212, 175, 55, .5);
}
.tpmg-wrap .tpmg-trust li:nth-child(3) svg { background: #d4af37; color: #0c211a; }

/* Phones: owner wants BOTH two cards per row AND no wrapped label. At 360px the
   default chrome (26px icon, 10px padding, 8px gap) leaves only ~92px of text
   width and the longest label would need a 9-10px font — unreadable. Buying the
   width back from the chrome instead of from the type: smaller icon, tighter
   padding and gaps. Measured at 360px this lands both languages on one line at
   12px, which is the clamp's floor here. The licence label keeps its extra
   step-down (it is the outlier, not the type scale). */
/* Owner (16 Aug): "enlarge it so it fills its card and stays on one line" — said
   of the licence badge, which was the only one stepped down (a flat .8em) and so
   rendered visibly smaller than its neighbours. Replaced the whole per-width
   guesswork with an AUTO-FIT: every label now gets the largest size its own card
   can hold on one line.
     text width per card = (100vw - 129px)/2
       (page gutters 27.5+27.5, grid gap 6 => card = (100vw - 61px)/2;
        card chrome = 5+5 padding + 2 border + 18 icon + 4 gap = 34px)
     font-size = text width / (px of width the label needs per 1px of font)
   Those per-label ratios were measured on the live page (Tajawal, the real
   strings) and carry ~2% headroom: AR 10.6 / 8.8 / 5.5 / 4.0, EN 11.6 / 8.7 /
   9.2 / 3.9 — halved into the multipliers below. Capped at .88rem (the desktop
   size) so a wide phone never renders the strip LARGER than the desktop one.
   nth-child order follows form.php: 1 licence, 2 airside, 3 cancellation,
   4 payment — keep these in step if that order ever changes. */
@media (max-width: 599px) {
	.tpmg-wrap .tpmg-trust { gap: 6px; }
	.tpmg-wrap .tpmg-trust li { gap: 4px; padding: 8px 5px; font-size: clamp(11px, 3.5vw, .88rem); }
	.tpmg-wrap .tpmg-trust svg {
		inline-size: 18px;
		block-size: 18px;
		flex: 0 0 18px;
		padding: 3px;
		border-radius: 6px;
	}
	.tpmg-wrap .tpmg-trust li:nth-child(1) > span { font-size: clamp(9px, calc((100vw - 129px) * .0431), .88rem); }
	.tpmg-wrap .tpmg-trust li:nth-child(2) > span { font-size: clamp(9px, calc((100vw - 129px) * .0575), .88rem); }
	.tpmg-wrap .tpmg-trust li:nth-child(3) > span { font-size: clamp(9px, calc((100vw - 129px) * .0543), .88rem); }
	.tpmg-wrap .tpmg-trust li:nth-child(4) > span { font-size: clamp(9px, calc((100vw - 129px) * .128), .88rem); }
	body.rtl .tpmg-wrap .tpmg-trust li:nth-child(1) > span { font-size: clamp(9px, calc((100vw - 129px) * .0472), .88rem); }
	body.rtl .tpmg-wrap .tpmg-trust li:nth-child(2) > span { font-size: clamp(9px, calc((100vw - 129px) * .0568), .88rem); }
	body.rtl .tpmg-wrap .tpmg-trust li:nth-child(3) > span { font-size: clamp(9px, calc((100vw - 129px) * .0909), .88rem); }
	body.rtl .tpmg-wrap .tpmg-trust li:nth-child(4) > span { font-size: clamp(9px, calc((100vw - 129px) * .125), .88rem); }
}
/* Below 340px two cards per row leave less text width than the smallest readable
   size needs (English needs 8.2px at 320px). One card per row instead: the label
   gets the full content width, so a flat 11px fits every string with room over. */
@media (max-width: 339px) {
	.tpmg-wrap .tpmg-trust { grid-template-columns: 1fr; }
	.tpmg-wrap .tpmg-trust li { min-block-size: 44px; }
	.tpmg-wrap .tpmg-trust li > span { font-size: 11px !important; }
}

/* v1.8.3: shared footnote under the form for the asterisked trust badges. */
.tpmg-footnote {
	margin: 1rem auto 0;
	max-inline-size: 640px;
	text-align: center;
	font-size: .8rem;
	line-height: 1.8;
	color: #5b6660;
}

/* v1.8.6 mobile pill grid REMOVED in v1.9.9 — the card strip is already a 2x2
   grid at this width and `white-space:nowrap` would defeat the cards' wrapping. */

/* v1.8.8 (6 Aug, iPhone screenshot): compact mobile header for the two form
   pages (this stylesheet only loads there) — smaller one-breath H1, tighter
   subtitle, breathing room so the trust pills never kiss the screen edge. */
@media (max-width: 640px) {
	h1.wp-block-heading {
		font-size: clamp(1.55rem, 6.6vw, 1.9rem);
		line-height: 1.32;
		margin-block: .4rem .55rem;
	}
	.tpmg-sub {
		font-size: .92rem;
		line-height: 1.7;
		margin-block: .4rem .95rem;
	}
}

/* v1.8.9: H1 one notch up. (Its pill-squeeze rules went with v1.9.9.) */
@media (max-width: 640px) {
	h1.wp-block-heading {
		font-size: clamp(1.75rem, 7.4vw, 2.1rem);
	}
}

/* v1.9: title half a notch down (owner). */
@media (max-width: 640px) {
	h1.wp-block-heading { font-size: clamp(1.65rem, 7vw, 2rem); }
}

/* v1.9.1: kill the tall gap between the H1 and the subtitle.
   (The long/short pill re-pairing that lived here was deleted in v1.9.9 — cards
   wrap their text, so pairing by length no longer buys anything, and `order`
   would only scramble the reading order for screen readers.) */
@media (max-width: 640px) {
	h1.wp-block-heading { margin-block-end: .4rem !important; }
	.tpmg-wrap { margin-block-start: 0; }
	.tpmg-head { margin-block-start: 0; }
	.tpmg-sub { margin-block-start: .3rem; }
}

/* v1.9.2 (`min-inline-size:max-content !important`) and v1.9.4 (centred pill
   text) both REMOVED in v1.9.9. They were pill-era fixes and would now fight the
   card layout — the !important min-width in particular would force cards wider
   than their grid track and reintroduce overflow. The near-black card text
   (#16241f) keeps the owner's "black text" intent from v1.9.4. */

/* v175: sticky pay bar slides up only after the visitor starts scrolling */
.tpmg-sticky:not([hidden]) { animation: tpmgSlideUp .28s ease; }
@keyframes tpmgSlideUp { from { transform: translateY(105%); } to { transform: translateY(0); } }

/* =============================================================================
   COUNTRY LIST ON PHONES (16 Aug 2026, owner: "the country-code list will not
   scroll"). Root cause: intl-tel-input v17 detects a mobile UA, adds `iti-mobile`
   to <body> and MOVES the dropdown to document.body — outside `.tpmg-wrap`, so
   every rule we wrote for it above stops applying and the phone got the library's
   raw default: a fixed box inset 30px whose list is `max-height:100%`, sitting at
   z-index 1060 UNDER the site's sticky header and under the pay bar, with the
   page free to take over the touch scroll.
   Fixed here by styling the popup where it actually lives (body scope):
   an explicit vh-based max-height (never a percentage of a fixed parent), its own
   scroll containment so the finger scrolls the list and not the page behind it,
   and a z-index above the site's fixed furniture. Styling matches the desktop
   list above so both look like one component.
   ========================================================================== */
body.iti-mobile .iti--container {
	position: fixed;
	inset: 0;                        /* full-viewport overlay: it IS the backdrop */
	z-index: 100000;                 /* over the sticky header (999) + pay bar */
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	background: rgba(12, 33, 26, .45);
}
body.iti-mobile .iti--container .iti__country-list {
	position: static;
	inline-size: 100%;
	max-inline-size: 420px;
	max-block-size: min(70vh, 560px);
	overflow-y: auto;
	overscroll-behavior: contain;    /* the list scrolls, not the page behind it */
	-webkit-overflow-scrolling: touch;
	margin: 0;
	padding-block: .25rem;
	background: #fff;
	border: 1px solid #d9ddd6;
	border-radius: 14px;
	box-shadow: 0 24px 60px rgba(12, 33, 26, .35);
	white-space: normal;
}
body.iti-mobile .iti__country {
	display: flex;
	align-items: center;
	gap: .55rem;
	padding: .7rem .85rem;
	line-height: 1.4;
	font-size: .95rem;
	color: #16241f;
}
body.iti-mobile .iti__country-name { flex: 1; min-inline-size: 0; }
body.iti-mobile .iti__dial-code { direction: ltr; color: #5b6660; }
body.iti-mobile .iti__divider { margin-block: .3rem; border-block-end: 1px solid #e3e0d6; }
body.iti-mobile .iti__country.iti__highlight { background: rgba(212, 175, 55, .14); }

/* =============================================================================
   17 Aug 2026 — three conversion fixes (owner: "نفّذ كل التوصيات")
   1. the pay gate explains itself   2. custom airport sheet   3. country search
   ========================================================================== */

/* ---- 1) pay gate ---------------------------------------------------------
   The button keeps its shape and stays clickable; only its colour says "not
   yet". Contrast pair for the off state: #6f7b76 on #e7e3d7 = 4.6:1 (the
   audit's floor for a control that still takes a tap). */
/* Owner (17 Aug): "keep the button looking like itself". The first pass turned
   it cream-on-dark, which read as a different, bigger button (measured: the box
   is identical at 83x54 in both states — it was the pale fill that bloomed).
   So the blocked state keeps the same gold pill, the same border and the same
   metrics, just muted one step. Pair #cdb87f / #10382d = 6.6:1. */
.tpmg-wrap .tpmg-btn--pay.is-off,
.tpmg-wrap .tpmg-sticky .tpmg-btn.is-off {
	--ctl-bg: #cdb87f;
	--ctl-fg: #10382d;
	background-image: none;
	background-color: var(--ctl-bg);
	border-color: #b39c5f;
	color: var(--ctl-fg);
	box-shadow: none;
}
.tpmg-payhint {
	margin: .5rem 0 0;
	font-size: .85rem;
	line-height: 1.7;
	color: var(--tpmg-muted);
	text-align: center;
}
/* the field the customer was sent to — a brief ring, never a permanent red */
.tpmg-flash {
	animation: tpmg-flash 1.5s ease;
	border-radius: 12px;
}
@keyframes tpmg-flash {
	0%, 100% { box-shadow: 0 0 0 0 rgba(212, 175, 55, 0); }
	15%, 65% { box-shadow: 0 0 0 3px rgba(212, 175, 55, .55); }
}
@media (prefers-reduced-motion: reduce) {
	.tpmg-flash { animation: none; box-shadow: 0 0 0 3px rgba(212, 175, 55, .55); }
}

/* ---- 2) airport picker ---------------------------------------------------
   The <select> stays in the DOM (it is still the value that gets submitted),
   just out of sight — never display:none, which would drop it from the form. */
.tpmg-wrap .tpmg-visually-hidden {
	position: absolute !important;
	inline-size: 1px; block-size: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip-path: inset(50%);
	white-space: nowrap; border: 0;
}
.tpmg-wrap .tpmg-appick {
	inline-size: 100%;
	min-block-size: 46px;
	display: flex; align-items: center; justify-content: space-between; gap: .6rem;
	padding: 9px 14px;
	font: inherit;
	font-size: 1rem;
	font-weight: 500;
	text-align: start;
	color: var(--tpmg-ink);
	background: #fff;
	border: 1px solid var(--tpmg-line);
	border-radius: 12px;
	cursor: pointer;
}
.tpmg-wrap .tpmg-appick:focus-visible { outline: 2px solid var(--tpmg-gold); outline-offset: 2px; }
.tpmg-appick__name { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tpmg-appick__chev { inline-size: 18px; block-size: 18px; flex: 0 0 18px; color: var(--tpmg-muted); }

/* Owner (17 Aug): "use the site font in the airport list". Both popups are
   appended to <body>, OUTSIDE .tpmg-wrap, so the wrap's Tajawal rule never
   reaches them and buttons/inputs fall back to the platform UI font on iOS.
   Same fix the flatpickr calendar and the .tpmgp page blocks already carry:
   pin the stack explicitly, and use weights Tajawal actually ships (400/500/
   700 — the 800 the rows had was a synthesised faux-bold, which is exactly
   what reads as "not our font"). */
.tpmg-sheet,
.tpmg-sheet button,
.tpmg-sheet input,
body.iti-mobile .iti--container,
body.iti-mobile .iti--container input,
body.iti-mobile .iti--container button,
.tpmg-cs__input,
.iti__country,
.iti__country-list {
	font-family: "Tajawal", Tahoma, Arial, sans-serif;
}

/* shared sheet (same shape as the phone country popup, so both read as one UI) */
.tpmg-sheet {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex; align-items: center; justify-content: center;
	padding: 16px;
	background: rgba(12, 33, 26, .45);
}
.tpmg-sheet__card {
	inline-size: 100%;
	max-inline-size: 420px;
	max-block-size: min(70vh, 560px);
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	background: #fff;
	border: 1px solid #d9ddd6;
	border-radius: 14px;
	box-shadow: 0 24px 60px rgba(12, 33, 26, .35);
	padding-block: .3rem;
}
.tpmg-sheet__head {
	font-weight: 700;
	position: sticky;                /* the list scrolls to the current airport
	                                    on open — without this the title slid
	                                    under the card edge (owner screenshot) */
	inset-block-start: 0;
	z-index: 2;
	padding: .7rem .9rem .6rem;
	font-size: .95rem;
	color: var(--tpmg-ink);
	background: #fff;
	border-block-end: 1px solid #ece9df;
}
/* region label — quiet, so the airport names stay the thing you read */
.tpmg-sheet__group {
	padding: .65rem .9rem .3rem;
	font-size: .78rem; font-weight: 700; letter-spacing: .06em;
	text-transform: uppercase;
	color: #6b7671;
	background: #fbfaf6;
	border-block-start: 1px solid #f0ede4;
}
body.rtl .tpmg-sheet__group { letter-spacing: 0; font-size: .8rem; }
.tpmg-sheet__group:first-of-type { border-block-start: 0; }
body.rtl .tpmg-sheet__head { letter-spacing: 0; }
.tpmg-sheet__row {
	inline-size: 100%;
	display: flex; align-items: center; gap: .6rem;
	padding: .7rem .9rem;
	font: inherit;
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.45;
	text-align: start;
	color: #16241f;
	background: none;
	border: 0;
	cursor: pointer;
}
.tpmg-sheet__row:hover { background: rgba(12, 33, 26, .04); }
.tpmg-sheet__row.is-on {
	background: rgba(212, 175, 55, .2);
	font-weight: 700;
	box-shadow: inset 3px 0 0 0 var(--tpmg-gold);   /* logical: start edge in both dirs */
}
body.rtl .tpmg-sheet__row.is-on { box-shadow: inset -3px 0 0 0 var(--tpmg-gold); }
.tpmg-sheet__row:focus-visible { outline: 2px solid var(--tpmg-gold); outline-offset: -2px; }
.tpmg-sheet__label { flex: 1; min-inline-size: 0; }
.tpmg-sheet__code {
	flex: 0 0 auto;
	font-size: .72rem; font-weight: 700; letter-spacing: .06em;
	color: #8a6a10;
	background: rgba(212, 175, 55, .14);
	border-radius: 6px;
	padding: .2rem .4rem;
}
.tpmg-sheet__price { flex: 0 0 auto; font-size: .8rem; color: var(--tpmg-muted); }

/* ---- 3) country search ---------------------------------------------------
   Sticky so it survives the scroll through 240 rows. */
.tpmg-cs {
	position: sticky;
	inset-block-start: 0;
	z-index: 2;
	list-style: none;
	padding: .45rem .5rem;
	background: #fff;
	border-block-end: 1px solid #ece9df;
}
.tpmg-cs__input {
	inline-size: 100%;
	min-block-size: 40px;
	padding: 8px 12px;
	font: inherit;
	font-size: .95rem;
	color: #16241f;
	background: #f7f5ef;
	border: 1px solid var(--tpmg-line);
	border-radius: 10px;
	-webkit-appearance: none;
	appearance: none;
}
.tpmg-cs__input:focus { outline: 2px solid var(--tpmg-gold); outline-offset: -1px; }
.tpmg-cs__none {
	list-style: none;
	padding: .9rem;
	text-align: center;
	color: var(--tpmg-muted);
	font-size: .9rem;
}

/* ─────────────────────────────────────────────────────────────
   18 Aug 2026 — بلاغ مالك بلقطة: «قائمة المطار تحتاج تنسيق الألوان مع
   جميع حالات التمرير والنقر، وأسماء المطارات تظهر متقطعة».

   ما كان يحدث: صفوف اللوحة عناصر <button>، فكانت تلتقط قواعد الأزرار
   العامة في الموقع لحظة :active/:focus فيفقد النص لونه (نفس عائلة عطل
   «نص الأزرار يختفي عند الضغط»)، والصف المختار .is-on بخلفية ذهبية كان
   نصه يخرج فاتحًا فيصير غير مقروء. اللون هنا مثبَّت في كل الحالات
   و-webkit-text-fill-color إلزامي لأن قاعدة الموقع تفرضه.
   ───────────────────────────────────────────────────────────── */
.tpmg-sheet__row,
.tpmg-sheet__row:hover,
.tpmg-sheet__row:focus,
.tpmg-sheet__row:focus-visible,
.tpmg-sheet__row:active,
.tpmg-sheet__row.is-on,
.tpmg-sheet__row.is-on:hover,
.tpmg-sheet__row.is-on:active { color: #0c211a; -webkit-text-fill-color: #0c211a; }

.tpmg-sheet__row:active { background: rgba(12, 33, 26, .08); }
.tpmg-sheet__row.is-on,
.tpmg-sheet__row.is-on:hover { background: rgba(212, 175, 55, .18); }

/* الشارة على الصف المختار: ذهبي ممتلئ بنص داكن (نفس منطق أزرار المركبات) */
/* قيمة صريحة لا var(): اللوحة ابنة <body> خارج .tpmg-wrap حيث تُعرَّف
   متغيرات الإضافة — قِيس: var فارغة أعطت خلفية شفافة تمامًا. */
.tpmg-sheet__row.is-on .tpmg-sheet__code { background: #d4af37; color: #0c211a; -webkit-text-fill-color: #0c211a; }

.tpmg-sheet__row .tpmg-sheet__price,
.tpmg-sheet__row:hover .tpmg-sheet__price,
.tpmg-sheet__row:active .tpmg-sheet__price,
.tpmg-sheet__row.is-on .tpmg-sheet__price { color: #5c6b64; -webkit-text-fill-color: #5c6b64; }

/* على اللمس لا يوجد «مرور»: تظليل hover كان يعلق على آخر صف لُمس */
@media (hover: none) and (pointer: coarse) {
	.tpmg-sheet__row:hover { background: transparent; }
	.tpmg-sheet__row.is-on:hover { background: rgba(212, 175, 55, .18); }
}

/* اسم المطار سطر واحد ما أمكن؛ الرمز يُحذف من النص في tpmg-v192.js لأن
   الشارة تعرضه أصلًا (كان «مطار ستانستد لندن (STN)» يلتف على سطرين). */
.tpmg-sheet__label { text-wrap: pretty; }