@charset "UTF-8";
/*
Theme Name: QQ Theme
Theme URI: https://facebook.com/
Author: the WordPress team
Author URI: https://facebook.com/
Description: This theme designed by Dark knight
Requires at least: 4.9.6
Requires PHP: 5.2.4
Version: 1.0
Text Domain: qqtheme
*/
@charset "utf-8";
/* ========= GLOBAL SCROLL ========= */
html{ scroll-behavior:smooth; }
/* Tránh header che khi nhảy đến anchor */
section{ scroll-margin-top:120px; }
@media (max-width:992px){ section{ scroll-margin-top:90px; } }

/* ========= RESET & THEME ========= */
*{ margin:0; padding:0; box-sizing:border-box; }
:root{
  --brown:#483732; --gold:#a8864b; --gold-soft:#d6b57c;
  --paper:#faf9f6; --ink:#3c2f2f;
  --booking-bg:#f4f4f4;
  --booking-card:#f4efe7;
  --booking-soft:#faf7f3;
  --booking-brown:#4b3b31;
  --booking-brown-soft:#6b5a50;
  --booking-gold:#a8741b;
  --booking-gold-strong:#b86a27;
  --booking-gold-deep:#8f6d3c;
  --booking-border:#9e948a;
  --booking-border-soft:#d9d0c4;
}
body{
  font-family:'Raleway',sans-serif; background:var(--paper); color:var(--ink);
  line-height:1.7; font-size:16px; letter-spacing:1px;
}
img{ max-width:100%; height:auto; display:block; }
body.menu-open{ overflow:hidden; touch-action:none; }

