/* ============================================================
   The English Country House — main stylesheet
   Colors & fonts come from CSS variables set in header.php
   ============================================================ */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--f-body);color:var(--c-text);background:var(--c-bg);font-size:16px;line-height:1.65;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:var(--c-primary);text-decoration:none;transition:.25s}
h1,h2,h3,h4{font-family:var(--f-heading);color:var(--c-heading);font-weight:600;line-height:1.25}
.container{width:min(1200px,92%);margin:0 auto}
section{padding:70px 0}
.section-tag{color:var(--c-primary);text-align:center;margin-bottom:2px;font-family:var(--f-accent);font-size:clamp(24px,3vw,34px);font-weight:400;letter-spacing:1px;text-transform:none;line-height:1.2}
.section-title{text-align:center;font-size:clamp(32px,4.6vw,50px);margin-bottom:14px;letter-spacing:.5px;position:relative}
.section-title::after{content:'';display:block;width:140px;height:14px;margin:14px auto 0;background:radial-gradient(circle at center,var(--c-primary) 0 3px,transparent 3.5px) center/14px 14px no-repeat,linear-gradient(to right,transparent,var(--c-primary) 20%,var(--c-primary) 80%,transparent) center/100% 1px no-repeat;opacity:.85}
.section-title + *{margin-top:24px}
.text-center{text-align:center}
.page-section{color:inherit}

/* ---------- preloader ---------- */
#preload{position:fixed;inset:0;background:var(--c-bg);z-index:9999;display:flex;align-items:center;justify-content:center;transition:opacity .5s}
#preload.done{opacity:0;pointer-events:none}
.pl-logo{font-size:44px;color:var(--c-primary)}

/* ---------- buttons ---------- */
.btn{display:inline-block;padding:12px 28px;border:none;border-radius:3px;cursor:pointer;font-family:var(--f-body);font-size:14px;letter-spacing:2px;text-transform:uppercase;transition:.3s;position:relative;overflow:hidden}
.btn-primary{background:linear-gradient(135deg,var(--c-primary),var(--c-primary-dark));color:var(--c-btn-text)}
.btn-primary::before{content:'';position:absolute;top:0;left:-80%;width:50%;height:100%;background:linear-gradient(105deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-20deg);transition:left .5s ease}
.btn-primary:hover::before{left:130%}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(0,0,0,.22)}
.btn-outline{background:transparent;color:var(--c-primary);border:1px solid var(--c-primary)}
.btn-outline:hover{background:var(--c-primary);color:var(--c-btn-text)}
.btn-sm{padding:8px 16px;font-size:12px}
.btn-lg{padding:16px 40px;font-size:15px}

