:root {
  --bg-color: #fdfbf7;
  --text-color: #1f2937;
  --text-muted: #6b7280;
  --primary: #4b5e26; /* Olive green */
  --primary-light: #6a8239;
  --accent: #c8622a; /* Terracotta */
  --accent-light: #e07a42;
  --white: #ffffff;
  --border: #e5e7eb;
  --whatsapp-green: #25D366;
  
  --font-heading: 'Playfair Display', serif;
  --font-body: 'DM Sans', sans-serif;
  
  --radius-lg: 24px;
  --radius-md: 16px;
  --radius-sm: 8px;
  
  --shadow-sm: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.025);
  --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --shadow-glass: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
  
  --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  background-color: var(--bg-color);
  color: var(--text-color);
  line-height: 1.6;
  overflow-x: hidden;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--text-color);
  line-height: 1.2;
}

h1 { font-size: clamp(2.5rem, 6vw, 4.5rem); }
h2 { font-size: clamp(2rem, 4vw, 3rem); margin-bottom: 1rem; }
h3 { font-size: clamp(1.5rem, 3vw, 2rem); margin-bottom: 0.75rem; }

p {
  margin-bottom: 1rem;
  font-size: 1.125rem;
}

.text-muted {
  color: var(--text-muted);
}

/* Utilities */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.section {
  padding: 6rem 0;
}

.text-center { text-align: center; }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 2rem;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1rem;
  /* <button> does not inherit the body line-height but <a> does, which made the
     same button 5px taller on the blog than on the homepage. Pin it for both. */
  line-height: normal;
  text-decoration: none;
  cursor: pointer;
  transition: var(--transition);
  border: none;
}

.btn-primary {
  background-color: var(--primary);
  color: var(--white);
  box-shadow: var(--shadow-md);
}

.btn-primary:hover {
  background-color: var(--primary-light);
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.btn-accent {
  background-color: var(--accent);
  color: var(--white);
  box-shadow: var(--shadow-md);
}

.btn-accent:hover {
  background-color: var(--accent-light);
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.btn-outline {
  background-color: transparent;
  color: var(--white);
  border: 2px solid var(--white);
  backdrop-filter: blur(4px);
}

.btn-outline:hover {
  background-color: var(--white);
  color: var(--text-color);
}

/* For light backgrounds, where the white outline would disappear */
.btn-outline-dark {
  color: var(--primary);
  border-color: var(--primary);
  backdrop-filter: none;
}

.btn-outline-dark:hover {
  background-color: var(--primary);
  color: var(--white);
}

/* Forms */
.booking-sidebar { background: var(--white); padding: 1.5rem; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); position: sticky; top: 100px; }
.form-group { display: flex; flex-direction: column; gap: 0.3rem; margin-bottom: 0.5rem; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; align-items: end; }
input, select, textarea { padding: 0.6rem; border: 1px solid var(--border); border-radius: 8px; font-family: inherit; font-size: 0.9rem; }
textarea { min-height: 80px; resize: vertical; }
.form-submit { margin-top: 0.5rem; width: 100%; }

.whatsapp-compact {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}
.whatsapp-compact p { font-size: 0.85rem; color: var(--text-muted); margin: 0; }
.whatsapp-compact-link { display: flex; align-items: center; transition: var(--transition); }
.whatsapp-compact-link:hover { transform: scale(1.1); }
.whatsapp-compact-img { height: 1.2rem; width: 1.2rem; object-fit: contain; background: transparent !important; border: none !important; border-radius: 0 !important; padding: 0 !important; margin: 0 !important; vertical-align: middle; }

/* Navbar */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding: 1.5rem 0;
  z-index: 1000;
  transition: var(--transition);
  background: transparent;
}

.navbar.scrolled {
  background: rgba(253, 251, 247, 0.95);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow-sm);
  padding: 1rem 0;
}

.navbar .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--white);
  text-decoration: none;
  transition: var(--transition);
}

