/* ═══════════════════════════════════════════════════════════
   Subkem HOTEL - PUBLIC WEBSITE CSS
   Design: The Mist inspired | Brown & Gold Luxury | 2026
   ═══════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,600&family=DM+Sans:wght@300;400;500;600;700&family=Playfair+Display:ital,wght@0,400;0,700;1,400&display=swap');

:root {
  --brown:        #4A2C17;
  --brown-dark:   #2E1A0E;
  --brown-mid:    #6B3E26;
  --brown-light:  #8B5E3C;
  --gold:         #C9A84C;
  --gold-dark:    #A07830;
  --gold-light:   #E8C878;
  --gold-pale:    #FDF5E0;
  --gold-lt:      #FEFBF0;
  --cream:        #FAF7F2;
  --white:        #FFFFFF;
  --ink:          #1A1A1A;
  --ink-2:        #333333;
  --muted:        #6B7280;
  --border:       #E8E0D5;
  --green:        #059669;
  --shadow:       0 4px 24px rgba(74,44,23,.08);
  --shadow-lg:    0 20px 60px rgba(74,44,23,.14);
  --shadow-xl:    0 40px 100px rgba(74,44,23,.18);
  --radius:       12px;
  --radius-lg:    20px;
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body:    'DM Sans', system-ui, sans-serif;
  --transition:   all .3s cubic-bezier(.4,0,.2,1);
  --max-w:        1240px;
}

/* ── RESET ──────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0 }
html { font-size:16px; scroll-behavior:smooth }
body { font-family:var(--font-body); color:var(--ink); background:var(--white); line-height:1.65; -webkit-font-smoothing:antialiased; overflow-x:hidden }
a { text-decoration:none; color:inherit }
img { max-width:100%; display:block }
button,input,select,textarea { font-family:var(--font-body) }

/* ── LAYOUT ─────────────────────────────────────────────── */
.container { max-width:var(--max-w); margin:0 auto; padding:0 24px;}
.section { padding:96px 0 }
.section-sm { padding:60px 0 }

/* ── TYPOGRAPHY ─────────────────────────────────────────── */
.display-title { font-family:var(--font-display); font-size:clamp(36px,5vw,72px); font-weight:600; line-height:1.1; color:var(--brown-dark) }
.section-title { font-family:var(--font-display); font-size:clamp(28px,4vw,52px); font-weight:600; line-height:1.2; color:var(--brown-dark) }
.section-sub { font-size:16px; color:var(--muted); max-width:550px; line-height:1.7 }
.eyebrow { font-size:11px; font-weight:700; letter-spacing:3px; text-transform:uppercase; color:var(--gold-dark); margin-bottom:12px }
.text-gold { color:var(--gold) }
.text-brown { color:var(--brown) }

