@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('/fonts/montserrat-300.woff2') format('woff2');
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/montserrat-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/montserrat-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/montserrat-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/montserrat-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/opensans-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/roboto-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/roboto-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Sacramento';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/sacramento-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/playfair-display-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/playfair-display-400i.woff2') format('woff2');
}

:root {
  --h1-size: 29px;
  --bg: hsl(45 44% 97%);
  --fg: hsl(0 0% 26%);
  --card: hsl(55 38% 94%);
  --primary: hsl(151 20% 30%);
  --primary-glow: hsl(151 20% 40%);
  --primary-fg: white;
  --secondary: hsl(84 14% 86%);
  --muted: hsl(0 0% 35%);
  --border: hsl(0 0% 82%);
  --cream: rgb(242 242 235);
  --section-bg: rgb(238 238 233);
  --footer-bg: rgb(39 64 53);
  --map-bg: rgb(251 249 245);
  --gold: #d4af37;
  --ei-current: hsl(182 50% 40%);
  --ei-opt1: hsl(151 50% 40%);
  --ei-opt2: hsl(30 50% 40%);
  --radius: .75rem;
  --transition: all .4s cubic-bezier(.25,.46,.45,.94);
  --ease-standard: cubic-bezier(.4, 0, .2, 1);
  --ease-bouncy: cubic-bezier(.34, 1.56, .64, 1);
  --glass-bg: rgb(255 255 255 / .1);
  --glass-border: rgb(255 255 255 / .15);
  --glass-overlay: rgb(255 255 255 / .15);
  --white-08: rgb(255 255 255 / .08);
  --white-10: rgb(255 255 255 / .1);
  --white-12: rgb(255 255 255 / .12);
  --white-20: rgb(255 255 255 / .2);
  --white-25: rgb(255 255 255 / .25);
  --white-30: rgb(255 255 255 / .3);
  --white-40: rgb(255 255 255 / .4);
  --white-50: rgb(255 255 255 / .5);
  --white-70: rgb(255 255 255 / .7);
  --white-80: rgb(255 255 255 / .8);
  --white-90: rgb(255 255 255 / .9);
  --white-95: rgb(255 255 255 / .95);
  --green: #4CAF50;
  --shadow-md: 0 10px 15px -3px rgb(0 0 0 / .1);
  --shadow-lg: 0 20px 25px -5px rgb(0 0 0 / .1);
  --blur-md: blur(12px);
  accent-color: var(--green);
}

@media (min-width: 500px) { :root { --h1-size: 36px; } }
@media (min-width: 768px) { :root { --h1-size: 55px; } }
@media (min-width: 1000px) { :root { --h1-size: 70px; } }
@media (min-width: 1400px) { :root { --h1-size: 96px; } }

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--footer-bg); overflow-x: hidden; }