.navbar.scrolled .logo,
.navbar.scrolled .nav-links a:not(.btn) {
  color: var(--text-color);
}

.nav-links {
  display: flex;
  gap: 2rem;
  align-items: center;
}

@media (max-width: 768px) {
  .nav-links {
    position: fixed;
    top: 0;
    right: -100%;
    width: 250px;
    height: 100vh;
    background: var(--bg-color);
    flex-direction: column;
    padding: 80px 20px;
    transition: 0.3s ease;
    box-shadow: -5px 0 15px rgba(0,0,0,0.1);
    z-index: 999;
  }
  
  .nav-links.active {
    right: 0;
  }
  
  /* Plain links only. The "Request a Stay" button keeps its own white-on-olive
     colours — the !important above turned its label dark green on green. */
  .nav-links a:not(.btn) {
    color: var(--text-color) !important;
    width: 100%;
    text-align: center;
    padding: 1rem 0;
    border-bottom: 1px solid var(--border);
  }

  .nav-links .btn {
    width: 100%;
    justify-content: center;
  }
}

/* :not(.btn) matters. The homepage CTA is a <button> and the blog/property one is
   an <a>; without this the anchor picked up link weight, size and the underline
   animation and stopped looking like the same button. */
.nav-links a:not(.btn), #whatsappLink {
  color: var(--white);
  text-decoration: none;
  font-weight: 500;
  font-size: 1.1rem;
  transition: var(--transition);
  position: relative;
}

#whatsappLink { color: var(--whatsapp-green); font-weight: 600; }

.nav-links a:not(.btn)::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 2px;
  background-color: var(--accent);
  transition: var(--transition);
}

.nav-links a:not(.btn):hover::after {
  width: 100%;
}

.lang-toggle {
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: var(--white);
  padding: 0.25rem 0.5rem;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
  outline: none;
  backdrop-filter: blur(4px);
  transition: var(--transition);
  width: auto;
}

.lang-toggle option {
  color: var(--text-color);
  background: var(--white);
}

.navbar.scrolled .lang-toggle {
  color: var(--text-color);
  border-color: var(--border);
  background: transparent;
}

.navbar.scrolled .lang-toggle:hover {
  background: rgba(0,0,0,0.05);
}

.menu-toggle {
  display: none;
  background: none;
  border: none;
  color: var(--white);
  font-size: 1.8rem;
  cursor: pointer;
  z-index: 1001;
}

@media (max-width: 768px) {
  .menu-toggle {
    display: block;
  }
}

.navbar.scrolled .menu-toggle {
  color: var(--text-color);
}

/* Hero Section */
.hero {
  height: 100vh;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  text-align: center;
  overflow: hidden;
}

/* Hero Carousel */
.hero-carousel {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-color: #2b2418; /* warm base while the first photo loads */
}

.hero-slide {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 1.6s ease-in-out, visibility 1.6s ease-in-out;
}

.hero-slide.is-active {
  opacity: 1;
  visibility: visible;
}

.hero-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.04);
}

/* Slow drift, only on the picture currently showing */
.hero-slide.is-active .hero-bg {
  animation: slowZoom 12s ease-out forwards;
}

@keyframes slowZoom {
  from { transform: scale(1.04); }
  to   { transform: scale(1.12); }
}

/* Place name, bottom left — quiet, hairline separator */
.hero-slide-caption {
  position: absolute;
  left: 3rem;
  bottom: 4.5rem;
  text-align: left;
  color: var(--white);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 1s ease 0.4s, transform 1s ease 0.4s;
}

.hero-slide.is-active .hero-slide-caption {
  opacity: 1;
  transform: translateY(0);
}

.hero-slide-place {
  display: block;
  font-family: var(--font-heading);
  font-size: 1.35rem;
  font-style: italic;
  letter-spacing: 0.5px;
  text-shadow: 0 1px 3px rgba(0,0,0,0.75), 0 2px 18px rgba(0,0,0,0.65);
}

