/* =========================================================
   Chandrakala Homestay — Clean CSS (Refined)
   ========================================================= */

/* =========================
   Root tokens & constants
   ========================= */
:root{
  --accent:#0c8f6f;
  --accent-dark:#086653;

  --bg:#eaf3f0;          /* Softer background */
  --text:#1f2933;        /* Rich dark text */
  --muted:#4b5563;       /* Professional grey */
  --card:#f8f3ea;        /* Warm cream for cards */
  --border:#d6dde8;
  --radius:14px;
  --shadow:0 14px 35px rgba(15,34,58,0.14);
}

/* =========================
   Base
   ========================= */
*{
  box-sizing:border-box;
  margin:0;
  padding:0;
}
html, body{
  width:100%;
  max-width:100%;
  overflow-x:hidden;
}
body{
  font-family:"Poppins",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
  padding-top:70px; /* space for fixed header */
}
a{
  text-decoration:none;
  color:inherit;
}
img{
  max-width:100%;
  display:block;
  border-radius:12px;
}

/* Default section padding */
section{
  padding:60px 18px;
}
@media (min-width:900px){
  section{
    padding:80px 8vw;
  }
}
@media (max-width:640px){
  .room-type-switch{
    justify-content:flex-start;
    overflow-x:auto;
    padding-bottom:4px;
  }
}

/* =========================
   Header
   ========================= */
.site-header{
  position:fixed !important;
  top:0;
  left:0;
  right:0;
  z-index:1000;
  background:#ffffffee;
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
}


/* Header inner: container for both rows */
.header-inner{
  max-width:1120px;
  margin:0 auto;
  padding:0 20px 6px;   /* bottom padding to give space under nav */
}

/* FIRST ROW: logo + Book Now */
.header-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:4px 0;
}

/* Logo block */
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  flex:0 0 auto;
}

/* Logo wrapper */
.logo-img-wrap{
  display:flex;
  align-items:center;
  justify-content:flex-start;
}
.site-logo{
  display:block;
  height:96px;
  width:auto;
  transition:transform .25s ease, filter .25s ease;
  touch-action:manipulation;
}
.site-logo:hover{
  transform:scale(1.06);
  filter:drop-shadow(0 3px 6px rgba(0,0,0,0.25));
}
.site-logo:active{
  transform:scale(1.08);
  filter:drop-shadow(0 4px 7px rgba(0,0,0,0.3));
}

/* (Optional) if you keep brand text later */
.brand-text{
  display:flex;
  flex-direction:column;
}
.brand-main span{
  color:var(--accent);
}
.brand-tagline{
  font-weight:500;
  font-size:0.72rem;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:#6b7a88;
  opacity:0.95;
  margin-top:3px;
}

/* SECOND ROW: navigation under the top row */
.main-nav{
  display:flex;
  gap:12px;
  margin:4px 0 2px;
  align-items:center;
}
.nav-link{
  background:none;
  border:none;
  padding:4px 0;
  font-size:0.78rem;
  color:var(--muted);
  cursor:pointer;
  position:relative;
  letter-spacing:0.04em;
  text-transform:uppercase;
  white-space:nowrap;
}
.nav-link::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-3px;
  width:0;
  height:2px;
  background:var(--accent);
  transition:width .18s ease;
}
.nav-link:hover{
  color:var(--accent-dark);
}
.nav-link:hover::after{
  width:100%;
}

/* Right-side Book Now block in first row */
.header-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  min-width:120px;
}

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  border:1px solid transparent;
  padding:9px 18px;
  font-size:0.9rem;
  font-weight:500;
  cursor:pointer;
  transition:all .18s ease;
  white-space:nowrap;
}
.btn-primary{
  background:var(--accent);
  color:#fff;
  box-shadow:0 10px 30px rgba(8,102,83,0.35);
}
.btn-primary:hover{
  background:var(--accent-dark);
  transform:translateY(-1px);
}
.btn-ghost{
  background:transparent;
  border-color:var(--border);
  color:var(--muted);
}
.btn-ghost:hover{
  border-color:var(--accent);
  color:var(--accent-dark);
}