/* ========= ICON FIX ========= */
.fa,.fa-solid,.fa-regular,.fa-brands{
  letter-spacing:0!important; line-height:1!important;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
.fa-solid{font-family:"Font Awesome 6 Free"; font-weight:900;}
.fa-regular{font-family:"Font Awesome 6 Free"; font-weight:400;}
.fa-brands{font-family:"Font Awesome 6 Brands"; font-weight:400;}
/* Đổi .amenities i -> ul.amenities i để không đè banner */
ul.amenities i,.fe-socials i,.nav-lang i,.lang-switch i{
  display:inline-block; width:1.25em; min-width:1.25em; text-align:center;
}

/* ========= HEADER ========= */
header {
  position: fixed;
  inset: 0 0 auto 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 5%;
  color: #f2e6cf;
  background: linear-gradient(
    to bottom,
    rgba(72, 55, 50, 0.98) 0%,
    rgba(72, 55, 50, 0.85) 35%,
    rgba(72, 55, 50, 0.6) 65%,
    rgba(72, 55, 50, 0.3) 85%,
    rgba(72, 55, 50, 0) 100%
  );
  z-index: 100;
  transition: background 0.4s ease, padding 0.3s ease, box-shadow 0.4s ease;
}
header.scrolled{
  background:var(--brown); box-shadow:0 2px 10px rgba(0,0,0,.2); padding:.7rem 5%;
}
header img{ height:110px; transition:height .3s ease, opacity .4s ease; }
header.scrolled img{ height:95px; opacity:.95; }

nav{ display:flex; align-items:center; gap:2rem; }
nav a{
  color:#f2e6cf; text-decoration:none; font-weight:100; text-transform:uppercase;
  font-size:13px; letter-spacing:2px; transition:color .25s ease;
}

nav a:hover{ color:var(--gold-soft); }
nav ul{display: flex;justify-content: flex-end;list-style: none;padding:0;gap:2rem;}
/* Menu toggle (nút tròn) */
.menu-toggle{
  display:none; position:fixed; right:16px; top:calc(env(safe-area-inset-top,0px) + 12px);
  z-index:300; width:48px; height:48px; border-radius:999px;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  background:rgba(72,55,50,.92); border:1px solid rgba(214,181,124,.3);
  box-shadow:0 6px 18px rgba(0,0,0,.25); backdrop-filter:blur(8px);
  transition:transform .2s ease, background .25s ease;
}
.menu-toggle:hover{ transform:translateY(-2px); }
.menu-toggle i{ font-size:20px; color:#f2e6cf; line-height:1; }
.menu-toggle.active{ background:#6a524a; }
.menu-toggle span{ display:none; }

/* ========= FULLSCREEN SECTIONS (tách riêng từng class) ========= */
/* Base chung cho từng section full-screen */
.hero{
  position:relative; height:100vh; display:flex; justify-content:center; align-items:center;
  text-align:center; color:#fff; overflow:hidden;
}
.diemden{
  position:relative; height:100vh; display:flex; justify-content:center; align-items:center;
  text-align:center; color:#fff; overflow:hidden;
}
.dining{
  position:relative; height:100vh; display:flex; justify-content:center; align-items:center;
  text-align:center; color:#fff; overflow:hidden;
}
.offers{
  position:relative; height:100vh; display:flex; justify-content:center; align-items:center;
  text-align:center; color:#fff; overflow:hidden;
}
.our-story{
  position:relative; height:100vh; display:flex; justify-content:center; align-items:center;
  text-align:center; color:#fff; overflow:hidden;
}
.wellness{
  position:relative; height:100vh; display:flex; justify-content:center; align-items:center;
  text-align:center; color:#fff; overflow:hidden;
}
.roo{
  position:relative; height:100vh; display:flex; justify-content:center; align-items:center;
  text-align:center; color:#fff; overflow:hidden;
}
section.amenities{
  position:relative; height:100vh; display:flex; justify-content:center; align-items:center;
  text-align:center; color:#fff; overflow:hidden;
}

/* ::before nền */
.hero::before{
  content:""; position:absolute; inset:0;
  background:var(--bg) center/cover no-repeat;
  transform:scale(1.08);
  filter:brightness(82%) contrast(108%);
  animation:slowBreathe 8s ease-in-out infinite alternate;
  will-change:transform, filter;
}
.diemden::before{
  content:""; position:absolute; inset:0;
  background:var(--bg) center/cover no-repeat;
  transform:scale(1.08);
  filter:brightness(82%) contrast(108%);
  animation:slowBreathe 8s ease-in-out infinite alternate;
  will-change:transform, filter;
}
.offers::before{
  content:""; position:absolute; inset:0;
  background:var(--bg) center/cover no-repeat;
  transform:scale(1.08);
  filter:brightness(82%) contrast(108%);
  animation:slowBreathe 8s ease-in-out infinite alternate;
  will-change:transform, filter;
}
.dining::before{
  content:""; position:absolute; inset:0;
  background:var(--bg) center/cover no-repeat;
  transform:scale(1.08);
  filter:brightness(82%) contrast(108%);
  animation:slowBreathe 8s ease-in-out infinite alternate;
  will-change:transform, filter;
}
.our-story::before{
  content:""; position:absolute; inset:0;
  background:var(--bg) center/cover no-repeat;
  transform:scale(1.08);
  filter:brightness(82%) contrast(108%);
  animation:slowBreathe 8s ease-in-out infinite alternate;
  will-change:transform, filter;
}
.wellness::before{
  content:""; position:absolute; inset:0;
  background:var(--bg) center/cover no-repeat;
  transform:scale(1.08);
  filter:brightness(82%) contrast(108%);
  animation:slowBreathe 8s ease-in-out infinite alternate;
  will-change:transform, filter;
}
.roo::before{
  content:""; position:absolute; inset:0;
  background:var(--bg) center/cover no-repeat;
  transform:scale(1.08);
  filter:brightness(82%) contrast(108%);
  animation:slowBreathe 8s ease-in-out infinite alternate;
  will-change:transform, filter;
}
section.amenities::before{
  content:""; position:absolute; inset:0;
  background:var(--bg) center/cover no-repeat;
  transform:scale(1.08);
  filter:brightness(82%) contrast(108%);
  animation:slowBreathe 8s ease-in-out infinite alternate;
  will-change:transform, filter;
}

/* ::after overlay */
.hero::after{ content:""; position:absolute; inset:0; background:rgba(0,0,0,.35); }
.diemden::after{ content:""; position:absolute; inset:0; background:rgba(0,0,0,.35); }
.offers::after{ content:""; position:absolute; inset:0; background:rgba(0,0,0,.35); }
.dining::after{ content:""; position:absolute; inset:0; background:rgba(0,0,0,.35); }
.our-story::after{ content:""; position:absolute; inset:0; background:rgba(0,0,0,.35); }
.wellness::after{ content:""; position:absolute; inset:0; background:rgba(0,0,0,.35); }
.roo::after{ content:""; position:absolute; inset:0; background:rgba(0,0,0,.35); }
section.amenities::after{ content:""; position:absolute; inset:0; background:rgba(0,0,0,.35); }

/* H1 (giữ nguyên style & animation) */
.hero h1,
.diemden h1,
.dining h1,
.offers h1,
.our-story h1,
.wellness h1,
.roo h1,
section.amenities h1{
  position:relative; z-index:1;
  font-family:'Raleway',serif;
  font-size:30px; font-weight:100; color:#f5e4b2;
  letter-spacing:6px; text-transform:uppercase; line-height:1.3;
  opacity:0; animation:fadeDown 2.2s ease-out both;
  text-shadow:0 1px 6px rgba(0,0,0,.25);
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.35));
}

/* Ảnh nền từng section (biến --bg) */
.hero{       --bg:url('images/bn.jpg?v=2'); }
.diemden{    --bg:url('images/hoi-an-destination.jpg?v=2'); }
.dining{     --bg:url('images/bannerdini.jpg?v=2'); }
.offers{     --bg:url('images/banner-offers.jpg?v=2'); }
.our-story{  --bg:url('images/bannerstory.jpg?v=2'); }
.wellness{   --bg:url('images/bannerspa.jpg?v=2'); }
.roo{        --bg:url('images/bannerroo.jpg?v=2'); }
section.amenities{ --bg:url('images/amenitie-banner.jpg?v=2'); } /* đổi đường dẫn nếu cần */

/* Cho phép xuống dòng “thuần Việt” trên mobile */
.hero h1 .break-mobile{ white-space:nowrap; }
.diemden h1 .break-mobile{ white-space:nowrap; }
.offers h1 .break-mobile{ white-space:nowrap; }
.dining h1 .break-mobile{ white-space:nowrap; }
.our-story h1 .break-mobile{ white-space:nowrap; }
.wellness h1 .break-mobile{ white-space:nowrap; }
.roo h1 .break-mobile{ white-space:nowrap; }
section.amenities h1 .break-mobile{ white-space:nowrap; }

/* ========= KEYFRAMES ========= */
@keyframes slowBreathe{
  0%{   transform:scale(1.08); filter:brightness(80%) contrast(110%); }
  50%{  transform:scale(1.10); filter:brightness(85%) contrast(108%); }
  100%{ transform:scale(1.05); filter:brightness(90%) contrast(104%); }
}
/* fade-in từ trên xuống, mượt & tinh tế */
@keyframes fadeDown {
  from { opacity: 0; transform: translateY(-16px); }
  60% { opacity: 1; transform: translateY(2px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ========= SECTIONS / ANIM-IN ========= */
section{ padding:50px 10%; }
.section-title{
  text-align:center; text-transform:uppercase; color:var(--gold);
  font-weight:400; font-size:1.4rem; letter-spacing:2px; margin-bottom:2.5rem;
}
.fade-element{ opacity:1; transform:translateY(40px); transition:all 1s ease; }
.show{ opacity:1; transform:translateY(0); }

/* ========= STORY ========= */
.story{
  max-width:820px; margin:0 auto; text-align:center; color:#4b3f2f;
  font-weight:400; line-height:1.9; font-size:15px; letter-spacing:1px;
}
.story p,.story > div{ margin:0 auto 15px; text-align:center; max-width:750px; }

/* ========= ROOMS ========= */
.rooms{
  display:grid; grid-template-columns:repeat(2,1fr); gap:2rem; align-items:stretch;
}
.room{
  background:#fff; border-radius:10px; overflow:hidden;
  box-shadow:0 10px 20px rgba(0,0,0,.08);
  transition:transform .3s ease, box-shadow .3s ease;
  display:flex; flex-direction:column; justify-content:space-between;
}
.room:hover{ transform:translateY(-5px); box-shadow:0 15px 25px rgba(0,0,0,.15); }
.room img{ height:320px; object-fit:cover; }
.room:hover img{ transform:none !important; }
.room .info{ padding:1.5rem; text-align:left; }
.room .info h3{
  font-size:1.15rem; color:var(--gold); margin-bottom:.5rem;
  letter-spacing:1px; font-weight:500; text-transform:uppercase;
}
.room .info p{ font-size:.95rem; margin-bottom:.8rem; }
.room .details{ font-size:.85rem; color:#665c4d; line-height:1.6; }

/* Bảng giá */
.price-table{
  width:100%; border-collapse:collapse; margin:.35rem 0 1rem;
  font-size:.95rem; color:#4b3f2f;
}
.price-table th{
  background:#483732; color:#fff; text-align:left;
  padding:6px 10px; font-weight:600; letter-spacing:1px;
}
.price-table td{ padding:6px 10px; border-bottom:1px solid #e6dccb; }
#rooms .room .details{
  margin-top:18px;
}

#rooms .room > button{
  margin-top:auto;
  align-self:flex-start;
}

@media (max-width: 980px){
  #rooms .rooms{
    grid-template-columns:1fr;
  }
}
/* ========= TIỆN ÍCH (UL) – tách riêng khỏi banner ========= */
.details strong{
  display:inline-block; margin:.2rem 0 .5rem;
  text-transform:uppercase; letter-spacing:2px;
}
ul.amenities{
  list-style:none; margin:.6rem 0 1rem; padding:0;
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:1.2rem; row-gap:.5rem;
}
ul.amenities li{ display:flex; gap:.6rem; align-items:flex-start; }
ul.amenities i{ color:var(--gold-soft); font-size:.95rem; margin-top:.15rem; }

/* CTA (dùng chung với .btn-detail) */
.room button,.btn-detail{
  background:transparent; color:#483732; border:1px solid #483732;
  padding:12px 28px; letter-spacing: 4px;font-family:'Raleway',sans-serif; font-weight:500; font-size:14px;
  text-transform:uppercase; border-radius:0; cursor:pointer;
  align-self:center; margin:1rem auto 1.6rem; transition:all .3s ease; text-decoration:none;
}
.room button:hover,.btn-detail:hover{
  background:#483732; color:#f8f4ef;
  transform:translateY(-3px); box-shadow:0 6px 15px rgba(0,0,0,.15);
}

/* ========= FOOTER ========= */
.footer-elegant{
  background:#483732; color:#f2e6cf;
  padding:64px 6vw 56px; text-align:center; letter-spacing:2px;
}
.footer-elegant a{ color:#f2e6cf; text-decoration:none; transition:color .25s ease; }
.footer-elegant a:hover{ color:#d6b57c; }
.fe-socials{
  list-style:none; display:flex; justify-content:center; gap:28px;
  margin:0 0 30px; padding:0;
}
.fe-socials a{ font-size:26px; color:#e2d8c5; }
.fe-socials a:hover{ color:#d6b57c; }
.fe-collection{ font-size:1rem; letter-spacing:4px; margin:24px 0 22px; }
.fe-policy{ font-size:.75rem; line-height:2; opacity:.9; letter-spacing:2px; }
.fe-top{
  position:fixed; right:18px; bottom:18px; width:42px; height:42px; border-radius:50%;
  border:none; background:#5a463f; color:#f7efe0; display:grid; place-items:center;
  cursor:pointer; box-shadow:0 6px 18px rgba(0,0,0,.25);
  transition:transform .25s ease, background .25s ease; opacity:.95; z-index:120;
}
.fe-top:hover{ background:#6a524a; transform:translateY(-3px); }
.fe-contact .nowrap{ white-space:nowrap; }

/* ========= LANGUAGE SWITCH ========= */
.lang-switch{
  position:fixed; top:10px; right:10px; z-index:140;
  display:flex; align-items:center; gap:8px;
  background:rgba(72,55,50,.75); color:#f2e6cf;
  padding: 6px 10px; border-radius:999px; backdrop-filter:blur(8px);
  font-size:12px; letter-spacing:1px;
}

/* icon */
.lang-switch i{ font-size:13px; opacity:.9; }

/* link cũ (nếu còn dùng) */
.lang-switch a{
  text-decoration:none;
  color:#f2e6cf;
  opacity:.9;
  font-weight:600;
  text-transform:uppercase;
}
.lang-switch a:hover{ color:var(--gold-soft); opacity:1; }
.lang-switch .sep{ opacity:.5; }
.lang-switch a.active{ color:var(--gold); opacity:1; }

.mobile-book-now{
  padding:6px 12px;
  border-radius:999px;
  border:1px solid rgba(214,181,124,.4);
  background:linear-gradient(135deg, #a46f32, #c89b5a);
  color:#fff;
}

.mobile-book-now:hover{
  background:#3b302c;
}
/* ===== NEW: BOOK NOW BUTTON ===== */
.lang-switch .btn-book-now{
  display:inline-flex;
  align-items:center;
  gap:6px;

  padding:6px 12px;
  border-radius:999px;

  border:1px solid rgba(214,181,124,.5);
  background:linear-gradient(135deg, #a46f32, #c89b5a);
  color:#fff;

  font-family:'Raleway',sans-serif;
  font-size:11px;
  letter-spacing:2px;
  text-transform:uppercase;

  cursor:pointer;
  transition:all .25s ease;

  box-shadow:0 3px 10px rgba(0,0,0,0.15);
}

/* icon trong button */
.lang-switch .btn-book-now i{
  font-size:12px;
}

/* hover */
.lang-switch .btn-book-now:hover{
  background:linear-gradient(135deg, #8f5f2d, #b88b4c);
  box-shadow:0 6px 18px rgba(0,0,0,0.2);
  transform:translateY(-1px);
}

/* click */
.lang-switch .btn-book-now:active{
  transform:translateY(0);
  box-shadow:0 3px 10px rgba(0,0,0,0.15);
}

/* mobile tinh chỉnh */
@media (max-width:768px){
  .lang-switch{
    top:8px; right:10px;
    padding:5px 8px;
  }

  .lang-switch .btn-book-now{
    padding:5px 10px;
    font-size:10px;
    letter-spacing:1.5px;
  }
}

/* Nav language (mobile) */
.nav-lang{ display:none; gap:10px; align-items:center; margin-top:24px; }
.nav-lang a{ font-weight:700; }
.nav-lang .sep{ opacity:.6; }

/* ========= CORE VALUES ========= */
#core-values{ background:#483732; color:#f2e6cf; padding:0; }
#core-values .cv-wrap{ display:flex; flex-direction:column; align-items:stretch; }
#core-values .cv-media{ position:relative; min-height:360px; background:#3f312d; }
#core-values .cv-media picture,
#core-values .cv-media img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center; display:block;
}
#core-values .cv-content{ padding:28px 22px 36px; line-height:1.85; letter-spacing:.3px; }
#core-values .cv-heading{
  text-transform:uppercase; color:#d6b57c; letter-spacing:2px;
  font-weight:500; font-size:1.15rem; margin-bottom:14px;
}
#core-values .cv-subheading{
  margin:12px 0 8px; color:#d6b57c;
  letter-spacing:2px; font-weight:100; font-size:1rem; text-transform:uppercase;
}
#core-values .cv-content p{ margin-bottom:12px; font-size:15px; font-weight:100; letter-spacing:1px; }
#core-values .cv-principles{ font-weight:100; }

/* Tablet */
@media (min-width:600px){
  #core-values .cv-media{ min-height:420px; }
  #core-values .cv-content{ padding:36px 6% 42px; }
  #core-values .cv-heading{ font-size:1.25rem; }
}
/* Desktop 50/50 */
@media (min-width:992px){
  #core-values .cv-wrap{ flex-direction:row; }
  #core-values .cv-media{ flex:1 1 50%; min-height:520px; }
  #core-values .cv-content{ flex:1 1 50%; padding:4rem 6%; }
  #core-values .cv-heading{ font-size:18px; font-weight:100; letter-spacing:3px; }
  #core-values .cv-subheading{ font-size:18px; letter-spacing:3px; }
}
/* Hiệu ứng xuất hiện */
#core-values.fade-element{ opacity:0; transform:translateY(60px); transition:all .9s ease-out; }
#core-values.fade-element.show{ opacity:1; transform:translateY(0); }
#core-values .fade-element{ opacity:0; transform:translateY(40px); transition:all 1s ease-out; }
#core-values .fade-element.show{ opacity:1; transform:translateY(0); }

/* ========= DESTINATIONS ========= */
#destinations{
  position:relative; width:100%; height:80vh; min-height:520px;
  display:flex; align-items:center; justify-content:flex-start;
  overflow:hidden; background:#000;
}
.dest-bg {
  position: absolute;
  inset: 0;
  background: url('images/bannerdd.jpg?v=2') center/cover no-repeat;
  filter: brightness(80%) contrast(105%);
  transform: scale(1.05);
  animation: slowBreathe 8s ease-in-out infinite alternate;
  will-change: transform, filter;
  z-index: 0;
}
.dest-inner{
  position:relative; z-index:2; width:50%; height:100%;
  background:#faf9f6; display:flex; align-items:center; justify-content:center;
  padding:4rem 6%;
}
.dest-textbox{ max-width:480px; color:#3a2e29; animation:fadeUp 1.2s ease-out forwards; }
.dest-sub{
  text-transform:uppercase; font-size:.8rem; letter-spacing:2px;
  color:#5a4b42; margin-bottom:1.2rem;
}
.dest-heading{
  font-size:28px; font-weight:400; line-height:1.1; text-transform:uppercase;
  letter-spacing:2px; color:#483732; margin-bottom:1.5rem;
}
.dest-desc{
  font-size:16px; line-height:1.8; color:#4a3e38; letter-spacing:1px; max-width:400px;margin-bottom: 20px;
}
.dest-btn{
  display:inline-block; text-decoration:none; color:#483732;
  border:1px solid #483732; padding:.75rem 1.6rem; font-size:.9rem; letter-spacing:1px;
  transition:all .3s ease;
}
.dest-btn:hover{ background:#483732; color:#f8f4ef; }
@keyframes fadeUp{ from{ opacity:0; transform:translateY(30px); } to{ opacity:1; transform:translateY(0); } }
@media (max-width:992px){
  #destinations{ flex-direction:column; height:auto; min-height:640px; }
  .dest-inner{ width:100%; height:auto; padding:3rem 10%; }
  .dest-heading{ font-size:25px; letter-spacing:2px; }
}

/* ========= Utility ========= */
.nowrap{ white-space:nowrap!important; }

/* Swap-in mượt (không chớp trắng) */
.page-wrap.swap-in{ opacity:0; transition:opacity .25s ease; }
.page-wrap.swap-in.swap-in-active{ opacity:1; }

/* ==== Lantern Button ==== */
.lantern-btn{
  z-index:9999; --size:50px; width:var(--size); height:var(--size);
  border-radius:50%;
  background:radial-gradient(60% 60% at 50% 45%, #5a453a 0 60%, #4b3a31 61% 100%);
  border:none; position:relative; display:flex; justify-content:center; align-items:center;
  cursor:pointer; transform-origin:50% -20px; animation:swing 3s ease-in-out infinite;
  box-shadow:0 0 0 2px #7a5f4f inset, 0 6px 16px #00000055, 0 0 24px 0 rgba(233,211,160,.3);
}
.lantern-btn::before{
  content:""; position:absolute; top:-20px; left:50%; width:2px; height:20px;
  background:linear-gradient(to bottom, #d9caa2, #e9d3a0); transform:translateX(-50%);
}
.lantern-btn::after{
  content:""; position:absolute; bottom:-16px; left:50%; width:10px; height:18px; transform:translateX(-50%);
  background:linear-gradient(#f3dcae, #d8c189); border-radius:0 0 6px 6px;
  clip-path:polygon(0 0, 100% 0, 100% 85%, 70% 85%, 50% 100%, 30% 85%, 0 85%);
}
.bars{ width:26px; height:18px; display:grid; gap:5px; }
.bar{ height:3px; border-radius:2px; background:linear-gradient(to right, #bfa877, #e9d3a0); transition:transform .3s ease, opacity .3s ease; }
.lantern-halo{ position:absolute; inset:-10px; border-radius:50%; box-shadow:0 0 40px 5px rgba(233,211,160,.2); pointer-events:none; }
@keyframes swing{ 0%,100%{ transform:rotate(0); } 50%{ transform:rotate(3deg); } }
.nav-open .bar:nth-child(1){ transform:translateY(8px) rotate(45deg); }
.nav-open .bar:nth-child(2){ opacity:0; }
.nav-open .bar:nth-child(3){ transform:translateY(-8px) rotate(-45deg); }
@media (min-width:992px){ .lantern-btn{ display:none!important; } }
@media (max-width:991px){ .lantern-btn{ display:flex; } }

/* ========= RESPONSIVE ========= */
.nav-logo{ display:none; } /* Ẩn logo trong nav desktop */
@media (max-width:992px){
  .menu-toggle{ display:flex; }
  .lang-switch{ display:none; }

  nav{
    position:fixed; top:0; right:-100%; height:100dvh; width:100%;
    display:flex; flex-direction:column; justify-content:center; align-items:center;
    background:rgba(72,55,50,.98); transition:right .4s ease;
    padding:90px 8% 100px; text-align:center;
    overflow-y:auto; overscroll-behavior:contain;
    -ms-overflow-style:none; scrollbar-width:none;
  }
  nav ul{flex-direction: column;}
  nav::-webkit-scrollbar{ display:none; }
  nav.active{ right:0; }

  .nav-logo{ display:flex; align-items:center; justify-content:center; margin:-18px 0 14px; }
  .nav-logo img{ height:84px; width:auto; opacity:.98; }

  nav a{
    display:block; font-size:13px; margin:0; line-height:1.3;
    letter-spacing:2px; color:#f2e6cf;font-weight: 100;
  }

  .nav-lang{ display:flex; margin-top:28px; }
  .nav-lang .badge{
    display:inline-flex; align-items:center; gap:6px;
    padding:6px 10px; border-radius:16px;
  }
  .nav-lang i{ font-size:12px; }

  .rooms{ grid-template-columns:1fr; gap:2rem; }
  .room img{ height:280px; }
  .story{ max-width:90vw; }
  .story p{ max-width:36em; }
  /* Đổi .amenities -> ul.amenities để không ảnh hưởng banner */
  ul.amenities{ grid-template-columns:1fr; }
}

/* ========= MOBILE: đồng bộ H1 cho tất cả section ========= */
@media (max-width:600px){
  .hero h1,.offers h1,.diemden h1,.dining h1,.our-story h1,.wellness h1,.roo h1,section.amenities h1{
    font-size:1.3rem; letter-spacing:3px; line-height:1.5;
  }
  .hero h1 .break-mobile,.diemden h1 .break-mobile,.dining h1 .break-mobile,.offers h1 .break-mobile,
  .our-story h1 .break-mobile,.wellness h1 .break-mobile,.roo h1 .break-mobile,section.amenities h1 .break-mobile{
    display:block; white-space:normal;
  }
  .section-title{ font-size:26px; }
  header img{ height:76px; }
  .footer-elegant{ padding:56px 5vw 64px; }
  .fe-socials{ gap:22px; }
  .fe-socials a{ font-size:24px; }
  .fe-collection{ font-size:.95rem; letter-spacing:3px; }
  .fe-policy{ font-size:.72rem; }
  section#rooms{ padding-left:10px!important; padding-right:10px!important; }
}

/* ========= NAV LANGUAGE (giữ cuối để ưu tiên) ========= */
.nav-lang{ display:none; }
@media (max-width:992px){ .nav-lang{ display:flex; } }

/* Video nền cho hero */
.hero-video{
  position:absolute;
  top:0; left:0;
  width:100%; height:100%;
  object-fit:cover;
  filter:brightness(82%) contrast(108%);
  z-index:0;
  animation:slowBreathe 8s ease-in-out infinite alternate;
}
.hero::after{
  content:""; position:absolute; inset:0;
  background:rgba(0,0,0,.35); z-index:1;
}
.hero h1{
  position:relative; z-index:2;
}

/*--slider--*/
.slider {
  position: relative;
  width: 100%;
  max-width: 100%;
  height: 400px;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(0,0,0,0.15);
}
.slider img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1s ease;
}
.slider img.active { opacity: 1; }

@media (max-width: 768px) {
  .slider { width: 100%; height: 260px; }
}
@media (max-width: 480px) {
  .slider { height: 220px; }
}

/* slider full-width mobile */
.slider{ display:block; margin:0; }

/* disable zoom on room images */
.room img{ transform:none !important; }

/* ===== Image-based arrows (static, no background, no motion) ===== */
.arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  width:42px; height:42px;
  display:flex; align-items:center; justify-content:center;
  background:none !important; border:none !important; box-shadow:none !important; backdrop-filter:none !important;
  cursor:pointer; z-index:40; padding:0; transition:none;
}
.arrow.prev{
  left:10px;
  background-image:url('images/arrow-left.svg');
  background-repeat:no-repeat; background-position:center; background-size:18px 18px;
}
.arrow.next{
  right:10px;
  background-image:url('images/arrow-right.svg');
  background-repeat:no-repeat; background-position:center; background-size:18px 18px;
}
.arrow:hover,
.arrow:focus,
.arrow:active,
.arrow:focus-visible{
  transform:translateY(-50%);
  outline:none; filter:none; box-shadow:none; border:none;
}
.arrow::after{
  content:""; position:absolute; inset:-6px; border-radius:50%; pointer-events:none;
}
@media (max-width:768px){
  .arrow{ width:36px; height:36px; }
  .arrow.prev{ left:6px; background-size:16px 16px; }
  .arrow.next{ right:6px; background-size:16px 16px; }
}

/* ==== REVERSED LAYOUT cho section mới ==== */
#our-philosophy {
  background: #faf9f6;
  color: #3a2e29;
}
#our-philosophy .cv-heading { color: var(--gold); }
#our-philosophy .cv-wrap.reverse { flex-direction: column-reverse; }
/* Desktop: hình bên phải, nội dung trái */
@media (min-width: 992px) {
  #our-philosophy .cv-wrap.reverse { flex-direction: row-reverse; }
  #our-philosophy .cv-media { flex: 1 1 50%; min-height: 520px; }
  #our-philosophy .cv-content { flex: 1 1 50%; padding: 4rem 6%; }
}

/*--moi--*/
/* Layout đảo: mobile = image -> text ; desktop = image right, text left */
#spirit .cv-wrap.reverse { flex-direction: column-reverse; }
@media (min-width: 992px) {
  #spirit .cv-wrap.reverse { flex-direction: row-reverse; }
}

/* ===== Footer (revamped) ===== */
.footer-elegant{
  background:#483732; color:#f2e6cf; text-align:center;
  padding:56px 5vw 48px; letter-spacing:2px;
}
.footer-elegant a{ color:#f2e6cf; text-decoration:none; }
.footer-elegant a:hover{ color:#d6b57c; }

.fe-mini{
  font-size:14px; text-transform:uppercase; opacity:.95;
  letter-spacing:3px; margin-bottom:14px;
}

/* socials */
.fe-socials{
  list-style:none; display:flex; justify-content:center; align-items:center;
  gap:28px; margin:8px 0 18px; padding:0;
}
.fe-socials a{ font-size:24px; line-height:1; }
.fe-policy{
  font-size:.78rem; line-height:2; opacity:.92; letter-spacing:2px;
}

/* contact block */
.fe-contact{
  font-size:.85rem; opacity:.9; margin:20px auto 26px; line-height:1.9;
  max-width:950px;
}
.fe-contact a{ text-underline-offset:2px; }

/* divider + crest */
.fe-divider{
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  gap:18px; margin:26px auto 18px; max-width:1100px;
}
.fe-line{
  height:1px; background:linear-gradient(to right, transparent, #d6b57c66, transparent);
  display:block;
}
.fe-crest{ display:grid; justify-items:center; gap:10px; }
.fe-crest img{ width:100px; height:auto; filter:drop-shadow(0 2px 6px rgba(0,0,0,.25)); }
.fe-legend{
  font-size:.72rem; letter-spacing:2px; text-transform:uppercase; opacity:.9;
  white-space:normal; text-align:center;
}

/* brands strip */
.fe-brands{
  list-style:none; display:grid; grid-template-columns:repeat(8,1fr);
  align-items:center; gap:22px; padding:14px 0 10px; margin:0 auto 18px; max-width:1200px;
}
.fe-brands li{ display:flex; justify-content:center; align-items:center; }
.fe-brands img{
  height:62px; width:auto; opacity:.95; transition:opacity .2s ease, transform .2s ease;
}
.fe-brands img:hover{ opacity:1; transform:translateY(-2px); }

/* legal */
.fe-legal{
  display:grid; gap:6px; justify-items:center; margin-top:8px; opacity:.95;
}
.fe-legal-links{
  display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:center;
  font-size:.78rem; letter-spacing:1.5px;
}
.fe-legal p{ font-size:.78rem; }

/* back-to-top (reuse existing styles if present) */
.fe-top{
  position:fixed; right:18px; bottom:18px; width:42px; height:42px; border-radius:50%;
  border:none; background:#5a463f; color:#f7efe0; display:grid; place-items:center;
  cursor:pointer; box-shadow:0 6px 18px rgba(0,0,0,.25); z-index:120;
}

/* ===== Responsive ===== */
@media (max-width: 1100px){
  .fe-brands{ grid-template-columns:repeat(6,1fr); }
}
@media (max-width: 820px){
  .fe-divider{ grid-template-columns:1fr; gap:10px; }
  .fe-legend{ max-width:560px; }
  .fe-brands{ grid-template-columns:repeat(4,1fr); gap:18px; }
  .fe-brands img{ height:50px; }
}
@media (max-width: 560px){
  .fe-socials{ gap:22px; }
  .fe-policy{ font-size:.72rem; }
  .fe-contact{ font-size:.82rem; padding:0 6px; }
  .fe-brands{ grid-template-columns:repeat(3,1fr); gap:14px; }
  .fe-brands img{ height:50px; }
  .fe-legal-links{ font-size:.72rem; }
}
@media (max-width: 380px){
  .fe-brands{ grid-template-columns:repeat(2,1fr); }
}
address, .fe-contact { font-style: normal; }
.fe-legal {
  border-top: 1px solid rgba(214, 181, 124, 0.3);
  margin-top: 24px;
  padding-top: 12px;
}
@media (max-width: 560px) {
  .fe-brands {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px 10px;
    justify-items: center;
    align-items: center;
    max-width: 360px;
    margin: 0 auto;
  }
  .fe-brands li { display: flex; justify-content: center; align-items: center; }
  .fe-brands img { height: 50px; width: auto; }
}

/* ===== Legal pages ===== */
.legal-hero{
  background:#483732;
  color:#f2e6cf;
  text-align:center;
  padding:56px 5vw 44px;
  letter-spacing:2px;
}
.legal-hero h1{
  font-size:28px;
  text-transform:uppercase;
  margin:0 0 10px;
  letter-spacing:3px;
}
.legal-hero p{
  margin:0; opacity:.9; font-size:.9rem;
}
.legal-wrapper{
  max-width:920px;
  margin:40px auto 56px;
  padding:0 5vw;
  color:#2a211e;
}
.legal-nav{
  display:flex; flex-wrap:wrap; gap:10px 18px;
  justify-content:center; margin:18px 0 4px;
}
.legal-nav a{ color:#f2e6cf; text-decoration:none; }
.legal-nav a:hover{ color:#d6b57c; }
.legal-section{ margin:28px 0; }
.legal-section h2{
  color:#6a544b; letter-spacing:1px; margin:0 0 10px; font-size:20px;
}
.legal-section h3{
  color:#8a6f63; margin:18px 0 8px; font-size:16px;
}
.legal-section p, .legal-section li{
  line-height:1.8; font-size:15px; color:#3b302c;
}
.legal-section ul{ padding-left:18px; }
.legal-updated{ font-size:.85rem; color:#7a6459; margin-top:-4px; }

/* thin divider above footer on legal pages */
.legal-footer-gap{
  border-top:1px solid rgba(214,181,124,.3);
  margin-top:28px; padding-top:10px;
}

/* mobile */
@media (max-width:560px){
  .legal-hero{ padding:44px 6vw 36px; }
  .legal-hero h1{ font-size:22px; }
  .legal-wrapper{ margin:28px auto 48px; }
}
/* Destination page*/
  #hoi-an-destinations .dest-head{
    max-width:900px;
    margin:0 auto 40px;
    padding:80px 20px 0;
    text-align:center;
  }
  #hoi-an-destinations .dest-desc{
    font-family:'Raleway',sans-serif;
    font-size:16px;
    line-height:1.9;
    color:#5a4a3c;
    margin:0 auto 22px;
    max-width:760px;
  }
  #hoi-an-destinations .dest-divider{
    display:block;
    width:1px; height:46px;
    background:#b7a68a;
    margin:0 auto;
    opacity:.9;
  }

  /* Section tổng thể */
  #hoi-an-destinations{
    width:100%;
    max-width:100%;
    padding:0;
    background:transparent;
    overflow-x:clip;
  }

  /* Bố cục mỗi điểm */
  .place{
    display:grid;
    grid-template-columns:50% 50%;
    align-items:stretch;
    width:100%;
    margin:0;
  }
  .place:last-child{ margin-bottom:50px; }
  /* Ảnh */
  .p-figure{
    margin:0;
    overflow:hidden;
    position:relative;
  }
  .p-image{
    width:100%;
    height:100%;
    min-height:420px;
    object-fit:cover;
    display:block;
  }

  /* Nội dung */
  .p-body{
    display:flex;
    flex-direction:column;
    justify-content:center;
    background:#faf8f4;
    padding:60px;
    font-family:'Raleway',sans-serif;
    line-height:1.85;
  }
  .p-head{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:16px;
    flex-wrap:wrap;
    margin-bottom:16px;
  }
  .p-title{
    margin:0;
    font-size:26px;
    font-weight:400;
    text-transform:uppercase;
    letter-spacing:2px;
    color:#a8864b;
  }
  .p-tag{
    font-size:13px;
    color:#7b6a4f;
    font-style:italic;
  }

  /* Đảo chiều hàng chẵn */
  .place.slide-right .p-figure{order:2;}
  .place.slide-right .p-body{order:1;}

  /* ==== Hiệu ứng an toàn (không trắng khi JS chưa chạy) ==== */
  /* Mặc định: luôn hiển thị */
  .fade-section,
  .place { opacity:1; transform:none; }

  /* Khi JS sẵn sàng: mới áp hiệu ứng */
  body.dd-anim .fade-section,
  body.dd-anim .place { opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease; }
  body.dd-anim .fade-section.visible { opacity:1; transform:none; }
  body.dd-anim .place.inview { opacity:1; transform:none; }

  @media (prefers-reduced-motion: reduce){
    body.dd-anim .fade-section,
    body.dd-anim .place { transition:none !important; transform:none !important; opacity:1 !important; }
  }

  /* Responsive */
  @media(max-width:1024px){
    .p-image{min-height:360px;}
    .p-body{padding:50px;}
  }
  @media(max-width:860px){
    .place{grid-template-columns:1fr;}
    #hoi-an-destinations .place .p-figure{order:1!important;}
    #hoi-an-destinations .place .p-body{order:2!important;}
    .p-figure,.p-image{margin:0;padding:0;width:100%;max-width:100%;height:auto;}
    .p-body{
      padding:40px 20px;
      text-align:center;
      align-items:center;
      max-width:100%;
    }
    .p-head{flex-direction:column;gap:8px;}
  }

  /* Desktop gutters (rộng như dining) */
  @media (min-width: 861px) {
    #hoi-an-destinations .place {
      padding-left: clamp(60px, 7vw, 120px);
      padding-right: clamp(60px, 7vw, 120px);
      box-sizing: border-box;
    }
    #hoi-an-destinations .p-body {
      max-width: 900px;
      margin-left: auto;
      margin-right: auto;
      padding-left: clamp(50px, 5vw, 70px);
      padding-right: clamp(50px, 5vw, 70px);
    }
  }

  /* trang offers */
  .offers{
	  min-height:58vh;
	  display:flex;
	  align-items:center;
	  justify-content:center;
	  text-align:center;
	  padding:80px 20px;
	  background:#faf7f3;
	}

	
	.offers h1 .nowrap{display:block;}
	
	/* ===== Header ===== */
	.special-header{
	  text-align:center;
	  padding:60px 20px 48px;
	  background:#faf7f3;
	}
	.special-header__inner{max-width:900px;margin:0 auto;}
	.special-header__desc{
	  font-family:'Raleway',sans-serif;
	  font-size:16px;
	  line-height:1.9;
	  color:#5a4a3c;
	  margin:0 auto 22px;
	  max-width:760px;
	}
	.special-header__divider{
	  display:block;
	  width:1px;
	  height:46px;
	  background:#b7a68a;
	  margin:0 auto;
	  opacity:.9;
	}
	
	/* ===== Layout ===== */
	.special-offers-page{
	  width:100%;
	  background:#faf7f3;
	}
	.sp-row{
	  display:grid;
	  grid-template-columns:50% 50%;
	  align-items:stretch;
	  width:100%;
	  background:#faf7f3;
	}
	.sp-row--reverse .sp-media{order:2;}
	.sp-row--reverse .sp-content{order:1;}
	
	.sp-media{
	  width:100%;
	  height:100%;
	  overflow:hidden;
	  background:#faf7f3;
	}
	.sp-media img{
	  width:100%;
	  height:100%;
	  object-fit:cover;
	  transition:transform 1.4s ease;
	  display:block;
	}
	.sp-media:hover img{transform:scale(1.05);}
	
	.sp-content{
	  padding:60px 50px;
	  display:flex;
	  flex-direction:column;
	  justify-content:center;
	  font-family:'Raleway',sans-serif;
	  line-height:1.8;
	  font-size:16px;
	  color:#3b302c;
	  background:#faf7f3;
	}
	
	.sp-label{
	  font-family:'Raleway',sans-serif;
	  text-transform:uppercase;
	  letter-spacing:3px;
	  font-size:12px;
	  color:#a8864b;
	  margin:0 0 12px;
	}
	
	.sp-title{
	  font-family:'Raleway',sans-serif;
	  text-transform:uppercase;
	  color:#a8864b;
	  font-size:28px;
	  font-weight:400;
	  letter-spacing:3px;
	  text-align:left;
	  margin:0 0 14px;
	}
	
	.sp-tagline{
	  font-family:'Cormorant Garamond',serif;
	  font-style:italic;
	  color:#7b6a4f;
	  font-size:21px;
	  margin:0 0 18px;
	}
	
	.sp-list{
	  margin:14px 0 0 18px;
	  padding:0;
	  color:#3b302c;
	  font-family:'Raleway',sans-serif;
	  line-height:1.9;
	  font-size:14px;
	}
	.sp-list li{margin-bottom:4px;}
	
	.sp-actions{
	  display:flex;
	  flex-wrap:wrap;
	  gap:14px;
	  align-items:center;
	  margin-top:26px;
	}
	
	.sp-btn{
	  display:inline-flex;
	  align-items:center;
	  justify-content:center;
	  padding:12px 26px;
	  border:1px solid #a8864b;
	  text-decoration:none;
	  text-transform:uppercase;
	  letter-spacing:2px;
	  font-size:13px;
	  font-weight:600;
	  color:#3b302c;
	  transition:all .25s ease;
	  background:transparent;
	}
	.sp-btn:hover{
	  background:#3b302c;
	  color:#fff;
	  transform:translateY(-1px);
	}
	/* ===== Mobile ===== */
	@media(max-width:960px){
	  .offers{
		min-height:42vh;
		padding:70px 20px;
	  }
	 
	
	  .sp-row,.sp-row--reverse{
		grid-template-columns:1fr;
	  }
	  .sp-row .sp-media,.sp-row--reverse .sp-media{order:1;}
	  .sp-row .sp-content,.sp-row--reverse .sp-content{order:2;}
	
	  section,figure,.sp-media{
		margin:0;
		padding:0;
		width:100%;
		max-width:100%;
		overflow:hidden;
	  }
	
	  .sp-media img{
		width:100%;
		height:auto;
		max-width:100%;
		object-fit:cover;
		display:block;
	  }
	
	  .sp-content{
		padding:30px 20px;
		text-align:center;
		align-items:center;
	  }
	
	  .sp-title{text-align:center;font-size:24px;letter-spacing:2px;}
	  .sp-tagline{font-size:19px;}
	  .sp-list{
		text-align:left;
		margin:14px 0 0 20px;
	  }
	  .sp-actions{
		flex-direction:column;
		justify-content:center;
		text-align:center;
		margin-top:24px;
	  }
	  .sp-btn{margin:0 auto;}
	}
	
/* ===== OFFER REQUEST FORM ===== */
.offer-form-modal{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:rgba(26,19,15,.56);
  backdrop-filter:blur(6px);
  z-index:9999;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}
.offer-form-modal.is-open{
  display:flex;
}
.offer-form-box{
  position:relative;
  width:min(100%, 560px);
  background:#fffdfa;
  border:1px solid #e3d6c7;
  box-shadow:0 24px 60px rgba(0,0,0,.16);
  padding:34px 30px 30px;
}
.offer-form-kicker{
  margin:0 0 10px;
  font-family:'Raleway',sans-serif;
  text-transform:uppercase;
  letter-spacing:3px;
  font-size:11px;
  color:#a8864b;
}
.offer-form-box h2{
  margin:0 0 24px;
  font-family:'Raleway',sans-serif;
  text-transform:uppercase;
  letter-spacing:2px;
  font-size:30px;
  font-weight:400;
  color:#3b302c;
}
.close-form{
  position:absolute;
  top:12px;
  right:12px;
  width:42px;
  height:42px;
  border:none;
  background:rgba(59,48,44,.92);
  color:#fff;
  font-size:28px;
  line-height:1;
  cursor:pointer;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:10001;
  box-shadow:0 8px 20px rgba(0,0,0,.18);
}
.offer-request-form{
  display:flex;
  flex-direction:column;
  gap:16px;
}
.form-group{
  display:flex;
  flex-direction:column;
}
.form-group label{
  margin-bottom:8px;
  font-family:'Raleway',sans-serif;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:2px;
  color:#7b6a4f;
}
.form-group input,
.form-group textarea{
  width:100%;
  box-sizing:border-box;
  border:1px solid #dccfbf;
  background:#faf7f3;
  color:#3b302c;
  font-family:'Raleway',sans-serif;
  font-size:15px;
  outline:none;
  border-radius:0;
  transition:border-color .25s ease, box-shadow .25s ease, background .25s ease;
}
.form-group input{
  min-height:52px;
  padding:12px 14px;
}
.form-group textarea{
  min-height:120px;
  padding:14px;
  resize:vertical;
  line-height:1.7;
}
.form-group input:focus,
.form-group textarea:focus{
  border-color:#b89156;
  box-shadow:0 0 0 3px rgba(184,145,86,.08);
  background:#fffdf9;
}
.form-group input[readonly]{
  background:#f6f0e8;
  color:#8f6d3c;
  font-weight:600;
}
.offer-submit-btn{
  min-height:56px;
  width:100%;
  border:none;
  background:#a46f32;
  color:#fff;
  font-family:'Raleway',sans-serif;
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:3px;
  cursor:pointer;
  transition:background .25s ease, transform .2s ease;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:0 16px;
  margin-top:4px;
}
.offer-submit-btn:hover{
  background:#8f5f2d;
}
.offer-submit-btn:active{
  transform:translateY(1px);
}
@media(max-width:960px){
  .offer-form-modal{
    align-items:flex-start;
    padding:12px;
  }
  .offer-form-box{
    width:100%;
    max-width:none;
    margin:18px 0;
    padding:72px 16px 20px;
  }
  .offer-form-box h2{
    font-size:24px;
    line-height:1.15;
    margin:0 0 20px;
    padding-right:52px;
  }
  .offer-form-kicker{
    padding-right:52px;
  }
  .close-form{
    position:fixed;
    top:18px;
    right:18px;
    width:44px;
    height:44px;
    font-size:28px;
  }
  .offer-request-form{
    gap:14px;
  }
  .form-group label{
    margin-bottom:7px;
  }
  .form-group input{
    min-height:50px;
    padding:12px 14px;
  }
  .form-group textarea{
    min-height:140px;
    padding:14px;
  }
  .offer-submit-btn{
    min-height:54px;
    position:sticky;
    bottom:0;
    z-index:2;
    box-shadow:0 -6px 18px rgba(250,247,243,.9);
  }
}

/*Amenities*/
.moonlight{width:100%;background:transparent;}
.ml-row{display:grid;grid-template-columns:50% 50%;align-items:stretch;width:100%;}
.ml-row--reverse .ml-media{order:2;}
.ml-row--reverse .ml-content{order:1;}
.ml-media{width:100%;height:100%;overflow:hidden;}
.ml-media img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s ease;display:block;}
.ml-media:hover img{transform:scale(1.05);}
.ml-content{padding:50px 50px;display:flex;flex-direction:column;justify-content:center;font-family:'Raleway',sans-serif;line-height:1.8;font-size:16px;color:#3b302c;}
.ml-title{font-family:'Raleway',sans-serif;text-transform:uppercase;color:#a8864b;font-size:26px;font-weight:400;letter-spacing:2px;text-align:left;margin-bottom:10px;}
/* time row: no background fill, stroke only */
.ml-time{display:inline-flex;align-items:center;gap:8px;color:#7b6a4f;font-size:15px;margin-bottom:16px;}
.ml-time svg{width:18px;height:18px;stroke:#7b6a4f;stroke-width:1.6;fill:none;flex-shrink:0;overflow:visible;vertical-align:middle;}
.ml-time span{line-height:1;}
.ml-tagline{font-family:'Cormorant Garamond',serif;font-style:italic;color:#7b6a4f;font-size:19px;margin-bottom:18px;}
/* actions */
.ml-actions{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:20px;}
.ml-chip{border:1px solid #b7a68a;padding:10px 14px;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:#3b302c;}
.ml-chip .label{color:#a8864b;margin-right:6px;}
.ml-btn{padding:10px 22px;border:1px solid #a8864b;text-decoration:none;text-transform:uppercase;letter-spacing:1px;font-size:13px;font-weight:700;color:#3b302c;transition:all .25s ease;}
.ml-btn:hover{background:#3b302c;color:#fff;transform:translateY(-1px);}
@media(max-width:960px){
  .ml-row,.ml-row--reverse{grid-template-columns:1fr;}
  .ml-row .ml-media,.ml-row--reverse .ml-media{order:1;}
  .ml-row .ml-content,.ml-row--reverse .ml-content{order:2;}
  section,figure,.ml-media{margin:0;padding:0;width:100%;max-width:100%;overflow:hidden;}
  .ml-media img{width:100%;height:auto;max-width:100%;object-fit:cover;display:block;}
  .slider{aspect-ratio:16/11;}
  .ml-content{padding:30px 20px;text-align:center;align-items:center;}
  .ml-title{text-align:center;}
  .ml-time{justify-content:center;}
  .ml-actions{flex-direction:column;justify-content:center;text-align:center;margin-top:24px;}
  .ml-btn,.ml-chip{margin:0 auto;}
}
/* booking page */
#moon-booking{
    padding:36px 20px 100px;
    background:var(--booking-bg);
  }

  .booking-rate-strip{
    padding:88px 20px 28px;
    background:var(--booking-bg);
  }

  .booking-rate-strip__inner{ max-width:1460px; margin:0 auto; }
  .booking-rate-strip__head{ text-align:center; margin-bottom:28px; }
  .booking-rate-strip__kicker{ margin:0 0 10px; font-family:'Raleway',sans-serif; text-transform:uppercase; letter-spacing:3px; font-size:11px; color:var(--booking-gold); }
  .booking-rate-strip__title{ margin:0 0 12px; font-family:'Raleway',sans-serif; text-transform:uppercase; color:var(--booking-brown); font-size:34px; font-weight:400; letter-spacing:2px; line-height:1.2; }
  .booking-rate-strip__desc{ max-width:760px; margin:0 auto; font-family:'Raleway',sans-serif; color:#6b5a50; font-size:15px; line-height:1.85; }
  .booking-rate-days{ display:grid; grid-template-columns:repeat(7, minmax(0, 1fr)); gap:14px; }
  .booking-rate-day{ background:#f8f3ed; border:1px solid #e2d5c6; box-shadow:0 6px 22px rgba(0,0,0,.04); padding:18px 12px 16px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:6px; cursor:pointer; transition:border-color .25s ease, box-shadow .25s ease, transform .25s ease, background .25s ease; color:var(--booking-brown); }
  .booking-rate-day:hover{ transform:translateY(-2px); border-color:#c8ae84; box-shadow:0 12px 28px rgba(168,134,75,.12); background:#fffdfa; }
  .booking-rate-day.is-active{ border-color:var(--booking-gold); background:#fffaf3; box-shadow:0 12px 30px rgba(168,134,75,.14); }
  .booking-rate-day__dow{ font-family:'Raleway',sans-serif; text-transform:uppercase; letter-spacing:2px; font-size:10px; color:#8d7b63; }
  .booking-rate-day__date{ font-family:'Raleway',sans-serif; font-size:19px; line-height:1.2; color:var(--booking-brown); }
  .booking-rate-day__label{ margin-top:4px; font-family:'Raleway',sans-serif; text-transform:uppercase; letter-spacing:2px; font-size:10px; color:#8d7b63; }
  .booking-rate-day__price{ font-family:'Raleway',sans-serif; font-size:22px; line-height:1.15; color:#b86a27; font-weight:600; }

  .moon-booking-wrap{
    max-width:1460px;
    margin:0 auto;
    display:grid;
    grid-template-columns:minmax(0, 1.9fr) minmax(330px, .82fr);
    gap:34px;
    align-items:start;
  }

  .booking-left{ min-width:0; overflow:visible; }
  .booking-room-instances{ display:flex; flex-direction:column; gap:26px; overflow:visible; }

  .booking-room-card{
    background:#fffdfa;
    border:1px solid #e3d7c9;
    box-shadow:0 8px 28px rgba(0,0,0,0.04);
    padding:28px 20px 20px;
    overflow:visible;
  }

  .booking-room-shell{
    display:grid;
    grid-template-columns:minmax(0,1.45fr) minmax(280px,.85fr);
    grid-template-areas:
      "title price"
      "media amenities"
      "config config";
    gap:22px 34px;
    align-items:start;
  }

  .booking-room-title{
    grid-area:title;
    margin:0;
    font-family:'Raleway',sans-serif;
    text-transform:uppercase;
    color:var(--booking-gold);
    font-size:30px;
    font-weight:500;
    letter-spacing:1.8px;
    line-height:1.15;
  }

  .booking-room-price{
    grid-area:price;
    justify-self:end;
    text-align:right;
    font-family:'Raleway',sans-serif;
    text-transform:uppercase;
    color:var(--booking-gold);
    font-size:22px;
    letter-spacing:1px;
    line-height:1.15;
  }

  .booking-room-price .from{
    display:block;
    margin-bottom:2px;
    font-size:13px;
    letter-spacing:2px;
  }

  .booking-room-media{
    grid-area:media;
    position:relative;
  }

  .booking-room-slider{
    position:relative;
    overflow:hidden;
    aspect-ratio: 16 / 9;
    background:#ded6cb;
    border-radius: 10px;
  }

  .booking-room-slide{
    position:absolute;
    inset:0;
    opacity:0;
    transform:scale(1.02);
    transition:opacity .55s cubic-bezier(.22,.61,.36,1), transform .9s ease;
    will-change:opacity, transform;
    pointer-events:none;
  }

  .booking-room-slide.is-active{
    opacity:1;
    transform:scale(1);
    pointer-events:auto;
  }

  .booking-room-slide img{ width:100%; height:100%; object-fit:cover; display:block; }

  .booking-room-slider-arrow{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:42px;
    height:42px;
    border:none;
    background:transparent;
    color:#d6b57c;
    cursor:pointer;
    z-index:2;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .booking-room-slider-arrow.prev{ left:8px; }
  .booking-room-slider-arrow.next{ right:8px; }
  .booking-room-slider-arrow svg{ width:28px; height:28px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

  .booking-room-amenities{
    grid-area:amenities;
    background:#fffdfa;
    border:1px solid #e6dbcf;
    box-shadow:0 4px 18px rgba(0,0,0,0.03);
    padding:14px 18px;
    min-height:100%;
    border-radius: 10px;
  }

  .booking-room-amenities-list{
    list-style:none;
    margin:0;
    padding:0;
    display:flex;
    flex-direction:column;
    gap:10px;
  }

  .booking-room-amenities-list li{
    display:flex;
    align-items:flex-start;
    gap:10px;
    font-family:'Raleway',sans-serif;
    font-size:15px;
    line-height:1.45;
    color:#4b3b31;
  }

  .booking-room-amenities-list i{
    width:18px;
    flex:0 0 18px;
    color:var(--booking-gold);
    text-align:center;
    margin-top:2px;
  }

  .booking-room-config-stack{
    grid-area:config;
    grid-column:1 / -1;
    width:100%;
    min-width:0;
    display:flex;
    flex-direction:column;
    overflow:visible;
  }

  .booking-room-config{
    grid-area:config;
    grid-column:1 / -1;
    display:grid;
    grid-template-columns:minmax(0,1.45fr) minmax(280px,.85fr);
    gap:14px;
    align-items:stretch;
    width:100%;
    margin-top:14px;
    padding:14px;
    border:1px solid #d7cabb;
    background:rgba(255,255,255,.08);
    box-sizing:border-box;
    overflow:visible;
  }

  .booking-room-config-left{
    display:grid;
    grid-template-columns:12px minmax(0,1fr);
    min-height:160px;
  }

  .booking-room-config-accent{
    background:var(--booking-gold);
  }

  .booking-room-config-body{
    border:1px solid #d7cabb;
    border-left:none;
    padding:12px 18px 16px;
    background:rgba(255,255,255,.12);
  }

  .booking-room-config-title{
    margin:0 0 8px;
    font-family:'Raleway',sans-serif;
    text-transform:uppercase;
    color:var(--booking-gold);
    font-size:18px;
    letter-spacing:1.4px;
  }

  .booking-room-fields{
    display:grid;
    grid-template-columns:repeat(2, minmax(0,1fr));
    gap:8px 12px;
  }

  .booking-room-field label{
    display:block;
    margin-bottom:4px;
    font-family:'Raleway',sans-serif;
    font-size:12px;
    color:#4b3b31;
    line-height:1.2;
  }

  .booking-room-field select{
    width:100%;
    min-height:40px;
    padding:0 38px 0 12px;
    border:1px solid #d8cab7;
    background:#f7f2ea;
    color:#6b5a50;
    font-family:'Raleway',sans-serif;
    font-size:14px;
    appearance:none;
    -webkit-appearance:none;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'><path d='m5 7 5 5 5-5' stroke='%23c79643' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat:no-repeat;
    background-position:right 12px center;
    background-size:16px 16px;
  }

  .booking-room-config-right{
    display:grid;
    grid-template-columns:repeat(2, minmax(0,1fr));
    gap:12px;
    align-self:stretch;
  }

  .booking-rate-plan{
    position:relative;
    cursor:pointer;
    display:block;
  }

  .booking-rate-plan input{
    position:absolute;
    opacity:0;
    pointer-events:none;
  }

  .booking-rate-plan-card{
    position:relative;
    height:100%;
    min-height:160px;
    border:1px solid #d7cabb;
    background:rgba(255,255,255,.12);
    padding:20px 16px 0;
    text-align:center;
    transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    overflow:visible;
  }

  .booking-rate-plan input:checked + .booking-rate-plan-card{
    border-color:var(--booking-gold);
    box-shadow:0 8px 20px rgba(168,116,27,.08);
    background:#fbf7f0;
  }

  .booking-rate-plan-dot{
    position:absolute;
    top:10px;
    right:10px;
    width:18px;
    height:18px;
    border:1px solid #c3a57a;
    border-radius:50%;
    background:#fffdfa;
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--booking-gold);
    font-family:'Raleway',sans-serif;
    font-size:14px;
    line-height:1;
  }

  .booking-rate-plan input:checked + .booking-rate-plan-card .booking-rate-plan-dot::after{
    content:"×";
    position:static;
    inset:auto;
    border-radius:0;
    background:none;
    font-weight:600;
  }

  .booking-rate-plan-content{
    flex:1;
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding-bottom:18px;
  }

  .booking-rate-plan-info-toggle{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    width:calc(100% + 2px);
    margin:0 -1px -1px;
    min-height:22px;
    padding:0;
    border:none;
    border-top:1px solid rgba(255,255,255,.18);
    background:var(--booking-gold);
    color:#fffdfa;
    cursor:pointer;
    transition:background .2s ease;
  }

  .booking-rate-plan.is-open .booking-rate-plan-info-toggle,
  .booking-rate-plan input:checked + .booking-rate-plan-card .booking-rate-plan-info-toggle{
    background:var(--booking-gold-strong);
  }

  .booking-rate-plan-info-toggle svg{
    width:16px;
    height:16px;
    stroke:currentColor;
    fill:none;
    stroke-width:2;
    stroke-linecap:round;
    stroke-linejoin:round;
    transition:transform .2s ease;
  }

  .booking-rate-plan.is-open .booking-rate-plan-info-toggle svg{
    transform:rotate(180deg);
  }

  .booking-rate-plan-popup{
    position:absolute;
    left:50%;
    right:auto;
    top:calc(100% + 10px);
    width:max(420px, calc(100% + 150px));
    max-width:560px;
    min-width:0;
    padding:20px 22px;
    border:1px solid #d7cec2;
    background:#fffdfa;
    box-shadow:0 18px 40px rgba(0,0,0,.14);
    opacity:0;
    visibility:hidden;
    transform:translate(-50%, -6px);
    transition:opacity .2s ease, transform .2s ease, visibility .2s ease;
    z-index:9999;
    text-align:left;
    border-radius: 10px;
  }

  .booking-rate-plan.is-open .booking-rate-plan-popup{
    opacity:1;
    visibility:visible;
    transform:translate(-50%, 0);
  }

  .booking-rate-plan-popup p{
    margin:0 0 6px;
    font-family:'Raleway',sans-serif;
    font-size:13px;
    line-height:1.65;
    color:#4b3b31;
  }

  .booking-rate-plan-popup p:last-child{
    margin-bottom:0;
  }

  .booking-rate-plan-label{
    display:block;
    margin-bottom:14px;
    font-family:'Raleway',sans-serif;
    font-size:12px;
    font-weight:700;
    color:var(--booking-brown);
    letter-spacing:1.4px;
    text-transform:uppercase;
  }

  .booking-rate-plan-price{
    font-family:'Raleway',sans-serif;
    color:var(--booking-gold);
    font-size:26px;
    line-height:1.15;
    text-transform:uppercase;
  }

  .booking-room-actions{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:14px;
    padding:14px 2px 0;
  }

  .booking-room-action{
    border:none;
    background:transparent;
    padding:0;
    font-family:'Raleway',sans-serif;
    font-size:13px;
    text-transform:uppercase;
    letter-spacing:2px;
    color:#4b3b31;
    cursor:pointer;
  }

  .booking-room-action:hover{ color:var(--booking-gold); }

  .booking-room-action.is-hidden{
    visibility:hidden;
    pointer-events:none;
  }

  .booking-extras-section{
    width:100%;
    margin-top:28px;
    padding:24px 20px 20px;
    border:1px solid #e3d7c9;
    background:#fffdfa;
    box-shadow:0 8px 28px rgba(0,0,0,0.04);
    box-sizing:border-box;
  }

  .booking-extras-head{
    width:100%;
    margin-bottom:14px;
  }

  .booking-extras-head h3{
    margin:0;
    font-family:'Raleway',sans-serif;
    text-transform:uppercase;
    color:var(--booking-gold);
    font-size:18px;
    letter-spacing:1.4px;
  }

  .booking-extras-grid{
    width:100%;
    display:grid;
    grid-template-columns:repeat(2, minmax(0,1fr));
    gap:20px;
    align-items:stretch;
  }

  .booking-extra-card{
    position:relative;
    background:#fffdfa;
    border:1px solid #e3d7c9;
    box-shadow:0 4px 18px rgba(0,0,0,0.03);
    padding:14px 18px 18px;
  }

  .booking-extra-toggle{
    position:absolute;
    top:18px;
    left:18px;
    width:16px;
    height:16px;
    border-radius:50%;
    border:1px solid #c3a57a;
    background:#fffdfa;
  }

  .booking-extra-card input{
    position:absolute;
    opacity:0;
    pointer-events:none;
  }

  .booking-extra-card input:checked ~ .booking-extra-toggle::after{
    content:"";
    position:absolute;
    inset:3px;
    border-radius:50%;
    background:var(--booking-gold);
  }

  .booking-extra-card:has(input:checked){
    border-color:var(--booking-gold);
    box-shadow:0 10px 24px rgba(168,116,27,.08);
    background:#fbf7f0;
  }

  .booking-extra-head{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:12px;
    padding-left:36px;
    align-items:start;
  }

  .booking-extra-title{
    margin:0;
    font-family:'Raleway',sans-serif;
    text-transform:uppercase;
    color:var(--booking-gold);
    font-size:20px;
    letter-spacing:1px;
    line-height:1.15;
  }

  .booking-extra-price{
    text-align:right;
    font-family:'Raleway',sans-serif;
    color:var(--booking-gold);
    text-transform:uppercase;
    line-height:1;
  }

  .booking-extra-price .from{
    display:block;
    font-size:11px;
    letter-spacing:2px;
    margin-bottom:3px;
  }

  .booking-extra-price .amount{
    display:block;
    font-size:20px;
  }

  .booking-extra-price .per{
    display:block;
    font-size:12px;
    letter-spacing:1.2px;
  }

  .booking-extra-image{
    margin:12px 0 14px;
    aspect-ratio: 16 / 9;
    overflow:hidden;
    background:#ddd4c6;
  }

  .booking-extra-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
    display:block;
  }

  .booking-extra-fields{
    display:flex;
    gap:12px;
  }
  .booking-extra-fields .booking-extra-field{flex:1}

  .booking-extra-fields.one-col{ grid-template-columns:1fr; }
  .booking-extra-price-line,
  .booking-extra-field-note{ display:block; font-family:'Raleway',sans-serif; font-size:11px; letter-spacing:1.1px; text-transform:uppercase; line-height:1.5; color:var(--booking-gold); }
  .booking-extra-field-note{ margin-top:6px; }
  .booking-room-meta{ margin:6px 0 0; font-family:'Raleway',sans-serif; font-size:12px; line-height:1.6; color:#7b6a4f; letter-spacing:1px; text-transform:uppercase; font-weight:700; }
  .booking-summary-note{ margin:14px 0 0; font-family:'Raleway',sans-serif; font-size:12px; line-height:1.6; color:#7b6a4f; }

  .booking-extra-field label{
    display:block;
    margin-bottom:4px;
    font-family:'Raleway',sans-serif;
    font-size:12px;
    color:#4b3b31;
  }

  .booking-extra-field select{
    width:100%;
    min-height:42px;
    padding:0 38px 0 12px;
    border:1px solid #d8cab7;
    background:#f7f2ea;
    color:#6b5a50;
    font-family:'Raleway',sans-serif;
    font-size:14px;
    appearance:none;
    -webkit-appearance:none;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'><path d='m5 7 5 5 5-5' stroke='%23c79643' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat:no-repeat;
    background-position:right 12px center;
    background-size:16px 16px;
  }

  .booking-extra-tooltip{
    position:absolute;
    left:18px;
    right:18px;
    bottom:calc(100% + 10px);
    padding:14px 16px;
    border:1px solid #d7cec2;
    background:#fffdfa;
    box-shadow:0 18px 40px rgba(0,0,0,.14);
    opacity:0;
    visibility:hidden;
    transform:translateY(6px);
    transition:opacity .2s ease, transform .2s ease, visibility .2s ease;
    z-index:10;
  }

  .booking-extra-card:hover .booking-extra-tooltip,
  .booking-extra-card:focus-within .booking-extra-tooltip{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
  }

  .booking-extra-tooltip-title{
    margin:0 0 8px;
    font-family:'Raleway',sans-serif;
    text-transform:uppercase;
    color:var(--booking-gold);
    font-size:12px;
    letter-spacing:1.6px;
  }

  .booking-extra-tooltip ul{
    margin:0;
    padding-left:16px;
  }

  .booking-extra-tooltip li{
    margin:0 0 6px;
    font-family:'Raleway',sans-serif;
    font-size:13px;
    line-height:1.55;
    color:#4b3b31;
  }

  .booking-summary-currency{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    padding:16px 0 18px;
    margin-bottom:18px;
    border-top:1px solid #d7cec2;
    border-bottom:1px solid #d7cec2;
  }

  .booking-summary-currency__label{
    display:inline-block;
    padding:4px 0;
    font-family:'Raleway',sans-serif;
    font-size:12px;
    letter-spacing:2px;
    text-transform:uppercase;
    color:#7b6a4f;
  }

  .booking-currency-switch{ display:inline-flex; border:1px solid #b8aea2; background:#f8f3ed; }
  .booking-currency-switch__btn{ min-width:74px; height:40px; padding:0 18px; border:none; background:transparent; color:var(--booking-brown); font-family:'Raleway',sans-serif; font-size:12px; letter-spacing:2px; text-transform:uppercase; cursor:pointer; transition:background .2s ease,color .2s ease; }
  .booking-currency-switch__btn + .booking-currency-switch__btn{ border-left:1px solid #b8aea2; }
  .booking-currency-switch__btn.is-active{ background:var(--booking-brown); color:#fff; }

  .booking-right{ position:sticky; top:100px; align-self:start; min-width:0; }
  .booking-summary-box{ position:relative; top:auto; background:#fffdfa; border:1px solid #dfd3c6; box-shadow:0 8px 28px rgba(0,0,0,0.05); padding:28px 24px; }
  .booking-summary-head{ margin-bottom:22px; padding-bottom:16px; border-bottom:1px solid #ece0d2; }
  .booking-summary-head h3{ margin:0 0 8px; font-family:'Raleway',sans-serif; text-transform:uppercase; color:var(--booking-gold); font-size:26px; font-weight:500; letter-spacing:2px; line-height:1.2; }
  .booking-summary-head p{ margin:0; font-family:'Raleway',sans-serif; font-size:14px; color:#6e5e55; line-height:1.7; }

  .booking-form-group{ margin-bottom:16px; }
  .booking-form-group label{ display:block; margin-bottom:8px; font-family:'Raleway',sans-serif; font-size:12px; text-transform:uppercase; letter-spacing:1.8px; color:#7b6a4f; }
  .booking-form-group input,
  .booking-form-group select,
  .booking-form-group textarea{ width:100%; box-sizing:border-box; padding:14px 15px; border:1px solid #dccfbf; background:#faf7f3; color:#3f3028; font-family:'Raleway',sans-serif; font-size:15px; outline:none; transition:border-color .25s ease, box-shadow .25s ease, background .25s ease; border-radius:0; box-shadow:none; appearance:none; -webkit-appearance:none; }
  .booking-form-group input,
  .booking-form-group select{ min-height:54px; height:54px; }
  .booking-form-group input:focus,
  .booking-form-group select:focus,
  .booking-form-group textarea:focus{ border-color:#b89156; box-shadow:0 0 0 3px rgba(184,145,86,0.08); background:#fffdf9; }
  .booking-form-group textarea{ resize:vertical; min-height:118px; line-height:1.7; }
  .booking-date-field{ position:relative; }
  .booking-date-field::after{ content:""; position:absolute; right:16px; bottom:18px; width:18px; height:18px; pointer-events:none; background-repeat:no-repeat; background-position:center; background-size:18px 18px; opacity:.9; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%238f6d3c' stroke-width='1.8'><path stroke-linecap='round' stroke-linejoin='round' d='M8 2v4M16 2v4M3 9h18M5 5h14a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2Z'/></svg>"); }
  .booking-date-field input{ padding-right:46px !important; cursor:pointer; }
  .booking-grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
  .booking-grid-3{ display:none; }

  .booking-summary-detail{ margin-top:20px; padding:18px 16px; background:#f8f3ed; border:1px solid #e7d9ca; }
  .summary-row{ display:flex; justify-content:space-between; gap:14px; padding:11px 0; border-bottom:1px solid #eadfd2; font-family:'Raleway',sans-serif; font-size:14px; color:#4f4038; }
  .summary-row strong{ color:var(--booking-brown); text-align:right; }
  .summary-room-list,
  .summary-service-list{ padding:8px 0 4px; }
  .summary-room-item,
  .summary-service-item{ padding:12px 0; border-bottom:1px solid #eadfd2; }
  .summary-room-item__label,
  .summary-service-item__label{ margin:0 0 4px; font-family:'Raleway',sans-serif; font-size:11px; text-transform:uppercase; letter-spacing:2px; color:#8a7a67; }
  .summary-room-item__name,
  .summary-service-item__name{ margin:0 0 5px; font-family:'Raleway',sans-serif; font-size:16px; color:var(--booking-brown); }
  .summary-room-item__meta,
  .summary-service-item__meta{ font-family:'Raleway',sans-serif; font-size:13px; color:#6e5e55; line-height:1.6; }
  .summary-room-item__price,
  .summary-service-item__price{ margin-top:6px; font-family:'Raleway',sans-serif; font-size:14px; color:var(--booking-brown); text-align:right; }
  .summary-row.total{ margin-top:2px; padding-top:16px; border-bottom:none; }
  .summary-row.total strong{ color:#b86a27; font-size:24px; line-height:1.1; }

  .btn-booking-submit{ width:100%; margin-top:22px; min-height:56px; border:none; cursor:pointer; background:#a46f32; color:#fff; font-family:'Raleway',sans-serif; font-size:13px; text-transform:uppercase; letter-spacing:3px; transition:background .25s ease, transform .2s ease; }
  .btn-booking-submit:hover{ background:#8f5f2d; }
  .btn-booking-submit:active{ transform:translateY(1px); }

  .flatpickr-calendar{ width:320px !important; background:#fffdfa !important; border:1px solid #d9c9b3 !important; border-radius:0 !important; box-shadow:0 16px 40px rgba(48,34,24,.16) !important; padding:10px 10px 12px !important; font-family:'Raleway',sans-serif !important; }
  .flatpickr-calendar.arrowTop:before, .flatpickr-calendar.arrowTop:after{ display:none !important; }
  .flatpickr-months{ margin-bottom:8px; }
  .flatpickr-month{ height:50px !important; }
  .flatpickr-current-month{ display:flex !important; align-items:center; justify-content:center; gap:6px; height:50px !important; padding-top:0 !important; color:var(--booking-brown) !important; font-family:'Raleway',sans-serif !important; font-size:15px !important; text-transform:uppercase; letter-spacing:1.5px; }
  .flatpickr-current-month .flatpickr-monthDropdown-months, .flatpickr-current-month input.cur-year{ font-family:'Raleway',sans-serif !important; font-size:15px !important; font-weight:500 !important; color:var(--booking-brown) !important; background:transparent !important; }
  .flatpickr-current-month .numInputWrapper span.arrowUp:after{ border-bottom-color:var(--booking-gold) !important; }
  .flatpickr-current-month .numInputWrapper span.arrowDown:after{ border-top-color:var(--booking-gold) !important; }
  .flatpickr-prev-month, .flatpickr-next-month{ top:12px !important; padding:8px !important; fill:var(--booking-gold) !important; color:var(--booking-gold) !important; }
  .flatpickr-prev-month:hover svg, .flatpickr-next-month:hover svg{ fill:var(--booking-gold-deep) !important; }
  .flatpickr-weekdays{ background:transparent !important; border-bottom:1px solid #eadfce; padding-bottom:8px; margin-bottom:6px; }
  span.flatpickr-weekday{ color:#7b6a4f !important; font-family:'Raleway',sans-serif !important; font-size:11px !important; text-transform:uppercase; letter-spacing:2px; font-weight:500 !important; }
  .flatpickr-days{ width:100% !important; }
  .dayContainer{ width:100% !important; min-width:100% !important; max-width:100% !important; justify-content:space-between; }
  .flatpickr-day{ max-width:40px !important; height:40px !important; line-height:40px !important; border-radius:0 !important; border:1px solid transparent !important; color:var(--booking-brown) !important; font-size:14px; font-weight:500; margin:2px 0 !important; }
  .flatpickr-day.flatpickr-disabled, .flatpickr-day.prevMonthDay, .flatpickr-day.nextMonthDay{ color:#b9ab9d !important; }
  .flatpickr-day:hover{ background:#f5efe6 !important; border-color:#dbc6a8 !important; color:var(--booking-gold-deep) !important; }
  .flatpickr-day.today{ border:1px solid var(--booking-gold) !important; color:var(--booking-gold-deep) !important; background:#fffaf1 !important; }
  .flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange{ background:var(--booking-gold) !important; border-color:var(--booking-gold) !important; color:#fff !important; box-shadow:none !important; }
  .flatpickr-day.inRange{ background:#f3eadc !important; border-color:#f3eadc !important; color:var(--booking-brown) !important; box-shadow:none !important; }

  @media (max-width:1180px){
    .moon-booking-wrap{ grid-template-columns:1fr; }
    .booking-right{ position:relative; top:auto; }
    .booking-summary-box{ position:relative; top:auto; }
  }

  @media (max-width:980px){
    .booking-room-shell{
      grid-template-columns:1fr;
      grid-template-areas:"title" "price" "media" "amenities" "config";
    }
    .booking-room-price{ justify-self:start; text-align:left; }
    .booking-room-config{ grid-template-columns:1fr; }
    .booking-extras-grid{ grid-template-columns:1fr; }
  }

  @media (max-width:860px){
    #moon-booking{ padding:34px 12px 68px; }
    .booking-rate-strip{ padding:64px 12px 18px; }
    .booking-rate-strip__head{ margin-bottom:20px; }
    .booking-rate-strip__title{ font-size:24px; letter-spacing:1px; line-height:1.25; }
    .booking-rate-strip__desc{ font-size:14px; line-height:1.75; }
    .booking-rate-days{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; }
    .booking-rate-day{ min-height:132px; padding:14px 10px; gap:4px; }
    .booking-rate-day__date{ font-size:16px; }
    .booking-rate-day__price{ font-size:18px; }
    .booking-summary-currency{ align-items:flex-start; flex-direction:column; padding:14px 0 16px; margin-bottom:16px; }
    .booking-currency-switch__btn{ min-width:68px; }
    .booking-room-card{ padding:18px 12px 16px; }
    .booking-extras-section{ padding:18px 12px 16px; }
    .booking-room-title{ font-size:21px; letter-spacing:1px; }
    .booking-room-price{ font-size:19px; }
    .booking-room-config-left{ grid-template-columns:8px minmax(0,1fr); }
    .booking-room-config-body{ padding:12px; }
    .booking-room-fields{ grid-template-columns:1fr 1fr; }
    .booking-rate-plan-price{ font-size:22px; }
    .booking-room-actions{ padding-top:12px; }
    .booking-room-action{ font-size:12px; letter-spacing:1.4px; }
    .booking-extra-title{ font-size:18px; }
    .booking-extra-fields{ grid-template-columns:1fr 1fr; }
    .booking-summary-box{ padding:22px 14px 18px; box-shadow:0 10px 26px rgba(0,0,0,0.06); }
    .booking-summary-head{ text-align:center; margin-bottom:18px; padding-bottom:14px; }
    .booking-grid-2{ grid-template-columns:1fr; gap:14px; }
    .summary-row{ flex-direction:column; align-items:flex-start; gap:6px; }
    .summary-row strong, .summary-room-item__price, .summary-service-item__price{ text-align:left; }
    .flatpickr-calendar{ width:calc(100vw - 24px) !important; max-width:360px !important; left:12px !important; right:12px !important; }
    .booking-rate-plan-popup{ width:min(calc(100vw - 40px), 460px); max-width:none; }
  }

  @media (max-width:640px){
    .booking-room-fields,
    .booking-room-config-right,
    .booking-extra-fields{ grid-template-columns:1fr; }
    .booking-rate-plan-card{ min-height:auto; }
    .booking-rate-plan-popup{
      left:50%;
      right:auto;
      width:min(calc(100vw - 32px), 420px);
      max-width:none;
      transform:translate(-50%, -6px);
    }
    .booking-rate-plan.is-open .booking-rate-plan-popup{
      transform:translate(-50%, 0);
    }
    .booking-extra-tooltip{ left:10px; right:10px; }
  }


.booking-room-meta{
  margin-top:6px;
  display:inline-flex;
  padding:6px 10px;
  font-size:12px;
  letter-spacing:1px;
  text-transform:uppercase;
  color:#6b5a50;
  gap:10px;
}
.booking-room-meta span{
  padding:0 6px;
  border-right:1px solid rgba(168,116,27,.25);
}
.booking-room-meta span:last-child{border-right:none;}
.booking-rate-popup{
  z-index:99999 !important;
  position:relative;
}
.booking-rate-popup-inner{
  position:absolute;
  z-index:99999;
}


.booking-room-meta{
  margin-top:6px;
  display:flex;
  gap:18px;
  align-items:center;
  font-size:13px;
  color:#6b5a50;
  font-weight:400;
  text-transform:none;
}
.booking-room-meta i{
  margin-right:6px;
  color:#a8741b;
  font-size:14px;
}
.booking-rate-popup,
.booking-rate-popup-inner{
  z-index:999999 !important;
}


.booking-room-meta{
  text-transform:uppercase;
  font-weight:400;
}
.booking-room-meta .meta-item{ display:inline-flex; align-items:center; gap:6px; }
.booking-room-meta .meta-sep{ opacity:.5; margin:0 6px; }
.booking-rate-popup-inner ul{ list-style:none; padding-left:0; }
.booking-rate-popup-inner li{ display:flex; align-items:flex-start; gap:10px; margin-bottom:8px; }
.booking-rate-popup-inner li i{ color:#a8741b; margin-top:2px; }

.booking-room-meta{
  text-transform:uppercase;
  font-weight:400;
}
.booking-room-meta .meta-item{ display:inline-flex; align-items:center; gap:6px; }
.booking-room-meta .meta-sep{ opacity:.5; margin:0 6px; }
.booking-rate-popup-inner ul{ list-style:none; padding-left:0; }
.booking-rate-popup-inner li{ display:flex; align-items:flex-start; gap:10px; margin-bottom:8px; }
.booking-rate-popup-inner li i{ color:#a8741b; margin-top:2px; }

.booking-room-meta{
  margin-top:6px;
  display:flex;
  gap:18px;
  align-items:center;
  font-size:13px;
  color:#6b5a50;
  font-weight:400;
  text-transform:none;
}
.booking-room-meta i{
  margin-right:6px;
  color:#a8741b;
  font-size:14px;
}
.booking-rate-popup,
.booking-rate-popup-inner{
  z-index:999999 !important;
}


.booking-room-meta{
  text-transform:uppercase;
  font-weight:400;
}
.booking-room-meta .meta-item{ display:inline-flex; align-items:center; gap:6px; }
.booking-room-meta .meta-sep{ opacity:.5; margin:0 6px; }
.booking-rate-popup-inner ul{ list-style:none; padding-left:0; }
.booking-rate-popup-inner li{ display:flex; align-items:flex-start; gap:10px; margin-bottom:8px; }
.booking-rate-popup-inner li i{ color:#a8741b; margin-top:2px; }

.booking-room-meta{
  text-transform:uppercase;
  font-weight:400;
}
.booking-room-meta .meta-item{ display:inline-flex; align-items:center; gap:6px; }
.booking-room-meta .meta-sep{ opacity:.5; margin:0 6px; }
.booking-rate-popup-inner ul{ list-style:none; padding-left:0; }
.booking-rate-popup-inner li{ display:flex; align-items:flex-start; gap:10px; margin-bottom:8px; }
.booking-rate-popup-inner li i{ color:#a8741b; margin-top:2px; }


/* bkfile css*/
#moon-booking{
  padding:36px 20px 100px;
  background:var(--booking-bg);
}


.booking-rate-strip{
  padding:88px 20px 28px;
  background:var(--booking-bg);
}

.booking-rate-strip__head{
  text-align:center;
  margin-bottom:28px;
}

.booking-rate-strip__kicker{
  margin:0 0 10px;
  font-family:'Raleway',sans-serif;
  text-transform:uppercase;
  letter-spacing:3px;
  font-size:11px;
  color:var(--booking-gold);
}

.booking-rate-strip__title{
  margin:0 0 12px;
  font-family:'Raleway',sans-serif;
  text-transform:uppercase;
  color:var(--booking-brown);
  font-size:34px;
  font-weight:400;
  letter-spacing:2px;
  line-height:1.2;
}

.booking-rate-strip__desc{
  max-width:760px;
  margin:0 auto;
  font-family:'Raleway',sans-serif;
  color:#6b5a50;
  font-size:15px;
  line-height:1.85;
}

.booking-progress{
  max-width:1180px;
  margin:34px auto 0;
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  column-gap:28px;
  align-items:start;
  position:relative;
}

.booking-progress::before,
.booking-progress::after{
  content:"";
  position:absolute;
  top:18px;
  height:1px;
  background:var(--booking-border);
  z-index:0;
}

.booking-progress::before{
  left:0;
  width:calc(16.666% - 44px);
}

.booking-progress::after{
  right:0;
  width:calc(16.666% - 44px);
}

.booking-progress__step{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  padding-top:10px;
}

.booking-progress__dot{
  width:16px;
  height:16px;
  border-radius:50%;
  background:#d7dad6;
  border:3px solid #f1f2ef;
  box-shadow:0 0 0 1px #d2d5d1;
  position:relative;
  z-index:2;
}

.booking-progress__step.is-active .booking-progress__dot{
 background:#b86a27;
 border-color:#fffdfa;
 box-shadow:0 0 0 2px #b86a27, 0 4px 12px rgba(184,106,39,.18);
}

.booking-progress__line{
  position:absolute;
  top:18px;
  left:calc(50% + 26px);
  width:calc(100% - 52px);
  height:1px;
  background:var(--booking-border);
  z-index:1;
}

.booking-progress__label{
  margin-top:28px;
  font-family:'Raleway',sans-serif;
  font-size:18px;
  line-height:1.45;
  font-weight:700;
  color:#31433f;
}

.booking-progress__step.is-active .booking-progress__label{
  color:#b86a27;
}

.booking-rate-days{
  display:grid;
  grid-template-columns:repeat(7, minmax(0, 1fr));
  gap:14px;
}

.booking-rate-day{
  background:#f8f3ed;
  border:1px solid #e2d5c6;
  box-shadow:0 6px 22px rgba(0,0,0,.04);
  padding:18px 12px 16px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:6px;
  cursor:pointer;
  transition:border-color .25s ease, box-shadow .25s ease, transform .25s ease, background .25s ease;
  color:var(--booking-brown);
}

.booking-rate-day:hover{
  transform:translateY(-2px);
  border-color:#c8ae84;
  box-shadow:0 12px 28px rgba(168,134,75,.12);
  background:#fffdfa;
}

.booking-rate-day.is-active{
  border-color:var(--booking-gold);
  background:#fffaf3;
  box-shadow:0 12px 30px rgba(168,134,75,.14);
}

.booking-rate-day__dow{
  font-family:'Raleway',sans-serif;
  text-transform:uppercase;
  letter-spacing:2px;
  font-size:10px;
  color:#8d7b63;
}

.booking-rate-day__date{
  font-family:'Raleway',sans-serif;
  font-size:19px;
  line-height:1.2;
  color:var(--booking-brown);
}

.booking-rate-day__label{
  margin-top:4px;
  font-family:'Raleway',sans-serif;
  text-transform:uppercase;
  letter-spacing:2px;
  font-size:10px;
  color:#8d7b63;
}

.booking-rate-day__price{
  font-family:'Raleway',sans-serif;
  font-size:22px;
  line-height:1.15;
  color:#b86a27;
  font-weight:600;
}

.booking-left{
  display:flex;
  flex-direction:column;
  gap:24px;
  min-width:0;
}

.booking-room-card{
  display:flex;
  flex-direction:column;
  border:1px solid var(--booking-border-soft);
  box-shadow:0 6px 24px rgba(0,0,0,0.04);
  transition:border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}

.booking-room-card.active{
  border-color:#b89156;
  box-shadow:0 10px 30px rgba(184,145,86,0.14);
}

.booking-room-card:hover{
  transform:translateY(-2px);
}

.booking-room-image{
  width:100%;
  aspect-ratio:16 / 9;
  background:#eee4d8;
  overflow:hidden;
}

.booking-room-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.booking-room-content{
  padding:26px 26px 24px;
  display:flex;
  flex-direction:column;
  gap:14px;
}

.booking-room-head{
  display:flex;
  justify-content:space-between;
  gap:20px;
  align-items:flex-start;
}

.booking-room-head h3{
  margin:0;
  font-family:'Raleway',sans-serif;
  text-transform:uppercase;
  color:var(--booking-gold);
  font-size:24px;
  font-weight:500;
  letter-spacing:2px;
  line-height:1.3;
}

.booking-room-price{
  text-align:right;
  white-space:nowrap;
}

.booking-room-price strong{
  display:block;
  color:#b86a27;
  font-family:'Raleway',sans-serif;
  font-size:28px;
  font-weight:600;
  line-height:1.2;
  white-space:nowrap;
}

.booking-room-meta{
  display:flex;
  flex-wrap:wrap;
  gap:10px 12px;
}

.booking-room-meta span{
  font-family:'Raleway',sans-serif;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:1.5px;
  color:#7b6a4f;
  padding:8px 10px;
  background:#f8f2eb;
  border:1px solid #e8dccf;
}

.booking-room-amenities{
  padding:18px 20px;
  border:1px solid #eadfd2;
}

.booking-room-amenities-list li{
  display:flex;
  align-items:flex-start;
  gap:10px;
  min-width:0;
  font-family:'Raleway',sans-serif;
  font-size:13px;
  line-height:1.6;
  color:#5a4a43;
}

.booking-room-amenities-list li i{
  width:16px;
  flex:0 0 16px;
  margin-top:2px;
  color:#b89156;
  text-align:center;
  font-size:14px;
}

.booking-room-amenities-list li span{
  display:block;
}


.booking-room-desc{
  margin:0;
  font-family:'Raleway',sans-serif;
  color:#5a4a43;
  font-size:14px;
  line-height:1.85;
}

.booking-room-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  align-items:center;
  margin-top:8px;
}

.btn-room-detail,
.btn-select-room{
  min-height:48px;
  padding:12px 22px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  border:none;
  cursor:pointer;
  font-family:'Raleway',sans-serif;
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:2.5px;
  transition:all .25s ease;
}

.btn-room-detail{
  background:transparent;
  color:var(--booking-brown);
  border:1px solid #b7a68a;
}

.btn-room-detail:hover{
  background:var(--booking-brown);
  color:#fff;
  border-color:var(--booking-brown);
}

.btn-select-room{
  background:#a46f32;
  color:#fff;
  border:1px solid #a46f32;
}

.btn-select-room:hover{
  background:#8f5f2d;
  border-color:#8f5f2d;
}

.booking-room-card.active .btn-select-room{
  background:var(--booking-brown);
  border-color:var(--booking-brown);
}

.booking-summary-box{
  position:sticky;
  top:100px;
  border:1px solid var(--booking-border-soft);
  box-shadow:0 8px 28px rgba(0,0,0,0.05);
  padding:28px 24px;
}

.booking-summary-head{
  margin-bottom:22px;
  padding-bottom:16px;
  border-bottom:1px solid #ece0d2;
}

.booking-summary-head h3{
  margin:0 0 8px;
  font-family:'Raleway',sans-serif;
  text-transform:uppercase;
  color:var(--booking-gold);
  font-size:26px;
  font-weight:500;
  letter-spacing:2px;
  line-height:1.2;
}

.booking-summary-head p{
  margin:0;
  font-family:'Raleway',sans-serif;
  font-size:14px;
  color:#6e5e55;
  line-height:1.7;
}

.booking-form-group{
  margin-bottom:16px;
}

.booking-form-group label{
  display:block;
  margin-bottom:8px;
  font-family:'Raleway',sans-serif;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:1.8px;
  color:#7b6a4f;
}

.booking-form-group input,
.booking-form-group select,
.booking-form-group textarea{
  width:100%;
  box-sizing:border-box;
  padding:14px 15px;
  border:1px solid var(--booking-border);
  background:var(--booking-soft);
  color:#3f3028;
  font-family:'Raleway',sans-serif;
  font-size:15px;
  outline:none;
  transition:border-color .25s ease, box-shadow .25s ease, background .25s ease;
  border-radius:0;
  box-shadow:none;
  appearance:none;
  -webkit-appearance:none;
}

.booking-form-group input,
.booking-form-group select{
  min-height:54px;
  height:54px;
}

.booking-form-group input:focus,
.booking-form-group select:focus,
.booking-form-group textarea:focus{
  border-color:#b89156;
  box-shadow:0 0 0 3px rgba(184,145,86,0.08);
  background:#fffdf9;
}

.booking-form-group textarea{
  resize:vertical;
  min-height:118px;
  line-height:1.7;
}

.booking-date-field{
  position:relative;
}

.booking-date-field::after{
  content:"";
  position:absolute;
  right:16px;
  bottom:18px;
  width:18px;
  height:18px;
  pointer-events:none;
  background-repeat:no-repeat;
  background-position:center;
  background-size:18px 18px;
  opacity:.9;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%238f6d3c' stroke-width='1.8'><path stroke-linecap='round' stroke-linejoin='round' d='M8 2v4M16 2v4M3 9h18M5 5h14a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2Z'/></svg>");
}

.booking-date-field input{
  padding-right:46px !important;
  cursor:pointer;
}

.booking-grid-2{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}

.booking-grid-3{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:14px;
}

.booking-summary-detail{
  margin-top:20px;
  padding:18px 16px;
  background:#f8f3ed;
  border:1px solid #e7d9ca;
}

.summary-row{
  display:flex;
  justify-content:space-between;
  gap:14px;
  padding:11px 0;
  border-bottom:1px solid #eadfd2;
  font-family:'Raleway',sans-serif;
  font-size:14px;
  color:#4f4038;
}

.summary-row:last-child{
  border-bottom:none;
}

.summary-row strong{
  color:var(--booking-brown);
  text-align:right;
}

.summary-row.total{
  margin-top:2px;
  padding-top:16px;
}

.summary-row.total strong{
  color:#b86a27;
  font-size:24px;
  line-height:1.1;
}

.btn-booking-submit{
  width:100%;
  margin-top:22px;
  min-height:56px;
  border:none;
  cursor:pointer;
  background:#a46f32;
  color:#fff;
  font-family:'Raleway',sans-serif;
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:3px;
  transition:background .25s ease, transform .2s ease;
}

.btn-booking-submit:hover{
  background:#8f5f2d;
}

.btn-booking-submit:active{
  transform:translateY(1px);
}

/* ===== FLATPICKR THEME ===== */
.flatpickr-calendar{
  width:320px !important;
  background:#fffdfa !important;
  border:1px solid #d9c9b3 !important;
  border-radius:0 !important;
  box-shadow:0 16px 40px rgba(48,34,24,.16) !important;
  padding:10px 10px 12px !important;
  font-family:'Raleway',sans-serif !important;
}

.flatpickr-calendar.arrowTop:before,
.flatpickr-calendar.arrowTop:after{
  display:none !important;
}

.flatpickr-months{
  margin-bottom:8px;
}

.flatpickr-month{
  height:50px !important;
}

.flatpickr-current-month{
  display:flex !important;
  align-items:center;
  justify-content:center;
  gap:6px;
  height:50px !important;
  padding-top:0 !important;
  color:var(--booking-brown) !important;
  font-family:'Raleway',sans-serif !important;
  font-size:15px !important;
  text-transform:uppercase;
  letter-spacing:1.5px;
}

.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year{
  font-family:'Raleway',sans-serif !important;
  font-size:15px !important;
  font-weight:500 !important;
  color:var(--booking-brown) !important;
  background:transparent !important;
}

.flatpickr-current-month .numInputWrapper span.arrowUp:after{
  border-bottom-color:var(--booking-gold) !important;
}

.flatpickr-current-month .numInputWrapper span.arrowDown:after{
  border-top-color:var(--booking-gold) !important;
}

.flatpickr-prev-month,
.flatpickr-next-month{
  top:12px !important;
  padding:8px !important;
  fill:var(--booking-gold) !important;
  color:var(--booking-gold) !important;
}

.flatpickr-prev-month:hover svg,
.flatpickr-next-month:hover svg{
  fill:var(--booking-gold-deep) !important;
}

.flatpickr-weekdays{
  background:transparent !important;
  border-bottom:1px solid #eadfce;
  padding-bottom:8px;
  margin-bottom:6px;
}

span.flatpickr-weekday{
  color:#7b6a4f !important;
  font-family:'Raleway',sans-serif !important;
  font-size:11px !important;
  text-transform:uppercase;
  letter-spacing:2px;
  font-weight:500 !important;
}

.flatpickr-days{
  width:100% !important;
}

.dayContainer{
  width:100% !important;
  min-width:100% !important;
  max-width:100% !important;
  justify-content:space-between;
}

.flatpickr-day{
  max-width:40px !important;
  height:40px !important;
  line-height:40px !important;
  border-radius:0 !important;
  border:1px solid transparent !important;
  color:var(--booking-brown) !important;
  font-size:14px;
  font-weight:500;
  margin:2px 0 !important;
}

.flatpickr-day.flatpickr-disabled,
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay{
  color:#b9ab9d !important;
}

.flatpickr-day:hover{
  background:#f5efe6 !important;
  border-color:#dbc6a8 !important;
  color:var(--booking-gold-deep) !important;
}

.flatpickr-day.today{
  border:1px solid var(--booking-gold) !important;
  color:var(--booking-gold-deep) !important;
  background:#fffaf1 !important;
}

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange{
  background:var(--booking-gold) !important;
  border-color:var(--booking-gold) !important;
  color:#fff !important;
  box-shadow:none !important;
}

.flatpickr-day.inRange{
  background:#f3eadc !important;
  border-color:#f3eadc !important;
  color:var(--booking-brown) !important;
  box-shadow:none !important;
}

.flatpickr-day.startRange:not(.endRange),
.flatpickr-day.endRange:not(.startRange){
  border-radius:0 !important;
}

.flatpickr-monthDropdown-months:hover,
.numInputWrapper:hover{
  background:transparent !important;
}

@media (max-width:1100px){
  .moon-booking-wrap{
    grid-template-columns:1fr;
    gap:26px;
  }

  .booking-summary-box{
    position:relative;
    top:auto;
  }
}

@media (max-width:860px){
  #moon-booking{
    padding:34px 12px 68px;
  }


  .booking-rate-strip{
    padding:64px 12px 18px;
  }

  .booking-rate-strip__head{
    margin-bottom:20px;
  }

  .booking-rate-strip__title{
    font-size:24px;
    letter-spacing:1px;
    line-height:1.25;
  }

  .booking-rate-strip__desc{
    font-size:14px;
    line-height:1.75;
  }

  .booking-progress{
    grid-template-columns:1fr;
    row-gap:18px;
    margin-top:24px;
  }

  .booking-progress::before,
  .booking-progress::after{
    display:none;
  }

  .booking-progress__step{
    align-items:flex-start;
    text-align:left;
    padding-top:0;
    padding-left:34px;
    min-height:34px;
  }

  .booking-progress__dot{
    position:absolute;
    left:0;
    top:2px;
    width:16px;
    height:16px;
    border-width:3px;
  }

  .booking-progress__line{
    left:7px;
    top:24px;
    width:1px;
    height:calc(100% + 12px);
  }

  .booking-progress__step:last-child .booking-progress__line{
    display:none;
  }

  .booking-progress__label{
    margin-top:0;
    font-size:17px;
    line-height:1.4;
  }

  .booking-rate-days{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:10px;
  }

  .booking-rate-day{
    min-height:132px;
    padding:14px 10px;
    gap:4px;
  }

  .booking-rate-day__date{
    font-size:16px;
  }

  .booking-rate-day__price{
    font-size:18px;
  }

  .booking-left{
    gap:18px;
  }

  .booking-room-card{
    border-radius:0;
  }

  .booking-room-image{
    aspect-ratio:16 / 10;
  }

  .booking-room-content{
    padding:20px 16px 18px;
    gap:12px;
  }

  .booking-room-head{
    flex-direction:column;
    align-items:flex-start;
    gap:10px;
  }

  .booking-room-price{
    text-align:left;
    white-space:normal;
  }

  .booking-room-head h3{
    font-size:20px;
    letter-spacing:1px;
    line-height:1.28;
  }

  .booking-room-price strong{
    font-size:25px;
  }

  .booking-room-meta{
    gap:8px;
  }

  .booking-room-meta span{
    font-size:11px;
    letter-spacing:1.2px;
    padding:7px 9px;
  }

  .booking-room-amenities{
    padding:14px 14px;
  }

  .booking-room-amenities-list{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:10px 14px;
  }

  .booking-room-amenities-list li{
    font-size:14px;
    gap:9px;
  }


  .booking-room-desc{
    font-size:14px;
    line-height:1.78;
  }

  .booking-room-actions{
    display:grid;
    grid-template-columns:1fr;
    gap:10px;
    margin-top:4px;
  }

  .btn-room-detail,
  .btn-select-room{
    width:100%;
    min-height:50px;
    font-size:12px;
    letter-spacing:2.2px;
  }

  .booking-summary-box{
    padding:22px 14px 18px;
    box-shadow:0 10px 26px rgba(0,0,0,0.06);
  }

  .booking-summary-head{
    text-align:center;
    margin-bottom:18px;
    padding-bottom:14px;
  }

  .booking-summary-head h3{
    font-size:24px;
    letter-spacing:1px;
    line-height:1.18;
    margin-bottom:6px;
  }

  .booking-summary-head p{
    font-size:14px;
    line-height:1.6;
  }

  .booking-form-group{
    margin-bottom:14px;
  }

  .booking-grid-2,
  .booking-grid-3{
    grid-template-columns:1fr;
    gap:14px;
  }

  .booking-form-group label{
    margin-bottom:8px;
    font-size:10px;
    letter-spacing:3px;
  }

  .booking-form-group input,
  .booking-form-group select{
    min-height:56px;
    height:56px;
    padding:0 14px;
    font-size:16px;
    border-radius:0;
    background:#fbf8f4;
  }

  .booking-date-field input{
    padding-right:44px !important;
  }

  .booking-date-field::after{
    right:14px;
    bottom:19px;
    width:17px;
    height:17px;
    background-size:17px 17px;
  }

  .booking-form-group textarea{
    min-height:120px;
    padding:14px 16px;
    font-size:16px;
    border-radius:0;
    background:#fbf8f4;
  }

  .booking-summary-detail{
    margin-top:18px;
    padding:14px 14px 8px;
  }

  .summary-row{
    flex-direction:column;
    align-items:flex-start;
    gap:6px;
    padding:10px 0;
    font-size:13px;
  }

  .summary-row strong{
    text-align:left;
    font-size:15px;
    line-height:1.45;
  }

  .summary-row.total{
    padding-top:14px;
    margin-top:4px;
  }

  .summary-row.total strong{
    font-size:24px;
  }

  .btn-booking-submit{
    min-height:58px;
    margin-top:18px;
    font-size:13px;
    letter-spacing:4px;
  }

  .flatpickr-calendar{
    width:calc(100vw - 24px) !important;
    max-width:360px !important;
    left:12px !important;
    right:12px !important;
  }

  .flatpickr-day{
    height:42px !important;
    line-height:42px !important;
  }
}
/*end bkfile css*/


/* end of booking-room-meta and rate popup styles */
/*bk info*/
 #paymentRoomList .summary-row strong {
      font-size: 13px;
      line-height: 1.65;
    }
    #paymentServiceList .summary-row strong,
    #paymentMetaList .summary-row strong {
      font-size: 13px;
      line-height: 1.65;
    }

    #moon-information .guest-info-block-updated {
      display: flex;
      flex-direction: column;
      gap: 18px;
    }

    #moon-information .guest-info-block-updated .payment-form-group {
      margin: 0;
    }

    #moon-information .payment-form-group input,
    #moon-information .payment-form-group textarea,
    #moon-information .payment-form-group select {
      width: 100%;
      max-width: 100%;
      min-height: 54px;
      box-sizing: border-box;
    }

    #moon-information .payment-form-group textarea {
      min-height: 130px;
      resize: vertical;
    }

    #moon-information .payment-grid-contact {
      align-items: end;
      gap: 18px;
    }

    #moon-information .payment-check-terms {
      margin-top: 24px;
    }

    #moon-information .payment-check-terms label {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      cursor: pointer;
      line-height: 1.75;
    }

    #moon-information .payment-check-terms input[type="checkbox"] {
      margin-top: 4px;
      flex: 0 0 auto;
      width: 18px;
      height: 18px;
      accent-color: #b86a27;
    }

    #moon-information .payment-check-terms span {
      display: block;
      color: #34454b;
      font-size: 14px;
    }

    #moon-information .payment-check-terms a {
      color: inherit;
      text-decoration: underline;
      text-underline-offset: 3px;
      font-weight: 600;
    }


    #moon-information,
    #moon-information .moon-payment-container,
    #moon-information .moon-payment-wrap,
    #moon-information .payment-left,
    #moon-information .payment-right {
      box-sizing: border-box;
    }

    #moon-information .payment-form-group input,
    #moon-information .payment-form-group textarea,
    #moon-information .btn-payment-submit {
      width: 100%;
      max-width: 100%;
      box-sizing: border-box;
    }

    #moon-information .payment-summary-box,
    #moon-information .payment-panel {
      width: 100%;
      max-width: 100%;
      box-sizing: border-box;
    }

    @media (max-width: 991px) {
      #moon-information .moon-payment-container {
        width: 100%;
        max-width: 100%;
        padding-left: 16px;
        padding-right: 16px;
      }

      #moon-information .moon-payment-wrap {
        display: flex;
        flex-direction: column;
        gap: 20px;
      }

      #moon-information .payment-left,
      #moon-information .payment-right {
        width: 100%;
        max-width: 100%;
        flex: 0 0 100%;
        margin: 0;
      }

      #moon-information .payment-grid-2,
      #moon-information .payment-grid-contact {
        grid-template-columns: 1fr;
        gap: 14px;
      }

      #moon-information .booking-progress {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 4px;
      }

      #moon-information .booking-progress__step {
        min-width: 170px;
        flex: 0 0 auto;
      }
    }

    @media (max-width: 767px) {
      #moon-information {
        width: 100%;
        max-width: 100%;
      }

      #moon-information .moon-payment-container {
        padding-left: 12px;
        padding-right: 12px;
      }

      #moon-information .payment-page-head,
      #moon-information .payment-panel,
      #moon-information .payment-summary-box {
        border-radius: 0;
      }

      #moon-information .payment-panel,
      #moon-information .payment-summary-box {
        padding-left: 16px;
        padding-right: 16px;
      }

      #moon-information .payment-kicker,
      #moon-information .payment-intro,
      #moon-information .payment-summary-head p,
      #moon-information .payment-secure-note span,
      #moon-information .summary-row,
      #moon-information .summary-row strong {
        word-break: break-word;
      }

      #moon-information .btn-payment-submit {
        min-height: 52px;
      }

      #moon-information .guest-info-block-updated {
        gap: 14px;
      }

      #moon-information .payment-form-group input,
      #moon-information .payment-form-group textarea {
        font-size: 16px;
      }
    }

    @media (max-width: 767px) {
      #moon-information,
      #moon-information.fade-section {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
      }

      #moon-information .moon-payment-container {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin: 0 !important;
      }

      #moon-information .moon-payment-wrap,
      #moon-information .payment-left,
      #moon-information .payment-right {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
      }

      #moon-information .payment-page-head,
      #moon-information .payment-panel,
      #moon-information .payment-summary-box {
        width: calc(100vw - 24px) !important;
        max-width: calc(100vw - 24px) !important;
        margin-left: auto !important;
        margin-right: auto !important;
        box-sizing: border-box !important;
      }

      #moon-information .payment-panel,
      #moon-information .payment-summary-box {
        padding: 18px 14px !important;
      }

      #moon-information .payment-form {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
      }

      #moon-information .payment-form-group,
      #moon-information .payment-form-group label,
      #moon-information .payment-form-group input,
      #moon-information .payment-form-group textarea,
      #moon-information .payment-check,
      #moon-information .btn-payment-submit {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
      }

      #moon-information .payment-grid-2,
      #moon-information .payment-grid-contact {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 14px !important;
      }
    }


    /* Booking-style reservation summary for information page */
    #moon-information .payment-right{ position: sticky; top: 100px; align-self: start; min-width: 0; }
    #moon-information .payment-summary-box{ position: relative; top: auto; background:#fffdfa; border:1px solid #dfd3c6; box-shadow:0 8px 28px rgba(0,0,0,0.05); padding:28px 24px; }
    #moon-information .payment-summary-head{ margin-bottom:22px; padding-bottom:16px; border-bottom:1px solid #ece0d2; }
    #moon-information .payment-summary-head h3{ margin:0 0 8px; font-family:'Raleway',sans-serif; text-transform:uppercase; color:#a8741b; font-size:26px; font-weight:500; letter-spacing:2px; line-height:1.2; }
    #moon-information .payment-summary-head p{ margin:0; font-family:'Raleway',sans-serif; font-size:14px; color:#6e5e55; line-height:1.7; }
    #moon-information .payment-summary-detail{ margin-top:20px; padding:18px 16px; background:#f8f3ed; border:1px solid #e7d9ca; }
    #moon-information .summary-row{ display:flex; justify-content:space-between; gap:14px; padding:11px 0; border-bottom:1px solid #eadfd2; font-family:'Raleway',sans-serif; font-size:14px; color:#4f4038; }
    #moon-information .summary-row strong{ color:#4b3b31; text-align:right; }
    #moon-information .summary-room-list,
    #moon-information .summary-service-list,
    #moon-information .summary-meta-list{ padding:8px 0 4px; }
    #moon-information .summary-room-item,
    #moon-information .summary-service-item,
    #moon-information .summary-meta-item{ padding:12px 0; border-bottom:1px solid #eadfd2; }
    #moon-information .summary-room-item__label,
    #moon-information .summary-service-item__label,
    #moon-information .summary-meta-item__label{ margin:0 0 4px; font-family:'Raleway',sans-serif; font-size:11px; text-transform:uppercase; letter-spacing:2px; color:#8a7a67; }
    #moon-information .summary-room-item__name,
    #moon-information .summary-service-item__name,
    #moon-information .summary-meta-item__name{ margin:0 0 5px; font-family:'Raleway',sans-serif; font-size:16px; color:#4b3b31; }
    #moon-information .summary-room-item__meta,
    #moon-information .summary-service-item__meta,
    #moon-information .summary-meta-item__meta{ font-family:'Raleway',sans-serif; font-size:13px; color:#6e5e55; line-height:1.6; }
    #moon-information .summary-room-item__price,
    #moon-information .summary-service-item__price,
    #moon-information .summary-meta-item__price{ margin-top:6px; font-family:'Raleway',sans-serif; font-size:14px; color:#4b3b31; text-align:right; }
    #moon-information .summary-row.total{ margin-top:2px; padding-top:16px; border-bottom:none; }
    #moon-information .summary-row.total strong{ color:#b86a27; font-size:24px; line-height:1.1; }
    #moon-information .booking-summary-note{ margin:14px 0 0; font-family:'Raleway',sans-serif; font-size:12px; line-height:1.6; color:#7b6a4f; }
/*payment */
#moon-payment{
    padding:100px 20px;
    background:#f7f2ea;
  }

  .moon-payment-wrap{
    max-width:1180px;
    margin:0 auto;
    display:grid;
    grid-template-columns:minmax(0, 1.6fr) minmax(320px, 0.9fr);
    gap:34px;
    align-items:start;
  }

  .payment-panel,
  .payment-summary-box{
    background:#fffdfa;
    border:1px solid #e4d8ca;
    box-shadow:0 8px 28px rgba(0,0,0,0.05);
  }

  .payment-panel{
    padding:34px 30px 30px;
  }

  .payment-panel-head{
    margin-bottom:26px;
    padding-bottom:18px;
    border-bottom:1px solid #ece0d2;
  }

  .payment-kicker{
    margin:0 0 10px;
    font-family:'Raleway',sans-serif;
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:4px;
    color:#a8864b;
  }

  .payment-panel-head h2{
    margin:0 0 12px;
    font-family:'Raleway',sans-serif;
    text-transform:uppercase;
    color:#3b302c;
    font-size:38px;
    line-height:1.15;
    font-weight:400;
    letter-spacing:1px;
  }

  .payment-intro{
    margin:0;
    font-family:'Raleway',sans-serif;
    color:#6d5d54;
    font-size:15px;
    line-height:1.85;
    max-width:760px;
  }

  .payment-methods-wrap{
    margin-bottom:22px;
    padding-bottom:18px;
    border-bottom:1px solid #ece0d2;
  }

  .payment-methods-title{
    margin:0 0 14px;
    font-family:'Raleway',sans-serif;
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:3px;
    color:#7b6a4f;
  }

  .payment-methods-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:12px;
  }

  .payment-method-card{
    position:relative;
    display:flex;
    flex-direction:column;
    gap:8px;
    padding:16px 14px;
    border:1px solid #dccfbf;
    background:#faf7f3;
    cursor:pointer;
    transition:border-color .25s ease, box-shadow .25s ease, background .25s ease, transform .25s ease;
  }

  .payment-method-card:hover{
    transform:translateY(-1px);
  }

  .payment-method-card input{
    position:absolute;
    opacity:0;
    pointer-events:none;
  }

  .payment-method-card.active{
    border-color:#b89156;
    background:#fffdf9;
    box-shadow:0 0 0 3px rgba(184,145,86,0.08);
  }

  .method-badge{
    display:inline-flex;
    width:max-content;
    padding:5px 8px;
    border:1px solid #e1d3c2;
    background:#fff;
    font-family:'Raleway',sans-serif;
    font-size:10px;
    text-transform:uppercase;
    letter-spacing:2px;
    color:#a8864b;
  }

  .payment-method-card strong{
    font-family:'Raleway',sans-serif;
    font-size:16px;
    font-weight:500;
    color:#3b302c;
    line-height:1.3;
  }

  .payment-method-card small{
    font-family:'Raleway',sans-serif;
    font-size:13px;
    color:#6a5a51;
    line-height:1.6;
  }

  .payment-method-panel{
    display:none;
  }

  .payment-method-panel.active{
    display:block;
  }

  .gateway-note{
    padding:18px 18px;
    margin:0 0 18px;
    border:1px solid #e6d8c7;
    background:#fbf8f4;
  }

  .gateway-note h4{
    margin:0 0 8px;
    font-family:'Raleway',sans-serif;
    text-transform:uppercase;
    letter-spacing:2px;
    font-size:14px;
    font-weight:500;
    color:#a8864b;
  }

  .gateway-note p{
    margin:0;
    font-family:'Raleway',sans-serif;
    font-size:14px;
    line-height:1.75;
    color:#6a5a51;
  }

  .payment-form-group{
    margin-bottom:16px;
  }

  .payment-form-group label{
    display:block;
    margin-bottom:8px;
    font-family:'Raleway',sans-serif;
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:1.8px;
    color:#7b6a4f;
  }

  .payment-form-group input,
  .payment-form-group select,
  .payment-form-group textarea{
    width:100%;
    box-sizing:border-box;
    min-height:54px;
    padding:14px 15px;
    border:1px solid #dccfbf;
    background:#faf7f3;
    color:#3f3028;
    font-family:'Raleway',sans-serif;
    font-size:15px;
    outline:none;
    border-radius:0;
    box-shadow:none;
    appearance:none;
    -webkit-appearance:none;
    transition:border-color .25s ease, box-shadow .25s ease, background .25s ease;
  }

  .payment-form-group textarea{
    min-height:118px;
    resize:vertical;
    line-height:1.7;
  }

  .payment-form-group input:focus,
  .payment-form-group select:focus,
  .payment-form-group textarea:focus{
    border-color:#b89156;
    box-shadow:0 0 0 3px rgba(184,145,86,0.08);
    background:#fffdf9;
  }

  .payment-grid-2{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
  }

  .payment-grid-3{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:14px;
  }

  .payment-check{
    margin:8px 0 0;
  }

  .payment-check label{
    display:flex;
    gap:10px;
    align-items:flex-start;
    font-family:'Raleway',sans-serif;
    font-size:14px;
    color:#5e4f47;
    line-height:1.7;
  }

  .payment-check input{
    margin-top:3px;
    accent-color:#a46f32;
  }

  .btn-payment-submit{
    width:100%;
    margin-top:22px;
    min-height:56px;
    border:none;
    cursor:pointer;
    background:#a46f32;
    color:#fff;
    font-family:'Raleway',sans-serif;
    font-size:13px;
    text-transform:uppercase;
    letter-spacing:3px;
    transition:background .25s ease, transform .2s ease;
  }

  .btn-payment-submit:hover{
    background:#8f5f2d;
  }

  .btn-payment-submit:active{
    transform:translateY(1px);
  }

  .payment-summary-box{
    position:sticky;
    top:100px;
    padding:28px 24px;
  }

  .payment-summary-head{
    margin-bottom:22px;
    padding-bottom:16px;
    border-bottom:1px solid #ece0d2;
  }

  .payment-summary-head h3{
    margin:0 0 8px;
    font-family:'Raleway',sans-serif;
    text-transform:uppercase;
    color:#a8864b;
    font-size:26px;
    font-weight:500;
    letter-spacing:2px;
    line-height:1.2;
  }

  .payment-summary-head p{
    margin:0;
    font-family:'Raleway',sans-serif;
    font-size:14px;
    color:#6e5e55;
    line-height:1.7;
  }

  .payment-summary-detail{
    padding:18px 16px;
    background:#f8f3ed;
    border:1px solid #e7d9ca;
  }

  .summary-row{
    display:flex;
    justify-content:space-between;
    gap:14px;
    padding:11px 0;
    border-bottom:1px solid #eadfd2;
    font-family:'Raleway',sans-serif;
    font-size:14px;
    color:#4f4038;
  }

  .summary-row:last-child{
    border-bottom:none;
  }

  .summary-row strong{
    color:#3b302c;
    text-align:right;
  }

  .summary-row.total{
    margin-top:2px;
    padding-top:16px;
  }

  .summary-row.total strong{
    color:#b86a27;
    font-size:24px;
    line-height:1.1;
  }

  .payment-secure-note{
    margin-top:18px;
    padding:16px 18px;
    border:1px solid #e6d8c7;
    background:#fbf8f4;
  }

  .payment-secure-note p{
    margin:0 0 6px;
    font-family:'Raleway',sans-serif;
    text-transform:uppercase;
    letter-spacing:2px;
    font-size:11px;
    color:#a8864b;
  }

  .payment-secure-note span{
    font-family:'Raleway',sans-serif;
    font-size:14px;
    color:#6a5a51;
    line-height:1.7;
  }

  @media (max-width:1100px){
    .moon-payment-wrap{
      grid-template-columns:1fr;
      gap:26px;
    }

    .payment-summary-box{
      position:relative;
      top:auto;
    }
  }

  @media (max-width:860px){
    #moon-payment{
      padding:68px 12px;
    }

    .moon-payment-wrap{
      display:flex;
      flex-direction:column;
      gap:18px;
    }

    .payment-right{
      order:1;
    }

    .payment-left{
      order:2;
    }

    .payment-panel{
      padding:22px 14px 18px;
    }

    .payment-panel-head{
      text-align:center;
      margin-bottom:18px;
      padding-bottom:14px;
    }

    .payment-kicker{
      font-size:10px;
      letter-spacing:4px;
      margin-bottom:10px;
    }

    .payment-panel-head h2{
      font-size:clamp(28px, 8vw, 46px);
      line-height:1.12;
      letter-spacing:1px;
    }

    .payment-intro{
      font-size:14px;
      line-height:1.75;
    }

    .payment-methods-grid{
      grid-template-columns:1fr;
      gap:10px;
    }

    .payment-grid-2,
    .payment-grid-3{
      grid-template-columns:1fr;
      gap:14px;
    }

    .payment-form-group label{
      margin-bottom:8px;
      font-size:10px;
      letter-spacing:3px;
    }

    .payment-form-group input,
    .payment-form-group select{
      min-height:56px;
      height:56px;
      padding:0 14px;
      font-size:16px;
      border-radius:0;
      background:#fbf8f4;
    }

    .payment-form-group textarea{
      min-height:120px;
      padding:14px 16px;
      font-size:16px;
      border-radius:0;
      background:#fbf8f4;
    }

    .payment-summary-box{
      padding:22px 14px 18px;
      box-shadow:0 10px 26px rgba(0,0,0,0.06);
    }

    .payment-summary-head{
      text-align:center;
      margin-bottom:18px;
      padding-bottom:14px;
    }

    .payment-summary-head h3{
      font-size:24px;
      letter-spacing:1px;
    }

    .summary-row{
      flex-direction:column;
      align-items:flex-start;
      gap:6px;
      padding:10px 0;
      font-size:13px;
    }

    .summary-row strong{
      text-align:left;
      font-size:15px;
      line-height:1.45;
    }

    .summary-row.total strong{
      font-size:24px;
    }

    .btn-payment-submit{
      min-height:58px;
      margin-top:18px;
      font-size:13px;
      letter-spacing:4px;
    }
  }

/* ===== PAYMENT PAGE HEADER LAYOUT ===== */
#moon-payment{
  padding:100px 20px;
  background:#f7f2ea;
}

.moon-payment-container{
  max-width:1180px;
  margin:0 auto;
}

.payment-page-head{
  max-width:980px;
  margin:0 auto 34px;
  text-align:center;
}

.payment-kicker{
  margin:0 0 10px;
  font-family:'Raleway',sans-serif;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:4px;
  color:#a8864b;
}

.payment-page-head h2{
  margin:0 0 12px;
  font-family:'Raleway',sans-serif;
  text-transform:uppercase;
  color:#3b302c;
  font-size:38px;
  line-height:1.15;
  font-weight:400;
  letter-spacing:1px;
}

.payment-intro{
  margin:0 auto;
  font-family:'Raleway',sans-serif;
  color:#6d5d54;
  font-size:15px;
  line-height:1.85;
  max-width:760px;
}

.payment-page-head .booking-progress{
  margin-top:30px;
}

.payment-panel{
  padding:34px 30px 30px;
}

.payment-panel-head{
  display:none;
}

@media (max-width:860px){
  #moon-payment{
    padding:68px 12px;
  }

  .payment-page-head{
    margin-bottom:24px;
  }

  .payment-kicker{
    font-size:10px;
    letter-spacing:4px;
    margin-bottom:10px;
  }

  .payment-page-head h2{
    font-size:clamp(28px, 8vw, 46px);
    line-height:1.12;
    letter-spacing:1px;
  }

  .payment-intro{
    font-size:14px;
    line-height:1.75;
  }

  .payment-page-head .booking-progress{
    margin-top:24px;
  }
}
/*payment completed*/
#payment-confirm{
      padding:88px 20px 100px;
      background:var(--booking-bg);
    }

    .payment-confirm-wrap{
      max-width:1180px;
      margin:0 auto;
    }

    .confirm-top{
      text-align:center;
      margin:0 auto 34px;
      max-width:980px;
      padding:0 12px;
    }

    .confirm-kicker{
      margin:0 0 12px;
      font-size:12px;
      letter-spacing:4px;
      text-transform:uppercase;
      color:var(--booking-gold);
    }

    .confirm-title{
      margin:0 0 14px;
      font-size:42px;
      line-height:1.15;
      letter-spacing:1px;
      font-weight:400;
      text-transform:uppercase;
      color:var(--booking-brown);
    }

    .confirm-intro{
      margin:0 auto;
      max-width:760px;
      font-size:15px;
      line-height:1.85;
      color:var(--booking-brown-soft);
    }

    .confirm-status-card{
      margin:32px auto 0;
      max-width:920px;
      background:linear-gradient(180deg, #fffdfa 0%, #fbf7f2 100%);
      border:1px solid var(--booking-border-soft);
      box-shadow:0 8px 28px rgba(0,0,0,.05);
      padding:28px 26px;
      display:grid;
      grid-template-columns:92px minmax(0,1fr);
      gap:22px;
      align-items:center;
    }

    .confirm-status-icon{
      width:92px;
      height:92px;
      border-radius:50%;
      background:var(--booking-success-soft);
      border:1px solid #d9eadf;
      display:flex;
      align-items:center;
      justify-content:center;
      position:relative;
      animation:popIn .65s ease both;
    }

    .confirm-status-icon::before{
      content:"";
      width:48px;
      height:24px;
      border-left:5px solid var(--booking-success);
      border-bottom:5px solid var(--booking-success);
      transform:rotate(-45deg) translate(2px,-2px);
      display:block;
    }

    @keyframes popIn{
      0%{transform:scale(.75); opacity:0}
      70%{transform:scale(1.06); opacity:1}
      100%{transform:scale(1); opacity:1}
    }

    .confirm-status-copy h2{
      margin:0 0 10px;
      font-size:30px;
      line-height:1.15;
      text-transform:uppercase;
      letter-spacing:1px;
      font-weight:500;
      color:var(--booking-brown);
    }

    .confirm-status-copy p{
      margin:0;
      font-size:15px;
      line-height:1.8;
      color:var(--booking-brown-soft);
    }

    .confirm-meta{
      display:grid;
      grid-template-columns:repeat(4, minmax(0,1fr));
      gap:14px;
      margin:24px auto 0;
      max-width:920px;
    }

    .confirm-meta-card{
      background:var(--booking-card);
      border:1px solid var(--booking-border-soft);
      padding:16px 14px;
      box-shadow:0 6px 20px rgba(0,0,0,.04);
      min-width:0;
    }

    .confirm-meta-card span{
      display:block;
      font-size:11px;
      line-height:1.4;
      text-transform:uppercase;
      letter-spacing:2.2px;
      color:#8c7a6e;
      margin-bottom:8px;
    }

    .confirm-meta-card strong{
      display:block;
      font-size:16px;
      line-height:1.5;
      color:var(--booking-brown);
      word-break:break-word;
    }

    .confirm-grid{
      display:grid;
      grid-template-columns:minmax(0,1.45fr) minmax(320px, .9fr);
      gap:34px;
      align-items:start;
      margin-top:34px;
    }

    .confirm-card{
      background:var(--booking-card);
      border:1px solid var(--booking-border-soft);
      box-shadow:0 8px 28px rgba(0,0,0,.05);
    }

    .confirm-card + .confirm-card{
      margin-top:24px;
    }

    .confirm-card-head{
      padding:24px 24px 16px;
      border-bottom:1px solid #ece0d2;
    }

    .confirm-card-head h3{
      margin:0 0 8px;
      font-size:25px;
      line-height:1.2;
      font-weight:500;
      letter-spacing:2px;
      text-transform:uppercase;
      color:var(--booking-gold);
    }

    .confirm-card-head p{
      margin:0;
      font-size:14px;
      line-height:1.7;
      color:#6e5e55;
    }

    .confirm-card-body{
      padding:20px 24px 24px;
    }

    .summary-panel{
      padding:18px 16px;
      background:#f8f3ed;
      border:1px solid #e7d9ca;
    }

    .summary-row{
      display:flex;
      justify-content:space-between;
      gap:16px;
      padding:12px 0;
      border-bottom:1px solid #eadfd2;
      font-size:14px;
      line-height:1.6;
      color:#4f4038;
    }

    .summary-row:last-child{
      border-bottom:none;
    }

    .summary-row strong{
      text-align:right;
      color:var(--booking-brown);
      font-weight:600;
    }

    .summary-row.total{
      margin-top:2px;
      padding-top:16px;
    }

    .summary-row.total strong{
      color:var(--booking-gold);
      font-size:24px;
      line-height:1.15;
    }

    #confirmRoomList .summary-row strong{
      font-size:13px;
      line-height:1.65;
    }

    .guest-grid{
      display:grid;
      grid-template-columns:repeat(2, minmax(0,1fr));
      gap:14px;
    }

    .info-box{
      background:#faf7f3;
      border:1px solid var(--booking-border);
      padding:16px 14px;
      min-width:0;
    }

    .info-box span{
      display:block;
      margin:0 0 8px;
      font-size:11px;
      line-height:1.4;
      text-transform:uppercase;
      letter-spacing:2px;
      color:#8a7869;
    }

    .info-box strong,
    .info-box p{
      margin:0;
      font-size:15px;
      line-height:1.7;
      color:var(--booking-brown);
      word-break:break-word;
    }

    .note-box{
      margin-top:14px;
      background:#fbf8f4;
      border:1px solid #e6d8c7;
      padding:18px 16px;
    }

    .note-box span{
      display:block;
      margin-bottom:8px;
      font-size:11px;
      text-transform:uppercase;
      letter-spacing:2px;
      color:var(--booking-gold);
    }

    .note-box p{
      margin:0;
      font-size:14px;
      line-height:1.8;
      color:#6a5a51;
    }

    .side-card{
      position:sticky;
      top:100px;
      padding:24px;
    }

    .side-head{
      margin-bottom:18px;
      padding-bottom:16px;
      border-bottom:1px solid #ece0d2;
    }

    .side-head h3{
      margin:0 0 8px;
      font-size:26px;
      line-height:1.2;
      font-weight:500;
      letter-spacing:2px;
      text-transform:uppercase;
      color:var(--booking-gold);
    }

    .side-head p{
      margin:0;
      font-size:14px;
      line-height:1.7;
      color:#6e5e55;
    }

    .action-stack{
      display:flex;
      flex-direction:column;
      gap:12px;
      margin-top:18px;
    }

    .btn-action{
      min-height:54px;
      padding:14px 18px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      border:1px solid var(--booking-border);
      background:#fff;
      color:var(--booking-brown);
      text-decoration:none;
      cursor:pointer;
      font-family:'Raleway', Arial, sans-serif;
      font-size:13px;
      text-transform:uppercase;
      letter-spacing:2.8px;
      transition:all .25s ease;
    }

    .btn-action:hover{
      transform:translateY(-1px);
    }

    .btn-action.primary{
      background:#a46f32;
      border-color:#a46f32;
      color:#fff;
    }

    .btn-action.primary:hover{
      background:#8f5f2d;
      border-color:#8f5f2d;
    }

    .btn-action.secondary:hover{
      background:var(--booking-brown);
      border-color:var(--booking-brown);
      color:#fff;
    }

    .secure-note{
      margin-top:18px;
      padding:16px 18px;
      border:1px solid #e6d8c7;
      background:#fbf8f4;
    }

    .secure-note p{
      margin:0 0 6px;
      font-size:11px;
      text-transform:uppercase;
      letter-spacing:2px;
      color:var(--booking-gold);
    }

    .secure-note span{
      font-size:14px;
      line-height:1.7;
      color:#6a5a51;
    }

    .status-chip{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:7px 12px;
      background:var(--booking-success-soft);
      border:1px solid #d6e7dc;
      color:var(--booking-success);
      font-size:11px;
      text-transform:uppercase;
      letter-spacing:2px;
      font-weight:700;
    }

    .status-chip::before{
      content:"";
      width:8px;
      height:8px;
      border-radius:50%;
      background:var(--booking-success);
      display:block;
    }

    @media print{
      .hero-terms,
      .action-stack{
        display:none !important;
      }
      body{
        background:#fff;
      }
      #payment-confirm{
        padding:20px 0;
        background:#fff;
      }
      .confirm-card, .confirm-status-card, .confirm-meta-card{
        box-shadow:none;
      }
      .confirm-grid{
        grid-template-columns:1fr;
      }
      .side-card{
        position:relative;
        top:auto;
      }
    }

    @media (max-width:1100px){
      .confirm-grid{
        grid-template-columns:1fr;
        gap:24px;
      }
      .side-card{
        position:relative;
        top:auto;
      }
    }

    @media (max-width:860px){
      #payment-confirm{
        padding:68px 12px 72px;
      }

      .confirm-title{
        font-size:30px;
        line-height:1.15;
      }

      .confirm-intro{
        font-size:14px;
        line-height:1.75;
      }

      .confirm-status-card{
        grid-template-columns:1fr;
        text-align:center;
        padding:22px 16px;
        gap:16px;
      }

      .confirm-status-icon{
        margin:0 auto;
        width:82px;
        height:82px;
      }

      .confirm-status-copy h2{
        font-size:24px;
      }

      .confirm-meta{
        grid-template-columns:1fr 1fr;
      }

      .confirm-card-head{
        text-align:center;
        padding:20px 14px 14px;
      }

      .confirm-card-head h3{
        font-size:23px;
        letter-spacing:1px;
      }

      .confirm-card-body{
        padding:16px 14px 18px;
      }

      .summary-row{
        flex-direction:column;
        align-items:flex-start;
        gap:6px;
        font-size:13px;
        padding:10px 0;
      }

      .summary-row strong{
        text-align:left;
        font-size:15px;
      }

      .summary-row.total strong{
        font-size:24px;
      }

      .guest-grid{
        grid-template-columns:1fr;
      }

      .side-card{
        padding:22px 14px 18px;
      }

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

      .side-head h3{
        font-size:24px;
        letter-spacing:1px;
      }

      .btn-action{
        min-height:56px;
        letter-spacing:2.4px;
      }
    }
#story{
  max-width: 900px;
  margin: 0 auto 40px;
  padding: 80px 20px 0;
}
/* =========================================================
   BOOKING DROPDOWN - INLINE EXPAND FIELDS
   Added for Book Now quick booking panel
========================================================= */
.booking-dropdown {
  position: fixed;
  top: 122px;
  right: 24px;
  width: min(420px, calc(100vw - 32px));
  z-index: 130;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-10px);
  transition: opacity .25s ease, transform .25s ease, visibility .25s ease;
}

.booking-dropdown.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.booking-dropdown-inner {
  width: 100%;
  padding: 24px 22px 26px;
  background: rgba(250, 249, 246, 0.94);
  border: 1px solid rgba(214, 181, 124, 0.35);
  border-radius: 12px;
  box-shadow: 0 18px 50px rgba(37, 25, 21, 0.28);
  backdrop-filter: blur(14px);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.quick-booking-field {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.booking-drop-field {
  width: 100%;
  min-height: 48px;
  border: 1px solid rgba(168, 134, 75, 0.32);
  background: rgba(255,255,255,.28);
  color: #5b4b45;
  font-family: 'Raleway', sans-serif;
  font-size: 13px;
  font-weight: 100;
  letter-spacing: 2px;
  text-transform: uppercase;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 0 16px;
  transition: border-color .25s ease, background .25s ease, color .25s ease, box-shadow .25s ease;
}

.booking-drop-field:hover,
.quick-booking-field.is-open .booking-drop-field {
  border-color: rgba(168, 134, 75, 0.75);
  background: rgba(255, 252, 246, 0.75);
  color: #483732;
  box-shadow: 0 8px 18px rgba(72, 55, 50, 0.08);
}

.quick-date-reset {
  margin-left: auto;
  font-size: 10px;
  letter-spacing: 1px;
  color: #a8864b;
  text-transform: uppercase;
}

.quick-dropdown-menu {
  position: static;
  width: 100%;
  margin: 10px 0 2px;
  padding: 16px;
  background: rgba(255, 253, 249, 0.98);
  border: 1px solid rgba(214, 181, 124, 0.35);
  box-shadow: 0 10px 26px rgba(72, 55, 50, 0.10);
  animation: quickDropOpen .22s ease both;
}

.quick-dropdown-menu[hidden] { display: none !important; }

@keyframes quickDropOpen {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

.quick-dropdown-grid,
.quick-dropdown-stack {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.quick-dropdown-grid label,
.quick-dropdown-stack label {
  display: grid;
  gap: 7px;
  color: #6d5a52;
  font-family: 'Raleway', sans-serif;
  font-size: 11px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
}

.quick-dropdown-grid select,
.quick-dropdown-stack input {
  width: 100%;
  min-height: 42px;
  border: 1px solid rgba(168, 134, 75, 0.35);
  background: #fffdfa;
  color: #483732;
  font-family: 'Raleway', sans-serif;
  font-size: 13px;
  letter-spacing: .8px;
  padding: 0 12px;
  outline: none;
  border-radius: 0;
}

.quick-dropdown-grid select:focus,
.quick-dropdown-stack input:focus {
  border-color: rgba(168, 134, 75, 0.85);
  box-shadow: 0 0 0 3px rgba(214, 181, 124, 0.16);
}

.quick-menu-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 14px;
}

.quick-date-calendar {
  display: flex;
  justify-content: center;
}

.quick-date-calendar .flatpickr-calendar.inline {
  width: 100%;
  max-width: 330px;
  box-shadow: none;
  border: 0;
  background: transparent;
}

.quick-date-calendar .flatpickr-months,
.quick-date-calendar .flatpickr-weekdays {
  background: transparent;
}

.quick-date-calendar .flatpickr-day {
  border-radius: 999px;
}

.quick-date-calendar .flatpickr-day.selected,
.quick-date-calendar .flatpickr-day.startRange,
.quick-date-calendar .flatpickr-day.endRange {
  background: #a8864b;
  border-color: #a8864b;
  color: #fff;
}

.quick-date-calendar .flatpickr-day.inRange {
  background: rgba(214, 181, 124, 0.22);
  border-color: transparent;
  box-shadow: -5px 0 0 rgba(214, 181, 124, 0.22), 5px 0 0 rgba(214, 181, 124, 0.22);
}

.quick-date-footer {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(214, 181, 124, 0.28);
  display: grid;
  gap: 12px;
}

.quick-date-footer-reset {
  justify-self: start;
  border: 0;
  background: transparent;
  color: #a8864b;
  font-family: 'Raleway', sans-serif;
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  cursor: pointer;
}

.quick-date-selection {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
  color: #483732;
}

.quick-date-selection span {
  display: block;
  font-size: 10px;
  color: #8b766c;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.quick-date-selection strong {
  display: block;
  font-size: 12px;
  letter-spacing: .6px;
  color: #483732;
  font-weight: 600;
}

.quick-date-selection em {
  font-style: normal;
  color: #a8864b;
}

.quick-date-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.quick-date-action {
  min-height: 36px;
  border: 1px solid rgba(168, 134, 75, 0.45);
  padding: 0 16px;
  font-family: 'Raleway', sans-serif;
  font-size: 11px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  cursor: pointer;
  transition: all .25s ease;
}

.quick-date-action--ghost {
  background: transparent;
  color: #6d5a52;
}

.quick-date-action--primary {
  background: #a8864b;
  color: #fff;
  border-color: #a8864b;
}

.quick-date-action:hover { transform: translateY(-1px); }

.booking-drop-submit {
  width: 100%;
  min-height: 52px;
  border: 1px solid #b5792e;
  background: #b5792e;
  color: #fff;
  font-family: 'Raleway', sans-serif;
  font-size: 14px;
  letter-spacing: 4px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .25s ease, transform .25s ease, box-shadow .25s ease;
}

.booking-drop-submit:hover {
  background: #9a6426;
  box-shadow: 0 10px 24px rgba(72, 55, 50, .18);
  transform: translateY(-1px);
}

@media (max-width: 992px) {
  .booking-dropdown {
    top: calc(env(safe-area-inset-top, 0px) + 178px);
    left: 20px;
    right: 20px;
    width: auto;
    max-height: calc(100dvh - 210px);
    overflow-y: auto;
  }

  .booking-dropdown-inner {
    border-radius: 10px;
    padding: 22px 16px 24px;
  }

  .quick-dropdown-menu {
    padding: 14px 10px 16px;
  }

  .quick-date-calendar .flatpickr-calendar.inline {
    max-width: 100%;
    font-size: 13px;
  }

  .quick-date-selection {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .quick-date-selection em { display: none; }
}

@media (max-width: 420px) {
  .booking-dropdown {
    top: calc(env(safe-area-inset-top, 0px) + 164px);
    left: 14px;
    right: 14px;
  }

  .booking-drop-field,
  .booking-drop-submit {
    min-height: 48px;
    font-size: 13px;
    letter-spacing: 3px;
  }
}