/* =========================================================================
   TMT Inquiry Form — editorial redesign, "v3" spec.
   Built to match the client-approved "Trip Inquiry Form v3" design exactly
   (colors, type, spacing, component behavior). This file is 100% cosmetic:
   it never targets a field by [name], never hides a required field, and
   never changes a submit control's type/behavior. It reskins real Gravity
   Forms (Orbital theme) markup for form #1 only, scoped under the
   #gform_wrapper_1 ID (GF 3.x/Orbital has no per-form wrapper-class
   filter, so the ID selector is the reliable scoping hook) and
   .tmt-inq-shell (the PHP-side wrapper from gform_get_form_filter_1).
   ========================================================================= */

/* The /inquiry/ page's Elementor Theme Builder header still renders its
   own pre-existing "Submit Your Trip Inquiry" heading widget above the
   form — it now duplicates our own banner H1 below it. This file only
   loads on pages embedding form #1, so hiding it here is safely scoped;
   if that Elementor template is ever rebuilt this ID will need updating. */
.elementor-element-5005362 { display: none; }

.tmt-inq-page-bg {
	--ink: #16241D;
	--muted: #4E5E55;
	--muted-2: #5F6E65;
	--muted-3: #8B978F;
	--rail-muted: #7C8A81;
	--rail-done: #2F4038;
	--card: #FBFAF6;
	--line: #E4E7E0;
	--line-2: #DCE0D9;
	--input-line: #CBD2C9;
	--orange: #FF4D00;
	--orange-hover: #E04400;
	--orange-tint: #FFEEE6;
	--green: #2D8659;
	--green-tint: #E6F3EC;

	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 55%, #BAC1B8 100% );
	padding: 56px 0 90px;
	font-family: Archivo, system-ui, sans-serif;
	color: var( --ink );
	-webkit-font-smoothing: antialiased;
}

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

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

/* ---- card shell ------------------------------------------------------ */
/* Deliberately NOT overflow:hidden. The card only needed clipping so the
   banner photo followed its rounded top corners — but that also clipped
   GF's datepicker calendar, which opens downward out of the card. The
   banner now rounds its own corners instead, leaving the card free to let
   the calendar overflow. */
.tmt-inq-card {
	background: var( --card );
	border-radius: 16px;
	box-shadow: 0 20px 50px rgba( 22, 36, 29, .16 );
}

/* ---- banner ------------------------------------------------------- */
.tmt-inq-banner {
	position: relative;
	height: 230px;
	background-color: #1D3128;
	background-size: cover;
	background-position: center;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: 28px 34px;
	box-sizing: border-box;
	/* Rounds itself (rather than relying on the card clipping it) so the
	   card can stay overflow-visible for the datepicker. */
	border-radius: 16px 16px 0 0;
	overflow: hidden;
}
.tmt-inq-banner::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient( 180deg, rgba( 22, 36, 29, .28 ) 0%, rgba( 17, 27, 22, .78 ) 100% );
}
.tmt-inq-banner-tag,
.tmt-inq-banner h1 {
	position: relative;
	z-index: 1;
}
.tmt-inq-banner-tag {
	font-family: 'JetBrains Mono', monospace;
	font-size: 10.5px;
	color: #C9D6CC;
	letter-spacing: .12em;
}
.tmt-inq-banner h1 {
	margin: 9px 0 0;
	font-family: 'Barlow Condensed', sans-serif;
	font-weight: 800;
	font-size: 56px;
	line-height: .92;
	letter-spacing: .005em;
	text-transform: uppercase;
	color: #FBFAF6;
	text-shadow: 0 2px 18px rgba( 0, 0, 0, .35 );
}

/* ---- rail (5-cell step indicator) --------------------------------- */
.tmt-inq-rail {
	display: flex;
	align-items: stretch;
	border-bottom: 1px solid var( --line );
}
.tmt-inq-rail-cell {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 3px;
	padding: 14px 16px;
	border-right: 1px solid var( --line );
	background: transparent;
	box-shadow: none;
	transition: background .15s, box-shadow .15s;
}
.tmt-inq-rail-cell:last-child { border-right: 0; }
.tmt-inq-rail-cell.is-current {
	background: var( --orange-tint );
	box-shadow: inset 0 -3px 0 var( --orange );
}
.tmt-inq-rail-cell.is-done {
	box-shadow: inset 0 -3px 0 var( --green );
}
.tmt-inq-rail-num {
	font-family: 'JetBrains Mono', monospace;
	font-size: 10px;
	letter-spacing: .14em;
	color: var( --muted-3 );
}
.tmt-inq-rail-label {
	font-family: 'Barlow Condensed', sans-serif;
	font-weight: 700;
	font-size: 16px;
	letter-spacing: .05em;
	text-transform: uppercase;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	color: var( --rail-muted );
}
.tmt-inq-rail-cell.is-current .tmt-inq-rail-label { color: var( --ink ); }
.tmt-inq-rail-cell.is-done .tmt-inq-rail-label { color: var( --rail-done ); }

