/*!
 * Luxe AI Trip Planner — front end
 * Scoped to .latp so it never leaks into the theme's header or footer.
 */

/* ============================================================ 1. TOKENS === */

.latp {
	--latp-accent: #c9a45c;
	--latp-accent-soft: #e6cd9a;
	--latp-dark-ink: #0c1220;
	--latp-dark-surface: #131b2c;
	--latp-light-ink: #1a1f2b;
	--latp-light-surface: #ffffff;
	--latp-light-page: #f6f2ea;
	--latp-radius: 18px;
	--latp-container: 1120px;
	--latp-font-heading: "Playfair Display", Georgia, serif;
	--latp-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

	--latp-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--latp-gap: clamp(18px, 2.4vw, 30px);

	box-sizing: border-box;
	font-family: var(--latp-font-body);
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	color: var(--text);
}

.latp *,
.latp *::before,
.latp *::after {
	box-sizing: border-box;
}

/* Themes and page builders style bare tags (p, label, select…) with enough
   specificity to beat a font-family set only on the container, which is how
   the planner ends up in the theme's font instead of its own. Restate it on
   the elements we actually render. */
.latp p,
.latp span,
.latp li,
.latp a,
.latp label,
.latp input,
.latp select,
.latp textarea,
.latp button,
.latp output,
.latp small,
.latp strong,
.latp em,
.latp dt,
.latp dd,
.latp h2,
.latp h3,
.latp h4,
.latp h5,
.latp summary {
	font-family: var(--latp-font-body);
}

.latp .latp-title,
.latp .latp-section-title,
.latp .latp-day__title,
.latp .latp-day__badge-num,
.latp .latp-stay__name,
.latp .latp-match__place,
.latp .latp-loader__title,
.latp .latp-budget__amount,
.latp .latp-notfound h1 {
	font-family: var(--latp-font-heading);
}

/* Travel themes and page builders paint every <button> on the site. Our own
   component rules are all .latp-scoped (two classes), so they still win — this
   only strips the leftovers those rules do not explicitly set. */
.latp button {
	-webkit-appearance: none;
	appearance: none;
	width: auto;
	min-width: 0;
	min-height: 0;
	text-transform: none;
	letter-spacing: normal;
	text-shadow: none;
	text-decoration: none;
	box-shadow: none;
	outline-offset: 2px;
}

/* Themes also like to pin a height or line-height on form controls, which
   clips the value inside our taller fields. */
.latp .latp-input,
.latp .latp-select,
.latp .latp-textarea {
	height: auto;
	min-height: 0;
	max-height: none;
	line-height: 1.45;
	margin: 0;
	box-shadow: none;
}

.latp .latp-select {
	padding-block: 13px;
	text-overflow: ellipsis;
}

/* Appearance switch */

.latp .latp-mode {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	margin-block: 0 12px;
	margin-inline: auto 0;
	padding: 0;
	border: 1px solid var(--line-strong);
	border-radius: 50%;
	background: var(--surface);
	color: var(--muted);
	cursor: pointer;
	transition: color 0.25s var(--latp-ease), border-color 0.25s var(--latp-ease), transform 0.2s var(--latp-ease);
}

.latp .latp-mode:hover {
	color: var(--latp-accent);
	border-color: var(--latp-accent);
	transform: translateY(-1px);
}

.latp .latp-mode:focus-visible {
	outline: none;
	box-shadow: 0 0 0 4px var(--glow);
}

.latp .latp-mode__on,
.latp .latp-mode__off {
	display: grid;
	place-items: center;
}

/* Light: offer the moon. Dark: offer the sun. */
.latp.is-light .latp-mode__off,
.latp.is-dark .latp-mode__on {
	display: none;
}

