/*!
 * TripGenius Enquiry — form styles
 *
 * Everything is scoped under .tge-form. There is not one unscoped element
 * selector in this file, because WP Travel Engine's add-ons and Elementor Pro
 * both style input, select, textarea, button and label site-wide.
 *
 * ---------------------------------------------------------------------------
 * HOW !important IS USED HERE, AND WHY IT IS SAFE
 *
 * Elementor Pro's global typography and form-widget rules reach the controls
 * with enough specificity to win, so six properties are declared !important:
 *
 *     font-family   font-size   color   background   border-radius   padding
 *
 * Those six, and only those six, carry !important — nowhere else in this file,
 * on no other property, ever.
 *
 * They are declared twice: once on the element reset, and again on each
 * component that needs a different value. That is not a contradiction. Among
 * competing !important declarations the normal cascade still decides, so a
 * two-class selector beats a class-plus-element one:
 *
 *     .tge-form button   → (0,1,1)   the reset
 *     .tge-form .tge-chip → (0,2,0)  the component, wins
 *
 * So the reset neutralises whatever the theme did, and the component then sets
 * the real value. Anything not covered by a component falls back to the
 * reset's safe defaults — notably 16px, below which iOS Safari zooms the page
 * on focus and breaks the layout.
 * ---------------------------------------------------------------------------
 */

/* ==========================================================================
   0. Fonts — self-hosted, never Google Fonts
   ==========================================================================

   Declared as "TGE Roboto" rather than "Roboto" on purpose. A theme or another
   plugin that loads its own Roboto, or that sets a global font stack, cannot
   then reach inside the form: the family name it would have to override does
   not exist anywhere else on the site.

   The four .woff2 files are not in this repository. See assets/fonts/README.md
   for exactly which files are needed and where they come from. Until they are
   present the fallback stack below renders, which is why the stack is a real
   one rather than a bare sans-serif.
*/

@font-face {
	font-family: 'TGE Roboto';
	font-style: normal;
	font-weight: 300;
	font-display: swap;
	src: url( '../fonts/tge-roboto-300.woff2' ) format( 'woff2' );
}

@font-face {
	font-family: 'TGE Roboto';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url( '../fonts/tge-roboto-400.woff2' ) format( 'woff2' );
}

@font-face {
	font-family: 'TGE Roboto';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url( '../fonts/tge-roboto-500.woff2' ) format( 'woff2' );
}

@font-face {
	font-family: 'TGE Roboto';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url( '../fonts/tge-roboto-700.woff2' ) format( 'woff2' );
}

/* ==========================================================================
   1. Tokens
   ========================================================================== */

.tge-form {
	/* -- Colour ------------------------------------------------------------ */
	--tge-navy: #1a115a;
	--tge-crimson: #d40e14;
	--tge-ink: #18181b;
	--tge-label: #3f3f46;
	--tge-body: #52525b;
	--tge-muted: #71717a;
	--tge-faint: #a1a1aa;
	--tge-placeholder: #b4b4bb;
	--tge-border: #e4e4e7;
	--tge-divider: #f1f1f3;
	--tge-row-hover: #fafafa;
	--tge-canvas: #ffffff;

	/* The only two shadows in the design. */
	--tge-ring: 0 0 0 3px rgba( 26, 17, 90, 0.09 );
	--tge-panel-shadow: 0 16px 40px rgba( 24, 24, 27, 0.14 );

	/* -- Type -------------------------------------------------------------- */
	--tge-font: 'TGE Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;

	--tge-size-h1: clamp( 1.7rem, 5.4vw, 2.4rem );
	--tge-size-h2: clamp( 1.15rem, 3.4vw, 1.4rem );
	--tge-size-intro: 14.5px;
	--tge-size-subhead: 13px;
	--tge-size-label: 12.5px;
	--tge-size-micro: 11.5px;
	--tge-size-micro-lg: 12px;
	--tge-size-input: 16px;
	--tge-size-chip: clamp( 13px, 3.4vw, 13.5px );
	--tge-size-progress: clamp( 9px, 2.5vw, 10.5px );
	--tge-size-cta: clamp( 13.5px, 3.6vw, 15px );
	--tge-size-consent: 12.5px;
	--tge-size-counter-value: 15.5px;
	--tge-size-card-title: clamp( 14.5px, 3.8vw, 15.5px );

	/* -- Radii ------------------------------------------------------------- */
	--tge-radius-row: 9px;
	--tge-radius-chip: 10px;
	--tge-radius-control: 12px;
	--tge-radius-panel: 14px;
	--tge-radius-card: 16px;
	--tge-radius-pill: 999px;

	/* -- Spacing ----------------------------------------------------------- */
	--tge-pad-page-y: clamp( 24px, 5vw, 72px );
	--tge-pad-page-x: clamp( 16px, 4vw, 24px );
	--tge-gap-header: clamp( 26px, 5vw, 44px );
	--tge-pad-step: clamp( 20px, 4vw, 28px );
	--tge-gap-nav-top: clamp( 26px, 5vw, 34px );
	--tge-gap-note: clamp( 14px, 3.4vw, 18px );
	--tge-gap-field: clamp( 20px, 4.6vw, 26px );
	--tge-gap-contact: clamp( 14px, 3.4vw, 18px );
	--tge-gap-chip: 8px;
	--tge-gap-counter: 10px;
	--tge-gap-nav: 8px;
	--tge-gap-label: 8px;
	--tge-gap-label-chips: 10px;

	--tge-pad-control: 15px 16px;
	--tge-pad-control-date: 14px 15px;
	--tge-pad-chip: 11px clamp( 12px, 3.4vw, 15px );
	--tge-pad-card: clamp( 15px, 3.8vw, 18px ) clamp( 15px, 4vw, 20px );

	/* -- Sizes ------------------------------------------------------------- */
	--tge-target: 44px;
	--tge-target-nav: 52px;
	--tge-target-compact: 46px;
	--tge-size-counter-btn: 36px;
	--tge-size-pill: 26px;
	--tge-width-container: 640px;

	/* -- Motion ------------------------------------------------------------ */
	--tge-ease: cubic-bezier( 0.2, 0.8, 0.2, 1 );
}
/* ==========================================================================
   2. Defensive reset
   ==========================================================================

   Neutralises whatever the theme, Elementor Pro or WP Travel Engine has done
   to the controls. Component classes below re-declare the six contested
   properties and win on specificity.
*/