/* ---- bottom small print --------------------------------------------- */
.tmt-inq-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 reskin — scoped to #gform_wrapper_1
   ========================================================================= */
#gform_wrapper_1.gform_wrapper {
	--gform-theme-color-primary: #FF4D00;
	max-width: none !important;
	padding: 36px 40px 34px !important;
	box-sizing: border-box;
	font-family: Archivo, system-ui, sans-serif !important;
}

/* GF's own progress bar is replaced by our custom rail. */
#gform_wrapper_1 .gf_progressbar_wrapper { display: none !important; }

/* Field list: flex-wrap so paired fields (dates, nationality/residence,
   messaging app/phone) can sit side by side while everything else takes
   a full row — mirrors the design's `repeat(auto-fit,minmax(230px,1fr))`
   behaviour without touching GF's own grid engine. */
#gform_wrapper_1 .gform_page_fields,
#gform_wrapper_1 .gform_fields {
	display: flex !important;
	flex-flow: row wrap !important;
	gap: 28px 24px !important;
	align-items: start !important;
}
#gform_wrapper_1 .gfield {
	flex: 1 1 100%;
	max-width: 100%;
	margin: 0 !important;
}
#gform_wrapper_1 #field_1_20,
#gform_wrapper_1 #field_1_21,
#gform_wrapper_1 #field_1_22,
#gform_wrapper_1 #field_1_23,
#gform_wrapper_1 #field_1_28,
#gform_wrapper_1 #field_1_29,
#gform_wrapper_1 #field_1_33,
#gform_wrapper_1 #field_1_38,
#gform_wrapper_1 #field_1_35,
#gform_wrapper_1 #field_1_52 {
	flex: 1 1 calc( 50% - 12px );
	min-width: 230px;
}

/* Field labels (plain fields use <label>, choice fields use <legend>). */
#gform_wrapper_1 .gfield_label,
#gform_wrapper_1 legend.gfield_label {
	font-size: 12.5px !important;
	font-weight: 600 !important;
	letter-spacing: .08em !important;
	color: var( --muted ) !important;
	text-transform: uppercase !important;
	margin: 0 0 7px !important;
	padding: 0 !important;
}
#gform_wrapper_1 .gform-field-label__text { color: inherit; }

/* Underline-style text/email/tel/date/select inputs.
   NOTE the :not(.gform-datepicker-calendar select) guards below — GF 3.x
   ships its OWN datepicker (not jQuery UI) whose calendar panel renders
   inside #gform_wrapper_1 and contains month/year <select>s. Without the
   guard those inherited the full-width transparent underline treatment and
   rendered as two blank rows inside the calendar. */
#gform_wrapper_1 input[type="text"],
#gform_wrapper_1 input[type="email"],
#gform_wrapper_1 input[type="tel"],
#gform_wrapper_1 input[type="number"],
#gform_wrapper_1 input[type="date"],
#gform_wrapper_1 select:not( .gform-datepicker-calendar select ) {
	width: 100% !important;
	box-sizing: border-box !important;
	padding: 13px 2px !important;
	font-size: 17px !important;
	color: var( --ink ) !important;
	background: transparent !important;
	border: 0 !important;
	border-bottom: 1.5px solid var( --input-line ) !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	transition: border-color .15s;
}
#gform_wrapper_1 select:not( .gform-datepicker-calendar select ) {
	appearance: none !important;
	-webkit-appearance: none !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='%234E5E55' d='M1 1l5 5 5-5'/%3E%3C/svg%3E" ) !important;
	background-repeat: no-repeat !important;
	background-position: right 2px center !important;
	padding-right: 20px !important;
	/* The active theme sets line-height:38px on selects. Combined with our
	   13px vertical padding that leaves a 12px content box, which clipped
	   the selected option's text entirely — the field looked empty even
	   though a value was chosen. Reset both. */
	line-height: 1.3 !important;
	height: auto !important;
	min-height: 0 !important;
}
/* Native option list — inherits the page font but keeps a solid, readable
   surface (an unstyled list on a transparent select reads as broken). */
#gform_wrapper_1 select option {
	color: var( --ink );
	background: #fff;
	font-size: 15px;
}

/* GF's own datepicker panel: match the form's surface, and restore compact,
   readable month/year selects (the guard above keeps our underline styling
   off them; these rules give them a real control appearance again). */
#gform_wrapper_1 .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;
	font-family: Archivo, system-ui, sans-serif !important;
	z-index: 9999 !important;
}
#gform_wrapper_1 .gform-datepicker-calendar select.nav.select {
	appearance: auto !important;
	-webkit-appearance: auto !important;
	width: auto !important;
	max-width: 100% !important;
	min-width: 78px !important;
	height: auto !important;
	min-height: 0 !important;
	line-height: 1.3 !important;
	padding: 5px 6px !important;
	margin: 0 3px !important;
	font-family: Archivo, system-ui, sans-serif !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	color: #16241D !important;
	background: #fff !important;
	background-image: none !important;
	border: 1px solid #CFD5CC !important;
	border-radius: 7px !important;
	box-shadow: none !important;
}
#gform_wrapper_1 .gform-datepicker-calendar select option {
	color: #16241D;
	background: #fff;
}
/* GF's keyboard hint ("Press F1 for help", from its datepicker i18n
   config) is genuinely useful to assistive tech but visually noisy at the
   foot of the calendar. Visually hidden, NOT display:none — screen readers
   still reach it. Note the trade-off: a sighted keyboard user pressing F1
   gets no visible panel, since GF swaps the long help text into this same
   element. Delete this rule to restore GF's default behaviour. */