.latp.is-dark {
	/* Tells the browser to render native widgets — select popups, scrollbars,
	   spinners, autofill — in their dark variant. */
	color-scheme: dark;

	--bg: var(--latp-dark-ink);
	--surface: var(--latp-dark-surface);
	--surface-2: color-mix(in srgb, var(--latp-dark-surface) 95%, #ffffff 5%);
	--sunken: color-mix(in srgb, var(--latp-dark-ink) 82%, #000000 18%);
	--text: #eef1f6;
	--text-strong: #ffffff;
	--muted: #97a3b8;
	--line: rgba(255, 255, 255, 0.09);
	--line-strong: rgba(255, 255, 255, 0.16);
	--glow: rgba(201, 164, 92, 0.16);
	--shadow: 0 24px 60px -28px rgba(0, 0, 0, 0.85);
	--shadow-sm: 0 10px 26px -18px rgba(0, 0, 0, 0.9);
	--field: rgba(255, 255, 255, 0.04);
	--field-focus: rgba(255, 255, 255, 0.07);
}

.latp.is-light {
	color-scheme: light;

	--bg: var(--latp-light-page);
	--surface: var(--latp-light-surface);
	--surface-2: color-mix(in srgb, var(--latp-light-page) 60%, #ffffff 40%);
	--sunken: color-mix(in srgb, var(--latp-light-page) 70%, #ffffff 30%);
	--text: var(--latp-light-ink);
	--text-strong: #0a0d14;
	--muted: #6c7382;
	--line: rgba(20, 26, 40, 0.1);
	--line-strong: rgba(20, 26, 40, 0.18);
	--glow: rgba(201, 164, 92, 0.2);
	--shadow: 0 28px 60px -34px rgba(24, 30, 45, 0.4);
	--shadow-sm: 0 12px 28px -20px rgba(24, 30, 45, 0.45);
	--field: rgba(20, 26, 40, 0.025);
	--field-focus: #ffffff;
}

/* Older engines without color-mix still get a usable surface. */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
	.latp.is-dark {
		--surface-2: #182136;
		--sunken: #080d17;
	}
	.latp.is-light {
		--surface-2: #fbf8f2;
		--sunken: #f1ece2;
	}
}

/* =========================================================== 2. LAYOUT === */

/* .latp-shell is the full-bleed wrapper; .latp-planner is the measure. */
.latp-shell {
	width: 100%;
}

.latp-shell--share {
	padding-block: clamp(28px, 5vw, 64px);
	background: var(--bg);
}

.latp-planner {
	position: relative;
	max-width: var(--latp-container);
	margin-inline: auto;
	padding-inline: clamp(14px, 3vw, 28px);
	padding-block: clamp(20px, 3vw, 34px);
	color: var(--text);
}

.latp-planner--share {
	padding-block: 0;
}

.latp-grid {
	display: grid;
	gap: var(--latp-gap);
}

/* Grid and flex children default to min-width:auto, which lets a select or a
   number input push a track wider than its container on narrow screens. */
.latp-grid > *,
.latp-field,
.latp-day__grid > *,
.latp-keyinfo__grid > * {
	min-width: 0;
}

@media (min-width: 720px) {
	.latp-grid--2 {
		grid-template-columns: 1fr 1fr;
	}
	.latp-grid--3 {
		grid-template-columns: repeat(3, 1fr);
	}
}

.latp-visually-hidden,
.latp-live {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.latp-hp {
	position: absolute !important;
	left: -9999px;
	opacity: 0;
	pointer-events: none;
}

/* ============================================================= 3. HERO === */

.latp-hero {
	position: relative;
	height: clamp(150px, 22vw, 240px);
	border-radius: var(--latp-radius);
	background-size: cover;
	background-position: center;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: clamp(20px, 3vw, 32px);
	box-shadow: var(--shadow);
}

.latp-hero__scrim {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	inset: 0;
	background: linear-gradient(180deg, rgba(8, 12, 22, 0.15) 0%, rgba(8, 12, 22, 0.62) 100%);
}

.latp-hero__badge {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 20px;
	border-radius: 999px;
	background: rgba(12, 18, 32, 0.62);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border: 1px solid rgba(255, 255, 255, 0.2);
	color: #fff;
	font-size: 0.8rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	font-weight: 500;
}

.latp-hero__badge .latp-i {
	color: var(--latp-accent-soft);
}

/* ========================================================== 4. STEPPER === */

.latp-stepper {
	position: relative;
	margin-bottom: clamp(20px, 3vw, 30px);
}

.latp-stepper__list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.latp-stepper__item {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	padding: 0;
	opacity: 0.45;
	transition: opacity 0.4s var(--latp-ease);
}

.latp-stepper__item.is-current,
.latp-stepper__item.is-done {
	opacity: 1;
}

.latp-stepper__dot {
	position: relative;
	flex: 0 0 auto;
	width: 38px;
	height: 38px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	border: 1px solid var(--line-strong);
	background: var(--surface);
	font-size: 0.85rem;
	font-weight: 600;
	transition: all 0.4s var(--latp-ease);
}

.latp-stepper__item.is-current .latp-stepper__dot {
	border-color: var(--latp-accent);
	color: var(--latp-accent);
	box-shadow: 0 0 0 5px var(--glow);
}

.latp-stepper__item.is-done .latp-stepper__dot {
	background: var(--latp-accent);
	border-color: var(--latp-accent);
	color: #12161f;
}

.latp-stepper__dot .latp-i {
	position: absolute;
	width: 17px;
	height: 17px;
	opacity: 0;
	transform: scale(0.6);
	transition: all 0.3s var(--latp-ease);
}

.latp-stepper__item.is-done .latp-stepper__num {
	opacity: 0;
}

.latp-stepper__item.is-done .latp-stepper__dot .latp-i {
	opacity: 1;
	transform: scale(1);
}

.latp-stepper__text {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.latp-stepper__label {
	font-size: 0.9rem;
	font-weight: 500;
	color: var(--text-strong);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.latp-stepper__hint {
	font-size: 0.74rem;
	color: var(--muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.latp-stepper__rail {
	display: block;
	height: 1px;
	margin-top: 16px;
	background: var(--line);
	border-radius: 2px;
	overflow: hidden;
}

.latp-stepper__fill {
	display: block;
	height: 100%;
	width: 0;
	background: linear-gradient(90deg, var(--latp-accent), var(--latp-accent-soft));
	transition: width 0.7s var(--latp-ease);
}

@media (max-width: 640px) {
	.latp-stepper__text {
		display: none;
	}
	.latp-stepper__list {
		justify-items: center;
	}
}

/* ============================================================ 5. CARDS === */

.latp-card {
	position: relative;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: calc(var(--latp-radius) + 6px);
	padding: clamp(22px, 3.4vw, 44px);
	box-shadow: var(--shadow);
	overflow: hidden;
}

.latp-card::before {
	content: "";
	position: absolute;
	inset-inline: 0;
	top: 0;
	height: 2px;
	background: linear-gradient(90deg, transparent, var(--latp-accent), transparent);
	opacity: 0.7;
}

.latp-card__head {
	margin-bottom: clamp(20px, 3vw, 30px);
}

.latp-card__foot {
	margin-top: clamp(22px, 3vw, 32px);
	padding-top: clamp(18px, 2.4vw, 26px);
	border-top: 1px solid var(--line);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
}

.latp-card__foot--split {
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 14px;
}

.latp-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin: 0 0 12px;
	font-size: 0.72rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--latp-accent);
	font-weight: 600;
}

.latp-eyebrow .latp-i {
	width: 15px;
	height: 15px;
}

.latp-title {
	margin: 0;
	font-family: var(--latp-font-heading);
	font-weight: 500;
	font-size: clamp(1.65rem, 3.2vw, 2.4rem);
	line-height: 1.15;
	letter-spacing: -0.01em;
	color: var(--text-strong);
}

.latp-title--display {
	font-size: clamp(1.9rem, 4vw, 3rem);
}

.latp-lede {
	margin: 14px 0 0;
	color: var(--muted);
	font-size: 1.02rem;
	max-width: 62ch;
}

.latp-lede--wide {
	max-width: 74ch;
}

.latp-section-title {
	margin: 0 0 20px;
	font-family: var(--latp-font-heading);
	font-weight: 500;
	font-size: clamp(1.3rem, 2.4vw, 1.75rem);
	color: var(--text-strong);
}

.latp-microcopy {
	margin: 0;
	font-size: 0.84rem;
	color: var(--muted);
}

.latp-disclaimer {
	margin: 26px auto 0;
	max-width: 70ch;
	text-align: center;
	font-size: 0.78rem;
	line-height: 1.6;
	color: var(--muted);
	opacity: 0.75;
}

/* =========================================================== 6. FIELDS === */

.latp-field {
	margin-bottom: var(--latp-gap);
}

.latp-field:last-child {
	margin-bottom: 0;
}

.latp-grid .latp-field {
	margin-bottom: 0;
}

.latp-label {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 9px;
	font-size: 0.8rem;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--muted);
}

.latp-output {
	font-size: 0.78rem;
	text-transform: none;
	letter-spacing: 0;
	color: var(--latp-accent);
	font-weight: 600;
}

.latp-help {
	margin: 8px 0 0;
	font-size: 0.78rem;
	color: var(--muted);
}

.latp .latp-input,
.latp .latp-textarea,
.latp .latp-select {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	padding: 14px 16px;
	font: inherit;
	font-size: 0.98rem;
	color: var(--text);
	background: var(--field);
	border: 1px solid var(--line-strong);
	border-radius: calc(var(--latp-radius) * 0.62);
	transition: border-color 0.25s var(--latp-ease), box-shadow 0.25s var(--latp-ease), background 0.25s var(--latp-ease);
	appearance: none;
}

.latp .latp-input::placeholder,
.latp .latp-textarea::placeholder {
	color: var(--muted);
	opacity: 0.7;
}

.latp .latp-input:focus,
.latp .latp-textarea:focus,
.latp .latp-select:focus {
	outline: none;
	background: var(--field-focus);
	border-color: var(--latp-accent);
	box-shadow: 0 0 0 4px var(--glow);
}

.latp .latp-select {
	background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
	background-position: calc(100% - 20px) 55%, calc(100% - 14px) 55%;
	background-size: 6px 6px, 6px 6px;
	background-repeat: no-repeat;
	padding-right: 42px;
	cursor: pointer;
}

/* The dropdown popup is drawn by the OS, so it does not inherit the field's
   colours. color-scheme handles most engines; these paint the rest. */
.latp .latp-select option,
.latp .latp-select optgroup {
	background-color: var(--surface);
	color: var(--text);
}

.latp.is-dark .latp-select option:checked,
.latp.is-dark .latp-select option:hover {
	background-color: var(--latp-accent);
	color: #12161f;
}

.latp .latp-textarea-wrap {
	position: relative;
}

.latp .latp-textarea {
	min-height: 116px;
	resize: vertical;
	line-height: 1.6;
}

.latp .latp-textarea--sm {
	min-height: 72px;
}

.latp-counter {
	position: absolute;
	right: 12px;
	bottom: 10px;
	font-size: 0.7rem;
	color: var(--muted);
	opacity: 0.6;
	pointer-events: none;
	font-variant-numeric: tabular-nums;
}

/* Range */

.latp .latp-range {
	--latp-fill: 0%;
	width: 100%;
	height: 26px;
	background: transparent;
	appearance: none;
	cursor: pointer;
}

.latp .latp-range::-webkit-slider-runnable-track {
	height: 4px;
	border-radius: 4px;
	background: linear-gradient(90deg, var(--latp-accent) var(--latp-fill), var(--line-strong) var(--latp-fill));
}

.latp .latp-range::-moz-range-track {
	height: 4px;
	border-radius: 4px;
	background: var(--line-strong);
}

.latp .latp-range::-moz-range-progress {
	height: 4px;
	border-radius: 4px;
	background: var(--latp-accent);
}

.latp .latp-range::-webkit-slider-thumb {
	appearance: none;
	width: 18px;
	height: 18px;
	margin-top: -7px;
	border-radius: 50%;
	background: var(--latp-accent);
	border: 3px solid var(--surface);
	box-shadow: 0 0 0 1px var(--latp-accent);
	transition: transform 0.2s var(--latp-ease);
}

.latp .latp-range::-moz-range-thumb {
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--latp-accent);
	border: 3px solid var(--surface);
	box-shadow: 0 0 0 1px var(--latp-accent);
}

.latp .latp-range:active::-webkit-slider-thumb {
	transform: scale(1.15);
}

/* Pills */

.latp .latp-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.latp .latp-pill input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

.latp .latp-pill span {
	display: inline-block;
	padding: 9px 16px;
	border-radius: 999px;
	border: 1px solid var(--line-strong);
	background: var(--field);
	font-size: 0.86rem;
	cursor: pointer;
	transition: all 0.22s var(--latp-ease);
	user-select: none;
}

.latp .latp-pill span:hover {
	border-color: var(--latp-accent);
	transform: translateY(-1px);
}

.latp .latp-pill input:checked + span {
	background: var(--latp-accent);
	border-color: var(--latp-accent);
	color: #10141d;
	font-weight: 500;
}

.latp .latp-pill input:focus-visible + span {
	box-shadow: 0 0 0 4px var(--glow);
}

/* Segmented */

.latp .latp-segmented {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
	gap: 6px;
	padding: 5px;
	background: var(--sunken);
	border: 1px solid var(--line);
	border-radius: calc(var(--latp-radius) * 0.62);
}

.latp .latp-segment {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	padding: 11px 8px;
	border-radius: calc(var(--latp-radius) * 0.45);
	cursor: pointer;
	text-align: center;
	transition: background 0.25s var(--latp-ease);
}

.latp .latp-segmented--tight .latp-segment {
	padding: 9px 6px;
}

.latp .latp-segment input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

.latp .latp-segment__label {
	font-size: 0.86rem;
	font-weight: 500;
	color: var(--text);
}

.latp .latp-segment__note {
	font-size: 0.68rem;
	color: var(--muted);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.latp .latp-segment:hover {
	background: var(--field);
}

.latp .latp-segment:has(input:checked) {
	background: var(--surface);
	box-shadow: var(--shadow-sm), inset 0 0 0 1px var(--latp-accent);
}

.latp .latp-segment:has(input:checked) .latp-segment__label {
	color: var(--latp-accent);
}

.latp .latp-segment:has(input:focus-visible) {
	box-shadow: 0 0 0 4px var(--glow);
}

/* Fallback for engines without :has() */
@supports not selector(:has(a)) {
	.latp .latp-segment input:checked ~ .latp-segment__label {
		color: var(--latp-accent);
		text-decoration: underline;
	}
}

/* Stepper input */

.latp .latp-stepper-input {
	display: flex;
	min-width: 0;
	align-items: stretch;
	border: 1px solid var(--line-strong);
	border-radius: calc(var(--latp-radius) * 0.62);
	overflow: hidden;
	background: var(--field);
}

.latp .latp-stepper-input button {
	flex: 0 0 46px;
	display: grid;
	place-items: center;
	border: 0;
	background: transparent;
	color: var(--text);
	cursor: pointer;
	transition: background 0.2s var(--latp-ease), color 0.2s var(--latp-ease);
}

.latp .latp-stepper-input button:hover {
	background: var(--latp-accent);
	color: #10141d;
}

.latp .latp-stepper-input input {
	flex: 1 1 auto;
	min-width: 0;
	border: 0;
	border-inline: 1px solid var(--line);
	background: transparent;
	color: var(--text-strong);
	font: inherit;
	font-size: 1.05rem;
	font-weight: 600;
	text-align: center;
	padding: 13px 4px;
	appearance: textfield;
}

.latp .latp-stepper-input input::-webkit-outer-spin-button,
.latp .latp-stepper-input input::-webkit-inner-spin-button {
	appearance: none;
	margin: 0;
}

.latp .latp-stepper-input input:focus {
	outline: none;
	background: var(--field-focus);
}

/* Chips */

.latp-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.latp-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 8px 8px 15px;
	border-radius: 999px;
	background: var(--field);
	border: 1px solid var(--line-strong);
	font-size: 0.88rem;
	animation: latp-pop 0.3s var(--latp-ease) both;
}

.latp .latp-chip__x {
	display: grid;
	place-items: center;
	width: 20px;
	height: 20px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--muted);
	cursor: pointer;
	transition: all 0.2s var(--latp-ease);
}

.latp .latp-chip__x .latp-i {
	width: 13px;
	height: 13px;
}

.latp .latp-chip__x:hover {
	background: #d9534f;
	color: #fff;
}

.latp-chip--input {
	padding: 0;
	border-style: dashed;
	background: transparent;
	animation: none;
}

.latp-chip--input input {
	width: 132px;
	padding: 8px 14px;
	border: 0;
	background: transparent;
	color: var(--text);
	font: inherit;
	font-size: 0.88rem;
}

.latp-chip--input input:focus {
	outline: none;
}

.latp-chip--input:focus-within {
	border-color: var(--latp-accent);
	border-style: solid;
}

@keyframes latp-pop {
	from {
		opacity: 0;
		transform: scale(0.9);
	}
	to {
		opacity: 1;
		transform: scale(1);
	}
}

/* Add-ons */

.latp-addons {
	display: grid;
	gap: 10px;
}

@media (min-width: 720px) {
	.latp-addons {
		grid-template-columns: 1fr 1fr;
	}
}

.latp-addon {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 14px 16px;
	border: 1px solid var(--line-strong);
	border-radius: calc(var(--latp-radius) * 0.62);
	background: var(--field);
	cursor: pointer;
	transition: all 0.22s var(--latp-ease);
}

.latp-addon:hover {
	border-color: var(--latp-accent);
}

.latp-addon input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

.latp-addon__box {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 22px;
	height: 22px;
	margin-top: 2px;
	border: 1px solid var(--line-strong);
	border-radius: 7px;
	transition: all 0.22s var(--latp-ease);
}

.latp-addon__box .latp-i {
	width: 14px;
	height: 14px;
	opacity: 0;
	transform: scale(0.5);
	transition: all 0.22s var(--latp-ease);
}

.latp-addon input:checked + .latp-addon__box {
	background: var(--latp-accent);
	border-color: var(--latp-accent);
	color: #10141d;
}

.latp-addon input:checked + .latp-addon__box .latp-i {
	opacity: 1;
	transform: scale(1);
}

.latp-addon__label {
	display: block;
	font-weight: 500;
	color: var(--text-strong);
	font-size: 0.94rem;
}

.latp-addon__reason {
	display: block;
	font-size: 0.82rem;
	color: var(--muted);
	margin-top: 2px;
}

/* ========================================================== 7. BUTTONS === */

.latp .latp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	padding: 13px 24px;
	border: 1px solid transparent;
	border-radius: 999px;
	font: inherit;
	font-size: 0.94rem;
	font-weight: 500;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	transition: transform 0.2s var(--latp-ease), box-shadow 0.25s var(--latp-ease), background 0.25s var(--latp-ease), border-color 0.25s var(--latp-ease), opacity 0.2s;
}

.latp .latp-btn:hover {
	transform: translateY(-2px);
}

.latp .latp-btn:active {
	transform: translateY(0);
}

.latp .latp-btn:focus-visible {
	outline: none;
	box-shadow: 0 0 0 4px var(--glow);
}

.latp .latp-btn[disabled] {
	opacity: 0.45;
	pointer-events: none;
}

.latp .latp-btn--lg {
	padding: 16px 32px;
	font-size: 1rem;
}

.latp .latp-btn--primary {
	background: linear-gradient(135deg, var(--latp-accent-soft), var(--latp-accent));
	color: #12161f;
	box-shadow: 0 14px 34px -16px var(--latp-accent);
}

.latp .latp-btn--primary:hover {
	box-shadow: 0 20px 42px -16px var(--latp-accent);
}

.latp .latp-btn--ghost {
	background: var(--field);
	border-color: var(--line-strong);
	color: var(--text);
}

.latp .latp-btn--ghost:hover {
	border-color: var(--latp-accent);
	color: var(--latp-accent);
}

.latp .latp-btn--ghost.is-done {
	border-color: #3fa34d;
	color: #3fa34d;
}

.latp .latp-btn--quiet {
	background: transparent;
	color: var(--muted);
	padding-inline: 10px;
}

.latp .latp-btn--quiet:hover {
	color: var(--text-strong);
}

/* ====================================================== 8. DISCLOSURES === */

.latp-disclosure {
	border: 1px solid var(--line);
	border-radius: calc(var(--latp-radius) * 0.7);
	background: var(--sunken);
	overflow: hidden;
	margin-bottom: var(--latp-gap);
}

.latp-disclosure--soft {
	background: transparent;
	margin-bottom: 10px;
}

.latp .latp-disclosure__summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 15px 18px;
	cursor: pointer;
	list-style: none;
	transition: background 0.2s var(--latp-ease);
}

.latp .latp-disclosure__summary::-webkit-details-marker {
	display: none;
}

.latp .latp-disclosure__summary:hover {
	background: var(--field);
}

.latp-disclosure__title {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-weight: 500;
	color: var(--text-strong);
	font-size: 0.94rem;
}

.latp-disclosure__title .latp-i {
	width: 16px;
	height: 16px;
	color: var(--latp-accent);
}

.latp-disclosure__meta {
	font-size: 0.76rem;
	color: var(--muted);
	text-align: right;
}

.latp .latp-disclosure__summary::after {
	content: "";
	flex: 0 0 auto;
	width: 8px;
	height: 8px;
	border-right: 1.5px solid var(--muted);
	border-bottom: 1.5px solid var(--muted);
	transform: rotate(45deg);
	transition: transform 0.3s var(--latp-ease);
	margin-inline-start: 4px;
}

.latp-disclosure[open] > .latp-disclosure__summary::after {
	transform: rotate(-135deg);
}

.latp-disclosure__body {
	padding: 4px 18px 20px;
	animation: latp-reveal 0.35s var(--latp-ease) both;
}

@keyframes latp-reveal {
	from {
		opacity: 0;
		transform: translateY(-6px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

/* Examples */

.latp .latp-examples {
	margin-bottom: var(--latp-gap);
}

.latp .latp-examples__intro {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 12px;
	font-size: 0.86rem;
	color: var(--muted);
}

.latp .latp-examples__intro .latp-i {
	width: 15px;
	height: 15px;
	color: var(--latp-accent);
}

.latp .latp-examples__list {
	margin: 0;
	padding: 0 12px 14px;
	list-style: none;
	display: grid;
	gap: 4px;
}

.latp .latp-example {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	width: 100%;
	padding: 11px 14px;
	border: 1px solid transparent;
	border-radius: calc(var(--latp-radius) * 0.5);
	background: transparent;
	color: var(--text);
	font: inherit;
	font-size: 0.9rem;
	line-height: 1.5;
	text-align: start;
	cursor: pointer;
	transition: all 0.2s var(--latp-ease);
}

.latp .latp-example .latp-i {
	flex: 0 0 auto;
	width: 15px;
	height: 15px;
	margin-top: 4px;
	color: var(--latp-accent);
	opacity: 0.6;
	transition: transform 0.25s var(--latp-ease), opacity 0.2s;
}

.latp .latp-example:hover {
	background: var(--field);
	border-color: var(--line-strong);
}

.latp .latp-example:hover .latp-i {
	transform: translateX(3px);
	opacity: 1;
}

/* =========================================================== 9. ALERTS === */

.latp-alert {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin-bottom: 18px;
	padding: 14px 18px;
	border-radius: calc(var(--latp-radius) * 0.62);
	border: 1px solid rgba(217, 83, 79, 0.4);
	background: rgba(217, 83, 79, 0.1);
	color: var(--text-strong);
	font-size: 0.9rem;
	animation: latp-reveal 0.3s var(--latp-ease) both;
}

.latp-alert--warn {
	border-color: rgba(201, 164, 92, 0.45);
	background: rgba(201, 164, 92, 0.1);
}

.latp-alert__body {
	flex: 1 1 auto;
}

.latp-alert__body a {
	color: var(--latp-accent);
}

.latp .latp-alert__close {
	flex: 0 0 auto;
	border: 0;
	background: transparent;
	color: inherit;
	font-size: 1.3rem;
	line-height: 1;
	cursor: pointer;
	opacity: 0.6;
}

.latp .latp-alert__close:hover {
	opacity: 1;
}

/* ========================================================== 10. STEPS  === */

.latp-step {
	animation: latp-step-in 0.5s var(--latp-ease) both;
}

.latp-step[hidden] {
	display: none;
}

@keyframes latp-step-in {
	from {
		opacity: 0;
		transform: translateY(14px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

/* ========================================================== 11. LOADER === */

.latp-loader {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	inset: 0;
	z-index: 99999;
	display: grid;
	place-items: center;
	padding: 24px;
	background: var(--bg);
	background: color-mix(in srgb, var(--bg) 88%, transparent);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	opacity: 0;
	transition: opacity 0.35s var(--latp-ease);
}

.latp-loader.is-shown {
	opacity: 1;
}

.latp-loader[hidden] {
	display: none;
}

.latp-loader__inner {
	text-align: center;
	max-width: 420px;
}

.latp-loader__orb {
	position: relative;
	width: 92px;
	height: 92px;
	margin: 0 auto 26px;
}

.latp-loader__orb span {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	inset: 0;
	border-radius: 50%;
	border: 1px solid transparent;
	border-top-color: var(--latp-accent);
	animation: latp-spin 1.6s linear infinite;
}

.latp-loader__orb span:nth-child(2) {
	top: 12px;
	right: 12px;
	bottom: 12px;
	left: 12px;
	inset: 12px;
	border-top-color: var(--latp-accent-soft);
	animation-duration: 2.3s;
	animation-direction: reverse;
}

.latp-loader__orb span:nth-child(3) {
	top: 24px;
	right: 24px;
	bottom: 24px;
	left: 24px;
	inset: 24px;
	border-top-color: var(--text-strong);
	opacity: 0.35;
	animation-duration: 3s;
}

@keyframes latp-spin {
	to {
		transform: rotate(360deg);
	}
}

.latp-loader__title {
	margin: 0 0 8px;
	font-family: var(--latp-font-heading);
	font-size: 1.5rem;
	color: var(--text-strong);
}

.latp-loader__sub {
	margin: 0 0 20px;
	font-size: 0.9rem;
	color: var(--muted);
}

.latp-loader__steps {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 8px;
	text-align: start;
}

.latp-loader__steps li {
	position: relative;
	padding-inline-start: 26px;
	font-size: 0.86rem;
	color: var(--muted);
	opacity: 0.4;
	transition: opacity 0.4s var(--latp-ease), color 0.4s var(--latp-ease);
}

.latp-loader__steps li::before {
	content: "";
	position: absolute;
	inset-inline-start: 4px;
	top: 8px;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: currentColor;
	transition: all 0.3s var(--latp-ease);
}

.latp-loader__steps li.is-active {
	opacity: 1;
	color: var(--latp-accent);
}

.latp-loader__steps li.is-active::before {
	box-shadow: 0 0 0 4px var(--glow);
}

.latp-loader__steps li.is-done {
	opacity: 0.8;
	color: var(--text);
}

/* ========================================================= 12. MATCHES === */

.latp-matches {
	display: grid;
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 860px) {
	.latp-matches {
		grid-template-columns: 1fr 1fr;
	}
}

.latp-match {
	animation: latp-step-in 0.5s var(--latp-ease) both;
	animation-delay: var(--latp-delay, 0ms);
}

.latp .latp-match__btn {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 16px;
	width: 100%;
	height: 100%;
	padding: 20px;
	border: 1px solid var(--line-strong);
	border-radius: calc(var(--latp-radius) * 0.85);
	background: var(--surface-2);
	color: var(--text);
	font: inherit;
	text-align: start;
	cursor: pointer;
	transition: all 0.28s var(--latp-ease);
}

/* Kept as two rules: an unsupported :focus-visible would invalidate a shared
   selector list and take the :hover styling down with it. */
.latp .latp-match__btn:hover {
	border-color: var(--latp-accent);
	transform: translateY(-3px);
	box-shadow: var(--shadow);
}

.latp .latp-match__btn:focus-visible {
	outline: none;
	border-color: var(--latp-accent);
	transform: translateY(-3px);
	box-shadow: var(--shadow);
}

.latp-match__score {
	--latp-score: 80;
	position: relative;
	flex: 0 0 auto;
	width: 58px;
	height: 58px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: conic-gradient(var(--latp-accent) calc(var(--latp-score) * 1%), var(--line) 0);
}

.latp-match__score::after {
	content: "";
	position: absolute;
	top: 4px;
	right: 4px;
	bottom: 4px;
	left: 4px;
	inset: 4px;
	border-radius: 50%;
	background: var(--surface);
}

.latp-match__score-num {
	position: relative;
	z-index: 1;
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--latp-accent);
	font-variant-numeric: tabular-nums;
}

.latp-match__score-num small {
	font-size: 0.6rem;
}

.latp-match__body {
	flex: 1 1 auto;
	min-width: 0;
}

.latp-match__place {
	display: block;
	font-family: var(--latp-font-heading);
	font-size: 1.25rem;
	color: var(--text-strong);
	line-height: 1.2;
}

.latp-match__country {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin-top: 3px;
	font-size: 0.76rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--muted);
}

.latp-match__country .latp-i {
	width: 13px;
	height: 13px;
}

.latp-match__tagline {
	display: block;
	margin-top: 9px;
	font-size: 0.92rem;
	color: var(--latp-accent);
	font-style: italic;
}

.latp-match__why {
	display: block;
	margin-top: 7px;
	font-size: 0.89rem;
	line-height: 1.55;
	color: var(--muted);
}

.latp-match__facts {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 14px;
	margin-top: 12px;
	font-size: 0.78rem;
	color: var(--text);
}

.latp-match__facts > span {
	display: inline-flex;
	align-items: center;
	gap: 5px;
}

.latp-match__facts .latp-i {
	width: 13px;
	height: 13px;
	color: var(--latp-accent);
}

.latp-match__vibes {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
}

.latp-match__vibes li {
	padding: 4px 10px;
	border-radius: 999px;
	background: var(--field);
	border: 1px solid var(--line);
	font-size: 0.72rem;
	color: var(--muted);
}

.latp-match__cta {
	flex: 0 0 auto;
	align-self: center;
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--field);
	color: var(--latp-accent);
	transition: all 0.25s var(--latp-ease);
}

.latp .latp-match__btn:hover .latp-match__cta {
	background: var(--latp-accent);
	color: #12161f;
	transform: translateX(3px);
}

/* ======================================================= 13. ITINERARY === */

.latp-itinerary {
	animation: latp-step-in 0.5s var(--latp-ease) both;
}

.latp-itinerary__head {
	text-align: center;
	max-width: 74ch;
	margin: 0 auto clamp(24px, 3.4vw, 38px);
}

.latp-itinerary__head .latp-eyebrow {
	justify-content: center;
}

.latp-itinerary__head .latp-lede {
	margin-inline: auto;
}

.latp-facts {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin: 0 0 clamp(26px, 3.6vw, 40px);
	padding: 0;
	list-style: none;
}

.latp-fact {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 11px 18px;
	border-radius: 999px;
	background: var(--surface);
	border: 1px solid var(--line);
	box-shadow: var(--shadow-sm);
}

.latp-fact .latp-i {
	width: 16px;
	height: 16px;
	color: var(--latp-accent);
}

.latp-fact__label {
	font-size: 0.68rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--muted);
}

.latp-fact__value {
	font-size: 0.9rem;
	font-weight: 500;
	color: var(--text-strong);
	text-transform: capitalize;
}

/* Day cards */

.latp-days {
	display: grid;
	gap: clamp(16px, 2.4vw, 24px);
}

.latp-day {
	position: relative;
	padding: clamp(20px, 2.8vw, 32px);
	border: 1px solid var(--line);
	border-radius: calc(var(--latp-radius) + 4px);
	background: var(--surface);
	box-shadow: var(--shadow-sm);
	animation: latp-step-in 0.55s var(--latp-ease) both;
	animation-delay: var(--latp-delay, 0ms);
	transition: border-color 0.3s var(--latp-ease), box-shadow 0.3s var(--latp-ease);
}

.latp-day:hover {
	border-color: var(--line-strong);
	box-shadow: var(--shadow);
}

.latp-day__head {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
	padding-bottom: 18px;
	margin-bottom: 20px;
	border-bottom: 1px solid var(--line);
}

.latp-day__badge {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: baseline;
	gap: 6px;
	padding: 8px 16px;
	border-radius: 999px;
	background: linear-gradient(135deg, var(--latp-accent-soft), var(--latp-accent));
	color: #12161f;
	box-shadow: 0 10px 24px -14px var(--latp-accent);
}

.latp-day__badge-word {
	font-size: 0.68rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	font-weight: 600;
}

.latp-day__badge-num {
	font-family: var(--latp-font-heading);
	font-size: 1.15rem;
	font-weight: 600;
	line-height: 1;
}

.latp-day__title {
	flex: 1 1 220px;
	margin: 0;
	font-family: var(--latp-font-heading);
	font-weight: 500;
	font-size: clamp(1.2rem, 2.2vw, 1.55rem);
	color: var(--text-strong);
	line-height: 1.25;
}

.latp-day__place {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 0.8rem;
	color: var(--muted);
}

.latp-day__place .latp-i {
	width: 14px;
	height: 14px;
	color: var(--latp-accent);
}

.latp-day__cost {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	margin-inline-start: auto;
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--text-strong);
	font-variant-numeric: tabular-nums;
}

.latp-day__cost small {
	font-size: 0.68rem;
	font-weight: 400;
	color: var(--muted);
	text-transform: none;
}

.latp-transit {
	display: flex;
	align-items: flex-start;
	gap: 11px;
	margin: 0 0 20px;
	padding: 13px 16px;
	border-radius: calc(var(--latp-radius) * 0.6);
	background: var(--sunken);
	border: 1px dashed var(--line-strong);
	font-size: 0.88rem;
	color: var(--muted);
}

.latp-transit .latp-i {
	flex: 0 0 auto;
	width: 17px;
	height: 17px;
	margin-top: 2px;
	color: var(--latp-accent);
}

.latp-transit strong {
	color: var(--text-strong);
	font-weight: 500;
	margin-inline-end: 4px;
}

.latp-day__grid {
	display: grid;
	gap: 16px;
}

@media (min-width: 900px) {
	.latp-day__grid {
		grid-template-columns: 1.35fr 1fr 0.9fr;
	}
}

/* Panels */

.latp-panel {
	padding: 18px 20px;
	border-radius: calc(var(--latp-radius) * 0.72);
	background: var(--surface-2);
	border: 1px solid var(--line);
}

.latp-panel--tip {
	background: linear-gradient(160deg, var(--glow), transparent 70%), var(--surface-2);
	border-color: var(--latp-accent);
	border-color: color-mix(in srgb, var(--latp-accent) 32%, transparent);
}

.latp-panel__title {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 14px;
	font-size: 0.74rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--latp-accent);
}

.latp-panel__title .latp-i {
	width: 16px;
	height: 16px;
}

.latp-panel__empty {
	margin: 0;
	font-size: 0.86rem;
	color: var(--muted);
	font-style: italic;
}

/* Timeline */

.latp-timeline {
	position: relative;
	margin: 0;
	padding: 0 0 0 20px;
	list-style: none;
}

.latp-timeline::before {
	content: "";
	position: absolute;
	inset-inline-start: 4px;
	top: 6px;
	bottom: 8px;
	width: 1px;
	background: linear-gradient(180deg, var(--latp-accent), transparent);
	opacity: 0.5;
}

.latp-timeline__item {
	position: relative;
	padding-bottom: 16px;
}

.latp-timeline__item:last-child {
	padding-bottom: 0;
}

.latp-timeline__item::before {
	content: "";
	position: absolute;
	inset-inline-start: -20px;
	top: 6px;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--surface);
	border: 1.5px solid var(--latp-accent);
}

