*{margin:0;padding:0;box-sizing:border-box}
:root{
  --gold:#C2410C;--gold-light:#EA580C;--gold-dark:#9A3412;
  --dark:#1C1917;--dk2:#28211E;--dk3:#332C28;--dk4:#3E3530;
  --t1:#F5F2EB;--t2:rgba(245,242,235,.7);--t3:rgba(245,242,235,.4);
  --ease:cubic-bezier(.25,.46,.45,.94)
}
html{scroll-behavior:smooth;overflow-x:hidden}
body{font-family:'Outfit',sans-serif;background:var(--dark);color:var(--t1);overflow-x:hidden}
::selection{background:var(--gold);color:#fff}
::-webkit-scrollbar{width:4px}
::-webkit-scrollbar-track{background:var(--dark)}
::-webkit-scrollbar-thumb{background:var(--gold-dark);border-radius:2px}

/* NAVIGATION */
nav{position:fixed;top:0;left:0;right:0;z-index:1000;padding:16px clamp(20px,5vw,60px);display:flex;align-items:center;justify-content:space-between;gap:16px;background:rgba(28,25,23,.96);backdrop-filter:blur(24px);border-bottom:1px solid rgba(194,65,12,.12)}
.nav-brand{display:flex;flex-direction:column;gap:2px;text-decoration:none;cursor:pointer}
.nav-brand-name{font-family:'Cormorant Garamond',serif;font-size:clamp(15px,2vw,20px);font-weight:400;letter-spacing:.3em;text-transform:uppercase;color:var(--gold)}
.nav-brand-sub{font-family:'Outfit',sans-serif;font-size:8px;font-weight:300;letter-spacing:.4em;text-transform:uppercase;color:var(--t3)}
.nav-right{display:flex;align-items:center;gap:16px}
.back-btn{display:inline-flex;align-items:center;gap:8px;font-family:'Outfit',sans-serif;font-size:11px;font-weight:500;letter-spacing:.15em;text-transform:uppercase;color:var(--t1);text-decoration:none;padding:8px 16px;border:1px solid rgba(245,242,235,.2);border-radius:999px;transition:all .3s}
.back-btn:hover{border-color:var(--gold);color:var(--gold);background:rgba(194,65,12,.08)}
.back-btn svg{width:14px;height:14px;stroke:currentColor;flex-shrink:0}

/* Language Selector */
.lang-sel{display:flex;align-items:center;gap:2px;border:1px solid rgba(194,65,12,.28);border-radius:20px;padding:4px 8px;background:rgba(28,25,23,.5)}
.lang-btn{font-family:'Outfit',sans-serif;font-size:9px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--t3);background:none;border:none;cursor:pointer;padding:3px 7px;border-radius:12px;transition:all .3s}
.lang-btn.active{color:var(--dark);background:var(--gold)}
.lang-btn:hover:not(.active){color:var(--gold)}
.lang-divider{color:rgba(194,65,12,.28);font-size:9px}

/* PAGE HEADER */
.page-hero{padding:120px clamp(20px,6vw,80px) 40px;text-align:center;background:radial-gradient(ellipse 70% 50% at 50% 0%,rgba(194,65,12,.12),transparent)}
.page-eyebrow{font-family:'Outfit',sans-serif;font-size:10px;font-weight:500;letter-spacing:.45em;text-transform:uppercase;color:var(--gold);display:block;margin-bottom:12px}
.page-title{font-family:'Cormorant Garamond',serif;font-size:clamp(32px,6vw,60px);font-weight:300;line-height:1.1;color:var(--t1);margin-bottom:14px}
.page-title em{font-style:italic;color:var(--gold);font-weight:400}
.page-desc{font-family:'Outfit',sans-serif;font-size:clamp(13px,1.4vw,16px);font-weight:300;line-height:1.8;color:var(--t2);max-width:640px;margin:0 auto 36px}

/* FILTER TABS */
.filter-tabs{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-bottom:40px}
.tab-btn{font-family:'Outfit',sans-serif;font-size:11px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--t2);background:var(--dk2);border:1px solid rgba(194,65,12,.12);padding:10px 22px;border-radius:999px;cursor:pointer;transition:all .3s}
.tab-btn:hover{color:var(--t1);border-color:rgba(194,65,12,.3)}
.tab-btn.active{color:#fff;background:var(--gold);border-color:var(--gold)}

/* ROOMS GRID */
.rooms-container{padding:0 clamp(20px,6vw,80px) 100px;max-width:1400px;margin:0 auto}
.rooms-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:30px}
@media(max-width:480px){.rooms-grid{grid-template-columns:1fr}}

.room-card{background:var(--dk2);border:1px solid rgba(194,65,12,.1);border-radius:12px;overflow:hidden;transition:transform .4s var(--ease),box-shadow .4s,border-color .4s;display:flex;flex-direction:column}
.room-card:hover{transform:translateY(-6px);box-shadow:0 20px 50px rgba(0,0,0,.4);border-color:rgba(194,65,12,.35)}