.hero-slide-where {
  display: block;
  margin-top: 0.45rem;
  padding-top: 0.45rem;
  border-top: 1px solid rgba(255, 255, 255, 0.35);
  font-size: 0.72rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 2.5px;
  opacity: 0.9;
  text-shadow: 0 1px 3px rgba(0,0,0,0.75), 0 2px 16px rgba(0,0,0,0.6);
}

.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* Light warm veil — just enough for legible text, keeps the photos bright */
  background:
    linear-gradient(to bottom,
      rgba(31, 26, 18, 0.34) 0%,
      rgba(31, 26, 18, 0.10) 42%,
      rgba(33, 27, 18, 0.42) 78%,
      rgba(28, 23, 15, 0.66) 100%),
    radial-gradient(70% 55% at 50% 48%,
      rgba(26, 21, 14, 0.42) 0%,
      rgba(26, 21, 14, 0) 70%);
  z-index: -1;
}

/* Arrows */
.hero-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  background: rgba(31, 26, 18, 0.18);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: var(--white);
  cursor: pointer;
  opacity: 0.55;
  transition: var(--transition);
}

.hero-arrow svg {
  width: 20px;
  height: 20px;
}

.hero-arrow:hover,
.hero-arrow:focus-visible {
  opacity: 1;
  border-color: rgba(255, 255, 255, 0.7);
  background: rgba(200, 98, 42, 0.35); /* terracotta */
}

.hero-arrow-prev { left: 1.75rem; }
.hero-arrow-next { right: 1.75rem; }

/* Indicators */
.hero-dots {
  position: absolute;
  bottom: 2.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  gap: 0.7rem;
}

.hero-dot {
  position: relative;
  width: 38px;
  height: 2px;
  padding: 0;
  border: 0;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.4);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
  cursor: pointer;
  overflow: hidden;
  transition: background 0.4s ease;
}

.hero-dot::after {
  content: '';
  position: absolute;
  inset: 0;
  transform-origin: left center;
  transform: scaleX(0);
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent-light) 100%);
}

.hero-dot:hover { background: rgba(255, 255, 255, 0.6); }

.hero-dot.is-active::after {
  animation: heroDotFill 6s linear forwards;
}

.hero-dot.is-active.is-paused::after {
  animation-play-state: paused;
}

@keyframes heroDotFill {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

@media (max-width: 768px) {
  .hero-slide-caption {
    left: 1.5rem;
    right: 1.5rem;
    bottom: 4rem;
  }

  .hero-slide-place { font-size: 1.1rem; }
  .hero-slide-where { font-size: 0.65rem; letter-spacing: 2px; }

  .hero-arrow { display: none; }

  .hero-dots { bottom: 1.75rem; gap: 0.5rem; }
  .hero-dot { width: 26px; }
}

/* Respect users who ask for less motion: no drift, no auto-advance bar */
@media (prefers-reduced-motion: reduce) {
  .hero-slide.is-active .hero-bg { animation: none; }
  .hero-slide { transition-duration: 0.25s; }
  .hero-dot.is-active::after { animation: none; transform: scaleX(1); }
  .hero-slide-caption { transition: none; }
}

.hero-content {
  max-width: 800px;
  padding: 0 1.5rem;
  opacity: 0;
  transform: translateY(30px);
  animation: fadeUp 1s forwards 0.5s;
}

@keyframes fadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero-subtitle {
  font-size: 1.25rem;
  text-transform: uppercase;
  letter-spacing: 4px;
  margin-bottom: 1rem;
  display: block;
}

.hero h1 {
  margin-bottom: 1.5rem;
  color: #ffffff !important;
  text-shadow: 0 4px 15px rgba(0,0,0,0.8);
  font-weight: 800;
}

.hero p {
  font-size: 1.25rem;
  margin-bottom: 2.5rem;
  opacity: 0.9;
}

/* Properties Section */
.properties {
  background-color: var(--bg-color);
}

.section-header {
  text-align: center;
  max-width: 700px;
  margin: 0 auto 4rem auto;
}

.property-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 3rem;
}

