/* Custom styles that sit alongside Tailwind utilities */

.glass {
	background: rgba(44, 33, 68, .55);
	backdrop-filter: blur(18px);
	-webkit-backdrop-filter: blur(18px);
}

.glass-card {
	background: rgba(52, 38, 78, .72);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
}

/* Villa cards: spotlight the hovered villa, dim the rest, slide up a details drawer */
.villa-card {
	--ease: cubic-bezier(.22, .61, .36, 1);
	outline: none;
	transition: opacity 500ms var(--ease), filter 500ms var(--ease);
}

.villa-card__img {
	transition: transform 1200ms var(--ease);
}

.villa-card__shade {
	opacity: 0;
	transition: opacity 500ms var(--ease);
}

.villa-card__drawer {
	background: rgba(44, 33, 68, .5);
	backdrop-filter: blur(14px) saturate(140%);
	-webkit-backdrop-filter: blur(14px) saturate(140%);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16);
	opacity: 0;
	transform: translateY(calc(-100% - 16px));
	transition: transform 600ms var(--ease), opacity 400ms var(--ease);
}

.villa-card__num {
	display: inline-block;
	transform-origin: left center;
	transition: transform 500ms var(--ease), color 500ms var(--ease);
}

/* Underline that draws under the villa name */
.villa-card__name {
	background: linear-gradient(#9a74e6, #9a74e6) no-repeat 0 100% / 0 1px;
	padding-bottom: 2px;
	transition: background-size 600ms var(--ease);
}

.villa-card__arrow {
	transition: background-color 400ms var(--ease), border-color 400ms var(--ease), color 400ms var(--ease);
}

.villa-card__arrow-icon {
	transform: rotate(-45deg);
	transition: transform 500ms var(--ease);
}

/* Active card: hover or keyboard focus */
.villa-card:hover .villa-card__img,
.villa-card:focus-visible .villa-card__img {
	transform: scale(1.05);
}

.villa-card:hover .villa-card__shade,
.villa-card:focus-visible .villa-card__shade {
	opacity: 1;
}

.villa-card:hover .villa-card__drawer,
.villa-card:focus-visible .villa-card__drawer {
	opacity: 1;
	transform: none;
}

.villa-card:hover .villa-card__num,
.villa-card:focus-visible .villa-card__num {
	transform: scale(1.25);
	color: #9a74e6;
}

.villa-card:hover .villa-card__name,
.villa-card:focus-visible .villa-card__name {
	background-size: 100% 1px;
}

.villa-card:hover .villa-card__arrow,
.villa-card:focus-visible .villa-card__arrow {
	background-color: #cdb8f7;
	border-color: #cdb8f7;
	color: #1c1530;
}

.villa-card:hover .villa-card__arrow-icon,
.villa-card:focus-visible .villa-card__arrow-icon {
	transform: none;
}

.villa-card:focus-visible {
	box-shadow: 0 0 0 3px #f7f4fd, 0 0 0 5px #9a74e6;
}

/* Gallery strip inside the photo: thumbnails rise one after another (--i is set per image) */
.villa-card__thumb {
	box-shadow: 0 0 0 1px rgba(255, 255, 255, .35), 0 8px 18px -8px rgba(20, 12, 36, .7);
	opacity: 0;
	transform: translateY(calc(100% + 20px));
	transition: opacity 450ms var(--ease), transform 550ms var(--ease);
	transition-delay: calc(var(--i, 0) * 50ms);
}

.villa-card:hover .villa-card__thumb,
.villa-card:focus-visible .villa-card__thumb {
	opacity: 1;
	transform: none;
	transition-delay: calc(120ms + var(--i, 0) * 60ms);
}

/* Spotlight: dim the other villas while one is active (mouse devices only) */
@media (hover: hover) {
	.villa-grid:has(.villa-card:hover) .villa-card:not(:hover),
	.villa-grid:has(.villa-card:focus-visible) .villa-card:not(:focus-visible) {
		opacity: .55;
	}
}

/* Touch devices: no hover, so show the details drawer and gallery at rest */
@media (hover: none) {
	.villa-card__shade,
	.villa-card__drawer,
	.villa-card__thumb {
		opacity: 1;
		transform: none;
	}
}

/* Reduced motion: keep the dimming and fades, drop zoom, slide and scale */
@media (prefers-reduced-motion: reduce) {
	.villa-card__img,
	.villa-card__drawer,
	.villa-card__num,
	.villa-card__arrow-icon,
	.villa-card__thumb,
	.villa-card:hover .villa-card__thumb,
	.villa-card:hover .villa-card__img,
	.villa-card:hover .villa-card__num,
	.villa-card:focus-visible .villa-card__img,
	.villa-card:focus-visible .villa-card__num {
		transform: none;
	}
}

/* Video tour cover: fades away once the film starts */
.video-tour__overlay {
	transition: opacity 500ms ease, visibility 0s linear 0s;
}

.video-tour.is-started .video-tour__overlay {
	opacity: 0;
	visibility: hidden;
	transition: opacity 500ms ease, visibility 0s linear 500ms;
}

/* Little luxuries row: sits over the cover on large screens and slides down out of the video on play */
@media (min-width: 1024px) {
	.video-tour__luxuries {
		transition: transform 800ms cubic-bezier(.65, 0, .35, 1), visibility 0s linear 0s;
	}

	.video-tour.is-started .video-tour__luxuries {
		transform: translateY(100%);
		visibility: hidden;
		transition: transform 800ms cubic-bezier(.65, 0, .35, 1), visibility 0s linear 800ms;
	}

	@media (prefers-reduced-motion: reduce) {
		.video-tour__luxuries,
		.video-tour.is-started .video-tour__luxuries {
			transition: none;
		}
	}

	/* Lift the play button so it clears the row */
	.video-tour [data-video-play] {
		top: 36%;
	}
}

/* Branded control bar */
.video-tour__controls {
	opacity: 0;
	transform: translateY(10px);
	pointer-events: none;
	transition: opacity 400ms ease, transform 400ms ease;
}

.video-tour.is-started .video-tour__controls {
	opacity: 1;
	transform: none;
	pointer-events: auto;
}

/* Tuck the bar away while the film plays untouched */
.video-tour.is-started.is-playing.is-idle .video-tour__controls {
	opacity: 0;
	transform: translateY(10px);
	pointer-events: none;
}

.video-tour.is-started.is-playing.is-idle {
	cursor: none;
}

.video-tour__btn {
	transition: transform 250ms ease, color 250ms ease, background-color 250ms ease;
}

.video-tour__btn:hover {
	transform: scale(1.08);
}

.video-tour__btn:focus-visible,
.video-tour__range:focus-visible {
	outline: 2px solid #cdb8f7;
	outline-offset: 3px;
}

/* Full screen: fill the screen instead of keeping the rounded card */
.video-tour:fullscreen {
	border-radius: 0;
	max-width: none;
}

/* Lavender range sliders — --fill is set from main.js */
.video-tour__range {
	--fill: 0%;
	appearance: none;
	-webkit-appearance: none;
	height: 18px;
	background: transparent;
	cursor: pointer;
}

.video-tour__range::-webkit-slider-runnable-track {
	height: 4px;
	border-radius: 999px;
	background: linear-gradient(to right, #cdb8f7 var(--fill), rgba(255, 255, 255, .25) var(--fill));
}

.video-tour__range::-moz-range-track {
	height: 4px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .25);
}

.video-tour__range::-moz-range-progress {
	height: 4px;
	border-radius: 999px;
	background: #cdb8f7;
}

.video-tour__range::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 14px;
	height: 14px;
	margin-top: -5px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 0 0 3px rgba(205, 184, 247, .55);
	transition: transform 200ms ease;
}