.card-img-wrap{position:relative;height:240px;overflow:hidden;cursor:pointer}
.card-img-wrap img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.room-card:hover .card-img-wrap img{transform:scale(1.06)}
.card-badge{position:absolute;top:14px;left:14px;background:rgba(28,25,23,.75);backdrop-filter:blur(8px);color:var(--gold);font-family:'Outfit',sans-serif;font-size:9px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;padding:5px 12px;border-radius:999px;border:1px solid rgba(194,65,12,.3)}
.card-photo-count{position:absolute;bottom:14px;right:14px;background:rgba(28,25,23,.75);backdrop-filter:blur(8px);color:var(--t1);font-family:'Outfit',sans-serif;font-size:10px;font-weight:400;padding:4px 10px;border-radius:999px;display:flex;align-items:center;gap:5px}
.card-photo-count svg{width:12px;height:12px;stroke:var(--gold)}

.card-body{padding:24px 22px;display:flex;flex-direction:column;flex-grow:1}
.card-num{font-family:'Cormorant Garamond',serif;font-size:32px;font-weight:300;color:rgba(194,65,12,.2);line-height:1;margin-bottom:2px}
.card-title{font-family:'Cormorant Garamond',serif;font-size:24px;font-weight:400;color:var(--t1);margin-bottom:8px;line-height:1.2}
.card-desc{font-family:'Outfit',sans-serif;font-size:12px;font-weight:300;line-height:1.7;color:var(--t2);margin-bottom:18px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

.card-specs{display:flex;gap:16px;margin-bottom:20px;padding-bottom:16px;border-bottom:1px solid rgba(194,65,12,.08)}
.spec-item{display:flex;align-items:center;gap:6px;font-family:'Outfit',sans-serif;font-size:11px;font-weight:300;color:var(--t2)}
.spec-item svg{width:14px;height:14px;stroke:var(--gold);flex-shrink:0}

.card-foot{display:flex;align-items:center;justify-content:space-between;margin-top:auto}
.card-btn{font-family:'Outfit',sans-serif;font-size:10px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:#fff;background:var(--gold);border:none;padding:10px 20px;border-radius:999px;cursor:pointer;transition:background .3s,transform .2s;display:inline-flex;align-items:center;gap:6px;text-decoration:none}
.card-btn:hover{background:var(--gold-light);transform:translateY(-1px)}
.card-btn svg{width:12px;height:12px;stroke:currentColor}

/* ROOM DETAIL MODAL STYLES */
.modal-overlay, .idx-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 3000;
  background: rgba(28, 25, 23, .88);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(10px, 3vw, 20px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .4s var(--ease);
  overflow-y: auto;
}
.modal-overlay.open, .idx-modal-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

.modal-box, .idx-modal-box {
  background: var(--dk2);
  border: 1px solid rgba(194, 65, 12, .2);
  box-shadow: 0 24px 80px rgba(0, 0, 0, .6);
  border-radius: 16px;
  width: 100%;
  max-width: 960px;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  transform: scale(.94) translateY(16px);
  transition: transform .4s var(--ease);
}
.modal-overlay.open .modal-box, .idx-modal-overlay.open .idx-modal-box {
  transform: scale(1) translateY(0);
}

.modal-close-btn, .idx-modal-close-btn {
  position: sticky;
  top: 14px;
  right: 14px;
  float: right;
  z-index: 30;
  background: rgba(28, 25, 23, .85);
  border: 1px solid rgba(194, 65, 12, .3);
  border-radius: 50%;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--t1);
  transition: all .3s;
}
.modal-close-btn:hover, .idx-modal-close-btn:hover {
  background: var(--gold);
  transform: rotate(90deg);
}
.modal-close-btn svg, .idx-modal-close-btn svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
}

.modal-content-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}

/* GALLERY VIEWER IN MODAL */
.gallery-viewer {
  position: relative;
  height: clamp(220px, 45vw, 460px);
  background: #000;
  overflow: hidden;
}
.gallery-main-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity .4s ease;
}
.gallery-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 44px;
  height: 44px;
  background: rgba(28, 25, 23, .6);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(194, 65, 12, .3);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #fff;
  transition: all .3s;
}
.gallery-nav-btn:hover {
  background: var(--gold);
  border-color: var(--gold);
}
.gallery-nav-btn svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
}
.g-prev { left: 16px; }
.g-next { right: 16px; }
.gallery-counter {
  position: absolute;
  bottom: 16px;
  right: 16px;
  background: rgba(28, 25, 23, .75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--t1);
  font-family: 'Outfit', sans-serif;
  font-size: 11px;
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid rgba(194, 65, 12, .2);
}