.property-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
  position: relative;
  display: flex;
  flex-direction: column;
}

.property-card:hover {
  transform: translateY(-10px);
  box-shadow: var(--shadow-xl);
}

.property-img-wrapper {
  position: relative;
  height: 300px;
  overflow: hidden;
}

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

.property-card:hover .property-img {
  transform: scale(1.05);
}

.property-tag {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(4px);
  padding: 0.5rem 1rem;
  border-radius: 20px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--primary);
}

.property-content {
  padding: 2rem;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.property-features {
  display: flex;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
  color: var(--text-muted);
  font-size: 0.9rem;
}

.feature {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.feature svg {
  width: 18px;
  height: 18px;
  stroke: var(--accent);
}

.property-content p {
  color: var(--text-muted);
  margin-bottom: 2rem;
  flex-grow: 1;
}

/* Discover Section */
.discover {
  background: var(--primary);
  color: var(--white);
  padding: 8rem 0;
}

.discover h2, .discover h3 {
  color: var(--white);
}

.discover-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}

.discover-content {
  padding-right: 2rem;
}

.discover-features {
  margin-top: 2rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

.discover-feature h3 {
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
}

.discover-feature p {
  font-size: 1rem;
  opacity: 0.8;
}

/* Form Modal */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(5px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  opacity: 0;
  visibility: hidden;
  transition: var(--transition);
}

.modal-overlay.active {
  opacity: 1;
  visibility: visible;
}

.modal {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-lg);
  padding: 3rem;
  width: 100%;
  max-width: 600px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--shadow-glass);
  transform: translateY(20px) scale(0.95);
  transition: var(--transition);
  position: relative;
}

.modal-overlay.active .modal {
  transform: translateY(0) scale(1);
}

.modal-close {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  background: none;
  border: none;
  font-size: 2rem;
  color: var(--text-muted);
  cursor: pointer;
  transition: var(--transition);
  line-height: 1;
}

.modal-close:hover {
  color: var(--accent);
}

.modal-header {
  margin-bottom: 2rem;
  text-align: center;
}

.modal-header h2 {
  font-size: 2.25rem;
}

.form-group {
  margin-bottom: 1.5rem;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.3rem;
  color: var(--text-color);
  font-size: 0.9rem;
}

input, select, textarea {
  width: 100%;
  padding: 1rem;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 1rem;
  background: var(--white);
  transition: var(--transition);
}

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 4px rgba(75, 94, 38, 0.1);
}

textarea {
  resize: vertical;
  min-height: 120px;
}

.form-submit {
  width: 100%;
  margin-top: 1rem;
}

/* Footer */
footer {
  padding: 2rem 0;
  text-align: center;
  border-top: 1px solid var(--border);
  background: var(--white);
  color: var(--text-muted);
}

.footer-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.footer-credits {
  max-width: 640px;
  font-size: 0.72rem;
  line-height: 1.6;
  opacity: 0.7;
}

.footer-credits a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.footer-social {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
}

.social-icon {
  width: 24px;
  height: 24px;
  fill: var(--text-muted);
  transition: var(--transition);
}

/* Brand Colors */
.instagram-icon:hover {
  fill: url(#ig-gradient);
}

.facebook-icon:hover {
  fill: #1877F2;
}

/* Keep icons colored if preferred, or just on hover? */
/* User asked for colors, so I'll make them colored by default or on hover. 
   Usually, premium sites keep them muted and color on hover. 
   But "with the colors" might mean always. 
   I'll make them always colored but slightly desaturated, and fully vivid on hover. */

.instagram-icon {
  fill: #E4405F;
}

.facebook-icon {
  fill: #1877F2;
}

.social-icon:hover {
  transform: translateY(-2px);
  filter: brightness(1.1);
}

/* Responsive */
@media (max-width: 768px) {
  /* .nav-links is the off-canvas drawer defined further up: fixed, parked at
     right:-100%, slid in by .active. It must NOT be display:none — that
     killed the drawer entirely, so the hamburger opened nothing and the
     "Request a Stay" button was unreachable on phones. */
  .menu-toggle {
    display: block;
  }
  
  .discover-grid {
    grid-template-columns: 1fr;
  }
  
  .form-row {
    grid-template-columns: 1fr;
  }
  
  .modal {
    padding: 2rem;
  }
}

.gallery img {
  cursor: pointer;
}
.gallery img:hover {
  opacity: 0.9;
}

/* Lightbox */
.lightbox {
  display: none;              /* JS switches this to flex */
  align-items: center;
  justify-content: center;
  position: fixed;
  z-index: 2000;
  padding: 72px 24px 96px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.9);
}

