/**
 * Luxury UI — component layer (Tailwind-equivalent; mirrors lux-input.css).
 * When Tailwind CLI works locally: npm run build:css to regenerate from lux-input.css
 */
.lux-site .lux-nav-pill {
  border-radius: 9999px;
  border-width: 1px;
  border-color: rgba(255, 255, 255, 0.2);
  background-color: rgba(255, 255, 255, 0.08);
  -webkit-backdrop-filter: blur(24px) saturate(1.2);
  backdrop-filter: blur(24px) saturate(1.2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
  transition-property: all;
  transition-duration: 300ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.lux-site .nav.scrolled .lux-nav-pill,
.lux-site .nav.scrolled .nav__inner.lux-nav-pill {
  background-color: rgba(0, 0, 0, 0.32);
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 8px 32px rgba(0, 0, 0, 0.22);
  -webkit-backdrop-filter: blur(28px) saturate(1.25);
  backdrop-filter: blur(28px) saturate(1.25);
}

.lux-site .lux-hero-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  padding: 0.875rem 2.5rem;
  font-family: "Montserrat", system-ui, sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--lux-lime-text, #004643);
  background-color: var(--lux-lime, #F0EDE5);
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow:
    0 0 0 1px rgba(241, 225, 148, 0.35),
    0 0 40px var(--lux-lime-glow, rgba(241, 225, 148, 0.38)),
    0 10px 28px rgba(0, 0, 0, 0.28);
  transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
  text-decoration: none;
}

.lux-site .lux-hero-cta:hover {
  transform: translateY(-2px) scale(1.02);
  background-color: var(--lux-lime-hover, #f6eab0);
  box-shadow:
    0 0 0 1px rgba(246, 234, 176, 0.45),
    0 0 52px rgba(241, 225, 148, 0.42),
    0 14px 36px rgba(0, 0, 0, 0.32);
}

.lux-site .lux-btn-booking {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  padding: 0.75rem 2rem;
  font-family: "Montserrat", system-ui, sans-serif;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--lux-lime-text, #004643);
  background-color: var(--lux-lime, #F0EDE5);
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow:
    0 0 0 1px rgba(241, 225, 148, 0.35),
    0 0 40px var(--lux-lime-glow, rgba(241, 225, 148, 0.38)),
    0 8px 24px rgba(0, 0, 0, 0.28);
  transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
}

.lux-site .lux-btn-booking:hover {
  transform: translateY(-2px);
  background-color: var(--lux-lime-hover, #f6eab0);
  filter: none;
  box-shadow:
    0 0 0 1px rgba(246, 234, 176, 0.45),
    0 0 48px rgba(241, 225, 148, 0.4),
    0 12px 32px rgba(0, 0, 0, 0.3);
}

.lux-site .lux-card {
  overflow: hidden;
  border-radius: 18px;
  background-color: #F0EDE5;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
  transition: all 500ms cubic-bezier(0.4, 0, 0.2, 1);
}

.lux-site .lux-card:hover {
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.06);
  transform: translateY(-4px);
}

.lux-site .lux-hero-cta,
.lux-site .lux-btn-booking {
  font-family: "SwissNow", sans-serif;
}