:root {
	--gold: oklch(0.82 0.15 85);
	--gold-soft: oklch(0.9 0.09 88);
	--gradient-cosmic:
		radial-gradient(ellipse at 20% 10%, oklch(0.42 0.15 145 / 0.55), transparent 55%),
		radial-gradient(ellipse at 80% 15%, oklch(0.32 0.14 160 / 0.6), transparent 65%),
		radial-gradient(ellipse at 50% 90%, oklch(0.24 0.13 165 / 0.5), transparent 65%),
		linear-gradient(180deg, oklch(0.07 0.03 150) 0%, oklch(0.1 0.05 160) 100%);
	--gradient-gold: linear-gradient(135deg, oklch(0.9 0.12 88), oklch(0.75 0.16 60));
	--gradient-aurora: linear-gradient(120deg, oklch(0.62 0.18 138), oklch(0.5 0.13 155), oklch(0.72 0.16 165));
	--shadow-glow-gold: 0 0 40px oklch(0.82 0.15 85 / 0.35), 0 0 80px oklch(0.82 0.15 85 / 0.15);
	--shadow-glow-emerald: 0 0 40px oklch(0.72 0.16 165 / 0.35);
	--shadow-glow-royal: 0 0 60px oklch(0.42 0.19 138 / 0.45);
	--shadow-glass: 0 8px 32px 0 oklch(0.05 0.05 155 / 0.6), inset 0 1px 0 0 oklch(1 0 0 / 0.08);
	--sb-label: var(--gold-soft);
}

html {
	scroll-behavior: smooth;
	scrollbar-width: thin;
	scrollbar-color: oklch(0.82 0.15 85 / 0.45) oklch(0.1 0.05 155);
}

body {
	background: var(--gradient-cosmic);
	background-attachment: fixed;
	color: oklch(0.96 0.02 90);
	font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
	font-family: 'Cinzel', serif;
	letter-spacing: 0.02em;
}

::selection {
	background: oklch(0.82 0.15 85 / 0.3);
	color: oklch(0.98 0.02 90);
}

::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: oklch(0.1 0.05 155); }
::-webkit-scrollbar-thumb {
	background: oklch(0.82 0.15 85 / 0.45);
	border-radius: 999px;
	border: 3px solid oklch(0.1 0.05 155);
}
::-webkit-scrollbar-thumb:hover { background: oklch(0.82 0.15 85 / 0.7); }

.themed-scroll { scrollbar-width: thin; scrollbar-color: oklch(0.82 0.15 85 / 0.35) transparent; }
.themed-scroll::-webkit-scrollbar { width: 8px; }
.themed-scroll::-webkit-scrollbar-track { background: transparent; }
.themed-scroll::-webkit-scrollbar-thumb { background: oklch(0.82 0.15 85 / 0.35); border-radius: 999px; }
.themed-scroll::-webkit-scrollbar-thumb:hover { background: oklch(0.82 0.15 85 / 0.55); }

section[id] { scroll-margin-top: 6rem; }

.glass {
	background: linear-gradient(135deg, oklch(1 0 0 / 0.06), oklch(1 0 0 / 0.02));
	backdrop-filter: blur(18px) saturate(140%);
	-webkit-backdrop-filter: blur(18px) saturate(140%);
	border: 1px solid oklch(1 0 0 / 0.1);
	box-shadow: var(--shadow-glass);
}

.glass-strong {
	background: linear-gradient(135deg, oklch(0.2 0.09 155 / 0.7), oklch(0.14 0.07 155 / 0.55));
	backdrop-filter: blur(24px) saturate(160%);
	-webkit-backdrop-filter: blur(24px) saturate(160%);
	border: 1px solid oklch(0.85 0.05 90 / 0.18);
	box-shadow: var(--shadow-glass);
}