/* Centred and fitted to whatever space is left, so landscape and portrait
   photos both fill the frame instead of the wide ones sitting at the top. */
.lightbox-content {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--radius-md);
  box-shadow: 0 4px 20px rgba(0,0,0,0.5);
  animation: zoom 0.3s ease;
}

.lightbox-counter {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255,255,255,0.85);
  font-family: var(--font-body);
  font-size: 0.85rem;
  letter-spacing: 1px;
  pointer-events: none;
}

@keyframes zoom {
  from {transform:scale(0.9); opacity:0} 
  to {transform:scale(1); opacity:1}
}

.lightbox-close {
  position: absolute;
  top: 20px;
  right: 35px;
  color: #fff;
  font-size: 40px;
  font-weight: bold;
  cursor: pointer;
  z-index: 2001;
}

.lightbox-close:hover {
  color: var(--primary-light);
}

.lightbox-prev, .lightbox-next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 20px;
  margin-top: -50px;
  color: white;
  font-weight: bold;
  font-size: 40px;
  user-select: none;
  transition: 0.3s;
  background: rgba(0,0,0,0.2);
  border-radius: 4px;
}

.lightbox-prev:hover, .lightbox-next:hover {
  background-color: rgba(0,0,0,0.8);
}

.lightbox-next {
  right: 20px;
}

.lightbox-prev {
  left: 20px;
}

/* Review Badge */
.review-badge {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(75, 94, 38, 0.15);
  border-radius: var(--radius-md);
  padding: 1rem 1.25rem;
  max-width: 280px;
  box-shadow: var(--shadow-sm);
  transition: opacity 0.4s ease;
  flex-shrink: 0;
}

.review-badge-stars {
  color: #f59e0b;
  font-size: 0.85rem;
  letter-spacing: 2px;
  margin-bottom: 0.4rem;
}

.review-badge-text {
  font-size: 0.8rem;
  line-height: 1.4;
  color: var(--text-color);
  font-style: italic;
  margin-bottom: 0.4rem;
}

.review-badge-author {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--primary);
  margin: 0;
}

/* Review badge overlaid on gallery top-right image */
.review-badge-gallery {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(6px);
  padding: 0.65rem 0.85rem;
  transition: opacity 0.4s ease;
}

.review-badge-gallery .review-badge-stars {
  color: #f59e0b;
  font-size: 0.75rem;
  letter-spacing: 1px;
  margin-bottom: 0.2rem;
}

@media (max-width: 768px) {
  .review-badge-gallery {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    margin-top: 1rem;
    background: var(--white);
    padding: 1rem;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    width: 100%;
    z-index: 10;
  }
  
  .review-badge-gallery .review-badge-text {
    color: var(--text-color);
  }
  
  .review-badge-gallery .review-badge-author {
    color: var(--primary);
  }
}


.review-badge-gallery .review-badge-text {
  font-size: 0.75rem;
  line-height: 1.3;
  color: #fff;
  font-style: italic;
  margin-bottom: 0.2rem;
}

.review-badge-gallery .review-badge-author {
  font-size: 0.7rem;
  font-weight: 600;
  color: #f59e0b;
  margin: 0;
}

/* Gallery "View more photos" overlay on last image */
.gallery-more-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: background 0.2s;
  border-radius: 0;
}

.gallery-more-overlay:hover {
  background: rgba(0, 0, 0, 0.7);
}

