/* =========================================================================
   TMT Trip Details (Gravity Forms #3) — editorial redesign, "v2" spec.

   Reskins GF's own markup only. Every piece of copy on this screen is real
   text rendered by phase-20-trip-details-editorial.php — no ::before/::after
   content is used for anything a human reads, because Weglot translates the
   DOM and cannot see generated content.

   The locked booking fields (name/activity/trip/dates/participants) are
   visually hidden here and re-presented in the header's fact grid. They are
   hidden with the clip/1px technique and are never disabled, so they keep
   submitting exactly as before.
   ========================================================================= */

.tmt-td-page-bg {
	--ink: #16241D;
	--muted: #4E5E55;
	--muted-2: #5F6E65;
	--muted-3: #7C8A81;
	--muted-4: #8B978F;
	--card: #FBFAF6;
	--line: #E4E7E0;
	--line-2: #DCE0D9;
	--input-line: #CBD2C9;
	--orange: #EB6909;
	--orange-deep: #D93F00;
	--orange-hover: #E04400;
	--orange-tint: #FFF1EA;
	--green: #2D8659;

	position: relative;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
	width: 100vw;
	box-sizing: border-box;
	background: linear-gradient( 180deg, #CBD0C8 0%, #C2C8C0 60%, #BAC1B8 100% );
	padding: 40px 0 90px;
	font-family: Archivo, system-ui, sans-serif;
	color: var( --ink );
	-webkit-font-smoothing: antialiased;
}

.tmt-td-shell {
	max-width: 1000px;
	margin: 0 auto;
	padding: 0 32px;
	box-sizing: border-box;
}

/* ---- top row -------------------------------------------------------- */
.tmt-td-top-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
	padding: 0 0 24px;
}
.tmt-td-logo-box {
	background: var( --ink );
	border-radius: 10px;
	padding: 12px 16px;
	display: flex;
	align-items: center;
}
.tmt-td-logo-box img { width: 158px; height: auto; display: block; }
.tmt-td-eyebrow-loc {
	font-family: 'JetBrains Mono', monospace;
	font-size: 10.5px;
	letter-spacing: .16em;
	color: var( --muted );
}

.tmt-td-card {
	background: var( --card );
	border-radius: 16px;
	box-shadow: 0 18px 44px rgba( 22, 36, 29, .13 );
	overflow: hidden;
}

/* ---- trail-pass header over the trip's own photo -------------------- */
.tmt-td-header {
	position: relative;
	background-color: #2A3B32;
	background-size: cover;
	background-position: center;
}
/* Scrim so the headline stays legible over any photo. */
.tmt-td-header::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient( 180deg, rgba( 18, 30, 24, .62 ) 0%, rgba( 18, 30, 24, .82 ) 100% );
}
.tmt-td-header-inner {
	position: relative;
	z-index: 1;
	padding: 32px 34px 28px;
}
.tmt-td-pass {
	display: block;
	font-family: 'JetBrains Mono', monospace;
	font-size: 10.5px;
	letter-spacing: .18em;
	color: #FFB894;
}
.tmt-td-title {
	margin: 10px 0 20px;
	font-family: 'Barlow Condensed', sans-serif;
	font-weight: 800;
	font-size: 52px;
	line-height: .92;
	text-transform: uppercase;
	color: #FBFAF6;
	text-shadow: 0 2px 20px rgba( 0, 0, 0, .4 );
}
.tmt-td-title-name,
.tmt-td-title-dest { display: block; }

/* Five facts, so the column count is set per breakpoint rather than left to
   auto-fit: any count that doesn't divide into 5 leaves the last cell
   stranded beside an empty hole. Where that happens the last cell is
   stretched across the full row instead (see the breakpoints below). */
.tmt-td-facts {
	display: grid;
	grid-template-columns: repeat( 5, minmax( 0, 1fr ) );
	gap: 2px;
	background: rgba( 255, 255, 255, .18 );
	border-radius: 12px;
	overflow: hidden;
}
.tmt-td-fact {
	background: var( --card );
	padding: 14px 16px;
	display: flex;
	flex-direction: column;
	gap: 5px;
	min-width: 0;
}
.tmt-td-fact-k {
	font-family: 'JetBrains Mono', monospace;
	font-size: 9.5px;
	letter-spacing: .13em;
	color: #9A8C82;
}
.tmt-td-fact-v {
	font-size: 15px;
	font-weight: 600;
	line-height: 1.25;
	word-break: break-word;
}

/* ---- footer small print --------------------------------------------- */
.tmt-td-foot-print {
	display: flex;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
	margin-top: 18px;
	font-family: 'JetBrains Mono', monospace;
	font-size: 10.5px;
	letter-spacing: .1em;
	color: var( --muted );
}