#gform_wrapper_1 .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;
}
#gform_wrapper_1 input:focus,
#gform_wrapper_1 select:focus,
#gform_wrapper_1 textarea:focus {
	outline: none !important;
	border-color: var( --orange ) !important;
}
#gform_wrapper_1 ::placeholder { color: #93A099; opacity: 1; }

/* Comments textarea stays a boxed field (per spec). */
#gform_wrapper_1 textarea {
	width: 100% !important;
	box-sizing: border-box !important;
	/* GF sizes this from the field's rows setting via min-height, so the
	   min-height has to be reset too or the box stays ~290px tall. */
	height: 150px !important;
	min-height: 150px !important;
	resize: vertical !important;
	padding: 14px !important;
	font-size: 16px !important;
	line-height: 1.5 !important;
	color: var( --ink ) !important;
	background: #fff !important;
	border: 1.5px solid var( --input-line ) !important;
	border-radius: 10px !important;
	box-shadow: none !important;
}

/* Phone field. The site already runs intl-tel-input on this field (it
   renders .iti with a real country/dial-code picker), so there is no fake
   "+66" prefix here — the widget is restyled to sit on the same single
   underline as every other input, with the flag/dial-code as the prefix. */
#gform_wrapper_1 #field_1_52 .ginput_container_telephone {
	border-bottom: 1.5px solid var( --input-line );
}
#gform_wrapper_1 #field_1_52 .iti {
	display: flex !important;
	align-items: center;
	width: 100%;
}
#gform_wrapper_1 #field_1_52 .iti__flag-container {
	position: static !important;
	flex: none;
	padding: 0 !important;
}
#gform_wrapper_1 #field_1_52 .iti__selected-flag {
	background: transparent !important;
	padding: 13px 8px 13px 2px !important;
	height: auto !important;
}
#gform_wrapper_1 #field_1_52 .iti__selected-dial-code {
	font-family: 'JetBrains Mono', monospace;
	font-size: 15px;
	color: var( --muted-2 );
}
/* NB: intl-tel-input rewrites the visible control to type="text"
   (class .gf-telephone), so an input[type="tel"] selector would miss it —
   match the field's input generically. */
#gform_wrapper_1 #field_1_52 .ginput_container_telephone input {
	flex: 1 1 auto;
	min-width: 0;
	padding-left: 6px !important;
	border: 0 !important;
	border-bottom: 0 !important;
}
/* The country dropdown must escape the underline row and float above. */
#gform_wrapper_1 #field_1_52 .iti__country-list {
	z-index: 5;
	border-radius: 10px;
	box-shadow: 0 12px 30px rgba( 22, 36, 29, .18 );
}

/* ---- page-level step head (STEP ONE / FOUR / FIVE), injected by JS -- */
.tmt-inq-step-head { width: 100%; margin: 0 0 2px; }
.tmt-inq-step-head .tmt-inq-step-eyebrow {
	display: block;
	font-family: 'JetBrains Mono', monospace;
	font-size: 10.5px;
	letter-spacing: .18em;
	color: #D93F00;
	margin-bottom: 8px;
}
.tmt-inq-step-head h2 {
	margin: 0;
	font-family: 'Barlow Condensed', sans-serif;
	font-weight: 800;
	font-size: 32px;
	line-height: 1;
	text-transform: uppercase;
	color: var( --ink );
}
.tmt-inq-step-head p {
	margin: 5px 0 0;
	font-size: 15px;
	color: var( --muted-2 );
}

/* Field 51's HTML block already carries step 3's H2 + subhead. Its
   "STEP THREE" eyebrow is a real <span> injected in PHP (it used to be
   ::before content, which Weglot cannot translate). */
#gform_wrapper_1 #field_1_51 { position: relative; padding-top: 22px; }
.tmt-inq-step-eyebrow--solo {
	display: block;
	font-family: 'JetBrains Mono', monospace;
	font-size: 10.5px;
	letter-spacing: .18em;
	color: #D93F00;
	margin-bottom: 8px;
}
#gform_wrapper_1 #field_1_51 h3 {
	margin: 0 0 5px;
	font-family: 'Barlow Condensed', sans-serif;
	font-weight: 800;
	font-size: 32px;
	line-height: 1;
	text-transform: uppercase;
	color: var( --ink );
}
#gform_wrapper_1 #field_1_51 p {
	margin: 0;
	font-size: 15px;
	color: var( --muted-2 );
}

