/* ═══════════════════════════════════════════════════════════
   BUHARA · LUXURY DARK DESIGN SYSTEM — SHARED STYLESHEET
   Used by: index.html, about.html, rooms.html,
            contact.html, booking.html
   ═══════════════════════════════════════════════════════════ */
:root {
  --bg:    #0C0A09;
  --bg1:   #131110;
  --bg2:   #1A1714;
  --bg3:   #221E1B;
  --bg4:   #2A2522;
  --gold:  #C9A962;
  --gold2: #E2C97A;
  --gold3: #F0D98A;
  --cr:    #7A1E2E;
  --cr2:   #9B2638;
  --text:  #F2EDE5;
  --text2: rgba(242,237,229,.65);
  --text3: rgba(242,237,229,.35);
  --border:  rgba(201,169,98,.15);
  --border2: rgba(201,169,98,.08);
  --ease:  cubic-bezier(.16,1,.3,1);
  --ease2: cubic-bezier(.4,0,.2,1);
  --slow:  cubic-bezier(.25,.46,.45,.94);
  --ok:    #16a34a;
  --bad:   #c0392b;
}
*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0 }
html { scroll-behavior: smooth }
body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  line-height: 1.75;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit }
button, input, select, textarea { font: inherit }
img { display: block; width: 100%; object-fit: cover }
::selection { background: var(--cr); color: #fff }
::-webkit-scrollbar { width: 3px }
::-webkit-scrollbar-track { background: var(--bg) }
::-webkit-scrollbar-thumb { background: var(--gold) }

/* ── TYPOGRAPHY UTILS ── */
.lbl {
  font-family: 'Cinzel', serif;
  font-size: .48rem;
  letter-spacing: .5em;
  text-transform: uppercase;
  color: var(--gold);
  display: block;
}
.display {
  font-family: 'Playfair Display', serif;
  font-weight: 400;
}
.display em { font-style: italic; color: var(--gold2) }
.gold-line {
  display: block;
  width: 48px; height: 1px;
  background: linear-gradient(90deg, var(--gold), transparent);
  margin: 22px 0;
}
.gold-line.center { margin: 22px auto }
.text-gold { color: var(--gold2) }

/* ── REVEAL ── */
.rv   { opacity:0; transform:translateY(36px); transition:opacity .9s var(--ease), transform .9s var(--ease) }
.rv.in{ opacity:1; transform:translateY(0) }
.rv-r { opacity:0; transform:translateX(36px); transition:opacity 1s var(--ease), transform 1s var(--ease) }
.rv-r.in{ opacity:1; transform:translateX(0) }
.rv-l { opacity:0; transform:translateX(-36px); transition:opacity 1s var(--ease), transform 1s var(--ease) }
.rv-l.in{ opacity:1; transform:translateX(0) }
.d1{transition-delay:.1s}.d2{transition-delay:.22s}.d3{transition-delay:.34s}.d4{transition-delay:.46s}

/* ═══════════════════════════════════════════════════════════
   NAVIGATION
   ═══════════════════════════════════════════════════════════ */
.lx-nav {
  position: fixed; top: 0; width: 100%; z-index: 950;
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 56px;
  transition: all .5s var(--ease2);
}
.lx-nav.scrolled {
  background: rgba(12,10,9,.92);
  backdrop-filter: blur(24px) saturate(1.4);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  border-bottom: 1px solid var(--border2);
  padding: 14px 56px;
}
.lx-nav-logo { text-decoration: none }
.lx-nav-logo-top {
  font-family: 'Cinzel', serif;
  font-size: .68rem; letter-spacing: .32em;
  color: var(--gold2); display: block; line-height: 1;
}
.lx-nav-logo-sub {
  font-family: 'Playfair Display', serif; font-style: italic;
  font-size: .64rem; color: var(--text3);
  display: block; margin-top: 3px; letter-spacing: .08em;
}
.lx-nav-links { display: flex; gap: 36px; list-style: none }
.lx-nav-links a {
  font-family: 'Cinzel', serif; font-size: .44rem;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--text3); text-decoration: none;
  transition: color .3s; position: relative; padding-bottom: 3px;
}
.lx-nav-links a::after {
  content:''; position:absolute; bottom:0; left:0;
  width:0; height:1px; background:var(--gold);
  transition:width .35s var(--ease2);
}
.lx-nav-links a:hover, .lx-nav-links a.active { color: var(--gold2) }
.lx-nav-links a:hover::after, .lx-nav-links a.active::after { width:100% }
.lx-nav-cta {
  font-family: 'Cinzel', serif; font-size: .44rem;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--bg); background: var(--gold);
  padding: 10px 26px; text-decoration: none;
  border: 1px solid var(--gold); transition: all .3s;
}
.lx-nav-cta:hover { background: transparent; color: var(--gold) }
.lx-ham {
  display: none; flex-direction: column; gap: 6px;
  cursor: pointer; padding: 4px;
}
.lx-ham span { width: 22px; height: 1px; background: var(--gold2); display: block; transition: .3s }

