/* ============================================================================
   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; }
.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 96px;
	grid-template-rows: auto auto;
	background-color: #0c211a;
	background-image: linear-gradient(135deg, #0c211a, #123127);
	color: #fff;
	border-radius: 12px;
	position: relative;
	overflow: hidden;
	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;
	text-align: center;
	padding: .35rem .9rem;
}
.tpmg-bp__main { padding: 1.2rem 1.35rem 1.25rem; min-inline-size: 0; }
.tpmg-bp__route { display: flex; align-items: center; justify-content: space-between; gap: .9rem; }
.tpmg-bp__iata { font-size: 1.35rem; font-weight: 800; letter-spacing: .1em; color: #fff; direction: ltr; }
.tpmg-bp__path { flex: 1; position: relative; display: flex; align-items: center; justify-content: center; min-inline-size: 2.6rem; block-size: 20px; }
.tpmg-bp__path::before {
	content: "";
	position: absolute;
	inset-inline: 0;
	inset-block-start: 50%;
	block-size: 2px;
	margin-block-start: -1px;
	background: linear-gradient(90deg, transparent, var(--tpmg-gold), transparent);
}
.tpmg-bp__plane { position: relative; inline-size: 17px; block-size: 17px; color: var(--tp-gold-bright, #e8c65a); }
body.rtl .tpmg-bp__plane { transform: scaleX(-1); }
.tpmg-bp__airline { color: rgba(255, 255, 255, .75); font-size: .82rem; margin-block-start: .35rem; }
.tpmg-bp__grid { display: grid; grid-template-columns: repeat(3, auto); justify-content: space-between; gap: .3rem 1.4rem; margin-block-start: 1rem; }
.tpmg-bp__grid i {
	display: block; font-style: normal;
	font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
	color: rgba(255, 255, 255, .62);
}
body.rtl .tpmg-bp__grid i { letter-spacing: 0; }
.tpmg-bp__grid b { font-size: .96rem; font-weight: 800; direction: ltr; }
.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, .55);
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .45rem;
	padding: 1.1rem .35rem;
}
.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: .58rem; font-weight: 800; letter-spacing: .28em; text-transform: uppercase; color: var(--tp-gold-bright, #e8c65a); }
.tpmg-bp__code { color: var(--tp-gold-bright, #e8c65a); font-weight: 800; font-size: 1.05rem; letter-spacing: .06em; direction: ltr; }
.tpmg-bp__date { font-size: .6rem; line-height: 1.45; color: rgba(255, 255, 255, .75); text-align: center; padding-inline: .15rem; }
/* faint barcode block (4.2) — pure CSS, restrained */
.tpmg-bp__barcode {
	display: block;
	inline-size: 44px;
	block-size: 13px;
	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: .3;
	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; }
.tpmg-step__btn:hover:not(:disabled),
.tpmg-step__btn:active:not(:disabled) {
	--ctl-bg: #0c211a;
	--ctl-fg: #ffffff;
	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; }

/* ---- 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%; }
}