/* =========================================================================
   Gravity Forms #3 reskin
   ========================================================================= */
.tmt-td-card #gform_wrapper_3 {
	max-width: none !important;
	margin: 0 !important;
	padding: 28px 34px 0 !important;
	box-sizing: border-box;
	background: transparent;
	font-family: Archivo, system-ui, sans-serif !important;
}
.tmt-td-card #gform_wrapper_3 .gform_heading { display: none !important; }

.tmt-td-card #gform_wrapper_3 .gform_fields {
	display: flex !important;
	flex-flow: row wrap !important;
	gap: 22px 24px !important;
	align-items: start !important;
}
.tmt-td-card #gform_wrapper_3 .gfield {
	flex: 1 1 100%;
	max-width: 100%;
	margin: 0 !important;
}

/* THE LOCKED FIELDS. Re-presented in the header fact grid, so hidden here —
   but kept in the DOM and enabled so they still submit. Never swap this for
   `disabled`, which would drop them from the POST. */
.tmt-td-card #gform_wrapper_3 #field_3_63,
.tmt-td-card #gform_wrapper_3 #field_3_55,
.tmt-td-card #gform_wrapper_3 #field_3_56,
.tmt-td-card #gform_wrapper_3 #field_3_41,
.tmt-td-card #gform_wrapper_3 #field_3_42 {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	margin: -1px !important;
	padding: 0 !important;
	overflow: hidden !important;
	clip: rect( 0 0 0 0 ) !important;
	clip-path: inset( 50% ) !important;
	white-space: nowrap !important;
	border: 0 !important;
	pointer-events: none !important;
}

/* GF's field order on this form is participants → briefing → hotels →
   agency, but the design reads briefing → agency → hotels → participants.
   Reordering with flex `order` keeps the DOM (and therefore the tab order
   relative to each field's own label) intact while presenting the sections
   the way the design intends. Each section head carries the same order as
   the fields it introduces so they travel together. */
.tmt-td-sec--briefing { order: 1 !important; }
.tmt-td-card #gform_wrapper_3 #field_3_69 { order: 2; }
.tmt-td-card #gform_wrapper_3 #field_3_65 { order: 3; }
.tmt-td-card #gform_wrapper_3 #field_3_67 { order: 4; }

.tmt-td-sec--agency { order: 5 !important; }
.tmt-td-card #gform_wrapper_3 #field_3_49 { order: 6; }
.tmt-td-card #gform_wrapper_3 #field_3_50 { order: 7; }

.tmt-td-sec--hotels { order: 8 !important; }
.tmt-td-card #gform_wrapper_3 #field_3_46 { order: 9; }
.tmt-td-card #gform_wrapper_3 #field_3_47 { order: 10; }

.tmt-td-sec--people { order: 11 !important; }
.tmt-td-card #gform_wrapper_3 #field_3_51 { order: 12; }

/* ---- section eyebrows ------------------------------------------------ */
.tmt-td-section-head {
	flex: 1 1 100% !important;
	width: 100%;
	margin: 6px 0 -8px;
}
.tmt-td-eyebrow {
	display: block;
	font-family: 'JetBrains Mono', monospace;
	font-size: 10.5px;
	letter-spacing: .18em;
	color: var( --orange-deep );
}
.tmt-td-people-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	margin-top: 20px;
	padding-top: 24px;
	border-top: 1px solid var( --line );
}
.tmt-td-people-head h2 {
	margin: 8px 0 0;
	font-family: 'Barlow Condensed', sans-serif;
	font-weight: 800;
	font-size: 36px;
	line-height: 1;
	text-transform: uppercase;
	color: var( --ink );
}
.tmt-td-progress {
	font-family: 'JetBrains Mono', monospace;
	font-size: 10.5px;
	letter-spacing: .1em;
	color: var( --muted-4 );
	white-space: nowrap;
}
.tmt-td-progress.is-all-done { color: var( --green ); }

/* ---- field labels + inputs ------------------------------------------ */
.tmt-td-card #gform_wrapper_3 .gfield_label {
	font-size: 11.5px !important;
	font-weight: 600 !important;
	letter-spacing: .09em !important;
	color: var( --muted-3 ) !important;
	text-transform: uppercase !important;
	margin: 0 0 7px !important;
}