.tge-form,
.tge-form *,
.tge-form *::before,
.tge-form *::after {
	box-sizing: border-box;
}
.tge-form {
	font-family: var( --tge-font );
	color: var( --tge-ink );
	line-height: 1.5;
	text-align: left;
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}
.tge-form input,
.tge-form select,
.tge-form textarea,
.tge-form button,
.tge-form label,
.tge-form fieldset,
.tge-form legend {
	margin: 0;
	border: 0;
	outline: 0;
	line-height: 1.4;
	letter-spacing: normal;
	text-transform: none;
	box-shadow: none;
	width: auto;
	max-width: none;
	min-height: 0;
	float: none;
	vertical-align: baseline;

	/* The six. See the header of this file. */
	font-family: var( --tge-font ) !important;
	font-size: var( --tge-size-input ) !important;
	color: var( --tge-ink ) !important;
	background: transparent !important;
	border-radius: 0 !important;
	padding: 0 !important;
}
.tge-form input,
.tge-form select,
.tge-form textarea {
	-webkit-appearance: none;
	appearance: none;
}
.tge-form button {
	cursor: pointer;
	text-align: inherit;
	-webkit-appearance: none;
	appearance: none;
}
/* The checkbox is the one control that keeps its native rendering. */
.tge-form input[type='checkbox'] {
	-webkit-appearance: checkbox;
	appearance: auto;
	accent-color: var( --tge-navy );
	width: var( --tge-size-input );
	height: var( --tge-size-input );
	flex: none;
	cursor: pointer;
}
.tge-form fieldset,
.tge-form legend {
	border: 0;
	width: 100%;
}
.tge-form ::placeholder {
	color: var( --tge-placeholder );
	opacity: 1;
}
/* ==========================================================================
   3. Layout
   ========================================================================== */

.tge-form .tge-page {
	background: var( --tge-canvas );
	min-height: 100vh;
	padding: var( --tge-pad-page-y ) var( --tge-pad-page-x );
}
.tge-form .tge-container {
	max-width: var( --tge-width-container );
	margin-left: auto;
	margin-right: auto;
	width: 100%;
}
/* ==========================================================================
   4. Header
   ========================================================================== */

.tge-form .tge-header {
	margin-bottom: var( --tge-gap-header );
}
.tge-form .tge-title {
	margin: 0;
	font-size: var( --tge-size-h1 );
	font-weight: 500;
	line-height: 1.12;
	letter-spacing: -0.025em;
	color: var( --tge-ink );
	max-width: 16ch;
}
.tge-form .tge-intro {
	margin: 12px 0 0;
	font-size: var( --tge-size-intro );
	font-weight: 300;
	line-height: 1.5;
	color: var( --tge-muted );
}
/* ==========================================================================
   5. Progress rail
   ==========================================================================

   Four equal columns that never collapse, never wrap and never scroll. The
   labels are nowrap and the type is clamped small enough to survive 320px.
*/

.tge-form .tge-progress {
	display: grid;
	grid-template-columns: repeat( 4, 1fr );
	gap: 6px;
	margin-bottom: 16px;
}
.tge-form .tge-progress-step {
	min-width: 0;
}
.tge-form .tge-progress-bar {
	height: 2px;
	background: var( --tge-border );
	transition: background-color 0.35s ease;
}
.tge-form .tge-progress-step.is-done .tge-progress-bar,
.tge-form .tge-progress-step.is-current .tge-progress-bar {
	background: var( --tge-navy );
}
.tge-form .tge-progress-label {
	display: block;
	margin-top: 6px;
	font-size: var( --tge-size-progress );
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	white-space: nowrap;
	color: var( --tge-faint );
	transition: color 0.35s ease;
}
.tge-form .tge-progress-step.is-done .tge-progress-label {
	color: var( --tge-muted );
}
.tge-form .tge-progress-step.is-current .tge-progress-label {
	color: var( --tge-navy );
}
/* ==========================================================================
   6. Step
   ========================================================================== */

