/* =========================================================================
   TMT Booking Form (Gravity Forms #2) — editorial redesign, "v3" spec.

   A review screen, not a form: every value was set by TMT when the trip was
   approved, and the customer's only job is to confirm. Accordingly all of
   GF's own fields are hidden here and the visible values are rendered as
   static text by phase-19-booking-form-editorial.php.

   READ THIS BEFORE CHANGING THE HIDING RULE BELOW: the inputs are hidden
   with the clip/1px "visually hidden" technique on purpose. They must NOT
   be display:none'd away carelessly and must NEVER be disabled — a
   disabled control is omitted from the POST entirely, which would strip
   the booking's trip/price/participant data on its way to WooCommerce.
   ========================================================================= */

.tmt-bk-page-bg {
	--ink: #16241D;
	--muted: #4E5E55;
	--muted-2: #5F6E65;
	--muted-3: #7C8A81;
	--muted-4: #8B978F;
	--card: #FBFAF6;
	--line: #EDEFEA;
	--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 80px;
	font-family: Archivo, system-ui, sans-serif;
	color: var( --ink );
	-webkit-font-smoothing: antialiased;
}

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

/* ---- top row: logo + inquiry/review/checkout ------------------------ */
.tmt-bk-top-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
	padding: 0 0 24px;
}
.tmt-bk-logo-box {
	background: var( --ink );
	border-radius: 10px;
	padding: 12px 16px;
	display: flex;
	align-items: center;
}
.tmt-bk-logo-box img { width: 158px; height: auto; display: block; }
.tmt-bk-steps {
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: 'JetBrains Mono', monospace;
	font-size: 10.5px;
	letter-spacing: .16em;
	color: var( --muted );
}
.tmt-bk-steps .is-done { color: var( --ink ); }
.tmt-bk-steps .is-current { color: var( --orange-deep ); }
.tmt-bk-steps-rule { width: 26px; height: 1px; background: #9AA69E; }

/* ---- grid ---------------------------------------------------------- */
.tmt-bk-grid {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( min( 340px, 100% ), 1fr ) );
	gap: 20px;
	align-items: start;
}

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

/* ---- left: trip summary -------------------------------------------- */
.tmt-bk-trip-photo {
	height: 170px;
	background-color: #E9ECE6;
	background-size: cover;
	background-position: center;
}
.tmt-bk-trip-body { padding: 26px 30px 30px; }

.tmt-bk-eyebrow {
	display: block;
	font-family: 'JetBrains Mono', monospace;
	font-size: 10.5px;
	letter-spacing: .18em;
	color: var( --orange-deep );
}
.tmt-bk-eyebrow--muted { color: var( --muted-3 ); }

.tmt-bk-trip-title {
	margin: 10px 0 0;
	font-family: 'Barlow Condensed', sans-serif;
	font-weight: 800;
	font-size: 40px;
	line-height: .96;
	text-transform: uppercase;
	color: var( --ink );
}
.tmt-bk-trip-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 12px;
	font-family: 'JetBrains Mono', monospace;
	font-size: 11px;
	letter-spacing: .08em;
	color: var( --muted-2 );
}

.tmt-bk-facts { margin-top: 24px; display: flex; flex-direction: column; }
.tmt-bk-fact {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 18px;
	padding: 13px 0;
	border-top: 1px solid var( --line );
}
.tmt-bk-fact-k {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .09em;
	color: var( --muted-3 );
	text-transform: uppercase;
	flex: none;
}
.tmt-bk-fact-v {
	font-size: 15.5px;
	font-weight: 600;
	text-align: right;
	line-height: 1.35;
	word-break: break-word;
}

.tmt-bk-note {
	margin-top: 22px;
	display: flex;
	gap: 14px;
	align-items: center;
	background: #F2F1EA;
	border-radius: 12px;
	padding: 16px 18px;
}
.tmt-bk-note-icon {
	flex: none;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var( --orange-tint );
	border: 1.5px solid #FFD3BE;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: 'Barlow Condensed', sans-serif;
	font-weight: 800;
	color: var( --orange-deep );
	font-size: 20px;
}
.tmt-bk-note p {
	margin: 0;
	font-size: 13.5px;
	line-height: 1.55;
	color: var( --muted-2 );
}

/* =========================================================================
   Right column — this IS Gravity Forms' own wrapper, restyled into a card.
   ========================================================================= */
.tmt-bk-grid #gform_wrapper_2 {
	background: var( --card );
	border-radius: 16px;
	box-shadow: 0 18px 44px rgba( 22, 36, 29, .13 );
	padding: 28px 30px 30px !important;
	margin: 0 !important;
	max-width: none !important;
	box-sizing: border-box;
	font-family: Archivo, system-ui, sans-serif !important;
}
.tmt-bk-grid #gform_wrapper_2 form {
	display: flex;
	flex-direction: column;
}