/* Header Book Now button */
.btn-header-cta{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:8px 18px;
  font-size:0.85rem;
  font-weight:500;
  border-radius:999px;
  box-shadow:0 6px 18px rgba(8,102,83,0.25);
}
.header-book-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.wa-dot{
  width:16px;
  height:16px;
  border-radius:50%;
  background:rgba(255,255,255,0.22);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:0.7rem;
  font-weight:600;
  color:#fff;
}
.header-book-btn:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 26px rgba(8,102,83,0.32);
}

/* Mobile header layout */
@media (max-width:640px){
  .header-inner{
    max-width:100%;
    padding:0 12px 6px;
  }
  .site-logo{
    height:80px;
  }
  .header-top{
    padding-top:4px;
  }
  .btn-header-cta{
    padding:7px 14px;
    font-size:0.8rem;
  }
  .main-nav{
    margin-top:4px;
    justify-content:flex-start;
    gap:14px;
    overflow-x:auto;
    padding-bottom:4px;
  }
}


/* =========================
   HERO – Scenic Background Slider
   ========================= */
.hero{
  position:relative;
  min-height:78vh;
  color:#fff;
  overflow:hidden;
  padding:90px 18px 70px;
  display:flex;
  align-items:center;
}
@media (min-width:900px){
  .hero{
    min-height:80vh;
    padding:110px 8vw 90px;
  }
}

/* Background slides */
.hero-bg-slider{
  position:absolute;
  inset:0;
  z-index:0;
}
.hero-bg-slide{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center center;
  opacity:0;
  transition:opacity .8s ease-in-out;
}
.hero-bg-slide.is-active{
  opacity:1;
}

/* Dark overlay */
.hero-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(
    to bottom,
    rgba(0,0,0,0.35),
    rgba(0,0,0,0.6)
  );
  z-index:1;
}

/* Content wrapper */
.hero-content-wrapper{
  position:relative;
  z-index:2;
  max-width:1120px;
  margin:0 auto;
  display:flex;
  align-items:center;
}
.hero-copy{
  max-width:620px;
}

/* Hero text */
.hero-kicker{
  font-size:0.8rem;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:#d7f2ea;
  margin-bottom:10px;
}
.hero-title{
  font-size:2.1rem;
  line-height:1.2;
  margin-bottom:12px;
}
@media (min-width:900px){
  .hero-title{
    font-size:2.7rem;
  }
}
.hero-sub{
  font-size:0.98rem;
  color:#cfe8e1;
  margin-bottom:14px;
}
.hero-quick{
  font-size:0.88rem;
  color:#e2f3ee;
  margin-bottom:20px;
}
.hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

/* Mobile hero */
@media (max-width:768px){
  .hero{
    min-height:80vh;
    padding:80px 16px 52px;
  }
  .hero-copy{
    max-width:100%;
    margin-top:-10px;
  }
  .hero-title{
    font-size:1.7rem;
  }
  .hero-sub{
    font-size:0.9rem;
  }
  .hero-quick{
    font-size:0.85rem;
    margin-bottom:16px;
  }
}

/* Pagination dots */
.hero-dots{
  position:absolute;
  left:50%;
  bottom:18px;
  transform:translateX(-50%);
  z-index:3;
  display:flex;
  gap:6px;
}
.hero-dot{
  width:8px;
  height:8px;
  border-radius:999px;
  border:none;
  background:rgba(255,255,255,0.45);
  cursor:pointer;
  padding:0;
  transition:all .2s ease;
}
.hero-dot.is-active{
  width:18px;
  background:#0c8f6f;
}

/* =========================
   Section helpers
   ========================= */
.section-heading{
  max-width:1120px;
  margin:0 auto 22px;
  text-align:left;
}
.section-heading h2{
  font-size:1.55rem;
  margin-bottom:6px;
  color:#111827;
}
.section-heading p{
  font-size:0.9rem;
  color:var(--muted);
}

/* =========================
   ROOMS
   ========================= */
.rooms-section{
  background:var(--bg);
}
.rooms-grid{
  max-width:1120px;
  margin:0 auto;
  display:grid;
  gap:28px;
}

.room-card{
  background:#ffffff;
  border-radius:18px;
  border:1px solid var(--border);
  box-shadow:0 12px 30px rgba(0,0,0,0.06);
  padding:14px 14px 16px;
  display:grid;
  gap:12px;
}
@media (min-width:900px){
  .room-card{
    grid-template-columns:minmax(0,1.2fr) minmax(0,1.1fr);
    align-items:stretch;
  }
}