/* Briefing block sits beside the agency questions on wide screens. */
.tmt-td-card #gform_wrapper_3 #field_3_69,
.tmt-td-card #gform_wrapper_3 #field_3_65,
.tmt-td-card #gform_wrapper_3 #field_3_67 { flex: 0 1 auto; }
.tmt-td-card #gform_wrapper_3 #field_3_65 { flex: 1 1 190px; min-width: 170px; }
.tmt-td-card #gform_wrapper_3 #field_3_67 { flex: 0 1 260px; min-width: 240px; }
.tmt-td-card #gform_wrapper_3 #field_3_69 {
	flex: 1 1 100%;
	font-size: 14px;
	line-height: 1.5;
	color: var( --muted-2 );
	margin-top: -6px !important;
}

.tmt-td-card #gform_wrapper_3 #field_3_46,
.tmt-td-card #gform_wrapper_3 #field_3_47 { flex: 1 1 calc( 50% - 12px ); min-width: 260px; }

.tmt-td-card #gform_wrapper_3 input[type="text"],
.tmt-td-card #gform_wrapper_3 input[type="number"],
.tmt-td-card #gform_wrapper_3 input[type="email"],
.tmt-td-card #gform_wrapper_3 input[type="date"],
.tmt-td-card #gform_wrapper_3 select:not( .gform-datepicker-calendar select ) {
	width: 100% !important;
	box-sizing: border-box !important;
	padding: 12px 14px !important;
	font-size: 15.5px !important;
	line-height: 1.3 !important;
	height: auto !important;
	min-height: 0 !important;
	color: var( --ink ) !important;
	background: #fff !important;
	border: 1.5px solid var( --input-line ) !important;
	border-radius: 9px !important;
	box-shadow: none !important;
	transition: border-color .15s;
}
.tmt-td-card #gform_wrapper_3 input:focus,
.tmt-td-card #gform_wrapper_3 select:focus {
	outline: none !important;
	border-color: var( --orange ) !important;
}
.tmt-td-card #gform_wrapper_3 ::placeholder { color: #9AA69E; opacity: 1; }

/* ---- briefing time -------------------------------------------------
   GF renders this as an hour box, a minute box and an am/pm select. Those
   three are the only controls that submit, so they stay in the DOM and
   enabled — but they're visually hidden and replaced by a single native
   <input type="time"> (added in PHP, carries no name) which writes into
   them from JS. Do NOT disable them; a disabled control is not posted. */
.tmt-td-card #gform_wrapper_3 #field_3_67 .ginput_complex {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	margin: -1px !important;
	padding: 0 !important;
	overflow: hidden !important;
	clip: rect( 0 0 0 0 ) !important;
	clip-path: inset( 50% ) !important;
	white-space: nowrap !important;
	border: 0 !important;
}
.tmt-td-timewrap { display: block; }
.tmt-td-card #gform_wrapper_3 input.tmt-td-time-proxy {
	width: 100% !important;
	box-sizing: border-box !important;
	padding: 12px 14px !important;
	font-family: Archivo, system-ui, sans-serif !important;
	font-size: 15.5px !important;
	line-height: 1.3 !important;
	height: auto !important;
	color: var( --ink ) !important;
	background: #fff !important;
	border: 1.5px solid var( --input-line ) !important;
	border-radius: 9px !important;
	box-shadow: none !important;
}
.tmt-td-card #gform_wrapper_3 input.tmt-td-time-proxy:focus {
	outline: none !important;
	border-color: var( --orange ) !important;
}

/* ---- yes/no chips for the agency questions -------------------------- */
.tmt-td-card #gform_wrapper_3 #field_3_49,
.tmt-td-card #gform_wrapper_3 #field_3_50 {
	flex: 1 1 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	flex-wrap: wrap;
	padding: 11px 0 !important;
	border-bottom: 1px solid var( --line );
}
.tmt-td-card #gform_wrapper_3 #field_3_49 > legend.gfield_label,
.tmt-td-card #gform_wrapper_3 #field_3_50 > legend.gfield_label {
	flex: 1 1 260px;
	font-size: 14px !important;
	font-weight: 400 !important;
	letter-spacing: normal !important;
	line-height: 1.4 !important;
	color: var( --ink ) !important;
	text-transform: none !important;
	margin: 0 !important;
}
.tmt-td-card #gform_wrapper_3 #field_3_49 .ginput_container,
.tmt-td-card #gform_wrapper_3 #field_3_50 .ginput_container { flex: none; }
.tmt-td-card #gform_wrapper_3 #field_3_49 .gfield_radio,
.tmt-td-card #gform_wrapper_3 #field_3_50 .gfield_radio {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	gap: 6px !important;
}
.tmt-td-card #gform_wrapper_3 #field_3_49 .gchoice,
.tmt-td-card #gform_wrapper_3 #field_3_50 .gchoice {
	position: relative;
	margin: 0 !important;
	width: auto !important;
	max-width: none !important;
	flex: 0 0 auto !important;
}
.tmt-td-card #gform_wrapper_3 #field_3_49 .gchoice input,
.tmt-td-card #gform_wrapper_3 #field_3_50 .gchoice input {
	position: absolute !important;
	opacity: 0 !important;
	width: 1px !important;
	height: 1px !important;
	margin: 0 !important;
	pointer-events: none;
}
.tmt-td-card #gform_wrapper_3 #field_3_49 .gchoice label,
.tmt-td-card #gform_wrapper_3 #field_3_50 .gchoice label {
	display: block;
	padding: 7px 16px;
	border-radius: 99px;
	cursor: pointer;
	user-select: none;
	font-size: 13.5px;
	font-weight: 600;
	transition: all .15s;
	border: 1.5px solid var( --line-2 );
	background: #fff;
	color: #3F4E46;
}
.tmt-td-card #gform_wrapper_3 #field_3_49 .gchoice:has( input:checked ) label,
.tmt-td-card #gform_wrapper_3 #field_3_50 .gchoice:has( input:checked ) label {
	border-color: var( --orange );
	background: var( --orange );
	color: #fff;
}

