/**
 * EnRoute Itinerary Planner
 * Editorial travel-journal aesthetic — warm cream, deep ink, terracotta accents,
 * Fraunces serif for headers, Plus Jakarta Sans for UI.
 */

:root {
	--enroute-bg: #faf7f2;
	--enroute-surface: #ffffff;
	--enroute-ink: #1a2332;
	--enroute-ink-soft: #5a6478;
	--enroute-line: #ebe4d5;
	--enroute-line-strong: #d4c5a9;
	--enroute-accent: #c8553d;
	--enroute-accent-soft: #f4d6cc;
	--enroute-success: #2d7a3e;
	--enroute-serif: 'Fraunces', Georgia, 'Times New Roman', serif;
	--enroute-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

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

.enroute-planner {
	background: var(--enroute-bg);
	color: var(--enroute-ink);
	font-family: var(--enroute-sans);
	max-width: 780px;
	margin: 0 auto;
	padding: 48px 32px;
	border-radius: 4px;
	line-height: 1.5;
}

/* ===== Header ===== */
.enroute-planner__header {
	text-align: center;
	margin-bottom: 40px;
}

.enroute-planner__eyebrow {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--enroute-accent);
	margin: 0 0 12px;
}

.enroute-planner__title {
	font-family: var(--enroute-serif);
	font-size: clamp(30px, 5vw, 46px);
	font-weight: 500;
	font-style: italic;
	line-height: 1.05;
	margin: 0 0 14px;
	letter-spacing: -0.015em;
	color: var(--enroute-ink);
}

.enroute-planner__subtitle {
	color: var(--enroute-ink-soft);
	font-size: 15px;
	line-height: 1.55;
	max-width: 460px;
	margin: 0 auto;
}

/* ===== Fields ===== */
.enroute-planner__trip {
	margin-bottom: 32px;
}

.enroute-field {
	display: block;
}

.enroute-field--inline {
	display: block;
}

.enroute-field__label {
	display: block;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--enroute-ink-soft);
	margin-bottom: 8px;
}

.enroute-field__input {
	width: 100%;
	background: var(--enroute-surface);
	border: 1px solid var(--enroute-line);
	border-radius: 6px;
	padding: 11px 14px;
	font-family: inherit;
	font-size: 15px;
	color: var(--enroute-ink);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
	-webkit-appearance: none;
	-moz-appearance: none;
}

.enroute-field__input:focus {
	outline: none;
	border-color: var(--enroute-accent);
	box-shadow: 0 0 0 3px var(--enroute-accent-soft);
}

.enroute-field__input::placeholder {
	color: #a9aebb;
}

.enroute-field__group {
	display: flex;
	gap: 8px;
}

.enroute-field__group .enroute-field__input {
	flex: 1;
}

textarea.enroute-field__input {
	resize: vertical;
	min-height: 38px;
	line-height: 1.45;
	font-family: inherit;
}

/* Honeypot — invisible to humans, visible to bots */
.enroute-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
	opacity: 0 !important;
	pointer-events: none !important;
}

/* ===== Destinations ===== */
.enroute-planner__destinations {
	margin-bottom: 16px;
}

.enroute-destination {
	position: relative;
	display: flex;
	gap: 18px;
	margin-bottom: 20px;
	padding-bottom: 4px;
}

/* Dotted route line connecting destinations */
.enroute-destination:not(:last-child)::after {
	content: '';
	position: absolute;
	left: 19px;
	top: 50px;
	bottom: -16px;
	width: 2px;
	background-image: linear-gradient(
		to bottom,
		var(--enroute-line-strong) 0,
		var(--enroute-line-strong) 4px,
		transparent 4px,
		transparent 8px
	);
	background-size: 2px 8px;
	background-repeat: repeat-y;
}

.enroute-destination__marker {
	flex-shrink: 0;
	position: relative;
	z-index: 1;
}

.enroute-destination__index {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--enroute-ink);
	color: var(--enroute-bg);
	font-family: var(--enroute-serif);
	font-size: 17px;
	font-weight: 500;
	letter-spacing: 0;
}

.enroute-destination__body {
	flex: 1;
	min-width: 0;
	background: var(--enroute-surface);
	border: 1px solid var(--enroute-line);
	border-radius: 8px;
	padding: 18px 20px 16px;
}

.enroute-destination__header {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 14px;
}

.enroute-destination__name {
	flex: 1;
	min-width: 0;
	border: none;
	background: transparent;
	font-family: var(--enroute-serif);
	font-size: 22px;
	font-weight: 500;
	color: var(--enroute-ink);
	padding: 4px 0;
	border-bottom: 1px solid transparent;
	transition: border-color 0.15s;
}

.enroute-destination__name:focus {
	outline: none;
	border-bottom-color: var(--enroute-accent);
}

.enroute-destination__name::placeholder {
	color: #b8b0a3;
	font-style: italic;
	font-weight: 400;
}

.enroute-destination__dates {
	display: flex;
	gap: 14px;
	margin-bottom: 14px;
}

.enroute-destination__dates .enroute-field {
	flex: 1;
}

/* ===== Activities ===== */
.enroute-destination__activities:not(:empty) {
	margin-bottom: 12px;
	border-top: 1px solid var(--enroute-line);
}

.enroute-activity {
	display: grid;
	grid-template-columns: 140px 1fr 32px;
	gap: 12px;
	align-items: start;
	padding: 12px 0;
	border-bottom: 1px solid var(--enroute-line);
}

.enroute-activity:last-child {
	border-bottom: none;
}