.room-body h3{
  font-size:1.05rem;
  margin-bottom:4px;
  color:#111827;
}
.room-meta{
  font-size:0.88rem;
  color:var(--muted);
  margin-bottom:6px;
}
.room-price{
  font-weight:600;
  font-size:0.98rem;
  margin-bottom:4px;
  color:#111827;
}
.room-price span{
  display:block;
  font-weight:400;
  font-size:0.84rem;
  color:var(--muted);
}
.room-tags{
  font-size:0.86rem;
  color:var(--muted);
}
.room-actions{
  margin-top:12px;
}

/* ROOM SLIDER */
.room-gallery{
  position:relative;
  width:100%;
  overflow:hidden;
  background:#000;
  border-radius:12px;
  margin-bottom:10px;
}

/* Standardised room image size */
.room-image{
  width:100%;
  display:none;
  object-fit:cover;
  aspect-ratio:4 / 3;
  /* fallback for older browsers */
  height:clamp(230px, 36vw, 360px);
}
.room-image.is-active{
  display:block;
}

/* NAV BUTTONS */
.room-nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:34px;
  height:34px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(15,23,42,0.14);
  background:#ffffff;
  color:#111827;
  font-size:1.2rem;
  cursor:pointer;
  box-shadow:0 8px 20px rgba(0,0,0,0.22);
  z-index:5;
}
.room-nav-prev{
  left:16px;
}
.room-nav-next{
  right:16px;
}
@media (max-width:640px){
  .room-nav{
    width:30px;
    height:30px;
    font-size:1.05rem;
  }
}

/* Room type pills */
.room-type-switch{
  max-width:1120px;
  margin:0 auto 18px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.room-type-pill{
  border-radius:999px;
  border:1px solid var(--border);
  padding:7px 14px;
  font-size:0.82rem;
  background:#fff;
  color:var(--muted);
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  white-space:nowrap;
  box-shadow:0 6px 16px rgba(15,23,42,0.06);
}
.room-type-pill.is-active{
  background:var(--accent);
  color:#fff;
  border-color:var(--accent);
}

/* =========================
   Facilities & Services
   ========================= */
.facilities-section{
  background:#f3f5fb;
}
.facilities-grid{
  max-width:1120px;
  margin:0 auto;
  display:grid;
  gap:16px;
}
@media (min-width:900px){
  .facilities-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}
.facility-card{
  background:var(--card);
  border-radius:var(--radius);
  border:1px solid var(--border);
  box-shadow:0 10px 24px rgba(15,23,42,0.05);
  padding:10px 12px 8px;
  transition:box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
.facility-card:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 40px rgba(15,23,42,0.12);
  border-color:rgba(12,143,111,0.4);
}
.facility-header{
  display:flex;
  align-items:flex-start;
  gap:12px;
  background:none;
  border:none;
  padding:4px 0;
  width:100%;
  text-align:left;
  cursor:pointer;
}
.facility-icon{
  width:34px;
  height:34px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.25rem;
  background:rgba(12,143,111,0.06);
}
.facility-text h3{
  font-size:0.98rem;
  margin-bottom:2px;
  color:#111827;
}
.facility-text p{
  font-size:0.82rem;
  color:var(--muted);
}
.facility-toggle-symbol{
  margin-left:auto;
  font-size:1.1rem;
  font-weight:600;
  color:var(--muted);
}

/* Expandable content */
.facility-extra{
  font-size:0.82rem;
  color:var(--muted);
  max-height:0;
  overflow:hidden;
  opacity:0;
  padding:0 4px;
  transition:max-height .25s ease, opacity .25s ease, margin-top .25s ease;
}

/* Unified photo sizing inside facilities */
.meal-photo,
.facility-photo{
  width:100%;
  height:auto;
  aspect-ratio:4 / 3;
  object-fit:cover;
  margin-top:16px;
  border-radius:12px;
  box-shadow:0 4px 18px rgba(0,0,0,0.08);
}

@media (max-width:640px){
  .meal-photo,
  .facility-photo{
    margin-top:12px;
    border-radius:10px;
    max-height:240px;
  }
}

/* Meal intro & list */
.meal-intro{
  font-size:0.95rem;
  line-height:1.55rem;
  color:#444;
  margin-bottom:16px;
}
.meal-disclaimer{
  display:block;
  margin-top:4px;
  font-size:0.82rem;
  color:var(--muted);
}
.meal-list{
  margin-top:14px;
  display:flex;
  flex-direction:column;
  gap:14px;
}
.meal-item{
  display:flex;
  gap:12px;
  background:#f0f4fb;
  border-radius:12px;
  padding:10px 14px;
  border:1px solid #e2e7f1;
  align-items:flex-start;
}
.meal-icon{
  font-size:1.4rem;
  width:40px;
  height:40px;
  background:#ffffff;
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 4px 12px rgba(0,0,0,0.08);
}
.meal-content h4{
  font-size:0.95rem;
  font-weight:600;
  margin-bottom:2px;
  color:#222;
}
.meal-content h4 span{
  font-weight:400;
  font-size:0.82rem;
  color:var(--muted);
}
.meal-content p{
  font-size:0.82rem;
  color:var(--muted);
}

/* When card is open */
.facility-card.open .facility-extra{
  max-height:1200px;
  opacity:1;
  margin-top:6px;
}
.facility-card.open .facility-toggle-symbol{
  color:var(--accent);
}

/* =========================
   About Section
   ========================= */
.about-section{
  background:#f9f4ec;
}
.about-section .section-heading{
  max-width:1120px;
  margin:0 auto 20px;
}

/* Big homestay hero image */
.about-homestay-hero{
  max-width:1120px;
  margin:0 auto 20px;
  background:#ffffff;
  border-radius:var(--radius);
  border:1px solid var(--border);
  overflow:hidden;
  box-shadow:0 12px 30px rgba(15,23,42,0.08);
}

.about-homestay-hero img{
  width:100%;
  height:auto;
  display:block;
}


.about-homestay-caption{
  padding:10px 14px 12px;
  font-size:0.86rem;
  color:#4b5563;
}

/* About grid */
.about-grid{
  max-width:1120px;
  margin:0 auto 18px;
  display:grid;
  gap:18px;
}
@media (min-width:900px){
  .about-grid{
    grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);
    align-items:flex-start;
  }
}