.gallery-more-mobile {
  display: none;
  font-size: 2rem;
}

.gallery-more-text {
  display: inline;
  font-size: 1.2rem;
}


@media (max-width: 768px) {
  .gallery-more-text {
    display: none;
  }
  .gallery-more-mobile {
    display: inline;
  }
}

.gallery > div {
  position: relative;
  overflow: hidden;
}

.mobile-reviews {
  display: none;
}

@media (max-width: 768px) {
  .mobile-reviews {
    display: block;
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid var(--border);
  }
  
  .form-row {
    grid-template-columns: 1fr !important;
    gap: 0.75rem !important;
  }

  .date-row-mobile {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0.75rem !important;
  }

  .date-row-mobile .form-group {
    margin-bottom: 1rem !important;
  }

  .date-row-mobile input {
    font-size: 16px !important; /* Prevent iOS zoom */
  }


  
  .form-group {
    margin-bottom: 1rem !important;
  }
  
  input, select, textarea {
    padding: 0.75rem !important;
  }
  
  .modal {
    padding: 1.25rem !important;
  }
  
  .modal-header {
    margin-bottom: 1rem !important;
  }
  
  .modal-header h2 {
    font-size: 1.5rem !important;
  }
  
  .booking-sidebar {
    position: relative !important;
    top: 0 !important;
    width: 100% !important;
    margin-top: 2rem;
    padding: 1.25rem !important; /* Slightly more compact */
    box-shadow: none !important; /* Remove shadow on mobile for flatter look */
    border: 1px solid var(--border);
  }

  .property-details-grid {
    display: flex !important;
    flex-direction: column !important;
  }

  .property-details-grid > div:last-child {
    order: -1; /* Sidebar comes first on mobile (under images) */
    margin-bottom: 2rem;
  }

  /* Fix Flatpickr month/year visibility on mobile */
  .flatpickr-calendar {
    width: 307px !important; /* Standard Flatpickr width */
    max-width: calc(100vw - 32px) !important;
    right: 0 !important;
    left: 0 !important;
    margin: 1rem auto !important;
    box-shadow: var(--shadow-lg) !important;
  }
  .flatpickr-months .flatpickr-month {
    height: 40px !important;
  }
  
  .flatpickr-current-month {
    font-size: 1rem !important;
    padding-top: 10px !important;
  }
  .flatpickr-current-month .flatpickr-monthDropdown-months {
    font-weight: 600 !important;
  }
  .numInputWrapper {
    width: 6ch !important;
  }
}

/* Inline Success Message Styles */
.success-card-inline {
  background: rgba(255, 255, 255, 0.95);
  padding: 3rem 2rem;
  border-radius: var(--radius-lg);
  text-align: center;
  animation: cardAppear 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
  box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}
