:root {
      --gold-primary: #C5A059;
      --gold-hover: #B38F48;
      --gold-light: #F4EFE6;
      --bg-cream: #FBF9F5;
      --text-dark: #1A1A1A;
      --text-muted: #666666;
      --border-color: #E8DFD1;
    }

    body {
      font-family: 'Plus Jakarta Sans', sans-serif;
      background-color: var(--bg-cream);
      color: var(--text-dark);
      overflow-x: hidden;
    }

    h1, h2, h3, .font-serif {
      font-family: 'Playfair Display', serif;
    }

    /* Glassmorphism Navbar */
    .navbar-custom {
      background: rgba(255, 255, 255, 1);
      backdrop-filter: blur(12px);
      border-bottom: 1px solid var(--border-color);
      transition: all 0.3s ease;
    }
    .navbar-custom .nav-link {
      color: var(--text-dark) !important;
      font-weight: 500;
      font-size: 13px;
      margin: 0 10px;
      text-transform: uppercase;
    }
    .navbar-custom .nav-link:hover {
      color: var(--gold-primary) !important;
    }

    /* Hero Section */
    .hero-section {
      position: relative;
      min-height: 85vh;
      background: linear-gradient(rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.35)), url('images/bg-apartments.jpg') center/cover no-repeat;
      display: flex;
      align-items: center;
      justify-content: center;
      padding-top: 80px;
    }

    /* Booking Bar Container */
    .booking-wrapper {
      margin-top: -60px;
      position: relative;
      z-index: 10;
    }
    .booking-card {
      background: #FFFFFF;
      border-radius: 20px;
      border: 1px solid var(--border-color);
      box-shadow: 0 20px 40px rgba(0,0,0,0.06);
      padding: 35px;
    }

    /* Buttons */
    .btn-gold {
      background-color: var(--gold-primary);
      color: #FFFFFF !important;
      font-weight: 600;
      border-radius: 12px;
      padding: 12px 28px;
      border: none;
      transition: all 0.3s ease;
    }
    .btn-gold:hover {
      background-color: var(--gold-hover);
      transform: translateY(-2px);
      box-shadow: 0 8px 20px rgba(197, 160, 89, 0.3);
    }

    /* Bento Grid Amenities */
    .bento-card {
      background: #FFFFFF;
      border: 1px solid var(--border-color);
      border-radius: 16px;
      padding: 25px 20px;
      transition: all 0.3s ease;
      height: 100%;
    }
    .bento-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 12px 25px rgba(0, 0, 0, 0.05);
      border-color: var(--gold-primary);
    }
    .bento-icon {
      font-size: 2rem;
      color: var(--gold-primary);
      margin-bottom: 15px;
    }

    /* Room Cards */
    .room-card {
      border-radius: 16px;
      overflow: hidden;
      background: #FFFFFF;
      border: 1px solid var(--border-color);
      transition: all 0.3s ease;
    }
    .room-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 15px 30px rgba(0, 0, 0, 0.08);
    }
    .room-card img {
      width: 100%;
      height: 240px;
      object-fit: cover;
    }

    /* Intermission Section */
    .intermission-banner {
      background: linear-gradient(135deg, #1A1A1A 0%, #2D261E 100%);
      color: #FFFFFF;
      padding: 80px 0;
      border-radius: 30px;
      margin: 60px 0;
    }

    /* Footer */
    .footer-dark {
      background: #141414;
      color: #A0A0A0;
      padding: 70px 0 30px;
    }
    .footer-dark h5 {
      color: var(--gold-primary);
      font-size: 1.1rem;
      font-weight: 600;
      margin-bottom: 20px;
    }
    .footer-dark a {
      color: #D0D0D0;
      text-decoration: none;
      font-size: 13px;
      transition: color 0.2s ease;
    }
    .footer-dark a:hover {
      color: var(--gold-primary);
    }

    /* Inputs */
    .form-control-custom {
      border: 1px solid var(--border-color);
      border-radius: 10px;
      padding: 12px 15px;
      font-size: 0.95rem;
    }
    .form-control-custom:focus {
      border-color: var(--gold-primary);
      box-shadow: 0 0 0 3px rgba(197, 160, 89, 0.15);
    }


    /* Container box remains sleek and compact */
.booking-card {
  background: #FFFFFF;
  border-radius: 20px;
  border: 1px solid #E8DFD1;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
  padding: 30px;
  padding-left: 50px;
  padding-right: 50px;
}

/* Poppy Input & Select Styling */
.form-control-poppy {
  height: 48px;
  border: 1.5px solid #E2D9CC;
  border-radius: 12px;
  padding: 10px 16px;
  font-size: 0.95rem;
  color: #2D261E;
  background-color: #FFFFFF;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Hover Effect */
.form-control-poppy:hover {
  border-color: #C5A059;
  box-shadow: 0 4px 12px rgba(197, 160, 89, 0.08);
  transform: translateY(-1px);
}

/* Focused / Active State (The Pop!) */
.form-control-poppy:focus {
  border-color: #C5A059;
  background-color: #FFFFFF;
  box-shadow: 0 0 0 4px rgba(197, 160, 89, 0.2), 0 4px 14px rgba(0, 0, 0, 0.05);
  transform: translateY(-2px);
  outline: none;
}

/* Custom Dropdown Styling */
.custom-select-poppy {
  cursor: pointer;
}

/* Poppy CTA Button */
.btn-gold-poppy {
  height: 48px;
  background: linear-gradient(135deg, #C5A059 0%, #B38F48 100%);
  color: #FFFFFF !important;
  font-weight: 700;
  letter-spacing: 0.5px;
  border-radius: 12px;
  border: none;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 12px rgba(197, 160, 89, 0.25);
}

.btn-gold-poppy:hover {
  background: linear-gradient(135deg, #D4AF37 0%, #C5A059 100%);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(197, 160, 89, 0.4);
}

.btn-gold-poppy:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(197, 160, 89, 0.3);
}







  /* Bento Grid Styling */
.bento-card {
  background: #FFFFFF;
  border: 1px solid #E8DFD1;
  border-radius: 20px;
  padding: 30px 20px;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
}

.bento-card:hover {
  transform: translateY(-6px);
  border-color: #C5A059;
  box-shadow: 0 15px 30px rgba(197, 160, 89, 0.12);
}

/* Icon Bubble Accent */
.bento-icon-wrapper {
  width: 64px;
  height: 64px;
  margin: 0 auto;
  border-radius: 50%;
  background-color: #F8F4EE;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.bento-card:hover .bento-icon-wrapper {
  background-color: #C5A059;
}

.bento-icon {
  font-size: 1.6rem;
  color: #C5A059;
  transition: all 0.3s ease;
}

.bento-card:hover .bento-icon {
  color: #FFFFFF;
}



/* --- Footer Custom Base --- */
.footer-dark {
  background-color: #121212;
  color: #A0A0A0;
}

.text-gold {
  color: #C5A059;
}

.text-muted-custom {
  color: #9E9E9E;
  line-height: 1.6;
}

.footer-heading {
  color: #C5A059;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 1.2px;
  margin-bottom: 20px;
}

.footer-divider {
  border-color: #262626;
}

/* Nav Links Micro-Interactions */
.footer-nav li {
  margin-bottom: 10px;
}

.footer-link {
  color: #CCCCCC;
  text-decoration: none;
  font-size: 0.9rem;
  transition: all 0.25s ease;
  display: inline-block;
}

.footer-link:hover {
  color: #C5A059;
  text-decoration: none;
  transform: translateX(4px);
}

.staff-login-link {
  color: #A0A0A0;
  font-size: 0.85rem;
  font-weight: 600;
  transition: all 0.25s ease;
  text-decoration: none;
}

.staff-login-link:hover {
  color: #C5A059;
  text-decoration: none;
}

/* Social Buttons Default State */
.social-links-wrapper {
  display: inline-flex;
  gap: 12px;
}

.social-icon-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background-color: #242424;
  color: #D0D0D0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  border: 1px solid #333333;
}

.social-icon-btn i {
  font-size: 0.95rem;
  transition: transform 0.25s ease, color 0.25s ease;
}

/* High-Contrast Hover State (Gold Circle + Black Icon) */
.social-icon-btn:hover {
  background-color: #C5A059;
  border-color: #C5A059;
  color: #121212 !important; /* Sharp black icon */
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(197, 160, 89, 0.35);
}

.social-icon-btn:hover i {
  color: #121212 !important; /* Ensures FontAwesome icon takes the dark color */
  transform: scale(1.15); /* Subtle icon zoom for extra pop */
}

/* Modal Dark Styling */
.staff-modal-content {
  background-color: #1A1A1A;
  border: 1px solid #333333;
  border-radius: 20px;
}

.btn-portal-action {
  background-color: #262626;
  border: 1px solid #3B3B3B;
  color: #FFFFFF;
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 0.9rem;
  transition: all 0.3s ease;
}

.btn-portal-action:hover {
  background-color: #C5A059;
  border-color: #C5A059;
  color: #FFFFFF;
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(197, 160, 89, 0.25);
}

.portal-icon {
  font-size: 1.8rem;
  color: #C5A059;
  transition: color 0.3s ease;
}

.btn-portal-action:hover .portal-icon {
  color: #FFFFFF;
}

/* Container to keep Turnstile widget aligned vertically */
.turnstile-wrapper {
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #FFFFFF;
  border: 1.5px solid #E2D9CC;
  border-radius: 12px;
  overflow: hidden;
  padding: 2px;
}

/* Optional styling to match input hover */
.turnstile-wrapper:hover {
  border-color: #C5A059;
}




/* Hero Container Base */
.hero-section {
  position: relative;
  min-height: 85vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 80px 0;
}

/* Background Slider Wrapper */
.hero-bg-slider {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

/* Base Slide Styles */
.slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center center;
  opacity: 0;
  animation: heroSlideFade 18s infinite ease-in-out;
}

/* Image Timing Offsets (6s display per image over an 18s total loop) */
.slide-1 {
  animation-delay: 0s;
}

.slide-2 {
  animation-delay: 6s;
}

.slide-3 {
  animation-delay: 12s;
}

/* Keyframes for Smooth Fade + Slow Elegant Zoom (Ken Burns Effect) */
@keyframes heroSlideFade {
  0% {
    opacity: 0;
    transform: scale(1);
  }
  6% {
    opacity: 1; /* Fade in */
  }
  33.33% {
    opacity: 1;
  }
  39.33% {
    opacity: 0; /* Fade out */
    transform: scale(1.08); /* Cinematic slow zoom */
  }
  100% {
    opacity: 0;
    transform: scale(1);
  }
}

/* Premium Gradient Overlay (Dark Tint + Warm Gold Accent Shadow) */
.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  background: 
    linear-gradient(180deg, rgba(15, 15, 15, 0.05) 0%, rgba(15, 15, 15, 0.15) 50%, rgba(15, 15, 15, 0.25) 100%),
    radial-gradient(circle at center, rgba(197, 160, 89, 0.1) 0%, rgba(0, 0, 0, 0.4) 100%);
  pointer-events: none;
}

/* Hero Content Typography & Layering */
.hero-content {
  z-index: 3;
}

.subhead-gold {
  color: #C5A059;
  font-weight: 700;
  letter-spacing: 2px;
  font-size: 0.9rem;
}

.main-title {
  font-weight: 700;
  letter-spacing: 1px;
  text-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.hero-description {
  max-width: 680px;
  font-size: 1.1rem;
  line-height: 1.6;
  color: #E2E2E2;
}

/* Push Turnstile down to align baseline with date inputs */
.cf-turnstile {
  margin-top: 0px; /* Matches the vertical offset of the labels above inputs */
  display: flex;
  align-items: center;
}


/* Blog Preview Card Base Styling */
.bg-cream-light {
  background-color: #FDFBF8;
}

.blog-preview-card {
  background: #FFFFFF;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid #E8DFD1;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.blog-preview-card:hover {
  transform: translateY(-6px);
  border-color: #C5A059;
  box-shadow: 0 15px 35px rgba(197, 160, 89, 0.1) !important;
}

/* Image wrappers and badge flags */
.blog-img-wrapper {
  position: relative;
  overflow: hidden;
  height: 220px;
}

.blog-img-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.blog-preview-card:hover .blog-img-wrapper img {
  transform: scale(1.06);
}

.blog-badge {
  position: absolute;
  top: 15px;
  left: 15px;
  background-color: #121212;
  color: #C5A059;
  font-size: 0.75rem;
  font-weight: 700;
  text-uppercase: ;
  padding: 5px 14px;
  border-radius: 20px;
  letter-spacing: 0.5px;
}

/* Links & Read More Interactions */
.blog-title-link {
  color: #121212;
  text-decoration: none;
  transition: color 0.25s ease;
}

.blog-title-link:hover {
  color: #C5A059;
  text-decoration: none;
}

.btn-read-more {
  color: #C5A059;
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  transition: color 0.25s ease;
}

.btn-read-more i {
  transition: transform 0.25s ease;
}

.btn-read-more:hover {
  color: #121212;
  text-decoration: none;
}

.btn-read-more:hover i {
  transform: translateX(4px);
}