/*
Theme Name: The Bougainvillea Retreat
Description: Ultra-Luxury Boutique Resort Theme (Version 3.0)
Author: Antigravity
Version: 3.0.0
*/

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

:root {
  /* Luxury Palette */
  --bg: #08140F;       /* Deep Forest Green-Black */
  --bg2: #0C1D16;
  --bg3: #132A21;
  --gold: #C9A84C;     /* Sophisticated Muted Gold */
  --gold-light: #E5C97F;
  --text: #F0F4F2;
  --text-muted: #A0B0A8;
  --border: rgba(201, 168, 76, 0.15);
  --border-gold: rgba(201, 168, 76, 0.4);
  
  /* Glassmorphism */
  --glass: rgba(255, 255, 255, 0.03);
  --glass-blur: blur(15px);
  --glass-border: rgba(255, 255, 255, 0.08);
  
  /* Spacing */
  --max-w: 1400px;
  --gutter: 2rem;
}

/* ── Global Reset ── */
* { margin: 0; padding: 0; box-box-sizing: border-box; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
  background-color: var(--bg);
  color: var(--text);
  font-family: 'Outfit', sans-serif;
  line-height: 1.6;
  overflow-x: hidden;
}
h1, h2, h3, .playfair { font-family: 'Playfair Display', serif; }
a { color: inherit; text-decoration: none; transition: 0.3s; }

/* ── Layout ── */
.luxury-container { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--gutter); }
.luxury-section { padding: 10rem 0; }
.dark-bg { background-color: var(--bg2); }

/* ── Typography & Components ── */
.section-tag {
  display: block; font-size: 0.75rem; text-transform: uppercase;
  letter-spacing: 0.25em; color: var(--gold); margin-bottom: 1.5rem;
  font-weight: 600;
}
h2 { font-size: clamp(2.5rem, 5vw, 4rem); line-height: 1.1; margin-bottom: 2rem; }
h2 em { font-style: italic; font-weight: 400; color: var(--gold-light); }

.glass-morph {
  background: var(--glass);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: 20px;
}

.btn-luxury {
  display: inline-block; padding: 1.2rem 2.8rem;
  background: var(--gold); color: var(--bg);
  border-radius: 50px; font-weight: 700; font-size: 0.9rem;
  text-transform: uppercase; letter-spacing: 0.1em;
  box-shadow: 0 10px 30px rgba(201, 168, 76, 0.3);
}
.btn-luxury:hover { transform: translateY(-3px); box-shadow: 0 15px 40px rgba(201, 168, 76, 0.5); }

.btn-luxury-outline {
  display: inline-block; padding: 1.2rem 2.8rem;
  border: 1px solid var(--gold); color: var(--gold);
  border-radius: 50px; font-weight: 700; font-size: 0.9rem;
  text-transform: uppercase; letter-spacing: 0.1em;
}

/* ── Hero V3 ── */
.hero-v3 {
  height: 100vh; position: relative;
  display: flex; align-items: center; justify-content: center;
  text-align: center; background: #000; overflow: hidden;
}
.hero-bg-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(8,20,15,0.4), rgba(8,20,15,0.9));
  z-index: 1;
}
.hero-content-v3 { position: relative; z-index: 2; max-width: 1000px; padding: 0 2rem; }
.hero-eyebrow-v3 { font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.4em; color: var(--gold); margin-bottom: 2rem; }
.hero-title-v3 { font-size: clamp(3.5rem, 8vw, 7rem); line-height: 0.9; margin-bottom: 2.5rem; }
.hero-subtitle-v3 { font-size: 1.2rem; color: var(--text-muted); margin-bottom: 3.5rem; max-width: 600px; margin-inline: auto; }
.hero-btns-v3 { display: flex; gap: 1.5rem; justify-content: center; flex-wrap: wrap; }

/* ── Split Grid Sections (Pool) ── */
.split-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6rem; align-items: center; }
.luxury-features { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-top: 2.5rem; }
.feat-item { display: flex; align-items: center; gap: 1rem; font-size: 1.1rem; color: var(--text-muted); }
.feat-item span { font-size: 1.5rem; }

/* ── Rooftop Grid ── */
.section-header-v3 { text-align: center; max-width: 800px; margin: 0 auto 5rem; }
.rooftop-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.rooftop-card { padding: 4rem 2.5rem; text-align: center; transition: 0.4s; }
.rooftop-card:hover { transform: translateY(-10px); border-color: var(--gold); }
.card-icon { font-size: 3.5rem; margin-bottom: 2rem; }
.rooftop-card h3 { font-size: 1.8rem; margin-bottom: 1.2rem; }
.rooftop-card p { color: var(--text-muted); }

/* ── Dining Mosaic ── */
.dining-mosaic { display: grid; grid-template-columns: 1.2fr 1fr; gap: 5rem; align-items: center; }
.luxury-list { list-style: none; margin: 2rem 0 3rem; }
.luxury-list li {
  padding: 0.8rem 0; border-bottom: 1px solid var(--border);
  font-size: 1.1rem; color: var(--text-muted); display: flex; align-items: center;
}
.luxury-list li::before { content: '✧'; color: var(--gold); margin-right: 1rem; }

/* ── Availability Widget Luxury Fix ── */
.bvr-checker-wrap {
  margin-top: 4rem; padding: 3rem; background: var(--bg2);
  border: 1px solid var(--border-gold); border-radius: 30px;
}
.bvr-room-card { background: var(--bg3); border-radius: 20px; overflow: hidden; }

/* ── Footer V3 ── */
.site-footer { padding: 8rem 0 4rem; background: #040A07; border-top: 1px solid var(--border); }
.footer-tagline { font-size: 1.2rem; font-family: 'Playfair Display', serif; color: var(--gold-light); margin-top: 1.5rem; }
.footer-col h4 { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.2em; color: var(--gold); margin-bottom: 2rem; }
.footer-nav a { display: block; padding: 0.5rem 0; color: var(--text-muted); }
.footer-nav a:hover { color: var(--gold); padding-left: 10px; }

/* ── Mobile Optimization ── */
@media (max-width: 992px) {
  .split-grid, .dining-mosaic { grid-template-columns: 1fr; gap: 4rem; }
  .rooftop-grid { grid-template-columns: 1fr; }
  .luxury-section { padding: 6rem 0; }
  .hero-title-v3 { font-size: 4rem; }
}