.text-gradient-gold {
	background: var(--gradient-gold);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.text-gradient-aurora {
	background: var(--gradient-aurora);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.glow-gold { box-shadow: var(--shadow-glow-gold); }
.glow-emerald { box-shadow: var(--shadow-glow-emerald); }
.glow-royal { box-shadow: var(--shadow-glow-royal); }

/* Tailwind's CDN/JIT only generates hover: variants for utilities it recognizes natively —
   these are custom classes, so the hover/group-hover versions must be written explicitly. */
.hover\:glow-gold:hover, .group:hover .group-hover\:glow-gold { box-shadow: var(--shadow-glow-gold); }
.hover\:glow-emerald:hover, .group:hover .group-hover\:glow-emerald { box-shadow: var(--shadow-glow-emerald); }
.hover\:glow-royal:hover, .group:hover .group-hover\:glow-royal { box-shadow: var(--shadow-glow-royal); }

.bg-cosmic { background: var(--gradient-cosmic); }
.grad-gold { background-image: var(--gradient-gold); }

.star {
	position: absolute;
	border-radius: 9999px;
	top: var(--t);
	left: var(--l);
	width: var(--s);
	height: var(--s);
	background: var(--c);
	box-shadow: 0 0 calc(var(--s) * 3) var(--c);
	animation: twinkle var(--dur) ease-in-out infinite;
	animation-delay: var(--d);
}

.particle {
	position: absolute;
	height: 6px;
	width: 6px;
	border-radius: 9999px;
	left: var(--l);
	bottom: -10px;
	background: oklch(0.9 0.13 88);
	box-shadow: 0 0 12px oklch(0.9 0.13 88 / 0.8);
	animation: float-y var(--dur) ease-in-out var(--d) infinite, fade-in 2s ease-out both;
}

.avatar-badge { background: linear-gradient(135deg, var(--from), var(--to)); }

.testimonial-swiper { position: relative; }
.testimonial-swiper .swiper-slide { height: 100%; }
.testimonial-pagination { position: static; }
.testimonial-pagination .swiper-pagination-bullet {
	width: 0.5rem;
	height: 0.375rem;
	border-radius: 9999px;
	margin: 0 !important;
	background: oklch(1 0 0 / 0.2);
	opacity: 1;
	transition: all 0.3s;
}
.testimonial-pagination .swiper-pagination-bullet:hover { background: oklch(1 0 0 / 0.4); }
.testimonial-pagination .swiper-pagination-bullet-active {
	width: 2rem;
	background: oklch(0.9 0.13 88);
	box-shadow: var(--shadow-glow-gold);
}

@keyframes twinkle {
	0%, 100% { opacity: 0.2; transform: scale(1); }
	50% { opacity: 1; transform: scale(1.3); }
}
@keyframes drift-slow {
	0% { transform: translate3d(0, 0, 0); }
	50% { transform: translate3d(30px, -20px, 0); }
	100% { transform: translate3d(0, 0, 0); }
}
@keyframes float-y {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-14px); }
}
@keyframes orbit-rotate {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}
@keyframes pulse-glow {
	0%, 100% { box-shadow: 0 0 20px oklch(0.82 0.15 85 / 0.3), 0 0 40px oklch(0.82 0.15 85 / 0.15); }
	50% { box-shadow: 0 0 40px oklch(0.82 0.15 85 / 0.55), 0 0 80px oklch(0.82 0.15 85 / 0.3); }
}
@keyframes fade-up {
	from { opacity: 0; transform: translateY(24px); }
	to { opacity: 1; transform: translateY(0); }
}
@keyframes fade-in {
	from { opacity: 0; }
	to { opacity: 1; }
}

.animate-twinkle { animation: twinkle 4s ease-in-out infinite; }
.animate-drift { animation: drift-slow 18s ease-in-out infinite; }
.animate-float { animation: float-y 6s ease-in-out infinite; }
.animate-orbit { animation: orbit-rotate 60s linear infinite; }
.animate-pulse-glow { animation: pulse-glow 4s ease-in-out infinite; }
.animate-fade-up { animation: fade-up 0.9s ease-out both; }
.animate-fade-in-slow { animation: fade-in 1.6s ease-out both; }

button, a { cursor: pointer; }

/* Prevents a horizontal scrollbar from ever appearing at the page or modal level —
   a handful of the original decorative elements (hero glow blobs, absolutely
   positioned zodiac glyphs) are wider than the viewport by design. */
html, body { max-width: 100%; overflow-x: hidden; }
*, *::before, *::after { box-sizing: border-box; }

/* ---------- Header: logo + menus (Appearance -> Customize / Appearance -> Menus) ---------- */
.tow-logo .custom-logo { max-height: 2.25rem; width: auto; display: block; }

.primary-menu {
	display: flex;
	align-items: center;
	gap: 0.25rem;
	list-style: none;
	margin: 0;
	padding: 0;
}
.primary-menu a {
	display: block;
	border-radius: 999px;
	padding: 0.5rem 0.75rem;
	font-size: 0.875rem;
	color: oklch(0.9 0.03 90 / 0.8);
	text-decoration: none;
	transition: background-color 0.2s, color 0.2s;
}
.primary-menu a:hover {
	background: oklch(1 0 0 / 0.05);
	color: oklch(0.95 0.1 88);
}

