:root{
  --bg:#0b0b0e;
  --panel:#13131a;
  --text:#e9e6ef;
  --muted:#bfb8c9;
  --accent:#d4a373; /* rose‑gold */
  --accent-2:#f1c6a8;
  --glass: rgba(255,255,255,0.06);
  --shadow: 0 10px 30px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial,sans-serif;line-height:1.6}

h1,h2,h3{font-family:"Playfair Display",serif;margin:0 0 .5rem}
h1{font-size:clamp(2rem,3.3vw,3.25rem)}
h2{font-size:clamp(1.6rem,2.4vw,2.2rem)}
h3{font-size:1.2rem}
p,li{color:var(--muted)}

.center{text-align:center}
.faint{opacity:.7}
.tiny{font-size:.85rem}

.section{padding:64px 20px}
.section.wide{padding:80px 20px}
.grid{display:grid;gap:20px}
.grid.two{grid-template-columns:1fr;gap:28px}
@media(min-width:860px){.grid.two{grid-template-columns:1.1fr .9fr}}

.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px;margin-top:24px}
.card{background:linear-gradient(180deg,var(--glass),transparent);border:1px solid rgba(255,255,255,0.08);padding:22px;border-radius:16px;box-shadow:var(--shadow)}
.card .price{font-size:1.6rem;color:var(--accent);font-weight:700;margin:.25rem 0 .75rem}