/* =========================================================================
   Participant repeater -> one card per person
   ========================================================================= */
.tmt-td-card #gform_wrapper_3 #field_3_51 { flex: 1 1 100%; }
.tmt-td-card #gform_wrapper_3 #field_3_51 > .gfield_label { display: none !important; }

/* GF prints the column names once above the rows; each cell carries its own
   label now (injected in PHP), so the header row is redundant. */
.tmt-td-card #gform_wrapper_3 .gfield_list_header { display: none !important; }

.tmt-td-card #gform_wrapper_3 .gfield_list_groups {
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.tmt-td-card #gform_wrapper_3 .gfield_list_group {
	display: grid !important;
	grid-template-columns: repeat( auto-fit, minmax( min( 160px, 100% ), 1fr ) );
	gap: 14px 18px;
	padding: 18px;
	border-radius: 14px;
	border: 1.5px solid #E9D6CA;
	background: #fff;
	transition: border-color .15s;
}
.tmt-td-card #gform_wrapper_3 .gfield_list_group.is-complete { border-color: var( --line-2 ); }

/* Numbered header bar on each card (built in JS — GF's list markup has
   nowhere to hang one; its only translatable string comes from PHP). */
.tmt-td-person-head {
	grid-column: 1 / -1;
	display: flex;
	align-items: center;
	gap: 14px;
	margin: -18px -18px 4px;
	padding: 14px 18px;
	border-bottom: 1px solid var( --line );
	background: #F7F6F1;
	border-radius: 14px 14px 0 0;
}
.tmt-td-person-num {
	flex: none;
	width: 34px;
	height: 34px;
	border-radius: 9px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: 'Barlow Condensed', sans-serif;
	font-weight: 800;
	font-size: 16px;
	background: var( --orange-tint );
	color: var( --orange-deep );
	transition: all .15s;
}
.gfield_list_group.is-complete .tmt-td-person-num {
	background: var( --orange );
	color: #fff;
}
.tmt-td-person-name {
	font-family: 'Barlow Condensed', sans-serif;
	font-weight: 800;
	font-size: 21px;
	letter-spacing: .02em;
	text-transform: uppercase;
	color: var( --ink );
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.tmt-td-person-name.is-placeholder { color: var( --muted-4 ); }

.tmt-td-card #gform_wrapper_3 .gfield_list_cell {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
	padding: 0 !important;
}

/* ---- Sex: chips driving the real text box --------------------------- */
.tmt-td-card #gform_wrapper_3 .gfield_list_cell input.tmt-td-hidden-real,
.tmt-td-card #gform_wrapper_3 .tmt-td-sex + input,
.tmt-td-card #gform_wrapper_3 .gfield_list_cell:has( [data-tmt-td-sex] ) > input[name="input_51[]"],
.tmt-td-card #gform_wrapper_3 .gfield_list_cell:has( [data-tmt-td-dob] ) > input[name="input_51[]"] {
	/* Real inputs stay in the DOM, enabled, and keep submitting — only the
	   friendlier control in front of them is visible. Never `disabled`. */
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	margin: -1px !important;
	padding: 0 !important;
	overflow: hidden !important;
	clip: rect( 0 0 0 0 ) !important;
	clip-path: inset( 50% ) !important;
	white-space: nowrap !important;
	border: 0 !important;
}
.tmt-td-sex {
	display: flex;
	gap: 6px;
	padding-top: 2px;
}
.tmt-td-card #gform_wrapper_3 button.tmt-td-sex-opt {
	padding: 7px 14px !important;
	border-radius: 99px !important;
	cursor: pointer;
	user-select: none;
	font-family: Archivo, system-ui, sans-serif !important;
	font-size: 13.5px !important;
	font-weight: 600 !important;
	line-height: 1.2 !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	transition: all .15s;
	border: 1.5px solid var( --line-2 ) !important;
	background: #fff !important;
	color: #3F4E46 !important;
	box-shadow: none !important;
	width: auto !important;
	height: auto !important;
	min-height: 0 !important;
}
.tmt-td-card #gform_wrapper_3 button.tmt-td-sex-opt.is-on {
	border-color: var( --orange ) !important;
	background: var( --orange ) !important;
	color: #fff !important;
}
/* The blue ring after clicking was the browser's default focus outline on a
   <button>. Suppressed for pointer clicks but kept — on brand — for keyboard
   users, who need to see where focus is. */