.tge-form .tge-step {
	padding-top: var( --tge-pad-step );
	animation: tgeIn 0.32s var( --tge-ease ) both;
}
.tge-form .tge-step-title {
	margin: 0;
	font-size: var( --tge-size-h2 );
	font-weight: 500;
	letter-spacing: -0.02em;
	color: var( --tge-ink );
}
.tge-form .tge-step-sub {
	margin: 6px 0 0;
	font-size: var( --tge-size-subhead );
	font-weight: 300;
	color: var( --tge-muted );
}
/* ==========================================================================
   7. Fields
   ==========================================================================

   No card, no panel, no tinted background anywhere. The only structure between
   one group of fields and the next is a hairline.
*/

.tge-form .tge-field {
	margin-bottom: var( --tge-gap-field );
}
.tge-form .tge-field + .tge-field {
	padding-top: var( --tge-gap-field );
	border-top: 1px solid var( --tge-divider );
}
.tge-form .tge-field:last-child {
	margin-bottom: 0;
}
.tge-form .tge-divider {
	height: 1px;
	background: var( --tge-divider );
	border: 0;
	margin: var( --tge-gap-field ) 0;
}
.tge-form .tge-label {
	display: block;
	margin-bottom: var( --tge-gap-label );
	font-size: var( --tge-size-label ) !important;
	font-weight: 500;
	color: var( --tge-label ) !important;
}
/* Chip groups sit slightly further from their label than inputs do. */
.tge-form .tge-label--chips {
	margin-bottom: var( --tge-gap-label-chips );
}
.tge-form .tge-help {
	display: block;
	margin-top: 6px;
	font-size: var( --tge-size-micro-lg );
	font-weight: 300;
	color: var( --tge-muted );
}
.tge-form .tge-help--above {
	margin-top: 0;
	margin-bottom: var( --tge-gap-label-chips );
}
.tge-form .tge-micro {
	font-size: var( --tge-size-micro );
	font-weight: 400;
	color: var( --tge-muted );
}
.tge-form .tge-optional {
	margin-left: 6px;
	font-size: var( --tge-size-micro );
	font-weight: 300;
	color: var( --tge-placeholder );
}
/* The step-1 contact block. Reflows on its own, without a breakpoint. */
.tge-form .tge-grid {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 220px, 1fr ) );
	gap: var( --tge-gap-contact );
}
/* ==========================================================================
   8. Text controls
   ========================================================================== */

.tge-form .tge-input,
.tge-form .tge-textarea {
	display: block;
	width: 100%;
	border: 1px solid var( --tge-border );
	font-weight: 400;
	transition: border-color 0.18s ease, box-shadow 0.18s ease;

	font-family: var( --tge-font ) !important;
	font-size: var( --tge-size-input ) !important;
	color: var( --tge-ink ) !important;
	background: var( --tge-canvas ) !important;
	border-radius: var( --tge-radius-control ) !important;
	padding: var( --tge-pad-control ) !important;
}
.tge-form .tge-textarea {
	min-height: 120px;
	resize: vertical;
	line-height: 1.5;
}
.tge-form .tge-input:focus,
.tge-form .tge-textarea:focus {
	border-color: var( --tge-navy );
	box-shadow: var( --tge-ring );
}
.tge-form .tge-input.is-error,
.tge-form .tge-textarea.is-error,
.tge-form .tge-input[aria-invalid='true'],
.tge-form .tge-textarea[aria-invalid='true'] {
	border-color: var( --tge-crimson );
}
/* Arrival, Departure and Month sit two-up and run a touch tighter. */
.tge-form .tge-input--date {
	padding: var( --tge-pad-control-date ) !important;
}
.tge-form .tge-dates {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 150px, 1fr ) );
	gap: var( --tge-gap-contact );
}
/* ==========================================================================
   9. Chips
   ========================================================================== */

.tge-form .tge-chips {
	display: flex;
	flex-wrap: wrap;
	gap: var( --tge-gap-chip );
}
.tge-form .tge-chip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var( --tge-target );
	border: 1px solid var( --tge-border );
	font-weight: 400;
	text-align: center;
	transition: border-color 0.18s ease, background-color 0.18s ease, color 0.18s ease;

	font-family: var( --tge-font ) !important;
	font-size: var( --tge-size-chip ) !important;
	color: var( --tge-label ) !important;
	background: var( --tge-canvas ) !important;
	border-radius: var( --tge-radius-chip ) !important;
	padding: var( --tge-pad-chip ) !important;
}
.tge-form .tge-chip:hover {
	border-color: var( --tge-crimson );
}
.tge-form .tge-chip.is-selected {
	border-color: var( --tge-navy );
	color: var( --tge-canvas ) !important;
	background: var( --tge-navy ) !important;
}
/* A selected chip keeps its navy fill and takes the crimson edge on hover. */
.tge-form .tge-chip.is-selected:hover {
	border-color: var( --tge-crimson );
}
.tge-form .tge-chip:focus-visible {
	border-color: var( --tge-navy );
	box-shadow: var( --tge-ring );
}
/* ==========================================================================
   10. Journey cards
   ========================================================================== */