/* ── MOBILE MENU ── */
.lx-mob {
  display: none; position: fixed; inset: 0;
  background: rgba(12,10,9,.98); z-index: 900;
  flex-direction: column; align-items: center; justify-content: center; gap: 30px;
}
.lx-mob.open { display: flex }
.lx-mob a {
  font-family: 'Cinzel', serif; font-size: .82rem;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--text3); text-decoration: none; transition: color .3s;
}
.lx-mob a:hover { color: var(--gold2) }
.lx-mob-x {
  position: absolute; top: 26px; right: 30px;
  background: none; border: none; color: var(--text3);
  font-size: 1.6rem; cursor: pointer; transition: color .3s; line-height: 1;
}
.lx-mob-x:hover { color: var(--gold) }
.lx-mob-sep { width: 30px; height: 1px; background: var(--border) }

/* ═══════════════════════════════════════════════════════════
   PAGE HERO (inner pages)
   ═══════════════════════════════════════════════════════════ */
.page-hero {
  position: relative; padding-top: 60px;
  height: 52vh; min-height: 400px;
  display: flex; align-items: flex-end; overflow: hidden;
}
.page-hero-bg {
  position: absolute; inset: 0; overflow: hidden;
}
.page-hero-bg img {
  width: 100%; height: 100%; object-fit: cover;
  animation: pgHeroZoom 22s ease-in-out infinite alternate;
  filter: brightness(.55);
}
@keyframes pgHeroZoom { from{transform:scale(1.05)} to{transform:scale(1)} }
.page-hero-bg::after {
  content:''; position:absolute; inset:0;
  background: linear-gradient(to bottom, rgba(12,10,9,.4) 0%, rgba(12,10,9,.0) 30%, rgba(12,10,9,.88) 100%);
}
.page-hero-body {
  position: relative; z-index: 2;
  padding: 0 7vw 64px;
  width: 100%;
}
.breadcrumb {
  font-family: 'Cinzel', serif;
  font-size: .44rem; letter-spacing: .28em; text-transform: uppercase;
  color: var(--text3); margin-bottom: 16px;
  display: flex; align-items: center; gap: 10px;
}
.breadcrumb a { color: var(--gold); text-decoration: none; transition: color .3s }
.breadcrumb a:hover { color: var(--gold2) }
.breadcrumb span { opacity: .4 }
.page-hero h1 {
  font-family: 'Playfair Display', serif; font-weight: 400;
  font-size: clamp(2.8rem, 6vw, 5.5rem);
  color: var(--text); line-height: .96; letter-spacing: -.01em;
}
.page-hero h1 em { font-style: italic; color: var(--gold2) }

/* ═══════════════════════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════════════════════ */
.lx-btn {
  font-family: 'Cinzel', serif; font-size: .48rem;
  letter-spacing: .2em; text-transform: uppercase;
  text-decoration: none; padding: 15px 38px;
  border: 1px solid transparent; cursor: pointer;
  transition: all .35s var(--ease2);
  display: inline-flex; align-items: center; justify-content: center;
  gap: 10px;
}
.lx-btn-gold  { background: var(--gold); color: var(--bg); border-color: var(--gold) }
.lx-btn-gold:hover { background: transparent; color: var(--gold) }
.lx-btn-ghost { background: transparent; color: var(--text); border-color: rgba(242,237,229,.25) }
.lx-btn-ghost:hover { border-color: var(--gold); color: var(--gold) }
.lx-btn-cr    { background: var(--cr); color: #fff; border-color: var(--cr) }
.lx-btn-cr:hover { background: var(--cr2); border-color: var(--cr2) }
.lx-btn-outline { background: transparent; color: var(--gold); border-color: var(--gold) }
.lx-btn-outline:hover { background: var(--gold); color: var(--bg) }
.lx-btn-sm { padding: 10px 24px; font-size: .44rem }
.lx-btn:disabled { opacity: .45; cursor: not-allowed }
.lx-btn:disabled:hover { background: var(--gold); color: var(--bg) }

/* ═══════════════════════════════════════════════════════════
   FORM ELEMENTS
   ═══════════════════════════════════════════════════════════ */
.lx-field { margin-bottom: 22px }
.lx-field label {
  display: block; margin-bottom: 9px;
  font-family: 'Cinzel', serif; font-size: .44rem;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--text3);
}
.lx-field input,
.lx-field select,
.lx-field textarea {
  width: 100%; padding: 13px 16px;
  background: var(--bg2); color: var(--text);
  border: 1px solid var(--border2); outline: none;
  transition: border-color .3s, background .3s;
  font-family: 'Inter', sans-serif; font-size: .92rem;
  border-radius: 0;
  -webkit-appearance: none;
}
.lx-field input::placeholder,
.lx-field textarea::placeholder { color: var(--text3) }
.lx-field input:focus,
.lx-field select:focus,
.lx-field textarea:focus {
  border-color: var(--gold);
  background: var(--bg3);
  box-shadow: 0 0 0 3px rgba(201,169,98,.08);
}
.lx-field textarea { min-height: 140px; resize: vertical }
.lx-field select option { background: var(--bg2) }
.lx-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px }
.lx-field-row3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px }