.about-card{
  background:var(--card);
  border-radius:var(--radius);
  border:1px solid var(--border);
  padding:16px 18px 14px;
  box-shadow:0 10px 26px rgba(15,23,42,0.06);
  font-size:0.9rem;
  color:var(--muted);
}
.about-card h3{
  font-size:1.05rem;
  color:#111827;
  margin-bottom:8px;
}
.about-card p{
  margin-bottom:8px;
}

.about-list{
  margin:4px 0 10px;
  padding-left:18px;
  font-size:0.88rem;
}
.about-list li{
  margin-bottom:4px;
}

/* Photo cards */
.about-photo-card{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.about-photo-placeholder{
  border-radius:12px;
  overflow:hidden;
  background:#e4e6ed;
  border:1px dashed #c3cad8;
}
.about-photo-placeholder img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:4 / 3;
  object-fit:cover;
}
.about-photo-caption{
  font-size:0.8rem;
  color:#6b7280;
}
.about-highlight{
  margin-top:6px;
  padding:8px 10px;
  border-radius:10px;
  background:#f0f4fb;
  border:1px solid #dde4f2;
  font-size:0.8rem;
  color:#4b5563;
}

/* Places list */
.about-places{
  max-width:1120px;
  margin:10px auto 0;
  padding:16px 18px 10px;
  background:#fffdf7;
  border-radius:var(--radius);
  border:1px solid var(--border);
  box-shadow:0 10px 26px rgba(15,23,42,0.05);
}
.about-places h3{
  font-size:1.05rem;
  margin-bottom:6px;
  color:#111827;
}
.about-places p{
  font-size:0.88rem;
  color:var(--muted);
  margin-bottom:10px;
}
.about-places-grid{
  display:grid;
  gap:10px;
  font-size:0.88rem;
}
.about-places-grid ul{
  list-style:none;
}
.about-places-grid li{
  margin-bottom:4px;
}
@media (min-width:900px){
  .about-places-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

/* Nearby small photos */
/* Nearby Places & Surroundings – horizontal media strip */
.about-places-media-block{
  margin-top:14px;
}

.about-places-media-header h3{
  font-size:1.02rem;
  margin-bottom:4px;
  color:#111827;
}
.about-places-media-header p{
  font-size:0.86rem;
  color:var(--muted);
  margin-bottom:8px;
}

.about-places-photos{
  margin-top:8px;
  display:flex;
  gap:10px;
  overflow-x:auto;
  scroll-behavior:smooth;
  padding-bottom:6px;
}

/* Cards (photo or video) */
.about-small-photo{
  border-radius:12px;
  overflow:hidden;
  background:#e4e6ed;
  border:1px solid #d2d7e5;
  box-shadow:0 6px 18px rgba(15,23,42,0.08);
  flex:0 0 calc(33.333% - 7px); /* desktop approx 3 cards */
}

/* Same frame for image & video */
.about-small-photo img,
.about-small-photo video{
  width:100%;
  height:auto;
  aspect-ratio:4 / 3;
  object-fit:cover;
  display:block;
}

/* Mobile: 1 main card + peek of next */
@media (max-width:640px){
  .about-places-photos{
    padding-bottom:8px;
  }
  .about-small-photo{
    flex:0 0 78%;
  }
}

/* Tablet / desktop: ~3 cards visible */
@media (min-width:768px){
  .about-small-photo{
    flex:0 0 calc(33.333% - 7px);
  }
}

/* Controls under Nearby Places strip */
.about-places-controls{
  margin-top:8px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
}
.about-places-btn{
  width:30px;
  height:30px;
  border-radius:999px;
  border:1px solid #cbd5e1;
  background:#ffffff;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.1rem;
  color:#475569;
  box-shadow:0 6px 18px rgba(15,23,42,0.07);
}
.about-places-btn:hover{
  background:#e2f3ee;
  border-color:var(--accent);
  color:var(--accent-dark);
}
.about-places-hint{
  font-size:0.8rem;
  color:#6b7280;
}


/* Guest Photo Gallery Strip */
.about-gallery-strip{
  max-width:1120px;
  margin:16px auto 0;
  padding:14px 16px 12px;
  background:#fffdf7;
  border-radius:var(--radius);
  border:1px solid var(--border);
  box-shadow:0 10px 26px rgba(15,23,42,0.05);
}
.about-gallery-header h3{
  font-size:1.02rem;
  margin-bottom:4px;
  color:#111827;
}
.about-gallery-header p{
  font-size:0.86rem;
  color:var(--muted);
  margin-bottom:10px;
}
.about-gallery-track{
  display:flex;
  gap:10px;
  overflow-x:auto;
  padding-bottom:6px;
  scroll-behavior:smooth;
}
.about-gallery-item{
  flex:0 0 auto;
  width:190px;
  border-radius:12px;
  overflow:hidden;
  background:#e5e7eb;
  border:1px solid #d3d7e5;
  box-shadow:0 6px 18px rgba(15,23,42,0.08);
}
.about-gallery-item img{
  width:100%;
  height:auto;
  aspect-ratio:4 / 3;
  object-fit:cover;
}

/* Gallery controls */
.about-gallery-controls{
  margin-top:8px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
}
.about-gallery-btn{
  width:30px;
  height:30px;
  border-radius:999px;
  border:1px solid #cbd5e1;
  background:#ffffff;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.1rem;
  color:#475569;
  box-shadow:0 6px 18px rgba(15,23,42,0.07);
}
.about-gallery-btn:hover{
  background:#e2f3ee;
  border-color:var(--accent);
  color:var(--accent-dark);
}
.about-gallery-hint{
  font-size:0.8rem;
  color:#6b7280;
}

/* Mobile about spacing */
@media (max-width:640px){
  .about-section{
    padding-top:48px;
    padding-bottom:48px;
  }
  .about-card{
    padding:14px 14px 12px;
  }
  .about-places{
    padding:14px 14px 10px;
  }
  .about-gallery-strip{
    padding:12px 12px 10px;
  }
  .about-gallery-item{
    width:170px;
  }
}

/* =========================
   Contact + Booking
   ========================= */
.contact-section{
  background:#0f172a;
  color:#e5e7eb;
}
/* Contact + booking layout */
.contact-section{
  background:#0f172a;
  color:#e5e7eb;
}

/* Default (mobile): stacked */
.contact-inner{
  max-width:1120px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:20px;
}


.contact-cta-row{
  margin-top:16px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

/* Desktop: side by side */
@media (min-width:900px){
  .contact-inner{
    flex-direction:row;
    align-items:flex-start;
    justify-content:space-between;
    gap:32px;
  }

  /* Left text column */
  .contact-inner > div{
    flex:1 1 0;
  }

  /* Right form card */
  .contact-inner > .contact-form{
    flex:0 0 420px;        /* nice fixed width on desktop */
    margin:0;              /* ensure no random top margin */
  }
}

.contact-inner h2{
  font-size:1.6rem;
  margin-bottom:8px;
}
.contact-inner p{
  font-size:0.9rem;
  color:#cbd5f5;
  margin-bottom:14px;
}
.contact-details{
  font-size:0.86rem;
}
.contact-details div{
  margin-bottom:6px;
}
.contact-label{
  font-weight:500;
  color:#e5e7eb;
}

.contact-form{
  background:#020617;
  padding:24px;
  border-radius:12px;
  border:1px solid #1e293b;
  box-shadow:0 18px 40px rgba(0,0,0,0.45);
}


/* Desktop – keep the form as a clear rectangle on the right side */
@media (min-width:900px){
  .contact-form{
    max-width:460px;      /* stops it from stretching too wide */
    margin-left:auto;     /* keeps it aligned to the right column */
  }
}


/* Desktop side-by-side layout */
@media (min-width: 900px){
  .contact-inner{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:40px;
  }

  /* Left side takes 50% */
  .contact-inner > div{
    flex:1;
  }

  /* Form takes fixed width, looks like a premium card */
  .contact-form{
    flex:0 0 420px;
    margin:0;
  }
}

.form-title{
  font-size:1rem;
  font-weight:600;
  margin-bottom:4px;
  color:#e5e7eb;
}
.form-subtitle{
  font-size:0.8rem;
  color:#9ca3af;
  margin-bottom:12px;
}
.form-group{
  margin-bottom:10px;
}
.form-group label{
  font-size:0.8rem;
  margin-bottom:4px;
  display:block;
  color:#cbd5f5;
}
.form-group input,
.form-group textarea,
.form-group select{
  width:100%;
  border-radius:10px;
  border:1px solid #1f2937;
  background:#020617;
  color:#e5e7eb;
  padding:8px 10px;
  font-size:0.84rem;
  outline:none;
}
.form-group textarea{
  min-height:80px;
  resize:vertical;
}
.form-group-inline{
  display:flex;
  gap:12px;
}
.form-group-inline > div{
  flex:1;
}
@media (max-width:640px){
  .form-group-inline{
    flex-direction:column;
    gap:8px;
  }
}
.booking-summary{
  margin-top:4px;
  margin-bottom:14px;
  font-size:0.85rem;
  line-height:1.4;
  color:rgba(255,255,255,0.7);
}
.field-note{
  font-size:0.78rem;
  color:#9ca3af;
  margin:2px 0 12px;
}
.addon-list{
  display:flex;
  flex-direction:column;
  gap:6px;
  font-size:0.9rem;
}
.addon-item{
  display:flex;
  align-items:center;
  gap:6px;
}
.addon-item input[type="checkbox"]{
  accent-color:#16a34a;
}

/* =========================
   Location + Social
   ========================= */
.location-social-section{
  background:#e3f0ea;
}
.location-grid{
  max-width:1120px;
  margin:0 auto;
  display:grid;
  gap:20px;
  padding:0 18px 60px;
}
@media (min-width:900px){
  .location-grid{
    grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);
    padding:0 8vw 70px;
  }
}
.location-card{
  background:#f8f3ea;
  border-radius:18px;
  border:1px solid var(--border);
  box-shadow:0 12px 30px rgba(15,23,42,0.06);
  padding:16px 16px 18px;
}
.location-card h2,
.location-card h3{
  font-size:1.2rem;
  margin-bottom:6px;
  color:#1f2933;
}
.location-text{
  font-size:0.9rem;
  color:var(--muted);
  margin-bottom:12px;
}
.location-text.small{
  font-size:0.8rem;
  color:#6b7280;
}

/* Map */
.map-embed{
  border-radius:14px;
  overflow:hidden;
  border:1px solid #d3e2da;
  box-shadow:0 12px 32px rgba(15,23,42,0.12);
}
.map-embed iframe{
  width:100%;
  height:320px;
}
@media (min-width:900px){
  .map-embed iframe{
    height:360px;
  }
}

/* Social links */
.social-links{
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:16px;
}
.social-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 16px;
  border-radius:10px;
  font-size:0.88rem;
  font-weight:500;
  color:#fff;
  width:fit-content;
  transition:all .25s ease;
}