/* ---- Step 1: trip-type photo cards (field 7) ----------------------- */
#gform_wrapper_1 #field_1_7 .ginput_container_checkbox #input_1_7 {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( min( 250px, 100% ), 1fr ) );
	gap: 16px;
	width: 100%;
}
#gform_wrapper_1 #field_1_7 .gchoice {
	/* GF's Orbital CSS sets .gchoice to display:flex, which would turn our
	   ::before photo band into a zero-width flex sibling of the label
	   instead of a block stacked above it — force block flow back. */
	display: block !important;
	border-radius: 12px;
	overflow: hidden;
	cursor: pointer;
	user-select: none;
	transition: all .15s;
	border: 1.5px solid var( --line-2 );
	background: #fff;
	margin: 0;
	position: relative;
}
#gform_wrapper_1 #field_1_7 .gchoice::before {
	content: '';
	display: block;
	width: 100%;
	height: 104px;
	background-size: cover;
	background-position: center;
	background-color: var( --line-2 );
}
#gform_wrapper_1 #field_1_7 .gchoice:has( input[value="Trekking"] ) {
	border-color: var( --line-2 );
}
#gform_wrapper_1 #field_1_7 .gchoice:has( input[value="Trekking"]:checked ) {
	border-color: var( --green );
	background: var( --green-tint );
}
#gform_wrapper_1 #field_1_7 .gchoice:has( input[value="Trail Running"]:checked ) {
	border-color: var( --orange );
	background: var( --orange-tint );
}
/* GF's Orbital theme ships high-specificity rules for .gfield-choice-input
   (native appearance, fixed size, static position), so every property that
   turns these into our circular ticks has to be forced. */
#gform_wrapper_1 #field_1_7 .gchoice input.gfield-choice-input {
	position: absolute !important;
	top: 14px !important;
	left: 14px !important;
	width: 20px !important;
	height: 20px !important;
	margin: 0 !important;
	z-index: 2;
	appearance: none !important;
	-webkit-appearance: none !important;
	border-radius: 50% !important;
	border: 1.5px solid rgba( 255, 255, 255, .85 ) !important;
	background: rgba( 22, 36, 29, .35 ) !important;
	cursor: pointer;
	transition: all .15s;
}
#gform_wrapper_1 #field_1_7 .gchoice input[value="Trekking"]:checked {
	border-color: var( --green ) !important;
	background: var( --green ) !important;
	box-shadow: inset 0 0 0 3.5px var( --green-tint ) !important;
}
#gform_wrapper_1 #field_1_7 .gchoice input[value="Trail Running"]:checked {
	border-color: var( --orange ) !important;
	background: var( --orange ) !important;
	box-shadow: inset 0 0 0 3.5px var( --orange-tint ) !important;
}
#gform_wrapper_1 #field_1_7 .gchoice label {
	display: block;
	padding: 16px 18px;
	font-family: 'Barlow Condensed', sans-serif;
	font-weight: 700;
	font-size: 21px;
	letter-spacing: .03em;
	text-transform: uppercase;
	color: var( --ink );
}
/* The photo band is a ::before on .gchoice, so it is NOT part of the label
   and clicking it did nothing. This transparent overlay extends the label's
   hit area across the entire card — photo included — so the whole card
   toggles the checkbox. It sits below the real input (z-index 2) so the
   tick itself still works normally. */
#gform_wrapper_1 #field_1_7 .gchoice label::before {
	/* !important on content: GF suppresses generated content on these
	   labels, same as the blurb ::after below. */
	content: '' !important;
	display: block !important;
	position: absolute;
	inset: 0;
	z-index: 1;
	cursor: pointer;
}
/* Per-card blurb. A real <span> injected in PHP rather than ::after
   content, so Weglot can translate it. It sits after the label inside the
   choice, and the label's absolute overlay above keeps the whole card
   clickable regardless. */
#gform_wrapper_1 #field_1_7 .tmt-inq-choice-desc {
	display: block;
	position: relative;
	z-index: 0;
	padding: 0 18px 16px;
	margin-top: -10px;
	font-family: Archivo, sans-serif;
	font-weight: 400;
	font-size: 13.5px;
	letter-spacing: normal;
	text-transform: none;
	color: #5F6E65;
	line-height: 1.45;
}

/* ---- Step 2: trekking / trail-running section dividers -------------- */
#gform_wrapper_1 #field_1_12,
#gform_wrapper_1 #field_1_17 {
	position: relative;
	padding-top: 22px !important;
	border-top: 1px solid var( --line );
}
/* The section eyebrow is a real <span> injected inside the <legend> (a
   legend is always painted above its fieldset's own box, so it has to live
   in the legend rather than be prepended to the field). It was ::before
   content until Weglot translation required real text. */
#gform_wrapper_1 .tmt-inq-section-eyebrow {
	display: block;
	font-family: 'JetBrains Mono', monospace;
	font-size: 10.5px;
	font-weight: 400;
	letter-spacing: .18em;
	text-transform: none;
	margin-bottom: 14px;
}
#gform_wrapper_1 .tmt-inq-section-eyebrow.is-trek { color: var( --green ); }
#gform_wrapper_1 .tmt-inq-section-eyebrow.is-run { color: var( --orange ); }