.tge-form .tge-cards {
	display: flex;
	flex-direction: column;
	gap: var( --tge-gap-chip );
}
.tge-form .tge-card {
	display: flex;
	align-items: flex-start;
	gap: var( --tge-gap-counter );
	width: 100%;
	border: 1px solid var( --tge-border );
	text-align: left;
	transition: border-color 0.18s ease, box-shadow 0.18s ease;

	font-family: var( --tge-font ) !important;
	font-size: var( --tge-size-card-title ) !important;
	color: var( --tge-ink ) !important;
	background: var( --tge-canvas ) !important;
	border-radius: var( --tge-radius-card ) !important;
	padding: var( --tge-pad-card ) !important;
}
.tge-form .tge-card:hover {
	border-color: var( --tge-crimson );
}
/* Selected is an outline, never a fill. */
.tge-form .tge-card.is-selected {
	border-color: var( --tge-navy );
	box-shadow: 0 0 0 1px var( --tge-navy );
}
.tge-form .tge-card.is-selected:hover {
	border-color: var( --tge-crimson );
	box-shadow: 0 0 0 1px var( --tge-crimson );
}
.tge-form .tge-card:focus-visible {
	border-color: var( --tge-navy );
	box-shadow: var( --tge-ring );
}
.tge-form .tge-card-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: var( --tge-size-pill );
	height: var( --tge-size-pill );
	border: 1px solid var( --tge-border );
	font-size: var( --tge-size-micro );
	font-weight: 500;
	color: var( --tge-muted );
	background: var( --tge-canvas );
	border-radius: var( --tge-radius-pill );
}
.tge-form .tge-card.is-selected .tge-card-num {
	border-color: var( --tge-navy );
	color: var( --tge-canvas );
	background: var( --tge-navy );
}
.tge-form .tge-card-body {
	min-width: 0;
}
.tge-form .tge-card-title {
	display: block;
	font-size: var( --tge-size-card-title );
	font-weight: 500;
	color: var( --tge-ink );
}
.tge-form .tge-card-desc {
	display: block;
	margin-top: 4px;
	font-size: var( --tge-size-subhead );
	font-weight: 300;
	color: var( --tge-muted );
}
/* ==========================================================================
   11. Counters
   ========================================================================== */

.tge-form .tge-counters {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 220px, 1fr ) );
	gap: var( --tge-gap-contact );
}
.tge-form .tge-counter {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var( --tge-gap-counter );
	border: 1px solid var( --tge-border );
	border-radius: var( --tge-radius-panel );
	padding: var( --tge-gap-counter );
}
.tge-form .tge-counter-text {
	min-width: 0;
}
.tge-form .tge-counter-name {
	display: block;
	font-size: var( --tge-size-label );
	font-weight: 500;
	color: var( --tge-label );
}
.tge-form .tge-counter-hint {
	display: block;
	margin-top: 2px;
	font-size: var( --tge-size-micro );
	font-weight: 300;
	color: var( --tge-muted );
}
.tge-form .tge-counter-control {
	display: flex;
	align-items: center;
	gap: var( --tge-gap-counter );
	flex: none;
}
.tge-form .tge-counter-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: var( --tge-size-counter-btn );
	height: var( --tge-size-counter-btn );
	border: 1px solid var( --tge-border );
	line-height: 1;
	transition: border-color 0.18s ease;

	font-family: var( --tge-font ) !important;
	font-size: var( --tge-size-input ) !important;
	color: var( --tge-navy ) !important;
	background: var( --tge-canvas ) !important;
	border-radius: var( --tge-radius-chip ) !important;
	padding: 0 !important;
}
.tge-form .tge-counter-btn:hover {
	border-color: var( --tge-crimson );
}
.tge-form .tge-counter-btn:focus-visible {
	border-color: var( --tge-navy );
	box-shadow: var( --tge-ring );
}
.tge-form .tge-counter-value {
	min-width: var( --tge-size-pill );
	text-align: center;
	font-size: var( --tge-size-counter-value );
	font-weight: 500;
	color: var( --tge-ink );
	font-variant-numeric: tabular-nums;
}
/* ==========================================================================
   12. Searchable combobox
   ========================================================================== */