.video-tour__range::-moz-range-thumb {
	width: 14px;
	height: 14px;
	border: 0;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 0 0 3px rgba(205, 184, 247, .55);
}

.video-tour__range:hover::-webkit-slider-thumb {
	transform: scale(1.2);
}

@media (prefers-reduced-motion: reduce) {
	.video-tour__controls,
	.video-tour.is-started.is-playing.is-idle .video-tour__controls {
		transform: none;
	}
}

/* Film stamp badge: text ring turns slowly */
.film-stamp__ring {
	animation: film-stamp-spin 24s linear infinite;
	filter: drop-shadow(0 12px 24px rgba(31, 23, 51, .35));
}

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

@media (prefers-reduced-motion: reduce) {
	.film-stamp__ring {
		animation: none;
	}
}

/* Testimonials: slides stack in one grid cell and crossfade */
.review-slide {
	opacity: 0;
	transform: translateY(12px);
	visibility: hidden;
	transition: opacity 700ms ease, transform 700ms ease, visibility 0s linear 700ms;
}

.review-slide.is-active {
	opacity: 1;
	transform: none;
	visibility: visible;
	transition-delay: 150ms, 150ms, 0s;
}

/* Progress ring: draws around the active villa photo over --review-time, then JS moves on */
.review-ring__track {
	stroke: rgba(154, 116, 230, .25);
	opacity: 0;
	transition: opacity 400ms ease;
}

.review-ring__fill {
	stroke: #7c55cc;
	stroke-linecap: round;
	stroke-dasharray: 100;
	stroke-dashoffset: 100;
}

.review-bar.is-active .review-ring__track {
	opacity: 1;
}

.review-bar.is-active .review-ring__fill {
	animation: review-ring var(--review-time, 7s) linear forwards;
}

[data-review-slider].is-paused .review-bar.is-active .review-ring__fill {
	animation-play-state: paused;
}

@keyframes review-ring {
	from { stroke-dashoffset: 100; }
	to { stroke-dashoffset: 0; }
}

/* Villa photo picker: inactive photos rest small and soft, the active one lifts */
.review-avatar__img {
	opacity: .55;
	transform: scale(.82);
	transition: opacity 400ms ease, transform 400ms ease, box-shadow 400ms ease;
}