.success-icon-wrapper-inline {
  width: 64px;
  height: 64px;
  background: linear-gradient(135deg, #4b5e26 0%, #6a8239 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.5rem;
  box-shadow: 0 8px 15px rgba(75, 94, 38, 0.2);
}
.success-icon-inline {
  font-size: 2rem;
  color: white;
  line-height: 1;
}
.success-card-inline h3 {
  font-family: var(--font-heading);
  font-size: 1.8rem;
  margin-bottom: 1rem;
  color: var(--text-color);
}
.success-card-inline p {
  color: var(--text-muted);
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 0;
}
@keyframes cardAppear {
  from { opacity: 0; transform: scale(0.95) translateY(10px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

/* ============================================================
   Mobile refinements
   Tap targets, iOS zoom, calendar and lightbox sizing.
   ============================================================ */

@media (max-width: 768px) {
  /* iOS zooms the page whenever a focused form control is under 16px */
  .lang-toggle,
  input, select, textarea {
    font-size: 16px !important;
  }

  /* --- Navigation --- */
  .menu-toggle {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    line-height: 1;
  }

  .lang-toggle {
    min-height: 44px;
    padding: 0.35rem 0.5rem;
  }

  /* --- Hero carousel --- */
  /* The visible bar stays hairline-thin; the tap area around it does not */
  .hero-dots {
    gap: 0;
  }

  .hero-dot {
    width: 26px;
    height: 2px;
    margin: 0 0.35rem;
  }

  .hero-dot::before {
    content: '';
    position: absolute;
    top: -21px;
    bottom: -21px;
    left: -0.35rem;
    right: -0.35rem;
  }

  .hero-slide-where {
    font-size: 0.7rem;
  }

  /* --- Footer credits --- */
  .footer-credits {
    font-size: 0.75rem;
    line-height: 2;
  }

  /* --- WhatsApp / host contact: primary action, needs a real target --- */
  #whatsappLink {
    min-height: 44px;
    align-items: center;
  }

  /* --- Lightbox --- */
  .lightbox {
    padding: 60px 10px 92px;
  }

  /* Arrows sit below the photo rather than on top of it, so a wide
     landscape shot is never covered and both are in thumb reach. */
  .lightbox-prev,
  .lightbox-next {
    top: auto;
    bottom: 18px;
    margin-top: 0;
    padding: 12px 22px;
    font-size: 28px;
    background: rgba(255,255,255,0.14);
    border-radius: 999px;
  }

  .lightbox-prev { left: 18px; }
  .lightbox-next { right: 18px; }

  .lightbox-counter { bottom: 32px; }

  .lightbox .close,
  .lightbox-close {
    width: 48px;
    height: 48px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    top: 8px !important;
    right: 8px !important;
    line-height: 1;
  }
}

/* --- Flatpickr on small screens --- */
@media (max-width: 768px) {
  /* The month row was clipped: its content is taller than the old fixed 40px */
  .flatpickr-months,
  .flatpickr-months .flatpickr-month {
    height: auto !important;
    min-height: 48px !important;
    overflow: visible !important;
  }

  .flatpickr-current-month {
    position: relative !important;
    height: auto !important;
    padding: 6px 0 !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
  }

  .flatpickr-current-month .flatpickr-monthDropdown-months,
  .flatpickr-current-month .numInputWrapper {
    height: auto !important;
    font-size: 1rem !important;
  }

  /* Month arrows: keep the chevron small, make the target big */
  .flatpickr-months .flatpickr-prev-month,
  .flatpickr-months .flatpickr-next-month {
    height: 48px !important;
    width: 48px !important;
    padding: 14px !important;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .flatpickr-day {
    height: 42px;
    line-height: 42px;
    max-width: none;
  }

  /* Match the site palette instead of flatpickr's default blue */
  .flatpickr-day.selected,
  .flatpickr-day.startRange,
  .flatpickr-day.endRange {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
  }

  .flatpickr-day.inRange {
    background: rgba(75, 94, 38, 0.12) !important;
    border-color: rgba(75, 94, 38, 0.12) !important;
    box-shadow: -5px 0 0 rgba(75, 94, 38, 0.12), 5px 0 0 rgba(75, 94, 38, 0.12) !important;
  }

  .flatpickr-day.today {
    border-color: var(--accent) !important;
  }
}

@media (max-width: 480px) {
  /* "Explore Properties" / "Book Your Stay" were wrapping onto 2-3 lines
     side by side. Stack them: one line each, full-width tap targets. */
  .hero-content > div[style*="flex"] {
    flex-direction: column;
    align-items: stretch;
  }

  .hero-content .btn {
    width: 100%;
    white-space: nowrap;
    padding: 0.85rem 1rem;
  }

  /* Tighten the stack so the buttons clear the slide caption */
  .hero-subtitle {
    font-size: 1rem;
    letter-spacing: 3px;
    margin-bottom: 0.5rem;
  }

  .hero h1 {
    font-size: 2.2rem;
    margin-bottom: 1rem;
  }

  .hero p {
    font-size: 1.05rem;
    margin-bottom: 1.5rem !important;
  }

  .hero-slide-caption {
    bottom: 3.25rem;
  }
}