/* field 12/17's own legend doubles as the big step H2. */
#gform_wrapper_1 #field_1_12 > legend.gfield_label,
#gform_wrapper_1 #field_1_17 > legend.gfield_label {
	display: block !important;
	width: 100%;
	font-family: 'Barlow Condensed', sans-serif !important;
	font-weight: 800 !important;
	font-size: 30px !important;
	line-height: 1 !important;
	letter-spacing: normal !important;
	text-transform: uppercase !important;
	color: var( --ink ) !important;
	margin-bottom: 18px !important;
}

/* trek/run choice rows */
#gform_wrapper_1 #field_1_12 .ginput_container_checkbox #input_1_12,
#gform_wrapper_1 #field_1_17 .ginput_container_checkbox #input_1_17 {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( min( 280px, 100% ), 1fr ) );
	gap: 8px;
	width: 100%;
}
#gform_wrapper_1 #field_1_12 .gchoice,
#gform_wrapper_1 #field_1_17 .gchoice {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 13px 16px;
	margin: 0 !important;
	border-radius: 9px;
	cursor: pointer;
	user-select: none;
	transition: all .15s;
	border: 1.5px solid var( --line-2 );
	background: #fff;
	position: relative;
}
#gform_wrapper_1 #field_1_12 .gchoice:has( input:checked ) {
	border-color: var( --green );
	background: var( --green-tint );
}
#gform_wrapper_1 #field_1_17 .gchoice:has( input:checked ) {
	border-color: var( --orange );
	background: var( --orange-tint );
}
#gform_wrapper_1 #field_1_12 .gchoice input.gfield-choice-input,
#gform_wrapper_1 #field_1_17 .gchoice input.gfield-choice-input {
	width: 20px !important;
	height: 20px !important;
	flex: none !important;
	margin: 0 !important;
	appearance: none !important;
	-webkit-appearance: none !important;
	border-radius: 50% !important;
	border: 1.5px solid #BCC5BD !important;
	background: #fff !important;
	cursor: pointer;
	transition: all .15s;
}
#gform_wrapper_1 #field_1_12 .gchoice input:checked {
	border-color: var( --green ) !important;
	background: var( --green ) !important;
	box-shadow: inset 0 0 0 3.5px var( --green-tint ) !important;
}
#gform_wrapper_1 #field_1_17 .gchoice input:checked {
	border-color: var( --orange ) !important;
	background: var( --orange ) !important;
	box-shadow: inset 0 0 0 3.5px var( --orange-tint ) !important;
}
#gform_wrapper_1 #field_1_12 .gchoice label,
#gform_wrapper_1 #field_1_17 .gchoice label {
	flex: 1;
	font-size: 15.5px;
	font-weight: 600;
	color: var( --ink );
}
/* Per-trip duration tag, JetBrains mono, right-aligned. A real <span>
   injected per choice in PHP — it was ::after content keyed to each
   .gchoice_1_12_N class, which meant 19 untranslatable strings in the
   stylesheet and a silent mislabel if choices were ever re-ordered. */
#gform_wrapper_1 .tmt-inq-row-meta {
	font-family: 'JetBrains Mono', monospace;
	font-size: 10.5px;
	color: var( --muted-3 );
	letter-spacing: .06em;
	flex: none;
	white-space: nowrap;
}

/* =========================================================================
   Unified "chip" component — experience level (13/18), other-dates yes/no
   (26), messaging app (35), languages (37). One visual language for every
   single/multi choice field that isn't a card or a row.
   ========================================================================= */
/* GF's .gfield--choice-align-vertical sets flex-direction: column on the
   choice list, which makes each .gchoice stretch across the full cross
   axis — the pills MUST be forced back to a wrapping row or they stack
   one per line. */