/* Order: our review panel first, then GF's footer (the confirm button).
   The real fields keep their DOM position but are visually hidden. */
.tmt-bk-grid #gform_wrapper_2 .gform_fields,
.tmt-bk-grid #gform_wrapper_2 .gform_body { order: 0; }
.tmt-bk-review { order: 1; }
.tmt-bk-grid #gform_wrapper_2 .gform_footer,
.tmt-bk-grid #gform_wrapper_2 .gform-footer { order: 2; }

/* THE LOCK. Every real control is taken out of sight, out of the tab order
   and out of reach of the pointer — but stays in the DOM, enabled, so its
   pre-filled value is still submitted. Do not swap this for display:none
   on the inputs and never add `disabled`; see the file header. */
.tmt-bk-grid #gform_wrapper_2 .gform_body,
.tmt-bk-grid #gform_wrapper_2 .gform_fields {
	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;
}
/* Belt and braces: even if something re-reveals the container, nothing
   inside it can be focused or clicked. */
.tmt-bk-grid #gform_wrapper_2 .gform_fields input,
.tmt-bk-grid #gform_wrapper_2 .gform_fields select,
.tmt-bk-grid #gform_wrapper_2 .gform_fields textarea,
.tmt-bk-grid #gform_wrapper_2 .gform_fields button {
	pointer-events: none !important;
}
/* GF's progress/validation chrome has nothing to say on a locked form. */
.tmt-bk-grid #gform_wrapper_2 .gform_heading,
.tmt-bk-grid #gform_wrapper_2 .gf_progressbar_wrapper { display: none !important; }

/* ---- review panel --------------------------------------------------- */
.tmt-bk-review {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.tmt-bk-ref-row {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 16px;
}
.tmt-bk-ref {
	font-family: 'JetBrains Mono', monospace;
	font-size: 17px;
	color: var( --ink );
	letter-spacing: .05em;
	margin-top: 5px;
}
.tmt-bk-hold {
	flex: none;
	font-family: 'JetBrains Mono', monospace;
	font-size: 10px;
	letter-spacing: .12em;
	color: var( --green );
	border: 1px solid #C6DFD1;
	background: #EDF6F1;
	border-radius: 99px;
	padding: 6px 12px;
	white-space: nowrap;
}

.tmt-bk-block { display: flex; flex-direction: column; gap: 11px; }
.tmt-bk-label {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .09em;
	color: var( --muted-3 );
	text-transform: uppercase;
}
.tmt-bk-people {
	font-family: 'Barlow Condensed', sans-serif;
	font-size: 32px;
	font-weight: 800;
	line-height: 1;
	color: var( --ink );
}
.tmt-bk-adjust {
	font-family: 'JetBrains Mono', monospace;
	font-size: 16px;
	color: var( --ink );
	padding-bottom: 11px;
	border-bottom: 1.5px solid var( --input-line );
}

/* Deposit options: shown so the customer can see which plan TMT set, but
   they are static — the chosen one is simply marked. */
.tmt-bk-plan {
	display: flex;
	align-items: center;
	gap: 13px;
	padding: 14px 16px;
	border-radius: 10px;
	border: 1.5px solid var( --line-2 );
	background: #fff;
}
.tmt-bk-plan.is-chosen {
	border-color: var( --orange );
	background: var( --orange-tint );
}
.tmt-bk-tick {
	width: 19px;
	height: 19px;
	flex: none;
	border-radius: 50%;
	border: 1.5px solid #BCC5BD;
	background: #fff;
}
.tmt-bk-plan.is-chosen .tmt-bk-tick {
	border-color: var( --orange );
	background: var( --orange );
	box-shadow: inset 0 0 0 3.5px var( --orange-tint );
}
.tmt-bk-plan-text { flex: 1; min-width: 0; display: block; }
.tmt-bk-plan-title { display: block; font-size: 15px; font-weight: 600; }
.tmt-bk-plan-sub { display: block; font-size: 12.5px; color: var( --muted-2 ); margin-top: 2px; }
.tmt-bk-plan-amt {
	font-family: 'JetBrains Mono', monospace;
	font-size: 12.5px;
	flex: none;
	color: var( --muted-4 );
}
.tmt-bk-plan.is-chosen .tmt-bk-plan-amt { color: var( --orange-deep ); }

/* ---- totals --------------------------------------------------------- */
.tmt-bk-totals {
	border-top: 2px solid var( --ink );
	padding-top: 18px;
	display: flex;
	flex-direction: column;
	gap: 9px;
}
.tmt-bk-line {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	font-size: 14px;
	color: var( --muted-2 );
}
.tmt-bk-line span:last-child {
	font-family: 'JetBrains Mono', monospace;
	color: #3F4E46;
}
.tmt-bk-due {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 16px;
	margin-top: 8px;
}
.tmt-bk-due-label {
	font-family: 'Barlow Condensed', sans-serif;
	font-weight: 700;
	font-size: 19px;
	letter-spacing: .1em;
	text-transform: uppercase;
}
.tmt-bk-due-amt {
	font-family: 'Barlow Condensed', sans-serif;
	font-weight: 800;
	font-size: 40px;
	line-height: 1;
	color: var( --orange-deep );
}
.tmt-bk-balance {
	font-family: 'JetBrains Mono', monospace;
	font-size: 10.5px;
	letter-spacing: .08em;
	color: var( --muted-4 );
	text-align: right;
}

/* ---- rotating nudge line above the confirm button -------------------
   Fixed height with the lines stacked in the same box, so cycling between
   them never reflows the card or shifts the button under the cursor. */
.tmt-bk-nudge {
	position: relative;
	margin: 0 !important;
	min-height: 1.4em;
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-size: 12.5px;
	line-height: 1.4;
	color: var( --muted-2 );
}
.tmt-bk-nudge-dot {
	flex: none;
	width: 6px;
	height: 6px;
	margin-top: .45em;
	border-radius: 50%;
	background: var( --orange );
}
.tmt-bk-nudge-line {
	position: absolute;
	left: 14px;
	right: 0;
	top: 0;
	opacity: 0;
	transition: opacity .45s ease;
	pointer-events: none;
}
.tmt-bk-nudge-line.is-on { opacity: 1; }

@media ( prefers-reduced-motion: reduce ) {
	.tmt-bk-nudge-line { transition: none; }
}

/* ---- the one control the customer may operate ----------------------- */
.tmt-bk-grid #gform_wrapper_2 .gform_footer,
.tmt-bk-grid #gform_wrapper_2 .gform-footer {
	display: block !important;
	margin: 24px 0 0 !important;
	padding: 0 !important;
	border: 0 !important;
}
.tmt-bk-grid #gform_wrapper_2 .gform_footer button,
.tmt-bk-grid #gform_wrapper_2 .gform_footer input[type="submit"],
.tmt-bk-grid #gform_wrapper_2 .gform-footer button {
	display: block !important;
	width: 100% !important;
	background: var( --orange ) !important;
	color: #fff !important;
	font-family: 'Barlow Condensed', sans-serif !important;
	font-weight: 800 !important;
	font-size: 22px !important;
	letter-spacing: .1em !important;
	text-transform: uppercase !important;
	padding: 17px 24px !important;
	border: 0 !important;
	border-radius: 9px !important;
	box-shadow: none !important;
	cursor: pointer;
	transition: background .15s;
}
.tmt-bk-grid #gform_wrapper_2 .gform_footer button:hover,
.tmt-bk-grid #gform_wrapper_2 .gform-footer button:hover {
	background: var( --orange-hover ) !important;
}
.tmt-bk-confirm-label {
	font-weight: 800 !important;
	font-size: inherit !important;
}
.tmt-bk-smallprint {
	margin: 12px 0 0 !important;
	font-size: 12.5px;
	line-height: 1.5;
	color: var( --muted-3 );
	text-align: center;
}