.tge-form .tge-combobox {
	position: relative;
}
.tge-form .tge-combobox-panel {
	position: absolute;
	top: calc( 100% + 6px );
	left: 0;
	right: 0;
	z-index: 40;
	display: none;
	overflow-y: auto;
	max-height: min( 270px, 42vh );
	border: 1px solid var( --tge-border );
	border-radius: var( --tge-radius-panel );
	background: var( --tge-canvas );
	box-shadow: var( --tge-panel-shadow );
	padding: 6px;
	-webkit-overflow-scrolling: touch;
}
.tge-form .tge-combobox.is-open .tge-combobox-panel {
	display: block;
}
.tge-form .tge-combobox-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var( --tge-gap-counter );
	width: 100%;
	min-height: var( --tge-target );
	border: 0;
	text-align: left;
	transition: background-color 0.12s ease;

	font-family: var( --tge-font ) !important;
	font-size: var( --tge-size-input ) !important;
	color: var( --tge-ink ) !important;
	background: transparent !important;
	border-radius: var( --tge-radius-row ) !important;
	padding: 0 12px !important;
}
/*
 * The one hover in the design that is not crimson. A dropdown row is a list
 * item being pointed at, not a control being pressed, and 40 crimson rows
 * under a moving cursor would read as 40 errors.
 */
.tge-form .tge-combobox-row:hover,
.tge-form .tge-combobox-row.is-active {
	background: var( --tge-row-hover ) !important;
}
.tge-form .tge-combobox-row.is-selected {
	color: var( --tge-navy ) !important;
	font-weight: 500;
}
.tge-form .tge-combobox-row-name {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.tge-form .tge-combobox-row-meta {
	flex: none;
	color: var( --tge-muted );
}
.tge-form .tge-combobox-empty {
	padding: 14px 12px;
	font-size: var( --tge-size-subhead );
	font-weight: 300;
	color: var( --tge-muted );
}
/* ==========================================================================
   13. Phone control
   ==========================================================================

   One bordered wrapper holding two controls. The wrapper owns the border, the
   focus ring and the error state, so the pair reads as a single field.
*/

.tge-form .tge-phone {
	position: relative;
	display: flex;
	align-items: stretch;
	border: 1px solid var( --tge-border );
	border-radius: var( --tge-radius-control );
	background: var( --tge-canvas );
	transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.tge-form .tge-phone:focus-within,
.tge-form .tge-phone.is-focus {
	border-color: var( --tge-navy );
	box-shadow: var( --tge-ring );
}
.tge-form .tge-phone.is-error {
	border-color: var( --tge-crimson );
}
.tge-form .tge-phone-dial {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	flex: none;
	border-right: 1px solid var( --tge-border );
	transition: border-color 0.18s ease;

	font-family: var( --tge-font ) !important;
	font-size: var( --tge-size-input ) !important;
	color: var( --tge-ink ) !important;
	background: transparent !important;
	border-radius: 0 !important;
	padding: 0 14px !important;
}
.tge-form .tge-phone-dial:hover {
	border-right-color: var( --tge-crimson );
}
.tge-form .tge-phone-caret {
	flex: none;
	width: 8px;
	line-height: 1;
	font-size: 8px;
	color: var( --tge-faint );
}
.tge-form .tge-phone-input {
	flex: 1;
	min-width: 0;
	border: 0;

	font-family: var( --tge-font ) !important;
	font-size: var( --tge-size-input ) !important;
	color: var( --tge-ink ) !important;
	background: transparent !important;
	border-radius: 0 !important;
	padding: var( --tge-pad-control ) !important;
}
.tge-form .tge-phone-input:focus {
	box-shadow: none;
}
/* The dial panel is the combobox shell with a search box fixed on top. */
.tge-form .tge-phone-panel {
	position: absolute;
	top: calc( 100% + 6px );
	left: 0;
	right: 0;
	z-index: 40;
	display: none;
	border: 1px solid var( --tge-border );
	border-radius: var( --tge-radius-panel );
	background: var( --tge-canvas );
	box-shadow: var( --tge-panel-shadow );
	padding: 6px;
}
.tge-form .tge-phone.is-open .tge-phone-panel {
	display: block;
}
.tge-form .tge-phone-search {
	display: block;
	width: 100%;
	margin-bottom: 6px;
	border: 1px solid var( --tge-border );

	font-family: var( --tge-font ) !important;
	font-size: var( --tge-size-input ) !important;
	color: var( --tge-ink ) !important;
	background: var( --tge-canvas ) !important;
	border-radius: var( --tge-radius-chip ) !important;
	padding: var( --tge-pad-control-date ) !important;
}
.tge-form .tge-phone-search:focus {
	border-color: var( --tge-navy );
}
.tge-form .tge-phone-list {
	overflow-y: auto;
	max-height: min( 224px, 36vh );
	-webkit-overflow-scrolling: touch;
}
/* ==========================================================================
   14. Messages
   ========================================================================== */

.tge-form .tge-error {
	margin-top: var( --tge-gap-label );
	font-size: var( --tge-size-consent );
	font-weight: 400;
	color: var( --tge-crimson );
}
.tge-form .tge-error:empty {
	display: none;
}
.tge-form .tge-notice {
	margin-top: var( --tge-gap-label );
	border-left: 1px solid var( --tge-border );
	padding-left: 12px;
	font-size: var( --tge-size-consent );
	font-weight: 300;
	color: var( --tge-body );
}
/* ==========================================================================
   15. Navigation and buttons
   ==========================================================================

   Navy at rest, crimson on hover, on every button. The label never changes
   colour on hover — only the fill or the edge does.
*/

.tge-form .tge-nav {
	display: flex;
	align-items: center;
	gap: var( --tge-gap-nav );
	margin-top: var( --tge-gap-nav-top );
}
.tge-form .tge-btn-primary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 1;
	min-width: 0;
	min-height: var( --tge-target-nav );
	border: 1px solid var( --tge-navy );
	font-weight: 500;
	text-align: center;
	transition: background-color 0.18s ease, border-color 0.18s ease;

	font-family: var( --tge-font ) !important;
	font-size: var( --tge-size-cta ) !important;
	color: var( --tge-canvas ) !important;
	background: var( --tge-navy ) !important;
	border-radius: var( --tge-radius-control ) !important;
	padding: 0 16px !important;
}
.tge-form .tge-btn-primary:hover {
	border-color: var( --tge-crimson );
	background: var( --tge-crimson ) !important;
}
.tge-form .tge-btn-primary:focus-visible {
	box-shadow: var( --tge-ring );
}
.tge-form .tge-btn-secondary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	min-height: var( --tge-target-nav );
	white-space: nowrap;
	border: 1px solid var( --tge-border );
	font-weight: 500;
	transition: border-color 0.18s ease;

	font-family: var( --tge-font ) !important;
	font-size: var( --tge-size-cta ) !important;
	color: var( --tge-body ) !important;
	background: var( --tge-canvas ) !important;
	border-radius: var( --tge-radius-control ) !important;
	padding: 0 16px !important;
}
.tge-form .tge-btn-secondary:hover {
	border-color: var( --tge-crimson );
}
.tge-form .tge-btn-secondary:focus-visible {
	border-color: var( --tge-navy );
	box-shadow: var( --tge-ring );
}
/* "New enquiry" on the confirmation screen. */
.tge-form .tge-btn-secondary--compact {
	min-height: var( --tge-target-compact );
	color: var( --tge-label ) !important;
}
/* ==========================================================================
   16. Consent and the corporate note
   ========================================================================== */