#gform_wrapper_1 #field_1_13 .ginput_container_radio #input_1_13,
#gform_wrapper_1 #field_1_18 .ginput_container_radio #input_1_18,
#gform_wrapper_1 #field_1_26 .ginput_container_radio #input_1_26,
#gform_wrapper_1 #field_1_35 .ginput_container_radio #input_1_35,
#gform_wrapper_1 #field_1_37 .ginput_container_checkbox #input_1_37 {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: wrap !important;
	align-items: flex-start !important;
	gap: 9px !important;
	width: 100%;
}
/* Belt-and-braces: keep each pill at its content width. */
#gform_wrapper_1 #field_1_13 .gchoice,
#gform_wrapper_1 #field_1_18 .gchoice,
#gform_wrapper_1 #field_1_26 .gchoice,
#gform_wrapper_1 #field_1_35 .gchoice,
#gform_wrapper_1 #field_1_37 .gchoice {
	position: relative;
	margin: 0 !important;
	width: auto !important;
	max-width: none !important;
	flex: 0 0 auto !important;
}
#gform_wrapper_1 #field_1_13 .gchoice label,
#gform_wrapper_1 #field_1_18 .gchoice label,
#gform_wrapper_1 #field_1_26 .gchoice label,
#gform_wrapper_1 #field_1_35 .gchoice label,
#gform_wrapper_1 #field_1_37 .gchoice label {
	display: block;
	padding: 10px 18px;
	border-radius: 99px;
	cursor: pointer;
	user-select: none;
	font-size: 14.5px;
	font-weight: 600;
	transition: all .15s;
	border: 1.5px solid var( --line-2 );
	background: #fff;
	color: #3F4E46;
}
#gform_wrapper_1 #field_1_13 .gchoice input.gfield-choice-input,
#gform_wrapper_1 #field_1_18 .gchoice input.gfield-choice-input,
#gform_wrapper_1 #field_1_26 .gchoice input.gfield-choice-input,
#gform_wrapper_1 #field_1_35 .gchoice input.gfield-choice-input,
#gform_wrapper_1 #field_1_37 .gchoice input.gfield-choice-input {
	/* Visually hidden but still focusable/checkable — the <label> pill is
	   the visible control. Never display:none, which would drop it from
	   the tab order and from GF's own validation focus handling. */
	position: absolute !important;
	opacity: 0 !important;
	width: 1px !important;
	height: 1px !important;
	margin: 0 !important;
	pointer-events: none;
}
/* green chip group: trekking experience, languages */
#gform_wrapper_1 #field_1_13 .gchoice:has( input:checked ) label,
#gform_wrapper_1 #field_1_37 .gchoice:has( input:checked ) label {
	border-color: var( --green );
	background: var( --green-tint );
	color: var( --green );
}
/* orange chip group: trail experience, alt-dates yes/no, messaging app */
#gform_wrapper_1 #field_1_18 .gchoice:has( input:checked ) label,
#gform_wrapper_1 #field_1_26 .gchoice:has( input:checked ) label,
#gform_wrapper_1 #field_1_35 .gchoice:has( input:checked ) label {
	border-color: var( --orange );
	background: var( --orange-tint );
	color: var( --orange );
}

/* ---- Step 3: alternate-date windows (fields 22/23 and 28/29) --------
   Each window is a *pair* of sibling GF fields (arrival + departure) with
   no shared wrapper to style, so the two halves are joined visually: the
   arrival half rounds its left corners, the departure half its right, and
   a negative margin closes the flex gap between them. flex-grow then
   redistributes the reclaimed 24px so the joined card still fills the row. */
#gform_wrapper_1 #field_1_22,
#gform_wrapper_1 #field_1_23,
#gform_wrapper_1 #field_1_28,
#gform_wrapper_1 #field_1_29 {
	background: var( --green-tint );
	padding: 20px 22px !important;
	box-sizing: border-box;
}
#gform_wrapper_1 #field_1_22,
#gform_wrapper_1 #field_1_28 {
	position: relative;
	margin-top: 4px !important;
	border-radius: 12px;
}
#gform_wrapper_1 #field_1_23,
#gform_wrapper_1 #field_1_29 {
	margin-top: 4px !important;
	border-radius: 12px;
}
/* Join each arrival+departure pair into one window card — but ONLY at
   widths where the two halves actually sit side by side. Below the
   flex-basis breakpoint they wrap onto their own rows, where the negative
   margin would shove the departure half off-centre and the half-rounded
   corners would look broken. */
@media ( min-width: 641px ) {
	#gform_wrapper_1 #field_1_22,
	#gform_wrapper_1 #field_1_28 {
		border-radius: 12px 0 0 12px;
		padding-right: 11px !important;
	}
	#gform_wrapper_1 #field_1_23,
	#gform_wrapper_1 #field_1_29 {
		margin-left: -24px !important;
		border-radius: 0 12px 12px 0;
		padding-left: 11px !important;
	}
}
/* Window eyebrow — a real <span> injected on the arrival half (fields 22
   and 28) in PHP, labelling the joined pair. Was ::before content until
   Weglot translation required real text. */
#gform_wrapper_1 .tmt-inq-alt-label {
	display: block;
	font-family: 'JetBrains Mono', monospace;
	font-size: 10px;
	letter-spacing: .14em;
	color: var( --green );
	margin-bottom: 10px;
	width: 100%;
}
/* The departure half has no label of its own, so it gets a spacer of the
   same height to keep both halves' inputs on one baseline. This one stays
   generated content deliberately — it renders nothing, so there is no text
   for Weglot to miss. */