.latp-timeline__when {
	display: block;
	font-size: 0.66rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--muted);
	margin-bottom: 3px;
}

.latp-timeline__title {
	margin: 0;
	font-size: 0.98rem;
	font-weight: 600;
	color: var(--text-strong);
	line-height: 1.35;
}

.latp-timeline__detail {
	margin: 5px 0 0;
	font-size: 0.88rem;
	line-height: 1.6;
	color: var(--muted);
}

/* Dining */

.latp-dining {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 14px;
}

.latp-dining__item {
	display: grid;
	gap: 2px;
}

.latp-dining__meal {
	font-size: 0.66rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--muted);
}

.latp-dining__name {
	font-size: 0.96rem;
	font-weight: 600;
	color: var(--text-strong);
}

.latp-dining__note {
	font-size: 0.85rem;
	line-height: 1.55;
	color: var(--muted);
}

.latp-tip {
	margin: 0;
	font-size: 0.9rem;
	line-height: 1.65;
	color: var(--text);
}

/* Key info */

.latp-keyinfo {
	margin-top: clamp(30px, 4vw, 48px);
}

.latp-keyinfo__grid {
	display: grid;
	gap: 16px;
}

@media (min-width: 860px) {
	.latp-keyinfo__grid {
		grid-template-columns: 1.15fr 1fr;
	}
}