/* ---- footer small print --------------------------------------------- */
.tmt-bk-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 );
}

/* =========================================================================
   Responsive — same near-full-width treatment as the inquiry form.
   ========================================================================= */
@media ( max-width: 900px ) {
	.tmt-bk-trip-title { font-size: 34px; }
	.tmt-bk-due-amt { font-size: 34px; }
}

@media ( max-width: 640px ) {
	.tmt-bk-page-bg { padding: 22px 0 48px; }
	.tmt-bk-shell { padding: 0 10px; }
	.tmt-bk-top-row { padding: 0 4px 16px; gap: 12px; }
	.tmt-bk-logo-box img { width: 120px; }
	.tmt-bk-grid { gap: 14px; }
	.tmt-bk-card, .tmt-bk-grid #gform_wrapper_2 { border-radius: 12px; }
	.tmt-bk-trip-photo { height: 130px; }
	.tmt-bk-trip-body { padding: 20px 16px 22px; }
	.tmt-bk-grid #gform_wrapper_2 { padding: 20px 16px 22px !important; }
	.tmt-bk-trip-title { font-size: 29px; }
	.tmt-bk-due-amt { font-size: 30px; }
	.tmt-bk-fact { gap: 12px; }
	.tmt-bk-fact-v { font-size: 14.5px; }
	.tmt-bk-grid #gform_wrapper_2 .gform_footer button { font-size: 19px !important; }
}

@media ( max-width: 400px ) {
	.tmt-bk-shell { padding: 0 6px; }
	.tmt-bk-trip-body { padding: 18px 13px 20px; }
	.tmt-bk-grid #gform_wrapper_2 { padding: 18px 13px 20px !important; }
}