/* ===== Peony Villas – luxury theme ===== */
:root {
  --ivory: #faf7f2;
  --charcoal: #1f1d1a;
  --gold: #b08d57;
  --gold-dark: #94733f;
  --muted: #6f6a62;
  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans: 'Jost', system-ui, sans-serif;
}

html { scroll-behavior: smooth; }
body { font-family: var(--sans); font-weight: 300; color: var(--charcoal); background: #fff; line-height: 1.8; }
h1, h2, h3, h4, h5 { font-family: var(--serif); font-weight: 500; }
a { color: inherit; }
.text-muted { color: var(--muted) !important; }
.text-white-75 { color: rgba(255,255,255,.8); }
.bg-ivory { background: var(--ivory); }

.section { padding: 110px 0; }
.eyebrow { text-transform: uppercase; letter-spacing: .3em; font-size: .75rem; color: var(--gold); font-weight: 500; margin-bottom: .8rem; }
.section-title { font-size: clamp(2rem, 4vw, 3rem); line-height: 1.2; margin-bottom: 1.2rem; }

/* Buttons */
.btn { border-radius: 0; letter-spacing: .12em; text-transform: uppercase; font-size: .8rem; font-weight: 500; padding: .85rem 1.8rem; transition: all .3s; }
.btn-lg { padding: 1rem 2.2rem; }
.btn-sm { padding: .6rem 1.2rem; font-size: .72rem; }
.btn-gold { background: var(--gold); border: 1px solid var(--gold); color: #fff; }
.btn-gold:hover { background: var(--gold-dark); border-color: var(--gold-dark); color: #fff; }
.btn-dark { background: var(--charcoal); border-color: var(--charcoal); }
.btn-dark:hover { background: var(--gold); border-color: var(--gold); }

/* Navbar */
#mainNav { padding: 1.4rem 0; transition: all .35s; }
#mainNav.scrolled { background: rgba(250,247,242,.97); padding: .8rem 0; box-shadow: 0 2px 20px rgba(0,0,0,.06); backdrop-filter: blur(6px); }
.navbar-brand { font-family: var(--serif); font-size: 1.8rem; color: #fff; letter-spacing: .05em; }
.navbar-brand span { color: var(--gold); font-style: italic; }
#mainNav .nav-link { color: rgba(255,255,255,.9); text-transform: uppercase; letter-spacing: .15em; font-size: .75rem; font-weight: 400; }
#mainNav .nav-link:hover { color: var(--gold); }
#mainNav.scrolled .navbar-brand, #mainNav.scrolled .nav-link { color: var(--charcoal); }
#mainNav.scrolled .nav-link:hover { color: var(--gold); }
.navbar-toggler { border: 0; color: #fff; font-size: 1.8rem; box-shadow: none !important; }
#mainNav.scrolled .navbar-toggler { color: var(--charcoal); }
@media (max-width: 991px) {
  #mainNav .navbar-collapse { background: var(--ivory); padding: 1rem 1.5rem; margin-top: .8rem; }
  #mainNav .nav-link { color: var(--charcoal); }
}

/* Hero */
.hero {
  min-height: 100vh;
  background: linear-gradient(rgba(20,18,15,.45), rgba(20,18,15,.55)),
              url('https://picsum.photos/seed/peony-hero/1920/1200') center/cover no-repeat;
  background-color: #3a342c;
}
.hero h1 { line-height: 1.1; margin-bottom: 1.5rem; }
.hero h1 em { color: var(--gold); }
.hero .lead { max-width: 560px; font-weight: 300; }
.scroll-down { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); color: #fff; font-size: 2rem; animation: bounce 2s infinite; text-decoration: none; }
@keyframes bounce { 0%,100% { transform: translate(-50%,0); } 50% { transform: translate(-50%,8px); } }

/* About */
.about-images { position: relative; padding-bottom: 60px; }
.about-img-1 { width: 80%; }
.about-img-2 { position: absolute; right: 0; bottom: 0; width: 50%; border: 10px solid #fff; }
.stat { font-family: var(--serif); font-size: 2.6rem; color: var(--gold); line-height: 1; }

/* Villa cards */
.villa-card { background: #fff; display: flex; flex-direction: column; transition: transform .4s, box-shadow .4s; }
.villa-card:hover { transform: translateY(-8px); box-shadow: 0 20px 50px rgba(0,0,0,.1); }
.villa-img { position: relative; overflow: hidden; background: #d9d2c5; aspect-ratio: 4/3; }
.villa-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s; }
.villa-card:hover .villa-img img { transform: scale(1.07); }
.badge-tag { position: absolute; top: 16px; left: 16px; background: var(--gold); color: #fff; font-size: .68rem; letter-spacing: .15em; text-transform: uppercase; padding: .3rem .8rem; }
.villa-body { padding: 2rem; display: flex; flex-direction: column; flex: 1; }
.villa-body h3 { font-size: 2rem; margin-bottom: .2rem; }
.villa-specs { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; font-size: .88rem; margin: 1rem 0 1.5rem; }
.villa-specs i { color: var(--gold); margin-right: .4rem; }
.price { font-family: var(--serif); font-size: 1.8rem; color: var(--charcoal); line-height: 1.1; }
.price small { font-family: var(--sans); font-size: .75rem; color: var(--muted); }

/* Amenities */
.amenity { padding: 2rem 1rem; border: 1px solid #eee6d9; height: 100%; transition: all .3s; }
.amenity:hover { border-color: var(--gold); background: var(--ivory); }
.amenity i { font-size: 2rem; color: var(--gold); }
.amenity h5 { margin: 1rem 0 .3rem; font-size: 1.3rem; }
.amenity p { margin: 0; font-size: .85rem; color: var(--muted); }

/* Gallery */
.gallery-item { display: block; overflow: hidden; background: #d9d2c5; }
.gallery-item img { width: 100%; display: block; transition: transform .7s; }
.gallery-item:hover img { transform: scale(1.08); }

/* Reviews */
.stars { color: var(--gold); letter-spacing: .3em; font-size: 1.2rem; }
.carousel-item blockquote { font-family: var(--serif); font-size: clamp(1.4rem, 2.5vw, 1.9rem); font-style: italic; line-height: 1.5; margin: 1rem 0; }
.carousel-item cite { font-style: normal; text-transform: uppercase; letter-spacing: .15em; font-size: .78rem; color: var(--muted); }
.carousel-indicators [data-bs-target] { background-color: var(--gold); width: 10px; height: 10px; border-radius: 50%; border: 0; }

/* Location */
.location-list li { padding: .5rem 0; }
.location-list i { color: var(--gold); margin-right: .7rem; }
.map-wrap iframe { border: 0; filter: grayscale(.3); }

/* Booking */
.booking { background: linear-gradient(rgba(20,18,15,.82), rgba(20,18,15,.88)), url('https://picsum.photos/seed/peony-book/1920/1200') center/cover fixed; background-color: #2b2621; }
.booking-form { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.18); padding: 2.5rem; backdrop-filter: blur(4px); }
.booking-form .form-label { color: rgba(255,255,255,.85); font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; }
.booking-form .form-control, .booking-form .form-select { border-radius: 0; background: rgba(255,255,255,.95); border: 0; padding: .8rem 1rem; }
.booking-form .form-control:focus, .booking-form .form-select:focus { box-shadow: 0 0 0 2px var(--gold); }
.booking-form .is-invalid { box-shadow: 0 0 0 2px #e0635a; }

/* Footer */
.footer { background: var(--charcoal); color: rgba(255,255,255,.7); padding: 80px 0 30px; }
.footer h6 { color: #fff; text-transform: uppercase; letter-spacing: .2em; font-family: var(--sans); font-size: .8rem; margin-bottom: 1.2rem; }
.footer a { text-decoration: none; transition: color .3s; }
.footer a:hover { color: var(--gold); }
.footer li { margin-bottom: .4rem; }
.footer hr { border-color: rgba(255,255,255,.15); margin: 2.5rem 0 1.5rem; }
.footer .social a { font-size: 1.3rem; margin-right: 1rem; }

/* Floating WhatsApp */
.wa-float { position: fixed; right: 22px; bottom: 22px; width: 56px; height: 56px; background: #25d366; color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.7rem; box-shadow: 0 6px 20px rgba(0,0,0,.25); z-index: 1000; text-decoration: none; transition: transform .3s; }
.wa-float:hover { transform: scale(1.1); color: #fff; }

@media (max-width: 767px) {
  .section { padding: 70px 0; }
  .booking-form { padding: 1.5rem; }
  .booking { background-attachment: scroll; }
}