.latp-keyinfo .latp-panel {
	padding: clamp(20px, 2.6vw, 28px);
	background: var(--surface);
	box-shadow: var(--shadow-sm);
}

.latp-stays {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 16px;
}

.latp-stay {
	padding-bottom: 16px;
	border-bottom: 1px solid var(--line);
}

.latp-stay:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}

.latp-stay__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
}

.latp-stay__name {
	font-family: var(--latp-font-heading);
	font-size: 1.08rem;
	color: var(--text-strong);
}

.latp-stay__price {
	flex: 0 0 auto;
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--latp-accent);
	font-variant-numeric: tabular-nums;
}

.latp-stay__area {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin-top: 3px;
	font-size: 0.75rem;
	color: var(--muted);
}

.latp-stay__area .latp-i {
	width: 12px;
	height: 12px;
}

.latp-stay__desc {
	margin: 7px 0 0;
	font-size: 0.88rem;
	line-height: 1.6;
	color: var(--muted);
}

.latp-panel--visa p {
	margin: 0;
	font-size: 0.92rem;
	line-height: 1.7;
	color: var(--text);
}

.latp-minifacts {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 26px;
	margin: 18px 0 0;
	padding-top: 16px;
	border-top: 1px solid var(--line);
}

.latp-minifacts dt {
	font-size: 0.66rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--muted);
}