/* FB */
.social-link.fb{
  background:#1877f2;
  box-shadow:0 6px 22px rgba(24,119,242,0.25);
}
.social-link.fb:hover{
  background:#0f63cc;
  transform:translateY(-2px);
}
/* IG */
.social-link.ig{
  background:linear-gradient(135deg,#f58529,#dd2a7b,#8134af,#515bd4);
  box-shadow:0 6px 22px rgba(221,42,123,0.28);
}
.social-link.ig:hover{
  transform:translateY(-2px);
  filter:brightness(1.08);
}
/* YT */
.social-link.yt{
  background:#ff0000;
  box-shadow:0 6px 22px rgba(255,0,0,0.28);
}
.social-link.yt:hover{
  background:#d00000;
  transform:translateY(-2px);
}

/* =========================
   Image Zoom Overlay
   ========================= */
.image-zoom-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.78);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:16px;
  z-index:80;
  opacity:0;
  pointer-events:none;
  transition:opacity .2s ease;
}
.image-zoom-overlay.is-open{
  opacity:1;
  pointer-events:auto;
}
.image-zoom-inner{
  position:relative;
  max-width:min(1000px,96vw);
  max-height:min(90vh,96vh);
  background:#000;
  border-radius:14px;
  padding:12px 12px 10px;
  box-shadow:0 20px 60px rgba(0,0,0,0.65);
  display:flex;
  flex-direction:column;
  gap:8px;
}
.zoom-img-wrapper{
  flex:1;
  border-radius:12px;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#000;
}
#zoom-img{
  max-width:100%;
  max-height:100%;
  transition:transform .16s ease;
}
.zoom-close{
  position:absolute;
  top:8px;
  right:10px;
  width:32px;
  height:32px;
  border-radius:999px;
  border:none;
  background:rgba(15,23,42,0.92);
  color:#f9fafb;
  font-size:1.3rem;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
}
.zoom-controls{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  margin-top:2px;
  font-size:0.82rem;
  color:#e5e7eb;
}
.zoom-btn{
  width:32px;
  height:32px;
  border-radius:999px;
  border:none;
  background:#111827;
  color:#e5e7eb;
  font-size:1.2rem;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
}
.zoom-btn:hover{
  background:#0f172a;
}
.zoom-label{
  opacity:0.9;
}
@media (max-width:640px){
  .image-zoom-inner{
    padding:10px 10px 8px;
  }
  .zoom-close,
  .zoom-btn{
    width:30px;
    height:30px;
    font-size:1.1rem;
  }
  .zoom-label{
    font-size:0.78rem;
  }
}