.tge-form .tge-consent {
	display: flex;
	align-items: flex-start;
	gap: var( --tge-gap-counter );
	min-height: var( --tge-target );
	cursor: pointer;

	font-size: var( --tge-size-consent ) !important;
	font-weight: 300;
	color: var( --tge-body ) !important;
}
.tge-form .tge-consent input[type='checkbox'] {
	margin-top: 2px;
}
.tge-form .tge-note {
	margin-top: var( --tge-gap-note );
	font-size: var( --tge-size-consent );
	font-weight: 300;
	color: var( --tge-muted );
}
.tge-form .tge-link {
	color: var( --tge-navy );
	text-decoration: underline;
}
.tge-form .tge-link:hover {
	color: var( --tge-crimson );
}
/* ==========================================================================
   17. Confirmation
   ========================================================================== */

.tge-form .tge-confirmation {
	padding-top: var( --tge-pad-step );
	animation: tgeIn 0.32s var( --tge-ease ) both;
}
/*
 * Content-agnostic on purpose: a navy pill that reads correctly whether the
 * markup puts a reference, a word or nothing inside it. The design has three
 * glyphs and a tick is not one of them.
 */
.tge-form .tge-confirmation-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var( --tge-size-pill );
	min-height: var( --tge-size-pill );
	margin-bottom: var( --tge-gap-label );
	padding: 0 10px;
	font-size: var( --tge-size-micro );
	font-weight: 500;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var( --tge-canvas );
	background: var( --tge-navy );
	border-radius: var( --tge-radius-pill );
}
.tge-form .tge-confirmation-body {
	margin: 8px 0 0;
	font-size: var( --tge-size-intro );
	font-weight: 300;
	line-height: 1.5;
	color: var( --tge-body );
}
.tge-form .tge-summary {
	margin-top: var( --tge-gap-field );
}
.tge-form .tge-summary-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	padding: 12px 0;
	border-top: 1px solid var( --tge-divider );
}
.tge-form .tge-summary-row:last-child {
	border-bottom: 1px solid var( --tge-divider );
}
.tge-form .tge-summary-key {
	flex: none;
	font-size: var( --tge-size-consent );
	font-weight: 400;
	color: var( --tge-muted );
}
.tge-form .tge-summary-value {
	text-align: right;
	font-size: var( --tge-size-subhead );
	font-weight: 400;
	color: var( --tge-ink );
}
/* ==========================================================================
   18. Motion
   ========================================================================== */

@keyframes tgeIn {
	from {
		opacity: 0;
		transform: translateY( 8px );
	}

	to {
		opacity: 1;
		transform: none;
	}
}

/*
 * The only media query in this file, and it is about vestibular safety rather
 * than viewport width. Everything else sizes itself with clamp() and auto-fit.
 */