.tmt-td-card #gform_wrapper_3 button.tmt-td-sex-opt:focus {
	outline: none !important;
	box-shadow: none !important;
}
.tmt-td-card #gform_wrapper_3 button.tmt-td-sex-opt:focus-visible {
	outline: 2px solid var( --orange ) !important;
	outline-offset: 2px !important;
}

/* ---- Date of birth: native picker in front of the real text box ----- */
.tmt-td-card #gform_wrapper_3 input.tmt-td-dob {
	width: 100% !important;
	box-sizing: border-box !important;
	padding: 9px 0 !important;
	font-family: Archivo, system-ui, sans-serif !important;
	font-size: 15px !important;
	line-height: 1.3 !important;
	height: auto !important;
	color: var( --ink ) !important;
	background: transparent !important;
	border: 0 !important;
	border-bottom: 1.5px solid var( --input-line ) !important;
	border-radius: 0 !important;
}
.tmt-td-card #gform_wrapper_3 input.tmt-td-dob:focus {
	outline: none !important;
	border-bottom-color: var( --orange ) !important;
}
/* Diet is free text and benefits from the full width. */
.tmt-td-card #gform_wrapper_3 .gfield_list_51_cell7 { grid-column: 1 / -1; }

.tmt-td-cell-label {
	display: block;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .09em;
	color: var( --muted-3 );
	text-transform: uppercase;
	line-height: 1.3;
}
.tmt-td-card #gform_wrapper_3 .gfield_list_cell input,
.tmt-td-card #gform_wrapper_3 .gfield_list_cell select {
	width: 100% !important;
	box-sizing: border-box !important;
	padding: 9px 0 !important;
	font-size: 15px !important;
	line-height: 1.3 !important;
	height: auto !important;
	min-height: 0 !important;
	color: var( --ink ) !important;
	background: transparent !important;
	border: 0 !important;
	border-bottom: 1.5px solid var( --input-line ) !important;
	border-radius: 0 !important;
}

/* Row add/remove controls are hidden: the repeater is seeded with exactly
   one row per booked participant and maxRows caps it there (verified — GF
   refuses to add beyond the cap), so "add" is a button that does nothing
   and "remove" would let someone declare fewer people than they paid for.
   The headcount is fixed by the booking, so the controls have no job.
   Hidden rather than removed so GF's own row bookkeeping is untouched. */
.tmt-td-card #gform_wrapper_3 .gfield_list_icons {
	display: none !important;
}

/* ---- footer buttons --------------------------------------------------
   "Save & finish later" on the left is GF's own Save & Continue link (the
   feature was already enabled on this form), restyled as plain text; the
   orange CTA on the right is GF's real submit button, relabelled. */
.tmt-td-card #gform_wrapper_3 .gform_footer,
.tmt-td-card #gform_wrapper_3 .gform-footer {
	display: flex !important;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
	margin: 28px -34px 0 !important;
	padding: 22px 34px 26px !important;
	border-top: 1px solid var( --line );
}
/* The themed-button classes are stripped in PHP (see
   tmt_trip_details_save_link) so nothing in the theme or GF's own button
   layer matches this any more — these rules are all it gets. */
.tmt-td-card #gform_wrapper_3 button.gform_save_link,
.tmt-td-card #gform_wrapper_3 .gform_footer button.gform_save_link {
	order: -1;
	margin: 0 !important;
	background: none !important;
	background-color: transparent !important;
	background-image: none !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	padding: 14px 0 !important;
	width: auto !important;
	min-height: 0 !important;
	font-family: 'Barlow Condensed', sans-serif !important;
	font-weight: 700 !important;
	font-size: 19px !important;
	line-height: 1.2 !important;
	letter-spacing: .09em !important;
	text-transform: uppercase !important;
	color: var( --muted-2 ) !important;
	text-decoration: none !important;
	cursor: pointer;
	transition: color .15s;
}
/* Text-colour change only on hover — no background. */
.tmt-td-card #gform_wrapper_3 button.gform_save_link:hover,
.tmt-td-card #gform_wrapper_3 button.gform_save_link:focus {
	background: none !important;
	background-color: transparent !important;
	box-shadow: none !important;
	color: var( --orange-deep ) !important;
}
.tmt-td-card #gform_wrapper_3 button.gform_save_link:focus { outline: none !important; }
.tmt-td-card #gform_wrapper_3 button.gform_save_link:focus-visible {
	outline: 2px solid var( --orange ) !important;
	outline-offset: 3px !important;
}