#gform_wrapper_1 #field_1_23::before,
#gform_wrapper_1 #field_1_29::before {
	content: '';
	display: block;
	font-family: 'JetBrains Mono', monospace;
	font-size: 10px;
	line-height: normal;
	margin-bottom: 10px;
	height: 1em;
}
/* Stacked on mobile the invisible spacer is just dead space — drop it. */
@media ( max-width: 640px ) {
	#gform_wrapper_1 #field_1_23::before,
	#gform_wrapper_1 #field_1_29::before { display: none; }
}
#gform_wrapper_1 #field_1_22 .gfield_label,
#gform_wrapper_1 #field_1_23 .gfield_label,
#gform_wrapper_1 #field_1_28 .gfield_label,
#gform_wrapper_1 #field_1_29 .gfield_label {
	color: var( --green ) !important;
}
#gform_wrapper_1 #field_1_22 input[type="date"],
#gform_wrapper_1 #field_1_23 input[type="date"],
#gform_wrapper_1 #field_1_28 input[type="date"],
#gform_wrapper_1 #field_1_29 input[type="date"] {
	border-bottom-color: #A8CDBA !important;
	background: transparent !important;
}

/* ---- Step 3: people stepper (field 31) ------------------------------ */
#gform_wrapper_1 #field_1_31 .ginput_container_number {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}
#gform_wrapper_1 #field_1_31 input[type="number"] {
	appearance: textfield !important;
	-webkit-appearance: textfield !important;
	-moz-appearance: textfield !important;
	width: 66px !important;
	flex: none !important;
	text-align: center;
	font-family: 'Barlow Condensed', sans-serif !important;
	font-size: 34px !important;
	font-weight: 800 !important;
	border: 0 !important;
	border-bottom: 0 !important;
	padding: 0 !important;
}
/* Hide the native spinner — our own +/- buttons replace it. */
#gform_wrapper_1 #field_1_31 input[type="number"]::-webkit-inner-spin-button,
#gform_wrapper_1 #field_1_31 input[type="number"]::-webkit-outer-spin-button {
	-webkit-appearance: none !important;
	appearance: none !important;
	margin: 0 !important;
	display: none !important;
}
/* These are <span role="button">, not <button> — see inquiry-editorial.js.
   GF's Orbital theme styles `button` from inside a cascade layer, and a
   layered !important beats an unlayered one, so a real button here could
   not be restyled without inline styles. */
#gform_wrapper_1 .tmt-inq-stepper-btn {
	width: 46px !important;
	height: 46px !important;
	min-height: 0 !important;
	border-radius: 50% !important;
	border: 1.5px solid var( --input-line ) !important;
	display: flex !important;
	align-items: center;
	justify-content: center;
	font-family: Archivo, system-ui, sans-serif !important;
	font-size: 22px !important;
	font-weight: 400 !important;
	line-height: 1 !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	cursor: pointer;
	user-select: none;
	background: #fff !important;
	color: var( --ink ) !important;
	box-shadow: none !important;
	padding: 0 !important;
	margin: 0 !important;
	flex: none !important;
	transition: all .15s;
}
#gform_wrapper_1 .tmt-inq-stepper-btn:hover {
	border-color: var( --orange ) !important;
	color: var( --orange ) !important;
	background: #fff !important;
}
#gform_wrapper_1 #field_1_31 .gfield_description.instruction {
	font-family: 'JetBrains Mono', monospace;
	font-size: 11px;
	color: var( --muted-3 );
	letter-spacing: .05em;
	text-transform: uppercase;
	margin: 0;
}

/* ---- Step 5: closing reassurance banner intentionally removed -------
   (previous "quote" banner deleted per client instruction — do not
   reintroduce .tmt-inq-closing-banner markup/styling here.) */

/* ---- Nav buttons ------------------------------------------------- */
#gform_wrapper_1 .gform-page-footer,
#gform_wrapper_1 .gform_page_footer,
#gform_wrapper_1 .gform_footer {
	display: flex !important;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-top: 34px !important;
	padding: 22px 0 0 !important;
	border-top: 1px solid var( --line );
}
#gform_wrapper_1 .gform_previous_button {
	order: -1;
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	font-family: 'Barlow Condensed', sans-serif !important;
	font-weight: 700 !important;
	font-size: 18px !important;
	letter-spacing: .08em !important;
	text-transform: uppercase !important;
	color: var( --muted-2 ) !important;
	cursor: pointer;
	padding: 13px 2px !important;
	margin: 0 !important;
}
#gform_wrapper_1 .gform_previous_button:hover { color: var( --ink ) !important; }
#gform_wrapper_1 .gform_next_button,
#gform_wrapper_1 .gform_button[type="submit"] {
	background: var( --orange ) !important;
	color: #fff !important;
	font-family: 'Barlow Condensed', sans-serif !important;
	font-weight: 800 !important;
	font-size: 19px !important;
	letter-spacing: .1em !important;
	text-transform: uppercase !important;
	padding: 14px 32px !important;
	border: 0 !important;
	border-radius: 8px !important;
	box-shadow: none !important;
	cursor: pointer;
	margin: 0 !important;
	transition: background .15s;
}
#gform_wrapper_1 .gform_next_button:hover,
#gform_wrapper_1 .gform_button[type="submit"]:hover {
	background: var( --orange-hover ) !important;
}
.tmt-inq-remaining-tag {
	font-family: 'JetBrains Mono', monospace;
	font-size: 10.5px;
	letter-spacing: .14em;
	color: var( --muted-3 );
	margin-right: 16px;
}