.latp-minifacts dd {
	margin: 2px 0 0;
	font-size: 0.9rem;
	font-weight: 500;
	color: var(--text-strong);
}

/* Budget */

.latp-panel--budget {
	margin-top: 16px;
	padding: clamp(20px, 2.6vw, 28px);
	background: var(--surface);
	box-shadow: var(--shadow-sm);
}

.latp-budget__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 20px;
}

.latp-budget__head .latp-panel__title {
	margin: 0;
}

.latp-budget__total {
	text-align: end;
}

.latp-budget__amount {
	display: block;
	font-family: var(--latp-font-heading);
	font-size: clamp(1.3rem, 2.6vw, 1.8rem);
	color: var(--text-strong);
	font-variant-numeric: tabular-nums;
	line-height: 1.1;
}

.latp-budget__basis {
	display: block;
	font-size: 0.74rem;
	color: var(--muted);
}

.latp-budget__list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 16px;
}

.latp-budget__meta {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 6px;
}

.latp-budget__cat {
	font-size: 0.9rem;
	font-weight: 500;
	color: var(--text-strong);
}

.latp-budget__val {
	font-size: 0.85rem;
	color: var(--latp-accent);
	font-variant-numeric: tabular-nums;
}

.latp-budget__bar {
	display: block;
	height: 5px;
	border-radius: 4px;
	background: var(--sunken);
	overflow: hidden;
}