.tmt-td-cta-label,
.tmt-td-cta-arrow { display: inline-block; vertical-align: middle; }
.tmt-td-cta-arrow { margin-left: 10px; }
/* :not(.gform_save_link) matters — without it these CTA rules also matched
   the Save & Continue button sitting in the same footer, which is what was
   turning it orange (on hover especially). */
.tmt-td-card #gform_wrapper_3 .gform_footer button:not( .gform_save_link ),
.tmt-td-card #gform_wrapper_3 .gform_footer input[type="submit"],
.tmt-td-card #gform_wrapper_3 .gform-footer button:not( .gform_save_link ) {
	background: var( --orange ) !important;
	color: #fff !important;
	font-family: 'Barlow Condensed', sans-serif !important;
	font-weight: 800 !important;
	font-size: 21px !important;
	letter-spacing: .09em !important;
	text-transform: uppercase !important;
	padding: 16px 30px !important;
	border: 0 !important;
	border-radius: 9px !important;
	box-shadow: none !important;
	cursor: pointer;
	transition: background .2s;
	/* The Trip Details PAGE carries an Elementor width on this button:
	     html body .elementor-8160 .elementor-element-5df8bb3
	     .eael-gravity-form .gform_footer .gform_button { width:100px!important }
	   set in the Essential Addons Gravity Forms widget. At 100px the label
	   wrapped to three lines and spilled out of the orange box. That rule is
	   !important but carries no id, so this selector's #gform_wrapper_3 wins
	   the cascade — which also means the fix travels with the plugin instead
	   of living in the page. Clearing the width in Elementor would be the
	   tidier long-term fix; this holds either way. */
	width: auto !important;
	flex: 0 0 auto;
}
.tmt-td-card #gform_wrapper_3 .gform_footer button:not( .gform_save_link ):hover,
.tmt-td-card #gform_wrapper_3 .gform-footer button:not( .gform_save_link ):hover {
	background: var( --orange-hover ) !important;
}
/* GF's Orbital theme hangs a save icon off ::before using its own icon
   font. The design is text only. */
.tmt-td-card #gform_wrapper_3 button.gform_save_link::before,
.tmt-td-card #gform_wrapper_3 button.gform_save_link::after {
	content: none !important;
	display: none !important;
}

/* GF's own datepicker inside this form. */
.tmt-td-card #gform_wrapper_3 .gform-datepicker-calendar {
	border-radius: 12px !important;
	border: 1px solid #CFD5CC !important;
	box-shadow: 0 16px 40px rgba( 22, 36, 29, .18 ) !important;
	background: #fff !important;
	z-index: 9999 !important;
}
.tmt-td-card #gform_wrapper_3 .gform-datepicker-calendar select.nav.select {
	appearance: auto !important;
	-webkit-appearance: auto !important;
	width: auto !important;
	min-width: 78px !important;
	height: auto !important;
	line-height: 1.3 !important;
	padding: 5px 6px !important;
	font-size: 14px !important;
	color: #16241D !important;
	background: #fff !important;
	border: 1px solid #CFD5CC !important;
	border-radius: 7px !important;
}
/* Keyboard hint kept for screen readers, out of sight. */
.tmt-td-card #gform_wrapper_3 .gform-datepicker-calendar .monthMessage {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	margin: -1px !important;
	padding: 0 !important;
	overflow: hidden !important;
	clip: rect( 0 0 0 0 ) !important;
	clip-path: inset( 50% ) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/* =========================================================================
   Desktop: briefing beside the agency questions.

   GF hands us one flat list of fields, so the two columns are produced by
   switching the list to an explicit 4-column grid and placing each field on
   named lines — columns 1-2 are the left half, 3-4 the right. Explicit
   placement (rather than auto-flow) is what keeps a short field in one
   column from pulling an unrelated field up beside it.

   Below this breakpoint the grid is dropped entirely and everything falls
   back to the single-column flex order above.
   ========================================================================= */
/* The two columns are real containers built in JS (see buildColumns() in
   trip-details-editorial.js) rather than grid placement, because grid rows
   are shared across columns — the taller agency question was forcing a
   ~55px gap between the briefing text and its date/time inputs. */
