/* Interactive booking preview */
.demo-booking { color: var(--ink); }

.demo-booking__notice {
	display: grid;
	grid-template-columns: 28px 1fr;
	gap: 10px;
	padding: 14px;
	margin-bottom: 20px;
	border: 1px solid var(--sky-200);
	border-radius: 12px;
	background: var(--sky-50);
}

.demo-booking__notice > span {
	display: grid;
	width: 28px;
	height: 28px;
	place-items: center;
	border-radius: 50%;
	background: var(--mint);
	color: var(--green);
	font-weight: 700;
}

.demo-booking__notice p { margin: 0; font-size: 0.74rem; line-height: 1.55; }
.demo-booking__notice strong { display: block; margin-bottom: 2px; font-size: 0.78rem; }

.demo-booking__progress {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	padding: 0;
	margin: 0 0 22px;
	list-style: none;
	color: var(--muted);
	font-size: 0.7rem;
	font-weight: 600;
	text-align: center;
}

.demo-booking__progress li {
	position: relative;
	display: grid;
	justify-items: center;
	gap: 5px;
}

.demo-booking__progress li::before {
	position: absolute;
	top: 13px;
	left: -50%;
	width: 100%;
	height: 1px;
	background: var(--line);
	content: "";
}

.demo-booking__progress li:first-child::before { display: none; }

.demo-booking__progress span {
	position: relative;
	z-index: 1;
	display: grid;
	width: 27px;
	height: 27px;
	place-items: center;
	border: 1px solid var(--line);
	border-radius: 50%;
	background: #fff;
	font-size: 0.68rem;
	transition: color 180ms ease, background 180ms ease, border-color 180ms ease, transform 180ms ease;
}

.demo-booking__progress li.is-current,
.demo-booking__progress li.is-complete { color: var(--ink); }