@media ( prefers-reduced-motion: reduce ) {

.tge-form .tge-step,
.tge-form .tge-confirmation {
		animation: none;
	}
.tge-form .tge-progress-bar,
.tge-form .tge-progress-label,
.tge-form .tge-chip,
.tge-form .tge-card,
.tge-form .tge-input,
.tge-form .tge-textarea,
.tge-form .tge-phone,
.tge-form .tge-counter-btn,
.tge-form .tge-combobox-row,
.tge-form .tge-btn-primary,
.tge-form .tge-btn-secondary {
		transition: none;
	}
}

/* ==========================================================================
   19. Real controls behind the chip styling
   ==========================================================================

   Added in Phase 4, when the markup arrived. Chips and journey cards are radio
   and checkbox inputs with real labels, not buttons: a button posts nothing,
   means nothing without script, and announces itself to a screen reader as an
   action rather than a choice.

   The input is taken out of the layout but left focusable and hit-testable, and
   the label beside it carries the entire appearance. Selection is expressed
   with an adjacent-sibling selector rather than :has(), so it works everywhere
   without waiting on browser support.
   ========================================================================== */

.tge-form .tge-chips,
.tge-form .tge-cards {
	position: relative;
}

.tge-form .tge-chip-input,
.tge-form .tge-card-input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	overflow: hidden;
	white-space: nowrap;
	clip-path: inset( 50% );
	opacity: 0;
}

/* Chip, selected. */
.tge-form .tge-chip-input:checked + .tge-chip {
	border-color: var( --tge-navy );
	color: var( --tge-canvas ) !important;
	background: var( --tge-navy ) !important;
}

.tge-form .tge-chip-input:checked + .tge-chip:hover {
	border-color: var( --tge-crimson );
}

/* The focus ring has to live on the label, since the input is not visible. */
.tge-form .tge-chip-input:focus-visible + .tge-chip {
	border-color: var( --tge-navy );
	box-shadow: var( --tge-ring );
}

/* Journey card, selected: an outline and a ring, never a fill. */
.tge-form .tge-card-input:checked + .tge-card {
	border-color: var( --tge-navy );
	box-shadow: 0 0 0 1px var( --tge-navy );
}

.tge-form .tge-card-input:checked + .tge-card:hover {
	border-color: var( --tge-crimson );
	box-shadow: 0 0 0 1px var( --tge-crimson );
}

.tge-form .tge-card-input:focus-visible + .tge-card {
	border-color: var( --tge-navy );
	box-shadow: var( --tge-ring );
}

.tge-form .tge-card-input:checked + .tge-card .tge-card-num {
	border-color: var( --tge-navy );
	color: var( --tge-canvas );
	background: var( --tge-navy );
}

/* ==========================================================================
   20. The country select
   ==========================================================================

   The no-script control for a required field. The native arrow is kept rather
   than drawn, which avoids reserving space for a glyph the design does not
   have. The script replaces this with the designed combobox.
   ========================================================================== */

.tge-form .tge-select {
	display: block;
	width: 100%;
	border: 1px solid var( --tge-border );
	font-weight: 400;
	-webkit-appearance: menulist;
	appearance: auto;
	transition: border-color 0.18s ease, box-shadow 0.18s ease;

	font-family: var( --tge-font ) !important;
	font-size: var( --tge-size-input ) !important;
	color: var( --tge-ink ) !important;
	background: var( --tge-canvas ) !important;
	border-radius: var( --tge-radius-control ) !important;
	padding: var( --tge-pad-control ) !important;
}

.tge-form .tge-select:focus {
	border-color: var( --tge-navy );
	box-shadow: var( --tge-ring );
}

.tge-form .tge-select.is-error,
.tge-form .tge-select[aria-invalid='true'] {
	border-color: var( --tge-crimson );
}

/* ==========================================================================
   21. Controls that changed element in Phase 4
   ==========================================================================

   The counter name became a <label> and its value became an <input>, so both
   are now inside the element reset's reach. The reset carries !important on
   font-size and colour, so these have to as well or they lose — which is the
   cascade working as intended, not a fight with it.
   ========================================================================== */

.tge-form .tge-counter-name {
	font-size: var( --tge-size-label ) !important;
	color: var( --tge-label ) !important;
}

.tge-form .tge-counter-value {
	width: var( --tge-size-pill );
	border: 0;
	text-align: center;
	font-weight: 500;

	font-size: var( --tge-size-counter-value ) !important;
	color: var( --tge-ink ) !important;
	background: transparent !important;
}

.tge-form .tge-counter-value:focus {
	box-shadow: none;
}

/* Conditional blocks, revealed by the conditions engine. */
.tge-form .tge-subfield {
	margin-top: var( --tge-gap-contact );
}

/* ==========================================================================
   22. Off-screen utilities
   ========================================================================== */

/*
 * The honeypot. Moved off screen rather than display:none, because a bot that
 * bothers to check computed styles will skip a field it can see is not
 * rendered — and this one is meant to be filled in.
 */
.tge-form .tge-hp {
	position: absolute;
	left: -100vw;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Wording that belongs to screen readers only. */
.tge-form .tge-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	white-space: nowrap;
	clip-path: inset( 50% );
	border: 0;
}