.tmt-td-tworow {
	flex: 1 1 100%;
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 22px;
}
.tmt-td-col {
	display: flex;
	flex-direction: column;
	gap: 12px;
	min-width: 0;
}
.tmt-td-col .tmt-td-section-head { margin: 0 !important; }
/* Date + time sit side by side within the left column. */
.tmt-td-col--left {
	display: grid;
	/* minmax(0,1fr) rather than 1fr: a bare 1fr still respects the item's
	   min-content width, and the briefing time control's was wide enough to
	   take 240px of the 422px column, squeezing the date box to 78px so
	   "09/22/2026" rendered clipped. minmax(0,...) makes the two halves
	   genuinely equal whatever is inside them. */
	grid-template-columns: minmax( 0, 1fr ) minmax( 0, 1fr );
	gap: 12px 18px;
	align-content: start;
}
/* GF's theme puts `grid-column: span 6` on every .gfield for its own
   12-column system. Left unchecked that makes each field span six of these
   two tracks, so date and time stacked instead of sitting side by side. */
.tmt-td-col--left > .gfield {
	grid-column: auto !important;
	/* The companion to minmax(0,1fr) on the track above. Without it a grid
	   ITEM still refuses to go below its own min-content width, so the time
	   dropdown (as wide as its longest option) overflowed its 202px column. */
	min-width: 0 !important;
}
.tmt-td-col--left > .tmt-td-section-head,
.tmt-td-col--left > #field_3_69 { grid-column: 1 / -1 !important; }

@media ( min-width: 901px ) {
	.tmt-td-tworow {
		flex-direction: row;
		gap: 24px;
	}
	.tmt-td-col { flex: 1 1 0; }

	/* The two agency questions read as a stacked pair, so only the first
	   carries a divider. */
	.tmt-td-card #gform_wrapper_3 #field_3_50 { border-bottom: 0 !important; }
}

/* =========================================================================
   Responsive
   ========================================================================= */
/* ---- tablet ----------------------------------------------------------
   Five facts won't fit across, so drop to four and let "Registered name"
   run the full width underneath rather than sitting beside three empty
   cells. The headline gets more weight here too — at this width it was
   floating in a lot of photo. */
@media ( max-width: 1000px ) {
	.tmt-td-facts { grid-template-columns: repeat( 4, minmax( 0, 1fr ) ); }
	.tmt-td-fact:last-child { grid-column: 1 / -1; }
}

@media ( max-width: 900px ) {
	.tmt-td-title { font-size: 46px; }
	.tmt-td-header-inner { padding: 28px 28px 26px; }
	.tmt-td-people-head h2 { font-size: 30px; }
}

@media ( max-width: 640px ) {
	.tmt-td-page-bg { padding: 22px 0 48px; }
	.tmt-td-shell { padding: 0 10px; }
	.tmt-td-top-row { padding: 0 4px 16px; gap: 12px; }
	.tmt-td-logo-box img { width: 120px; }
	.tmt-td-card { border-radius: 12px; }
	.tmt-td-header-inner { padding: 22px 16px 20px; }
	.tmt-td-title { font-size: 34px; }
	.tmt-td-card #gform_wrapper_3 { padding: 22px 16px 0 !important; }
	.tmt-td-card #gform_wrapper_3 .gfield_list_group { padding: 14px; }
	.tmt-td-people-head h2 { font-size: 26px; }

	/* Facts: two across, with "Registered name" spanning the bottom so the
	   fifth cell never sits next to a hole. */
	.tmt-td-facts { grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); }

	/* The date and time inputs together are wider than a phone, which was
	   pushing the whole briefing block (and its text) off-screen. Stack them
	   and drop the desktop min-widths that caused the overflow. */
	.tmt-td-col--left { grid-template-columns: 1fr; }
	.tmt-td-card #gform_wrapper_3 #field_3_65,
	.tmt-td-card #gform_wrapper_3 #field_3_67 {
		flex: 1 1 100%;
		min-width: 0 !important;
	}

	/* Footer: both controls centred and stacked — there isn't room to sit
	   them on one line. */
	.tmt-td-card #gform_wrapper_3 .gform_footer,
	.tmt-td-card #gform_wrapper_3 .gform-footer {
		flex-direction: column;
		justify-content: center !important;
		align-items: stretch !important;
		gap: 4px;
		margin: 24px -16px 0 !important;
		padding: 18px 16px 22px !important;
	}
	.tmt-td-card #gform_wrapper_3 .gform_footer button:not( .gform_save_link ) {
		/* !important for the same Elementor rule as the desktop block above. */
		width: 100% !important;
		font-size: 18px !important;
		order: 2;
	}
	.tmt-td-card #gform_wrapper_3 button.gform_save_link {
		order: 1;
		width: 100% !important;
		text-align: center !important;
		padding: 10px 0 16px !important;
	}
}