/* ── NAVBAR ─────────────────────────────────────────────── */
.navbar { position:fixed; top:0; left:0; right:0; z-index:1000; transition:all .4s ease }
.navbar.scrolled { background:rgba(20,10,5,.97); backdrop-filter:blur(16px); box-shadow:0 4px 40px rgba(0,0,0,.4) }
.navbar.light { background:transparent }
.nav-inner { max-width:var(--max-w); margin:0 auto; padding:0 24px; height:82px; display:flex; align-items:center; justify-content:space-between }
.nav-brand { display:flex; align-items:center; gap:12px }
.nav-logo { width:80px; height:80px; align-items:center; justify-content:center; color:var(--brown-dark); font-size:20px }
.nav-name { color:#fff; font-family:var(--font-display); font-size:22px; font-weight:600 }
.nav-links { display:flex; align-items:center; gap:4px }
.nav-link { color:rgba(255,255,255,.82); font-size:14px; font-weight:500; padding:8px 14px; border-radius:8px; transition:var(--transition) }
.nav-link:hover,.nav-link.active { color:#fff; background:rgba(255,255,255,.1) }
.nav-link.active { color:var(--gold) }
.nav-cta { background:var(--gold); color:var(--brown-dark); font-size:13.5px; font-weight:700; padding:10px 22px; border-radius:50px; transition:var(--transition); margin-left:10px; display:flex; align-items:center; gap:6px }
.nav-cta:hover { background:var(--gold-light); transform:translateY(-2px); box-shadow:0 8px 24px rgba(201,168,76,.4) }
.nav-cta svg { width:14px; height:14px }
.nav-toggle { display:none; flex-direction:column; gap:5px; cursor:pointer; padding:8px; border:none; background:transparent }
.nav-toggle span { display:block; width:24px; height:2px; background:#fff; border-radius:2px; transition:var(--transition) }
.nav-mobile { display:none; position:fixed; inset:0; background:rgba(20,10,5,.98); z-index:999; flex-direction:column; justify-content:center; align-items:center; gap:24px; backdrop-filter:blur(20px) }
.nav-mobile.open { display:flex }
.nav-mobile .nav-link { font-size:22px; color:#fff; padding:10px 24px }
.nav-mobile .nav-cta { font-size:16px; padding:14px 36px }

/* ── PAGE HEADER ────────────────────────────────────────── */
.page-header { min-height:340px; background:linear-gradient(160deg,rgba(20,10,5,.92) 0%,rgba(46,26,14,.75) 100%),url('https://images.unsplash.com/photo-1611892440504-42a792e24d32?w=1800&q=80') center/cover; display:flex; flex-direction:column; justify-content:flex-end; padding:0 0 48px; }
.page-header h1 { font-family:var(--font-display); font-size:clamp(36px,5vw,64px); font-weight:700; color:#fff; text-align:center }
.page-header p { text-align:center; color:rgba(255,255,255,.7); font-size:16px; margin-top:10px }
.breadcrumb { display:flex; align-items:center; gap:10px; font-size:13px; color:rgba(255,255,255,.55); justify-content:center; margin-top:14px }
.breadcrumb a { color:var(--gold-light); transition:var(--transition) }
.breadcrumb a:hover { color:var(--gold) }

/* ── HERO ───────────────────────────────────────────────── */
.hero { min-height:100vh; position:relative; display:flex; align-items:center; overflow:hidden }
.hero-parallax { position:absolute; inset:-60px; background-size:cover; background-position:center; will-change:transform; transition:transform .1s linear }
.hero-overlay { position:absolute; inset:0; background:linear-gradient(160deg,rgba(20,10,5,.88) 0%,rgba(46,26,14,.65) 55%,rgba(107,62,38,.38) 100%); z-index:0 }
.hero-content { position:relative; z-index:1; max-width:720px }
.hero-eyebrow { display:inline-flex; align-items:center; gap:8px; background:rgba(201,168,76,.15); border:1px solid rgba(201,168,76,.35); padding:6px 18px; border-radius:30px; margin-bottom:26px }
.hero-eyebrow span { font-size:11px; font-weight:700; letter-spacing:2.5px; text-transform:uppercase; color:var(--gold-light) }
.hero h1 { font-family:var(--font-display); font-size:clamp(44px,6.5vw,88px); font-weight:700; color:#fff; line-height:1.05; margin-bottom:22px }
.hero h1 em { color:var(--gold-light); font-style:italic }
.hero > .container > .hero-content > p { font-size:18px; color:rgba(255,255,255,.78); max-width:520px; margin-bottom:38px; line-height:1.75 }
.hero-btns { display:flex; gap:14px; flex-wrap:wrap }
.hero-scroll { position:absolute; bottom:40px; left:50%; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:8px; color:rgba(255,255,255,.55); font-size:11px; font-weight:700; letter-spacing:2.5px; text-transform:uppercase; cursor:pointer; z-index:2 }
.hero-scroll-line { width:1px; height:44px; background:linear-gradient(to bottom,rgba(255,255,255,.55),transparent); animation:scrollPulse 2.2s infinite }
@keyframes scrollPulse { 0%,100%{opacity:.55;transform:scaleY(1)}50%{opacity:1;transform:scaleY(1.15)} }
/* Hero text animation */
.hero-anim { opacity:0; transform:translateY(36px); animation:heroIn .9s forwards }
.hero-anim:nth-child(1) { animation-delay:.1s }
.hero-anim:nth-child(2) { animation-delay:.25s }
.hero-anim:nth-child(3) { animation-delay:.4s }
.hero-anim:nth-child(4) { animation-delay:.55s }
@keyframes heroIn { to { opacity:1; transform:none } }

/* ── BOOKING BAR ────────────────────────────────────────── */
.booking-bar { background:rgba(255,255,255,.97); backdrop-filter:blur(12px); border-radius:var(--radius-lg); padding:22px 28px; box-shadow:0 30px 80px rgba(0,0,0,.25); display:grid; grid-template-columns:1fr 1fr 1fr auto; gap:16px; align-items:end; margin-top:40px; border:1px solid rgba(255,255,255,.3) }
.booking-field label { display:block; font-size:11px; font-weight:700; letter-spacing:1.2px; text-transform:uppercase; color:var(--muted); margin-bottom:7px }
.booking-field input,.booking-field select { width:100%; padding:12px 14px; border:1.5px solid var(--border); border-radius:10px; font-size:15px; color:var(--ink); background:var(--cream); outline:none; transition:var(--transition); font-family:var(--font-body) }
.booking-field input:focus,.booking-field select:focus { border-color:var(--gold); background:#fff; box-shadow:0 0 0 3px rgba(201,168,76,.12) }
.btn-check-avail { background:linear-gradient(135deg,var(--gold-dark),var(--gold)); color:#fff; border:none; padding:14px 28px; border-radius:50px; font-size:15px; font-weight:700; cursor:pointer; transition:var(--transition); white-space:nowrap; font-family:var(--font-body); display:flex; align-items:center; gap:8px }
.btn-check-avail:hover { background:linear-gradient(135deg,var(--brown),var(--brown-mid)); transform:translateY(-2px); box-shadow:0 10px 30px rgba(74,44,23,.3) }

/* ── BUTTONS ─────────────────────────────────────────────── */
.btn { display:inline-flex; align-items:center; gap:8px; padding:12px 26px; border-radius:50px; font-size:14.5px; font-weight:700; cursor:pointer; transition:var(--transition); border:2px solid transparent; letter-spacing:.3px }
.btn-primary { background:linear-gradient(135deg,var(--gold-dark),var(--gold)); color:#fff; box-shadow:0 4px 20px rgba(160,120,48,.3) }
.btn-primary:hover { background:linear-gradient(135deg,var(--brown),var(--brown-mid)); transform:translateY(-2px); box-shadow:0 10px 30px rgba(74,44,23,.3) }
.btn-secondary { background:transparent; border-color:rgba(255,255,255,.6); color:#fff }
.btn-secondary:hover { background:rgba(255,255,255,.12); border-color:#fff }
.btn-dark { background:var(--brown); color:#fff }
.btn-dark:hover { background:var(--brown-dark); transform:translateY(-2px) }
.btn-outline { background:transparent; border-color:var(--gold); color:var(--gold-dark) }
.btn-outline:hover { background:var(--gold); color:var(--brown-dark) }
.btn-sm { padding:9px 22px; font-size:13px }
.btn-lg { padding:16px 40px; font-size:17px }

/* ── FEATURES STRIP ────────────────────────────────────── */
.features-strip { background:var(--brown-dark); padding:0 }
.features-strip .feat-item { display:flex; align-items:center; gap:16px; padding:28px 32px }
.features-strip .feat-item + .feat-item { border-left:1px solid rgba(255,255,255,.1) }
.feat-icon { width:52px; height:52px; background:rgba(201,168,76,.15); border-radius:12px; display:flex; align-items:center; justify-content:center; flex-shrink:0 }
.feat-icon i { color:var(--gold); font-size:22px }
.feat-title { color:#fff; font-weight:700; font-size:15px }
.feat-sub { color:rgba(255,255,255,.55); font-size:12px; margin-top:2px }

/* ── ROOM CARDS ─────────────────────────────────────────── */
.rooms-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:30px }
.room-card-pub { background:var(--white); border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow); border:1px solid var(--border); transition:var(--transition); position:relative }
.room-card-pub:hover { transform:translateY(-8px); box-shadow:var(--shadow-xl) }
.room-card-img { position:relative; height:230px; overflow:hidden }
.room-card-img img { width:100%; height:100%; object-fit:cover; transition:transform .7s cubic-bezier(.4,0,.2,1) }
.room-card-pub:hover .room-card-img img { transform:scale(1.08) }
.room-card-badge { position:absolute; top:14px; left:14px; background:linear-gradient(135deg,var(--gold-dark),var(--gold)); color:#fff; font-size:11px; font-weight:700; padding:5px 14px; border-radius:30px; letter-spacing:.5px }
.room-card-discount { position:absolute; top:14px; right:14px; background:rgba(20,10,5,.7); backdrop-filter:blur(8px); color:var(--gold-light); font-size:11px; font-weight:700; padding:5px 12px; border-radius:30px }
.room-card-body { padding:24px }
.room-card-type { font-size:11px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--gold-dark); margin-bottom:6px }
.room-card-title { font-family:var(--font-display); font-size:23px; font-weight:600; color:var(--brown-dark); margin-bottom:10px }
.room-card-desc { font-size:14px; color:var(--muted); line-height:1.6; margin-bottom:16px }
.room-card-features { display:flex; flex-wrap:wrap; gap:7px; margin-bottom:18px }
.room-feature { display:flex; align-items:center; gap:5px; font-size:12px; color:var(--ink-2); background:var(--cream); padding:4px 11px; border-radius:30px; border:1px solid var(--border) }
.room-feature i { color:var(--gold-dark); font-size:11px }
.room-card-footer { display:flex; align-items:center; justify-content:space-between; padding-top:16px; border-top:1px solid var(--border) }
.room-price { font-family:var(--font-display); font-size:28px; font-weight:700; color:var(--brown) }
.room-price span { font-size:13px; font-weight:400; color:var(--muted); font-family:var(--font-body) }
/* Horizontal room card for rooms listing */
.room-card-hz { min-height:250px; background:#fff; border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow); border:1px solid var(--border); transition:var(--transition) }
.room-card-hz:hover { box-shadow:var(--shadow-xl); transform:translateY(-4px) }
.room-card-hz .room-card-img { height:auto; min-height:250px }

/* ── VIRTUAL TOUR BUTTON ────────────────────────────────── */
.vt-btn { position:absolute; bottom:14px; right:14px; background:rgba(20,10,5,.75); backdrop-filter:blur(10px); border:1px solid rgba(201,168,76,.4); color:var(--gold-light); font-size:12px; font-weight:700; padding:7px 14px; border-radius:30px; cursor:pointer; display:flex; align-items:center; gap:6px; transition:var(--transition); z-index:5; letter-spacing:.5px }
.vt-btn:hover { background:var(--gold); color:var(--brown-dark); border-color:var(--gold) }
.vt-btn i { font-size:13px }

/* ── VIRTUAL TOUR MODAL ─────────────────────────────────── */
#vt-modal { position:fixed; inset:0; z-index:3000; display:none; align-items:center; justify-content:center; background:rgba(0,0,0,.95) }
#vt-modal.open { display:flex }
#vt-canvas-wrap { width:min(95vw,1100px); height:min(80vh,680px); position:relative; border-radius:20px; overflow:hidden; box-shadow:0 40px 120px rgba(0,0,0,.6) }
#vt-canvas-wrap canvas { width:100%!important; height:100%!important }
.vt-close { position:absolute; top:16px; right:16px; z-index:10; background:rgba(0,0,0,.6); border:none; color:#fff; width:42px; height:42px; border-radius:50%; cursor:pointer; font-size:18px; display:flex; align-items:center; justify-content:center; transition:var(--transition) }
.vt-close:hover { background:var(--gold); color:var(--brown-dark) }
.vt-title { position:absolute; top:16px; left:50%; transform:translateX(-50%); background:rgba(20,10,5,.75); backdrop-filter:blur(10px); color:#fff; font-size:14px; font-weight:700; padding:8px 22px; border-radius:30px; letter-spacing:1px; white-space:nowrap }
.vt-hint { position:absolute; bottom:18px; left:50%; transform:translateX(-50%); background:rgba(20,10,5,.65); backdrop-filter:blur(8px); color:rgba(255,255,255,.7); font-size:12px; padding:6px 18px; border-radius:20px; white-space:nowrap; letter-spacing:.5px }
.vt-door-wrap { position:absolute; inset:0; background:linear-gradient(160deg,#1a0a05,#2e1a0e); display:flex; flex-direction:column; align-items:center; justify-content:center; z-index:20; transition:opacity .8s ease, visibility .8s }
.vt-door-wrap.gone { opacity:0; visibility:hidden; pointer-events:none }
#vt-door-canvas { width:100%; height:100% }

/* ── 3D DOOR ENTRANCE ───────────────────────────────────── */
#door-scene { position:fixed; inset:0; z-index:4000; display:none; background:radial-gradient(ellipse at center,#1a0a05 0%,#0a0503 100%) }
#door-scene.active { display:block }
#door-canvas { width:100%!important; height:100%!important; cursor:pointer }
.door-skip { position:absolute; bottom:32px; right:36px; background:rgba(201,168,76,.15); border:1px solid rgba(201,168,76,.4); color:var(--gold-light); padding:10px 24px; border-radius:30px; cursor:pointer; font-size:13px; font-weight:700; letter-spacing:1px; transition:var(--transition) }
.door-skip:hover { background:var(--gold); color:var(--brown-dark) }
.door-text { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); text-align:center; pointer-events:none }
.door-hotel-name { font-family:var(--font-display); font-size:clamp(28px,5vw,64px); color:#fff; font-weight:700; opacity:0; transform:translateY(20px); transition:all 1s ease .4s }
.door-hotel-sub { font-size:clamp(12px,1.5vw,16px); color:var(--gold-light); letter-spacing:4px; text-transform:uppercase; margin-top:12px; opacity:0; transition:all 1s ease .7s }
.door-cta { margin-top:32px; opacity:0; transition:all .8s ease 1s; pointer-events:auto }
#door-scene.show-text .door-hotel-name, #door-scene.show-text .door-hotel-sub, #door-scene.show-text .door-cta { opacity:1; transform:translateY(0) }
.door-progress { position:absolute; bottom:80px; left:50%; transform:translateX(-50%); font-size:12px; color:rgba(255,255,255,.5); letter-spacing:2px; text-transform:uppercase }
.door-particles { position:absolute; inset:0; pointer-events:none; overflow:hidden }

/* ── AMENITY ICONS ──────────────────────────────────────── */
.amenities-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:20px }
.amenity-item { display:flex; flex-direction:column; align-items:center; gap:14px; padding:28px 16px; background:var(--white); border-radius:var(--radius); border:1px solid var(--border); text-align:center; transition:var(--transition); cursor:default }
.amenity-item:hover { background:var(--gold-pale); border-color:var(--gold); transform:translateY(-4px); box-shadow:var(--shadow) }
.amenity-icon { width:56px; height:56px; background:linear-gradient(135deg,var(--gold-dark),var(--gold)); border-radius:14px; display:flex; align-items:center; justify-content:center; color:#fff; font-size:24px; transition:var(--transition) }
.amenity-item:hover .amenity-icon { transform:scale(1.1) rotate(-5deg) }
.amenity-name { font-size:14px; font-weight:600; color:var(--ink-2) }

/* ── TESTIMONIALS ───────────────────────────────────────── */
.testimonial-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:24px }
.testimonial-card { background:var(--white); border-radius:var(--radius-lg); padding:30px; border:1px solid var(--border); box-shadow:var(--shadow); position:relative; transition:var(--transition) }
.testimonial-card:hover { box-shadow:var(--shadow-lg); transform:translateY(-4px) }
.testimonial-card::before { content:'"'; font-family:var(--font-display); font-size:90px; color:var(--gold-lt); position:absolute; top:-14px; left:18px; line-height:1 }
.stars { color:var(--gold); font-size:14px; margin-bottom:14px }
.testimonial-text { font-size:15px; color:var(--ink-2); line-height:1.75; margin-bottom:20px; position:relative; z-index:1 }
.testimonial-author { display:flex; align-items:center; gap:12px }
.testimonial-avatar { width:46px; height:46px; border-radius:50%; background:linear-gradient(135deg,var(--gold),var(--brown)); display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:17px }
.testimonial-name { font-weight:700; font-size:14px; color:var(--ink) }
.testimonial-date { font-size:12px; color:var(--muted) }

/* ── STATS SECTION ──────────────────────────────────────── */
.stats-section { background:var(--brown-dark); position:relative; overflow:hidden }
.stats-section::before { content:''; position:absolute; inset:0; background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23C9A84C' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") }
.stat-item { text-align:center; padding:16px }
.stat-num { font-family:var(--font-display); font-size:clamp(36px,5vw,64px); font-weight:700; color:#fff; line-height:1 }
.stat-num span { color:var(--gold-light) }
.stat-label { font-size:13px; color:rgba(255,255,255,.55); letter-spacing:1.5px; text-transform:uppercase; margin-top:8px }

/* ── FACILITIES SECTION ─────────────────────────────────── */
.facility-card { background:#fff; border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow); transition:var(--transition) }
.facility-card:hover { transform:translateY(-6px); box-shadow:var(--shadow-xl) }
.facility-img { height:220px; overflow:hidden }
.facility-img img { width:100%; height:100%; object-fit:cover; transition:transform .6s ease }
.facility-card:hover .facility-img img { transform:scale(1.06) }
.facility-body { padding:22px }
.facility-icon { width:44px; height:44px; background:var(--gold-pale); border-radius:10px; display:flex; align-items:center; justify-content:center; color:var(--gold-dark); font-size:20px; margin-bottom:12px }
.facility-title { font-family:var(--font-display); font-size:20px; font-weight:600; color:var(--brown-dark); margin-bottom:8px }
.facility-desc { font-size:13.5px; color:var(--muted); line-height:1.65 }

/* ── SECTION DIVIDER ────────────────────────────────────── */
.divider { display:flex; align-items:center; gap:16px; margin:0 auto 40px; max-width:200px }
.divider-line { flex:1; height:1px; background:linear-gradient(to right,transparent,var(--gold)) }
.divider-line.right { background:linear-gradient(to left,transparent,var(--gold)) }
.divider-icon { color:var(--gold); font-size:16px }

/* ── PROMO BANNER ───────────────────────────────────────── */
.promo-banner { background:linear-gradient(135deg,var(--brown-dark),var(--brown-mid)); border-radius:var(--radius-lg); padding:56px 48px; text-align:center; color:#fff; position:relative; overflow:hidden }
.promo-banner::before { content:''; position:absolute; inset:0; background:url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23C9A84C' fill-opacity='0.05'%3E%3Cpath d='M20 20.5V18H0v5h20v20.5h5V23h20v-5H25V2.5h-5z'/%3E%3C/g%3E%3C/svg%3E") }
.promo-banner h2 { font-family:var(--font-display); font-size:clamp(26px,4vw,52px); font-weight:700; margin-bottom:14px; position:relative }
.promo-banner p { color:rgba(255,255,255,.78); font-size:16px; margin-bottom:30px; position:relative }

/* ── A-CARD (admin-style white card) ────────────────────── */
.a-card { background:#fff; border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow) }

/* ── FOOTER ─────────────────────────────────────────────── */
.footer { background:#0e0704; color:rgba(255,255,255,.75); padding:72px 0 0 }
.footer-grid { display:grid; grid-template-columns:2.2fr 1fr 1fr 1.2fr; gap:40px; margin-bottom:52px }
.footer-brand { font-size:14px; line-height:1.75; color:rgba(255,255,255,.55); margin-top:14px; margin-bottom:22px }
.footer-social { display:flex; gap:10px }
.social-btn { width:40px; height:40px; border-radius:50%; background:rgba(255,255,255,.08); display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.65); font-size:16px; transition:var(--transition) }
.social-btn:hover { background:var(--gold); color:var(--brown-dark); transform:translateY(-2px) }
.footer-title { font-size:11px; font-weight:700; letter-spacing:2.5px; text-transform:uppercase; color:var(--gold); margin-bottom:18px }
.footer-links { display:flex; flex-direction:column; gap:11px }
.footer-link { font-size:14px; color:rgba(255,255,255,.55); transition:var(--transition); display:flex; align-items:center; gap:6px }
.footer-link::before { content:'›'; color:var(--gold); opacity:0; transform:translateX(-6px); transition:var(--transition) }
.footer-link:hover { color:var(--gold-light); padding-left:4px }
.footer-link:hover::before { opacity:1; transform:none }
.footer-contact-item { display:flex; gap:12px; font-size:14px; color:rgba(255,255,255,.55); margin-bottom:12px; align-items:flex-start }
.footer-contact-item i { color:var(--gold); margin-top:3px; width:16px; flex-shrink:0 }
.footer-bottom { border-top:1px solid rgba(255,255,255,.08); padding:22px 0; display:flex; align-items:center; justify-content:space-between; font-size:13px; color:rgba(255,255,255,.35) }

/* ── WHATSAPP FLOAT ─────────────────────────────────────── */
.whatsapp-float { position:fixed; bottom:30px; right:30px; width:58px; height:58px; background:#25D366; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; font-size:28px; z-index:500; box-shadow:0 4px 20px rgba(37,211,102,.45); animation:waPulse 2.5s infinite; text-decoration:none }
@keyframes waPulse { 0%,100%{box-shadow:0 4px 20px rgba(37,211,102,.45)}50%{box-shadow:0 4px 36px rgba(37,211,102,.75)} }

/* ── LAZY IMAGES ─────────────────────────────────────────── */
.vil-lazy { transition:opacity .4s; opacity:0 }
.vil-lazy.loaded { opacity:1 }

/* ── FORMS ─────────────────────────────────────────────── */
.form-group { margin-bottom:18px }
.form-label { display:block; font-size:13px; font-weight:600; color:var(--ink-2); margin-bottom:7px }
.form-input,.form-select,.form-textarea { width:100%; padding:12px 16px; border:1.5px solid var(--border); border-radius:10px; font-size:15px; color:var(--ink); background:var(--white); outline:none; transition:var(--transition); font-family:var(--font-body) }
.form-input:focus,.form-select:focus,.form-textarea:focus { border-color:var(--gold); box-shadow:0 0 0 3px rgba(201,168,76,.12) }
.form-textarea { resize:vertical; min-height:120px }

/* ── TOAST ─────────────────────────────────────────────── */
.vil-toast-wrap { position:fixed; bottom:28px; left:50%; transform:translateX(-50%); z-index:9999; display:flex; flex-direction:column; gap:8px; align-items:center }
.vil-toast { padding:13px 28px; border-radius:36px; background:var(--brown-dark); color:#fff; font-size:14px; font-weight:500; box-shadow:var(--shadow-lg); animation:toastUp .3s ease; pointer-events:none }
@keyframes toastUp { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:none} }
.vil-toast.success { background:#059669 }
.vil-toast.error { background:#DC2626 }
.vil-toast.warning { background:#D97706 }

/* ── FAQ ACCORDION ──────────────────────────────────────── */
.faq-item { border:1px solid var(--border); border-radius:var(--radius); margin-bottom:10px; overflow:hidden; background:#fff }
.faq-question { padding:20px 24px; display:flex; justify-content:space-between; align-items:center; cursor:pointer; font-weight:600; font-size:15px; color:var(--ink); background:#fff; transition:var(--transition) }
.faq-question:hover,.faq-question.open { background:var(--gold-pale); color:var(--brown-dark) }
.faq-icon { width:28px; height:28px; background:var(--cream); border-radius:50%; display:flex; align-items:center; justify-content:center; transition:var(--transition); flex-shrink:0 }
.faq-question.open .faq-icon { background:var(--gold); color:#fff; transform:rotate(45deg) }
.faq-answer { padding:0 24px; max-height:0; overflow:hidden; transition:all .4s ease; font-size:14.5px; color:var(--muted); line-height:1.75 }
.faq-answer.open { max-height:300px; padding:0 24px 20px }

/* ── DETAIL PAGE TABS ───────────────────────────────────── */
.detail-tabs { display:flex; border-bottom:2px solid var(--border); margin-bottom:30px; gap:0 }
.detail-tab { padding:13px 24px; border:none; background:transparent; font-size:14px; font-weight:600; cursor:pointer; color:var(--muted); border-bottom:2.5px solid transparent; margin-bottom:-2px; transition:all .25s; font-family:var(--font-body) }
.detail-tab.active { color:var(--brown); border-bottom-color:var(--gold) }
.detail-panel { display:none }
.detail-panel.active { display:block; animation:fadePanel .4s ease }
@keyframes fadePanel { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:none} }
.amenity-chip { display:inline-flex; align-items:center; gap:7px; padding:7px 16px; background:var(--cream); border:1px solid var(--border); border-radius:24px; font-size:13px; margin:4px; transition:var(--transition) }
.amenity-chip:hover { background:var(--gold-pale); border-color:var(--gold) }
.amenity-chip i { color:var(--gold-dark); font-size:13px }

/* ── BOOKING WIDGET ─────────────────────────────────────── */
.book-widget { background:#fff; border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); border:1px solid var(--border); overflow:hidden; position:sticky; top:96px }
.book-widget-head { background:linear-gradient(135deg,var(--brown-dark),var(--brown)); padding:20px 22px }
.bw-price { font-family:var(--font-display); font-size:36px; font-weight:700; color:#fff; line-height:1 }
.bw-per { font-size:13px; color:rgba(255,255,255,.58) }

/* ── GALLERY GRID ───────────────────────────────────────── */
.gallery-masonry { columns:3; column-gap:16px }
.gallery-item { break-inside:avoid; margin-bottom:16px; border-radius:12px; overflow:hidden; cursor:pointer; position:relative }
.gallery-item img { width:100%; display:block; transition:transform .5s ease }
.gallery-item:hover img { transform:scale(1.05) }
.gallery-item-overlay { position:absolute; inset:0; background:rgba(20,10,5,.5); opacity:0; transition:var(--transition); display:flex; align-items:center; justify-content:center; color:#fff; font-size:28px }
.gallery-item:hover .gallery-item-overlay { opacity:1 }

/* ── LIGHTBOX ───────────────────────────────────────────── */
#lb { position:fixed; inset:0; background:rgba(0,0,0,.97); z-index:2000; display:none; align-items:center; justify-content:center }
#lb.open { display:flex }
#lb-img { max-width:90vw; max-height:85vh; object-fit:contain; border-radius:10px }

/* ── SCROLL REVEAL ──────────────────────────────────────── */
.reveal { opacity:0; transform:translateY(30px); transition:opacity .7s ease, transform .7s ease }
.reveal.visible { opacity:1; transform:none }
.reveal-delay-1 { transition-delay:.1s }
.reveal-delay-2 { transition-delay:.2s }
.reveal-delay-3 { transition-delay:.3s }
.reveal-delay-4 { transition-delay:.4s }
.reveal-delay-5 { transition-delay:.5s }
.reveal-left { opacity:0; transform:translateX(-30px); transition:opacity .7s ease, transform .7s ease }
.reveal-left.visible { opacity:1; transform:none }
.reveal-right { opacity:0; transform:translateX(30px); transition:opacity .7s ease, transform .7s ease }
.reveal-right.visible { opacity:1; transform:none }

/* ── PARALLAX SECTION ───────────────────────────────────── */
.parallax-cta { min-height:480px; position:relative; display:flex; align-items:center; overflow:hidden }
.parallax-bg { position:absolute; inset:-80px; background-size:cover; background-position:center; background-attachment:fixed }
.parallax-overlay { position:absolute; inset:0; background:linear-gradient(135deg,rgba(20,10,5,.88),rgba(74,44,23,.75)) }

/* ── CURSOR GLOW ────────────────────────────────────────── */
#cursor-glow { position:fixed; width:300px; height:300px; border-radius:50%; background:radial-gradient(circle,rgba(201,168,76,.06) 0%,transparent 70%); pointer-events:none; z-index:0; transform:translate(-50%,-50%); transition:transform .15s ease; display:none }


#scroll-top { position:fixed;bottom:90px;right:30px;width:46px;height:46px;background:var(--brown);border:none;border-radius:50%;color:#fff;font-size:16px;cursor:pointer;z-index:499;display:none;align-items:center;justify-content:center;box-shadow:var(--shadow-lg);transition:all .3s}

/* ── LOADING SCREEN ─────────────────────────────────────── */
#page-loader { position:fixed; inset:0; background:var(--brown-dark); z-index:9999; display:flex; flex-direction:column; align-items:center; justify-content:center; transition:opacity .6s ease, visibility .6s }
#page-loader.done { opacity:0; visibility:hidden; pointer-events:none }
.loader-logo { font-family:var(--font-display); font-size:42px; font-weight:700; color:#fff; margin-bottom:32px; animation:loaderPulse 1.5s infinite }
@keyframes loaderPulse { 0%,100%{opacity:.7}50%{opacity:1} }
.loader-bar-track { width:200px; height:3px; background:rgba(255,255,255,.15); border-radius:3px; overflow:hidden }
.loader-bar { height:100%; background:var(--gold); border-radius:3px; width:0; animation:loaderGrow 1.8s ease forwards }
@keyframes loaderGrow { to{width:100%} }

/* ── RESPONSIVE ─────────────────────────────────────────── */
@media (max-width:1024px) {
  .footer-grid { grid-template-columns:1fr 1fr }
  .booking-bar { grid-template-columns:1fr 1fr; gap:12px }
  .btn-check-avail { grid-column:span 2 }
  .room-card-hz { grid-template-columns:1fr; grid-template-rows:240px auto }
  .room-card-hz .room-card-img { height:240px }
}
@media (max-width:768px) {
  .nav-links { display:none }
  .nav-toggle { display:flex }
  .features-strip .feat-item { padding:18px 16px }
  .features-strip .feat-item + .feat-item { border-left:none; border-top:1px solid rgba(255,255,255,.1) }
  .gallery-masonry { columns:2 }
  .footer-grid { grid-template-columns:1fr }
  .booking-bar { grid-template-columns:1fr; gap:10px }
  .btn-check-avail { width:100% }
  .section { padding:64px 0 }
  .parallax-bg { background-attachment:scroll }
  #vt-canvas-wrap { width:100vw; height:75vh; border-radius:0 }
  .whatsapp-float { bottom:80px;}
  #scroll-top { bottom:140px;}
}
@media (max-width:480px) {
  .gallery-masonry { columns:1 }
  .hero h1 { font-size:38px }
  .promo-banner { padding:36px 24px }
  .room-card-hz { grid-template-columns:1fr }
  .whatsapp-float { bottom:80px;}
  #scroll-top { bottom:140px;}
}

@media print {
  .no-print {
    display: none !important;
  }
}