body {
  font-family: Montserrat, sans-serif;
  line-height: 1.625;
  color: var(--fg);
  background: var(--bg);
  min-height: 100vh;
  min-height: 100svh;
  overflow-x: hidden;
  width: 100%;
}
html:has(dialog[open]), body:has(dialog[open]) { overflow: hidden; overscroll-behavior: none; }

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; }
button, .btn, .tab, .filter-btn, .nav-link, .review-nav, .review-dot, .gallery-item, .sleep-card, .faq-trigger, .lightbox-nav, .lightbox-close, .counter-btn, .date-btn, .escape-now-btn, .video-card, .video-mute-btn, .video-dot, .video-nav, .logo, a, .modal-close, .map-modal-close, .messenger-btn, .messenger-mobile, .btn-reserve, .mobile-menu-btn, .faq-sidebar-btn, .swipe-prev, .swipe-next, .rules-link, .coupon-toggle, .coupon-apply, .explore-btn, .location-list-item, .map-fullscreen-btn { user-select: none; -webkit-user-select: none; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
ul, ol { list-style: none; }
h1, h2, h3, h4, h5, h6 { font-family: Montserrat, sans-serif; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; top: -100px; left: 50%; transform: translateX(-50%); background: var(--primary); color: white; padding: 12px 24px; border-radius: 0 0 8px 8px; font-weight: 600; z-index: 10000; text-decoration: none; transition: top .2s; &:focus { top: 0; outline: 3px solid var(--gold); outline-offset: 2px; } }

:focus { outline: 2px solid #1a73e8; outline-offset: 2px; }
:focus:not(:focus-visible) { outline: none; }
:focus-visible { outline: 2px solid #1a73e8; outline-offset: 2px; }
button:focus-visible, .btn:focus-visible, a:focus-visible { outline: 2px solid #1a73e8; outline-offset: 2px; }
.nav-link:focus-visible, .faq-trigger:focus-visible, .review-nav:focus-visible, .review-dot:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.lightbox-nav:focus-visible, .lightbox-close:focus-visible { outline: 2px solid white; outline-offset: 2px; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid #1a73e8; outline-offset: -2px; }
.modal-close:focus-visible, .map-modal-close:focus-visible { outline: 2px solid #1a73e8; outline-offset: 2px; }

.gold-gradient {
  background: linear-gradient(135deg, var(--primary), var(--primary-glow), var(--primary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.container { max-width: 72rem; margin: 0 auto; }
.container-lg { max-width: 80rem; }
.container-sm { max-width: 56rem; }

section[id] { scroll-margin-top: 80px; }
.section { padding: 1.5rem .75rem; background: var(--bg); @media (min-width: 640px) { padding: 2.5rem 1.5rem; } @media (min-width: 768px) { padding: 2.5rem 1.5rem; } }
.about-section.section { @media (min-width: 768px) { padding: 4rem 1.5rem; } }
.gallery-section.section { @media (min-width: 768px) { padding: 2.5rem 1.5rem 2rem; } }
.reviews-section.section { @media (min-width: 768px) { padding: 2.5rem 1.5rem; } }
#where-youll-sleep.section { @media (min-width: 768px) { padding: 2.5rem 1.5rem 3rem; } }
.amenities-section.section { @media (min-width: 768px) { padding: 2.5rem 1.5rem 2.5rem; } }
.location-section.section { padding: 2rem .75rem 2.75rem; @media (min-width: 640px) { padding: 2.5rem 1.5rem 3.5rem; } @media (min-width: 768px) { padding: 3rem 1.5rem 4.25rem; } @media (min-width: 1024px) { padding-top: 3.5rem; padding-bottom: 5rem; } }
.faq-section.section { @media (min-width: 768px) { padding: 2rem 1.5rem 3rem; } }
.book-cta.section { @media (min-width: 768px) { padding: 3rem 1.5rem; } }
.section-header { text-align: center; margin-bottom: 1.5rem; @media (min-width: 640px) { margin-bottom: 2rem; } @media (min-width: 768px) { margin-bottom: 3rem; } }
.section-title { font-size: 1.375rem; font-weight: 700; line-height: 1.2; margin-bottom: .5rem; @media (min-width: 640px) { font-size: 1.5rem; margin-bottom: .75rem; } @media (min-width: 768px) { font-size: 1.875rem; margin-bottom: 1rem; } @media (min-width: 1024px) { font-size: 2.25rem; line-height: 1.11; } }
.mobile-split-heading span { display: inline; }
.mobile-split-heading span + span { margin-left: .35em; }
@media (max-width: 639px) {
  .mobile-split-heading span { display: block; }
  .mobile-split-heading span + span { margin-left: 0; }
}
.section-subtitle { font-size: 1rem; color: var(--muted); line-height: 1.625; max-width: 56rem; margin: 0 auto; padding: 0 .5rem; @media (min-width: 768px) { font-size: 1.125rem; } }
.narrow-section { max-width: 710px; }
.text-center { text-align: center; }
.mt-2 { margin-top: .5rem; }
.mt-6 { margin-top: 1.5rem; }
.mt-8 { margin-top: 2rem; }

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .375rem 1rem;
  border-radius: 9999px;
  font-weight: 400;
  line-height: 1.5;
  overflow: hidden;
  transition: background .15s, border-color .15s, color .15s, transform .15s, box-shadow .15s;
  &:hover { text-decoration: none; }
}

.btn-shine {
  position: absolute;
  inset: 0;
  transform: translateX(-100%) skewX(12deg);
  background: linear-gradient(to right, transparent, var(--white-30), transparent);
  transition: transform 1s;
}
.btn:hover .btn-shine { transform: translateX(100%) skewX(12deg); }

.btn-primary {
  padding: .5rem 1.5rem;
  background: linear-gradient(to bottom right, var(--primary), var(--primary), hsl(151 20% 30% / .8));
  color: var(--primary-fg);
  box-shadow: var(--shadow-md);
  &:hover { background: linear-gradient(to bottom right, hsl(151 20% 30% / .9), hsl(151 20% 30% / .9), hsl(151 20% 30% / .7)); }
  @media (min-width: 640px) { margin-top: 1.5rem; padding: .625rem 2.5rem; }
}

.btn-outline {
  padding: .5rem 1rem;
  border: 2px solid rgb(255 255 255 / .2);
  background: linear-gradient(to bottom right, white, white, #f3f4f6);
  color: var(--fg);
  font-weight: 500;
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(4px);
  svg { width: 1rem; height: 1rem; }
  &:hover { border-color: var(--primary); }
  @media (min-width: 640px) { padding: .625rem 1.5rem; font-size: .875rem; }
}

.btn-glass {
  padding: .5rem 1rem;
  background: var(--white-25);
  backdrop-filter: var(--blur-md);
  -webkit-backdrop-filter: var(--blur-md);
  border: 1px solid var(--white-30);
  color: white;
  box-shadow: 0 8px 30px rgb(0 0 0 / .3);
  &:hover { background: rgb(255 255 255 / .35); border-color: rgb(255 255 255 / .5); }
  @media (min-width: 640px) { padding: .75rem 1.5rem; }
}

.btn-lg {
  display: inline-block;
  padding: 1rem 2.25rem;
  background: var(--primary);
  color: var(--primary-fg);
  border-radius: 9999px;
  box-shadow: var(--shadow-md);
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.5;
  transition: box-shadow .3s, transform .3s;
  &:hover { box-shadow: var(--shadow-lg); transform: scale(1.05); }
  @media (min-width: 640px) { padding: .75rem 2rem; }
}

.header, .page-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  transition: .5s var(--ease-standard);
  transform: translateZ(0);
  backface-visibility: hidden;
}

.header {
  transition: .5s var(--ease-standard);
  &.scrolled { background: rgb(255 255 255 / .05); backdrop-filter: var(--blur-md); -webkit-backdrop-filter: var(--blur-md); box-shadow: 0 4px 6px -1px rgb(0 0 0 / .1); }
  &.nav-hidden { transform: translateY(-100%); opacity: 0; pointer-events: none; }
}

.header-inner { display: flex; align-items: center; justify-content: space-between; padding: 0 5px; margin: 0 5px; position: relative; z-index: 2; @media (max-width: 639px) { margin: 0; } }

.header:has(.mobile-menu.open), .header.menu-open { height: 100vh; height: 100svh; opacity: 1; pointer-events: auto; transform: translateY(0) translateZ(0); transition: none; }

.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 5px;
  transition: background .4s, backdrop-filter .4s;
  &.scrolled { background: rgb(255 255 255 / .05); backdrop-filter: var(--blur-md); -webkit-backdrop-filter: var(--blur-md); }
  &.scrolled-dark { background: rgb(255 255 255 / .95); backdrop-filter: var(--blur-md); -webkit-backdrop-filter: var(--blur-md); box-shadow: 0 4px 6px -1px rgb(0 0 0 / .1); }
  .logo-wrap { &:hover .logo { transform: translateY(var(--logo-hover-y, 16%)) scale(1.4); } @media (min-width: 640px) { &:hover .logo { transform: translateY(calc(var(--logo-hover-y, 16%) - 1%)) scale(1.35); } } }
  &.scrolled-dark .logo { filter: none; }
  .back-btn { display: none; align-items: center; gap: .5rem; padding: .5rem 1rem; color: var(--white-80); font-size: .875rem; font-weight: 500; border-radius: .375rem; transition: all .2s; svg { width: 1rem; height: 1rem; } &:hover { color: white; background: var(--white-15); } }
  &.scrolled-dark .back-btn { color: var(--muted); &:hover { color: var(--primary); background: rgb(0 0 0 / .05); } }
  .book-btn { display: none; padding: .625rem 1.5rem; background: var(--white-25); border: 1px solid var(--white-30); color: white; border-radius: 9999px; font-size: .875rem; font-weight: 500; margin-right: 1rem; transition: all .2s; &:hover { background: rgb(255 255 255 / .35); } }
  &.scrolled-dark .book-btn { background: var(--primary); border-color: var(--primary); color: white; &:hover { background: hsl(151 20% 25%); } }
  .mobile-back { padding: .5rem; color: white; transition: color .2s, transform .2s; svg { width: 1.25rem; height: 1.25rem; } &:hover { transform: translateX(-2px); } }
  &.scrolled-dark .mobile-back { color: var(--fg); }
  @media (min-width: 1024px) { .back-btn, .book-btn { display: flex; } .mobile-back { display: none; } }
}

.logo-wrap {
  display: inline-flex;
  align-items: flex-end;
  height: 4rem;
  margin-left: .5rem;
  padding: 5px .5rem;
  overflow: hidden;
  z-index: 10;
  cursor: pointer;
  &:hover .logo { transform: translateY(var(--logo-hover-y, 16%)) scale(1.4); }
  @media (max-width: 639px) { margin-left: 0; padding-left: .25rem; }
  @media (min-width: 640px) { height: 5rem; padding: 5px .7rem; &:hover .logo { transform: translateY(calc(var(--logo-hover-y, 16%) - 1%)) scale(1.35); } }
}
.logo {
  height: 100%;
  width: auto;
  margin: auto;
  filter: brightness(0) invert(1);
  transition: filter .3s, color .3s, transform .3s;
  .scrolled-dark & { filter: none; color: var(--primary); }
}

.nav { display: none; flex: 1; justify-content: center; margin-right: .5rem; @media (min-width: 1024px) { display: flex; } }
.nav-list { display: flex; align-items: center; gap: .5rem; }

.nav-link {
  display: inline-flex;
  align-items: center;
  height: 2.5rem;
  padding: .25rem 1rem;
  font-size: .875rem;
  line-height: 1.43;
  font-weight: 500;
  border-radius: calc(var(--radius) - 2px);
  color: var(--white-80);
  transition: color .15s, background .15s;
  &:hover, &.active { color: var(--primary); background: var(--white-10); }
  .scrolled-dark & { color: var(--muted); &:hover, &.active { color: var(--primary); background: rgb(255 255 255 / 50%); } }
}

.btn-book {
  display: none;
  padding: .5rem 1.5rem !important;
  background: var(--white-25);
  border: 1px solid var(--white-30);
  color: white;
  backdrop-filter: var(--blur-md);
  -webkit-backdrop-filter: var(--blur-md);
  box-shadow: var(--shadow-md);
  margin-right: 0.5rem;
  &:hover { background: rgb(255 255 255 / .35); border-color: rgb(255 255 255 / .5); }
  .scrolled-dark & { background: var(--primary); border-color: var(--primary); &:hover { background: hsl(151 20% 25%); } }
  @media (min-width: 1024px) { display: block; }
}

.mobile-menu-btn {
  display: flex;
  padding: .375rem;
  color: white;
  transition: color .15s;
  svg { width: 1.5rem; height: 1.5rem; }
  .icon-close { display: none; }
  &.open .icon-menu { display: none; }
  &.open .icon-close { display: block; }
  .scrolled-dark & { color: var(--fg); }
  @media (min-width: 1024px) { display: none; }
}

.mobile-menu {
  display: none;
  position: absolute;
  inset: 0;
  height: 100%;
  background: hsl(151 20% 12% / .55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: calc(env(safe-area-inset-top) + var(--header-h, 72px)) 0 max(1.25rem, env(safe-area-inset-bottom));
  touch-action: pan-y;
  overscroll-behavior: contain;
  overflow-y: auto;
  animation: fadeIn .2s;
  &.open { display: flex; flex-direction: column; align-items: center; }
  ul { margin: 0 12px; padding: 1rem; width: min(520px, calc(100% - 24px)); background: hsl(151 20% 30% / .95); backdrop-filter: var(--blur-md); -webkit-backdrop-filter: var(--blur-md); border: 1px solid hsl(151 20% 40% / .3); border-radius: 16px; box-shadow: 0 20px 60px rgb(0 0 0 / .35); }
  .nav-link { display: block; width: 100%; height: auto; text-align: left; padding: .75rem 1rem; border-radius: .375rem; color: var(--white-80); transition: all .15s; &:hover { color: white; background: var(--white-20); } &.active { color: white; background: var(--white-25); font-weight: 600; } }
  .mobile-book { padding-top: 1rem; border-top: 1px solid rgb(255 255 255 / .2); margin-top: .5rem; }
  .mobile-book-row { display: flex; align-items: center; }
  .mobile-book-row:has(.messenger-mobile.visible) .btn-book-mobile { flex: 1; margin-left: 10px; }
  .messenger-mobile { display: none; flex: 0 0 2.25rem; width: 2.25rem; height: 2.25rem; margin: 0 65px 0 1rem; position: relative; background: white url("data:image/svg+xml,%3Csvg viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3CradialGradient id='g' cx='0' cy='0' r='1' gradientUnits='userSpaceOnUse' gradientTransform='rotate(-57 80 25) scale(85)'%3E%3Cstop stop-color='%2309F'/%3E%3Cstop offset='.61' stop-color='%23A033FF'/%3E%3Cstop offset='.94' stop-color='%23FF5280'/%3E%3Cstop offset='1' stop-color='%23FF7061'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cpath fill-rule='evenodd' d='M40 .9C18 .9 1 17 1 38.8c0 11.4 4.7 21.2 12.3 28a3 3 0 011 2.2l.2 7c.1 2.2 2.4 3.7 4.4 2.8l7.8-3.4a3 3 0 012-.2 43 43 0 0012.3 1.5c22 0 39-16.1 39-37.9C79 17 62 .9 40 .9z' fill='url(%23g)'/%3E%3Cpath fill-rule='evenodd' d='M16.5 49.9l11.5-18.2a5.9 5.9 0 018.5-1.6l9.1 6.9a2.3 2.3 0 002.8 0l12.3-9.4c1.7-1.2 3.8.7 2.7 2.5L52 48.3a5.9 5.9 0 01-8.5 1.5l-9.1-6.8a2.3 2.3 0 00-2.8 0l-12.4 9.4c-1.6 1.2-3.8-.7-2.7-2.5z' fill='%23fff'/%3E%3C/svg%3E") center / 67% no-repeat; border-radius: 25%; box-shadow: 0 .4rem .8rem rgb(79 78 78 / .25); &.visible { display: flex; } &::after { content: "Chat\Awith us"; position: absolute; left: 100%; font-size: 13px; width: 50px; line-height: 15px; top: 50%; transform: translateY(-50%); margin-left: 8px; white-space: pre; color: white; } }
  .btn-book-mobile { width: 100%; padding: .75rem 1.5rem; background: var(--white-25); border: 1px solid var(--white-30); color: white; border-radius: 9999px; text-align: center; justify-content: center; }
}

.hero {
  position: relative;
  width: 100%;
  overflow: hidden;
  contain: layout style;
  transition: height .4s var(--ease-standard);
  &.winter-mode { --hero-summer-opacity: 0; --hero-winter-opacity: 1; .hero-subtitle { text-shadow: 0 0 6px #00000069; font-weight: 400; } }
}

/* CRITICAL: Hero height controls "Book Now" visibility. If too short, form gets cut off. All height rules consolidated here. */
/* iOS 26+ Chrome/Safari viewport fix: use svh (small viewport height) for consistent behavior across all iOS browsers.
   100vh is problematic on iOS because Safari treats it as lvh (large viewport) while Chrome on iOS gets inconsistent calculations.
   svh gives the viewport height with browser UI visible - the "safe" smaller measurement that works everywhere. */
.hero, .page-hero {
  height: calc(100vh - 90px);
  height: calc(100svh - 90px);
  min-height: 550px;
  @media (min-width: 600px) { min-height: 800px; }
}
.hero:has(.calendar-open, .dates-selected, .waitlist-open, .gift-card-open),
.page-hero:has(.calendar-open, .dates-selected, .waitlist-open, .gift-card-open) {
  height: clamp(1050px, calc(100vh - 90px), 3000px);
  height: clamp(1050px, calc(100svh - 90px), 3000px);
}
@media (min-width: 1024px) {
  .hero, .page-hero {
    height: 100vh;
    height: 100svh;
  }
  .hero:has(.calendar-open, .dates-selected, .waitlist-open, .gift-card-open),
  .page-hero:has(.calendar-open, .dates-selected, .waitlist-open, .gift-card-open) {
    height: clamp(calc(1020px + 8vw), 100vh, 3000px);
    height: clamp(calc(1020px + 8vw), 100svh, 3000px);
  }
}
@media (max-width: 1023px) and (max-height: 999px) {
  .hero:has(.calendar-open, .dates-selected, .waitlist-open, .gift-card-open),
  .page-hero:has(.calendar-open, .dates-selected, .waitlist-open, .gift-card-open) {
    height: clamp(1050px, calc(100vh - 90px), 3000px);
    height: clamp(1050px, calc(100svh - 90px), 3000px);
  }
}
@media (max-width: 1023px) and (max-height: 900px) {
  .hero:has(.calendar-open, .dates-selected, .waitlist-open, .gift-card-open),
  .page-hero:has(.calendar-open, .dates-selected, .waitlist-open, .gift-card-open) {
    height: clamp(calc(800px + 8vw), calc(100vh - 90px), 3000px);
    height: clamp(calc(800px + 8vw), calc(100svh - 90px), 3000px);
  }
}
/* End of hero height rules */

.hero-bg {
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  transition: opacity .5s var(--ease-standard);
  z-index: 1;
  will-change: opacity;
  opacity: 0;
  animation: hero-reveal .5s .1s var(--ease-standard) forwards;
  &::after { content: ''; position: absolute; inset: 0; background: rgb(0 0 0 / .15); -webkit-backdrop-filter: saturate(90%) contrast(0.93); backdrop-filter: saturate(90%) contrast(0.93); pointer-events: none; }
}
@keyframes hero-reveal { to { opacity: var(--hero-target-opacity, 1); } }
.hero-bg-summer { --hero-target-opacity: var(--hero-summer-opacity, 1); }
.hero-bg-winter { --hero-target-opacity: var(--hero-winter-opacity, 0); }
.portal-entry .hero-bg { animation: none; opacity: var(--hero-target-opacity, 1); }

.hero-group {
  position: absolute;
  top: 30.5vh;
  top: 30.5svh;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  z-index: 25;
  width: 100%;
  max-width: 1000px;
  padding: 0 20px;
  pointer-events: none;
  transition: transform .4s var(--ease-bouncy);
  display: flex;
  flex-direction: column;
  align-items: center;

  &.calendar-open { transform: translate(-50%, -20vh); transform: translate(-50%, -20svh); .hero-title-wrap { transform: scale(.6); } }

  &.waitlist-open { transform: translate(-50%, -20vh); transform: translate(-50%, -20svh); .hero-title-wrap { transform: scale(.6); } }

  &.gift-card-open { transform: translate(-50%, -20vh); transform: translate(-50%, -20svh); .hero-title-wrap { transform: scale(.6); } }

  &.dates-selected {
    transform: translate(-50%, -31vh);
    transform: translate(-50%, -31svh);
    .hero-title-wrap { transform: scale(.5); }
    :is(.date-calendar-container, #booking-form, #confirmation-section) { transform: translateY(-1vw); transition: transform .4s var(--ease-bouncy); }
  }

  &:is(.calendar-open, .dates-selected, .waitlist-open, .gift-card-open) .hero-subtitle-wrap { grid-template-rows: 0fr; }
  &:is(.calendar-open, .dates-selected) .hero-subtitle { opacity: 0; }
}

.hero-title-wrap {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows .3s ease-out, transform .4s var(--ease-bouncy);
}
.hero-title {
  display: flex;
  font-size: clamp(26px, 5vw, 4.375rem);
  font-weight: 700;
  color: white;
  letter-spacing: -.025em;
  line-height: 1.25;
  max-width: 61vw;
  overflow: visible;
  min-height: 0;
  transition: transform .4s var(--ease-bouncy), opacity .3s;
  transform-origin: center;
  text-wrap: balance;
  br { display: none; @media (min-width: 450px) { display: block; } }
  .mobile-br { @media (min-width: 640px) { display: none; } }
  &:has(.hero-suffix) { position: relative; display: block; }
  .hero-suffix { position: absolute; right: 0; top: 0; transform: translateY(-50%); font-size: 14px; font-weight: 100; letter-spacing: -.5px; }
  &.hero-title--attr { display: block; font-size: clamp(22px, 6.5vw, 2.5rem); max-width: min(92vw, 620px); }
}

.hero-subtitle-wrap {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows .3s ease-out;
}
.hero-subtitle {
  font-size: clamp(1rem, 3vw, 1.5rem);
  color: rgb(255 255 255 / .9);
  font-weight: 300;
  line-height: 1.4;
  max-width: 48rem;
  padding: 0 .5rem;
  overflow: hidden;
  min-height: 0;
  transition: opacity .3s;
  &::before { content: ''; display: block; height: 1rem; }
  &::after { content: ''; display: block; height: 1rem; @media (min-width: 640px) { height: 1.75rem; } }
}

.date-calendar-container { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; z-index: 50; }


.booking-container {
  background: var(--glass-bg);
  backdrop-filter: blur(12px);
  border-radius: 16px;
  padding: 12px;
  margin-top: 15px;
  border: 1px solid var(--glass-border);
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -2px rgb(0 0 0 / .05);
  pointer-events: auto;
  width: 360px;
  max-width: 90vw;
  position: relative;
}

.escape-now-btn {
  flex: 0 0 auto;
  padding: 8px 20px;
  background: var(--cream);
  color: #333;
  border-radius: 9999px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: transform .2s ease-out, opacity .2s ease-out;
  white-space: nowrap;
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / .1);
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 34px;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  &.hiding { display: none; }
  @media (max-width: 767px) { display: none; }
}

.booking-close {
  border: 1px solid var(--white-20);
  background: rgb(0 0 0 / .35);
  color: white;
  border-radius: 9999px;
  width: 32px;
  height: 32px;
  display: none;
  place-items: center;
  cursor: pointer;
  transition: transform .15s ease, background-color .15s ease, color .15s ease, border-color .15s ease;
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / .1);
  margin-left: 12px;
  &:hover { transform: scale(1.05); background: white; color: #111; border-color: transparent; }
  svg { width: 18px; height: 18px; }
}

.date-inputs-row { display: flex; align-items: center; justify-content: center; gap: 0; }

.share-booking {
  background: transparent;
  border: none;
  color: white;
  opacity: .6;
  width: 32px;
  height: 32px;
  display: none;
  place-items: center;
  cursor: pointer;
  position: relative;
  margin-left: 8px;
  pointer-events: auto;
  transition: opacity .2s ease, transform .2s ease;
  &:hover { opacity: 1; transform: rotate(-15deg) scale(1.15); }
  &:active { opacity: 1; transform: rotate(-15deg) scale(1.15); }
  svg { width: 18px; height: 18px; transition: opacity .2s ease, transform .2s ease; }
  .share-check { position: absolute; opacity: 0; transform: scale(0); color: #4ade80; }
  .share-tooltip {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: rgb(0 0 0 / .85);
    color: white;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 12px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease, transform .2s ease;
    &::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 5px solid transparent; border-top-color: rgb(0 0 0 / .85); }
    @media (max-width: 767px) {
      bottom: auto;
      top: calc(100% + 8px);
      max-width: min(90vw, 240px);
      white-space: normal;
      text-align: center;
      &::after { top: auto; bottom: 100%; border-top-color: transparent; border-bottom-color: rgb(0 0 0 / .85); }
    }
  }
  @media (hover:hover) and (pointer:fine) {
    &:hover .share-tooltip { opacity: 1; transform: translateX(-50%) translateY(-2px); }
  }
  &.copied {
    opacity: 1;
    transform: rotate(-15deg) scale(1.15);
    svg:first-of-type { opacity: 0; transform: scale(0); }
    .share-check { opacity: 1; transform: scale(1); }
    .share-tooltip { opacity: 1; transform: translateX(-50%) translateY(-2px); @media (max-width: 767px) { transform: translateX(-50%) translateY(2px); } }
  }
}

.hero-group.dates-selected .share-booking { display: grid; }

#booking-form { pointer-events: auto; position: relative; z-index: 10; }

.date-inputs-wrapper {
  display: flex;
  gap: 0;
  align-items: center;
  justify-content: center;
  padding: 12px;
  background: var(--glass-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 9999px;
  border: 1px solid var(--white-20);
  box-shadow: 0 25px 50px -12px rgb(0 0 0 / .25);
  width: fit-content;
  pointer-events: auto;
}

.date-input-group {
  flex: 0 0 auto;
  position: relative;
  width: 120px;
  &:first-child {
    .date-btn { border-radius: 9999px 0 0 9999px; border-right: none; }
    &::after { content: ''; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 24px; background: var(--white-30); z-index: 2; }
  }
  &:nth-child(2) {
    .date-btn { border-radius: 0 9999px 9999px 0; border-left: none; position: relative; }
    &::after { content: ''; position: absolute; right: -17px; top: 50%; transform: translateY(-50%); width: 1px; height: 24px; background: var(--white-30); z-index: 2; }
  }
}

.hero-group:is(.calendar-open, .dates-selected, .waitlist-open, .gift-card-open) .date-input-group:nth-child(2)::after,
.date-inputs-wrapper:has(.escape-now-btn.hiding) .date-input-group:nth-child(2)::after { display: none; }
@media (max-width: 767px) { .date-input-group:nth-child(2)::after { display: none; } }

.date-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  white-space: nowrap;
  background: var(--white-20);
  border: 1px solid var(--white-30);
  height: 40px;
  padding: 8px 16px;
  font-weight: 400;
  color: var(--white-80);
  font-size: 12px;
  cursor: pointer;
  transition: background-color .15s, color .15s;
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / .1);
  width: 100%;
  &:focus { outline: none; }
  &:focus-visible { background: white; color: #000; z-index: 1; position: relative; }
  @media (hover: hover) { &:hover { background: white; color: #000; } }
}

.calendar-icon { width: 12px; height: 12px; flex-shrink: 0; margin-top: -1px; }
.date-text { font-size: 14px; margin-left: 1px; }

.sister-yurt-notice { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); font-style: italic; text-align: center; line-height: 1.4; font-size: .725rem; color: var(--muted); a { color: var(--primary); font-weight: 500; text-decoration: underline; cursor: pointer; &:hover { text-decoration: none; } } @media (max-width: 768px) { letter-spacing: -.6px; } }

.calendar-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 12px;
  background: white;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgb(0 0 0 / .15);
  z-index: 100;
  padding: 12px;
  pointer-events: auto;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  &.open { display: block; }
}

.calendar-header-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.calendar-notice { color: var(--primary); font-weight: 600; font-size: 14px; }
.calendar-loading { display: flex; align-items: center; justify-content: center; min-height: 200px; color: var(--muted); font-size: 14px; }
.calendar-close { background: #fff; color: #262121; border: none; padding: 6px; border-radius: 4px; cursor: pointer; display: flex; align-items: center; justify-content: center; margin: -8px -8px 0 0; &:hover { background: #e5e5e5; } }
.calendar-nav { position: relative; }
.calendar-months { display: flex; gap: 20px; }
.calendar-month { width: 235px; position: relative; }
.calendar-month-header { display: flex; justify-content: center; align-items: center; margin-bottom: 12px; min-height: 30px; position: relative; }

.calendar-dropdown .nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: #999;
  cursor: pointer;
  padding: 8px;
  min-width: 44px;
  min-height: 44px;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  &.prev { left: -8px; }
  &.next { right: -8px; }
  &:hover { color: #333; }
  svg { width: 20px; height: 20px; }
}

.month-name { font-weight: 600; font-size: 14px; color: #999; letter-spacing: .5px; }
.calendar-grid, .calendar-row { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; }
.day-label { text-align: center; font-size: 11px; font-weight: 600; color: #999; padding: 6px 0; letter-spacing: .5px; }

.day-cell {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border-radius: 3px;
  background: white;
  color: #333;
  transition: background-color .2s, outline-color .15s;
  min-height: 32px;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  outline: 2px solid transparent;
  outline-offset: -2px;
  &.empty { cursor: default; background: transparent; }
  &:focus { outline-color: #1a73e8; z-index: 1; position: relative; }
  &:focus:not(:focus-visible) { outline-color: transparent; }
  &:focus-visible { outline-color: #1a73e8; }
  &:not(:is(.empty, .disabled, .past)) { &:active { background: #c8e6c9; color: #275c2a; } @media (hover: hover) { &:hover { background: #c8e6c9; color: #275c2a; } } }
  &:is(.past, .unavailable, .disabled) { background: #e6e6e6; color: #9a9a9a; cursor: not-allowed; }
  &.today { background: #ff6b35; color: white; &.today-checkin { background: linear-gradient(115deg, #ff6b35 40%, white 40%); color: #333; } }
  &.checkinOnly { background: linear-gradient(115deg, #e2e2e2 40%, white 40%); &.hover-checkin { background: linear-gradient(115deg, #e2e2e2 40%, #c8e6c9 40%); } &:not(:is(.disabled, .past)) { &:active { background: linear-gradient(115deg, #e2e2e2 40%, #c8e6c9 40%); } @media (hover: hover) { &:hover { background: linear-gradient(115deg, #e2e2e2 40%, #c8e6c9 40%); } } } }
  &.checkoutOnly { background: linear-gradient(115deg, white 60%, #e2e2e2 60%); &:not(:is(.disabled, .past)) { &:active { background: linear-gradient(115deg, #c8e6c9 60%, #e2e2e2 60%); } @media (hover: hover) { &:hover { background: linear-gradient(115deg, #c8e6c9 60%, #e2e2e2 60%); } } } }
  &:is(.selected, .in-range) { background: var(--green); color: white; }
  &.hover-preview { background: #c8e6c9; color: #333; }
  &.invalid-checkout { color: #ccc; }
  &.hover-checkin { background: #c8e6c9; }
  &.hover-checkout { background: linear-gradient(115deg, #c8e6c9 60%, #e2e2e2 60%); }
  &.selected.today { background: var(--green); color: white; }
}

.form-section { position: relative; margin-top: 15px; }
#form-sections-hidden {
  margin-top: 0;
  transition: opacity .3s ease-in-out;
  overflow: visible;
  border-radius: 8px;
  margin-bottom: 15px;
  .form-section { margin-top: 0; }
  .pricing { margin-top: 15px; min-height: 257px; }
  &:not([style*="display: none"]) { opacity: 1; }
  &[style*="display: none"] { opacity: 0; height: 0; }
}

.form-row { display: flex; flex-direction: column; gap: 0; .form-group:first-child input { border-top: 1px solid var(--white-25); } }
.form-group-row { display: flex; gap: 0; .form-group { flex: 1; min-width: 0; &:first-child input { border-right: none; border-top: 1px solid var(--white-25); border-top-left-radius: 8px; } &:last-child input { border-left-width: 1px; border-top: 1px solid var(--white-25); border-top-right-radius: 8px; } } }
.form-group { display: flex; flex-direction: column; margin-bottom: 0; label { display: none; } label[for="numberOfGuests"] { display: none; } }
.email-wrapper { position: relative; }
.email-hint { position: absolute; top: calc(50% - 2px); transform: translateY(-50%); right: 8px; font-size: 13px; letter-spacing: -.5px; line-height: 1.2; color: var(--white-95); opacity: 0; pointer-events: none; text-align: right; transition: opacity .2s, transform .2s; z-index: 2; }
#email:focus + .email-hint { opacity: 1; }
.email-hint.hidden { opacity: 0 !important; transform: translateY(-50%) translateX(20px) !important; }

input:is([type="text"], [type="email"], [type="tel"], [type="number"]) {
  padding: 12px;
  border: 1px solid var(--white-25);
  border-radius: 0;
  font-size: 16px;
  border-top: none;
  background: var(--glass-overlay);
  color: var(--white-95);
  backdrop-filter: blur(8px);
  touch-action: manipulation;
  &::placeholder { color: var(--white-50); }
  &:first-child { border-top: 1px solid var(--white-25); }
  &:focus { outline: none; border-color: var(--white-50); background: var(--white-25); position: relative; z-index: 1; }
}



input[type="checkbox"] { margin-right: 8px; }

.addons-section {
  margin-top: 0;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  background: var(--glass-overlay);
  padding: 8px 12px;
  backdrop-filter: blur(8px);
  border: 1px solid var(--white-25);
  border-top: none;
  label { display: flex; align-items: center; font-size: 16px; cursor: pointer; color: var(--white-95); }
  input[type="checkbox"] { width: 20px; height: 20px; margin-right: 10px; cursor: pointer; }
}

.guest-pets-row { display: flex; align-items: center; padding: 12px; border: 1px solid var(--white-25); border-top: none; background: var(--glass-overlay); color: var(--white-95); height: 48px; backdrop-filter: blur(8px); touch-action: manipulation; }
.guests-section { display: flex; align-items: center; gap: 0; flex: 1; }
.guests-label { font-size: 16px; margin-right: 20px; color: var(--white-95); }
.counter-btn { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--white-40); background: var(--white-20); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 18px; color: var(--white-90); transition: border-color .2s, background .2s, color .2s, transform .2s; &:hover:not(:disabled) { border-color: var(--white-80); background: var(--white-30); color: white; transform: scale(1.05); } &:active:not(:disabled) { transform: scale(.95); } &:disabled { opacity: .3; cursor: not-allowed; } }
.guest-count { font-size: 16px; font-weight: 500; color: var(--white-95); width: 40px; text-align: center; border: none !important; background: none !important; padding: 0 !important; outline: none; backdrop-filter: none !important; touch-action: manipulation; -webkit-tap-highlight-color: transparent; appearance: textfield; -moz-appearance: textfield; &::-webkit-inner-spin-button, &::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } &:focus { border: none !important; box-shadow: none !important; } }
.vertical-divider { width: 1px; height: 28px; background: var(--white-30); margin: 0 20px; }
.pets-section { display: flex; align-items: center; padding: 0 20px 0 8px; }
.pets-checkbox { width: 20px; height: 20px; cursor: pointer; touch-action: manipulation; }
.pets-label { font-size: 16px; cursor: pointer; user-select: none; color: var(--white-95); }

.iti { width: 100%; --iti-spacer-horizontal: 13px; }
.iti--allow-dropdown .iti__flag-container, .iti--separate-dial-code .iti__flag-container { z-index: 2; }
.iti__flag-container { background: var(--glass-overlay); }
.iti__country-container { width: auto; background: transparent; display: flex; align-items: center; }
.iti__search-input { line-height: 40px; max-height: 40px; overflow: hidden; }
.iti__selected-flag { background: transparent; border-right: 1px solid var(--white-25); padding: 0 8px 0 12px; height: 100%; display: flex; align-items: center; &:where(:hover, :focus) { background-color: rgb(0 0 0 / .02); } }
.iti__selected-dial-code { display: flex; align-items: center; height: 100%; line-height: 1; transform: translateY(-1.5px); color: var(--white-95); margin-top: 1px; }
.iti--allow-dropdown .iti__flag-container:where(:hover, :focus-within) .iti__selected-flag { background-color: rgb(0 0 0 / .02); }
.iti__country-list { border-radius: 8px; box-shadow: 0 4px 12px rgb(0 0 0 / .15); z-index: 200; }
.iti__country:hover { background-color: #f5f5f5; }
.iti__country.iti__highlight { background-color: var(--green); }
@supports (-webkit-hyphens:none) { .iti__selected-dial-code { transform: translateY(-.5px); } }
@-moz-document url-prefix() { .iti__selected-dial-code { transform: translateY(-1.5px); } }
input#phone { width: 100%; }

.pricing { position: relative; background: var(--glass-overlay); backdrop-filter: blur(8px); padding: 20px; border-radius: 8px; &.loading > :not(.pricing-loader) { filter: blur(3px); opacity: .5; transition: filter .15s, opacity .15s; } }
.price-row { display: flex; justify-content: space-between; padding: 0; font-size: 16px; color: var(--white-95); &.total { border-top: 2px solid var(--white-50); margin-top: 10px; padding-top: 15px; font-weight: bold; font-size: 17px; color: white; } &.deposit { color: var(--white-70); padding-top: 8px; font-style: italic; } }
.tax-label { visibility: hidden; position: relative; &::before { content: 'Sales & Lodging Tax'; visibility: visible; position: absolute; left: 0; white-space: nowrap; } }
.free-label { color: rgb(147 235 151 / 90%); font-weight: bold; }
.deposit-label { display: flex; align-items: center; gap: 6px; position: relative; }
.info-tooltip-trigger { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; padding: 0; background: none; color: var(--white-50); cursor: pointer; transition: color .2s; svg { width: 14px; height: 14px; } &:hover { color: var(--white-80); } }
.info-tooltip { position: absolute; bottom: calc(100% + 8px); left: -60px; width: 280px; padding: 10px 12px; background: rgb(30 30 30 / .95); color: var(--white-90); font-size: 12px; font-style: normal; font-weight: 400; line-height: 1.4; border-radius: 8px; box-shadow: 0 4px 20px rgb(0 0 0 / .3); opacity: 0; visibility: hidden; transform: translateY(4px); transition: opacity .2s, visibility .2s, transform .2s; z-index: 20; pointer-events: none; &::after { content: ''; position: absolute; top: 100%; left: 80px; border: 6px solid transparent; border-top-color: rgb(30 30 30 / .95); } @media (max-width: 400px) { left: -20px; width: 240px; &::after { left: 40px; } } }
.info-tooltip-trigger:hover + .info-tooltip, .info-tooltip-trigger:focus + .info-tooltip { opacity: 1; visibility: visible; transform: translateY(0); }
.coupon-section { display: flex; flex-wrap: wrap; justify-content: flex-end; margin-top: -4px; }
.coupon-toggle { display: inline; padding: 0; background: none; color: var(--white-50); font-size: 13px; cursor: pointer; transition: color .2s; &:hover { color: var(--white-80); } &.hidden { display: none; } }
.coupon-input-wrap { display: flex; gap: 8px; margin-top: 10px; width: 100%; transition: opacity .2s; }
.coupon-input-wrap input { flex: 1; min-width: 0; padding: 8px 12px; background: var(--white-10); border: 1px solid var(--white-25); border-radius: 6px; color: white; font-size: 14px; text-transform: uppercase; &::placeholder { color: var(--white-40); text-transform: none; } &:focus { outline: none; border-color: var(--white-50); background: var(--white-20); } }
.coupon-apply { padding: 8px 16px; background: var(--white-20); border: 1px solid var(--white-30); border-radius: 6px; color: white; font-size: 14px; font-weight: 500; cursor: pointer; transition: background .2s; &:hover { background: var(--white-30); } &:disabled { opacity: .5; cursor: not-allowed; } }
.coupon-message { width: 100%; margin-top: 8px; font-size: 13px; line-height: 1.3; &.success { color: rgb(147 235 151 / 90%); } &.error { color: #ff6b6b; } }
.coupon-giftcard-warn { width: 100%; margin-top: 8px; font-size: 13px; line-height: 1.35; color: rgb(255 255 255 / .85); background: rgb(0 0 0 / .22); border: 1px solid rgb(255 255 255 / .18); border-radius: 8px; padding: 10px 12px; }
.coupon-applied { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 8px 12px; background: rgb(147 235 151 / .1); border: 1px solid rgb(147 235 151 / .3); border-radius: 6px; margin-top: 0; .coupon-name { display: flex; align-items: center; gap: 6px; color: rgb(147 235 151 / 90%); font-size: 14px; font-weight: 500; svg { width: 16px; height: 16px; } } .coupon-remove { display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; padding: 0; background: none; color: var(--white-50); cursor: pointer; svg { width: 16px; height: 16px; } &:hover { color: #ff6b6b; } } }
.pricing-loader { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 12px; background: rgb(255 255 255 / .15); border-radius: 8px; opacity: 0; visibility: hidden; transition: opacity .15s, visibility .15s; z-index: 5; .pricing.loading & { opacity: 1; visibility: visible; } span { color: white; font-size: 14px; text-shadow: 0 1px 3px rgb(0 0 0 / .5); } }
.spinner { width: 30px; height: 30px; border: 3px solid #f0f0f0; border-top-color: var(--green); border-radius: 50%; animation: spin 1s linear infinite; }
.spin { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.night-promo { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; margin: 10px 0 0; background: hsl(151 20% 30% / .15); border: 1px dashed hsl(151 20% 40% / .5); border-radius: 8px; font-size: 13px; color: var(--white-90); span { flex: 1; } button { padding: 6px 12px; background: hsl(151 20% 35%); color: white; border-radius: 6px; font-size: 12px; font-weight: 500; white-space: nowrap; cursor: pointer; transition: background .2s; &:hover { background: hsl(151 20% 40%); } } }
.rules-accept-wrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s, margin .3s; &.visible { grid-template-rows: 1fr; margin-top: 8px; } }
.rules-accept { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 0; font-size: 16px; color: var(--white-90); overflow: hidden; opacity: 0; transition: opacity .3s .1s; .rules-accept-wrap.visible & { opacity: 1; } input { width: 20px; height: 20px; cursor: pointer; flex-shrink: 0; margin-right: 0; } }
.rules-text { margin-right: -4px; cursor: pointer; }
.rules-link { display: inline-flex; align-items: center; gap: 4px; padding: 0; background: none; color: var(--white-80); font-size: 14px; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; transition: color .2s; white-space: nowrap; svg { width: 14px; height: 14px; } &:hover { color: white; } }
.rules-modal .modal-content { max-width: 42rem; max-height: 80vh; display: flex; flex-direction: column; h2 { border-bottom: 1px dashed #e0e0e0; padding-bottom: 10px; margin-bottom: 0; } @media (max-width: 768px) { padding: 1.25rem; h2 { font-size: 1.25rem; } } }
.rules-modal-content { flex: 1; overflow-y: auto; padding-right: 8px; color: var(--muted); line-height: 1.75; h3 { font-size: 1.125rem; font-weight: 600; color: var(--fg); margin: 1.5rem 0 .5rem; &:first-child { margin-top: 0; } } p { margin-bottom: 1rem; } @media (max-width: 768px) { font-size: .875rem; line-height: 1.6; h3 { font-size: 1rem; margin: 1rem 0 .375rem; } p { margin-bottom: .75rem; } .rules-intro { font-size: 14px; line-height: 1.3; } .rules-disclaimer { font-size: 13px; } } }
button[type="submit"] { width: 100%; padding: 14px 24px; background: var(--cream); color: #333; border: none; border-radius: 9999px; font-size: 18px; font-weight: 500; cursor: pointer; transition: opacity .15s, background-color .15s; margin-top: 10px; box-shadow: 0 10px 15px -3px rgb(0 0 0 / .1); display: block; &:hover:not(:disabled) { opacity: .9; } &:disabled { opacity: .5; cursor: not-allowed; } }

.confirmation-glass { background: var(--white-12); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid var(--white-30); border-radius: 24px; padding: 20px 24px; margin: 20px auto; max-width: 600px; box-shadow: 0 8px 32px rgb(0 0 0 / .1); animation: slideDown .5s ease-out; }
@keyframes slideDown { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } }
.confirmation-header { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--white-20); }
.check-icon { color: var(--green); }
.confirmation-title { font-size: 22px; font-weight: 700; color: white; letter-spacing: -.5px; }
.confirmation-content { color: var(--white-95); font-size: 14px; line-height: 1.1; .welcome-text { margin-bottom: 14px; font-size: 15px; line-height: 1.3; } .booking-details { display: grid; gap: 8px; margin: 14px 0; padding: 14px; background: var(--white-08); border-radius: 12px; } .detail-row { display: flex; justify-content: space-between; align-items: start; } .detail-label { font-weight: 600; color: var(--white-70); font-size: 13px; text-transform: uppercase; letter-spacing: .5px; } .detail-value { text-align: right; font-weight: 500; line-height: 1.3; } .price-breakdown { margin-top: 14px; padding: 14px; background: var(--white-08); border-radius: 12px; } .price-line { display: flex; justify-content: space-between; padding: 3px 0; font-size: 13px; &.total { margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--white-20); font-size: 15px; font-weight: 700; } } .free-label { color: var(--green); font-weight: 600; } .extras-note { margin-top: 12px; padding: 12px; background: rgb(255 203 107 / .15); border-left: 3px solid #ffcb6b; border-radius: 8px; font-size: 13px; line-height: 1.5; } .deposit-note { padding: 5px 10px; margin-top: 5px; border-radius: 8px; font-size: 13px; line-height: 1.1; } .closing-text { margin-top: 16px; text-align: center; font-size: 13px; color: var(--white-80); font-style: italic; } .confirmation-actions { display: flex; justify-content: center; gap: 20px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--white-15); flex-wrap: wrap; } .confirmation-action { display: inline-flex; align-items: center; gap: 6px; color: var(--white-80); font-size: 13px; text-decoration: none; transition: color .2s; svg { width: 16px; height: 16px; } &:hover { color: white; } } }
.confirmation-loader { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 40px 20px; color: var(--white-90); font-size: 15px; .spinner { width: 40px; height: 40px; border: 3px solid var(--white-20); border-top-color: var(--white-80); } }

@keyframes gradient { 0% { background-position: 0 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
.presale-banner {
  background: linear-gradient(-45deg, #1f3d33, #172c24, #1f3d33, #0f201a);
  background-size: 400% 400%;
  animation: gradient 18s ease infinite;
  padding: 1.5rem 1rem;
  h3 { font-size: 1.25rem; font-weight: 700; color: var(--cream); margin-bottom: 1rem; }
  p { font-size: .9375rem; line-height: 1.6; color: var(--white-90); margin-bottom: .75rem; }
  strong { color: var(--gold); }
  a { color: rgb(150 200 255); text-decoration: underline; &:hover { color: white; } }
  .presale-note { font-size: .8125rem; color: var(--white-70); font-style: italic; margin-top: 1rem; margin-bottom: 0; }
  @media (min-width: 640px) { padding: 2rem 1.5rem; h3 { font-size: 1.375rem; } p { font-size: 1rem; } }
  @media (min-width: 768px) { padding: 2.5rem 2rem; }
}

.about-section { background: var(--bg); }
.about-grid { display: grid; gap: 1.5rem; @media (min-width: 640px) { gap: 2.5rem; } @media (min-width: 1024px) { grid-template-columns: repeat(2, 1fr); gap: 4rem; } }
.about-content { display: flex; flex-direction: column; gap: 1rem; @media (min-width: 640px) { gap: 1.5rem; } }
.stat-sep { margin: 0 .375rem; font-size: .5em; vertical-align: middle; }
.about-text-wrap { display: flex; flex-direction: column; gap: .75rem; }
.about-text { font-size: 1rem; line-height: 1.556; color: var(--muted); a:hover { text-decoration: underline; } @media (min-width: 768px) { font-size: 1.125rem; } }

.features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; @media (max-width: 430px) { gap: .5rem; } @media (min-width: 640px) { gap: 1rem; } @media (min-width: 768px) { gap: 1.5rem; } }
.feature { text-align: center; transition: transform .3s; &:hover { transform: translateY(-2px); } }
.feature-icon { width: 2.5rem; height: 2.5rem; margin: 0 auto .5rem; background: hsl(151 20% 30% / .1); border-radius: 9999px; display: flex; align-items: center; justify-content: center; transition: background .4s; svg { width: 1.25rem; height: 1.25rem; stroke: var(--primary); } .feature:hover & { background: hsl(151 20% 30% / .2); } @media (min-width: 640px) { width: 3.5rem; height: 3.5rem; margin-bottom: 1rem; svg { width: 1.75rem; height: 1.75rem; } } @media (min-width: 768px) { width: 4rem; height: 4rem; svg { width: 2rem; height: 2rem; } } }
.feature-title { font-weight: 600; font-size: .875rem; line-height: 1.5; color: var(--fg); margin-bottom: .5rem; @media (max-width: 430px) { font-size: 13px; letter-spacing: -.2px; } @media (min-width: 640px) { font-size: 1rem; } }
.feature-desc { font-size: .75rem; color: var(--muted); line-height: 1.43; text-wrap: balance; @media (max-width: 430px) { letter-spacing: -.2px; } @media (min-width: 640px) { font-size: .875rem; } }

.about-sidebar { display: flex; flex-direction: row; align-items: center; gap: 1rem; @media (min-width: 640px) { flex-direction: column; gap: 0; } @media (min-width: 1024px) { padding-left: 6rem; } }
.about-image-wrapper { width: 140px; flex-shrink: 0; @media (min-width: 400px) { width: 160px; } @media (min-width: 640px) { width: 100%; max-width: 315px; } @media (min-width: 1024px) { max-width: none; } }
.about-image-container { overflow: hidden; border-radius: 9999px; border: 1px solid hsl(0 0% 82% / .3); aspect-ratio: 1; transition: transform .3s; &:hover { transform: translateY(-2px); } }
.about-image { width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; transform: scale(1.15); }
.about-meta { display: flex; flex-direction: column; align-items: center; @media (min-width: 640px) { margin-top: 1.5rem; } }
.airbnb-badge { width: 180px; opacity: .8; @media (min-width: 400px) { width: 200px; } @media (min-width: 640px) { width: 246px; } }
.rating { display: flex; align-items: center; gap: .5rem; transform: scale(.75); @media (min-width: 400px) { transform: scale(.9); } @media (min-width: 640px) { transform: scale(1); } }
.rating-value { font-weight: 600; font-size: 1.5rem; color: rgb(157 168 159); }
.rating-stars { display: flex; gap: .25rem; svg { width: 1.125rem; height: 1.125rem; fill: rgb(157 168 159); stroke: rgb(157 168 159); } }
.airbnb-icon { height: 1.5rem; opacity: .5; fill: rgb(157 168 159); }

.gallery-section { background: hsl(84 14% 86% / .3); }
.tabs { display: grid; grid-template-columns: repeat(2, 1fr); max-width: 28rem; margin: 0 auto 1.5rem; background: var(--secondary); border-radius: calc(var(--radius) - 2px); padding: .25rem; @media (min-width: 640px) { margin-bottom: 2rem; } }
.tab { display: flex; align-items: center; justify-content: center; gap: .5rem; padding: .375rem .75rem; font-size: .875rem; font-weight: 500; line-height: 1.43; border-radius: calc(var(--radius) - 4px); transition: background .15s, color .15s, box-shadow .15s; color: var(--muted); cursor: pointer; svg { width: 1rem; height: 1rem; } &:hover { color: var(--fg); } &.active { background: var(--bg); color: var(--fg); box-shadow: 0 1px 2px rgb(0 0 0 / .05); } }
.tab-content { height: 0; overflow: hidden; visibility: hidden; &.active { height: auto; overflow: visible; visibility: visible; } }

.gallery-grid { display: block; }
.gallery-row { display: flex; gap: .5rem; margin-bottom: .5rem; @media (min-width: 640px) { gap: 1rem; margin-bottom: 1rem; } }
.gallery-item, .gallery-stacked { flex-grow: var(--aspect, 1); flex-basis: 0; min-width: 0; }
.gallery-stacked { display: flex; flex-direction: column; gap: .5rem; @media (min-width: 640px) { gap: 1rem; } .gallery-item { flex: 1; height: 0; } }
.gallery-item { cursor: pointer; position: relative; overflow: hidden; border-radius: .75rem; img { width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform .3s; will-change: transform; } &:hover img { transform: scale(1.05); } }
.gallery-item-overlay { position: absolute; inset: 0; background: hsl(0 0% 26% / 0); transition: background .4s; pointer-events: none; .gallery-item:hover & { background: hsl(0 0% 26% / .2); } }
.amenity-col { display: none; flex-direction: column; gap: 12px; @media (min-width: 640px) { display: flex; } &:last-child { @media (min-width: 1024px) { padding-left: 3rem; } } }

.videos-grid { position: relative; max-width: 56rem; margin: 0 auto; }
.videos-track { display: grid; gap: 1rem; }
.videos-grid:not(.carousel-mode) .videos-track { grid-template-columns: 1fr; @media (min-width: 768px) { grid-template-columns: repeat(3, 1fr); } }
.videos-grid.carousel-mode { overflow: hidden; }
.videos-grid.carousel-mode .videos-track { display: flex; gap: 0; transition: transform .35s ease; transform: translateX(calc(var(--video-index, 0) * -100%)); }
.videos-grid.carousel-mode .video-card { flex: 0 0 100%; max-width: 100%; margin: 0; }
.video-card { position: relative; aspect-ratio: 9/16; max-width: 280px; margin: 0 auto; border-radius: .75rem; overflow: hidden; cursor: pointer; @media (min-width: 768px) { max-width: none; } video { width: 100%; height: 100%; object-fit: cover; } }
.video-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .2s; .video-card.playing & { opacity: 0; pointer-events: none; } }
.video-stats { position: absolute; top: 0; left: 0; right: 0; padding: .5rem .75rem; background: linear-gradient(to bottom, rgb(0 0 0 / .7) 0%, transparent 100%); display: flex; justify-content: space-between; color: white; font-size: .875rem; font-weight: 600; pointer-events: none; .stat { display: flex; align-items: center; gap: .25rem; } svg { width: .875rem; height: .875rem; } svg[data-lucide="heart"] { fill: white; } }
.video-play-btn { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 3.5rem; height: 3.5rem; background: rgb(255 255 255 / .6); border-radius: 50%; display: flex; align-items: center; justify-content: center; pointer-events: none; transition: background .2s, opacity .2s; svg { width: 1.5rem; height: 1.5rem; fill: var(--fg); stroke: var(--fg); margin-left: .125rem; } .video-card:hover & { background: rgb(255 255 255 / .8); } .video-card.playing & { opacity: 0; } }
.video-mute-btn { position: absolute; bottom: .75rem; right: .75rem; width: 2rem; height: 2rem; background: rgb(0 0 0 / .5); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; transition: background .2s; svg { width: 1rem; height: 1rem; } &:hover { background: rgb(0 0 0 / .7); } &.hidden { display: none; } }
.video-nav-wrap { display: none; position: absolute; inset: 0; pointer-events: none; align-items: center; justify-content: space-between; padding: 0 .25rem; }
.video-nav { pointer-events: auto; width: 2.5rem; height: 2.5rem; display: inline-flex; align-items: center; justify-content: center; background: hsl(45 44% 97% / .85); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); border: 1px solid hsl(0 0% 82% / .5); border-radius: 9999px; box-shadow: var(--shadow-md); color: var(--fg); transition: background .15s, color .15s; svg { width: 1.1rem; height: 1.1rem; } &:hover { background: var(--primary); color: var(--primary-fg); } }
.video-dots { display: none; justify-content: center; gap: .35rem; margin-top: .75rem; }
.video-dot { width: .625rem; height: .625rem; border-radius: 9999px; background: hsl(0 0% 35% / .25); transition: background .25s; &.active { background: var(--secondary); } }
.videos-grid.carousel-mode .video-nav-wrap, .videos-grid.carousel-mode .video-dots { display: flex; }
.videos-grid.carousel-mode .video-nav-wrap { pointer-events: none; }
.social-cta { margin-top: 2rem; text-align: center; h3 { font-size: .875rem; font-weight: 600; margin-bottom: .75rem; color: var(--fg); } @media (min-width: 640px) { h3 { font-size: 1rem; margin-bottom: 1rem; } } @media (min-width: 768px) { h3 { font-size: 1.125rem; } } }
.social-btns { display: flex; gap: .75rem; justify-content: center; flex-wrap: wrap; max-width: 28rem; margin: 0 auto; padding: 0 1rem; }
.social-btn-wrap { display: flex; flex-direction: column; align-items: center; gap: .25rem; }
.social-followers { font-size: .6875rem; color: var(--muted); }
.btn-instagram { padding: .625rem .75rem; background: linear-gradient(to bottom right, #8B3DFF, #E1306C, #FCAF45); color: white; border-radius: 9999px; font-weight: 500; font-size: .75rem; box-shadow: 0 4px 6px -1px rgb(0 0 0 / .1); transition: transform .3s, box-shadow .3s; &:hover { transform: scale(1.05); box-shadow: var(--shadow-md); } @media (min-width: 480px) { padding: .75rem 1rem; font-size: .875rem; } @media (min-width: 640px) { padding: .875rem 1.5rem; } }
.btn-tiktok { display: flex; align-items: center; gap: .375rem; padding: .625rem .75rem; background: var(--secondary); color: var(--muted); border-radius: 9999px; font-weight: 500; font-size: .75rem; box-shadow: 0 4px 6px -1px rgb(0 0 0 / .1); transition: color .3s, transform .3s; svg { width: 1rem; height: 1rem; } &:hover { color: var(--fg); transform: scale(1.05); } @media (min-width: 480px) { gap: .5rem; padding: .75rem 1rem; font-size: .875rem; } @media (min-width: 640px) { padding: .875rem 1.5rem; } }

.reviews-section { background: var(--bg); }
.review-meta { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: .5rem; margin-bottom: 1.5rem; }
.review-rating { display: flex; align-items: center; gap: .5rem; .stars { display: flex; svg { width: 1.5rem; height: 1.5rem; fill: var(--primary); stroke: var(--primary); } } .rating-num { font-size: 1.25rem; font-weight: 600; line-height: 28px; color: var(--secondary); } }
.rating-source { font-size: .875rem; line-height: 24px; color: var(--muted); margin-left: .5rem; @media (max-width: 500px) { line-height: 1.3; max-width: 170px; } @media (min-width: 640px) { font-size: 1rem; } }
.review-carousel { position: relative; }
.review-card { border-radius: var(--radius); border: 1px solid hsl(0 0% 82% / .5); box-shadow: var(--shadow-md); min-height: 200px; background: var(--cream); transition: transform .3s; padding: .75rem 2.5rem; text-align: center; display: flex; flex-direction: column; justify-content: center; gap: .75rem; &:hover { transform: translateY(-2px); } @media (min-width: 400px) { min-height: 220px; } @media (min-width: 640px) { min-height: 280px; padding: 1.5rem 4rem; gap: 1.5rem; } @media (min-width: 768px) { min-height: 300px; } }
.review-quote { font-size: .875rem; line-height: 1.625; color: var(--fg); font-style: italic; max-width: 42rem; margin: 0 auto; @media (min-width: 640px) { font-size: 1.125rem; line-height: 28px; } }
.review-author { font-weight: 600; color: var(--fg); font-size: .875rem; line-height: 1.5; @media (min-width: 640px) { font-size: 1rem; } }
.review-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 2rem; height: 2rem; display: inline-flex; align-items: center; justify-content: center; background: hsl(45 44% 97% / .8); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); border: 1px solid hsl(0 0% 82% / .5); border-radius: calc(var(--radius) - 2px); box-shadow: var(--shadow-md); transition: background .15s, color .15s; svg { width: 1rem; height: 1rem; } &:hover { background: var(--primary); color: var(--primary-fg); } &.prev { left: .25rem; @media (min-width: 400px) { left: .5rem; } @media (min-width: 640px) { left: 1rem; } } &.next { right: .25rem; @media (min-width: 400px) { right: .5rem; } @media (min-width: 640px) { right: 1rem; } } @media (min-width: 400px) { width: 2.25rem; height: 2.25rem; } @media (min-width: 640px) { width: 2.5rem; height: 2.5rem; } }
.review-dots { display: flex; justify-content: center; gap: .375rem; margin-top: 1rem; @media (min-width: 640px) { margin-top: 2rem; gap: .5rem; } }
.review-dot { width: .5rem; height: .5rem; border-radius: 9999px; background: hsl(0 0% 35% / .3); transition: background .4s; &:hover { background: hsl(0 0% 35% / .6); } &.active { background: var(--secondary); } @media (min-width: 400px) { width: .625rem; height: .625rem; } @media (min-width: 640px) { width: .75rem; height: .75rem; } }

.sleep-grid { display: grid; gap: 1rem; @media (min-width: 640px) { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; } .sleep-card:last-child:nth-child(odd) { @media (min-width: 640px) { grid-column: 1 / -1; max-width: calc(50% - .75rem); justify-self: center; } } }
.sleep-card { border-radius: var(--radius); overflow: hidden; background: hsl(55 38% 94% / .5); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); box-shadow: var(--shadow-md); transition: box-shadow .3s, transform .3s; cursor: pointer; &:hover { box-shadow: var(--shadow-lg); transform: translateY(-.25rem); } }
.sleep-card-image { position: relative; aspect-ratio: 16/9; overflow: hidden; img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; } .sleep-card:hover & img { transform: scale(1.05); } }
.sleep-card-overlay { display: none; }
.sleep-card-content { padding: 1.5rem; }
.sleep-card-title { font-size: 1.25rem; font-weight: 700; line-height: 1.4; color: var(--fg); margin-bottom: .25rem; }
.sleep-card-bed { font-size: .875rem; font-weight: 500; line-height: 1.43; color: var(--primary); margin-bottom: .75rem; }
.sleep-card-desc { font-size: .875rem; color: var(--muted); line-height: 1.625; }

.book-cta { position: relative; overflow: hidden; background: var(--bg); }
.book-cta-bg { position: absolute; inset: 0; opacity: .05; }
.book-cta-blob { position: absolute; width: 24rem; height: 24rem; border-radius: 9999px; filter: blur(64px); &.primary { top: 0; left: 25%; background: var(--primary); } &.secondary { bottom: 0; right: 25%; background: var(--secondary); } }
.book-cta-card { position: relative; z-index: 10; background: linear-gradient(to bottom right, hsl(151 20% 30% / .1), hsl(84 14% 86% / .1)); border: 1px solid hsl(151 20% 30% / .2); border-radius: 1rem; padding: 1.25rem .75rem; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); text-align: center; display: flex; flex-direction: column; gap: .5rem; transition: transform .3s; &:hover { transform: translateY(-2px); } @media (min-width: 640px) { padding: 2rem 1.5rem; gap: .75rem; } @media (min-width: 768px) { padding: 2.5rem; gap: 1rem; } }
.book-cta-title { font-size: 1.125rem; font-weight: 700; line-height: 1.1; padding: 0 .5rem; @media (min-width: 640px) { font-size: 1.5rem; } @media (min-width: 768px) { font-size: 1.875rem; } @media (min-width: 1024px) { font-size: 2.25rem; } }
.book-cta-subtitle { font-size: .875rem; color: var(--muted); line-height: 1.75; max-width: 42rem; margin: 0 auto; padding: 0 1rem; @media (min-width: 768px) { font-size: 1.125rem; } }
.book-cta-rating { display: flex; align-items: center; justify-content: center; gap: .375rem; font-size: .875rem; line-height: 1.43; color: var(--muted); }
.book-cta-stars { display: flex; gap: 2px; svg { width: 1rem; height: 1rem; fill: var(--primary); stroke: var(--primary); } }
.book-cta-card .btn { align-self: center; padding: .5rem 2rem; }

.amenities-section { background: var(--bg); .section-header { margin-bottom: 2rem; @media (min-width: 640px) { margin-bottom: 3rem; } @media (min-width: 768px) { margin-bottom: 4rem; } } .section-title { @media (min-width: 640px) { font-size: 1.875rem; } @media (min-width: 768px) { font-size: 2.25rem; } @media (min-width: 1024px) { font-size: 3rem; } } .section-subtitle { padding-top: 3px; @media (min-width: 768px) { font-size: 1.125rem; } } }
.amenities-grid { display: grid; grid-template-columns: 1fr; gap: .75rem; max-width: 28rem; margin: 0 auto; padding: 0 .5rem; @media (min-width: 640px) { grid-template-columns: repeat(2, 1fr); gap: 1rem 1.5rem; max-width: 56rem; padding: 0; } @media (min-width: 768px) { gap: 2rem 4rem; } }
.amenities-featured { display: flex; flex-direction: column; gap: .75rem; @media (min-width: 640px) { display: none; } }
.amenity-item { display: flex; align-items: flex-start; gap: .5rem; &:hover .amenity-text { color: var(--primary); } &:hover .amenity-icon { transform: scale(1.1); } }
.amenity-icon { flex-shrink: 0; width: 1rem; height: 1rem; background: var(--secondary); border-radius: 9999px; margin-top: .125rem; transition: transform .4s; display: flex; align-items: center; justify-content: center; svg { width: .625rem; height: .625rem; stroke: var(--fg); } @media (min-width: 640px) { width: 1.25rem; height: 1.25rem; svg { width: .75rem; height: .75rem; } } }
.amenity-text { font-size: .8125rem; color: hsl(0 0% 26% / .9); line-height: 1.5; transition: color .4s; @media (min-width: 640px) { font-size: .875rem; } @media (min-width: 768px) { font-size: 1rem; line-height: 24px; } }

.location-section { background: var(--section-bg); }
.location-view-radio { position: absolute; opacity: 0; pointer-events: none; }
.location-tabs { margin-bottom: 1rem; @media (min-width: 1024px) { display: none; } }
#location-view-map:checked ~ .tabs label[for="location-view-map"],
#location-view-list:checked ~ .tabs label[for="location-view-list"] { background: var(--bg); color: var(--fg); box-shadow: 0 1px 2px rgb(0 0 0 / .05); }
@media (max-width: 1023px) {
  #location-view-map:checked ~ .location-grid .location-list { display: none; }
  #location-view-list:checked ~ .location-grid .location-map { display: none; }
  #location-view-list:checked ~ .location-grid .location-list { height: 450px; }
}
.location-highlights { display: grid; gap: 1rem; margin-bottom: 1.5rem; @media (min-width: 640px) { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-bottom: 2.5rem; } @media (min-width: 768px) { gap: 2rem; margin-bottom: 4rem; } }
.location-highlight { text-align: center; h3 { font-weight: 700; font-size: .875rem; color: var(--fg); margin-bottom: .25rem; @media (min-width: 640px) { font-size: 1rem; } } .desc { font-size: .75rem; color: var(--muted); margin-bottom: .25rem; @media (min-width: 640px) { font-size: .875rem; margin-bottom: .5rem; } } .time { font-size: .75rem; color: hsl(151 20% 30% / .7); font-weight: 500; @media (min-width: 640px) { font-size: .875rem; } } }
.location-highlight-icon { width: 3rem; height: 3rem; background: hsl(151 20% 30% / .1); border-radius: 9999px; display: flex; align-items: center; justify-content: center; margin: 0 auto .5rem; svg { width: 1.5rem; height: 1.5rem; stroke: var(--primary); } @media (min-width: 640px) { width: 3.5rem; height: 3.5rem; margin-bottom: .75rem; svg { width: 1.75rem; height: 1.75rem; } } }
.location-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; margin-bottom: 2rem; @media (min-width: 1024px) { grid-template-columns: repeat(2, 1fr); height: 500px; } }
.location-grid > * { min-height: 0; }
.location-map { border-radius: .75rem; overflow: hidden; box-shadow: 0 1px 2px rgb(0 0 0 / .05); border: 1px solid hsl(0 0% 82% / .3); height: 100%; display: flex; flex-direction: column; position: relative; isolation: isolate; @media (min-width: 1024px) { min-width: 555px; } }
.location-map-view { flex: 1; width: 100%; height: 100%; position: relative; background: var(--map-bg); min-height: 300px; }
.location-map-view iframe { display: block; width: 100%; height: 100%; border: 0; }
.map-label { background: white; padding: 2px 6px; border-radius: 4px; box-shadow: 0 1px 3px rgb(0 0 0 / .2); margin-top: -24px !important; white-space: pre-line; letter-spacing: -.5px; text-align: center; line-height: 1; }
.map-label-below { background: white; padding: 2px 6px; border-radius: 4px; box-shadow: 0 1px 3px rgb(0 0 0 / .2); margin-top: 8px !important; white-space: pre-line; letter-spacing: -.5px; text-align: center; line-height: 1; }
.leaflet-label { background: none; border: none; box-shadow: none; padding: 0; margin: 0; }
.leaflet-label .label-wrap { background: white; padding: 2px 6px; border-radius: 4px; box-shadow: 0 1px 3px rgb(0 0 0 / .2); text-align: center; white-space: nowrap; letter-spacing: -.5px; line-height: 1; }
.leaflet-label span { display: block; font-size: 11px; font-weight: 300; font-family: Inter, system-ui, sans-serif; }
#google-map .leaflet-label:not(.map-label-city):not(.yurt-label):not(.label-visible) { opacity: 0; transition: opacity .25s ease-out; }
#google-map .leaflet-label.label-visible { opacity: 1; transition: opacity .2s ease-in; }
#google-map .leaflet-label:not(.map-label-city):not(.yurt-label) { pointer-events: none; }
.yurt-label .label-wrap { font-weight: 600; }
.leaflet-label.leaflet-label-above .label-wrap { transform: translate(calc(-50% + var(--label-x, 0px)), calc(-100% - 8px)); }
.leaflet-label.leaflet-label-below .label-wrap { transform: translate(calc(-50% + var(--label-x, 0px)), 8px); }
.map-label-city .label-wrap { transform: translate(-50%, -50%); }
.map-label-city span { font-size: 10px; font-weight: 400; color: #6b7280; }
.leaflet-container { font-family: inherit; width: 100%; height: 100%; }
.leaflet-control-zoom { border: none !important; box-shadow: var(--shadow-md) !important; }
.leaflet-control-zoom a { background: white !important; color: var(--fg) !important; border: none !important; &:hover { background: var(--secondary) !important; } }
.dir-marker-label { background: transparent; border: none; box-shadow: none; font-size: 10px; font-weight: 700; color: #fff; }
@keyframes marker-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } }
.category-marker { background: none !important; border: none !important; box-shadow: none !important; }
.marker-circle { width: 24px; height: 24px; border-radius: 50%; background: white; border: 2px solid var(--cat-color); display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 1px 3px rgb(0 0 0 / .2); svg { width: 12px; height: 12px; color: var(--cat-color); } }
.marker-hover .marker-circle { animation: marker-pulse 1s ease-in-out infinite; background: var(--cat-color); border-color: var(--cat-color); svg { color: white; } }
.map-fullscreen-btn { position: absolute; top: .75rem; right: .75rem; z-index: 500; width: 2.25rem; height: 2.25rem; background: white; border-radius: .5rem; box-shadow: var(--shadow-md); display: flex; align-items: center; justify-content: center; color: var(--fg); transition: background .15s, transform .15s; &:hover { background: var(--secondary); transform: scale(1.05); } svg { width: 1.125rem; height: 1.125rem; } }
.map-modal { display: flex; align-items: center; justify-content: center; &::backdrop { background: rgb(0 0 0 / .8); } }
.map-modal-content { position: relative; width: 85vw; max-width: 1600px; height: 90vh; background: white; border-radius: 1rem; overflow: hidden; box-shadow: 0 25px 50px -12px rgb(0 0 0 / .5); display: flex; flex-direction: column; }
.map-modal-close { position: absolute; top: 6px; right: 6px; z-index: 1000; width: 2.5rem; height: 2.5rem; background: white; border-radius: 50%; box-shadow: var(--shadow-md); display: flex; align-items: center; justify-content: center; color: var(--fg); transition: background .15s; &:hover { background: var(--secondary); } svg { width: 1.25rem; height: 1.25rem; } }
.map-modal-map { width: 100%; flex: 1; min-height: 0; }
.modal-filters { flex-shrink: 0; border-radius: 0 0 1rem 1rem; }
@media (max-width: 749px) { .modal-filters .filter-btn span { display: none; } .modal-filters .filter-btn { padding: 0 .625rem; } }
.location-filters { padding: .75rem 1rem; background: hsl(45 44% 97% / .5); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); border-top: 1px solid hsl(0 0% 82% / .5); display: flex; flex-wrap: wrap; gap: .375rem; justify-content: center; }
.filter-btn { display: inline-flex; align-items: center; gap: .375rem; height: 2.25rem; padding: 0 .5rem; font-size: .73rem; font-weight: 400; border-radius: calc(var(--radius) - 2px); border: 1px solid var(--border); background: var(--bg); color: var(--fg); box-shadow: var(--shadow-md); transition: background .2s, color .2s, border-color .2s; svg { width: .875rem; height: .875rem; } &:hover { background: var(--fg); color: var(--bg); } &.active { background: color-mix(in srgb, var(--filter-color, var(--primary)) 12%, white); border-color: color-mix(in srgb, var(--filter-color, var(--primary)) 45%, white); color: var(--filter-color, var(--primary)); } }
.location-list { border-radius: .75rem; box-shadow: 0 1px 2px rgb(0 0 0 / .05); border: 1px solid hsl(0 0% 82% / .3); display: flex; flex-direction: column; background: var(--map-bg); @media (min-width: 1024px) { height: 100%; min-height: 0; } }
.location-list-header { padding: .75rem; border-bottom: 1px solid hsl(0 0% 82% / .3); flex-shrink: 0; h3 { font-size: 1.125rem; font-weight: 700; color: var(--fg); } }
.location-list-items { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding-bottom: .75rem; }
.location-list-item { display: flex; align-items: flex-start; justify-content: space-between; padding: .625rem; transition: background .4s; cursor: pointer; &:hover { background: rgb(0 0 0 / .05); } &:not(:last-child) { border-bottom: 1px solid hsl(0 0% 82% / .3); } .list-icon { width: 1rem; height: 1rem; flex-shrink: 0; margin-top: .125rem; margin-right: .5rem; } .info { flex: 1; min-width: 0; } .name { font-weight: 600; color: var(--primary); font-size: .875rem; line-height: 1.25rem; margin-bottom: .125rem; } .type { font-size: .75rem; line-height: 1rem; color: var(--muted); } .time { font-size: .875rem; line-height: 1.25rem; color: hsl(151 20% 30% / .7); font-weight: 500; margin-left: 1rem; white-space: nowrap; } }
.text-amber { color: #f59e0b; }
.text-sky { color: #0ea5e9; }
.text-blue { color: #63a1d1; }
.text-emerald { color: #6fb86e; }
.text-rose { color: #d98c8c; }
.text-purple { color: #d184d1; }
.text-gray { color: #9f9f9f; }
.travel-info { max-width: 42rem; margin: 0 auto; text-align: center; padding: 0 .5rem; h4 { font-weight: 600; color: var(--fg); margin-bottom: .5rem; font-size: 1rem; line-height: 1.5; } .address { display: flex; align-items: center; justify-content: center; gap: .5rem; font-size: .875rem; color: var(--muted); margin-bottom: 1.5rem; svg { width: 1rem; height: 1rem; } } }
.travel-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 2rem; font-size: .875rem; line-height: 1.43; max-width: 36rem; margin: 0 auto; > div { display: contents; } .label { text-align: left; color: var(--muted); } .value { text-align: right; color: var(--fg); font-weight: 500; } }

.nearby-yurts-section { padding: 1.5rem .75rem; background: var(--cream); @media (min-width: 640px) { padding: 2rem 1.5rem; } }
.nearby-title { font-size: 1.25rem; font-weight: 700; color: var(--fg); margin-bottom: 1rem; text-align: center; @media (min-width: 768px) { font-size: 1.5rem; text-align: left; } }
.nearby-grid { display: flex; flex-direction: column; gap: 1rem; @media (min-width: 768px) { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; } }
.nearby-list { display: flex; flex-direction: column; gap: .5rem; }
.nearby-yurt-card { display: flex; align-items: flex-start; gap: .75rem; padding: .75rem 1rem; background: var(--bg); border-radius: .75rem; border: 1px solid hsl(0 0% 82% / .5); transition: transform .2s, box-shadow .2s; &:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); } &.current { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 5%, white); } }
.nearby-icon { width: 1.25rem; height: 1.25rem; flex-shrink: 0; margin-top: .125rem; }
.nearby-info { flex: 1; min-width: 0; }
.nearby-name { font-weight: 600; font-size: .9375rem; color: var(--fg); display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; .current-tag { font-size: .625rem; font-weight: 600; padding: .125rem .375rem; background: var(--primary); color: white; border-radius: .25rem; text-transform: uppercase; letter-spacing: .025em; } }
.nearby-meta { font-size: .8125rem; color: var(--muted); margin-top: .125rem; }
.nearby-dist { display: flex; align-items: center; gap: .25rem; font-size: .75rem; color: var(--primary); font-weight: 500; margin-top: .25rem; svg { width: .875rem; height: .875rem; } }
.nearby-view-all { display: flex; align-items: center; justify-content: center; gap: .5rem; width: 100%; padding: .75rem 1rem; margin-top: .5rem; background: var(--fg); color: var(--bg); font-weight: 600; font-size: .875rem; border-radius: .75rem; transition: transform .2s, opacity .2s; svg { width: 1.125rem; height: 1.125rem; } &:hover { opacity: .9; transform: translateY(-1px); } }
.nearby-map-wrap { display: none; border-radius: .75rem; overflow: hidden; box-shadow: var(--shadow-md); min-height: 280px; @media (min-width: 768px) { display: block; } }
.nearby-map { width: 100%; height: 100%; min-height: 280px; }

.faq-section { background: var(--bg); }
:is(.faq-section, .faq-page-section) .btn-outline { margin: 5px 4px; }
.faq-list { display: flex; flex-direction: column; gap: 1rem; }
.faq-item { background: var(--cream); border: 1px solid hsl(0 0% 82% / .5); border-radius: .75rem; overflow: hidden; padding: 0 1.1rem; transition: transform .3s; &:hover { transform: translateY(-2px); } @media (min-width: 640px) { padding: 0 1.5rem; } }
.faq-trigger { display: flex; width: 100%; align-items: center; justify-content: space-between; padding: .8rem 0; font-weight: 500; text-align: left; .question { font-size: 14px; font-weight: 500; line-height: 1.3; color: var(--fg); padding-right: 1rem; } .icon { flex-shrink: 0; width: 1.25rem; height: 1.25rem; transition: transform .3s; svg { width: 100%; height: 100%; stroke: var(--muted); } } .faq-item.open & .icon { transform: rotate(180deg); } @media (min-width: 640px) { padding: 1rem 0; .question { font-size: 1rem; line-height: 1.5; } } }
.faq-answer { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s ease-out; .faq-item.open & { grid-template-rows: 1fr; } .content { overflow: hidden; padding: 0; font-size: .875rem; color: var(--muted); line-height: 1.3; a:not(.btn) { color: var(--primary); font-weight: 500; &:hover { text-decoration: underline; } } .faq-item.open & { padding-bottom: 1rem; } @media (min-width: 768px) { line-height: 1.625; } } }
.faq-more { margin-top: 2rem; text-align: center; p { color: var(--muted); margin-bottom: 1rem; } }
.faq-cta { position: relative; margin-top: 3rem; border-radius: 1rem; overflow: hidden; height: 400px; box-shadow: var(--shadow-lg); }
.faq-cta-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.faq-cta-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgb(0 0 0 / .7), rgb(0 0 0 / .4), transparent); }
.faq-cta-content { position: relative; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 1.5rem; h3 { font-size: 1.875rem; font-weight: 700; line-height: 1.1; color: white; margin-bottom: .75rem; filter: drop-shadow(0 10px 8px rgb(0 0 0 / .04)); @media (min-width: 640px) { font-size: 2.25rem; } } p { color: white; margin-bottom: 1.5rem; max-width: 42rem; font-size: .8125rem; line-height: 1.625; filter: drop-shadow(0 4px 3px rgb(0 0 0 / .07)); @media (min-width: 640px) { font-size: 1rem; } a { text-decoration: underline; text-decoration-color: rgb(255 255 255 / .7); font-weight: 500; &:hover { text-decoration-color: white; } } } }

.footer { padding: 1.25rem .75rem; background: var(--footer-bg); @media (min-width: 640px) { padding: 1.5rem; } }
.footer-grid { display: grid; gap: 1.25rem; @media (min-width: 640px) { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; } @media (min-width: 768px) { grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 2rem; } }
.footer-brand { display: flex; flex-direction: column; align-items: start; }
.footer-logo { width: auto; height: 4rem; margin-bottom: 1rem; filter: brightness(0) invert(1); @media (min-width: 640px) { height: 5rem; } @media (min-width: 768px) { height: 6rem; } }
.footer-brand h3 { font-size: 1rem; font-weight: 700; color: white; @media (min-width: 640px) { font-size: 1.25rem; } }
.footer-brand p { font-size: .75rem; color: rgb(255 255 255 / .7); line-height: 1.5; white-space: pre-line; @media (min-width: 640px) { font-size: 1rem; } }
.footer-social { display: flex; gap: .75rem; margin-top: 1rem; @media (min-width: 640px) { gap: 1rem; } a { width: 2.25rem; height: 2.25rem; background: var(--white-10); border-radius: 9999px; display: flex; align-items: center; justify-content: center; color: white; svg { width: 1.125rem; height: 1.125rem; } @media (hover: hover) and (pointer: fine) { transition: all .4s; &:hover { background: var(--primary); color: var(--fg); } } @media (min-width: 640px) { width: 2.5rem; height: 2.5rem; } } }
.footer-section { display: flex; flex-direction: column; gap: .75rem; }
.footer-section h4 { font-size: 1rem; font-weight: 600; color: white; @media (min-width: 640px) { font-size: 1.125rem; } }
.footer-links { display: flex; flex-direction: column; gap: .375rem; font-size: .875rem; line-height: 1.43; @media (min-width: 640px) { gap: .5rem; } a, button { color: rgb(255 255 255 / .7); text-align: left; width: fit-content; @media (hover: hover) and (pointer: fine) { transition: color .4s; &:hover { color: var(--primary); } } &:visited { color: rgb(255 255 255 / .7); } } .label { color: white; font-weight: 500; margin-bottom: .25rem; } p:not(.label) { color: rgb(255 255 255 / .7); } }
.footer-bottom { border-top: 1px solid rgb(255 255 255 / .2); margin-top: 1.5rem; padding-top: 1rem; display: flex; flex-direction: column; align-items: center; gap: .5rem; text-align: center; @media (min-width: 640px) { flex-direction: row; justify-content: space-between; text-align: left; } p { color: rgb(255 255 255 / .6); font-size: .75rem; } .footer-sep { display: none; @media (min-width: 768px) { display: inline; } } .mobile-br { display: block; @media (min-width: 768px) { display: none; } } }
.footer-ip { font-size: .6875rem; color: rgb(255 255 255 / .45); letter-spacing: .01em; @media (min-width: 640px) { text-align: right; } }
.tm { font-size: .55em; vertical-align: super; line-height: 0; font-weight: 400; }

@keyframes scaleIn { from { opacity: 0; transform: scale(.8); } to { opacity: 1; transform: scale(1); } }
@keyframes zoomBounce { 0% { opacity: 0; transform: scale(.8); } 70% { opacity: 1; transform: scale(1.03); } 100% { transform: scale(1); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.mobile-reserve-bar { position: fixed; bottom: 0; left: 0; right: 0; z-index: 50; display: none; background: hsl(45 44% 97% / .8); backdrop-filter: var(--blur-md); -webkit-backdrop-filter: var(--blur-md); border-top: 1px solid hsl(0 0% 82% / .5); padding: .75rem 1rem max(.75rem, env(safe-area-inset-bottom)); transition: transform .4s var(--ease-standard); @media (max-width: 767px) { display: block; } &.hidden { transform: translateY(100%); } }
.btn-reserve { width: 100%; padding: .625rem 1rem; background: var(--secondary); color: var(--fg); font-weight: 400; border-radius: .375rem; box-shadow: 0 4px 6px -1px rgb(0 0 0 / .1); transition: background .15s; &:hover { background: hsl(84 14% 80%); } }
@media (max-width: 767px) { body:has(.mobile-reserve-bar) { padding-bottom: 4rem; } }

dialog { border: 0; max-width: 100vw; max-height: 100vh; width: 100%; height: 100%; padding: 1rem; background: transparent; &:not([open]) { display: none; } }
.lightbox { display: flex; flex-direction: column; &::backdrop { background: hsl(0 0% 26% / .95); } &[open] { touch-action: none; overscroll-behavior: contain; } @media (min-width: 768px) { padding: 2rem; } }
.lightbox-close { position: fixed; top: 1rem; right: 1rem; z-index: 210; width: 2.5rem; height: 2.5rem; background: hsl(0 0% 26% / .8); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); border-radius: 9999px; display: flex; align-items: center; justify-content: center; color: white; transition: color .4s; svg { width: 1.25rem; height: 1.25rem; } &:hover { color: var(--primary); } }
.lightbox-nav { position: fixed; top: 50%; transform: translateY(-50%); z-index: 210; width: 3rem; height: 3rem; background: hsl(0 0% 26% / .7); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); border-radius: 9999px; display: none; align-items: center; justify-content: center; color: white; box-shadow: 0 4px 12px rgb(0 0 0 / .3); transition: color .4s; svg { width: 1.5rem; height: 1.5rem; } &:hover { color: var(--primary); } &.prev { left: max(1rem, calc(50% - min(550px, 45vw) - 1.5rem)); } &.next { right: max(1rem, calc(50% - min(550px, 45vw) - 1.5rem)); } @media (min-width: 768px) { display: flex; top: calc(50% - 5rem); } @media (min-width: 1280px) { width: 4rem; height: 4rem; svg { width: 2rem; height: 2rem; } &.prev { left: calc(50% - min(550px, 45vw) - 5rem); } &.next { right: calc(50% - min(550px, 45vw) - 5rem); } } }
.lightbox-content { position: relative; z-index: 205; display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 1; min-height: 0; width: 100%; max-width: min(90vw, 1100px); margin: 0 auto; @media (min-width: 768px) { padding-bottom: 10rem; } }
.lightbox[open] .lightbox-content { animation: zoomBounce .4s cubic-bezier(.25, .46, .45, .94) both; }
.lightbox-image { display: block; width: 100%; max-height: 70vh; object-fit: contain; border-radius: .5rem; }
.lightbox-swipe-hint { display: flex; align-items: center; gap: .75rem; margin-top: 1rem; color: rgb(156 163 175); font-size: .75rem; @media (min-width: 768px) { display: none; } button { display: flex; align-items: center; justify-content: center; color: inherit; svg { width: 1rem; height: 1rem; } } }
.lightbox-info { position: absolute; bottom: 0; left: 0; right: 0; z-index: 210; text-align: center; padding: .5rem 1rem 1rem; background: linear-gradient(to top, hsl(0 0% 26% / .95), transparent); @media (min-width: 768px) { padding: 1rem 2rem 2rem; } }
.lightbox-title { font-size: 1.125rem; font-weight: 700; color: white; margin-bottom: .25rem; @media (min-width: 768px) { font-size: 1.5rem; } }
.lightbox-description { font-size: .75rem; color: rgb(156 163 175); max-width: 48rem; margin: 0 auto .25rem; line-height: 1.4; @media (min-width: 768px) { font-size: .875rem; } }
.lightbox-counter { display: inline-block; background: hsl(0 0% 26% / .5); color: white; padding: .375rem 1rem; border-radius: 9999px; font-size: .75rem; @media (min-width: 768px) { font-size: .875rem; padding: .5rem 1rem; } }

.amenities-modal, .investor-modal, .rules-modal { display: flex; align-items: center; justify-content: center; &::backdrop { background: radial-gradient(circle at 50% 40%, hsl(0 0% 100% / .05), transparent 55%), hsl(0 0% 6% / .82); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } }
.modal-content { position: relative; background: var(--bg); border: 1px solid hsl(0 0% 82% / .5); border-radius: 1rem; max-width: 56rem; width: 100%; max-height: 85vh; padding: 2rem; overflow-y: auto; box-shadow: 0 25px 50px -12px rgb(0 0 0 / .25); animation: scaleIn .3s; h2 { font-size: 1.5rem; font-weight: 700; margin-bottom: .5rem; } @media (max-width: 767px) { padding: 1.7rem 1.4rem; } }
.modal-close { position: absolute; top: 1rem; right: 1rem; width: 2rem; height: 2rem; display: flex; align-items: center; justify-content: center; color: var(--muted); transition: color .15s; svg { width: 1.25rem; height: 1.25rem; } &:hover { color: var(--fg); } }
.modal-subtitle { font-size: .875rem; color: var(--muted); margin-bottom: 1.5rem; }
.modal-grid { display: grid; grid-template-columns: 1fr; gap: .75rem; @media (min-width: 640px) { grid-template-columns: repeat(2, 1fr); gap: 1rem; } }
.investor-modal .modal-content { max-width: 40rem; p { color: var(--muted); line-height: 1.625; margin-bottom: 1rem; a { color: var(--primary); font-weight: 500; &:hover { text-decoration: underline; } } @media (max-width: 767px) { line-height: 1.3; } } img { width: 100%; border-radius: .5rem; border: 1px solid var(--border); } }

.exit-intent-modal { display: flex; align-items: center; justify-content: center; &::backdrop { background: radial-gradient(circle at 50% 40%, hsl(0 0% 100% / .08), transparent 55%), hsl(0 0% 6% / .85); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } }
.exit-intent-content { position: relative; background: linear-gradient(145deg, hsl(120 25% 97%) 0%, white 100%); border: 1px solid hsl(120 15% 85% / .6); border-radius: 1.25rem; width: calc(var(--day-count) * 30px + 3rem); min-width: 360px; max-width: min(calc(100vw - 2rem), 90vw); padding: 1.75rem 1.5rem; box-shadow: 0 25px 50px -12px rgb(0 0 0 / .25), 0 0 0 1px rgb(0 0 0 / .03); animation: scaleIn .25s ease-out; @media (min-width: 500px) { min-width: 400px; } }
.exit-intent-close { position: absolute; top: 4px; right: 4px; z-index: 10; width: 2rem; height: 2rem; display: flex; align-items: center; justify-content: center; color: var(--fg); background: rgb(0 0 0 / .05); border-radius: 50%; outline: 0; svg { width: 1.25rem; height: 1.25rem; } &:hover { background: rgb(0 0 0 / .1); } &:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 35%, transparent); } }
.exit-intent-message { font-size: 1.125rem; line-height: 1.5; color: var(--fg); margin: 0 0 1.25rem; font-weight: 500; @media (max-width: 480px) { font-size: 1rem; } }
.exit-intent-footer { display: flex; align-items: center; justify-content: center; padding-top: 1rem; border-top: 1px solid var(--border); }
.exit-intent-deals { font-size: .8125rem; color: var(--primary); text-decoration: underline; text-underline-offset: 2px; &:hover { color: var(--fg); } }

.ei-calendar-wrap { position: relative; margin-bottom: 22px; }
.ei-calendar { position: relative; padding: 28px 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ei-calendar-fade { display: none; }
.ei-calendar-wrap.has-scroll .ei-calendar-fade { display: block; position: absolute; right: 0; top: 0; bottom: 0; width: 2rem; background: linear-gradient(to right, transparent, hsl(120 25% 97%)); pointer-events: none; z-index: 5; }
.ei-savings { position: absolute; transform: translateX(-50%); font-family: 'Roboto', sans-serif; font-size: .8rem; font-weight: 700; white-space: nowrap; cursor: pointer; &.alt1 { color: var(--ei-opt1); top: 0; } &.alt2 { color: var(--ei-opt2); bottom: 0; } }
.ei-calendar-wrap.has-scroll .ei-savings { display: none; }
.ei-calendar-row { display: flex; gap: 0; width: 100%; }
.ei-day { flex: 1 1 auto; min-width: 22px; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 3rem; background: white; border: 2px solid white; transition: background .25s cubic-bezier(.4, 0, .2, 1), border-color .25s cubic-bezier(.4, 0, .2, 1); &.alt1:not(.current):not(.alt2), &.alt2:not(.current):not(.alt1), &.current:not(.alt1):not(.alt2) { cursor: pointer; } }
.ei-dow { font-size: .625rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .02em; transition: color .25s cubic-bezier(.4, 0, .2, 1); }
.ei-date { font-size: .875rem; font-weight: 600; color: var(--fg); transition: color .25s cubic-bezier(.4, 0, .2, 1); }
.ei-day.current { background: var(--ei-current); border-color: var(--ei-current); .ei-dow, .ei-date { color: white; } }
.ei-day.current + .ei-day.current { border-left: 0; }
.ei-day.alt1::before { content: ''; position: absolute; top: -9px; left: -4px; right: -4px; height: 12px; background: linear-gradient(to bottom, var(--ei-opt1) 3px, transparent 3px); border-radius: 2px 2px 0 0; opacity: 1; transition: opacity .25s cubic-bezier(.4, 0, .2, 1); }
.ei-day.alt2::after { content: ''; position: absolute; bottom: -9px; left: -4px; right: -4px; height: 12px; background: linear-gradient(to top, var(--ei-opt2) 3px, transparent 3px); border-radius: 0 0 2px 2px; opacity: 1; transition: opacity .25s cubic-bezier(.4, 0, .2, 1); }

.exit-intent-content.hover-alt1 .ei-day.current:not(.alt1) { background: white; border-color: var(--ei-current); .ei-dow, .ei-date { color: var(--fg); } }
.exit-intent-content.hover-alt1 .ei-day.alt1 { background: var(--ei-opt1); border-color: var(--ei-opt1); .ei-dow, .ei-date { color: white; } &::before { opacity: 0; } }
.exit-intent-content.hover-alt2 .ei-day.current:not(.alt2) { background: white; border-color: var(--ei-current); .ei-dow, .ei-date { color: var(--fg); } }
.exit-intent-content.hover-alt2 .ei-day.alt2 { background: var(--ei-opt2); border-color: var(--ei-opt2); .ei-dow, .ei-date { color: white; } &::after { opacity: 0; } }
.ei-prices { display: flex; gap: 0; margin-bottom: 1.25rem; }
.ei-price-wrap { flex: 1; padding: 0 .25rem; &:first-child { padding-left: 0; } &:last-child { padding-right: 0; } }
.ei-price-card { width: 100%; display: flex; flex-direction: column; align-items: center; gap: .125rem; padding: .75rem .5rem; border-radius: .5rem; text-align: center; border: 2px solid white; cursor: pointer; transition: background .25s cubic-bezier(.4, 0, .2, 1), border-color .25s cubic-bezier(.4, 0, .2, 1), box-shadow .15s cubic-bezier(.4, 0, .2, 1); &:hover { box-shadow: 0 4px 12px rgb(0 0 0 / .1); } }
.ei-price-card.current { background: var(--ei-current); border-color: var(--ei-current); .ei-price-dates, .ei-price-amount, .ei-per-night { color: white; } }
.ei-price-card.alt1 { border-color: var(--ei-opt1); background: color-mix(in srgb, var(--ei-opt1) 8%, white); }
.ei-price-card.alt2 { border-color: var(--ei-opt2); background: color-mix(in srgb, var(--ei-opt2) 8%, white); }
.ei-price-dates { font-size: .75rem; color: var(--muted); white-space: nowrap; transition: color .25s cubic-bezier(.4, 0, .2, 1); }
.ei-price-amount { font-size: 1.125rem; font-weight: 700; line-height: 1.3; transition: color .25s cubic-bezier(.4, 0, .2, 1); }
.ei-per-night { display: block; font-size: .65rem; font-weight: 500; opacity: .7; transition: color .25s cubic-bezier(.4, 0, .2, 1); }
.ei-price-card.alt1 .ei-price-amount, .ei-price-card.alt1 .ei-per-night { color: var(--ei-opt1); }
.ei-price-card.alt2 .ei-price-amount, .ei-price-card.alt2 .ei-per-night { color: var(--ei-opt2); }

.exit-intent-content.hover-alt1 .ei-price-card.current { background: color-mix(in srgb, var(--ei-current) 8%, white); .ei-price-dates { color: var(--muted); } .ei-price-amount, .ei-per-night { color: var(--ei-current); } }
.exit-intent-content.hover-alt1 .ei-price-card.alt1 { background: var(--ei-opt1); .ei-price-dates, .ei-price-amount, .ei-per-night { color: white; } }
.exit-intent-content.hover-alt2 .ei-price-card.current { background: color-mix(in srgb, var(--ei-current) 8%, white); .ei-price-dates { color: var(--muted); } .ei-price-amount, .ei-per-night { color: var(--ei-current); } }
.exit-intent-content.hover-alt2 .ei-price-card.alt2 { background: var(--ei-opt2); .ei-price-dates, .ei-price-amount, .ei-per-night { color: white; } }

.page-hero { height: 50vh; height: 50svh; min-height: 400px; }
.page-hero-content { position: relative; z-index: 10; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; text-align: center; padding: 0 1.5rem; }
.page-hero h1 { font-size: clamp(2rem, 5vw, 3.75rem); font-weight: 300; color: white; margin-bottom: 1.5rem; line-height: 1; filter: drop-shadow(0 4px 6px rgb(0 0 0 / .3)); max-width: 64rem; }
.page-hero p { color: rgb(255 255 255 / .9); text-transform: uppercase; letter-spacing: .1em; font-size: .875rem; line-height: 1.5; margin-bottom: 1rem; filter: drop-shadow(0 4px 6px rgb(0 0 0 / .3)); }
.faq-page-section { padding: 1.5rem .75rem 3rem; @media (min-width: 768px) { padding: 2rem 1.5rem 4rem; } }
.faq-page-wrapper { display: flex; gap: 2rem; max-width: 72rem; margin: 0 auto; }
.faq-filter-radios { position: absolute; opacity: 0; pointer-events: none; }
.faq-sidebar { display: none; width: 16rem; flex-shrink: 0; @media (min-width: 1024px) { display: block; position: sticky; top: 6rem; align-self: flex-start; background: white; border-radius: 1rem; padding: 1.5rem; box-shadow: var(--shadow-lg); border: 1px solid rgb(0 0 0 / .05); } }
.faq-sidebar-title { font-size: .875rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 1rem; }
.faq-sidebar-nav { display: flex; flex-direction: column; gap: .25rem; }
.faq-sidebar-btn { display: flex; align-items: center; gap: .75rem; width: 100%; padding: .625rem .75rem; border-radius: .5rem; font-size: .875rem; font-weight: 500; color: var(--muted); cursor: pointer; transition: background .15s, color .15s; text-align: left; &:hover { background: rgb(0 0 0 / .05); color: var(--fg); } svg { width: 1rem; height: 1rem; } }
.faq-page-wrapper:has(#filter-all:checked) label[for="filter-all"],
.faq-page-wrapper:has(#filter-basics:checked) label[for="filter-basics"],
.faq-page-wrapper:has(#filter-policies:checked) label[for="filter-policies"],
.faq-page-wrapper:has(#filter-amenities:checked) label[for="filter-amenities"],
.faq-page-wrapper:has(#filter-kitchen:checked) label[for="filter-kitchen"],
.faq-page-wrapper:has(#filter-location:checked) label[for="filter-location"],
.faq-page-wrapper:has(#filter-guests:checked) label[for="filter-guests"] { background: var(--primary); color: white; }
.faq-page-wrapper:has(#filter-basics:checked) .faq-item:not([data-category="basics"]),
.faq-page-wrapper:has(#filter-policies:checked) .faq-item:not([data-category="policies"]),
.faq-page-wrapper:has(#filter-amenities:checked) .faq-item:not([data-category="amenities"]),
.faq-page-wrapper:has(#filter-kitchen:checked) .faq-item:not([data-category="kitchen"]),
.faq-page-wrapper:has(#filter-location:checked) .faq-item:not([data-category="location"]),
.faq-page-wrapper:has(#filter-guests:checked) .faq-item:not([data-category="guests"]) { display: none; }
.faq-page-section .faq-item { background: #f4f5f3; }
.faq-main { flex: 1; min-width: 0; @media (min-width: 768px) { border-radius: 1.5rem; } }
.faq-mobile-filter { display: block; margin-bottom: 1.5rem; label { display: block; font-size: .875rem; font-weight: 500; color: var(--muted); margin-bottom: .5rem; } select { width: 100%; padding: .75rem 1rem; border: 1px solid rgb(0 0 0 / .1); border-radius: .75rem; background: white; font-size: .875rem; font-weight: 500; box-shadow: 0 1px 2px rgb(0 0 0 / .05); } @media (min-width: 1024px) { display: none; } }
.faq-container { background: white; border-radius: 1.5rem; box-shadow: var(--shadow-lg); border: 1px solid rgb(0 0 0 / .05); padding: 1rem; @media (min-width: 640px) { padding: 2rem; } @media (min-width: 768px) { padding: 3rem; } }
.faq-page-section .faq-container { border: none; }
.faq-page-header { text-align: center; margin-bottom: 1.5rem; @media (min-width: 640px) { margin-bottom: 2rem; } @media (min-width: 768px) { margin-bottom: 3rem; } h2 { font-size: 1.375rem; font-weight: 700; margin-bottom: .5rem; @media (min-width: 640px) { font-size: 1.5rem; } @media (min-width: 768px) { font-size: 1.875rem; } } p { color: var(--muted); line-height: 1.75; font-size: 1rem; } }
.faq-contact { text-align: center; margin-top: 2rem; @media (min-width: 640px) { margin-top: 3rem; } h3 { font-size: 1rem; font-weight: 600; margin-bottom: .5rem; @media (min-width: 640px) { font-size: 1.25rem; } @media (min-width: 768px) { font-size: 1.5rem; } } p { color: var(--muted); line-height: 1.5; font-size: .75rem; max-width: 42rem; margin: 0 auto; padding: 0; @media (min-width: 640px) { font-size: .875rem; } @media (min-width: 768px) { font-size: 1rem; } } a { color: var(--primary); font-weight: 500; &:hover { text-decoration: underline; } } }

.weekend-page-section { padding: 2rem 1rem 3rem; @media (min-width: 768px) { padding: 3rem 1.5rem 4rem; } }
.weekend-content { max-width: 42rem; margin: 0 auto; text-align: center; }
.weekend-hero-section { background: white; border-radius: 1.5rem; padding: 2.5rem 2rem; box-shadow: var(--shadow-lg); border: 1px solid rgb(0 0 0 / .05); margin-bottom: 2rem; @media (min-width: 640px) { padding: 3rem 2.5rem; } }
.weekend-subtitle { font-size: 1.125rem; color: var(--muted); margin-bottom: 1.5rem; @media (min-width: 640px) { font-size: 1.25rem; } }
.weekend-price { margin-bottom: 1.5rem; }
.weekend-price .price-label { display: block; font-size: .875rem; color: var(--muted); margin-bottom: .25rem; }
.weekend-price .price-value { display: block; font-size: 2.5rem; font-weight: 700; color: var(--primary); line-height: 1.1; @media (min-width: 640px) { font-size: 3rem; } }
.weekend-price .price-note { display: block; font-size: .75rem; color: var(--muted); margin-top: .25rem; }
.no-cleaning-fee { display: block; font-size: .7rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--primary); margin-bottom: .5rem; }
.weekend-cta { display: inline-flex; align-items: center; justify-content: center; padding: 1rem 2.5rem; font-size: 1.125rem; font-weight: 600; border-radius: 2rem; @media (min-width: 640px) { padding: 1.125rem 3rem; font-size: 1.25rem; } }
.weekend-features { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem 2rem; margin-bottom: 2rem; @media (min-width: 640px) { gap: 1.5rem 3rem; } }
.weekend-feature { display: flex; align-items: center; gap: .5rem; font-size: .875rem; color: var(--muted); svg { width: 18px; height: 18px; color: var(--primary); } @media (min-width: 640px) { font-size: 1rem; svg { width: 20px; height: 20px; } } }
.weekend-urgency { background: var(--section-bg); border-radius: 1rem; padding: 1.25rem 1.5rem; p { font-size: .875rem; color: var(--muted); line-height: 1.6; @media (min-width: 640px) { font-size: 1rem; } } a { color: var(--primary); font-weight: 500; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; transition: color .2s; &:hover { color: var(--fg); } } }
.deal-countdown { display: flex; align-items: center; justify-content: center; gap: .5rem; max-width: 42rem; margin: 0 auto 1.5rem; padding: .75rem 1rem; background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%); border: 1px solid #2196f3; border-radius: .75rem; color: #0d47a1; font-size: .875rem; svg { width: 18px; height: 18px; flex-shrink: 0; } }
.deal-countdown-explainer { max-width: 42rem; margin: 0 auto 1.5rem; padding: 1.25rem 1.5rem; background: linear-gradient(135deg, #fef3e2 0%, #fde9cc 100%); border: 1px solid #f59e0b; border-radius: .75rem; color: #92400e; font-size: .9rem; line-height: 1.7; p { margin: 0; } p + p { margin-top: .75rem; } .countdown-time { display: block; font-weight: 700; font-size: 1.1rem; color: #b45309; font-variant-numeric: tabular-nums; margin-bottom: .25rem; &.inline { display: inline; font-size: inherit; margin-bottom: 0; } } a { color: #b45309; text-decoration: underline; &:hover { color: #92400e; } } }
.gc-amount-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin-bottom: 2rem; }
.gc-amount-btn { padding: .5rem 1rem; background: white; border: 2px solid var(--border); border-radius: .5rem; color: var(--muted); font-size: .875rem; font-weight: 500; text-decoration: none; transition: all .2s; &:hover { border-color: var(--primary); color: var(--primary); } &.active { background: var(--primary); border-color: var(--primary); color: white; } @media (min-width: 640px) { padding: .625rem 1.25rem; font-size: 1rem; } }
.weekend-price .price-hero { font-size: 3rem; font-weight: 700; color: var(--primary); line-height: 1; @media (min-width: 640px) { font-size: 3.5rem; } @media (min-width: 768px) { font-size: 4rem; } }
.weekend-price .price-unit { font-size: 1rem; font-weight: 500; color: var(--muted); margin-left: .25rem; @media (min-width: 640px) { font-size: 1.125rem; } }
.weekend-price .price-total { display: block; font-size: .8125rem; color: var(--muted); margin-top: .5rem; @media (min-width: 640px) { font-size: .875rem; } }

.back-link { display: inline-flex; align-items: center; gap: .5rem; color: var(--primary); font-weight: 500; margin-top: 2rem; &:hover { text-decoration: underline; } }
.legal-section { padding: 3rem 1rem; }
.legal-container { max-width: 56rem; margin: 0 auto; h1 { font-size: 2rem; font-weight: 700; margin-bottom: 2rem; } h2 { font-size: 1.5rem; font-weight: 600; margin: 2rem 0 1rem; color: var(--fg); } h3 { font-size: 1.125rem; font-weight: 600; margin: 1.5rem 0 .75rem; color: var(--fg); } p { color: var(--muted); line-height: 1.75; margin-bottom: 1rem; } ul { color: var(--muted); margin: 1rem 0; padding-left: 1.5rem; list-style: disc; } li { margin-bottom: .5rem; line-height: 1.75; } strong { color: var(--fg); } }
.legal-divider { border-top: 1px solid var(--border); margin: 3rem 0; }
.rules-section { padding: 3rem 1rem; }
.rules-container { max-width: 56rem; margin: 0 auto; }
.rules-intro { font-size: 1.125rem; color: var(--muted); line-height: 1.75; margin-bottom: 2rem; @media (max-width: 768px) { font-size: 14px; line-height: 1.3; } }
.rule-item { margin-bottom: 1.5rem; line-height: 1; h3 { font-size: 1.125rem; font-weight: 600; color: var(--fg); margin-bottom: .5rem; } p { color: var(--muted); line-height: 1.35; } }
.rules-disclaimer { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--border); font-style: italic; color: var(--muted); line-height: 1.5; }

.about-page-section { padding: 2rem 1rem 4rem; @media (min-width: 768px) { padding: 3rem 2rem 5rem; } }
.about-page-section .about-container { max-width: 64rem; margin: 0 auto; }
.about-page-section .about-grid { display: flex; flex-direction: column; gap: 2rem; @media (min-width: 768px) { gap: 3rem; } }
.about-page-section .abt-card { background: white; border-radius: 1.5rem; box-shadow: var(--shadow-lg); border: 1px solid rgb(0 0 0 / .05); padding: 1.5rem; @media (min-width: 768px) { padding: 2.5rem; } h2 { font-size: 1.375rem; font-weight: 700; margin-bottom: 1rem; @media (min-width: 768px) { font-size: 1.75rem; } } p { color: var(--muted); line-height: 1.75; margin-bottom: 1rem; } h3 { font-size: 1rem; font-weight: 600; margin: 1.25rem 0 .5rem; @media (min-width: 768px) { font-size: 1.125rem; } } }
.about-page-section .about-property-details { display: flex; flex-direction: column; gap: .75rem; margin: 1.5rem 0; padding: 1rem; background: #f4f5f3; border-radius: 1rem; }
.about-page-section .about-detail { display: flex; align-items: flex-start; gap: .75rem; font-size: .9375rem; color: var(--muted); i, .lucide { width: 20px; height: 20px; color: var(--primary); flex-shrink: 0; margin-top: 2px; } strong { color: var(--fg); margin-right: .25rem; } }
.about-page-section .about-social { margin-top: 1.5rem; }
.about-page-section .about-social-links { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: .5rem; }
.about-page-section .about-social-link { display: inline-flex; align-items: center; gap: .5rem; padding: .5rem 1rem; background: #f4f5f3; border-radius: 2rem; font-size: .875rem; color: var(--fg); transition: background .2s; i, svg { width: 20px; height: 20px; flex-shrink: 0; } span { display: flex; flex-direction: column; line-height: 1.2; small { font-size: .7rem; color: var(--muted); } } &:hover { background: #e8e9e6; } }
.about-page-section .about-contact-grid { display: grid; gap: 1rem; align-items: stretch; @media (min-width: 1000px) { grid-template-columns: repeat(3, 1fr); } }
.about-page-section .about-contact-card { display: flex; flex-direction: column; height: 100%; padding: 1.25rem; background: #f4f5f3; border-radius: 1rem; h3 { font-size: 1rem; font-weight: 600; margin: 0; line-height: 1.15; } p { font-size: .9375rem; margin-bottom: .5rem; line-height: 1.5; a { color: var(--primary); font-weight: 500; &:hover { text-decoration: underline; } } } @media (min-width: 1000px) { h3 { min-height: 3.25rem; display: flex; align-items: flex-end; } } }
.about-page-section .about-contact-header { display: flex; align-items: center; gap: .75rem; margin-bottom: .75rem; @media (min-width: 1000px) { display: block; } }
.about-page-section .about-contact-icon { width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; i, .lucide { width: 20px; height: 20px; } @media (min-width: 1000px) { width: 44px; height: 44px; margin-bottom: 1rem; i, .lucide { width: 22px; height: 22px; } } }
.about-page-section .about-contact-fast .about-contact-icon { background: rgb(76 175 80 / .15); i, .lucide { color: var(--green); } }
.about-page-section .about-contact-fast .about-contact-meta { font-weight: 500; }
.about-page-section .about-contact-slow .about-contact-icon { background: rgb(158 158 158 / .15); i, .lucide { color: #9e9e9e; } }
.about-page-section .about-contact-chat .about-contact-icon { background: rgb(66 103 178 / .15); i, .lucide { color: #4267b2; } }
.about-page-section .about-contact-meta { display: grid; grid-template-columns: 24px 1fr; align-items: center; column-gap: .5rem; font-size: .75rem; color: var(--muted); margin-top: auto; padding-top: .5rem; > :first-child { width: 24px; height: 24px; } @media (min-width: 1000px) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } }
.about-page-section .about-safety-list { display: grid; gap: .75rem; margin-top: 1rem; @media (min-width: 640px) { grid-template-columns: repeat(2, 1fr); } li { display: flex; align-items: center; gap: .75rem; color: var(--muted); font-size: .9375rem; line-height: 1.5; i, .lucide { width: 20px; height: 20px; flex-shrink: 0; color: var(--primary); } } }
.about-page-section .about-commitment-list { display: grid; gap: 1rem; margin-top: 1rem; li { display: flex; align-items: flex-start; gap: .75rem; color: var(--fg); font-size: .9375rem; line-height: 1.4; i, .lucide { width: 20px; height: 20px; flex-shrink: 0; color: var(--green); margin-top: 2px; } div { display: flex; flex-direction: column; } strong { font-weight: 600; } span { font-size: .8125rem; color: var(--muted); } } }
.about-page-section .about-platforms-grid { display: flex; flex-wrap: wrap; gap: 1rem; margin: 1rem 0; }
.about-page-section .about-platform-link { display: flex; flex-direction: column; gap: .25rem; padding: 1rem 1.5rem; background: #f4f5f3; border-radius: 1rem; transition: background .2s, transform .2s; &:hover { background: #e8e9e6; transform: translateY(-2px); } }
.about-page-section .about-cta-row { display: flex; justify-content: center; align-items: flex-start; gap: 1rem; flex-wrap: wrap; margin-top: 1rem; }
.about-page-section .about-cta-main, .about-page-section .about-cta-alt { display: flex; flex-direction: column; align-items: center; gap: .35rem; }
@media (max-width: 520px) {
  .about-page-section .about-cta-main { order: 3; }
  .about-page-section .about-cta-alt:first-child { order: 1; }
  .about-page-section .about-cta-alt:last-child { order: 2; }
}
.btn-alt { background: linear-gradient(to bottom right, #e8e9e6, #e8e9e6, #d8d9d6); color: var(--fg); box-shadow: var(--shadow-md); &:hover { background: linear-gradient(to bottom right, #dcddd9, #dcddd9, #cccdc9); } @media (min-width: 640px) { margin-top: 1.5rem; } }
.about-page-section .about-fee { font-size: .8rem; color: #d32f2f; }
.about-page-section .about-fee-none { color: var(--primary); font-weight: 600; }
.about-page-section .about-links-grid { display: grid; gap: 1rem; margin-top: 1rem; @media (min-width: 640px) { grid-template-columns: repeat(3, 1fr); } }
.about-page-section .about-policy-link { display: flex; flex-direction: column; gap: .25rem; padding: 1.25rem; background: #f4f5f3; border-radius: 1rem; transition: background .2s, transform .2s; i, .lucide { width: 24px; height: 24px; color: var(--primary); margin-bottom: .5rem; } span { font-weight: 600; color: var(--fg); } small { font-size: .8125rem; color: var(--muted); } &:hover { background: #e8e9e6; transform: translateY(-2px); } }
.about-page-section .about-benefits { display: grid; gap: 1rem; margin: 1rem 0 1.5rem; @media (min-width: 640px) { grid-template-columns: repeat(3, 1fr); } }
.about-page-section .about-benefit { padding: 1.25rem; background: #f4f5f3; border-radius: 1rem; text-align: center; i, .lucide { width: 32px; height: 32px; color: var(--primary); margin-bottom: .5rem; } h3 { font-size: .9375rem; font-weight: 600; margin: 0 0 .25rem; } p { font-size: .8125rem; color: var(--muted); margin: 0; line-height: 1.4; } }
.about-page-section .about-cta-row .btn { padding: .875rem 2rem; }

@media (max-width: 1400px) {
  .hero-group.dates-selected { transform: translate(-50%, -32vh); transform: translate(-50%, -32svh); }
}

@media (max-width: 900px) {
  .hero-group.dates-selected :is(.date-calendar-container, #booking-form, #confirmation-section) { transform: translateY(-2vw); }
}

@media (max-width: 768px) {
  .hero-group { top: 20vh; top: 20svh; }
  .hero.winter-mode .hero-subtitle { font-weight: 300; }
  .hero-group.calendar-open { transform: translate(-50%, -18.5vh); transform: translate(-50%, -18.5svh); }
  .hero-group.dates-selected { transform: translate(-50%, -20vh); transform: translate(-50%, -20svh); }
  .hero-group { padding: 0 12px; }
  .hero-title { font-size: clamp(35px, 5vw, 4.375rem); max-width: min(90vw, 480px); }
  .hero-group.dates-selected .hero-title-wrap { transform: scale(.4); }
  .calendar-dropdown { width: 270px; padding: 8px 12px 12px; }
  .calendar-notice { font-size: 13px; letter-spacing: -.5px; line-height: 1; }
  .calendar-close { padding: 4px; margin: -4px -4px 0 0; }
  .calendar-nav { gap: 10px; }
  .calendar-months { gap: 0; }
  .calendar-month { width: 100%; }
  .calendar-dropdown .nav-btn { padding: 6px; min-width: 40px; min-height: 40px; svg { width: 18px; height: 18px; } }
  .confirmation-glass { padding: 16px 18px; margin: 16px 0; }
  .confirmation-title { font-size: 20px; }
  .confirmation-content { font-size: 13px; .booking-details, .price-breakdown { padding: 12px; } }
}


@media (max-height: 700px) {
  .hero-group.calendar-open { transform: translate(-50%, -17vh); transform: translate(-50%, -17svh); }
  .hero-group.dates-selected { transform: translate(-50%, -27vh); transform: translate(-50%, -27svh); }
  .hero-group.dates-selected .hero-title-wrap { grid-template-rows: 0fr; }
  .hero-group.dates-selected .hero-title { opacity: 0; }
}

@media (max-width: 768px) and (max-height: 700px) {
  .hero-group.dates-selected { transform: translate(-50%, -17vh); transform: translate(-50%, -17svh); }
}

@media (max-height: 900px) {
  .hero-group:is(.dates-selected, .waitlist-open, .gift-card-open) .date-inputs-wrapper,
  .hero-group:is(.dates-selected, .waitlist-open, .gift-card-open) .booking-container { padding: 0; }
  .hero-group:is(.dates-selected, .waitlist-open, .gift-card-open) input:is([type="text"], [type="email"], [type="tel"], [type="number"]) { padding: 8px 12px; }
  .hero-group.dates-selected .guest-pets-row { padding: 8px 12px; }
  .hero-group.dates-selected .price-row.total { padding-top: 6px; }
  .hero-group.dates-selected .price-row.deposit { padding: 6px 0; }
  .hero-group.dates-selected #form-sections-hidden .pricing { min-height: 0; padding: 12px 15px; line-height: 1.2; }
  .hero-group.dates-selected .price-row { font-size: 15px; }
  .hero-group.dates-selected button[type="submit"] { width: 80%; padding: 8px 24px; margin: 2px auto 10px; }
  .hero-group.dates-selected .coupon-applied { padding: 6px 8px; }
  .hero-group:is(.waitlist-open, .gift-card-open) .hero-form { padding: 0; }
  .hero-group.waitlist-open .waitlist-deals-note { line-height: 1.1; }
  .hero-group.waitlist-open .duration-chip { padding: 0 12px; }
  .hero-group:is(.waitlist-open, .gift-card-open) :is(.waitlist-checkbox, .gc-checkbox) { margin-bottom: 0; }
  .hero-group.gift-card-open .gc-amount-chip, .hero-group.gift-card-open .gc-season-btn { padding: 4px 10px; }
}

#turnstile-container { display: flex; justify-content: center; font-size: 0; line-height: 0; margin: -5px 0; }
#turnstile-container:empty { display: none; }
#turnstile-container iframe { border-radius: 8px; }

.rate-limit-popup { display: flex; align-items: center; justify-content: center; &::backdrop { background: rgb(0 0 0 / .6); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } }
.rate-limit-content { background: white; border-radius: 1rem; padding: 2rem; max-width: 400px; text-align: center; box-shadow: 0 25px 50px -12px rgb(0 0 0 / .25); animation: scaleIn .3s; }
.rate-limit-icon { font-size: 3rem; margin-bottom: 1rem; }
.rate-limit-message { font-size: 1rem; color: var(--fg); line-height: 1.625; margin-bottom: 1.5rem; }
.rate-limit-close { padding: .75rem 2rem; background: var(--primary); color: white; border-radius: 9999px; font-weight: 500; transition: opacity .15s; &:hover { opacity: .9; } }

.airbnb-reviews-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 2rem; }
.airbnb-review-card { background: white; border-radius: 12px; padding: 24px; box-shadow: 0 2px 8px rgb(0 0 0 / .08); position: relative; display: flex; flex-direction: column; gap: 12px; }
.airbnb-logo { position: absolute; top: 20px; right: 20px; width: 32px; height: 32px; fill: #FF385C; }
.airbnb-reviewer { display: flex; align-items: center; gap: 12px; }
.airbnb-avatar-wrap { position: relative; width: 48px; height: 48px; flex-shrink: 0; }
.airbnb-avatar-wrap img.airbnb-avatar { position: relative; z-index: 1; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.airbnb-avatar-wrap .airbnb-initials { position: absolute; inset: 0; background: linear-gradient(135deg, var(--primary), hsl(151 25% 45%)); color: white; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 16px; border-radius: 50%; }
.airbnb-avatar { width: 48px; height: 48px; border-radius: 50%; flex-shrink: 0; object-fit: cover; }
div.airbnb-avatar:not(.airbnb-initials) { background: linear-gradient(135deg, var(--primary), hsl(151 25% 45%)); color: white; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 16px; }
.airbnb-reviewer-info { display: flex; flex-direction: column; }
.airbnb-reviewer-name { font-weight: 600; color: #222; font-size: 16px; }
.airbnb-reviewer-location { font-size: 14px; color: #717171; }
.airbnb-stars { display: flex; gap: 2px; svg { width: 16px; height: 16px; fill: #FF385C; stroke: #FF385C; } }
.airbnb-quote { color: #222; font-size: 15px; line-height: 1.5; margin: 0; flex: 1; }
@media (max-width: 1000px) { .airbnb-reviews-grid { grid-template-columns: repeat(2, 1fr); } .airbnb-review-card:nth-child(n+5) { display: none; } }
@media (max-width: 640px) { .airbnb-reviews-grid { grid-template-columns: 1fr; } .airbnb-review-card:nth-child(n+4) { display: none; } }

.bottom-nav { position: fixed; bottom: 0; left: 0; right: 0; z-index: 200; display: flex; justify-content: space-around; align-items: center; background: white; border-top: 1px solid var(--border); padding: 8px 0 max(8px, env(safe-area-inset-bottom)); box-shadow: 0 -4px 20px rgb(0 0 0 / .08); }
.bottom-nav-item { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 12px; color: var(--muted); text-decoration: none; font-size: 10px; font-weight: 500; transition: color .15s; svg { width: 20px; height: 20px; } &:hover, &.active { color: var(--primary); } }
.bottom-nav-book { background: var(--primary); color: white; border-radius: 50%; width: 56px; height: 56px; margin-top: -20px; box-shadow: 0 4px 12px rgb(212 175 55 / .4); justify-content: center; svg { width: 24px; height: 24px; } span { display: none; } &:hover { background: color-mix(in srgb, var(--primary) 90%, black); color: white; } }
body:has(.bottom-nav) { padding-bottom: 80px; }
body:has(.bottom-nav) .mobile-reserve-bar { display: none; }

.messenger-btn {
  --size: 2.25rem;
  --icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3CradialGradient id='g' cx='0' cy='0' r='1' gradientUnits='userSpaceOnUse' gradientTransform='rotate(-57 80 25) scale(85)'%3E%3Cstop stop-color='%2309F'/%3E%3Cstop offset='.61' stop-color='%23A033FF'/%3E%3Cstop offset='.94' stop-color='%23FF5280'/%3E%3Cstop offset='1' stop-color='%23FF7061'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cpath fill-rule='evenodd' d='M40 .9C18 .9 1 17 1 38.8c0 11.4 4.7 21.2 12.3 28a3 3 0 011 2.2l.2 7c.1 2.2 2.4 3.7 4.4 2.8l7.8-3.4a3 3 0 012-.2 43 43 0 0012.3 1.5c22 0 39-16.1 39-37.9C79 17 62 .9 40 .9z' fill='url(%23g)'/%3E%3Cpath fill-rule='evenodd' d='M16.5 49.9l11.5-18.2a5.9 5.9 0 018.5-1.6l9.1 6.9a2.3 2.3 0 002.8 0l12.3-9.4c1.7-1.2 3.8.7 2.7 2.5L52 48.3a5.9 5.9 0 01-8.5 1.5l-9.1-6.8a2.3 2.3 0 00-2.8 0l-12.4 9.4c-1.6 1.2-3.8-.7-2.7-2.5z' fill='%23fff'/%3E%3C/svg%3E");
  position: fixed;
  bottom: 2rem;
  right: 1rem;
  width: var(--size);
  height: var(--size);
  background: white var(--icon) center / 67% no-repeat;
  border-radius: 25%;
  box-shadow: 0 .4rem .8rem rgb(79 78 78 / .25);
  z-index: 100;
  cursor: pointer;
  opacity: 0;
  animation: messengerSlideIn 1s ease-out 2s forwards;
  &:hover .messenger-tooltip { opacity: 1; transform: translateX(-100%) translateY(-50%) translateX(-.5rem); }
  @media (min-width: 640px) { --size: 3rem; bottom: 2rem; right: 2rem; }
  @media (max-width: 767px) { bottom: 5rem; }
}
body:not(.nav-variant-b):has(.mobile-reserve-bar) .messenger-btn { @media (max-width: 767px) { display: none; } }
body:not(:has(.mobile-reserve-bar)) .messenger-btn { @media (max-width: 767px) { bottom: 1.5rem; } }
.messenger-tooltip { position: absolute; top: 50%; left: 0; transform: translateX(-100%) translateY(-50%) translateX(-1rem); background: rgb(0 0 0 / .8); color: white; padding: .375rem .75rem; border-radius: .375rem; font-size: .75rem; font-weight: 500; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; }
body:has(.bottom-nav) .messenger-btn { bottom: 6rem; }
.nav-variant-b .messenger-btn { @media (max-width: 767px) { bottom: 1rem; } }
@keyframes messengerSlideIn { from { transform: translateY(100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

.nav-variant-b { padding-bottom: 0; }
.nav-variant-b .mobile-reserve-bar { display: none !important; }
.header-reserve-btn { display: none; }
@media (max-width: 1023px) {
  .nav-variant-b .header-inner.header-hamburger { display: grid; grid-template-columns: 48px 1fr auto; align-items: center; padding: 0 8px; }
  .nav-variant-b .header-hamburger .mobile-menu-btn { order: 1; justify-self: start; }
  .nav-variant-b .header-hamburger .logo-wrap { order: 2; justify-self: center; margin: 0; height: 4rem; transform: translateX(21px); transition: transform .4s var(--ease-standard), opacity .3s, visibility .3s; &:hover .logo { transform: translateY(var(--logo-hover-y, 16%)) scale(1.4); } }
  .nav-variant-b .header-hamburger .nav { display: none; }
  .nav-variant-b .header-hamburger .btn-book { display: none; }
  .nav-variant-b .header-hamburger .header-reserve-btn { display: block; order: 3; padding: 8px 16px; background: var(--white-25); border: 1px solid var(--white-30); color: white; border-radius: 9999px; font-size: 13px; font-weight: 500; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); cursor: pointer; transform: translateX(calc(100% + 16px)); opacity: 0; pointer-events: none; transition: transform .4s var(--ease-standard), opacity .4s var(--ease-standard), background .15s, border-color .15s; }
  .nav-variant-b .header-hamburger .header-reserve-btn:hover { background: var(--white-40); }
  .nav-variant-b .header.scrolled-dark .header-hamburger .logo-wrap { transform: translateX(0); }
  .nav-variant-b .header.scrolled-dark .header-hamburger .header-reserve-btn { transform: translateX(0); opacity: 1; pointer-events: auto; background: var(--cream); border-color: var(--cream); color: var(--primary); &:hover { background: var(--bg); } }
}
@media (max-width: 768px) {
  .nav-variant-b:has(.calendar-open) .header:not(.scrolled-dark) .logo-wrap { opacity: 0; visibility: hidden; }
}

body.dashboard { font-family: 'DM Sans', system-ui, sans-serif; background: #0a0a0a; color: #e5e5e5; min-height: 100vh; min-height: 100svh; line-height: 1.5; }
.dash-container { max-width: 1400px; margin: 0 auto; padding: 2rem 1rem; }
.dash-table { width: 100%; border-collapse: collapse; margin-top: 60px; }
.dash-table th, .dash-table td { padding: .5rem; text-align: center; border-bottom: 1px solid #2a2a2a; vertical-align: middle; }
.dash-table th { font-size: .7rem; font-weight: 500; color: #737373; padding-bottom: .75rem; }
.dash-table th:first-child { width: 280px; text-align: left; }
.dash-highlight { background: #166534; }
.dash-table th.dash-highlight { border-radius: .375rem .375rem 0 0; color: white; }
.dash-table td.dash-highlight { background: rgb(22 101 52 / .15); }
.dash-col { display: flex; flex-direction: column; gap: .25rem; line-height: 1.3; }
.dash-yurt { position: relative; width: 260px; height: 180px; border-radius: .5rem; overflow: hidden; }
.dash-yurt-img { width: 100%; height: 100%; object-fit: cover; }
.dash-yurt-name { position: absolute; bottom: 0; left: 0; right: 0; padding: .75rem; background: linear-gradient(to top, rgb(0 0 0 / .8), transparent); font-weight: 600; font-size: 1.125rem; text-align: center; color: white; }
.dash-btn { display: inline-flex; padding: .5rem 1.25rem; background: #141414; border: 1px solid #2a2a2a; border-radius: .375rem; text-decoration: none; color: #e5e5e5; font-size: .8125rem; font-weight: 500; transition: all .15s; }
.dash-btn:hover { border-color: #22c55e; background: #166534; transform: translateY(-1px); }
.dash-btn-default { background: #166534; border-color: #22c55e; }
.line-o { color: #6c96db; }
.line-v { color: #4fba77; }
.dash-table td.dash-files { text-align: left; padding-left: 10px; }
.dash-files a { display: block; color: #737373; font-size: .75rem; text-decoration: none; line-height: 1.5; }
.dash-files a:hover { color: #fff; }
.dash-footer { text-align: center; margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid #2a2a2a; color: #737373; font-size: .8125rem; }
.dash-footer a { color: #4fba77; text-decoration: none; transition: color .15s; }
.dash-footer a:hover { color: #6c96db; text-decoration: underline; }
@media (max-width: 900px) {
  .dash-table, .dash-table tbody, .dash-table tr, .dash-table td, .dash-table th { display: block; }
  .dash-table thead { display: none; }
  .dash-table tr { background: #141414; border: 1px solid #2a2a2a; border-radius: .75rem; margin-bottom: 1.5rem; padding: 1rem; }
  .dash-table td { border: 0; padding: .5rem 0; display: flex; justify-content: space-between; align-items: center; }
  .dash-table td::before { content: attr(data-label); font-size: .7rem; color: #737373; font-weight: 500; max-width: 50%; line-height: 1.3; }
  .dash-table td:first-child { padding-bottom: 1rem; margin-bottom: .75rem; border-bottom: 1px solid #2a2a2a; justify-content: center; }
  .dash-table td:first-child::before { display: none; }
  .dash-table td.dash-highlight { background: none; }
  .dash-yurt { width: 100%; height: 200px; }
}

.view-map-link { display: inline-flex; align-items: center; gap: .375rem; padding: 0; background: none; color: rgb(255 255 255 / .7); font-size: .875rem; text-align: left; cursor: pointer; transition: color .4s; svg { width: 1rem; height: 1rem; } &:hover { color: var(--primary); } }

.locations-content { width: 90vw; max-width: 1200px; height: 85vh; display: flex; flex-direction: column; }
.locations-tabs { width: calc(100% - 60px); margin: .75rem auto; @media (min-width: 768px) { display: none; } }
#loc-view-map:checked ~ .tabs label[for="loc-view-map"],
#loc-view-list:checked ~ .tabs label[for="loc-view-list"] { background: var(--bg); color: var(--fg); box-shadow: 0 1px 2px rgb(0 0 0 / .05); }
.locations-grid { flex: 1; min-height: 0; overflow: hidden; gap: 0; margin: 0; @media (min-width: 768px) { grid-template-columns: 60% 40%; } @media (min-width: 1024px) { grid-template-columns: 70% 30%; } }
.locations-grid .location-map, .locations-grid .location-list { border-radius: 0; border: 0; min-height: 300px; @media (min-width: 768px) { min-height: 400px; } }
.locations-grid .location-list { border-left: 1px solid var(--border); }
@media (max-width: 767px) { #loc-view-map:checked ~ .location-grid .location-list, #loc-view-list:checked ~ .location-grid .location-map { display: none; } }
.location-list-item.current { background: hsl(151 20% 30% / .08); }
.current-tag, .upcoming-tag { display: none; font-size: .625rem; font-weight: 500; text-transform: uppercase; letter-spacing: .5px; padding: .125rem .375rem; border-radius: 3px; margin-left: .375rem; vertical-align: middle; @media (min-width: 1024px) { display: inline-block; } }
.current-tag { background: var(--primary); color: white; }
.upcoming-tag { background: var(--muted); color: white; }
.location-list-item .icons { display: flex; align-items: center; gap: .5rem; margin-left: .5rem; .lucide, .external-icon, .instagram-icon { width: 1rem; height: 1rem; color: var(--muted); flex-shrink: 0; } }
.ig-link { cursor: pointer; display: flex; &:hover .lucide, &:hover .instagram-icon { color: var(--primary); } }
.location-list-item.upcoming { opacity: .6; }
.location-list-item.upcoming:has(.prebook) { opacity: 1; }
.location-list-item.upcoming .name { color: var(--muted); }
.location-list-item .prebook { color: #c27f04; font-weight: 500; }
.location-list-item:not(.upcoming) + .upcoming-divider { margin-top: 0; }
.location-list-item:not(.upcoming):has(+ .upcoming-divider) { border-bottom: none; }
.upcoming-divider { display: flex; align-items: center; gap: .75rem; padding: .5rem 1rem; font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); &::before, &::after { content: ''; flex: 1; height: 1px; background: var(--border); } }
.locations-investor { display: flex; align-items: center; justify-content: center; gap: .5rem; padding: .75rem 1rem; border-top: 1px solid var(--border); color: var(--primary); font-weight: 500; font-size: .875rem; cursor: pointer; background: none; width: 100%; transition: background .2s; &:hover { background: rgb(0 0 0 / .05); } svg { width: 1rem; height: 1rem; } }

.text-gray { color: #9f9f9f; }

.faq-sidebar-btn.active { background: var(--primary); color: white; }
.faq-page-wrapper:has(.dir-map) {
  .faq-sidebar-nav { gap: 0; }
  .faq-sidebar-btn { padding: 0; padding-left: 5px; border-left: 3px solid transparent; border-radius: 0; &:hover { background: none; border-left-color: #9ca3af; } }
.faq-sidebar-btn.active { background: none; color: var(--primary-glow); border-left-color: var(--primary-glow); svg { color: var(--primary-glow); } }
}
.dir-count { margin-left: auto; font-size: .75rem; opacity: .7; }
.dir-header { margin-bottom: 1.5rem; h2 { font-size: 1.5rem; font-weight: 600; margin-bottom: .25rem; } p { color: var(--muted); font-size: .875rem; } }
.dir-map { height: clamp(400px, 60vh, 800px); background: #e5e7eb; }
.dir-content { padding: 2rem; }
.faq-main:has(.dir-map) .faq-mobile-filter { padding: 0 1rem; }
.dir-list { display: flex; flex-direction: column; gap: 1.5rem; }
.dir-item { padding: 1.25rem; background: #f4f5f3; border-radius: .75rem; position: relative; transition: box-shadow .3s; h3 { font-size: 1.125rem; font-weight: 600; margin-bottom: .5rem; } &.highlight { box-shadow: 0 0 0 3px var(--primary); } &[data-num]::before { content: attr(data-num); position: absolute; top: 1rem; right: 1rem; width: 1.5rem; height: 1.5rem; background: #3b82f6; color: #fff; border-radius: 50%; font-size: .75rem; font-weight: 600; display: flex; align-items: center; justify-content: center; } }
.dir-dist { font-size: .75rem; font-weight: 500; color: var(--muted); background: rgb(0 0 0 / .06); padding: .125rem .5rem; border-radius: 1rem; margin-left: .5rem; white-space: nowrap; }
.dir-meta { display: flex; flex-direction: column; gap: .25rem; font-size: .875rem; color: var(--muted); margin-bottom: .75rem; strong { color: var(--text); font-weight: 500; margin-right: .5rem; } a { color: var(--primary); &:hover { text-decoration: underline; } } }
.dir-desc { font-size: .875rem; color: var(--muted); line-height: 1.625; }
.dir-empty { text-align: center; color: var(--muted); padding: 2rem; }
.dir-related { margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid rgb(0 0 0 / .08); h3 { font-size: 1rem; font-weight: 600; color: var(--text); margin-bottom: 1rem; } }
.dir-related-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: .75rem; }
.dir-related-link { display: flex; align-items: center; gap: .625rem; padding: .875rem 1rem; background: #f4f5f3; border-radius: .5rem; text-decoration: none; color: var(--text); transition: background .15s, transform .15s; svg { width: 1.125rem; height: 1.125rem; color: var(--primary); flex-shrink: 0; } span:first-of-type { font-size: .875rem; font-weight: 500; } &:hover { background: #e8eae5; transform: translateY(-1px); } }
.dir-related-count { margin-left: auto; font-size: .75rem; color: var(--muted); white-space: nowrap; }

.page-404 { min-height: 100vh; min-height: 100svh; display: flex; background: hsl(0 0% 8%); }
.hero-404 { position: relative; flex: 1; display: flex; align-items: center; justify-content: center; min-height: 100vh; min-height: 100svh; padding: 2rem; }
.hero-404 .hero-bg { position: absolute; inset: 0; background-position: center; background-size: cover; &::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, rgb(0 0 0 / .3), rgb(0 0 0 / .5) 50%, rgb(0 0 0 / .7)); } }
.hero-404 .content { position: relative; z-index: 10; text-align: center; max-width: 600px; margin-bottom: 60px; animation: fadeUp .8s ease-out; }
.hero-404 .logo { width: 120px; margin: 0 auto 2rem; filter: brightness(0) invert(1); opacity: .9; }
.hero-404 .code { font-size: clamp(4rem, 6vw, 6rem); font-weight: 700; letter-spacing: -.05em; line-height: 1; background: white; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; opacity: .2; margin-bottom: .5rem; }
.hero-404 h1 { font-size: clamp(1.5rem, 4vw, 2.25rem); font-weight: 300; margin-bottom: 1rem; letter-spacing: .02em; color: white; }
.hero-404 .tagline { font-size: clamp(.875rem, 2.5vw, 1.125rem); color: var(--white-80); line-height: 1.7; margin-bottom: 2.5rem; font-weight: 300; }
.hero-404 .buttons { display: flex; gap: 1rem; justify-content: center; margin-bottom: 2rem; }
.hero-404 .btn { padding: .875rem 2rem; margin-top: 0; }
.hero-404 .explore-btn { display: inline-flex; align-items: center; gap: .5rem; padding: .625rem 1.25rem; background: none; border: 1px dashed var(--white-30); border-radius: .5rem; color: var(--white-70); font-size: .8125rem; font-family: inherit; cursor: pointer; transition: all .3s; svg { width: 1rem; height: 1rem; } &:hover { border-color: var(--white-50); color: white; background: var(--white-10); } }
.hero-404 .trails { position: absolute; bottom: 3rem; left: 50%; transform: translateX(-50%); display: flex; gap: 2rem; font-size: .8125rem; color: var(--white-80); white-space: nowrap; z-index: 10; a { color: inherit; text-decoration: none; transition: color .2s; &:hover { color: white; text-decoration: underline; } } }
.hero-404 .compass { position: absolute; top: 2rem; right: 2rem; width: 60px; height: 60px; opacity: .15; animation: spin 60s linear infinite; z-index: 5; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 640px) { .hero-404 .compass { width: 40px; height: 40px; top: 1rem; right: 1rem; } }
@media (max-width: 430px) { .hero-404 { padding: 1rem; } .hero-404 .logo { width: 100px; margin-bottom: 1.5rem; } .hero-404 .tagline { margin-bottom: 1.5rem; } .hero-404 .buttons { gap: .5rem; } .hero-404 .btn { padding: .75rem 1.25rem; font-size: .875rem; } .hero-404 .trails { bottom: 1rem; gap: 1rem; font-size: .75rem; } }

.splash-page { min-height: 100vh; min-height: 100svh; background: linear-gradient(135deg, #1a2f23 0%, #0f1a14 50%, #1a2520 100%); color: white; overflow-x: hidden; padding-bottom: 0 !important; }
.splash-container { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; }
.splash-header { padding: 1.5rem; text-align: center; }
.splash-badge { display: inline-flex; align-items: center; gap: .5rem; padding: .625rem 1.25rem; background: linear-gradient(135deg, #d4af37 0%, #b8942e 100%); color: #1a1a1a; font-size: .875rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; border-radius: 9999px; box-shadow: 0 4px 20px rgb(212 175 55 / .3); animation: splash-pulse 3s ease-in-out infinite; }
@keyframes splash-pulse { 0%, 100% { box-shadow: 0 4px 20px rgb(212 175 55 / .3); } 50% { box-shadow: 0 4px 30px rgb(212 175 55 / .5); } }
.splash-main { flex: 1; display: grid; gap: 2rem; padding: 1rem 1.5rem 2rem; max-width: 1200px; margin: 0 auto; width: 100%; @media (min-width: 1024px) { grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; padding: 2rem; } }
.splash-content { text-align: center; @media (min-width: 1024px) { text-align: left; } }
.splash-title { font-size: clamp(2.5rem, 8vw, 4rem); font-weight: 700; line-height: 1.1; margin-bottom: .75rem; background: linear-gradient(135deg, #fff 0%, #d4af37 50%, #fff 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; background-size: 200% auto; animation: splash-shimmer 4s linear infinite; }
@keyframes splash-shimmer { to { background-position: 200% center; } }
.splash-tagline { font-size: 1.25rem; font-weight: 300; color: rgb(255 255 255 / .9); margin-bottom: 1rem; letter-spacing: .02em; }
.splash-location { display: inline-flex; align-items: center; gap: .5rem; font-size: 1rem; color: rgb(255 255 255 / .7); margin-bottom: 1.5rem; svg { width: 1.125rem; height: 1.125rem; color: #d4af37; } }
.splash-features { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; margin-bottom: 1.5rem; @media (min-width: 1024px) { justify-content: flex-start; } }
.splash-feature { display: flex; align-items: center; gap: .5rem; padding: .625rem 1rem; background: rgb(255 255 255 / .08); border: 1px solid rgb(255 255 255 / .1); border-radius: .5rem; font-size: .875rem; color: rgb(255 255 255 / .9); svg { width: 1rem; height: 1rem; color: #d4af37; } }
.splash-description { font-size: 1rem; line-height: 1.75; color: rgb(255 255 255 / .7); margin: 0 auto 2rem; max-width: 480px; @media (min-width: 1024px) { margin-left: 0; margin-right: auto; } }
.splash-actions { display: flex; align-items: center; gap: 1rem; margin: 0 auto 1.5rem; flex-wrap: wrap; justify-content: center; @media (min-width: 1024px) { justify-content: flex-start; margin-left: 0; } }
.splash-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .875rem 1.5rem; border-radius: 9999px; font-size: .9375rem; font-weight: 500; transition: all .3s; flex-shrink: 0; svg { width: 1.125rem; height: 1.125rem; } }
.splash-btn-primary { background: linear-gradient(135deg, #d4af37 0%, #b8942e 100%); color: #1a1a1a; box-shadow: 0 4px 20px rgb(212 175 55 / .3); &:hover { transform: translateY(-2px); box-shadow: 0 6px 25px rgb(212 175 55 / .4); } }
.splash-discount { font-size: .8125rem; color: rgb(255 255 255 / .7); line-height: 1.4; text-align: center; @media (min-width: 1024px) { text-align: left; } }
.splash-explore-btn { display: inline-flex; align-items: center; gap: .5rem; padding: .625rem 1.25rem; background: none; border: none; color: rgb(255 255 255 / .7); font-size: .8125rem; font-family: inherit; cursor: pointer; transition: all .3s; margin: 0 auto; svg { width: 1rem; height: 1rem; } &:hover { color: white; } @media (min-width: 1024px) { margin-left: 0; } }
.splash-meanwhile { padding: 1.5rem; background: rgb(255 255 255 / .05); border: 1px solid rgb(255 255 255 / .1); border-radius: 1rem; max-width: 400px; margin: 0 auto; @media (min-width: 1024px) { margin-left: 0; } }
.splash-meanwhile-label { font-size: .875rem; color: rgb(255 255 255 / .6); margin-bottom: .75rem; }
.splash-yurt-link { display: flex; align-items: center; gap: .75rem; padding: .75rem 1rem; background: rgb(255 255 255 / .08); border-radius: .5rem; transition: all .3s; &:hover { background: rgb(255 255 255 / .12); transform: translateX(4px); } svg { width: 1rem; height: 1rem; color: #d4af37; margin-left: auto; } }
.splash-yurt-name { font-weight: 600; color: white; }
.splash-yurt-location { font-size: .875rem; color: rgb(255 255 255 / .6); margin-left: .5rem; }
.splash-map-section { display: flex; flex-direction: column; gap: 1.5rem; }
.splash-map-container { position: relative; border-radius: 1rem; overflow: hidden; box-shadow: 0 20px 50px rgb(0 0 0 / .3); }
.splash-map { height: 300px; background: #1a2f23; @media (min-width: 768px) { height: 400px; } }
.splash-map-legend { position: absolute; bottom: 1rem; left: 1rem; display: flex; gap: 1rem; padding: .625rem 1rem; background: rgb(0 0 0 / .7); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-radius: .5rem; font-size: .75rem; }
.legend-item { display: flex; align-items: center; gap: .375rem; color: rgb(255 255 255 / .9); }
.legend-dot { width: .625rem; height: .625rem; border-radius: 50%; border: 2px solid white; }
.legend-dot-coming { background: #f59e0b; }
.legend-dot-active { background: #3b82f6; }
.splash-other-locations { padding: 1.25rem; background: rgb(255 255 255 / .05); border: 1px solid rgb(255 255 255 / .1); border-radius: 1rem; h3 { font-size: 1rem; font-weight: 600; color: white; margin-bottom: 1rem; } }
.splash-locations-list { display: flex; flex-direction: column; gap: .75rem; }
.splash-location-card { display: flex; align-items: center; gap: .75rem; padding: .875rem 1rem; background: rgb(255 255 255 / .05); border: 1px solid rgb(255 255 255 / .1); border-radius: .625rem; transition: all .3s; svg { width: 1rem; height: 1rem; color: rgb(255 255 255 / .4); flex-shrink: 0; } &:hover { background: rgb(255 255 255 / .08); border-color: rgb(255 255 255 / .2); } &.has-prebook { border-color: #d4af37; } &.has-prebook:hover { background: rgb(212 175 55 / .1); } }
.splash-location-info { flex: 1; min-width: 0; }
.splash-location-name { display: block; font-weight: 500; color: white; font-size: .9375rem; }
.splash-location-meta { display: block; font-size: .8125rem; color: rgb(255 255 255 / .5); }
.splash-prebook { display: inline-block; margin-top: .25rem; padding: .125rem .5rem; background: linear-gradient(135deg, #d4af37 0%, #b8942e 100%); color: #1a1a1a; font-size: .6875rem; font-weight: 600; border-radius: 9999px; text-transform: uppercase; letter-spacing: .03em; }
.splash-footer { padding: 2rem 1.5rem; text-align: center; border-top: 1px solid rgb(255 255 255 / .1); p { font-size: .8125rem; color: rgb(255 255 255 / .5); margin-bottom: .25rem; a { color: #d4af37; &:hover { text-decoration: underline; } } } }
.splash-footer-note { font-size: .6875rem !important; color: rgb(255 255 255 / .3) !important; }

@media (max-width: 374px) {
  .about-sidebar { gap: .75rem; }
  .about-image-wrapper { width: 120px; }
  .about-meta { min-width: 0; }
  .airbnb-badge { width: 150px; }
  .addons-section { padding: 6px 10px; label { font-size: 15px; } input[type="checkbox"] { width: 18px; height: 18px; margin-right: 8px; } }
  .guest-pets-row { padding: 10px; }
  .guests-label { margin-right: 12px; font-size: 15px; }
  .counter-btn { width: 26px; height: 26px; font-size: 16px; }
  .guest-count { width: 32px; font-size: 15px; }
  .vertical-divider { margin: 0 12px; }
  .pets-section { padding: 0 8px 0 4px; }
  .pricing { padding: 16px 12px; }
  .price-row { font-size: 15px; &.total { font-size: 16px; } }
  .night-promo { gap: 8px; padding: 8px 10px; font-size: 12px; button { padding: 5px 10px; font-size: 11px; } }
  .rules-accept { gap: 6px; font-size: 14px; flex-wrap: wrap; input { width: 18px; height: 18px; } }
  .rules-link { font-size: 13px; }
}

.cache-warning {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(135deg, #b45309 0%, #92400e 100%);
  color: white;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  z-index: 1000;
  transform: translateY(100%);
  opacity: 0;
  transition: transform .3s ease, opacity .3s ease;
  box-shadow: 0 -2px 10px rgb(0 0 0 / .2);
  &.visible { transform: translateY(0); opacity: 1; }
  i, .lucide { flex-shrink: 0; width: 20px; height: 20px; }
  span { flex: 1; line-height: 1.4; }
  @media (max-width: 600px) { font-size: 13px; padding: 10px 16px; gap: 10px; }
}

.hero-form-link {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: white;
  font-size: 14px;
  margin-top: 12px;
  cursor: pointer;
  opacity: .85;
  transform: scale(1.05);
  transition: transform .25s var(--ease-standard), opacity .2s;
  transform-origin: center;
  will-change: transform, opacity;
  pointer-events: auto;
  svg { width: 16px; height: 16px; }
  &:hover { transform: scale(1.1); opacity: 1; }
  &.hidden { display: none; }
}

.hero-form {
  display: none;
  background: var(--glass-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 16px;
  padding: 16px;
  margin-top: 12px;
  border: 1px solid var(--glass-border);
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / .1);
  width: 360px;
  max-width: 90vw;
  animation: slideDown .3s ease-out;
  pointer-events: auto;
  &.open { display: block; }
}

.hero-form input:is([type="text"], [type="email"], [type="tel"], [type="number"]) {
  width: 100%;
  padding: 12px;
  background: var(--glass-overlay);
  border: 1px solid var(--white-25);
  border-top: none;
  border-radius: 0;
  color: var(--white-95);
  font-size: 16px;
  backdrop-filter: blur(8px);
  transition: border-color .2s, background .2s;
  &::placeholder { color: var(--white-50); }
  &:focus { outline: none; border-color: var(--white-50); background: var(--white-25); position: relative; z-index: 1; }
}

.waitlist-inputs, .gc-inputs {
  display: flex;
  flex-direction: column;
  margin-bottom: 8px;
  border-radius: 8px;
  overflow: hidden;
  input:first-child { border-top: 1px solid var(--white-25); border-top-left-radius: 8px; border-top-right-radius: 8px; }
  input:last-child { border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; }
}

.waitlist-form .iti { border-radius: 0; }
.waitlist-form .iti input { border-radius: 0; }
.waitlist-inputs .iti:last-child input { border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; }

@media (max-width: 767px) {
  .hero-form input:is([type="text"], [type="email"], [type="tel"], [type="number"]) { padding: 10px 12px; font-size: 15px; }
}

.waitlist-row {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
  input { flex: 1; margin-bottom: 0; }
}

.waitlist-date-input {
  position: relative;
  flex: 1;
  input { width: 100%; padding-right: 36px; }
  svg { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--white-50); pointer-events: none; }
}

.waitlist-date-input .calendar-dropdown.waitlist-picker {
  position: absolute;
  top: 30px;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 0;
  width: auto;
  z-index: 200;
}

.calendar-dropdown.waitlist-picker {
  background: transparent;
  border: 0;
  padding: 0;
  box-shadow: none;
}

.waitlist-calendar {
  position: relative;
  background: white;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgb(0 0 0 / .15);
  padding: 12px;
}

.waitlist-calendar .calendar-close {
  position: absolute;
  top: -12px;
  right: -12px;
  margin: 0;
  z-index: 10;
  border: 1px solid var(--white-20);
  background: rgb(0 0 0 / .5);
  color: white;
  border-radius: 9999px;
  width: 28px;
  height: 28px;
  cursor: pointer;
  transition: transform .15s ease, background-color .15s ease;
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / .1);
  padding: 0;
  svg { width: 18px; height: 18px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
  &:hover { transform: scale(1.05); background: rgb(0 0 0 / .8); }
}

.waitlist-label {
  display: block;
  font-size: 13px;
  color: var(--white-70);
  margin-bottom: 6px;
  font-weight: 500;
}

.duration-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-bottom: 12px;
}

.duration-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--white-10);
  border: 1px solid var(--white-20);
  border-radius: 20px;
  color: var(--white-80);
  font-size: 13px;
  cursor: pointer;
  transition: all .2s;
  input { display: none; }
  &:hover { background: var(--white-20); border-color: var(--white-30); }
  &:has(input:checked) { background: rgb(34 197 94 / .25); border-color: rgb(34 197 94 / .6); color: #86efac; }
}

.waitlist-section, .gc-section {
  margin: 8px 0;
  padding: 10px 12px;
  background: var(--white-08);
  border: 1px solid var(--white-20);
  border-radius: 8px;
}

.waitlist-section-title, .gc-section-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--white-95);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
  svg { width: 14px; height: 14px; }
}

.waitlist-deals-section {
  margin: 8px 0;
  padding: 10px 12px;
  background: linear-gradient(135deg, rgb(251 191 36 / .15), rgb(245 158 11 / .1));
  border: 1px solid rgb(251 191 36 / .3);
  border-radius: 8px;
}

.waitlist-deals-title {
  font-size: 15px;
  font-weight: 600;
  color: #ffe281;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
  svg { width: 14px; height: 14px; }
}

.waitlist-deals-note {
  font-size: 14px;
  line-height: 1.3;
  color: var(--white-80);
}

.waitlist-checkbox, .gc-checkbox {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  color: var(--white-95);
  font-size: 14.5px;
  cursor: pointer;
  input { width: 18px; height: 18px; margin-right: 10px; cursor: pointer; accent-color: var(--green); }
  &.hidden { display: none; }
}

.waitlist-btn {
  width: 100%;
  padding: 10px;
  border: none;
  border-radius: 50px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: opacity .2s, transform .2s;
  margin-top: 10px;
  &:hover:not(:disabled) { opacity: .9; transform: scale(1.02); }
  &:disabled { opacity: .5; cursor: not-allowed; }
}

.waitlist-btn-primary {
  background: var(--cream);
  color: #333;
  &:disabled { opacity: 1; background: rgb(34 197 94 / .3); color: white; cursor: default; }
}

.waitlist-btn-deals {
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  color: #1a1a1a;
}

.waitlist-success {
  text-align: center;
  padding: 20px;
  h4 { font-size: 18px; color: white; margin: 0 0 8px; }
  p { color: var(--white-70); font-size: 14px; margin: 0; }
  svg { width: 48px; height: 48px; color: var(--green); margin-bottom: 12px; }
}

.day-cell.waitlistable, .day-cell.gc-selectable {
  cursor: pointer;
  position: relative;
  &:active { background: var(--white-10); }
  @media (hover: hover) { &:hover { background: var(--white-10); } }
}

.day-cell.gc-selectable.today {
  background: rgb(34 197 94 / .15);
  &:active { background: rgb(34 197 94 / .25); }
  @media (hover: hover) { &:hover { background: rgb(34 197 94 / .25); } }
}

.day-cell.waitlistable {
  @media (hover: hover) {
    &:hover::after {
      content: 'Join Waitlist';
      position: absolute;
      bottom: 100%;
      left: 50%;
      transform: translateX(-50%);
      padding: 4px 8px;
      background: rgb(30 30 30 / .95);
      color: white;
      font-size: 11px;
      white-space: nowrap;
      border-radius: 4px;
      pointer-events: none;
      z-index: 100;
    }
  }
}


.gc-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px;
}

.gc-label {
  width: 60px;
  font-size: 14px;
  color: var(--white-80);
  text-align: left;
  font-weight: 500;
}

.gc-amounts, .gc-seasons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.gc-amount-chip {
  display: flex;
  align-items: center;
  padding: 6px 12px;
  background: var(--white-10);
  border: 1px solid var(--white-20);
  border-radius: 20px;
  color: var(--white-80);
  font-size: 13px;
  cursor: pointer;
  transition: all .2s;
  input[type="radio"] { display: none; }
  &:hover { background: var(--white-20); border-color: var(--white-30); }
  &:has(input[type="radio"]:checked) { background: rgb(34 197 94 / .25); border-color: rgb(34 197 94 / .6); color: #86efac; }
}

.gc-custom-chip {
  cursor: text;
  input[type="number"] {
    width: 44px;
    padding: 0;
    margin: 0;
    background: transparent;
    border: none;
    color: var(--white-95);
    font-size: inherit;
    line-height: inherit;
    height: 1em;
    appearance: textfield;
    -moz-appearance: textfield;
    &::-webkit-outer-spin-button, &::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
    &::placeholder { color: var(--white-40); }
    &:focus { outline: none; }
  }
  &:has(input:focus), &:has(input:not(:placeholder-shown)) { background: rgb(34 197 94 / .25); border-color: rgb(34 197 94 / .6); color: #86efac; }
}

.gc-dollar {
  font-size: inherit;
  color: inherit;
}

.gc-season-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  background: var(--white-10);
  border: 1px solid var(--white-20);
  border-radius: 20px;
  color: var(--white-80);
  font-size: 13px;
  cursor: pointer;
  transition: all .2s;
  svg { width: 14px; height: 14px; }
  &:hover { background: var(--white-20); }
  &.selected {
    &[data-season="summer"] { background: rgb(251 191 36 / .2); border-color: rgb(251 191 36 / .5); color: #fcd34d; }
    &[data-season="winter"] { background: rgb(59 130 246 / .2); border-color: rgb(59 130 246 / .5); color: #93c5fd; }
  }
}

.gc-code-row {
  display: flex;
  align-items: stretch;
  margin: 8px;
  @media (min-height: 900px) { margin: 8px 0; }
  background: var(--glass-overlay);
  border: 1px solid var(--white-25);
  border-radius: 8px;
  overflow: hidden;
}

.gc-code-prefix {
  display: flex;
  align-items: center;
  padding: 0 0 0 12px;
  font-size: 16px;
  color: var(--white-50);
  user-select: none;
}

.gc-code-row input {
  flex: 1;
  padding: 12px 12px 12px 0;
  background: transparent;
  border: none !important;
  color: var(--white-95);
  font-size: 16px;
  text-transform: uppercase;
  &::placeholder { color: var(--white-50); }
  &:focus { outline: none; }
}

.gc-message-wrap {
  position: relative;
  margin: 8px;
  @media (min-height: 900px) { margin: 8px 0; }
  textarea {
    width: 100%;
    padding: 8px 12px;
    padding-bottom: 20px;
    background: var(--glass-overlay);
    border: 1px solid var(--white-25);
    border-radius: 8px;
    color: var(--white-95);
    font-size: 14px;
    letter-spacing: -0.2px;
    resize: none;
    &::placeholder { color: var(--white-50); }
    &:focus { outline: none; border-color: var(--white-50); }
  }
}

.gc-char-count {
  position: absolute;
  right: 8px;
  bottom: 4px;
  font-size: 11px;
  color: var(--white-40);
  pointer-events: none;
}

@media (max-width: 767px) {
  .gc-code-row input { padding: 10px 12px; padding-left: 0; font-size: 15px; }
}

.gc-delivery-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 8px;
}

.gc-schedule-wrap {
  display: none;
  flex: 1;
  &.show { display: block; }
}

.gc-date-input {
  position: relative;
  input { width: 100%; padding-right: 36px; border-radius: 8px !important; border: 1px solid var(--white-25) !important; cursor: pointer; }
  svg { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--white-50); pointer-events: none; }
}

.gc-date-input .calendar-dropdown.gc-picker {
  position: absolute;
  bottom: 100%;
  top: auto;
  left: 0;
  margin-bottom: 4px;
  width: auto;
  z-index: 200;
  background: transparent;
  border: 0;
  padding: 0;
  box-shadow: none;
}

.gc-tz-note {
  font-size: 13px;
  color: var(--white-40);
  margin: 4px 0 8px;
}

.gc-btn-row {
  display: flex;
  gap: 8px;
  margin: 8px;
  @media (min-height: 900px) { margin: 12px 0 0; }
}

.gc-btn {
  flex: 1;
  padding: 12px 16px;
  border: none;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all .2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  svg { width: 16px; height: 16px; }
  &:disabled { opacity: .5; cursor: not-allowed; }
}

.gc-btn-preview {
  background: var(--white-20);
  color: var(--white-95);
  &:hover:not(:disabled) { background: var(--white-30); }
}

.gc-btn-purchase {
  background: var(--cream);
  color: #333;
  &:hover:not(:disabled) { opacity: .9; }
}

.gc-preview-modal {
  display: flex;
  align-items: center;
  justify-content: center;
  &::backdrop { background: rgb(0 0 0 / .8); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
}

.gc-preview-content {
  position: relative;
  width: 100%;
  max-width: 500px;
  animation: slideDown .3s ease-out;
}

.gc-preview-close {
  position: absolute;
  top: -12px;
  right: -12px;
  width: 32px;
  height: 32px;
  background: white;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgb(0 0 0 / .2);
  transition: transform .2s;
  z-index: 1;
  svg { width: 18px; height: 18px; color: #333; }
  &:hover { transform: scale(1.1); }
}

.gc-preview-card {
  position: relative;
  aspect-ratio: 16/10;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgb(0 0 0 / .5);
}

.gc-preview-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: opacity .5s;
}

.gc-preview-bg-summer { opacity: 1; }
.gc-preview-bg-winter { opacity: 0; }
.gc-preview-card.winter {
  .gc-preview-bg-summer { opacity: 0; }
  .gc-preview-bg-winter { opacity: 1; }
}

.gc-preview-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgb(0 0 0 / .5) 0%, rgb(0 0 0 / .3) 100%);
}

.gc-preview-inner {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  text-align: center;
  color: white;
}

.gc-preview-logo {
  position: absolute;
  top: 16px;
  left: 16px;
  height: 28px;
  width: auto;
  filter: brightness(0) invert(1);
}

.gc-preview-value {
  font-size: 3rem;
  font-weight: 700;
  text-shadow: 0 2px 10px rgb(0 0 0 / .3);
}

.gc-preview-subtitle {
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 3px;
  opacity: .9;
}

.gc-preview-message {
  font-style: italic;
  font-size: 14px;
  max-width: 80%;
  margin: 12px 0;
  opacity: .9;
  line-height: 1.4;
  &:empty { display: none; }
}

.gc-preview-code {
  font-size: 13px;
  font-family: monospace;
  background: rgb(255 255 255 / .2);
  padding: 6px 14px;
  border-radius: 6px;
  margin-top: 10px;
}

.gc-preview-recipient {
  font-size: 14px;
  margin-top: 8px;
  opacity: .9;
}

.gc-download-pending { opacity: .7; }
.gc-download-pending:not(.gc-download-failed) { pointer-events: none; }
.gc-download-spinner { display: none; margin-right: 6px; }
.gc-download-pending:not(.gc-download-failed) .gc-download-spinner { display: inline-flex; animation: spin 1s linear infinite; }

.gc-preview-footer {
  position: absolute;
  bottom: 14px;
  left: 20px;
  right: 20px;
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  opacity: .7;
}

.toast-notification {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 24px;
  background: rgb(20 20 20 / .85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgb(255 255 255 / .1);
  color: white;
  border-radius: 16px;
  font-size: 14px;
  font-weight: 500;
  box-shadow: 0 8px 32px rgb(0 0 0 / .3), inset 0 1px 0 rgb(255 255 255 / .05);
  opacity: 0;
  transition: transform .4s var(--ease-bouncy), opacity .3s;
  z-index: 10000;
  max-width: calc(100vw - 32px);
  svg { width: 20px; height: 20px; flex-shrink: 0; }
  span { line-height: 1.4; }
  &.show { transform: translateX(-50%) translateY(0); opacity: 1; }
  &.toast-error { border-color: rgb(220 38 38 / .4); svg { color: #f87171; } }
  &.toast-success { border-color: rgb(34 197 94 / .4); svg { color: #4ade80; } }
}

@media (max-width: 767px) {
  .gift-card-form input:is([type="text"], [type="email"], [type="number"]) { padding: 10px 12px; font-size: 15px; }
  .gc-preview-value { font-size: 2.5rem; }
}

.loc-hub-page { padding: 2rem 1rem; }
.loc-hub-map-wrap { margin-bottom: 2rem; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-md); background: white; }
.loc-hub-map { height: 350px; @media (min-width: 768px) { height: 420px; } }
.loc-hub-legend { display: flex; justify-content: center; gap: 1.5rem; padding: .75rem; background: white; border-top: 1px solid var(--border); font-size: .85rem; span { display: flex; align-items: center; gap: .4rem; } .legend-dot { width: 12px; height: 12px; border-radius: 50%; border: 2px solid white; box-shadow: 0 1px 3px rgb(0 0 0 / .2); &.gold { background: #d4af37; } &.blue { background: #63a1d1; } &.gray { background: #9f9f9f; } } }
.loc-hub-grid { display: grid; gap: 2rem; @media (min-width: 768px) { grid-template-columns: 1fr 1fr; } }
.loc-hub-col { h2 { font-size: 1.25rem; font-weight: 700; margin-bottom: 1rem; color: var(--primary); } .location-list-items { display: flex; flex-direction: column; gap: .5rem; } }

.compare-section { padding: 2rem 1rem 3rem; @media (min-width: 768px) { padding: 3rem 1.5rem 4rem; } }
.compare-wrapper { max-width: min(90vw, 1070px); margin: 0 auto; }
.compare-intro { text-align: center; margin-bottom: 2rem; p { color: var(--muted); font-size: 1rem; line-height: 1.75; max-width: 42rem; margin: 0 auto; @media (min-width: 768px) { font-size: 1.125rem; } } }
.compare-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: 3rem; border-radius: 1rem; box-shadow: var(--shadow-lg); background: white; }
.compare-table { width: 100%; border-collapse: collapse; table-layout: fixed; min-width: 640px; th, td { padding: .75rem 1rem; text-align: left; border-bottom: 1px solid rgb(0 0 0 / .06); vertical-align: top; @media (min-width: 768px) { padding: 1rem 1.25rem; } } thead { :is(th, td) { color: white; font-weight: 600; font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; text-align: center; vertical-align: middle; background: var(--primary); } tr:first-child :is(th, td):first-child { border-radius: 1rem 0 0 0; } tr:first-child :is(th, td):last-child { border-radius: 0 1rem 0 0; } tr:last-child th:first-child { text-align: left; } } tbody tr:last-child :is(th, td) { border-bottom: none; } tbody tr:hover { background: rgb(0 0 0 / .02); } }
.compare-table thead tr.cmp-img-row :is(th, td) { padding: .75rem .5rem .5rem !important; border-bottom: none !important; background: white !important; }
.cmp-h-img { aspect-ratio: 1; border-radius: .5rem; overflow: hidden; position: relative; img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } }
.cmp-attr { font-weight: 600; color: var(--fg); width: 22%; min-width: 120px; }
.cmp-cell { display: flex; align-items: flex-start; gap: .5rem; span { font-size: .875rem; line-height: 1.5; color: var(--muted); } }
.cmp-yurt, .cmp-comp, .cmp-alt { background: transparent; }
.cmp-win { background: rgb(76 175 80 / .08); }
.cmp-icon { width: 1.125rem; height: 1.125rem; flex-shrink: 0; margin-top: .125rem; }
.cmp-yes { color: #22c55e; }
.cmp-memories-row :is(th, td) { vertical-align: middle; } .cmp-memories-row th { font-style: italic; }
.cmp-memories { background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #312e81 100%); position: relative; overflow: hidden; border-radius: .5rem; .cmp-cell { justify-content: center; padding: 1.25rem 1rem; } span { color: #fef3c7 !important; font-weight: 500; font-size: 1rem !important; text-shadow: 0 0 20px rgb(253 230 138 / .5), 0 0 40px rgb(253 230 138 / .3); text-align: center; } &::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(2px 2px at 20px 30px, white, transparent), radial-gradient(2px 2px at 40px 70px, rgb(255 255 255 / .8), transparent), radial-gradient(1px 1px at 90px 40px, white, transparent), radial-gradient(2px 2px at 130px 80px, rgb(255 255 255 / .6), transparent), radial-gradient(1px 1px at 160px 20px, white, transparent), radial-gradient(2px 2px at 200px 60px, rgb(255 255 255 / .7), transparent), radial-gradient(1px 1px at 80px 10px, white, transparent), radial-gradient(1px 1px at 110px 50px, rgb(255 255 255 / .5), transparent), radial-gradient(2px 2px at 60px 90px, white, transparent), radial-gradient(1px 1px at 180px 45px, rgb(255 255 255 / .6), transparent); animation: twinkle 4s ease-in-out infinite; } &::after { content: '✨'; position: absolute; top: 50%; left: 1rem; transform: translateY(-50%); font-size: 1.25rem; animation: glow 2s ease-in-out infinite; } }
@keyframes twinkle { 0%, 100% { opacity: .6; } 50% { opacity: 1; } }
@keyframes glow { 0%, 100% { opacity: .7; transform: translateY(-50%) scale(1); } 50% { opacity: 1; transform: translateY(-50%) scale(1.1); } }
thead :is(th, td):is(.cmp-h-yurt, .cmp-h-comp, .cmp-h-alt) { background: var(--primary) !important; }
.cmp-h-yurt { background: rgb(76 175 80 / .15) !important; }
.cmp-h-comp { background: rgb(239 68 68 / .1) !important; }
.cmp-h-alt { background: rgb(255 255 255 / .12) !important; }
.compare-benefits { margin-bottom: 3rem; h2 { font-size: 1.375rem; font-weight: 700; text-align: center; margin-bottom: 1.5rem; @media (min-width: 768px) { font-size: 1.5rem; } } }
.benefits-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; @media (min-width: 640px) { grid-template-columns: repeat(2, 1fr); } }
.benefit-card { background: white; border-radius: 1rem; padding: 1.5rem; box-shadow: var(--shadow-md); border: 1px solid rgb(0 0 0 / .05); text-align: center; i, .lucide { width: 2rem; height: 2rem; color: var(--primary); margin-bottom: .75rem; display: block; margin-inline: auto; } h3 { font-size: 1rem; font-weight: 600; margin-bottom: .5rem; } p { font-size: .875rem; color: var(--muted); line-height: 1.5; } }
.compare-amenities-cta { text-align: center; margin-bottom: 3rem; }
.compare-verdict { background: linear-gradient(135deg, var(--primary) 0%, #3d5a4c 100%); border-radius: 1rem; padding: 2rem 1.5rem; margin-bottom: 2rem; text-align: center; color: white; @media (min-width: 768px) { padding: 2.5rem 3rem; } h2 { font-size: 1.25rem; font-weight: 700; margin-bottom: .75rem; @media (min-width: 768px) { font-size: 1.5rem; } } p { font-size: 1rem; line-height: 1.75; opacity: .9; max-width: 600px; margin: 0 auto 1.5rem; } .btn { background: white; color: var(--primary); } }
.compare-nav { text-align: center; margin-bottom: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--border); p { font-size: .875rem; color: var(--muted); } a { color: var(--primary); font-weight: 500; margin: 0 .5rem; &:hover { text-decoration: underline; } } }
.compare-note { font-size: .75rem; color: var(--muted); text-align: center; line-height: 1.6; max-width: 42rem; margin: 0 auto; }

.lucide { transition: transform .4s cubic-bezier(.4, 0, .2, 1); }

/* Pulse animation - subtle scale */
@keyframes lucide-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } }

/* Bounce animation */
@keyframes lucide-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
@keyframes lucide-bounce-down { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(2px); } }
@keyframes lucide-bounce-left { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-2px); } }
@keyframes lucide-bounce-right { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(2px); } }

/* Translate animations */
@keyframes lucide-translate-left { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-3px); } }
@keyframes lucide-translate-right { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(3px); } }

/* Draw animation - stroke dashoffset */
@keyframes lucide-draw { 0% { stroke-dashoffset: 100; opacity: 0; } 100% { stroke-dashoffset: 0; opacity: 1; } }

/* Heartbeat animation */
@keyframes lucide-heartbeat { 0%, 100% { transform: scale(1); } 14% { transform: scale(1.15); } 28% { transform: scale(1); } 42% { transform: scale(1.15); } 70% { transform: scale(1); } }

/* Sparkle animation */
@keyframes lucide-sparkle { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.1) rotate(5deg); opacity: .8; } }

/* Flash animation */
@keyframes lucide-flash { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }

/* Blink animation (for eye icon) */
@keyframes lucide-blink { 0%, 45%, 55%, 100% { transform: scaleY(1); } 50% { transform: scaleY(0.1); } }

/* Wave animation */
@keyframes lucide-wave { 0%, 100% { transform: translateY(0); } 25% { transform: translateY(-1px); } 75% { transform: translateY(1px); } }

/* Flicker animation (for flame) */
@keyframes lucide-flicker { 0%, 100% { transform: scale(1) rotate(0deg); } 25% { transform: scale(1.02) rotate(-1deg); } 50% { transform: scale(.98) rotate(1deg); } 75% { transform: scale(1.01) rotate(-0.5deg); } }

/* Steam animation (for coffee) */
@keyframes lucide-steam { 0%, 100% { transform: translateY(0); opacity: 1; } 50% { transform: translateY(-2px); opacity: .7; } }

/* Expand animation */
@keyframes lucide-expand { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.15); } }

/* Pulse scale animation (for star) */
@keyframes lucide-pulse-scale { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.2); } }

/* Rotate rays animation (for sun) */
@keyframes lucide-rotate-rays { from { transform: rotate(0deg); } to { transform: rotate(15deg); } }

/* Draw with scale animation */
@keyframes lucide-draw-scale { 0% { transform: scale(.8); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }

/* Apply animations on hover/focus of interactive elements */
:is(button, a, label, [role="button"], [tabindex="0"]):hover .lucide,
:is(button, a, label, [role="button"]):focus-visible .lucide {
  &.lucide-anim-pulse { animation: lucide-pulse .4s ease-out; }
  &.lucide-anim-bounce { animation: lucide-bounce .4s ease-out; }
  &.lucide-anim-bounce-down { animation: lucide-bounce-down .4s ease-out; }
  &.lucide-anim-bounce-left { animation: lucide-bounce-left .3s ease-out; }
  &.lucide-anim-bounce-right { animation: lucide-bounce-right .3s ease-out; }
  &.lucide-anim-translate-left { animation: lucide-translate-left .4s ease-out; }
  &.lucide-anim-translate-right { animation: lucide-translate-right .4s ease-out; }
  &.lucide-anim-heartbeat { animation: lucide-heartbeat .8s ease-out; }
  &.lucide-anim-rotate { animation: spin .6s ease-out; }
  &.lucide-anim-rotate-slow { animation: spin 2s linear; }
  &.lucide-anim-sparkle { animation: lucide-sparkle .5s ease-out; }
  &.lucide-anim-flash { animation: lucide-flash .3s ease-out 2; }
  &.lucide-anim-blink { animation: lucide-blink .3s ease-out; }
  &.lucide-anim-wave { animation: lucide-wave .5s ease-out 2; }
  &.lucide-anim-flicker { animation: lucide-flicker .5s ease-out; }
  &.lucide-anim-steam { animation: lucide-steam .6s ease-out 2; }
  &.lucide-anim-expand { animation: lucide-expand .4s ease-out; }
  &.lucide-anim-pulse-scale { animation: lucide-pulse-scale .4s ease-out; }
  &.lucide-anim-rotate-rays { animation: lucide-rotate-rays .4s ease-out forwards; }
  &.lucide-anim-draw { path, line, polyline, circle, rect { stroke-dasharray: 100; animation: lucide-draw .5s ease-out forwards; } }
  &.lucide-anim-draw-scale { animation: lucide-draw-scale .4s ease-out; path, line, polyline, circle, rect { stroke-dasharray: 100; animation: lucide-draw .5s ease-out forwards; } }
}

/* Special case: loader-circle always spins, even on hover */
.lucide-loader-circle,
:is(button, a, label, [role="button"], [tabindex="0"]):hover .lucide-loader-circle { animation: spin 1s linear infinite; }

/* Ensure star icons in ratings don't animate */
.rating-stars .lucide, .book-cta-stars .lucide, .stars .lucide, .review-rating .lucide { animation: none !important; }

/* TikTok icon animation (inline SVG, not Lucide) */
@media (hover: hover) and (pointer: fine) { :is(.btn-tiktok, .about-social-link, .footer-social a):hover svg:not(.lucide) { animation: lucide-pulse .4s ease-out; } }

@media (prefers-reduced-motion: reduce) {
  .messenger-btn { animation: none; opacity: 1; }
  .lucide, .lucide path, .lucide line, .lucide polyline, .lucide circle, .lucide rect, .btn-tiktok svg, .about-social-link svg, .footer-social svg { animation: none !important; transition: none !important; }
}

body.theme-2 {
  --theme2-fade-ms: 200;
  --theme2-alpha: 1;

  #waitlist-link { display: none; }

  .hero-group {
    left: 3vw;
    transform: none;
    text-align: left;
    align-items: flex-start;
    transition: none;
    :is(.hero-eyebrow-wrap, .hero-title-wrap, .hero-subtitle-wrap, .hero-subtitle, .hero-title) { transition: none; animation: none; }
    :is(.hero-eyebrow-wrap, .hero-title-wrap, .hero-subtitle-wrap, .date-inputs-wrapper, .hero-form-link, #calendar-dropdown, #booking-container, #confirmation-section) {
      opacity: var(--theme2-alpha);
      transition: opacity calc(var(--theme2-fade-ms) * 1ms) ease-out;
    }
    .date-calendar-container { width: auto; }
  }

  &.theme2-fading { --theme2-alpha: 0; }
  &.theme2-freeze .hero-group {
    left: 3vw;
    transform: none;
    .hero-title-wrap { transform: none; grid-template-rows: 1fr; }
    .hero-subtitle-wrap { grid-template-rows: 1fr; }
    .hero-subtitle { opacity: 1; }
    .hero-form-link { display: flex; }
  }

  &:not(.theme2-freeze) .hero-group {
    &:is(.calendar-open, .waitlist-open, .gift-card-open) {
      left: 50%;
      text-align: center;
      align-items: center;
      transform: translate(-50%, -20svh);
      .hero-title { font-size: clamp(36px, 5vw, 42px); }
    }
    &.dates-selected {
      left: 50%;
      text-align: center;
      align-items: center;
      transform: translate(-50%, -31svh);
      .hero-title { font-size: clamp(35px, 4vw, 36px); }
    }
    &:is(.calendar-open, .dates-selected, .waitlist-open, .gift-card-open) {
      .hero-eyebrow-wrap { display: none; }
      .hero-subtitle-wrap { grid-template-rows: 0fr; }
      .hero-subtitle { opacity: 0; }
      .date-calendar-container { width: 100%; }
    }
  }

  .hero-eyebrow {
    display: block;
    color: rgb(209 191 148);
    font-family: Montserrat, sans-serif;
    font-size: clamp(12px, 2vw, 16px);
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    text-shadow: 0 0.5px 1.5px rgb(0 0 0 / 55%);
    margin-bottom: 1rem;
    @media (min-width: 640px) { margin-bottom: 1.5rem; }
  }

  .hero-title {
    display: block;
    font-family: 'Playfair Display', ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
    font-weight: 400;
    font-size: clamp(32px, 8vw, 72px);
    line-height: 1.1;
    letter-spacing: -0.01em;
    max-width: min(90vw, 700px);
    em, .hero-accent { font-style: italic; }
  }

  .hero-subtitle {
    font-family: Montserrat, sans-serif;
    font-size: clamp(16px, 3vw, 20px);
    color: rgb(255 255 255 / .8);
    max-width: min(90vw, 520px);
    line-height: 1.2;
    padding-left: 0;
    padding-right: 0;
  }

  @media (max-width: 768px) {
    .hero-bg { background-position: var(--hero-bg-position-mobile, center); }
    .hero-group { left: 16px; }
    &:not(.theme2-freeze) .hero-group {
      &:is(.calendar-open, .waitlist-open, .gift-card-open) { left: 50%; transform: translate(-50%, -18.5svh); }
      &.dates-selected { left: 50%; transform: translate(-50%, -20svh); }
    }
    .hero-group.dates-selected .hero-title-wrap { transform: scale(.45); }
    .hero-title { font-size: clamp(28px, 10vw, 48px); }
    .hero-eyebrow { color: white; }
  }

  @media (max-width: 500px) {
    .hero-eyebrow { letter-spacing: 0; }
    .hero-subtitle { line-height: 1.2; }
  }

  @media (max-height: 700px) {
    &:not(.theme2-freeze) .hero-group {
      &.calendar-open { transform: translate(-50%, -17vh); transform: translate(-50%, -17svh); }
      &.dates-selected { transform: translate(-50%, -27vh); transform: translate(-50%, -27svh); }
      &.dates-selected .hero-title-wrap { grid-template-rows: 0fr; }
      &.dates-selected .hero-title { opacity: 0; }
    }
  }

  @media (max-width: 768px) and (max-height: 700px) {
    &:not(.theme2-freeze) .hero-group.dates-selected { transform: translate(-50%, -17vh); transform: translate(-50%, -17svh); }
  }

  @media (max-height: 900px) {
    &:not(.theme2-freeze) .hero-group {
      &:is(.dates-selected, .waitlist-open, .gift-card-open) .date-inputs-wrapper,
      &:is(.dates-selected, .waitlist-open, .gift-card-open) .booking-container { padding: 0; }
      &:is(.dates-selected, .waitlist-open, .gift-card-open) input:is([type="text"], [type="email"], [type="tel"], [type="number"]) { padding: 8px 12px; }
      &.dates-selected .guest-pets-row { padding: 8px 12px; }
      &.dates-selected .price-row.total { padding-top: 6px; }
      &.dates-selected .price-row.deposit { padding: 6px 0; }
      &.dates-selected #form-sections-hidden .pricing { min-height: 0; padding: 12px 15px; line-height: 1.2; }
      &.dates-selected .price-row { font-size: 15px; }
      &.dates-selected button[type="submit"] { width: 80%; padding: 8px 24px; margin: 2px auto 10px; }
      &.dates-selected .coupon-applied { padding: 6px 8px; }
    }
  }

  @media (min-width: 1200px) { .hero-group { left: 6vw; } }
  @media (min-width: 1400px) { .hero-group { left: 8vw; } }
  @media (min-width: 1600px) { .hero-group { left: 10vw; } }
  @media (min-width: 1800px) { .hero-group { left: 13vw; } }
  @media (min-width: 2000px) { .hero-group { left: 14vw; } }
}