/* ---- Validation, required-field, description styling untouched but
   kept legible against the new type system. ------------------------- */
#gform_wrapper_1 .gfield_description,
#gform_wrapper_1 .gfield_validation_message,
#gform_wrapper_1 .validation_message {
	font-family: Archivo, sans-serif !important;
	font-size: 13px !important;
}
#gform_wrapper_1 .gfield_error input,
#gform_wrapper_1 .gfield_error select,
#gform_wrapper_1 .gfield_error textarea {
	border-color: #C0392B !important;
}

/* =========================================================================
   Styled Gravity Forms confirmation ("thank you" panel + redirect notice)

   On AJAX submit, GF replaces ONLY #gform_wrapper_1 (form_display.php does
   jQuery('#gform_wrapper_1').replaceWith(confirmation_content)), so the
   confirmation lands INSIDE our .tmt-inq-card, below the banner. The panel
   is therefore flat — the surrounding card already supplies the surface,
   radius and shadow — and the step rail steps aside via .is-confirmed.
   ========================================================================= */
.tmt-inq-card.is-confirmed .tmt-inq-rail { display: none; }
.tmt-inq-card .gform_confirmation_wrapper {
	background: transparent;
	box-shadow: none;
	border: 0;
}
.tmt-inq-confirm {
	display: flex;
	flex-direction: column;
	gap: 16px;
	align-items: flex-start;
	padding: 44px 40px;
	font-family: Archivo, system-ui, sans-serif;
}
/* Standalone fallback: if the confirmation ever renders outside our card
   (non-AJAX post, or the wrapper markup changes), give it its own card. */
.tmt-inq-confirm:not( .tmt-inq-card .tmt-inq-confirm ) {
	background: #FBFAF6;
	border-radius: 16px;
	box-shadow: 0 20px 50px rgba( 22, 36, 29, .16 );
}
.tmt-inq-confirm-tag {
	font-family: 'JetBrains Mono', monospace;
	font-size: 10.5px;
	letter-spacing: .18em;
	color: #2D8659;
}
.tmt-inq-confirm h2 {
	margin: 0;
	font-family: 'Barlow Condensed', sans-serif;
	font-weight: 800;
	font-size: 40px;
	line-height: 1;
	text-transform: uppercase;
	color: #16241D;
}
.tmt-inq-confirm p {
	margin: 0;
	font-size: 16px;
	line-height: 1.6;
	color: #3F4E46;
	max-width: 46em;
}
.tmt-inq-confirm-link {
	display: inline-block;
	margin-top: 4px;
	background: #FF4D00;
	color: #fff !important;
	font-family: 'Barlow Condensed', sans-serif;
	font-weight: 800;
	font-size: 19px;
	letter-spacing: .1em;
	text-transform: uppercase;
	text-decoration: none !important;
	padding: 14px 32px;
	border-radius: 8px;
	transition: background .15s;
}
.tmt-inq-confirm-link:hover { background: #E04400; color: #fff !important; }
.tmt-inq-confirm-redirect {
	font-family: 'JetBrains Mono', monospace;
	font-size: 11px;
	letter-spacing: .08em;
	color: #8B978F;
	text-transform: uppercase;
}

/* =========================================================================
   Responsive
   ========================================================================= */
@media ( max-width: 900px ) {
	.tmt-inq-banner h1 { font-size: 44px; }
	.tmt-inq-rail-label { font-size: 13px; }
}

@media ( max-width: 640px ) {
	.tmt-inq-page-bg { padding: 24px 0 48px; }
	.tmt-inq-shell { padding: 0 10px; }
	.tmt-inq-top-row { padding: 0 4px 16px; gap: 10px; }
	.tmt-inq-logo-box img { width: 120px; }
	.tmt-inq-card { border-radius: 12px; }
	.tmt-inq-banner { height: 170px; padding: 18px 18px; }
	.tmt-inq-banner h1 { font-size: 30px; }
	#gform_wrapper_1.gform_wrapper {
		padding: 22px 16px 24px !important;
	}
	.tmt-inq-rail-cell { padding: 10px 8px; }
	.tmt-inq-rail-num { display: none; }
	.tmt-inq-rail-label { font-size: 11px; }
	.tmt-inq-step-head h2,
	#gform_wrapper_1 #field_1_51 h3 { font-size: 25px; }
	#gform_wrapper_1 #field_1_12 > legend.gfield_label,
	#gform_wrapper_1 #field_1_17 > legend.gfield_label { font-size: 23px !important; }
	#gform_wrapper_1 #field_1_7 .gchoice label { font-size: 18px; padding: 14px 14px; }
	.tmt-inq-confirm { padding: 30px 20px; }
	.tmt-inq-confirm h2 { font-size: 30px; }
}

@media ( max-width: 400px ) {
	.tmt-inq-shell { padding: 0 6px; }
	#gform_wrapper_1.gform_wrapper {
		padding: 18px 12px 20px !important;
	}
}