: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;
}

/* ---------------------------------------------------------------------------
   Booking modal — compact layout (v1.3)

   v1.2 inherited the page's generous form spacing (3rem modal padding, 1.5rem
   between every field, a 120px textarea) and the expanded modal came out
   1035px tall. It is its own scroll container, so it never overflowed the
   screen — it just hid the Send button below its own fold on every viewport
   except a tall desktop: 111px under at 1440x780, 168px at 1280x720, 306px on
   a 390x664 phone. Guests had to scroll inside the popup to submit.

   Everything below is scoped to .modal so the property pages' .booking-sidebar
   form, which already fits, is untouched. The target is no internal scrolling
   at all — the whole form, Send button included, on one screen.
   _dev/tests/modal-fit-test.js measures it.
   --------------------------------------------------------------------------- */

.modal {
  padding: 1.75rem 2rem;
}

.modal .modal-close {
  top: 0.75rem;
  right: 1rem;
  font-size: 1.75rem;
}

.modal .modal-header {
  margin-bottom: 0.9rem;
}

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

/* One rhythm for the whole form. The old layout mixed a flex gap on the form
   with margin-bottom on every .form-group, which double-spaced some pairs and
   not others; gap alone is predictable and tunable per breakpoint. */
.modal #bookingForm,
.modal #extra-fields {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.modal .form-group {
  margin-bottom: 0;
  gap: 0;
}

/* align-items:end keeps the two inputs on a row level with each other when a
   long German label wraps in one column only. */
.modal .form-row {
  gap: 0.75rem;
  align-items: end;
}

.modal label {
  font-size: 0.82rem;
  margin-bottom: 0.2rem;
}

.modal input,
.modal select,
.modal textarea {
  padding: 0.55rem 0.7rem;
  font-size: 0.95rem;
}

/* 120px of empty notes box was the single biggest block of dead space. Two
   lines is enough to start typing in; it is still resizable. */
.modal textarea {
  min-height: 54px;
}

.modal .form-submit {
  margin-top: 0.1rem;
  padding: 0.8rem 2rem;
}

.modal-host-contact {
  margin-top: 0.6rem;
  padding-top: 0.7rem;
  border-top: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.15rem 0.5rem;
}

.modal-host-contact .host-contact-label {
  font-weight: 600;
  font-size: 0.85rem;
  margin-bottom: 0;
}

.modal-host-contact .host-contact-name {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: 0;
}

/* width:100% rather than margin-left:auto — the row nearly always wraps once the
   host's name is in it, and an auto margin would strand the number right-aligned
   on a line of its own. */
.modal-host-contact .host-contact-link {
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 600;
  font-size: 1rem;
  color: var(--whatsapp-green);
  width: 100%;
}

/* 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;
  }
}

/* ---------------------------------------------------------------------------
   Booking modal on a phone (v1.3)

   Not the desktop form squeezed narrow: a bottom sheet that owns the screen.
   It must come after the two @media (max-width:768px) blocks above and repeat
   their !important, because those set .form-group/.form-row/.modal spacing
   with !important and would otherwise win over anything scoped here.
   --------------------------------------------------------------------------- */
@media (max-width: 768px) {
  /* Full-width sheet on the bottom edge — the whole viewport height is
     available, and the guest's thumb is already down there. */
  .modal-overlay {
    align-items: flex-end !important;
  }

  .modal {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 96vh !important;
    max-height: 96dvh !important;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
    padding: 1rem 1.05rem !important;
    padding-bottom: max(1rem, env(safe-area-inset-bottom)) !important;
  }

  .modal .modal-close {
    top: 0.35rem !important;
    right: 0.6rem !important;
  }

  .modal .modal-header {
    margin-bottom: 0.5rem !important;
  }

  .modal .modal-header h2 {
    font-size: 1.35rem !important;
  }

  .modal #bookingForm,
  .modal #extra-fields {
    gap: 0.45rem !important;
  }

  .modal .form-group {
    margin-bottom: 0 !important;
  }

  .modal .form-row {
    gap: 0.55rem !important;
  }

  /* Name gets the room; the guest count is one digit. 7rem rather than the
     ~4rem the select needs, because the column has to hold its label on one
     line — German's "Anzahl der Gäste" wraps below that and drags the whole
     row 22px taller than the field it labels. */
  .modal .guests-row {
    display: grid !important;
    grid-template-columns: 1fr 7rem !important;
  }

  .modal label {
    font-size: 0.78rem !important;
    margin-bottom: 0.15rem !important;
  }

  /* 16px is the floor: anything smaller and iOS zooms the page on focus, which
     leaves the guest scrolled sideways inside a modal they cannot pan out of. */
  .modal input,
  .modal select,
  .modal textarea {
    font-size: 16px !important;
    padding: 0.5rem 0.6rem !important;
  }

  .modal textarea {
    min-height: 46px !important;
  }

  .modal .form-submit {
    padding: 0.85rem 1rem !important;
    font-size: 1rem !important;
  }

  .modal-host-contact {
    margin-top: 0.3rem !important;
    padding-top: 0.45rem !important;
    gap: 0 0.35rem !important;
  }

  .modal-host-contact .host-contact-label,
  .modal-host-contact .host-contact-name {
    font-size: 0.76rem !important;
    line-height: 1.35 !important;
  }

  .modal-host-contact .host-contact-link {
    font-size: 0.95rem !important;
  }
}

/* A 664px-tall phone (an iPhone 12/13 with the browser chrome showing) has no
   room for a sheet that leaves a gap above it. Go full-screen there — the
   rounded top corners only make sense when something is visible behind them. */
@media (max-width: 768px) and (max-height: 720px) {
  .modal {
    max-height: 100vh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    padding-bottom: max(0.6rem, env(safe-area-inset-bottom)) !important;
  }

  .modal .modal-header {
    margin-bottom: 0.3rem !important;
  }

  .modal .modal-header h2 {
    font-size: 1.2rem !important;
  }

  .modal #bookingForm,
  .modal #extra-fields {
    gap: 0.4rem !important;
  }

  /* height, not min-height: a textarea's intrinsic size comes from rows=2 and
     wins over a smaller min-height. It is still resizable by drag. Keep two
     16px lines' worth — at 44px the placeholder is sliced through the middle
     of its second line. */
  .modal textarea {
    height: 56px !important;
    min-height: 56px !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;
  }
}