.enroute-activity__when {
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.enroute-activity__when .enroute-field__input {
	padding: 7px 10px;
	font-size: 13px;
}

.enroute-activity__what {
	display: flex;
	flex-direction: column;
	gap: 5px;
	min-width: 0;
}

.enroute-activity__title {
	font-weight: 600;
}

.enroute-activity__remove {
	align-self: center;
}

/* ===== Buttons ===== */
.enroute-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 22px;
	border-radius: 6px;
	border: 1px solid transparent;
	font-family: var(--enroute-sans);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.01em;
	cursor: pointer;
	transition: all 0.15s ease;
	text-decoration: none;
	line-height: 1.2;
}

.enroute-btn:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.enroute-btn--full {
	width: 100%;
}

.enroute-btn--small {
	padding: 8px 14px;
	font-size: 13px;
}

.enroute-btn--primary {
	background: var(--enroute-ink);
	color: var(--enroute-bg);
}

.enroute-btn--primary:hover:not(:disabled) {
	background: var(--enroute-accent);
	color: #fff;
}

.enroute-btn--outline {
	background: transparent;
	color: var(--enroute-ink);
	border-color: var(--enroute-ink);
}

.enroute-btn--outline:hover:not(:disabled) {
	background: var(--enroute-ink);
	color: var(--enroute-bg);
}

.enroute-btn--ghost {
	background: var(--enroute-surface);
	color: var(--enroute-ink-soft);
	border: 1px dashed var(--enroute-line-strong);
}

.enroute-btn--ghost:hover:not(:disabled) {
	border-color: var(--enroute-accent);
	color: var(--enroute-accent);
	border-style: solid;
	background: var(--enroute-accent-soft);
}

.enroute-btn--text {
	background: transparent;
	color: var(--enroute-ink-soft);
	padding: 12px 10px;
	font-weight: 500;
}

.enroute-btn--text:hover:not(:disabled) {
	color: var(--enroute-accent);
}

.enroute-btn__plus {
	font-size: 17px;
	line-height: 1;
	font-weight: 400;
	margin-top: -1px;
}

.enroute-icon-btn {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: transparent;
	border: none;
	color: var(--enroute-ink-soft);
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	transition: all 0.15s;
	flex-shrink: 0;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.enroute-icon-btn:hover {
	background: var(--enroute-accent-soft);
	color: var(--enroute-accent);
}

/* ===== Action bar ===== */
.enroute-planner__actions {
	margin-top: 36px;
	padding-top: 28px;
	border-top: 1px solid var(--enroute-line);
}

.enroute-planner__email {
	margin-bottom: 20px;
}

.enroute-planner__secondary {
	display: flex;
	gap: 8px;
	justify-content: flex-end;
	align-items: center;
}

.enroute-planner__status {
	font-size: 13px;
	margin: 10px 0 0;
	min-height: 18px;
	font-weight: 500;
}

.enroute-planner__status--success {
	color: var(--enroute-success);
}

.enroute-planner__status--error {
	color: var(--enroute-accent);
}

/* ===== Responsive ===== */
@media (max-width: 600px) {
	.enroute-planner {
		padding: 32px 16px;
	}

	.enroute-planner__header {
		margin-bottom: 28px;
	}

	.enroute-destination {
		gap: 12px;
	}

	.enroute-destination__index {
		width: 34px;
		height: 34px;
		font-size: 15px;
	}

	.enroute-destination:not(:last-child)::after {
		left: 16px;
		top: 44px;
	}

	.enroute-destination__body {
		padding: 14px 14px 12px;
	}

	.enroute-destination__name {
		font-size: 19px;
	}

	.enroute-destination__dates {
		flex-direction: column;
		gap: 10px;
	}

	.enroute-activity {
		grid-template-columns: 1fr 32px;
		grid-template-areas:
			'when remove'
			'what what';
		row-gap: 8px;
	}

	.enroute-activity__when {
		grid-area: when;
		flex-direction: row;
	}

	.enroute-activity__when .enroute-field__input {
		flex: 1;
	}

	.enroute-activity__what {
		grid-area: what;
	}

	.enroute-activity__remove {
		grid-area: remove;
	}

	.enroute-planner__secondary {
		flex-direction: column;
		align-items: stretch;
	}

	.enroute-planner__secondary .enroute-btn {
		width: 100%;
	}
}

/* ===== Print ===== */
@media print {
	body * {
		visibility: hidden;
	}

	.enroute-planner,
	.enroute-planner * {
		visibility: visible;
	}

	.enroute-planner {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		max-width: none;
		background: #fff;
		padding: 0 12px;
		color: #000;
	}

	.enroute-planner__subtitle,
	.enroute-planner__eyebrow {
		color: #555;
	}

	.enroute-btn,
	.enroute-icon-btn,
	.enroute-planner__actions,
	.enroute-destination__add-activity,
	.enroute-planner__trip .enroute-field__label,
	.enroute-hp {
		display: none !important;
	}

	.enroute-field__input,
	.enroute-destination__name {
		border: none !important;
		padding: 0 !important;
		background: transparent !important;
		box-shadow: none !important;
		color: #000 !important;
	}

	.enroute-destination__body {
		border: none;
		padding: 4px 0;
	}

	.enroute-destination {
		page-break-inside: avoid;
		margin-bottom: 18px;
	}

	.enroute-destination__index {
		background: #000 !important;
		color: #fff !important;
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
	}

	.enroute-destination:not(:last-child)::after {
		background: #999;
	}

	.enroute-activity {
		page-break-inside: avoid;
	}

	#enrouteTripName {
		font-family: var(--enroute-serif);
		font-size: 24px;
		font-weight: 500;
	}
}