/* Nothing on this page may scroll sideways on a phone. */
@media ( max-width: 640px ) {
	.tmt-td-card,
	.tmt-td-card #gform_wrapper_3,
	.tmt-td-tworow,
	.tmt-td-col { max-width: 100%; overflow-x: clip; }
}

@media ( max-width: 400px ) {
	.tmt-td-shell { padding: 0 6px; }
	.tmt-td-card #gform_wrapper_3 { padding: 18px 13px 0 !important; }
}

/* ---- fields the one-day rule hides -------------------------------------
   Gravity Forms renders a visibility:hidden field as an empty container that
   still carries this design's row padding, so hiding the briefing and agency
   questions left 80-110px of unexplained space behind each one. phase-20
   removes the containers it can; this collapses anything GF still emits, so
   a one-day form can never grow a mystery gap again. */
.tmt-td-card #gform_wrapper_3 .gfield_visibility_hidden {
	display: none !important;
}

/* The briefing time is a slot dropdown (phase-36), not a free-form time
   input. It keeps the proxy class so it inherits the box styling above;
   these rules give it a caret and stop the theme's own select chrome. */
.tmt-td-card #gform_wrapper_3 select.tmt-td-time-proxy {
	width: 100% !important;
	box-sizing: border-box !important;
	appearance: none !important;
	-webkit-appearance: none !important;
	padding: 12px 34px 12px 14px !important;
	font-family: Archivo, system-ui, sans-serif !important;
	font-size: 15.5px !important;
	line-height: 1.3 !important;
	height: auto !important;
	min-height: 0 !important;
	color: var( --ink ) !important;
	background-color: #fff !important;
	background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2316241D' d='M1 1l5 5 5-5'/%3E%3C/svg%3E" ) !important;
	background-repeat: no-repeat !important;
	background-position: right 14px center !important;
	border: 1.5px solid var( --input-line ) !important;
	border-radius: 9px !important;
	box-shadow: none !important;
	cursor: pointer;
}
.tmt-td-card #gform_wrapper_3 select.tmt-td-time-proxy:focus {
	outline: none !important;
	border-color: var( --orange ) !important;
}

/* ---- the date field's calendar button ------------------------------
   Same cause as the submit button: the Trip Details PAGE styles every
   <button> inside the form through its Essential Addons Gravity Forms
   widget, and GF 3.x renders the datepicker toggle as a real button. At
   100px wide it sat on top of the date text (09/2[icon]2026) and pushed
   the flex row past its column. Those page rules carry no id, so
   #gform_wrapper_3 wins and the fix travels with the plugin. */
.tmt-td-card #gform_wrapper_3 .gform-datepicker-toggle,
.tmt-td-card #gform_wrapper_3 button.gform-datepicker-toggle {
	width: auto !important;
	min-width: 0 !important;
	height: auto !important;
	min-height: 0 !important;
	flex: 0 0 auto !important;
	padding: 4px 2px 4px 8px !important;
	margin: 0 !important;
	background: none !important;
	background-color: transparent !important;
	background-image: none !important;
	border: 0 !important;
	border-radius: 4px !important;
	box-shadow: none !important;
	color: var( --muted-2, #5F6E65 ) !important;
	line-height: 1 !important;
	cursor: pointer;
}
.tmt-td-card #gform_wrapper_3 .gform-datepicker-toggle:hover,
.tmt-td-card #gform_wrapper_3 .gform-datepicker-toggle:focus {
	background: none !important;
	color: var( --orange ) !important;
}
.tmt-td-card #gform_wrapper_3 .gform-datepicker-toggle:focus { outline: none !important; }
.tmt-td-card #gform_wrapper_3 .gform-datepicker-toggle:focus-visible {
	outline: 2px solid var( --orange ) !important;
	outline-offset: 2px !important;
}
.tmt-td-card #gform_wrapper_3 .gform-datepicker-toggle .gform-calendar-icon,
.tmt-td-card #gform_wrapper_3 .gform-datepicker-toggle .dashicons {
	width: 20px !important;
	height: 20px !important;
	font-size: 20px !important;
	line-height: 20px !important;
	color: inherit !important;
}
/* The input keeps the room the button no longer steals. */
.tmt-td-card #gform_wrapper_3 .ginput_container_date { align-items: center; }
.tmt-td-card #gform_wrapper_3 .ginput_container_date input.datepicker { flex: 1 1 auto !important; }