.gallery-thumbs {
  display: flex;
  gap: 8px;
  padding: 12px 20px;
  background: var(--dk3);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.thumb-item {
  width: 64px;
  height: 48px;
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
  opacity: .5;
  border: 2px solid transparent;
  transition: all .3s;
  flex-shrink: 0;
}
.thumb-item.active {
  opacity: 1;
  border-color: var(--gold);
}
.thumb-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* MODAL DETAILS BODY */
.modal-body-padding {
  padding: clamp(20px, 4vw, 30px) clamp(16px, 4vw, 40px);
}
.modal-room-header {
  margin-bottom: 24px;
  border-bottom: 1px solid rgba(194, 65, 12, .1);
  padding-bottom: 20px;
}
.modal-room-subtitle {
  font-family: 'Outfit', sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 4px;
}
.modal-room-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(24px, 4vw, 38px);
  font-weight: 300;
  color: var(--t1);
}

.modal-room-desc {
  font-family: 'Outfit', sans-serif;
  font-size: 14px;
  font-weight: 300;
  line-height: 1.8;
  color: var(--t2);
  margin-bottom: 28px;
}

.features-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px;
  font-weight: 400;
  color: var(--t1);
  margin-bottom: 16px;
}
.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
  margin-bottom: 32px;
}
.feat-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--dk3);
  border-radius: 6px;
  border: 1px solid rgba(194, 65, 12, .08);
}
.feat-chip svg {
  width: 15px;
  height: 15px;
  stroke: var(--gold);
  flex-shrink: 0;
}
.feat-chip span {
  font-family: 'Outfit', sans-serif;
  font-size: 12px;
  font-weight: 300;
  color: var(--t2);
}

/* Categorized Technical Specs (Hotels.com Style) */
.tech-specs-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 16px;
  margin-bottom: 32px;
}
.tech-spec-group {
  background: var(--dk3);
  border: 1px solid rgba(194, 65, 12, .14);
  border-radius: 10px;
  padding: 16px 18px;
}
.tech-spec-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(194, 65, 12, .15);
}
.tech-spec-header svg {
  width: 18px;
  height: 18px;
  stroke: var(--gold);
  flex-shrink: 0;
}
.tech-spec-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 17px;
  font-weight: 500;
  color: var(--t1);
}
.tech-spec-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin: 0;
  padding: 0;
}
.tech-spec-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Outfit', sans-serif;
  font-size: 12px;
  font-weight: 300;
  color: var(--t2);
}
.tech-spec-list li::before {
  content: '•';
  color: var(--gold);
  font-size: 14px;
  line-height: 1;
}

.modal-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
}
.btn-book-wa {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 13px;
  color: #fff;
  background: linear-gradient(135deg, #C2410C, #EA580C);
  border: none;
  border-radius: 999px;
  padding: 14px 28px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 8px 24px rgba(194, 65, 12, .3);
  transition: transform .2s, box-shadow .3s;
  text-decoration: none;
}
.btn-book-wa:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(194, 65, 12, .4);
}
.btn-book-wa svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
}

/* RESPONSIVE MODAL OVERRIDES */
@media (max-width: 640px) {
  .idx-modal-overlay, .modal-overlay {
    padding: 10px;
  }
  .idx-modal-box, .modal-box {
    max-height: 94vh;
    border-radius: 12px;
  }
  .gallery-viewer {
    height: 210px;
  }
  .gallery-nav-btn {
    width: 36px;
    height: 36px;
  }
  .g-prev { left: 10px; }
  .g-next { right: 10px; }
  .gallery-counter {
    bottom: 10px;
    right: 10px;
    font-size: 10px;
    padding: 3px 10px;
  }
  .gallery-thumbs {
    padding: 8px 12px;
    gap: 6px;
  }
  .thumb-item {
    width: 52px;
    height: 38px;
  }
  .modal-body-padding {
    padding: 18px 14px;
  }
  .modal-room-header {
    margin-bottom: 18px;
    padding-bottom: 14px;
  }
  .modal-room-desc {
    font-size: 13px;
    margin-bottom: 20px;
  }
  .tech-specs-container {
    grid-template-columns: 1fr;
    gap: 12px;
    margin-bottom: 24px;
  }
  .tech-spec-group {
    padding: 14px;
  }
  .features-grid {
    grid-template-columns: 1fr;
    gap: 8px;
    margin-bottom: 24px;
  }
  .btn-book-wa {
    width: 100%;
    justify-content: center;
    padding: 14px 20px;
  }
}

/* FOOTER */
footer{background:var(--dk2);padding:40px clamp(20px,6vw,80px);border-top:1px solid rgba(194,65,12,.08);text-align:center}
.footer-text{font-family:'Outfit',sans-serif;font-size:11px;font-weight:300;color:var(--t3)}