.cta{display:inline-block;background:linear-gradient(180deg,var(--accent),var(--accent-2));color:#1a1210;text-decoration:none;padding:12px 22px;border-radius:999px;font-weight:700;box-shadow:var(--shadow);transition:transform .15s ease}
.cta:hover{transform:translateY(-1px)}
.cta.wide{width:100%;text-align:center}

.site-header{position:sticky;top:0;z-index:20;background:rgba(11,11,14,0.6);backdrop-filter:blur(10px);border-bottom:1px solid rgba(255,255,255,0.06);display:flex;align-items:center;justify-content:space-between;padding:12px 16px}
.brand{font-weight:800;letter-spacing:.5px}
.brand span{color:var(--accent)}
.site-nav{display:none;gap:16px}
.site-nav a{color:var(--text);text-decoration:none;opacity:.9}
.hamburger{font-size:22px;background:none;border:1px solid rgba(255,255,255,0.2);border-radius:10px;color:var(--text);padding:6px 10px}
@media(min-width:980px){
  .site-nav{display:flex}
  .hamburger{display:none}
}

.hero{
  position:relative;min-height:72vh;display:grid;place-items:center;
  background:
    linear-gradient(180deg,rgba(11,11,14,.35),rgba(11,11,14,.85)),
    var(--hero, radial-gradient(1200px 800px at 70% 10%, #201a18 0%, #0b0b0e 60%));
  background-size:cover;
  background-position:center;
}
.hero-inner{text-align:center;padding:80px 20px}
.hero p{max-width:720px;margin:10px auto 26px}

.about-card{background:var(--panel);border:1px solid rgba(255,255,255,.06);border-radius:16px;min-height:280px;box-shadow:var(--shadow);display:flex;flex-direction:column;overflow:hidden}
.about-photo{flex:1;background:
  linear-gradient(180deg,rgba(212,163,115,.25),transparent),
  radial-gradient(500px 300px at 20% 10%, rgba(212,163,115,.12), transparent 60%),
  linear-gradient(135deg,#1b1513,#0f0f13);}
.about-note{padding:10px 14px;border-top:1px solid rgba(255,255,255,.06);font-size:.9rem;color:var(--muted)}

.grid.gallery{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
.g-item{display:block;border-radius:12px;overflow:hidden;border:1px solid rgba(255,255,255,.08);background:var(--panel)}
.g-item img{width:100%;display:block;aspect-ratio:4/5;object-fit:cover;opacity:.92;transition:transform .25s ease}
.g-item:hover img{transform:scale(1.03)}

.booking-form{max-width:920px;margin:0 auto;background:linear-gradient(180deg,var(--glass),transparent);border:1px solid rgba(255,255,255,.08);padding:22px;border-radius:16px;box-shadow:var(--shadow)}
.booking-form input,.booking-form select,.booking-form textarea{
  width:100%;margin-top:6px;background:#0e0e14;border:1px solid rgba(255,255,255,.08);color:var(--text);
  padding:12px 12px;border-radius:12px;outline:none
}
.booking-form label{display:block;font-weight:600;color:var(--text)}
.booking-form .grid.two{gap:16px}

.etiquette{max-width:820px;margin:0 auto}
.etiquette li{margin:.35rem 0}

.reviews{display:flex;gap:16px;overflow:auto;scroll-snap-type:x mandatory;padding:8px}
.reviews blockquote{scroll-snap-align:center;min-width:300px;max-width:520px;margin:0;background:var(--panel);border:1px solid rgba(255,255,255,.08);padding:18px;border-radius:14px}

.contact-grid{display:grid;grid-template-columns:1fr;gap:12px;max-width:700px;margin:0 auto}
@media(min-width:640px){.contact-grid{grid-template-columns:repeat(3,1fr)}}
.contact-item{display:block;text-align:center;padding:12px;border-radius:12px;background:linear-gradient(180deg,var(--glass),transparent);border:1px solid rgba(255,255,255,.08);color:var(--text);text-decoration:none}

.float-wrap{position:fixed;right:16px;bottom:16px;z-index:30}
.float-btn{background:linear-gradient(180deg,var(--accent),var(--accent-2));border:none;color:#1a1210;padding:12px 16px;border-radius:999px;box-shadow:var(--shadow);font-weight:800}
.float-panel{position:absolute;right:0;bottom:56px;display:flex;flex-direction:column;gap:8px;background:rgba(11,11,14,.8);backdrop-filter:blur(8px);padding:10px;border-radius:12px;border:1px solid rgba(255,255,255,.08)}
.float-panel a{color:var(--text);text-decoration:none;padding:8px 12px;border-radius:8px;background:var(--glass);border:1px solid rgba(255,255,255,.06)}

.site-footer{padding:30px 16px;text-align:center;color:var(--muted);border-top:1px solid rgba(255,255,255,.06);background:#0b0b0f}

.site-nav a{position:relative}
.site-nav a::after{content:"";position:absolute;left:0;bottom:-6px;height:2px;width:0;background:linear-gradient(180deg,var(--accent),var(--accent-2));transition:width .2s}
.site-nav a:hover::after{width:100%}

/* Overlay nav: hamburger-only navigation on all viewports */
.site-nav{display:none !important}
.site-header{position:sticky}
.site-nav--panel{
  position:fixed;
  inset:0;
  display:none !important;
  padding:80px 24px 24px;
  background:rgba(11,11,14,.96);
  backdrop-filter:blur(10px);
  z-index:100;
  flex-direction:column;
  gap:18px;
}
.site-nav--panel a{
  font-size:1.25rem;
  padding:10px 6px;
  border-bottom:1px solid rgba(255,255,255,.06);
}

/* When opened (JS will add .open) */
.site-nav--panel.open{ display:flex !important; }

/* Make hamburger always visible */
.hamburger{display:inline-flex !important; align-items:center; justify-content:center}

/* Sections: only one visible at a time (others have [hidden]) */
section[hidden]{display:none !important}

/* Home details */
.hero-points{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin:14px 0 18px}
.hero-points span{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.10);padding:8px 12px;border-radius:999px;font-size:.95rem}

.hero-ctas{display:flex;gap:12px;justify-content:center;margin:10px 0 6px}
.cta.outline{background:transparent;color:var(--text);border:1px solid rgba(255,255,255,.25)}

.hero-info{display:grid;gap:6px;justify-items:center;margin-top:10px;color:var(--muted);font-size:.95rem}

.about-message{padding:18px;color:var(--text);font-style:italic;display:flex;flex-direction:column;gap:10px;justify-content:center;align-items:flex-start}
.about-message .signed{align-self:flex-end;font-style:normal;font-weight:600;color:var(--accent)}

.rate-intro p{margin:4px 0;color:var(--muted)}
.rate-tables{margin-top:24px}
.rate-column h3{text-align:center;color:var(--accent);margin-bottom:10px}
.rate-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:6px}
.rate-list li{display:flex;justify-content:space-between;padding:8px 12px;border-bottom:1px solid rgba(255,255,255,0.08);font-size:.98rem;color:var(--text)}
.rate-list span{color:var(--accent);font-weight:600}
.kindly-note{margin-top:40px;background:linear-gradient(180deg,var(--glass),transparent);border:1px solid rgba(255,255,255,0.08);padding:18px;border-radius:14px;text-align:center}
.kindly-note h3{color:var(--accent);margin-bottom:8px}
.kindly-note p{max-width:720px;margin:0 auto;color:var(--muted);font-size:.95rem}

.agree{display:flex;align-items:center;gap:10px;margin:12px 0}
.thankyou{margin-top:24px}

/* Booking thank-you popup */
.popup-message{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.7);
  display:grid;
  place-items:center;
  z-index:999;
}
.popup-content{
  background:var(--panel);
  border:1px solid rgba(255,255,255,0.1);
  padding:30px 40px;
  border-radius:16px;
  text-align:center;
  max-width:300px;
  box-shadow:var(--shadow);
}
.popup-content h3{color:var(--accent);margin-bottom:8px}
.popup-content p{color:var(--text);margin-bottom:14px;font-size:.95rem}
.popup-content button{
  background:linear-gradient(180deg,var(--accent),var(--accent-2));
  border:none;
  border-radius:999px;
  color:#1a1210;
  font-weight:700;
  padding:8px 16px;
  cursor:pointer;
}

/* Slide-up toast */
#toast-message{
  position:fixed;
  left:50%;
  bottom:16px;
  transform:translate(-50%, 120%);
  background:rgba(20,20,26,.96);
  color:var(--text);
  border:1px solid rgba(255,255,255,.12);
  padding:12px 16px;
  border-radius:12px;
  box-shadow:var(--shadow);
  z-index:9999;
  opacity:0;
  transition:transform .35s ease, opacity .35s ease;
  max-width:92vw;
  text-align:center;
  font-size:.95rem;
}
#toast-message.show{
  transform:translate(-50%, 0%);
  opacity:1;
}
#toast-message strong{color:var(--accent)}

.etiquette-layout{align-items:start;gap:28px}
.etiquette-text{display:flex;flex-direction:column;gap:14px}
.etiquette-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.etiquette-list li{background:linear-gradient(180deg,var(--glass),transparent);border:1px solid rgba(255,255,255,0.06);
  padding:10px 14px;border-radius:10px;font-size:.95rem;line-height:1.55}
.etiquette-list strong{color:var(--accent)}
.etiquette-photo img{width:100%;border-radius:14px;object-fit:cover;box-shadow:var(--shadow);}
@media(min-width:860px){
  .etiquette-photo img{max-height:520px}
}



/* === Reviews === */
.reviews{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;margin-top:18px}
.review-card{background:linear-gradient(180deg,var(--glass),transparent);border:1px solid rgba(255,255,255,0.06);padding:18px;border-radius:14px;box-shadow:var(--shadow)}
.review-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.stars{font-size:1.05rem;line-height:1;display:flex;align-items:center;gap:8px}
.stars span:first-child{letter-spacing:2px}
.rating-badge{display:inline-flex;align-items:center;justify-content:center;min-width:36px;padding:2px 8px;border-radius:999px;background:linear-gradient(180deg,var(--accent),var(--accent-2));color:#1a1210;font-weight:700;font-size:.85rem}
.meta{font-size:.85rem;color:var(--muted)}
.review-text{color:var(--text);font-size:.98rem;line-height:1.6;margin:8px 0 0}



/* === Review Stars & Form === */
.stars span:first-child, .stars-preview span, #starsPreview { color:#f5c542; } /* golden */
.reviews .review-card .stars span:first-child{font-size:1.05rem}
.review-form{max-width:760px;margin:16px auto 0;display:flex;flex-direction:column;gap:14px;background:linear-gradient(180deg,var(--glass),transparent);border:1px solid rgba(255,255,255,0.06);padding:18px;border-radius:14px;box-shadow:var(--shadow)}
.review-form .form-grid{display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:720px){.review-form .form-grid{grid-template-columns:1fr 1fr}}
.field{display:flex;flex-direction:column;gap:8px}
.field input,.field select,.field textarea{background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.12);border-radius:10px;padding:12px 12px;color:var(--text);font-size:1rem}
.field input::placeholder,.field textarea::placeholder{color:var(--muted)}
.stars-preview{display:flex;justify-content:center;margin-top:4px;font-size:1.2rem}
.btn{background:linear-gradient(180deg,var(--accent),var(--accent-2));border:none;border-radius:999px;padding:12px 18px;font-weight:700;color:#1a1210;cursor:pointer}



/* === Contact === */
.contact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;margin-top:16px}
.contact-chip{display:flex;align-items:center;gap:10px;text-decoration:none;background:linear-gradient(180deg,var(--glass),transparent);border:1px solid rgba(255,255,255,0.08);padding:12px 14px;border-radius:12px;color:var(--text);box-shadow:var(--shadow)}
.contact-chip:hover{transform:translateY(-1px);border-color:rgba(255,255,255,0.18)}


/* iOS viewport & zoom control */
html, body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
  touch-action: manipulation;
}

:root {
  /* Prevent layout jumps due to 100vh on mobile safari */
  --vh: 1vh;
}

.hero, section#home {
  min-height: calc(var(--vh, 1vh) * 100);
}

/* Media-safe image scaling */
img, video {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Prevent double-tap to zoom triggers on buttons/links */
a, button {
  touch-action: manipulation;
}


/* === Custom Hamburger Menu Gold-Dark Gradient Style === */
nav ul li a {
  display: block;
  padding: 12px 18px;
  margin: 8px 0;
  border-radius: 6px;
  background: linear-gradient(135deg, #b8860b, #000);
  color: #fff !important;
  text-align: center;
  text-decoration: none;
  font-weight: 600;
  transition: all 0.3s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

nav ul li a:hover {
  background: linear-gradient(135deg, #ffd700, #4b3600);
  box-shadow: 0 0 12px rgba(255, 215, 0, 0.7);
  transform: scale(1.05);
}
/* === End Custom Menu Style === */


/* === Gold-Dark Gradient for Hamburger Panel & Links (specific to #siteNav) === */
#siteNav.site-nav.site-nav--panel {
  background: linear-gradient(160deg, #0c0a00 0%, #1a1500 40%, #000 100%) !important;
  padding: 16px 14px;
}

#siteNav.site-nav.site-nav--panel a,
.site-nav--panel a {
  display: block;
  padding: 12px 18px;
  margin: 10px 0;
  border-radius: 8px;
  background: linear-gradient(135deg, #3a2a00 0%, #b8860b 55%, #000 100%) !important;
  color: #ffffff !important;
  text-align: center;
  text-decoration: none;
  font-weight: 700;
  letter-spacing: 0.3px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.45);
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease, background .2s ease;
}

#siteNav.site-nav.site-nav--panel a:hover,
#siteNav.site-nav.site-nav--panel a:focus {
  filter: brightness(1.08);
  box-shadow: 0 0 12px rgba(255, 215, 0, 0.5);
  transform: translateY(-1px);
}

#siteNav.site-nav.site-nav--panel a:active {
  transform: translateY(0);
  box-shadow: 0 0 6px rgba(255, 215, 0, 0.35);
}
/* === End Gold-Dark Gradient Patch === */


/* === Subtle Dark-Gold Gradient Background for Each Section === */
#home, #about, #rates, #gallery, #booking, #etiquette, #reviews, #leave-review, #contact {
  background: linear-gradient(180deg, rgba(0,0,0,0.95) 0%, rgba(34,26,0,0.9) 60%, rgba(184,134,11,0.4) 100%);
  color: #fff;
  padding: 40px 0;
  border-top: 1px solid rgba(255,215,0,0.15);
  border-bottom: 1px solid rgba(255,215,0,0.15);
}
/* === End Section Gradient === */




/* === WhatsApp Buttons === */
.btn-whatsapp {
  display: inline-block;
  padding: 12px 18px;
  border-radius: 8px;
  background: linear-gradient(135deg, #34a853, #0b6b2c);
  color: #fff !important;
  text-decoration: none;
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.btn-whatsapp:hover { transform: translateY(-1px); filter: brightness(1.05); }

.contact-actions { margin: 12px 0 18px; }

.whatsapp-float {
  position: fixed;
  right: 14px;
  bottom: 18px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #25D366, #128C7E);
  color: #fff;
  text-decoration: none;
  box-shadow: 0 8px 20px rgba(0,0,0,0.35);
  z-index: 9999;
}
.whatsapp-float:hover { transform: translateY(-1px); filter: brightness(1.05); }
.whatsapp-float svg { fill: #fff; display: block; }


/* === Home-only floating contact buttons === */
#home { position: relative; }

#home .hf-btn {
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  text-decoration: none;
  font-size: 22px;
  box-shadow: 0 8px 18px rgba(0,0,0,0.35);
  transition: transform .15s ease, filter .15s ease;
}
#home .hf-btn:hover { transform: translateY(-1px); filter: brightness(1.05); }
#home .hf-call { background: linear-gradient(135deg, #2d2d2d, #000); color: #fff; }
#home .hf-wa { background: linear-gradient(135deg, #25D366, #128C7E); color: #fff; }
#home .hf-mail { background: linear-gradient(135deg, #1a237e, #0d47a1); color: #fff; }


/* Force-hide any legacy global floating buttons sitewide */
.whatsapp-float, .floating, .floating-contact, .float { 
  display: none !important; 
  visibility: hidden !important; 
  opacity: 0 !important; 
  pointer-events: none !important; 
}


/* Home-only floating contact buttons (visible only when #home is in view) */
#home { position: relative; }

#home .hf-btn {
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  text-decoration: none;
  font-size: 22px;
  box-shadow: 0 8px 18px rgba(0,0,0,0.35);
  transition: transform .15s ease, filter .15s ease;
}
#home .hf-btn:hover { transform: translateY(-1px); filter: brightness(1.05); }
#home .hf-call { background: linear-gradient(135deg, #2d2d2d, #000); color: #fff; }
#home .hf-wa { background: linear-gradient(135deg, #25D366, #128C7E); color: #fff; }
#home .hf-mail { background: linear-gradient(135deg, #1a237e, #0d47a1); color: #fff; }


/* --- Home-only floating contacts: hidden by default --- */
.home-floats {
  position: fixed;
  right: 14px;
  bottom: 18px;
  display: none;                 /* hidden by default */
  flex-direction: column;
  gap: 10px;
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}
.home-floats.visible {
  display: flex;                 /* only shown when #home is visible */
  opacity: 1;
  pointer-events: auto;
}