.count-wrapper {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 6px;
}

.count-btn {
  background: #fff;
  color: #333;
  width: 36px;
  height: 36px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 22px;
  font-weight: 600;
  cursor: pointer;
  line-height: 1;
}

.count-btn:active {
  background: #f2f2f2;
}

#adults-display {
  min-width: 24px;
  text-align: center;
  font-size: 18px;
  color: #222;
  font-weight: 600;
}

#backToTopBtn {
  position: fixed;
  right: 18px;
  bottom: 28px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(0,0,0,0.6);
  color: #fff;
  border: none;
  font-size: 20px;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0,0,0,0.35);
  z-index: 999;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.2s ease;
}

#backToTopBtn.show {
  opacity: 1;
  visibility: visible;
}

#backToTopBtn:hover {
  transform: scale(1.1);
  background: rgba(0,0,0,0.75);
}

/* =========================
   Footer
   ========================= */
footer{
  background:#020617;
  border-top:1px solid #111827;
  color:#9ca3af;
  padding:16px 18px;
  font-size:0.78rem;
  text-align:center;
}


footer{
  background:#020617;
  border-top:1px solid #111827;
  color:#9ca3af;
  padding:16px 18px;
  font-size:0.78rem;
  text-align:center;
}

footer p{
  margin:2px 0;
}

.footer-dev{
  font-size:0.78rem;
  color:#6b7280;
}

.footer-dev a{
  color:#e5e7eb;
  font-weight:500;
}

.footer-dev a:hover{
  text-decoration:underline;
}