.review-avatar:hover .review-avatar__img {
	opacity: .85;
}

.review-avatar.is-active .review-avatar__img {
	opacity: 1;
	transform: none;
	box-shadow: 0 12px 24px -10px rgba(44, 33, 68, .5);
}

.review-avatar:focus-visible {
	outline: 2px solid #2c2144;
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.review-slide {
		transform: none;
	}

	.review-bar.is-active .review-ring__fill {
		animation: none;
		stroke-dashoffset: 0;
	}
}

/* Booking dropdowns: dark plum list with light text to match the card */
#booking select {
	color-scheme: dark;
}

#booking select option {
	background-color: #2c2144;
	color: #fff;
}

#booking select option:checked {
	background-color: #4a3870;
}

/* Villa gallery (left column of the villa page): a tall block with a pinned
   stage; JS moves the tiles scattered → grid → stacked as you scroll */
.scroll-gallery {
	--tile-gap: 14px;
	--tile-h: min(280px, calc((100vh - 220px) / 3));
	--tile-w: calc(var(--tile-h) * 0.883);
	position: relative;
}

.scroll-gallery__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
	margin-top: 32px;
}

.scroll-gallery__tile {
	aspect-ratio: 265 / 300;
	overflow: hidden;
	border-radius: 22px;
	box-shadow: 0 24px 48px -28px rgba(31, 23, 51, .55);
	will-change: transform;
}

/* Pinned scroll animation on larger screens (skipped for reduced motion) */
@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
	.scroll-gallery {
		height: 300vh;
	}

	.scroll-gallery__stage {
		position: sticky;
		top: 0;
		display: flex;
		height: 100vh;
		flex-direction: column;
		justify-content: center;
		overflow: hidden;
	}

	.scroll-gallery__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: var(--tile-gap);
		/* fit the column, but never taller than the viewport allows */
		max-width: calc(var(--tile-w) * 4 + var(--tile-gap) * 3);
		margin-top: 20px;
		/* room for the scattered layout's extra row */
		padding-block: calc((var(--tile-h) + var(--tile-gap)) / 2);
	}

	.scroll-gallery__tile {
		border-radius: 26px;
	}

	/* the bottom row slides over the top row when stacked */
	.scroll-gallery__tile[data-row="1"] {
		position: relative;
		z-index: 1;
	}
}

/* Date picker (flatpickr) — Violet Ridge theme */
.flatpickr-calendar {
	border: 0;
	border-radius: 20px;
	padding: 10px 10px 12px;
	box-sizing: content-box;
	background: #fff;
	font-family: Mulish, system-ui, sans-serif;
	box-shadow: 0 0 0 1px rgba(205, 184, 247, .7), 0 30px 60px -20px rgba(31, 23, 51, .45);
}

.flatpickr-calendar::before,
.flatpickr-calendar::after {
	display: none; /* hide the little pointer arrow */
}

.flatpickr-months {
	align-items: center;
	padding: 4px 0 10px;
}

.flatpickr-months .flatpickr-month {
	height: 40px;
	color: #1f1733;
	fill: #1f1733;
}

.flatpickr-current-month {
	padding-top: 6px;
	font-family: Gloock, Georgia, serif;
	font-size: 20px;
}

.flatpickr-current-month .cur-month,
.flatpickr-current-month input.cur-year {
	font-weight: 400;
}

.flatpickr-current-month input.cur-year {
	font-family: inherit;
}

.flatpickr-current-month .numInputWrapper span {
	display: none; /* no year spinner arrows */
}

.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
	top: 16px;
	display: grid;
	width: 34px;
	height: 34px;
	padding: 0;
	place-items: center;
	border-radius: 999px;
	color: #7c55cc;
	font-size: 12px;
	transition: background-color 200ms ease, color 200ms ease;
}

.flatpickr-months .flatpickr-prev-month { left: 12px; }
.flatpickr-months .flatpickr-next-month { right: 12px; }

.flatpickr-months .flatpickr-prev-month:hover,
.flatpickr-months .flatpickr-next-month:hover {
	background: #efe9fb;
	color: #2c2144;
}

.flatpickr-months .flatpickr-prev-month.flatpickr-disabled {
	opacity: .3;
}

span.flatpickr-weekday {
	color: #9a74e6;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.flatpickr-day {
	border: 1px solid transparent;
	border-radius: 999px;
	color: #1f1733;
	font-weight: 500;
	transition: background-color 150ms ease, color 150ms ease;
}

.flatpickr-day:hover,
.flatpickr-day:focus {
	border-color: transparent;
	background: #efe9fb;
}

.flatpickr-day.today {
	border-color: #cdb8f7;
}

.flatpickr-day.today:hover {
	background: #efe9fb;
	color: #1f1733;
}

.flatpickr-day.selected,
.flatpickr-day.selected:hover,
.flatpickr-day.selected:focus {
	border-color: #2c2144;
	background: #2c2144;
	color: #fff;
}

.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
	color: rgba(31, 23, 51, .3);
}

.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover {
	background: none;
	color: rgba(31, 23, 51, .2);
}