.latp-budget__bar > span {
	display: block;
	height: 100%;
	border-radius: 4px;
	background: linear-gradient(90deg, var(--latp-accent), var(--latp-accent-soft));
	animation: latp-bar 0.9s var(--latp-ease) both;
}

@keyframes latp-bar {
	from {
		transform: scaleX(0);
		transform-origin: left;
	}
	to {
		transform: scaleX(1);
		transform-origin: left;
	}
}

.latp-budget__note {
	display: block;
	margin-top: 5px;
	font-size: 0.78rem;
	color: var(--muted);
}

.latp-budget__disclaimer {
	margin: 20px 0 0;
	font-size: 0.76rem;
	color: var(--muted);
	opacity: 0.8;
}

/* Footer actions */

.latp-itinerary__foot {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	margin-top: clamp(30px, 4vw, 46px);
	padding-top: clamp(24px, 3vw, 34px);
	border-top: 1px solid var(--line);
}

.latp-sharelink {
	margin: 16px 0 0;
	text-align: center;
	font-size: 0.78rem;
	color: var(--muted);
	word-break: break-all;
}

.latp-sharelink a {
	color: var(--latp-accent);
}

.latp-notfound {
	max-width: var(--latp-container);
	margin-inline: auto;
	text-align: center;
	padding: clamp(50px, 10vw, 110px) 20px;
}

.latp-notfound h1 {
	font-family: var(--latp-font-heading);
	color: var(--text-strong);
}

/* ================================================== 14. MOTION / A11Y === */

.latp .latp-i {
	width: 18px;
	height: 18px;
	flex: 0 0 auto;
	vertical-align: middle;
}

.latp.is-busy {
	pointer-events: none;
}

.latp.is-busy .latp-loader {
	pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
	.latp *,
	.latp *::before,
	.latp *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
	}
	.latp .latp-btn:hover,
	.latp .latp-match__btn:hover {
		transform: none;
	}
}