.mobile-menu-list {
	display: flex;
	flex-direction: column;
	list-style: none;
	margin: 0;
	padding: 0;
}
.mobile-menu-list a {
	display: block;
	border-radius: 0.75rem;
	padding: 0.75rem 1rem;
	font-size: 0.875rem;
	color: oklch(0.92 0.03 90);
	text-decoration: none;
}
.mobile-menu-list a:hover { background: oklch(1 0 0 / 0.05); }

/* ---------- Footer: nav + social icons managed dynamically ---------- */
.footer-menu {
	margin: 1rem 0 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}
.footer-menu a {
	color: oklch(0.9 0.03 90 / 0.8);
	text-decoration: none;
	font-size: 0.875rem;
}
.footer-menu a:hover { color: oklch(0.95 0.1 88); }

.footer-social {
	display: flex;
	gap: 0.75rem;
	margin-top: 1.5rem;
}
.footer-social a {
	display: grid;
	place-items: center;
	height: 2.5rem;
	width: 2.5rem;
	border-radius: 999px;
	color: oklch(0.9 0.09 88);
	transition: box-shadow 0.2s;
}
.footer-social a:hover { box-shadow: 0 0 40px oklch(0.82 0.15 85 / 0.35), 0 0 80px oklch(0.82 0.15 85 / 0.15); }
.footer-social svg { height: 1rem; width: 1rem; }

.footer-contact {
	margin: 1rem 0 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	font-size: 0.875rem;
	color: oklch(0.9 0.03 90 / 0.8);
}
.footer-contact li { display: flex; align-items: center; gap: 0.5rem; }
.footer-contact a { color: inherit; text-decoration: none; }
.footer-contact a:hover { color: oklch(0.95 0.1 88); }

/* Shared booking modal — the panel markup for whichever form was opened is moved
   into #sb-modal-content by assets/js/global.js and moved back on close. It sits
   outside #smooth-wrapper so position:fixed isn't broken by ScrollSmoother's transform. */
.sb-modal-overlay {
	position: fixed;
	inset: 0;
	z-index: 100;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
	background: oklch(0 0 0 / 0.75);
	backdrop-filter: blur(4px);
	overflow: hidden;
}
.sb-modal-overlay[hidden] { display: none; }

.sb-modal-box {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 42rem;
	/* A definite height (not just max-height) is required so the flex:1 children below
	   (#sb-modal-content -> .sb-panel -> .sb-form-shell -> form/footer) can reliably size
	   themselves and produce the fixed-header / scrolling-body / fixed-footer split —
	   with only max-height, browsers may size the box to its (taller) content instead
	   and the "sticky" regions stop being sticky. */
	height: min(85vh, 44rem);
	max-height: 85vh;
	overflow: hidden;
	border-radius: 1.5rem;
}

.sb-modal-close {
	position: absolute;
	top: 1.1rem;
	right: 1.1rem;
	z-index: 2;
	border: none;
	background: transparent;
	color: oklch(0.9 0.03 90 / 0.7);
	cursor: pointer;
}
.sb-modal-close:hover { color: oklch(0.95 0.1 88); }

/* #sb-modal-content holds exactly one .sb-panel at a time and must itself be a
   flex column filling the box so the panel's own header/scroll-body/footer split works. */
#sb-modal-content {
	flex: 1 1 auto;
	min-height: 0;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.sb-panel {
	display: flex;
	flex-direction: column;
	min-height: 0;
	flex: 1 1 auto;
	overflow: hidden;
}
.sb-panel-header {
	flex: 0 0 auto;
	padding: 1.75rem 2.5rem 1rem 1.75rem;
	border-bottom: 1px solid oklch(1 0 0 / 0.08);
}
@media (min-width: 640px) {
	.sb-panel-header { padding: 2rem 3rem 1.25rem 2rem; }
}

/* The plugin's .sb-form-shell fills the rest of .sb-panel; its own CSS (sb-frontend.css)
   handles the scrollable form vs. sticky footer split. This just adds the box's padding. */
.sb-panel > .sb-form-shell {
	flex: 1 1 auto;
	min-height: 0;
	padding: 1.25rem 1.75rem 1.5rem;
}
@media (min-width: 640px) {
	.sb-panel > .sb-form-shell { padding: 1.5rem 2rem 1.75rem; }
}

body.sb-modal-open { overflow: hidden; }