/* Messages */
.lx-msg { display:none; padding:14px 18px; margin-top:18px; font-size:.9rem }
.lx-msg.show { display:block }
.lx-msg-ok  { background:rgba(22,163,74,.1); border:1px solid rgba(22,163,74,.3); color:#4ade80 }
.lx-msg-err { background:rgba(220,38,38,.1); border:1px solid rgba(220,38,38,.3); color:#fca5a5 }
.lx-msg-info{ background:rgba(201,169,98,.1); border:1px solid var(--border);     color:var(--gold2) }

/* ═══════════════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════════════ */
.lx-footer {
  background: var(--bg);
  padding: 88px 7vw 40px;
  border-top: 1px solid var(--border2);
}
.lx-footer-top {
  display: grid;
  grid-template-columns: 2.2fr 1fr 1fr 1.4fr;
  gap: 64px; margin-bottom: 64px;
}
.lx-footer-brand-name {
  font-family: 'Cinzel', serif; font-size: .88rem;
  letter-spacing: .28em; color: var(--gold2);
  display: block; margin-bottom: 8px;
}
.lx-footer-brand-sub {
  font-family: 'Playfair Display', serif; font-style: italic;
  font-size: .8rem; color: var(--text3);
  display: block; margin-bottom: 20px;
}
.lx-footer-desc {
  font-size: .84rem; color: var(--text3);
  line-height: 1.9; max-width: 320px;
}
.lx-footer-col-title {
  font-family: 'Cinzel', serif; font-size: .44rem;
  letter-spacing: .3em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 22px;
  padding-bottom: 12px; border-bottom: 1px solid var(--border2);
}
.lx-footer-links { list-style: none; display: flex; flex-direction: column; gap: 12px }
.lx-footer-links a {
  font-size: .84rem; color: var(--text3); text-decoration: none;
  transition: color .3s; display: flex; align-items: center; gap: 10px;
}
.lx-footer-links a::before {
  content:''; width:12px; height:1px;
  background:var(--border2); flex-shrink:0;
  transition:width .3s, background .3s;
}
.lx-footer-links a:hover { color: var(--gold2) }
.lx-footer-links a:hover::before { width:18px; background:var(--gold) }
.lx-footer-socials { display: flex; gap: 8px; margin-top: 24px }
.lx-footer-soc {
  width: 36px; height: 36px;
  border: 1px solid var(--border2);
  display: flex; align-items: center; justify-content: center;
  color: var(--text3); text-decoration: none;
  font-family: 'Cinzel', serif; font-size: .42rem; letter-spacing: .06em;
  transition: all .3s;
}
.lx-footer-soc:hover { border-color:var(--gold); color:var(--gold); background:rgba(201,169,98,.06) }
.lx-footer-bot {
  border-top: 1px solid var(--border2); padding-top: 26px;
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 10px;
}
.lx-footer-copy { font-size: .76rem; color: var(--text3) }

/* ── WA FLOAT ── */
.lx-wa {
  position: fixed; bottom: 32px; right: 32px; z-index: 800;
  width: 54px; height: 54px; background: #25D366; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  text-decoration: none; box-shadow: 0 4px 22px rgba(37,211,102,.35);
  transition: transform .3s, box-shadow .3s;
  animation: waPop 1s 3s both;
}
.lx-wa:hover { transform: scale(1.1); box-shadow: 0 8px 32px rgba(37,211,102,.5) }
.lx-wa svg { width: 26px; height: 26px; fill: #fff }
@keyframes waPop { from{opacity:0;transform:scale(0)} to{opacity:1;transform:scale(1)} }

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════ */
@media(max-width:1100px){
  .lx-nav { padding: 20px 32px }
  .lx-nav.scrolled { padding: 14px 32px }
  .lx-footer-top { grid-template-columns: 1fr 1fr; gap: 44px }
}
@media(max-width:900px){
  .lx-nav-links, .lx-nav-cta { display: none }
  .lx-ham { display: flex }
  .lx-footer-top { grid-template-columns: 1fr 1fr }
}
@media(max-width:640px){
  .lx-nav { padding: 16px 20px }
  .lx-nav.scrolled { padding: 12px 20px }
  .lx-footer { padding: 56px 20px 28px }
  .lx-footer-top { grid-template-columns: 1fr }
  .page-hero { height: 45vh; min-height: 340px }
  .page-hero-body { padding: 0 5vw 48px }
  .lx-field-row, .lx-field-row3 { grid-template-columns: 1fr }
}