/* ==========================================================================
   23. States the behaviour script sets
   ========================================================================== */

/*
 * A chip group has no single control to outline, so the failure is shown on its
 * legend. Colour is one of the six, so it carries !important like the rest.
 */
.tge-form .tge-label.is-error,
.tge-form .tge-consent.is-error {
	color: var( --tge-crimson ) !important;
}

/*
 * The call to action while a submission is in flight. It is never disabled —
 * the script guards against a second press instead — so this says "working"
 * without taking the control away.
 */
.tge-form .tge-btn-primary[aria-busy='true'] {
	cursor: progress;
}

/* ==========================================================================
   24. Contrast, on request only
   ==========================================================================

   Three tokens in the approved palette do not meet WCAG AA on white. Measured,
   not estimated:

     --tge-faint        #a1a1aa   2.56:1   needs 4.5:1   (1.4.3 body text)
     --tge-placeholder  #b4b4bb   2.06:1   needs 4.5:1   (1.4.3 body text)
     --tge-border       #e4e4e7   1.27:1   needs 3.0:1   (1.4.11 non-text)

   Everything else in the palette passes, some of it comfortably: body 7.73:1,
   label 10.44:1, ink 17.72:1, navy 16.51:1, crimson 5.42:1.

   The standing rule is never to redesign, and the palette is signed off, so
   the defaults above are untouched. What this section does instead is honour
   a request the visitor has already made of their own operating system. Under
   `prefers-contrast: more` the three failing tokens are replaced with the
   LIGHTEST value on the same neutral ramp that clears the threshold — the
   minimum change that complies, not a jump to black. Nobody who has not asked
   for it sees any difference whatsoever.

   Because the whole palette is custom properties, this is nine declarations
   and no component rule is touched. That is the entire reason the tokens exist.

   `forced-colors` is the Windows High Contrast case, where the browser
   replaces colours outright. There the job is not to pick colours but to stop
   the design fighting the ones imposed: keep borders visible on controls that
   drew their boundary with a background rather than a border, and keep the
   selected chip distinguishable when its navy fill has been thrown away.
   ========================================================================== */

@media ( prefers-contrast: more ) {

	.tge-form {
		/* 2.56:1 -> 4.56:1 */
		--tge-faint: #75757e;
		/* 2.06:1 -> 4.51:1 */
		--tge-placeholder: #76767d;
		/* 1.27:1 -> 3.03:1 */
		--tge-border: #949497;
		/* Decorative rather than a component boundary, so not strictly in
		   scope for 1.4.11 — but somebody who asked for more contrast wants
		   the structure visible, not just the text. */
		--tge-divider: #949496;
	}

	/*
	 * The focus ring is a tinted navy shadow at 9% opacity. That reads as a
	 * soft halo in the default design and as almost nothing at high contrast,
	 * so it goes solid.
	 */
	.tge-form {
		--tge-ring: 0 0 0 3px rgba( 26, 17, 90, 0.55 );
	}
}

@media ( forced-colors: active ) {

	/*
	 * Chips, cards and counters already draw a real 1px border in the approved
	 * design, and forced colours map border-color to the system text colour, so
	 * those keep their shape with no help. Buttons and inputs are likewise
	 * handled by the browser. Only two things in the form express state with
	 * nothing but a background fill, and a fill is exactly what forced colours
	 * throw away.
	 *
	 * `forced-color-adjust: none` is the documented opt-out for that case. It
	 * is used on these two rules and nowhere else — opting the whole form out
	 * would defeat the point of the mode.
	 */

	/* Selected chip and journey card: navy fill, discarded without this. */
	.tge-form .tge-chip-input:checked + .tge-chip,
	.tge-form .tge-card-input:checked + .tge-card {
		forced-color-adjust: none;
		background-color: Highlight;
		color: HighlightText;
	}

	/*
	 * The progress rail is a 2px bar with no text and no border — pure
	 * background — so in forced colours every step looks identical and the
	 * traveller loses their place in the form.
	 */
	.tge-form .tge-progress-bar {
		forced-color-adjust: none;
		background-color: GrayText;
	}

	.tge-form .tge-progress-step.is-done .tge-progress-bar,
	.tge-form .tge-progress-step.is-current .tge-progress-bar {
		forced-color-adjust: none;
		background-color: Highlight;
	}
}

/* ==========================================================================
   25. Hidden wins, and must come last
   ==========================================================================

   This lived up with the reset, where it lost. `.tge-form [hidden]` and
   `.tge-form .tge-select` are both (0,2,0), so the later rule won and the
   native country select stayed on screen underneath the combobox that had
   replaced it — two country pickers, one of them a duplicate nobody wanted.

   Sitting at the end means it outranks every component rule by order rather
   than by !important, which display is not permitted to use. Anything the
   markup or the script marks hidden is hidden.

   Section 24 is deliberately in front of this one and sets no `display`, so
   the invariant still holds: nothing after this line may set `display` on
   anything that can also be hidden.
   ========================================================================== */

.tge-form [hidden] {
	display: none;
}