:root{
  --bg-dark: #050816;
  --gold: #d4af37;
  --gold-2: #ffcf40;
  --gold-accent: #ffd980;
  --glass: rgba(255,255,255,0.04);
  --glass-strong: rgba(255,255,255,0.08);
  --muted: rgba(255,255,255,0.65);
  --card-bg: rgba(255,255,255,0.06);
  --black-opaque: rgba(0,0,0,0.45);
}

/* ----------------------------
   Global
   ---------------------------- */
body { margin:0; font-family: Poppins, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; background:var(--bg-dark); color:#fff; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
img { max-width:100%; display:block; }

/* ----------------------------
   Category image + overlay
   ---------------------------- */
.category-img-wrap { position:relative; overflow:hidden; border-radius:10px; cursor:pointer; }
.category-img-wrap img { width:100%; transition:transform .6s ease; display:block; }
.category-img-wrap:hover img { transform:scale(1.08); }

.room-overlay {
  position:absolute; left:0; bottom:-100%; width:100%; height:100%;
  background:linear-gradient(to top, rgba(0,0,0,0.65), rgba(0,0,0,0.25));
  display:flex; flex-direction:column; justify-content:flex-end; align-items:center;
  padding:22px 20px; text-align:center; transition:bottom .45s ease-out;
}
.category-img-wrap:hover .room-overlay { bottom:0; }

.room-overlay h4 { color:var(--gold-accent); font-size:1.3rem; margin-bottom:14px; text-shadow:0 2px 8px rgba(0,0,0,0.6); }

/* Overlay buttons */
.overlay-buttons { display:flex; flex-direction:column; gap:8px; width:100%; max-width:180px; }
.overlay-btn {
  background: rgba(255,215,0,0.12); color:var(--gold-accent); padding:8px 12px;
  border:1px solid rgba(255,215,0,0.45); border-radius:8px; font-size:.9rem; text-decoration:none;
  transition:.3s; display:block; text-align:center;
}
.overlay-btn:hover { background: rgba(255,215,0,0.22); border-color: #ffd700; color:#fff; cursor:default; }
.overlay-btn.disabled { opacity:.6; cursor:not-allowed; pointer-events:none; }

/* ----------------------------
   Modal (gold + sb modals consolidated)
   ---------------------------- */
.gold-modal, .sb-modal {
  position:fixed; inset:0; background:rgba(0,0,0,0.75); backdrop-filter: blur(6px);
  display:none; justify-content:center; align-items:center; z-index:999999; padding:20px; overflow-y:auto;
}
.gold-modal.show, .sb-modal.show { display:flex; }

.gold-modal-box, .sb-modal-content {
  background: #111; color:#fff; width:100%; max-width:650px; border-radius:12px;
  padding:20px 25px; border:1px solid rgba(212,175,55,0.35);
  box-shadow:0 0 28px rgba(212,175,55,0.25); animation:goldPop .35s ease;
  max-height:92vh; overflow-y:auto; position:relative;
}

/* Shared modal title + close */
.gold-modal-title, .sb-title { text-align:center; font-size:1.6rem; font-weight:700; color:var(--gold-accent); margin-bottom:18px; }
.gold-modal-close, .sb-close-btn {
  position:absolute; right:15px; top:12px; background:var(--gold); color:#000; width:34px; height:34px;
  border-radius:50%; border:none; font-size:18px; cursor:pointer; display:flex; align-items:center; justify-content:center; z-index:99;
}

/* Modal grid/forms */
.gold-grid, .sb-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.gold-full, .sb-full { grid-column:span 2; }

.gold-field, .sb-field { display:flex; flex-direction:column; }
.gold-field label, .sb-field label { font-size:.85rem; color:#ffe7b8; margin-bottom:4px; display:block; }
.gold-field input, .gold-field select, .gold-field textarea,
.sb-field input, .sb-field select, .sb-field textarea {
  width:100%; background:var(--glass-strong); border:1px solid rgba(212,175,55,0.45); padding:10px; border-radius:8px; color:#fff; font-size:1rem;
}
.gold-field input:focus, .gold-field select:focus, .gold-field textarea:focus,
.sb-field input:focus, .sb-field select:focus, .sb-field textarea:focus {
  border-color:var(--gold); box-shadow:0 0 6px rgba(255,215,0,0.35); outline:none;
}

/* Steps indicator */
.gold-steps-indicator { display:flex; gap:8px; margin-bottom:12px; }
.step-item { padding:8px 12px; border-radius:8px; background:rgba(255,255,255,0.03); color:#fff; font-weight:600; font-size:.9rem; }
.step-item.active { background:linear-gradient(90deg,var(--gold),var(--gold-2)); color:#000; box-shadow:0 6px 18px rgba(212,175,55,0.12); }

/* Buttons */
.gold-submit-btn, .sb-submit-btn {
  margin-top:20px; width:100%; padding:12px; font-size:1.05rem; background:linear-gradient(90deg,var(--gold),var(--gold-2));
  border:none; color:#000; font-weight:700; border-radius:10px; cursor:pointer; transition:transform .15s ease;
}
.gold-submit-btn:hover, .sb-submit-btn:hover { transform:translateY(-2px); opacity:.98; }

/* ----------------------------
   Slider / overlay (lux-slider)
   ---------------------------- */
.lux-slider { width:100%; height:88vh; position:relative; overflow:hidden; border-bottom:4px solid rgba(212,160,23,0.33); }
.lux-slide { position:absolute; inset:0; background-size:cover; background-position:center; opacity:0; transform:scale(1.1); transition:opacity 1.4s ease, transform 6s ease; }
.lux-slide.active { opacity:1; transform:scale(1); }
.lux-overlay {
  position:absolute; bottom:30%; left:50%; transform:translateX(-50%); text-align:center; padding:14px 20px; background:rgba(0,0,0,0.38);
  backdrop-filter:blur(4px); border-radius:10px; color:#fff; width:min(92%,720px); box-sizing:border-box;
}
.lux-overlay h1 { font-size:clamp(1.25rem,3.6vw,2.8rem); font-weight:700; margin-bottom:8px;
  background:linear-gradient(90deg,#f9e090,#ffd35f,#f5c341); -webkit-background-clip:text; -webkit-text-fill-color:transparent; text-shadow:0 2px 8px rgba(0,0,0,0.65);
}
.lux-overlay p { font-size:clamp(.9rem,2.4vw,1.2rem); background:linear-gradient(90deg,#ffeec7,#ffda8f); -webkit-background-clip:text; -webkit-text-fill-color:transparent; text-shadow:0 2px 6px rgba(0,0,0,0.6); }
.lux-overlay h1::after, .lux-overlay p::after {
  content:""; position:absolute; top:0; width:60%; height:100%; left:-100%; background:linear-gradient(120deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.35) 50%, rgba(255,255,255,0) 100%); animation:sliderTextShimmer 4s infinite;
}

/* arrows, dots */
.lux-arrow { position:absolute; top:50%; transform:translateY(-50%); font-size:40px; color:#fff; padding:8px 16px; cursor:pointer; z-index:20; transition:.3s; user-select:none; }
.lux-arrow.left { left:20px; } .lux-arrow.right { right:20px; }
.lux-dots { position:absolute; bottom:20px; left:50%; transform:translateX(-50%); display:flex; gap:8px; }
.lux-dots span { width:12px; height:12px; background:#ffffff70; border-radius:50%; cursor:pointer; transition:.3s; }
.lux-dots span.active { background:var(--gold); transform:scale(1.3); }

/* ----------------------------
   Booking bar
   ---------------------------- */
.booking-bar {
  position:absolute; bottom:5%; left:16%; transform:translateX(-50%); width:85%; max-width:900px;
  background: rgba(0,0,0,0.45); backdrop-filter:blur(8px); padding:18px 25px; border-radius:16px;
  border:1px solid rgba(255,215,0,0.35); box-shadow:0 8px 30px rgba(0,0,0,0.4); animation:fadeUp 1.6s ease forwards;
}
.booking-form { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; align-items:end; }
.booking-field { display:flex; flex-direction:column; color:#fff; font-size:.9rem; }
.booking-field label { margin-bottom:5px; font-weight:600; letter-spacing:.5px; }
.booking-field input, .booking-field select {
  width:100%; padding:10px 14px; border-radius:10px; border:1px solid rgba(255,215,0,0.4); background:rgba(15,15,15,0.55); color:#fff; font-size:.95rem; outline:none;
}
.booking-field input:focus, .booking-field select:focus { border-color:var(--gold); box-shadow:0 6px 18px rgba(212,175,55,0.06); }
.booking-btn { width:100%; padding:12px; border-radius:12px; background:linear-gradient(90deg,#d4a017,#ffcf40); color:#000; font-weight:700; font-size:.95rem; border:none; cursor:pointer; transition:.3s; }
.booking-btn:hover { background:linear-gradient(90deg,#ffcf40,#d4a017); transform:translateY(-2px); }

/* ----------------------------
   Services section
   ---------------------------- */
.services-section { padding:70px 0; background:var(--bg-dark); color:#fff; }
.services-header { text-align:center; margin-bottom:40px; }
.services-header h2 { font-size:2.6rem; color:var(--gold); font-weight:700; }
.services-header p { font-size:1.1rem; color:#e2e2e2; }
.services-header .gold-line { width:60px; height:3px; background:linear-gradient(90deg,var(--gold),var(--gold-2)); display:inline-block; margin-top:12px; border-radius:10px; }
.services-grid {
  width:92%; max-width:1250px; margin:auto; display:grid; grid-template-columns:repeat(3,1fr); gap:25px;
}
.service-box {
  background:var(--card-bg); border:1px solid rgba(255,215,0,0.25); padding:28px 20px; border-radius:14px; text-align:center; transition:.3s; cursor:default;
}
.service-box:hover { transform:translateY(-6px); border-color:var(--gold); box-shadow:0 8px 25px rgba(255,215,0,0.15); }
.service-icon { width:65px; height:65px; border-radius:50%; background:rgba(255,215,0,0.15); display:flex; align-items:center; justify-content:center; margin:0 auto 15px; }
.service-icon i { font-size:28px; color:var(--gold); }
.service-box h3 { margin-top:5px; font-size:1.15rem; font-weight:600; color:#fff; }

/* ----------------------------
   Popup / small modals (sb modal merged)
   ---------------------------- */
.sb-modal { /* merged above */ }
.sb-modal-content { /* merged above */ }
.sb-title { color:#3d2b07; font-size:1.7rem; margin-bottom:18px; font-weight:700; }
.sb-field input, .sb-field select, .sb-field textarea { background:#fff7db; border:1px solid #c49e41; color:#000; border-radius:4px; padding:9px; font-size:.9rem; }
.sb-submit-btn { margin-top:15px; width:160px; background:#7d541c; color:#fff; padding:10px; font-size:1rem; border-radius:4px; border:none; cursor:pointer; }

/* ----------------------------
   Sticky bottom bar
   ---------------------------- */
.bottom-sticky-bar {
  position:fixed; bottom:0; left:0; width:100%; padding:12px 0; background:#1a1a1a; color:#fff; font-size:15px;
  display:flex; align-items:center; gap:8px; z-index:99999; border-top:2px solid var(--gold); box-shadow:0 -4px 14px rgba(255,215,0,0.45); animation:glowPulse 3s infinite alternate;
}
@keyframes glowPulse { 0%{box-shadow:0 -4px 14px rgba(255,215,0,0.35)} 100%{box-shadow:0 -4px 30px rgba(255,215,0,0.7)} }
.sticky-icon { margin-left:15px; font-size:20px; color:var(--gold); z-index:20; }
.scroll-container { width:100%; overflow:hidden; white-space:nowrap; position:relative; padding:0 40px; }
.scroll-text { display:inline-block; padding-left:100%; animation:scrollText 18s linear infinite; font-weight:500; color:#ffeec7; }
.scroll-text a { color:var(--gold); font-weight:700; text-decoration:underline; }
@keyframes scrollText { 0%{transform:translateX(0)} 100%{transform:translateX(-100%)} }
.shimmer-text { position:relative; display:inline-block; }
.shimmer-text::after { content:""; position:absolute; top:0; left:-100%; height:100%; width:60%; background:linear-gradient(120deg, rgba(255,215,0,0) 0%, rgba(255,215,0,0.35) 50%, rgba(255,215,0,0) 100%); animation:shimmerMove 3s infinite; }
@keyframes shimmerMove { 0%{left:-100%} 60%{left:120%} 100%{left:120%} }
.sticky-close { position:absolute; right:12px; font-size:22px; cursor:pointer; font-weight:bold; color:var(--gold); }
.sticky-close:hover { color:#fff; }

/* ----------------------------
   Misc animations (merged)
   ---------------------------- */
@keyframes goldPop { from{transform:scale(.9);opacity:0} to{transform:scale(1);opacity:1} }
@keyframes sliderTextShimmer { 0%{left:-100%} 60%{left:120%} 100%{left:120%} }
@keyframes fadeUp { from{opacity:0; transform:translate(-50%,20px)} to{opacity:1; transform:translate(-50%,0)} }

/* ----------------------------
   Utility buttons
   ---------------------------- */
.gold-btn { background:#000; color:var(--gold); border:2px solid var(--gold); padding:10px 18px; font-weight:700; border-radius:8px; cursor:pointer; width:100%; }
.close-btn { margin-top:10px;margin-left:12px; background:gold; border:none; color:#fff; cursor:pointer; text-decoration:none; }

/* ----------------------------
   Accessibility & small helpers
   ---------------------------- */
.small-muted { color:#cfcfcf; font-size:.9rem; }
.section-padding { padding:50px 0; }

/* ----------------------------
   Responsive breakpoints (merged)

   ---------------------------- */
   #pwaInstallBox {
  position: fixed;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: none;
  z-index: 9999;
}

.pwa-popup {
  background: linear-gradient(145deg, #d4af37, #a67c00);
  padding: 20px 25px;
  border-radius: 15px;
  color: #fff;
  width: 280px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.4);
  text-align: center;
  animation: slideUp 0.5s ease-out;
}
/*  view more modal css*/
.view-btn{
     background: rgba(255,215,0,0.12); color:var(--gold-accent); padding:8px 12px;
  border:1px solid rgba(255,215,0,0.45); border-radius:8px; font-size:.9rem; text-decoration:none;
  transition:.3s; display:block; text-align:center;
}
/* Modal Wrapper */
#roomInfoPopup.sb-modal {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.85);
    backdrop-filter: blur(4px);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 99999;
}

/* Popup Box */
#roomInfoPopup .sb-modal-content.large {
    width: 90%;
    max-width: 900px;
    background: linear-gradient(180deg, rgba(25,25,25,0.96), rgba(5,5,5,0.92));
    padding: 28px;
    border-radius: 18px;
    border: 1px solid rgba(212,175,55,0.55);
    box-shadow: 0 0 25px rgba(212,175,55,0.35);
    animation: fadeUp .35s ease;
    transition: transform .35s ease, box-shadow .35s ease;
}

/* Hover: Popup glows & floats a bit */
#roomInfoPopup .sb-modal-content.large:hover {
    transform: translateY(-3px);
    box-shadow: 0 0 35px rgba(212,175,55,0.55);
}

/* Close Button */
#roomInfoPopup .sb-close-btn {
    background: rgba(212,175,55,0.18);
    border: 1px solid rgba(212,175,55,0.4);
    color: #ffdf8c;
    font-size: 22px;
    padding: 6px 12px;
    border-radius: 8px;
    transition: .3s;
}

/* Close button hover – classy gold glow */
#roomInfoPopup .sb-close-btn:hover {
    background: rgba(212,175,55,0.4);
    border-color: rgba(255,220,130,0.85);
    box-shadow: 0 0 10px rgba(212,175,55,0.75);
    transform: scale(1.08);
}

/* Tabs Container */
.sb-tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 18px;
    overflow-x: auto;
    padding-bottom: 6px;
}

/* Tab buttons */
.sb-tab {
    padding: 10px 18px;
    background: rgba(255,255,255,0.08);
    border-radius: 10px;
    color: #ffd77a;
    border: 1px solid rgba(212,175,55,0.3);
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: all .28s ease;
}

/* Classy hover effect for tabs */
.sb-tab:hover {
    background: rgba(212,175,55,0.18);
    color: #fff7d0;
    border-color: rgba(255,230,140,0.85);
    box-shadow: 0 0 12px rgba(212,175,55,0.35);
    transform: translateY(-2px);
}

/* Active tab style */
.sb-tab.active {
    background: linear-gradient(90deg, rgba(212,175,55,0.35), rgba(180,140,30,0.35));
    border-color: rgba(255,240,150,1);
    color: #ffffff;
    box-shadow: 0 0 14px rgba(212,175,55,0.45);
}

/* Tab content */
.sb-tab-content {
    display: none;
    color: #f2f2f2;
    line-height: 1.75;
    padding: 5px 2px;
}

.sb-tab-content.active {
    display: block;
    animation: fadeIn .45s;
}

/* Animations */
@keyframes fadeUp {
    from { transform: translateY(20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}


@keyframes fadeUp {
    from { transform: translateY(20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

@keyframes fadeIn {
    from{ opacity: 0; }
    to{ opacity: 1; }
}




/*end view more*/
@media (max-width: 1024px) {
  .services-grid { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 900px) {
  .grid { gap:8px; }
  .day { min-height:120px; }
}
@media (max-width: 850px) {
  .booking-form { grid-template-columns:1fr 1fr; }
}
@media (max-width: 768px) {
  .gold-grid, .sb-grid { grid-template-columns:1fr; }
  .sb-modal-content, .gold-modal-box { max-width:95%; padding:20px; }
  .sb-full, .gold-full { grid-column:1; }
  .sb-title, .gold-modal-title { font-size:1.4rem; text-align:center; }
  .category-img-wrap.active-overlay .room-overlay { bottom:0; opacity:1; visibility:visible; }
}
@media (max-width: 600px) {
  .services-grid { grid-template-columns:1fr; }
  .scroll-text { font-size:13px; }
  .sticky-icon { font-size:18px; }
  .fade-left, .fade-right { width:50px; }
}
@media (max-width: 520px) {
  .lux-slider { height:55vh; }
  .lux-overlay { bottom:28%; padding:12px 14px; border-radius:12px; width:min(94%,520px); }
  .lux-overlay h1 { font-size:clamp(1.05rem,4.5vw,1.6rem); line-height:1.12; }
  .lux-arrow { font-size:28px; }
}
@media (max-width: 480px) {
  .gold-modal-box { max-width:92%; padding:16px; }
  .gold-modal-close { right:8px; top:8px; }
  .booking-bar{display:none;}
}