/* ---------- header ---------- */
.site-header{position:fixed;top:0;left:0;right:0;z-index:900;padding:14px 0;transition:.35s;background:linear-gradient(to bottom,rgba(10,20,35,.55),transparent)}
.site-header.scrolled{background:var(--c-secondary);box-shadow:0 4px 18px rgba(0,0,0,.25);padding:8px 0}
.nav-wrap{display:flex;align-items:center;justify-content:space-between;gap:18px}
.brand img{max-height:64px;transition:.3s}
.site-header.scrolled .brand img{max-height:48px}
.brand-text{color:#fff;font-family:var(--f-heading);font-size:22px}
.main-nav{display:flex;gap:26px;align-items:center}
.main-nav a{color:#fff;font-size:14px;letter-spacing:.5px;position:relative;padding:4px 0}
.main-nav a::after{content:'';position:absolute;left:0;bottom:-2px;width:0;height:2px;background:var(--c-primary);transition:.3s}
.main-nav a:hover::after,.main-nav a.active::after{width:100%}
.nav-right{display:flex;align-items:center;gap:14px}
.acct-link{color:#fff;font-size:14px;display:flex;gap:6px;align-items:center}
.nav-book{white-space:nowrap}
.hamburger{display:none;background:none;border:none;cursor:pointer;flex-direction:column;gap:5px;padding:6px}
.hamburger span{width:26px;height:2px;background:#fff;transition:.3s;display:block}
.btn-mobile-only{display:none!important}
@media(max-width:1000px){
  .main-nav{position:fixed;top:0;right:-300px;width:280px;height:100vh;background:var(--c-secondary);flex-direction:column;align-items:flex-start;padding:90px 30px;gap:20px;transition:.4s;box-shadow:-8px 0 30px rgba(0,0,0,.3)}
  .main-nav.open{right:0}
  .hamburger{display:flex}
  .nav-book{display:none}
  .btn-mobile-only{display:inline-block!important}
  .hide-sm{display:none}
}

/* ---------- app-like bottom navigation (mobile) ---------- */
.bottom-nav{display:none}
@media(max-width:768px){
  body{padding-bottom:64px}
  .bottom-nav{display:flex;position:fixed;bottom:0;left:0;right:0;background:#fff;border-top:1px solid #e6eaf0;z-index:880;justify-content:space-around;padding:6px 0 max(6px, env(safe-area-inset-bottom));box-shadow:0 -6px 24px rgba(15,34,56,.10)}
  .bottom-nav a{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:10.5px;color:#8a93a0;min-width:56px;padding:4px 0}
  .bottom-nav a i{font-size:18px}
  .bottom-nav a.on{color:var(--c-primary)}
  .bottom-nav a.bn-book{margin-top:-22px}
  .bottom-nav a.bn-book i{width:48px;height:48px;border-radius:50%;background:var(--c-primary);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 20px rgba(201,151,75,.45);font-size:20px}
  .wa-float{bottom:80px}
  .chat-fab{bottom:80px}
}

/* ---------- hero ---------- */
.hero{position:relative;min-height:92vh;display:flex;align-items:center;justify-content:center;text-align:center;color:#fff;overflow:hidden}
.hero-bg{position:absolute;inset:0;background-size:cover;background-position:center;transform:scale(1.08);animation:heroZoom 14s ease-out forwards}
@keyframes heroZoom{to{transform:scale(1)}}
.hero::after{content:'';position:absolute;inset:0;background:linear-gradient(to bottom,rgba(10,22,40,.45),rgba(10,22,40,.62))}
.hero-inner{position:relative;z-index:2;max-width:850px;padding:0 20px}
.hero-inner .rule{display:flex;align-items:center;gap:16px;justify-content:center;letter-spacing:5px;font-size:13px;text-transform:uppercase;color:var(--c-accent);margin-bottom:18px;opacity:0;animation:fadeUp 1s .3s forwards}
.hero-inner .rule::before,.hero-inner .rule::after{content:'';height:1px;width:70px;background:var(--c-accent)}
.hero-inner h1{color:#fff;font-size:clamp(34px,6vw,64px);margin-bottom:20px;opacity:0;animation:fadeUp 1s .5s forwards}
.hero-inner p{font-size:17px;opacity:0;animation:fadeUp 1s .7s forwards;color:#e8edf4}
.hero-inner .hero-cta{margin-top:30px;opacity:0;animation:fadeUp 1s .9s forwards}
@keyframes fadeUp{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
.hero-scroll{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);color:#fff;font-size:22px;animation:bounce 2s infinite;z-index:2}
@keyframes bounce{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,10px)}}

/* page banner */
.page-banner{position:relative;min-height:46vh;display:flex;align-items:flex-end;color:#fff;background-size:cover;background-position:center}
.page-banner::after{content:'';position:absolute;inset:0;background:linear-gradient(to bottom,rgba(10,22,40,.35),rgba(10,22,40,.7))}
.pb-inner{position:relative;z-index:2;width:min(1200px,92%);margin:0 auto;padding:120px 0 46px;text-align:center}
.pb-inner h1{color:#fff;font-size:clamp(30px,5vw,52px)}
.crumbs{margin-top:10px;font-size:14px;color:#dfe6ef}
.crumbs a{color:var(--c-accent)}

/* ---------- booking bar ---------- */
.booking-bar{background:#fff;border-radius:10px;box-shadow:0 18px 50px rgba(15,34,56,.16);padding:22px;margin-top:-60px;position:relative;z-index:5}
.bb-grid{display:grid;grid-template-columns:repeat(5,1fr) auto;gap:14px;align-items:end}
.bb-field label{font-size:12px;text-transform:uppercase;letter-spacing:1px;color:#8b93a0;display:block;margin-bottom:6px}
.bb-field input,.bb-field select{width:100%;padding:11px 12px;border:1px solid #e2e6ec;border-radius:6px;font-family:var(--f-body);font-size:14px;background:#fbfcfe}
@media(max-width:900px){.bb-grid{grid-template-columns:1fr 1fr}.booking-bar{margin-top:-30px}}

/* ---------- reveal on scroll ---------- */
.reveal{opacity:0;transform:translateY(34px);transition:opacity .8s ease,transform .8s ease}
.reveal.visible{opacity:1;transform:none}
.reveal-left{opacity:0;transform:translateX(-40px);transition:.8s}
.reveal-left.visible{opacity:1;transform:none}
.reveal-right{opacity:0;transform:translateX(40px);transition:.8s}
.reveal-right.visible{opacity:1;transform:none}
.stagger>*{opacity:0;transform:translateY(30px);transition:.7s}
.stagger.visible>*{opacity:1;transform:none}
.stagger.visible>*:nth-child(2){transition-delay:.12s}
.stagger.visible>*:nth-child(3){transition-delay:.24s}
.stagger.visible>*:nth-child(4){transition-delay:.36s}
.stagger.visible>*:nth-child(5){transition-delay:.48s}
.stagger.visible>*:nth-child(6){transition-delay:.6s}

/* ---------- room cards ---------- */
.rooms-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:28px}
.room-card{background:#fff;border-radius:10px;overflow:hidden;box-shadow:0 8px 30px rgba(15,34,56,.09);transition:.4s;position:relative}
.room-card:hover{transform:translateY(-8px);box-shadow:0 22px 48px rgba(15,34,56,.16)}
.rc-img{position:relative;height:240px;overflow:hidden}
.rc-img img{width:100%;height:100%;object-fit:cover;transition:.8s}
.room-card:hover .rc-img img{transform:scale(1.09)}
.rc-badge{position:absolute;top:14px;left:14px;background:var(--c-primary);color:#fff;font-size:11px;letter-spacing:1px;text-transform:uppercase;padding:5px 12px;border-radius:20px;z-index:2}
.rc-badge.pet{background:#2e8b57}
.rc-price{position:absolute;bottom:14px;right:14px;background:rgba(15,34,56,.85);color:#fff;padding:7px 14px;border-radius:6px;font-size:14px;z-index:2}
.rc-price b{font-size:17px;color:var(--c-accent)}
.rc-body{padding:20px}
.rc-body h3{font-size:20px;margin-bottom:6px}
.rc-meta{font-size:13px;color:#8a929e;display:flex;gap:14px;flex-wrap:wrap;margin-bottom:12px}
.rc-actions{display:flex;gap:10px;margin-top:14px}

/* ---------- amenity cards ---------- */
.amen-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:26px}
.amen-card{position:relative;border-radius:10px;overflow:hidden;height:230px;cursor:pointer}
.amen-card img{width:100%;height:100%;object-fit:cover;transition:.7s}
.amen-card:hover img{transform:scale(1.08)}
.amen-card .ac-label{position:absolute;left:0;right:0;bottom:0;padding:36px 18px 14px;background:linear-gradient(transparent,rgba(10,22,40,.85));color:var(--c-accent);font-size:16px;font-family:var(--f-heading)}
.fac-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:26px;text-align:center}
.fac-item i{width:74px;height:74px;line-height:74px;border:1px solid var(--c-primary);border-radius:50%;color:var(--c-primary);font-size:26px;margin-bottom:12px;transition:.4s;display:inline-block}
.fac-item:hover i{background:var(--c-primary);color:#fff;transform:rotateY(180deg)}
.fac-item p{font-size:14px;color:var(--c-heading)}

/* ---------- reviews ---------- */
.review-slider{display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:16px}
.review-card{min-width:min(400px,85vw);scroll-snap-align:start;background:#fff;border-radius:10px;padding:26px;box-shadow:0 8px 28px rgba(15,34,56,.08);border-top:3px solid var(--c-primary)}
.review-stars{color:#f5b301;margin-bottom:10px}
.review-author{display:flex;gap:12px;align-items:center;margin-top:14px}
.review-author img,.review-avatar{width:44px;height:44px;border-radius:50%;object-fit:cover;background:var(--c-primary);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:600}

/* ---------- CTA band ---------- */
.cta-band{position:relative;background-size:cover;background-position:center;color:#fff;text-align:center;padding:90px 0;background-attachment:fixed}
.cta-band::after{content:'';position:absolute;inset:0;background:rgba(15,34,56,.68)}
.cta-band .container{position:relative;z-index:2}
.cta-band h2{color:#fff;font-size:clamp(26px,4vw,40px);margin-bottom:22px}

/* ---------- forms ---------- */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form-grid .full{grid-column:1/-1}
.input,.form-grid input,.form-grid select,.form-grid textarea,.promo-form input,.promo-form textarea{width:100%;padding:12px 14px;border:1px solid #dfe4ea;border-radius:6px;font-family:var(--f-body);font-size:14px;background:#fbfcfe;transition:.25s}
.input:focus,.form-grid input:focus,.form-grid textarea:focus{outline:none;border-color:var(--c-primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--c-primary) 18%,transparent)}
.form-grid textarea{min-height:130px;resize:vertical}
label.req::after{content:' *';color:#d33}
.form-msg{margin-top:10px;font-size:14px}
.form-msg.ok{color:#2e8b57}.form-msg.err{color:#d33}
@media(max-width:640px){.form-grid{grid-template-columns:1fr}}

/* email verify widget on booking page */
.verify-box{border:1px dashed var(--c-primary);background:#fdf9f1;border-radius:8px;padding:14px;margin-top:10px}
.verify-box.ok{border-style:solid;background:#e9f7ef;border-color:#2e8b57}
.verify-row{display:flex;gap:8px;margin-top:8px}
.verify-row input{flex:1}

/* ---------- blog ---------- */
.blog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:28px}
.blog-card{background:#fff;border-radius:10px;overflow:hidden;box-shadow:0 8px 26px rgba(15,34,56,.08);transition:.35s}
.blog-card:hover{transform:translateY(-6px)}
.bc-img{height:210px;overflow:hidden}
.bc-img img{width:100%;height:100%;object-fit:cover;transition:.7s}
.blog-card:hover .bc-img img{transform:scale(1.07)}
.bc-body{padding:20px}
.bc-cat{font-size:12px;color:var(--c-primary);text-transform:uppercase;letter-spacing:1px}
.bc-body h3{font-size:19px;margin:8px 0}
.bc-meta{font-size:13px;color:#98a0ab}
.share-row{display:flex;gap:10px;margin-top:18px}
.share-row a{width:38px;height:38px;border-radius:50%;background:var(--c-bg-alt);display:flex;align-items:center;justify-content:center;color:var(--c-heading)}
.share-row a:hover{background:var(--c-primary);color:#fff}
.cat-pills{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-bottom:30px}
.cat-pills a{padding:8px 18px;border:1px solid #dfe4ea;border-radius:30px;font-size:14px;color:var(--c-text)}
.cat-pills a.active,.cat-pills a:hover{background:var(--c-primary);color:#fff;border-color:var(--c-primary)}

/* ---------- FAQ ---------- */
.faq-item{border:1px solid #e8ebf0;border-radius:8px;margin-bottom:12px;overflow:hidden;background:#fff}
.faq-q{padding:16px 20px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;font-weight:500;color:var(--c-heading)}
.faq-q i{transition:.3s;color:var(--c-primary)}
.faq-item.open .faq-q i{transform:rotate(180deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .4s;padding:0 20px;color:#5b6470}
.faq-item.open .faq-a{max-height:400px;padding:0 20px 16px}

/* ---------- footer ---------- */
.site-footer{background:var(--c-footer-bg);color:var(--c-footer-text);margin-top:60px}
.footer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:34px;padding:56px 0 30px}
.f-col h4{color:#fff;font-size:19px;margin-bottom:14px}
.f-col a{color:var(--c-footer-text)}
.f-col a:hover{color:var(--c-primary)}
.f-links a{display:block;padding:3px 0}
.f-logo{max-height:70px;margin-bottom:12px}
.f-social{display:flex;gap:10px}
.f-social a{width:38px;height:38px;background:var(--c-primary);color:#fff;border-radius:6px;display:flex;align-items:center;justify-content:center;transition:.3s}
.f-social a:hover{transform:translateY(-4px)}
.f-bottom{border-top:1px solid rgba(255,255,255,.12);padding:16px 0;font-size:13px}

/* ---------- whatsapp float ---------- */
.wa-float{position:fixed;bottom:24px;right:24px;width:56px;height:56px;background:#25d366;color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:30px;z-index:850;box-shadow:0 8px 24px rgba(0,0,0,.25);animation:waPulse 2.4s infinite}
.wa-float:hover{color:#fff;transform:scale(1.08)}
.wa-float.wa-left{left:24px;right:auto}
@keyframes waPulse{0%{box-shadow:0 0 0 0 rgba(37,211,102,.5)}70%{box-shadow:0 0 0 18px rgba(37,211,102,0)}100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}}
@media(max-width:768px){.hide-mobile{display:none!important}}
@media(min-width:769px){.hide-desktop{display:none!important}}

/* ---------- promo popup ---------- */
.promo-popup{position:fixed;inset:0;background:rgba(10,20,35,.6);z-index:960;display:none;align-items:center;justify-content:center;padding:20px}
.promo-popup.show{display:flex;animation:fadeIn .35s}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.promo-box{background:#fff;border-radius:12px;max-width:460px;width:100%;overflow:hidden;position:relative;animation:popIn .4s}
@keyframes popIn{from{transform:scale(.85);opacity:0}to{transform:none;opacity:1}}
.promo-box img{width:100%;max-height:220px;object-fit:cover}
.promo-body{padding:24px}
.promo-body h3{margin-bottom:10px}
.promo-close{position:absolute;top:10px;right:10px;width:34px;height:34px;border:none;border-radius:50%;background:rgba(15,34,56,.65);color:#fff;font-size:20px;cursor:pointer;z-index:2}
.promo-form{display:grid;gap:10px;margin-top:14px}

/* ---------- chat widget ---------- */
.chat-fab{position:fixed;bottom:24px;left:24px;width:56px;height:56px;border-radius:50%;background:var(--c-secondary);color:#fff;border:none;font-size:24px;cursor:pointer;z-index:850;box-shadow:0 8px 24px rgba(0,0,0,.3);display:flex;align-items:center;justify-content:center;transition:.3s}
.chat-fab:hover{transform:scale(1.08)}
.chat-fab .cf-badge{position:absolute;top:-4px;right:-4px;background:#e74c3c;color:#fff;font-size:11px;min-width:20px;height:20px;border-radius:10px;display:flex;align-items:center;justify-content:center;padding:0 5px}
.chat-panel{position:fixed;bottom:92px;left:24px;width:min(370px,calc(100vw - 32px));height:min(540px,calc(100vh - 130px));background:#fff;border-radius:14px;z-index:860;box-shadow:0 24px 70px rgba(10,20,35,.35);display:none;flex-direction:column;overflow:hidden}
.chat-panel.open{display:flex;animation:chatIn .35s}
@keyframes chatIn{from{transform:translateY(24px);opacity:0}to{transform:none;opacity:1}}
.chat-head{background:var(--c-secondary);color:#fff;padding:16px 18px;display:flex;align-items:center;gap:12px}
.chat-head .ch-av{width:40px;height:40px;border-radius:50%;background:var(--c-primary);display:flex;align-items:center;justify-content:center;font-size:18px}
.chat-head .ch-info b{display:block;font-size:15px}
.chat-head .ch-info span{font-size:12px;opacity:.8}
.chat-head .ch-close{margin-left:auto;background:none;border:none;color:#fff;font-size:20px;cursor:pointer}
.chat-body{flex:1;overflow-y:auto;padding:16px;background:#f4f6f9;display:flex;flex-direction:column;gap:10px}
.cmsg{max-width:82%;padding:10px 14px;border-radius:14px;font-size:14px;line-height:1.5;animation:msgIn .3s;white-space:pre-wrap;word-break:break-word}
@keyframes msgIn{from{transform:translateY(8px);opacity:0}to{transform:none;opacity:1}}
.cmsg.bot,.cmsg.agent{background:#fff;border:1px solid #e6eaf0;align-self:flex-start;border-bottom-left-radius:4px}
.cmsg.visitor{background:var(--c-primary);color:#fff;align-self:flex-end;border-bottom-right-radius:4px}
.cmsg.system{background:transparent;color:#8a93a0;font-size:12px;align-self:center;text-align:center}
.cmsg .cm-time{display:block;font-size:10px;opacity:.65;margin-top:4px}
.chat-opts{display:flex;gap:8px;flex-wrap:wrap;align-self:flex-start}
.chat-opts button{background:#fff;border:1px solid var(--c-primary);color:var(--c-primary);border-radius:20px;padding:8px 16px;font-size:13px;cursor:pointer;transition:.25s}
.chat-opts button:hover{background:var(--c-primary);color:#fff}
.chat-foot{display:flex;gap:8px;padding:12px;border-top:1px solid #e8ecf1;background:#fff}
.chat-foot input{flex:1;border:1px solid #dfe4ea;border-radius:24px;padding:11px 16px;font-size:14px;font-family:var(--f-body)}
.chat-foot button{width:44px;height:44px;border-radius:50%;border:none;background:var(--c-primary);color:#fff;font-size:16px;cursor:pointer}
.chat-rate{display:flex;gap:6px;justify-content:center;font-size:22px;color:#cfd6de;cursor:pointer}
.chat-rate i.on{color:#f5b301}
.typing{display:inline-flex;gap:4px;padding:12px 16px;background:#fff;border:1px solid #e6eaf0;border-radius:14px;align-self:flex-start}
.typing span{width:7px;height:7px;background:#b9c2cc;border-radius:50%;animation:blink 1.2s infinite}
.typing span:nth-child(2){animation-delay:.2s}.typing span:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,80%,100%{opacity:.3}40%{opacity:1}}

/* ---------- inquiry modal ---------- */
.modal{position:fixed;inset:0;background:rgba(10,20,35,.62);z-index:940;display:none;align-items:center;justify-content:center;padding:20px}
.modal.show{display:flex;animation:fadeIn .3s}
.modal-box{background:#fff;border-radius:12px;max-width:560px;width:100%;max-height:92vh;overflow-y:auto;position:relative;animation:popIn .35s;padding:30px}
.modal-close{position:absolute;top:12px;right:12px;width:34px;height:34px;border:none;border-radius:50%;background:#eef1f5;font-size:19px;cursor:pointer}

/* ---------- tables (account) ---------- */
.tbl{width:100%;border-collapse:collapse;font-size:14px;background:#fff}
.tbl th{background:var(--c-bg-alt);text-align:left;padding:12px;color:var(--c-heading);font-weight:600}
.tbl td{padding:12px;border-top:1px solid #eef1f5}
.badge{display:inline-block;padding:4px 10px;border-radius:20px;font-size:12px;font-weight:500}
.badge.green{background:#e6f7ee;color:#1d7d4d}.badge.red{background:#fdecec;color:#c0392b}
.badge.orange{background:#fef4e5;color:#c07d1a}.badge.blue{background:#e8f1fd;color:#2465c8}.badge.gray{background:#eef1f5;color:#5b6470}

/* about split */
.split{display:grid;grid-template-columns:1fr 1fr;gap:46px;align-items:center}
@media(max-width:860px){.split{grid-template-columns:1fr}}
.split img{border-radius:12px;box-shadow:0 18px 44px rgba(15,34,56,.16)}
.icon-feature{display:flex;gap:16px;margin-bottom:22px}
.icon-feature i{font-size:30px;color:var(--c-primary);margin-top:4px}

/* value cards */
.value-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:24px}
.value-card{background:#fff;padding:34px 24px;text-align:center;border-radius:10px;box-shadow:0 8px 26px rgba(15,34,56,.07);transition:.35s}
.value-card:hover{transform:translateY(-6px)}
.value-card i{width:70px;height:70px;line-height:68px;border:1px solid var(--c-primary);color:var(--c-primary);border-radius:50%;font-size:24px;margin-bottom:16px;display:inline-block}

/* room detail */
.gallery{display:grid;grid-template-columns:2fr 1fr;gap:12px}
.gallery img{border-radius:10px;width:100%;height:100%;object-fit:cover;cursor:pointer}
.gallery .g-side{display:grid;gap:12px}
@media(max-width:760px){.gallery{grid-template-columns:1fr}}
.amen-pills{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0}
.amen-pills span{background:var(--c-bg-alt);padding:8px 16px;border-radius:24px;font-size:13px}
.amen-pills i{color:var(--c-primary);margin-right:6px}

/* pricing calendar hint */
.price-note{background:#fdf7ec;border:1px solid #f2e1c2;border-radius:8px;padding:12px 16px;font-size:13px;margin:12px 0}

/* social login button */
.btn-google{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;background:#fff;border:1px solid #dfe4ea;border-radius:6px;padding:12px;font-size:14px;color:#333;cursor:pointer;transition:.25s}
.btn-google:hover{box-shadow:0 4px 14px rgba(0,0,0,.1)}
.or-sep{display:flex;align-items:center;gap:12px;margin:16px 0;color:#98a0ab;font-size:12px}
.or-sep::before,.or-sep::after{content:'';flex:1;height:1px;background:#e5e9f0}

/* misc */
.alert{padding:14px 18px;border-radius:8px;margin-bottom:18px;font-size:14px}
.alert.ok{background:#e6f7ee;color:#1d7d4d;border:1px solid #bce5cf}
.alert.err{background:#fdecec;color:#c0392b;border:1px solid #f5c6c6}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:26px}
@media(max-width:800px){.grid-2{grid-template-columns:1fr}}
.card{background:#fff;border-radius:10px;box-shadow:0 8px 26px rgba(15,34,56,.07);padding:26px}
.mt-1{margin-top:8px}.mt-2{margin-top:16px}.mt-3{margin-top:26px}.mb-2{margin-bottom:16px}

/* ---------- v3.2: typography flair ---------- */
h1,h2{letter-spacing:.3px}
.hero-inner h1{text-shadow:0 2px 24px rgba(0,0,0,.35);font-weight:600}
.hero-inner .rule{font-weight:500}
blockquote{font-family:var(--f-heading);font-style:italic}

/* ---------- v3.2: checkout payment method cards ---------- */
.pay-opts{display:grid;gap:12px}
.pay-opt{display:flex;align-items:center;gap:14px;border:1.5px solid #e2e6ec;border-radius:12px;padding:14px 18px;cursor:pointer;transition:.25s;position:relative;background:#fff}
.pay-opt:hover{border-color:var(--c-primary);box-shadow:0 6px 18px rgba(0,0,0,.08);transform:translateY(-1px)}
.pay-opt input{position:absolute;opacity:0;pointer-events:none}
.pay-opt .po-icon{width:46px;height:46px;flex:0 0 46px;border-radius:50%;background:var(--c-bg-alt);display:flex;align-items:center;justify-content:center;font-size:19px;color:var(--c-primary);transition:.25s}
.pay-opt .po-body{display:flex;flex-direction:column;gap:2px}
.pay-opt .po-body b{font-size:15px;color:var(--c-heading)}
.pay-opt .po-body small{color:#8a93a0;font-size:12.5px}
.pay-opt .po-check{margin-left:auto;font-size:20px;color:#d4d9e0;transition:.25s}
.pay-opt:has(input:checked){border-color:var(--c-primary);background:linear-gradient(135deg,#fff, var(--c-bg-alt));box-shadow:0 6px 18px rgba(0,0,0,.08)}
.pay-opt:has(input:checked) .po-icon{background:var(--c-primary);color:var(--c-btn-text)}
.pay-opt:has(input:checked) .po-check{color:var(--c-primary)}
.upi-preview{display:flex;align-items:center;gap:16px;margin-top:12px;background:var(--c-bg-alt);border:1px dashed var(--c-primary);border-radius:12px;padding:14px 16px}
.upi-preview img{width:130px;height:130px;object-fit:contain;background:#fff;border-radius:10px;padding:6px;border:1px solid #e2e6ec}
.upi-preview small{color:#6c7686;line-height:1.6}

/* footer "scan our menu" mini card */
.f-menuqr{display:inline-flex;align-items:center;gap:12px;margin-top:16px;background:#fff;border-radius:14px;padding:8px 14px 8px 8px;color:#22302a!important;text-decoration:none;box-shadow:0 8px 24px rgba(0,0,0,.25)}
.f-menuqr canvas{border-radius:8px}
.f-menuqr b{display:block;font-family:var(--f-heading);font-size:18px;color:#163a2c}
.f-menuqr small{color:#76807a;font-size:12px}