/**
 * Shared WPTE trip booking modal frontend customizations.
 */

.wpte-modal,
.wte-process-layout {
	--wte-shared-brand-primary: var( --gr-brand-primary, #054149 );
	--wte-shared-brand-accent: var( --gr-brand-lime, #c0ff5c );
	--wte-shared-brand-accent-readable: var( --gr-brand-lime-accessible, #567329 );
	--wte-shared-brand-surface: var( --gr-brand-surface, #ffebd9 );
	--wte-shared-brand-surface-soft: var( --gr-brand-surface-soft, #fff7f0 );
	--wte-shared-brand-muted: var( --gr-brand-muted, #507a80 );
	--wte-shared-brand-border: var( --gr-brand-border, #cdd9db );
}

.wte-process-nav-list .wte-process-nav-item.finish {
	position: relative;
	border-bottom-color: rgba( 86, 115, 41, 0.35 ) !important;
	border-bottom-color: color-mix( in srgb, var( --wte-shared-brand-accent-readable ) 35%, transparent ) !important;
}

.wte-process-nav-list .wte-process-nav-item.finish::after {
	content: '';
	position: absolute;
	top: 6px;
	right: 10px;
	width: 18px;
	height: 18px;
	background-color: var( --wte-shared-brand-accent-readable );
	background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4 13 9.5 18.5 20 6'/%3E%3C/svg%3E" );
	background-size: 10px 10px;
	background-repeat: no-repeat;
	background-position: center;
	border-radius: 50%;
	box-shadow: 0 2px 6px rgba( 5, 65, 73, 0.25 );
}

.wte-process-nav-list {
	counter-reset: wpte-step;
}

.wte-process-nav-list .wte-process-nav-item {
	counter-increment: wpte-step;
}

.wte-process-nav-list .wte-process-nav-item::before {
	content: counter( wpte-step );
	position: absolute;
	top: 6px;
	left: 10px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var( --wte-shared-brand-surface-soft );
	color: var( --wte-shared-brand-muted );
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	font-weight: 700;
}

.wte-process-nav-list .wte-process-nav-item.active {
	border-bottom-color: var( --wte-shared-brand-primary ) !important;
	background-color: rgba( 86, 115, 41, 0.08 );
	background-color: color-mix( in srgb, var( --wte-shared-brand-accent-readable ) 8%, transparent );
	border-radius: 8px 8px 0 0;
}

.wte-process-nav-list .wte-process-nav-item.active a {
	font-weight: 700;
}

.wte-icon .wpte-tab-icon-img {
	width: 1em;
	height: 1em;
	object-fit: contain;
	flex-shrink: 0;
	display: block;
}

.wpte-modal .wte-shared-modal-scroll-down,
.wpte-modal .wte-shared-modal-back-to-top {
	display: none;
}

.wpte-modal .wte-shared-modal-scroll-down[hidden],
.wpte-modal .wte-shared-modal-back-to-top[hidden] {
	display: none !important;
}

.wte-shared-modal-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect( 0, 0, 0, 0 );
	white-space: nowrap;
	border: 0;
}

@media (max-width: 767px) and (orientation: portrait) {
	.wpte-modal .wte-shared-modal-scroll-down,
	.wpte-modal .wte-shared-modal-back-to-top {
		position: fixed;
		z-index: 100001;
		align-items: center;
		justify-content: center;
		padding: 0;
		cursor: pointer;
		opacity: 0;
		pointer-events: none;
		transition: opacity 0.18s ease, transform 0.18s ease, border-color 0.18s ease, color 0.18s ease, background-color 0.18s ease;
	}

	.wpte-modal .wte-shared-modal-scroll-down.is-visible,
	.wpte-modal .wte-shared-modal-back-to-top.is-visible {
		display: inline-flex;
		opacity: 1;
		pointer-events: auto;
	}

	.wpte-modal .wte-shared-modal-scroll-down {
		left: 50%;
		bottom: calc( 18px + env( safe-area-inset-bottom, 0px ) );
		width: 40px;
		height: 40px;
		color: #ffffff;
		background: rgba( 5, 65, 73, 0.9 );
		border: 0;
		border-radius: 999px;
		box-shadow: 0 8px 24px rgba( 5, 65, 73, 0.24 );
		transform: translateX( -50% ) translateY( 6px );
	}

	.wpte-modal .wte-shared-modal-scroll-down.is-visible {
		transform: translateX( -50% ) translateY( 0 );
	}

	.wpte-modal .wte-shared-modal-scroll-down:hover,
	.wpte-modal .wte-shared-modal-scroll-down:focus-visible {
		background: var( --wte-shared-brand-primary );
		outline: none;
	}

	.wpte-modal .wte-shared-modal-scroll-down__chevron {
		display: block;
		width: 15px;
		height: 15px;
		margin-top: -5px;
		border-right: 2px solid currentColor;
		border-bottom: 2px solid currentColor;
		transform: rotate( 45deg );
		animation: wteSharedScrollDownChevron 1.8s infinite;
	}

	.wpte-modal .wte-shared-modal-back-to-top {
		right: calc( 18px + env( safe-area-inset-right, 0px ) );
		bottom: calc( 18px + env( safe-area-inset-bottom, 0px ) );
		width: 40px;
		height: 40px;
		color: var( --wte-shared-brand-primary );
		background: rgba( 255, 255, 255, 0.96 );
		border: 2px solid var( --wte-shared-brand-primary );
		border-radius: 999px;
		box-shadow: 0 6px 18px rgba( 5, 65, 73, 0.18 );
		transform: translateY( 6px );
	}

	.wpte-modal .wte-shared-modal-back-to-top.is-visible {
		transform: translateY( 0 );
	}

	.wpte-modal .wte-shared-modal-back-to-top:hover,
	.wpte-modal .wte-shared-modal-back-to-top:focus-visible {
		color: var( --wte-shared-brand-accent-readable );
		border-color: var( --wte-shared-brand-accent-readable );
		outline: none;
	}

	.wpte-modal .wte-shared-modal-back-to-top__icon {
		position: relative;
		display: block;
		width: 14px;
		height: 14px;
	}

	.wpte-modal .wte-shared-modal-back-to-top__icon::before {
		content: '';
		position: absolute;
		top: 5px;
		left: 2px;
		width: 10px;
		height: 10px;
		border-top: 2px solid currentColor;
		border-left: 2px solid currentColor;
		transform: rotate( 45deg );
	}
}

@keyframes wteSharedScrollDownChevron {
	0%,
	100% {
		opacity: 0;
		transform: rotate( 45deg ) translate( -5px, -5px );
	}

	45% {
		opacity: 1;
	}

	65% {
		opacity: 1;
		transform: rotate( 45deg ) translate( 4px, 4px );
	}
}

@media (prefers-reduced-motion: reduce) {
	.wpte-modal .wte-shared-modal-scroll-down,
	.wpte-modal .wte-shared-modal-back-to-top {
		transition: none;
	}

	.wpte-modal .wte-shared-modal-scroll-down__chevron {
		animation: none;
	}
}

/**
 * Date tab title/instruction injected above the booking modal's first step.
 */
.wte-date-tab-instruction {
	margin: 0 0 16px;
	color: var( --wte-shared-brand-muted, #507a80 );
	font-size: 14px;
	line-height: 1.5;
}

.wte-date-tab-field-description {
	margin: 4px 0 12px;
	color: var( --wte-shared-brand-muted, #507a80 );
	font-size: 13px;
	line-height: 1.5;
}

/* One shared box holding Arrival Time and/or Departure Time side by side —
   mirrors the meal add-on's own `.wpte-meal-gate` / `.wpte-meal-gate__radios`
   pairing on the Meals tab, so the same two fields look the same wherever
   they're answered. */
.wte-date-tab-fields {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 24px;
	margin: 20px;
	padding: 20px;
	border-radius: 5px;
	border: 1px dashed var( --wpte-primary-color );
	background-color: rgba( var( --wpte-primary-color-rgb, var( --primary-color-rgb ) ), .08 );
}

.wte-date-tab-fields .wpte-meal-radio-group {
	flex: 1 1 200px;
}

/* Subtle divider between Arrival Time and Departure Time — a vertical rule
   while both sit side by side, becoming a horizontal rule once the row has
   actually wrapped to two lines. The `.is-wrapped` class is set in
   public.js via a ResizeObserver measuring the two fields' real `offsetTop`
   — a CSS breakpoint can't track this reliably, since the row wraps
   whenever the labels/badges' own min-content width no longer fits, which
   depends on translated text length rather than a fixed pixel value.
   (`:not(:first-child)` only ever matches the second field, so this never
   needs to know which field is which.) */
.wte-date-tab-fields .wpte-meal-radio-group:not(:first-child) {
	border-left: 1px dashed var( --wte-shared-brand-border, #cdd9db );
	padding-left: 20px;
}

.wte-date-tab-fields.is-wrapped .wpte-meal-radio-group:not(:first-child) {
	border-left: none;
	padding-left: 0;
	border-top: 1px dashed var( --wte-shared-brand-border, #cdd9db );
	padding-top: 16px;
}

@media ( max-width: 480px ) {
	.wte-date-tab-fields {
		gap: 16px;
	}
}

/* Mirrors meal-addon's `.wpte-meal-radio-option` (assets/css/public.css:170-177)
   for visual parity, under a distinct class name so this element is never
   matched by the shared scroll-reset click listener's `.wpte-meal-radio-option`
   selector (top of public.js) — see the comment at its usage site. */
.wte-date-tab-radio-option {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	color: var( --wte-shared-brand-primary, #054149 );
	cursor: pointer;
}

/**
 * intl-tel-input flag/dial-code picker — applied to the enquiry form's
 * (`#enquiry_contact`) and checkout's Lead Traveller (`#travellers_0_phone`)
 * phone fields. Ported from the child theme's `wte_integrate_intl_tel_input()`,
 * with the previously-guessed `[id*="booking_contact"]` / `label[for*="booking_contact"]`
 * selectors corrected to the real checkout field id.
 */
/* !important: intl-tel-input's own CDN stylesheet declares `.iti{display:
   inline-block}` at the same specificity as this rule, and — since it's
   registered/enqueued after this plugin's own stylesheet (see
   enqueue_intl_tel_input()) — it's the later rule in the cascade, so it
   wins over a plain (non-important) declaration here regardless of which
   file "should" apply. Confirmed live: computed `.iti` display was
   `inline-block`, not `flex`, even with `flagContainer{position:static}`
   correctly applied — meaning the flag chip became a static, but still
   block-level (full-width), element stacked above the input instead of a
   flex sibling beside it, which is what was throwing off the label's
   width-based offset calculation in intl-tel-input-init.js. */
.iti {
	width: 100%;
	display: flex !important;
	align-items: stretch;
}

/* intl-tel-input's own default CSS (confirmed against the CDN file this
   plugin loads) absolutely-positions this as an overlay on top of the
   input (`position:absolute;top:0;bottom:0;...`). That overlay is what
   was colliding with WPTE's own absolutely-positioned floating label on
   checkout. Overriding to `static` turns it into a normal flex sibling
   instead — the same "start adornment" pattern MUI's own InputAdornment
   uses (participates in normal flex layout, takes up real space, never
   overlaps anything) — so there's nothing left to compensate for via
   padding or z-index; WPTE's own input padding just applies uncontested,
   same as every other field. The dropdown list (`.iti__country-list`) is
   untouched and stays `position:absolute` — it's a floating popover and
   is meant to be.
   !important because intl-tel-input's own JS may set `.style.position`
   inline on this element at runtime (to manage the dropdown's positioning
   context) — a non-important external rule would lose to that inline
   declaration regardless of selector specificity, so this must win
   unconditionally. */
.iti__flag-container {
	position: static !important;
	/* Keep the chip's own natural width fixed so it never gets squeezed —
	   only the input (below) is meant to shrink. */
	flex-shrink: 0;
}

.iti__selected-flag {
	background-color: transparent !important;
}

/* Browsers give a text/tel <input> a default flex `min-width` tied to its
   own intrinsic content sizing, which can stop it shrinking to fit
   whatever space remains beside the flag chip — inside a narrow grid
   column (Phone shares a row with Country on checkout), that overflow
   pushes the input onto a second line and lets the absolutely-positioned
   label drift past the field's own column into the next one. `min-width:0`
   removes that invisible floor so the input actually shrinks to fit,
   same standard fix as any "flex child won't shrink below content size"
   case. */
.iti input[type="tel"] {
	min-width: 0;
	flex: 1 1 auto;
}

/* This site forces `padding: 14px 12px !important` on every Material-UI-
   style input on checkout (including type=tel). #travellers_0_phone no
   longer needs an override for this — now that the flag chip is a real
   flex sibling instead of an overlay, WPTE's own padding is already
   correct, same as every other field. #enquiry_contact isn't on that
   Material-UI system at all, so it still needs its own explicit padding
   to clear intl-tel-input's chip there. */
#enquiry_contact {
	padding-left: 95px !important;
}

/* WPTE's own `.wpte-material-ui-input-control fieldset` is a purely
   decorative, empty element (an MUI-style "notched outline" border) that
   is meant to sit visually behind its sibling <input> and never receive
   clicks — but WPTE's own CSS never actually says so (no `pointer-events`
   rule on it anywhere in wte-public.css/trip-checkout.css); it relies
   entirely on incidental paint-order behavior to stay non-interactive.
   That assumption silently breaks once intl-tel-input inserts its own
   positioned `.iti` wrapper between the fieldset and the real input:
   confirmed live via `document.elementsFromPoint()` on the deployed
   checkout page — the fieldset paints ON TOP of the input in that case,
   swallowing every click before it reaches the input (`document.
   activeElement` stayed `<body>` after clicking directly on the visible
   field). Real MUI outlined-input implementations avoid this class of bug
   entirely by giving the decorative fieldset `pointer-events: none`
   explicitly, rather than depending on paint order — doing the same here,
   scoped via `.iti ~ fieldset` so only the intl-tel-input-wrapped field(s)
   are affected and every other checkout field's existing (working)
   behavior is untouched. */
.iti ~ fieldset {
	pointer-events: none;
}

/* Once WPTE's own "focus" class floats the label near the top border, it's
   no longer in the same row as the flag chip — restore WPTE's original
   position so it matches the other fields' floated state. The unfocused
   offset (clearing the flag chip) is applied dynamically via JS as an
   inline style on the label — see intl-tel-input-init.js — and this rule's
   !important deliberately overrides that inline value only while the
   .focus class is present. */
.wpte-material-ui-input-control.focus label[for="travellers_0_phone"] {
	left: 10px !important;
}