.demo-booking__progress li.is-current span,
.demo-booking__progress li.is-complete span { border-color: var(--sky-600); background: var(--sky-600); color: #fff; }
.demo-booking__progress li.is-current span { transform: scale(1.08); }
.demo-booking:not(.is-progressing) .demo-booking__progress { display: none; }
.demo-booking__step[hidden] { display: none; }
.demo-booking__step.is-current { animation: bookingStepIn 360ms cubic-bezier(0.22, 1, 0.36, 1) both; }

.demo-booking__quick-fields {
	display: grid;
	gap: 10px;
}

.demo-booking__date-trigger {
	position: relative;
	display: grid;
	width: 100%;
	min-height: 58px;
	padding: 10px 42px 10px 13px;
	border: 1px solid var(--ink);
	border-radius: 9px;
	background: #fff;
	color: var(--ink);
	font: inherit;
	text-align: left;
	cursor: pointer;
	transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.demo-booking__date-trigger > span {
	color: var(--muted);
	font-size: 0.65rem;
	font-weight: 600;
}

.demo-booking__date-trigger > strong {
	overflow: hidden;
	font-size: 0.78rem;
	font-weight: 600;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.demo-booking__date-trigger > i {
	position: absolute;
	top: 50%;
	right: 12px;
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	border: 1px solid rgba(47, 148, 207, 0.16);
	border-radius: 50%;
	background: var(--sky-50);
	color: var(--sky-700);
	font-style: normal;
	transform: translateY(-50%);
	transition: background 160ms ease, color 160ms ease, transform 180ms ease;
}

.demo-booking__date-trigger > i svg {
	width: 15px;
	height: 15px;
	fill: none;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 1.8;
}

.demo-booking__date-trigger.is-open > i { transform: translateY(-50%) rotate(180deg); }
.demo-booking__date-trigger:hover { border-color: var(--sky-600); background: var(--sky-50); }
.demo-booking__date-trigger:hover > i { background: var(--sky-100); color: var(--sky-800); }
.demo-booking__date-trigger:focus-visible { outline: 0; border-color: var(--sky-600); box-shadow: 0 0 0 3px rgba(47, 148, 207, 0.18); }

.demo-booking__calendar-panel {
	margin-top: 12px;
	animation: bookingCalendarIn 220ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.demo-booking__calendar-panel[hidden] { display: none; }

.demo-calendar {
	padding: 16px 14px 13px;
	border: 1px solid var(--line);
	border-radius: 13px;
	background: #fff;
}

.demo-calendar__head {
	display: grid;
	grid-template-columns: 36px 1fr 36px;
	align-items: center;
	gap: 8px;
	margin-bottom: 14px;
	text-align: center;
}

.demo-calendar__head strong { font-size: 0.84rem; }

.demo-calendar__nav {
	display: grid;
	width: 36px;
	height: 36px;
	place-items: center;
	border: 1px solid var(--line);
	border-radius: 50%;
	background: #fff;
	color: var(--ink);
	cursor: pointer;
	transition: background 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease;
}

.demo-calendar__nav:hover { border-color: var(--sky-500); background: var(--sky-50); color: var(--sky-700); transform: translateY(-1px); }
.demo-calendar__weekdays,
.demo-calendar__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.demo-calendar__weekdays { margin-bottom: 5px; color: var(--muted); font-size: 0.63rem; font-weight: 600; text-align: center; }

.demo-calendar__day {
	display: grid;
	width: 100%;
	min-width: 0;
	aspect-ratio: 1;
	place-items: center;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--ink-soft);
	font-family: inherit;
	font-size: 0.74rem;
	cursor: pointer;
	transition: color 150ms ease, background 150ms ease, transform 150ms ease;
}

.demo-calendar__day:not(:disabled):hover { background: var(--sky-100); color: var(--sky-700); transform: scale(1.07); }
.demo-calendar__day.is-selected { background: var(--sky-600); color: #fff; font-weight: 700; }
.demo-calendar__day:disabled { color: #c1cbd1; cursor: not-allowed; text-decoration: line-through; }
.demo-calendar__day--empty { visibility: hidden; }

.demo-field { display: grid; gap: 7px; margin-top: 16px; }
.demo-field--guests { margin-top: 0; }
.demo-field > span,
.demo-payment-choice legend { color: var(--ink); font-size: 0.72rem; font-weight: 650; }

.demo-field input,
.demo-field select {
	width: 100%;
	min-height: 46px;
	padding: 10px 12px;
	border: 1px solid var(--line);
	border-radius: 9px;
	background: #fff;
	color: var(--ink);
	font: inherit;
	font-size: 0.78rem;
	transition: border-color 160ms ease, box-shadow 160ms ease;
}

.demo-field--guests,
.demo-field--route {
	position: relative;
	gap: 1px;
	min-height: 58px;
	padding: 8px 12px 7px;
	border: 1px solid var(--ink);
	border-radius: 9px;
	background: #fff;
}

.demo-field--route { margin-top: 10px; padding-bottom: 9px; }
.demo-field--guests > span,
.demo-field--route > span { color: var(--muted); font-size: 0.65rem; }
.demo-field--guests select,
.demo-field--route select {
	min-height: 26px;
	padding: 0 42px 0 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	font-size: 0.78rem;
	font-weight: 600;
	appearance: none;
	-webkit-appearance: none;
}

.demo-field--route > small {
	display: block;
	padding-right: 38px;
	color: var(--sky-700);
	font-size: 0.62rem;
	font-weight: 600;
	line-height: 1.35;
}

.demo-field--guests::after,
.demo-field--route::after {
	position: absolute;
	top: 50%;
	right: 12px;
	width: 30px;
	height: 30px;
	border: 1px solid rgba(47, 148, 207, 0.16);
	border-radius: 50%;
	background-color: var(--sky-50);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23105c86' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.8'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E");
	background-position: center;
	background-repeat: no-repeat;
	background-size: 15px 15px;
	content: "";
	pointer-events: none;
	transform: translateY(-50%);
}
.demo-field--guests:focus-within,
.demo-field--route:focus-within { border-color: var(--sky-600); box-shadow: 0 0 0 3px rgba(47, 148, 207, 0.18); }
.demo-field--guests select:focus,
.demo-field--route select:focus { box-shadow: none; }

.demo-booking__capacity {
	padding: 10px 12px;
	margin: 10px 0 0;
	border: 1px solid #b9dcea;
	border-radius: 9px;
	background: #f2f9fc;
	color: var(--sky-700);
	font-size: 0.69rem;
	font-weight: 650;
	line-height: 1.45;
}

.demo-booking__capacity.is-low {
	border-color: #f4c77b;
	background: #fff8e8;
	color: #7a4a00;
}

.demo-calendar__day.is-sold-out {
	color: #c7a3a3;
}

.demo-field input:focus,
.demo-field select:focus,
.demo-calendar__day:focus-visible,
.demo-calendar__nav:focus-visible { outline: 0; border-color: var(--sky-600); box-shadow: 0 0 0 3px rgba(47, 148, 207, 0.18); }

.demo-booking__selection { display: flex; justify-content: space-between; gap: 14px; padding: 13px 0; margin-top: 14px; border-top: 1px solid var(--line); font-size: 0.7rem; }
.demo-booking__selection span { color: var(--muted); }
.demo-booking__selection strong { text-align: right; }
.demo-booking__next { width: 100%; margin-top: 14px; }
.demo-booking .button:disabled { border-color: #cbd8de; background: #cbd8de; color: #fff; cursor: not-allowed; transform: none; }

.demo-booking__fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px; }

.demo-payment-choice {
	display: grid;
	gap: 9px;
	padding: 16px 0 0;
	margin: 18px 0 0;
	border: 0;
	border-top: 1px solid var(--line);
}

.demo-payment-choice legend { padding: 0; margin-bottom: 9px; }

.demo-payment-choice label {
	display: grid;
	grid-template-columns: 19px 1fr;
	align-items: center;
	gap: 10px;
	padding: 12px;
	border: 1px solid var(--line);
	border-radius: 10px;
	cursor: pointer;
}

.demo-payment-choice input { width: 17px; height: 17px; accent-color: var(--sky-600); }
.demo-payment-choice span { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.demo-payment-choice strong { font-size: 0.75rem; }
.demo-payment-choice small { color: var(--muted); font-size: 0.68rem; }

.demo-booking__actions { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 18px; }
.demo-booking__actions .text-link,
.demo-booking__step > .text-link { padding: 0; border-width: 0 0 1px; background: transparent; font: inherit; font-size: 0.76rem; cursor: pointer; }
.demo-booking__error { min-height: 18px; margin: 10px 0 0; color: #b42318; font-size: 0.7rem; }

.demo-checkout-summary { padding: 19px; border-radius: 13px; background: var(--sky-50); }
.demo-checkout-summary h3 { margin-bottom: 14px; font-size: 1.05rem; }
.demo-checkout-summary dl { margin: 0; }
.demo-checkout-summary dl > div { display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; border-top: 1px solid var(--sky-200); font-size: 0.7rem; }
.demo-checkout-summary dt { color: var(--muted); }
.demo-checkout-summary dd { margin: 0; font-weight: 600; text-align: right; }

.demo-paypal-state { display: grid; grid-template-columns: 42px 1fr; gap: 12px; padding: 18px 0; }
.demo-paypal-state__mark { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 50%; background: #eef1f7; color: #68718a; font-size: 1.1rem; font-weight: 700; }
.demo-paypal-state strong { display: block; margin-bottom: 3px; font-size: 0.78rem; }
.demo-paypal-state p { margin: 0; font-size: 0.69rem; line-height: 1.55; }
.demo-paypal-button { width: 100%; margin-bottom: 12px; }
.awesome-paypal-buttons { min-height: 48px; margin: 2px 0 12px; }
.awesome-paypal-message { min-height: 1.5em; margin: 0 0 14px; color: #526c7e; font-size: 0.72rem; line-height: 1.55; text-align: center; }
.awesome-paypal-message.is-error { color: #a83232; font-weight: 600; }
.awesome-paypal-message.is-success { padding: 15px 16px; border: 1px solid #9ed6b3; border-radius: 12px; background: #effbf3; color: #08783e; font-size: 0.78rem; font-weight: 700; }
.demo-booking.is-booked [data-booking-back],
.demo-booking.is-booked .demo-inquiry-button { display: none; }
.demo-inquiry-button { width: 100%; margin-bottom: 14px; border-color: #25d366; background: #25d366; color: #fff; text-align: center; }
.demo-inquiry-button:hover { border-color: #128c4a; background: #128c4a; color: #fff; }
.demo-booking__footnote { margin: 14px 0 0; color: var(--muted); font-size: 0.64rem; text-align: center; }

/* Calm motion language */
html.js .home-hero .hero-copy > * { opacity: 0; transform: translateY(18px); animation: heroCopyIn 700ms cubic-bezier(0.22, 1, 0.36, 1) forwards; }
html.js .home-hero .hero-copy > :nth-child(2) { animation-delay: 90ms; }
html.js .home-hero .hero-copy > :nth-child(3) { animation-delay: 160ms; }
html.js .home-hero .hero-copy > :nth-child(4) { animation-delay: 230ms; }
html.js .home-hero .hero-copy > :nth-child(5) { animation-delay: 300ms; }
html.js .home-hero .hero-visual { opacity: 0; transform: translateX(26px) scale(0.985); animation: heroVisualIn 900ms 120ms cubic-bezier(0.22, 1, 0.36, 1) forwards; }
html.js .award-badge { animation: awardArrive 720ms 520ms cubic-bezier(0.22, 1, 0.36, 1) both, awardFloat 4.8s 1.3s ease-in-out infinite; }

html.js .motion-reveal {
	opacity: 0;
	transform: translateY(26px);
	transition: opacity 680ms cubic-bezier(0.22, 1, 0.36, 1), transform 680ms cubic-bezier(0.22, 1, 0.36, 1);
	transition-delay: var(--motion-delay, 0ms);
}

html.js .motion-reveal.motion-visible { opacity: 1; transform: none; }
.tour-card { transition: transform 260ms ease; }
.tour-card:hover { transform: translateY(-6px); }
.tour-card:hover .circle-link { border-color: var(--sky-600); background: var(--sky-600); color: #fff; transform: translateX(2px); }
.circle-link { transition: background 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease; }
.featured-tour__visual img,
.guide-image > img { transition: transform 900ms cubic-bezier(0.22, 1, 0.36, 1); }
.featured-tour:hover .featured-tour__visual img,
.guide-grid:hover .guide-image > img { transform: scale(1.025); }
.faq-list details[open] p { animation: faqAnswerIn 280ms ease both; }

@keyframes heroCopyIn { to { opacity: 1; transform: none; } }
@keyframes heroVisualIn { to { opacity: 1; transform: none; } }
@keyframes awardArrive { from { opacity: 0; transform: translateY(-12px) rotate(-4deg) scale(0.92); } to { opacity: 1; transform: translateY(0) rotate(0) scale(1); } }
@keyframes awardFloat { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-6px) rotate(-1.2deg); } }
@keyframes faqAnswerIn { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: none; } }
@keyframes bookingStepIn { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: none; } }
@keyframes bookingCalendarIn { from { opacity: 0; transform: translateY(-7px); } to { opacity: 1; transform: none; } }

@media (max-width: 620px) {
	.demo-booking__fields { grid-template-columns: 1fr; }
	.demo-calendar { padding-right: 10px; padding-left: 10px; }
	.demo-calendar__weekdays,
	.demo-calendar__grid { gap: 2px; }
	.demo-payment-choice span { align-items: flex-start; flex-direction: column; gap: 2px; }
	.demo-booking__actions { align-items: stretch; flex-direction: column-reverse; }
	.demo-booking__actions .button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
	html.js .motion-reveal,
	html.js .motion-reveal.motion-visible,
	html.js .home-hero .hero-copy > *,
	html.js .home-hero .hero-visual { opacity: 1 !important; transform: none !important; }
}