/* =============================================================
   LuxeReserve — Minimal CSS (Tailwind CSS handles the rest)
   Only: Custom keyframes, Swiper overrides, non-Tailwind styles
   ============================================================= */

/* ─── Fonts ─────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400&display=swap');

/* ─── Base Reset ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: 'Outfit', sans-serif; overflow-x: hidden; }
a { text-decoration: none; }
img { display: block; max-width: 100%; }

/* ─── Keyframe Animations ────────────────────────────────────── */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-10px); }
}
@keyframes pulse-ring {
  0%   { box-shadow: 0 0 0 0 rgba(201, 168, 76, 0.4); }
  70%  { box-shadow: 0 0 0 20px rgba(201, 168, 76, 0); }
  100% { box-shadow: 0 0 0 0 rgba(201, 168, 76, 0); }
}
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
@keyframes countUp {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ─── Animation Utility Classes ─────────────────────────────── */
.animate-fade-up   { animation: fadeInUp 0.9s ease forwards; }
.animate-fade-down { animation: fadeInDown 0.6s ease forwards; }
.animate-float     { animation: float 3s ease-in-out infinite; }
.animate-pulse-btn { animation: pulse-ring 2s infinite; }

.delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }
.delay-300 { animation-delay: 0.3s; }
.delay-400 { animation-delay: 0.4s; }
.delay-500 { animation-delay: 0.5s; }

/* ─── Swiper Overrides ───────────────────────────────────────── */
.swiper { overflow: hidden; }
.swiper-slide img { -webkit-user-drag: none; user-select: none; }
.swiper-button-next,
.swiper-button-prev { color: #c9a84c !important; }
.swiper-button-next::after,
.swiper-button-prev::after { font-size: 18px !important; font-weight: bold; }
.swiper-pagination-bullet { background: #c9a84c !important; opacity: 0.4; }
.swiper-pagination-bullet-active { opacity: 1 !important; background: #c9a84c !important; }

/* ─── Custom Scrollbar ───────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #f1f5f9; }
::-webkit-scrollbar-thumb { background: #c9a84c; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #9d7d2e; }

/* ─── Gold Gradient Text Utility ─────────────────────────────── */
.text-gold-gradient {
  background: linear-gradient(135deg, #c9a84c 0%, #e8d5a3 50%, #9d7d2e 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ─── Glassmorphism Utility ──────────────────────────────────── */
.glass {
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.15);
}
.glass-light {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.6);
}

/* ─── Gold Button ─────────────────────────────────────────────── */
.btn-gold {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 32px;
  background: linear-gradient(135deg, #c9a84c 0%, #9d7d2e 100%);
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  border-radius: 50px;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 8px 25px rgba(201, 168, 76, 0.35);
}
.btn-gold:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 35px rgba(201, 168, 76, 0.5);
  color: #fff;
}

/* ─── Outline Gold Button ────────────────────────────────────── */
.btn-gold-outline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 31px;
  background: transparent;
  color: #c9a84c;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  border-radius: 50px;
  border: 2px solid #c9a84c;
  cursor: pointer;
  transition: all 0.3s ease;
}
.btn-gold-outline:hover {
  background: linear-gradient(135deg, #c9a84c 0%, #9d7d2e 100%);
  color: #fff;
  transform: translateY(-3px);
  box-shadow: 0 10px 25px rgba(201, 168, 76, 0.35);
}

/* ─── Section Heading Style ──────────────────────────────────── */
.section-eyebrow {
  font-family: 'Outfit', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: #c9a84c;
  margin-bottom: 12px;
  display: block;
}
.section-heading {
  font-family: 'Playfair Display', serif;
  font-size: 42px;
  color: #0a1628;
  line-height: 1.2;
  margin-bottom: 16px;
}
.section-heading.light { color: #fff; }

/* ─── Gold Divider ───────────────────────────────────────────── */
.gold-divider {
  width: 60px;
  height: 3px;
  background: linear-gradient(90deg, #c9a84c, #e8d5a3);
  border-radius: 2px;
  margin-bottom: 24px;
}

/* ─── Card Hover Effect ──────────────────────────────────────── */
.card-hover {
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.card-hover:hover {
  transform: translateY(-8px);
  box-shadow: 0 24px 48px rgba(10, 22, 40, 0.15) !important;
}

/* ─── Input Focus Style ──────────────────────────────────────── */
.input-gold:focus {
  outline: none;
  border-color: #c9a84c !important;
  box-shadow: 0 0 0 3px rgba(201, 168, 76, 0.15) !important;
}

/* ─── Star Rating ────────────────────────────────────────────── */
.star-gold { color: #f59e0b; }

/* ─── Page Hero (for inner pages) ───────────────────────────── */
.page-hero-wrap {
  min-height: 40vh;
  display: flex;
  align-items: flex-end;
  padding: 120px 0 60px;
  background: linear-gradient(135deg, rgba(10,22,40,0.85) 0%, rgba(10,22,40,0.6) 100%),
              url('https://images.unsplash.com/photo-1566073771259-6a8506099945?auto=format&fit=crop&w=1600') center/cover no-repeat;
  position: relative;
}

/* ─── FAQ Accordion ──────────────────────────────────────────── */
details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }
details[open] .faq-icon { transform: rotate(180deg); }
.faq-icon { transition: transform 0.3s ease; }

/* ─── Swiper grab cursor ─────────────────────────────────────── */
.swiper-grab { cursor: grab; }
.swiper-grab:active { cursor: grabbing; }

/* ─── Nav active state ───────────────────────────────────────── */
.nav-link-active {
  color: #c9a84c !important;
  border-bottom: 2px solid #c9a84c;
  padding-bottom: 2px;
}

/* ─── Mobile Menu ────────────────────────────────────────────── */
#mobile-nav {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
}
#mobile-nav.open {
  max-height: 500px;
}

/* ─── Responsive Typography ──────────────────────────────────── */
@media (max-width: 768px) {
  .section-heading { font-size: 30px; }
}
@media (max-width: 480px) {
  .section-heading { font-size: 26px; }
}