/* ================================================================
   style.css — Krishna Palace Heritage Hotel, Jaipur
   Theme: White · Beige · Maroon · Heritage Gold
   SEO Focus: Jaipur Hotels | Heritage Hotels Jaipur | Budget Hotels Jaipur
================================================================ */

/* ---------- Google Fonts ---------- */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Nunito+Sans:opsz,wght@6..12,300;6..12,400;6..12,500;6..12,600&display=swap');

/* ---------- CSS Variables ---------- */
:root {
  --maroon:        #6B1A2A;
  --maroon-dark:   #4A0F1D;
  --maroon-hover:  #8B2539;
  --gold:          #d1bf8d;
  --gold-light:    #e2d5b3;
  --beige:         #F5EFE6;
  --beige-dark:    #E8DDD0;
  --beige-mid:     #EDE5D8;
  --white:         #FFFFFF;
  --off-white:     #FDFAF7;
  --dark:          #1C1C1C;
  --text:          #3A3A3A;
  --text-muted:    #6B6B6B;
  --border:        #DDD5C8;

  --font-heading: 'Playfair Display', Georgia, serif;
  --font-body:    'Nunito Sans', 'Helvetica Neue', Arial, sans-serif;

  --navbar-h:    80px;
  --section-pad: 80px;
  --radius:      4px;
  --shadow:      0 4px 20px rgba(0,0,0,0.10);
  --shadow-lg:   0 8px 40px rgba(0,0,0,0.15);
  --transition:  0.3s ease;
}

/* ---------- Reset & Base ---------- */
*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; overflow-x: hidden; width: 100%; }
body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.75;
  color: var(--text);
  background: var(--white);
  overflow-x: hidden;
  width: 100%;
}
img { max-width: 100%; height: auto; display: block; }
a  { text-decoration: none; color: inherit; }

/* ================================================================
   TYPOGRAPHY
================================================================ */
h1,h2,h3,h4,h5,h6 {
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: 1.25;
  color: var(--dark);
}

.section-label {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.5rem;
}

.section-title {
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  color: var(--dark);
  margin-bottom: 1rem;
}
.section-title.light { color: var(--white); }

.ornament { display: none; }

/* ================================================================
   BUTTONS
================================================================ */
.btn-maroon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  line-height: 1.2;
  background: var(--maroon);
  color: var(--white);
  border: 2px solid var(--maroon);
  padding: 0.65rem 1.8rem;
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  border-radius: var(--radius);
  transition: var(--transition);
  cursor: pointer;
}
.btn-maroon:hover {
  background: var(--maroon-dark);
  border-color: var(--maroon-dark);
  color: var(--white);
}

.btn-gold {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  line-height: 1.2;
  background: var(--gold);
  color: var(--dark);
  border: 2px solid var(--gold);
  padding: 0.65rem 1.8rem;
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  border-radius: var(--radius);
  transition: var(--transition);
  cursor: pointer;
}
.btn-gold:hover {
  background: var(--gold-light);
  border-color: var(--gold-light);
  color: var(--dark);
}

.btn-outline-white {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  line-height: 1.2;
  background: transparent;
  color: var(--white);
  border: 2px solid rgba(255,255,255,0.8);
  padding: 0.65rem 1.8rem;
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  border-radius: var(--radius);
  transition: var(--transition);
  cursor: pointer;
}
.btn-outline-white:hover {
  background: var(--white);
  color: var(--maroon);
  border-color: var(--white);
}

.btn-outline-maroon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  line-height: 1.2;
  background: transparent;
  color: var(--maroon);
  border: 2px solid var(--maroon);
  padding: 0.65rem 1.8rem;
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  border-radius: var(--radius);
  transition: var(--transition);
  cursor: pointer;
}
.btn-outline-maroon:hover {
  background: var(--maroon);
  color: var(--white);
}

/* ================================================================
   NAVBAR
================================================================ */
.site-navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  min-height: var(--navbar-h);
  background: transparent;
  transition: background var(--transition), box-shadow var(--transition);
  padding: 0;
  /* No transform/compositor-layer hack here anymore: a CSS transform on
     this element would make it the containing block for any
     position:fixed descendant, which breaks the mobile nav drawer below
     (.site-offcanvas is nested inside .site-navbar and needs position:fixed
     to be relative to the viewport, not to this navbar's own box). The
     old transform hack was only needed to stop this fixed header jumping
     when the old collapse menu expanded and grew the navbar's own height;
     the off-canvas drawer is an overlay that no longer changes this
     element's height, so that jump no longer happens. */
}
.site-navbar.scrolled {
  background: var(--maroon-dark);
  box-shadow: 0 2px 20px rgba(0,0,0,0.35);
}

.site-navbar .navbar-brand {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  /* Fixed-height logo row: keeps the logo/toggler from jumping up when the
     mobile menu opens and the navbar grows taller. */
  min-height: var(--navbar-h);
  justify-content: center;
  margin: 0;
  padding-top: 0;
  padding-bottom: 0;
}
.site-navbar .brand-name {
  font-family: var(--font-heading);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--white);
  letter-spacing: 0.5px;
}
.site-navbar .brand-tagline {
  font-size: 0.62rem;
  font-weight: 400;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--gold-light);
}

.site-navbar .nav-link {
  color: rgba(255,255,255,0.92) !important;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  padding: 0.5rem 0.85rem !important;
  position: relative;
  transition: color var(--transition);
}
.site-navbar .nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0.85rem;
  right: 0.85rem;
  height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--transition);
}
.site-navbar .nav-link:hover::after,
.site-navbar .nav-link.active::after { transform: scaleX(1); }
.site-navbar .nav-link:hover,
.site-navbar .nav-link.active { color: var(--white) !important; }

.navbar-toggler {
  border: 1px solid rgba(255,255,255,0.4);
  padding: 0.4rem 0.6rem;
}
.navbar-toggler:focus,
.navbar-toggler:active,
.navbar-toggler:focus-visible {
  outline: none;
  box-shadow: none;
}
.navbar-toggler-icon { filter: invert(1); }

@media (max-width: 991px) {
  .site-navbar { background: var(--maroon-dark); }
  .site-navbar .nav-link { padding: 0.75rem 0 !important; }
  .site-navbar .nav-link::after { display: none; }
}

/* ================================================================
   MOBILE NAV DRAWER (off-canvas, opens from the left). Bootstrap's
   .navbar-expand-lg + .offcanvas combo resets the shell itself
   (width/position/background/the header) back to a normal inline
   menu at the lg breakpoint, but it only resets properties IT sets -
   it doesn't know about our own .navbar-nav/.nav-item/.btn-maroon
   width overrides below, so those are wrapped in the same <991px
   query as the rest of the site's mobile nav rules to keep them
   from also applying to the desktop inline menu.
================================================================ */
.site-offcanvas {
  --bs-offcanvas-width: 300px;
  background: var(--maroon-dark);
  border-right: 1px solid rgba(255,255,255,0.08);
}
.site-offcanvas .offcanvas-header {
  padding: 1.5rem 1.5rem 1.25rem;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.site-offcanvas .offcanvas-title { margin: 0; line-height: 1.2; }
.site-offcanvas .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
  opacity: 0.75;
  transition: opacity var(--transition);
}
.site-offcanvas .btn-close:hover { opacity: 1; }

@media (max-width: 991px) {
  .site-offcanvas .offcanvas-body {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
  }
  .site-offcanvas .navbar-nav { width: 100%; }
  .site-offcanvas .nav-item { width: 100%; border-bottom: 1px solid rgba(255,255,255,0.08); }
  .site-offcanvas .nav-item:last-of-type { border-bottom: none; }
  .site-offcanvas .nav-item.ms-lg-2 {
    margin-top: 1.5rem;
    border-bottom: none;
  }
  .site-offcanvas .nav-item.ms-lg-2 .btn-maroon {
    display: flex;
    width: 100%;
  }
}

/* ================================================================
   HERO SLIDER (Homepage)
================================================================ */
.hero-slider {
  position: relative;
  height: 100vh;
  height: 100svh; /* stable on mobile when the address bar shows/hides */
  min-height: 620px;
  overflow: hidden;
}
.hero-slider .carousel,
.hero-slider .carousel-inner,
.hero-slider .carousel-item { height: 100%; }

.hero-slide-img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.48) 0%,
    rgba(0,0,0,0.38) 35%,
    rgba(0,0,0,0.52) 65%,
    rgba(0,0,0,0.78) 100%
  );
  pointer-events: none;
  transition: opacity 0.4s ease;
}
/* Same lighter-while-loading treatment as .page-hero above, dimming the
   overlay while the first slide's shimmer is running. */
.hero-slider:not(.shimmer-off) .hero-overlay {
  opacity: 0.45;
}

.hero-content {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem;
  padding-top: calc(var(--navbar-h) + 2rem);
  padding-bottom: 200px;
}

.hero-eyebrow {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--gold-light);
  text-shadow: 0 1px 10px rgba(0,0,0,0.65);
  margin-bottom: 1rem;
}

.hero-title {
  font-family: var(--font-heading);
  font-size: clamp(2.4rem, 6.5vw, 5rem);
  font-weight: 700;
  color: var(--white);
  text-shadow: 0 2px 24px rgba(0,0,0,0.6);
  margin-bottom: 1rem;
  line-height: 1.15;
}

.hero-sub {
  font-size: 1.05rem;
  color: rgba(255,255,255,0.92);
  text-shadow: 0 1px 12px rgba(0,0,0,0.55);
  max-width: 560px;
  margin: 0 auto 2rem;
}

.hero-btns { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; }

.carousel-indicators { bottom: 190px; }
.carousel-indicators [data-bs-target] {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.45);
  border: none;
  margin: 0 4px;
}
.carousel-indicators .active {
  background: var(--gold);
  width: 28px;
  border-radius: 4px;
}


@media (max-width: 991px) {
  .hero-content { padding-bottom: 2rem; }
  .carousel-indicators { bottom: 40px; }
}

/* ================================================================
   PAGE HERO (inner pages)
================================================================ */
.page-hero {
  position: relative;
  height: calc(380px + var(--navbar-h));
  overflow: hidden;
}
.page-hero img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
}
.page-hero .ph-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(120deg, rgba(74,15,29,0.80) 0%, rgba(0,0,0,0.30) 100%);
  display: flex;
  align-items: center;
  padding-top: var(--navbar-h);
  transition: opacity 0.4s ease;
}
/* While the hero photo is still loading (shimmering behind it), dim
   the dark overlay to a lighter wash so the shimmer actually reads as
   light rather than being muddied dark brown by the full-strength
   overlay; once the real photo lands, .shimmer-off brings the overlay
   back to full strength for text legibility against the photo. */
.page-hero:not(.shimmer-off) .ph-overlay {
  opacity: 0.4;
}
.page-hero-content { padding: 2rem 0; }
.page-hero h1 {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 5vw, 3.2rem);
  color: var(--white);
  font-weight: 700;
  text-shadow: 0 2px 12px rgba(0,0,0,0.3);
}
.page-hero .ph-sub {
  color: rgba(255,255,255,0.82);
  font-size: 1rem;
  margin-top: 0.6rem;
  max-width: 520px;
}

.breadcrumb-bar {
  background: var(--beige);
  border-bottom: 1px solid var(--border);
  padding: 0.8rem 0;
}
.breadcrumb { margin: 0; font-size: 0.82rem; }
.breadcrumb-item a { color: var(--maroon); }
.breadcrumb-item.active { color: var(--text-muted); }
.breadcrumb-item + .breadcrumb-item::before { color: var(--gold); content: '›'; }

@media (max-width: 767px) { .page-hero { height: calc(260px + var(--navbar-h)); } }

/* ================================================================
   SECTIONS
================================================================ */
.section-pad    { padding: var(--section-pad) 0; }
.section-pad-sm { padding: calc(var(--section-pad) * 0.6) 0; }

.bg-beige      { background: var(--beige); }
.bg-off-white  { background: var(--off-white); }
.bg-maroon     { background: var(--maroon); }
.bg-maroon-dark { background: var(--maroon-dark); }

.section-header { text-align: center; margin-bottom: 3rem; }
.section-header p {
  max-width: 620px;
  margin: 0.8rem auto 0;
  color: var(--text-muted);
  font-size: 0.95rem;
}

/* Gold divider ornament */
.gold-divider {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 0.8rem auto 1.4rem;
  max-width: 220px;
}
.gold-divider::before,
.gold-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--gold);
  opacity: 0.6;
}
.gold-divider i { color: var(--gold); font-size: 1rem; }

@media (min-width: 992px) {
  .gold-divider { margin-left: 0; margin-right: auto; }
}

/* ================================================================
   ABOUT SECTION (Homepage)
================================================================ */
.about-img-wrap {
  position: relative;
  padding-bottom: 1.5rem;
  padding-right: 1.5rem;
}
.about-img-wrap > img {
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
}
.about-img-frame {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 65%;
  height: 65%;
  border: 3px solid var(--gold);
  border-radius: var(--radius);
  opacity: 0.7;
  pointer-events: none;
}
.about-star-badge {
  position: absolute;
  top: -1.2rem;
  right: -0.5rem;
  background: var(--maroon);
  color: var(--white);
  width: 100px;
  height: 100px;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-shadow: var(--shadow);
  z-index: 2;
}
.about-star-badge .star-n {
  font-family: var(--font-heading);
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1;
  color: var(--gold);
}
.about-star-badge .star-t {
  font-size: 0.6rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  opacity: 0.85;
}

.about-check-list {
  list-style: none;
  padding: 0;
  margin: 1.2rem 0 1.8rem;
}
.about-check-list li {
  padding: 0.35rem 0;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  color: var(--text);
}
.about-check-list li i { color: var(--gold); flex-shrink: 0; }

/* ================================================================
   STORY HIGHLIGHTS (About section, full-width row below image/text)
================================================================ */
.story-highlights { margin-top: 2.5rem; }
.story-highlights > div {
  border-left: none;
}
.story-highlight-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  justify-content: flex-start;
  gap: 0.8rem;
  height: 100%;
  padding: 0.5rem 1.2rem;
}
.story-highlight-item .shi-icon {
  width: 2.3rem;
  height: 2.3rem;
  color: var(--maroon);
  flex-shrink: 0;
  transition: color var(--transition);
}
.story-highlight-item:hover .shi-icon {
  color: var(--gold);
}
.story-highlight-item span {
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--text);
}
@media (min-width: 768px) {
  .story-highlights > div:not(:first-child) {
    border-left: 1px solid var(--border);
  }
}
@media (max-width: 767px) {
  .story-highlights { margin-top: 1.8rem; }
  .story-highlights > div:nth-child(even) {
    border-left: 1px solid var(--border);
  }
  .story-highlight-item { padding: 0.5rem 0.8rem; gap: 0.6rem; }
  .story-highlight-item .shi-icon { width: 1.9rem; height: 1.9rem; }
}

/* ================================================================
   STATS STRIP
================================================================ */
.stats-strip {
  background: var(--maroon);
  padding: 2.5rem 0;
}
.stat-item {
  text-align: center;
  padding: 0.5rem 1rem;
  border-right: 1px solid rgba(255,255,255,0.15);
}
.stat-item:last-child { border-right: none; }
.stat-num {
  font-family: var(--font-heading);
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--gold);
  line-height: 1;
  margin-bottom: 0.3rem;
}
.stat-label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.8);
}

/* ================================================================
   ROOM CARDS (home page teaser — card shell shared with
   .room-rate-card/.room-rate-body/.amenity-tag, defined under
   RESERVATION PAGE below)
================================================================ */
.room-card-img {
  position: relative;
  height: 200px;
  overflow: hidden;
  flex-shrink: 0;
}
.room-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.55s ease, opacity 0.6s ease; /* + opacity fade-in */
}
.room-rate-card:hover .room-card-img img { transform: scale(1.06); }

.room-card-ribbon {
  position: absolute;
  top: 1rem;
  left: 1rem;
  background: var(--maroon);
  color: var(--white);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 0.22rem 0.7rem;
  border-radius: 2px;
}

.room-card-foot {
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--beige-dark);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}

/* ================================================================
   AMENITIES STRIP
================================================================ */
.amenities-strip {
  background: var(--maroon-dark);
  padding: 2.8rem 0;
}
.amenity-item { text-align: center; padding: 0.5rem 0.5rem; }
.amenity-item i {
  font-size: 1.9rem;
  color: var(--gold);
  margin-bottom: 0.75rem;
  display: block;
}
.amenity-item span {
  font-size: 0.73rem;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.82);
  display: block;
}

/* ================================================================
   GALLERY GRID (Homepage 5-cell teaser)
================================================================ */
.gallery-teaser {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  grid-template-rows: 220px 220px;
  gap: 6px;
  border-radius: var(--radius);
  overflow: hidden;
}
.gallery-teaser .gt-item {
  position: relative;
  overflow: hidden;
}
.gallery-teaser .gt-item:first-child {
  grid-row: 1 / 3;
}
.gallery-teaser .gt-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease, opacity 0.6s ease; /* + opacity fade-in */
}
.gallery-teaser .gt-item:hover img { transform: scale(1.07); }
.gallery-teaser .gt-overlay { display: none; }

@media (max-width: 768px) {
  .gallery-teaser {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 160px 160px 160px;
  }
  .gallery-teaser .gt-item:first-child { grid-row: auto; }
}

/* ================================================================
   FULL GALLERY PAGE
================================================================ */
.gallery-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  margin-bottom: 2.2rem;
}
.filter-btn {
  background: var(--beige);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 0.4rem 1.3rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  border-radius: 2px;
  cursor: pointer;
  transition: var(--transition);
}
.filter-btn.active,
.filter-btn:hover {
  background: var(--maroon);
  border-color: var(--maroon);
  color: var(--white);
}

.gal-grid {
  columns: 3 280px;
  column-gap: 8px;
}
.gal-item {
  break-inside: avoid;
  margin-bottom: 8px;
  position: relative;
  overflow: hidden;
  border-radius: 2px;
  cursor: pointer;
  display: block;
}
.gal-item img {
  width: 100%;
  display: block;
  transition: transform 0.5s ease, opacity 0.6s ease; /* + opacity fade-in */
}
.gal-item:hover img { transform: scale(1.04); }
.gal-item .gal-cap { display: none; }

/* ================================================================
   ROOMS DETAIL PAGE
================================================================ */
.room-detail-section { padding: 5rem 0; background: var(--white); }
.room-detail-section.bg-beige { background: var(--beige); }

.room-carousel { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-lg); }
.room-carousel .carousel-item img { height: 420px; object-fit: cover; width: 100%; }
.room-carousel .carousel-control-prev,
.room-carousel .carousel-control-next {
  width: 40px;
  height: 40px;
  background: rgba(74,15,29,0.65);
  border-radius: 50%;
  top: 50%;
  transform: translateY(-50%);
  margin: 0 0.75rem;
  opacity: 1;
}
.room-carousel .carousel-control-prev { left: 0.5rem; }
.room-carousel .carousel-control-next { right: 0.5rem; }

.room-detail-title {
  font-size: clamp(1.7rem, 3.5vw, 2.3rem);
  color: var(--maroon);
  margin-bottom: 0.5rem;
}
.room-feature-list {
  list-style: none;
  padding: 0;
  margin: 1.2rem 0 1.8rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem 1rem;
}
.room-feature-list li {
  font-size: 0.875rem;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 0.55rem;
}
.room-feature-list li i { color: var(--gold); font-size: 0.8rem; flex-shrink: 0; }

@media (max-width: 767px) {
  .room-feature-list { grid-template-columns: 1fr; }
  .room-carousel .carousel-item img { height: 260px; }
}

/* ================================================================
   FACILITIES PAGE (card shell matches home page's room-rate-card —
   white bg, bordered, rounded corners, hover shadow; icon moved
   inline into the body instead of overlaying the image)
================================================================ */
.facility-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  transition: box-shadow 0.3s;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.facility-card:hover {
  box-shadow: 0 8px 25px rgba(107,26,42,0.1);
}
.facility-img-wrap {
  display: block;
  flex-shrink: 0;
  line-height: 0;
  cursor: pointer;
}
.facility-card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  transition: transform 0.55s ease, opacity 0.6s ease; /* + opacity fade-in */
  flex-shrink: 0;
}
.facility-card:hover img { transform: scale(1.06); }
.facility-card-body {
  padding: 1.4rem;
  flex: 1;
}
.facility-card-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--beige);
  border: 2px solid var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
  transition: background var(--transition);
}
.facility-card-icon i { color: var(--maroon); transition: color var(--transition); }
.facility-card:hover .facility-card-icon { background: var(--maroon); }
.facility-card:hover .facility-card-icon i { color: var(--gold); }
.facility-card-body h3 {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  color: var(--maroon);
  margin-bottom: 0.4rem;
}
.facility-card-body p {
  font-size: 0.85rem;
  color: #666;
  margin: 0;
}

/* ================================================================
   CONTACT PAGE
================================================================ */
.contact-info-card {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.4rem;
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  margin-bottom: 1rem;
  border-left: 3px solid var(--gold);
}
.contact-info-card .ci-icon {
  width: 44px;
  height: 44px;
  background: var(--maroon);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.contact-info-card .ci-icon i { color: var(--gold); font-size: 1rem; }
.contact-info-card h5 {
  font-family: var(--font-body);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--gold);
  font-weight: 700;
  margin-bottom: 0.2rem;
}
.contact-info-card p,
.contact-info-card a { color: var(--text); font-size: 0.9rem; margin: 0; }

.contact-form .form-control,
.contact-form textarea.form-control {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.65rem 1rem;
  font-size: 0.9rem;
  background: var(--off-white);
  transition: border-color var(--transition);
}
.contact-form .form-control:focus {
  border-color: var(--maroon);
  box-shadow: 0 0 0 0.18rem rgba(107,26,42,0.12);
}
.contact-form label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.35rem;
}
.contact-form .btn-submit {
  background: var(--maroon);
  color: var(--white);
  border: none;
  padding: 0.75rem 2.5rem;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  border-radius: var(--radius);
  transition: background var(--transition);
  cursor: pointer;
}
.contact-form .btn-submit:hover { background: var(--maroon-dark); }

.map-wrap { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.map-wrap iframe { display: block; width: 100%; height: 420px; border: none; }

/* ================================================================
   TESTIMONIALS — carousel (3-up desktop / 2-up tablet / 1-up mobile)
================================================================ */
.testimonial-carousel { position: relative; padding: 0 3.25rem; }
.testimonial-viewport {
  /* Only clip horizontally (to hide off-screen slides) - clipping the
     vertical axis too would slice off each card's own box-shadow along
     its bottom edge, since the viewport's height has no vertical slack
     beyond the tallest card. */
  overflow-x: hidden;
  overflow-y: visible;
  /* A little vertical breathing room so the shadow has space to render
     above/below the cards instead of visually touching neighbouring
     sections. */
  padding: 6px 0 24px;
  margin: -6px 0 -24px;
}
.testimonial-track {
  display: flex;
  transition: transform 0.5s ease;
}
.testimonial-slide {
  flex: 0 0 33.3333%;
  max-width: 33.3333%;
  padding: 0 0.75rem;
  display: flex;
}
@media (max-width: 991px) {
  .testimonial-slide { flex: 0 0 50%; max-width: 50%; }
}
@media (max-width: 575px) {
  .testimonial-slide { flex: 0 0 100%; max-width: 100%; padding: 0; }
}

.testimonial-card {
  background: var(--white);
  border-radius: var(--radius);
  padding: 2rem;
  box-shadow: var(--shadow);
  border-top: 3px solid var(--gold);
  width: 100%;
}
.test-stars { color: var(--gold); margin-bottom: 1rem; font-size: 0.9rem; }
.test-text {
  font-style: italic;
  color: var(--text);
  font-size: 0.92rem;
  line-height: 1.7;
  margin-bottom: 1.3rem;
}
.test-author { font-weight: 700; font-size: 0.85rem; color: var(--dark); }
.test-place  { font-size: 0.75rem; color: var(--text-muted); }

.test-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--white);
  color: var(--maroon);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  cursor: pointer;
  box-shadow: var(--shadow);
  transition: background var(--transition), color var(--transition), border-color var(--transition);
  z-index: 2;
}
.test-nav-btn:hover { background: var(--maroon); color: var(--white); border-color: var(--maroon); }
.test-nav-prev { left: 0; }
.test-nav-next { right: 0; }

.testimonial-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.75rem;
}
.testimonial-dots button {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: none;
  background: var(--border);
  padding: 0;
  cursor: pointer;
  transition: background var(--transition), transform var(--transition);
}
.testimonial-dots button.active {
  background: var(--gold);
  transform: scale(1.35);
}

@media (max-width: 575px) {
  /* Narrower side reserve + overlapping arrow buttons so the card itself
     gets most of the screen width on mobile. */
  .testimonial-carousel { padding: 0 1.1rem; }
  .testimonial-card { padding: 1.75rem 1.375rem; }
  .test-nav-btn {
    width: 32px;
    height: 32px;
    font-size: 0.8rem;
    background: rgba(255,255,255,0.95);
  }
  .test-nav-prev { left: -6px; }
  .test-nav-next { right: -6px; }
}

/* ================================================================
   CTA SECTION
================================================================ */
.cta-section {
  background: linear-gradient(135deg, var(--maroon-dark) 0%, var(--maroon) 100%);
  padding: 5rem 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-section::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -15%;
  width: 45%;
  height: 200%;
  background: rgba(201,168,76,0.05);
  transform: rotate(-15deg);
  pointer-events: none;
}
.cta-section h2 { color: var(--white); font-size: clamp(1.8rem, 4vw, 2.7rem); }
.cta-section p  { color: rgba(255,255,255,0.8); max-width: 520px; margin: 1rem auto 2rem; }

/* ================================================================
   WHY CHOOSE US
================================================================ */
.why-card {
  text-align: center;
  padding: 2rem 1.5rem;
}
.why-icon {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: var(--beige);
  border: 2px solid var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.2rem;
  transition: background var(--transition);
}
.why-icon i { font-size: 1.6rem; color: var(--maroon); transition: color var(--transition); }
.why-card:hover .why-icon { background: var(--maroon); }
.why-card:hover .why-icon i { color: var(--gold); }
.why-card h4 { font-size: 1.1rem; color: var(--dark); margin-bottom: 0.6rem; }
.why-card p  { font-size: 0.875rem; color: var(--text-muted); margin: 0; }

/* ================================================================
   WHATSAPP FLOAT
================================================================ */
.whatsapp-float {
  position: fixed;
  bottom: 28px;
  left: 28px;
  z-index: 999;
  width: 58px;
  height: 58px;
  background: #25D366;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 18px rgba(37,211,102,0.5);
  transition: transform var(--transition), box-shadow var(--transition);
  text-decoration: none;
}
.whatsapp-float:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 28px rgba(37,211,102,0.6);
}
.whatsapp-float i { color: var(--white); font-size: 1.7rem; }
.whatsapp-float::before {
  content: 'Chat with us';
  position: absolute;
  left: calc(100% + 14px);
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.75);
  color: var(--white);
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.3rem 0.75rem;
  border-radius: 3px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition);
}
.whatsapp-float:hover::before { opacity: 1; }

/* ================================================================
   FOOTER
================================================================ */
.site-footer {
  background: #0D0D0D;
  color: rgba(255,255,255,0.72);
  padding-top: 5rem;
}

.footer-brand-name {
  font-family: var(--font-heading);
  font-size: 1.55rem;
  color: var(--white);
  font-weight: 700;
}
.footer-brand-sub {
  font-size: 0.67rem;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.2rem;
}
.site-footer p { font-size: 0.875rem; line-height: 1.75; margin-bottom: 1.2rem; }

.footer-title {
  font-family: var(--font-heading);
  font-size: 1rem;
  color: var(--white);
  font-weight: 600;
  margin-bottom: 1.2rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid rgba(201,168,76,0.25);
}

.footer-links { list-style: none; padding: 0; margin: 0; }
.footer-links li { margin-bottom: 0.5rem; }
.footer-links a {
  color: rgba(255,255,255,0.62);
  font-size: 0.875rem;
  transition: color var(--transition), padding-left var(--transition);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.footer-links a::before { content: '›'; color: var(--gold); font-size: 1rem; }
.footer-links a:hover { color: var(--gold); }

.footer-contact-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.9rem;
  font-size: 0.875rem;
  color: rgba(255,255,255,0.7);
}
.footer-contact-row i { color: var(--gold); flex-shrink: 0; width: 14px; }
.footer-contact-row a { color: rgba(255,255,255,0.7); transition: color var(--transition); }
.footer-contact-row a:hover { color: var(--gold); }

.footer-social { display: flex; gap: 0.65rem; margin-top: 1.2rem; }
.footer-social a {
  width: 36px;
  height: 36px;
  border: 1px solid rgba(201,168,76,0.35);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.6);
  font-size: 0.85rem;
  transition: var(--transition);
}
.footer-social a:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--dark);
}

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.08);
  padding: 1.4rem 0;
  margin-top: 3rem;
  font-size: 0.78rem;
  color: rgba(255,255,255,0.38);
}
.footer-bottom a { color: rgba(255,255,255,0.48); transition: color var(--transition); }
.footer-bottom a:hover { color: var(--gold); }

/* ================================================================
   LAZY BG
================================================================ */
[data-bg] { background-size: cover; background-position: center; }
.lazy-bg { opacity: 0; transition: opacity 0.6s ease; }
.lazy-bg.loaded { opacity: 1; }

/* ================================================================
   CONTENT IMAGE FADE-IN
   Real photos (page heroes, homepage hero slider, room cards,
   gallery teaser, facility cards, Jaipur attraction cards, room
   carousels + thumbnails, gallery grid) start invisible and fade in
   once their bytes have actually arrived - see initImageFadeIn() in
   main.js, which adds .img-loaded on each image's load/error event
   (or immediately if it was already complete/cached when the script
   ran). Gated by html.js-fade-images (also added by that function)
   so images are never left invisible if JS fails to run.
   The Swiper lightbox builds its own <img> elements on click and is
   deliberately left out of this selector list, so its slides are
   always visible and unaffected.

   Room thumbnails (.room-thumb-strip img) are NOT part of this
   opacity fade - see SHIMMER PRELOADER below, which gives them a
   different (and simpler) loading treatment instead.

   Four of these selectors (.room-card-img img, .gt-item img,
   .facility-card img, .gal-item img) already own a hover-zoom/lift
   `transition` on the img itself. Declaring `transition: opacity ...`
   here too would win the cascade (this selector is more specific)
   and silently replace that transition, killing the smooth hover
   effect - which is exactly what happened the first time this was
   added. So for those four, opacity is merged into their own
   existing transition declaration at its source (search
   "+ opacity fade-in" below) instead of being redeclared here; this
   block only ever sets the opacity VALUE for them, never touches
   `transition` for them.
================================================================ */
html.js-fade-images .page-hero img,
html.js-fade-images .hero-slider img,
html.js-fade-images .room-rate-img,
html.js-fade-images .attraction-img-wrap img,
html.js-fade-images .room-carousel img {
  opacity: 0;
  transition: opacity 0.6s ease;
}
html.js-fade-images .page-hero img.img-loaded,
html.js-fade-images .hero-slider img.img-loaded,
html.js-fade-images .room-rate-img.img-loaded,
html.js-fade-images .attraction-img-wrap img.img-loaded,
html.js-fade-images .room-carousel img.img-loaded {
  opacity: 1;
}
/* These four keep their own transition (see "+ opacity fade-in" at
   each source rule) - only the opacity value is set here. */
html.js-fade-images .room-card-img img,
html.js-fade-images .gt-item img,
html.js-fade-images .facility-card img,
html.js-fade-images .gal-item img {
  opacity: 0;
}
html.js-fade-images .room-card-img img.img-loaded,
html.js-fade-images .gt-item img.img-loaded,
html.js-fade-images .facility-card img.img-loaded,
html.js-fade-images .gal-item img.img-loaded {
  opacity: 1;
}

/* ================================================================
   SHIMMER PRELOADER (Rooms page)
   A warm, on-brand shimmer plays while a room photo is loading,
   replacing a blank wait with a skeleton effect. It's pure CSS, so
   it's visible even before main.js runs, and disappears automatically
   once the real (opaque) photo paints over it. main.js's
   initImageFadeIn() additionally adds .shimmer-off once an image's
   load/error event fires, purely to stop the (by then invisible,
   fully-covered) animation rather than let it loop forever unseen.

   Carousel photos: the shimmer is a ::before behind the <img> (both
   children of Bootstrap's own position:relative .carousel-item), so
   it stays visible through the img's own opacity:0 fade-in phase
   above and is gradually covered as the photo fades in over it.

   Thumbnails: skipped the opacity fade above (they're tiny and load
   almost instantly once requested) and instead carry the shimmer as
   the <img>'s own CSS background, which the opaque photo simply
   paints over the moment it decodes - no class or transition needed
   for that handoff.
================================================================ */
@keyframes shimmer-sweep {
  0%   { background-position: 180% 0; }
  100% { background-position: -80% 0; }
}
.room-carousel .carousel-item::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: linear-gradient(100deg, var(--beige-dark) 35%, var(--gold-light) 50%, var(--beige-dark) 65%);
  background-size: 260% 100%;
  animation: shimmer-sweep 1.6s ease-in-out infinite;
}
.room-carousel .carousel-item.shimmer-off::before {
  animation: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.room-carousel .carousel-item img {
  position: relative;
  z-index: 1;
}
.room-thumb-strip img {
  background-image: linear-gradient(100deg, var(--beige-dark) 35%, var(--gold-light) 50%, var(--beige-dark) 65%);
  background-size: 260% 100%;
  animation: shimmer-sweep 1.6s ease-in-out infinite;
}
.room-thumb-strip img.shimmer-off {
  animation: none;
}

/* Hero banners (page-hero on inner pages, hero-slider on the homepage):
   same shimmer-sweep, but lighter (beige/white instead of beige-dark/
   gold-light) since it has to read through the dark text-legibility
   overlay on top of it - paired with that overlay dimming to a lighter
   wash while loading, above, so the loading state doesn't read as a
   flat dark-brown wash. */
.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: linear-gradient(100deg, var(--beige) 35%, var(--white) 50%, var(--beige) 65%);
  background-size: 260% 100%;
  animation: shimmer-sweep 1.6s ease-in-out infinite;
}
.page-hero.shimmer-off::before {
  animation: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.hero-slider .carousel-item::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: linear-gradient(100deg, var(--beige) 35%, var(--white) 50%, var(--beige) 65%);
  background-size: 260% 100%;
  animation: shimmer-sweep 1.6s ease-in-out infinite;
}
.hero-slider .carousel-item.shimmer-off::before {
  animation: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}
@media (prefers-reduced-motion: reduce) {
  .room-carousel .carousel-item::before,
  .room-thumb-strip img,
  .page-hero::before,
  .hero-slider .carousel-item::before {
    animation: none;
  }
}

/* ================================================================
   UTILITIES
================================================================ */
.text-gold   { color: var(--gold) !important; }
.text-maroon { color: var(--maroon) !important; }
.fw-600 { font-weight: 600; }

/* ================================================================
   RESPONSIVE
================================================================ */
@media (max-width: 991px) {
  :root { --section-pad: 60px; }
  .hero-slider { height: 72vh; height: 72svh; min-height: 500px; }
  .about-star-badge { display: none; }
}

@media (max-width: 767px) {
  :root { --section-pad: 50px; }
  .stats-strip .col { flex: 0 0 50%; max-width: 50%; }
  .stat-item { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.12); }
  .stat-item:nth-child(2n) { border-right: none; }
  .gallery-teaser { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
}

@media (max-width: 575px) {
  .hero-title  { font-size: 2.2rem; }
  .hero-sub    { font-size: 0.95rem; }
  .hero-btns   { flex-direction: column; align-items: center; }
  .whatsapp-float { bottom: 20px; left: 20px; width: 50px; height: 50px; }
  .whatsapp-float i { font-size: 1.4rem; }
}

/* ================================================================
   ICON SIZE OVERRIDES — larger, thinner Bootstrap Icons sitewide
================================================================ */
.why-icon i            { font-size: 2rem; }
.amenity-item i         { font-size: 2.3rem; }
.facility-card-icon i   { font-size: 1.3rem; }
.about-check-list li i,
.room-feature-list li i,
.policy-card ul li i,
.footer-contact-row i   { font-size: 1.05rem; }
.whatsapp-float i       { font-size: 2rem; }
.btn-maroon i, .btn-gold i, .btn-outline-white i, .btn-outline-maroon i { font-size: 1rem; }
.distance-pill i { font-size: 0.95rem; }
.attraction-badge i     { font-size: 0.9rem; }
.footer-social a i      { font-size: 1.05rem; }
.breadcrumb-item + .breadcrumb-item::before { font-size: 1rem; }

/* ================================================================
   CONTACT INFO CARDS — redesign
================================================================ */
.contact-info-card-v2 {
  background: var(--white);
  border-radius: 14px;
  padding: 2rem 1.5rem;
  text-align: center;
  height: 100%;
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.contact-info-card-v2:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: var(--gold);
}
.contact-info-card-v2 .ci-icon-wrap {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--beige);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.2rem;
  transition: background var(--transition);
}
.contact-info-card-v2 .ci-icon-wrap i { font-size: 1.7rem; color: var(--maroon); transition: color var(--transition); }
.contact-info-card-v2:hover .ci-icon-wrap { background: var(--maroon); }
.contact-info-card-v2:hover .ci-icon-wrap i { color: var(--gold); }
.contact-info-card-v2 h4 {
  font-family: var(--font-heading);
  font-size: 1rem;
  color: var(--maroon);
  margin-bottom: 0.5rem;
}
.contact-info-card-v2 p, .contact-info-card-v2 a {
  font-size: 0.9rem;
  color: var(--text);
  margin: 0;
  line-height: 1.6;
}
.contact-info-card-v2 a { font-weight: 700; color: var(--maroon); text-decoration: none; display: block; }
.contact-info-card-v2 a + a { margin-top: 0.35rem; }
.contact-info-card-v2 a:hover { text-decoration: underline; }
.contact-info-card-v2.cc-whatsapp { background: linear-gradient(135deg, #25D366, #128C7E); border-color: transparent; }
.contact-info-card-v2.cc-whatsapp .ci-icon-wrap { background: rgba(255,255,255,0.22); }
.contact-info-card-v2.cc-whatsapp .ci-icon-wrap i { color: var(--white); }
.contact-info-card-v2.cc-whatsapp:hover .ci-icon-wrap { background: rgba(255,255,255,0.35); }
.contact-info-card-v2.cc-whatsapp:hover .ci-icon-wrap i { color: var(--white); }
.contact-info-card-v2.cc-whatsapp h4,
.contact-info-card-v2.cc-whatsapp p,
.contact-info-card-v2.cc-whatsapp a { color: var(--white) !important; }

/* ================================================================
   BIGGER ROOM THUMBNAILS (rooms.html)
   Single row, same width as the main carousel image above it;
   scrolls horizontally when there are more thumbnails than fit.
   Full colour by default, lift + gold ring on hover/active.
================================================================ */
.room-thumb-strip {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: 0.6rem;
  margin-top: 0.75rem;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 0.5rem;
  /* Firefox custom scrollbar */
  scrollbar-width: thin;
  scrollbar-color: var(--gold) var(--beige-dark);
}
.room-thumb-strip::-webkit-scrollbar { height: 7px; }
.room-thumb-strip::-webkit-scrollbar-track { background: var(--beige-dark); border-radius: 4px; }
.room-thumb-strip::-webkit-scrollbar-thumb { background: var(--gold); border-radius: 4px; }
.room-thumb-strip::-webkit-scrollbar-thumb:hover { background: var(--maroon); }
.room-thumb-strip img {
  height: 92px;
  width: 130px;
  flex-shrink: 0;
  object-fit: cover;
  border-radius: 4px;
  cursor: pointer;
  border: 2px solid transparent;
  scroll-snap-align: start;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.room-thumb-strip img:hover,
.room-thumb-strip img.active {
  transform: translateY(-4px);
  box-shadow: 0 8px 18px rgba(0,0,0,0.2);
  border-color: var(--gold);
}
@media (max-width: 575px) {
  .room-thumb-strip img { height: 72px; width: 104px; }
}

/* Main carousel image opens the lightbox on click */
.room-carousel .carousel-item img { cursor: zoom-in; }

/* ================================================================
   HERO NAV ARROWS (homepage carousel)
================================================================ */
.hero-slider .hero-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(253,250,247,0.15);
  border: 1.5px solid rgba(255,255,255,0.5);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  z-index: 15;
  opacity: 0;
  transition: opacity var(--transition), background var(--transition);
  cursor: pointer;
}
.hero-slider:hover .hero-nav-btn { opacity: 1; }
.hero-slider .hero-nav-btn:hover { background: rgba(201,168,76,0.85); border-color: var(--gold); }
.hero-slider .hero-nav-prev { left: 1.5rem; }
.hero-slider .hero-nav-next { right: 1.5rem; }
@media (max-width: 767px) {
  .hero-slider .hero-nav-btn { width: 40px; height: 40px; font-size: 1rem; opacity: 0.85; }
  .hero-slider .hero-nav-prev { left: 0.6rem; }
  .hero-slider .hero-nav-next { right: 0.6rem; }
}

/* ================================================================
   HOMEPAGE BOOKING WIDGET — floats over the hero/About boundary,
   transparent glass card, no solid bar between the two sections
================================================================ */
.booking-widget-float {
  position: relative;
  z-index: 20;
  margin-top: -92px;
  pointer-events: none;
}
.booking-widget-float .container,
.booking-widget-float .booking-card-large { pointer-events: auto; }

/* Card already has its own -3rem margin (for reservation.html's layout);
   this wrapper's own negative margin positions it over the hero instead. */
.booking-widget-float .booking-card-large { margin-top: 0; }

@media (max-width: 991px) {
  .booking-widget-float { margin-top: -60px; }
}
@media (max-width: 767px) {
  .booking-widget-float { margin-top: -36px; }
}
@media (max-width: 575px) {
  .booking-widget-float { margin-top: -20px; }
}

/* ================================================================
   SIMPLIFIED STORY IMAGE (About section, homepage)
================================================================ */
.about-img-simple {
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  width: 100%;
}

/* ================================================================
   SWIPER LIGHTBOX (gallery)
================================================================ */
.swiper-lightbox-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10,6,4,0.95);
  z-index: 2000;
  display: none;
  align-items: center;
  justify-content: center;
}
.swiper-lightbox-overlay.open { display: flex; }
.swiper-lightbox-overlay .swiper {
  width: 100%;
  height: 100%;
}
.swiper-lightbox-overlay .swiper-slide {
  display: flex;
  align-items: center;
  justify-content: center;
}
.swiper-lightbox-overlay .swiper-slide img {
  max-width: 92vw;
  max-height: 86vh;
  width: auto;
  object-fit: contain;
  border-radius: 2px;
}
.swiper-lightbox-overlay .lb-close {
  position: absolute;
  top: 1.2rem;
  right: 1.5rem;
  z-index: 2010;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  border: 1.5px solid rgba(255,255,255,0.4);
  color: var(--white);
  font-size: 1.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.swiper-lightbox-overlay .lb-close:hover { background: var(--gold); border-color: var(--gold); color: var(--dark); }
.swiper-lightbox-overlay .swiper-button-next,
.swiper-lightbox-overlay .swiper-button-prev {
  color: var(--gold);
  background: rgba(0,0,0,0.3);
  width: 50px;
  height: 50px;
  border-radius: 50%;
}
.swiper-lightbox-overlay .swiper-button-next::after,
.swiper-lightbox-overlay .swiper-button-prev::after { font-size: 1.2rem; }
.swiper-lightbox-overlay .swiper-pagination-bullet { background: rgba(255,255,255,0.5); }
.swiper-lightbox-overlay .swiper-pagination-bullet-active { background: var(--gold); }
.gal-item, .gt-item { cursor: pointer; }

/* ================================================================
   CONTACT PAGE (moved from inline <style> in contact.html's <head>)
================================================================ */
.contact-info-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1.75rem;
  text-align: center;
  height: 100%;
  transition: box-shadow 0.3s, transform 0.3s;
}
.contact-info-card:hover {
  box-shadow: 0 10px 30px rgba(107,26,42,0.1);
  transform: translateY(-4px);
}
.contact-icon-wrap {
  width: 70px;
  height: 70px;
  background: var(--beige);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  color: var(--maroon);
  margin: 0 auto 1.2rem;
  transition: background 0.3s;
}
.contact-info-card:hover .contact-icon-wrap {
  background: var(--maroon);
  color: #fff;
}
.contact-info-card h4 {
  font-family: var(--font-heading);
  font-size: 1rem;
  color: var(--maroon);
  margin-bottom: 0.5rem;
}
.contact-info-card p, .contact-info-card a {
  font-size: 0.88rem;
  color: #555;
  margin-bottom: 0;
}
.contact-info-card a {
  color: var(--maroon);
  font-weight: 600;
  text-decoration: none;
}
.contact-info-card a:hover { text-decoration: underline; }

.whatsapp-card {
  background: linear-gradient(135deg, #25D366, #128C7E);
}
.whatsapp-card .contact-icon-wrap {
  background: rgba(255,255,255,0.25);
  color: #fff;
}
.whatsapp-card h4, .whatsapp-card p, .whatsapp-card a {
  color: #fff !important;
}
.whatsapp-card:hover .contact-icon-wrap {
  background: rgba(255,255,255,0.4);
  color: #fff;
}

/* Contact Form */
.contact-form-wrap {
  background: #fff;
  border-radius: 14px;
  padding: 2.5rem;
  box-shadow: 0 4px 20px rgba(0,0,0,0.06);
}
.contact-form-wrap h3 {
  font-family: var(--font-heading);
  color: var(--maroon);
  font-size: 1.5rem;
  margin-bottom: 0.4rem;
}
.contact-form-wrap .form-subtitle {
  font-size: 0.88rem;
  color: #777;
  margin-bottom: 1.5rem;
}
.form-label {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #555;
  margin-bottom: 0.4rem;
}
.form-control, .form-select {
  border: 1.5px solid var(--border);
  border-radius: 8px;
  padding: 0.7rem 1rem;
  font-size: 0.9rem;
  font-family: var(--font-body);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.form-control:focus, .form-select:focus {
  border-color: var(--maroon);
  box-shadow: 0 0 0 3px rgba(107,26,42,0.1);
  outline: none;
}
textarea.form-control { resize: vertical; min-height: 120px; }
.btn-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1.2;
  background: linear-gradient(135deg, var(--maroon), var(--maroon-dark));
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 0.85rem 2.5rem;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
  width: 100%;
}
.btn-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(107,26,42,0.35);
}
.btn-submit:disabled { opacity: 0.7; transform: none; }

/* Map & Directions */
.page-contact .map-frame {
  width: 100%;
  height: 400px;
  border: 0;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}

.directions-card {
  background: var(--beige);
  border-radius: 12px;
  padding: 1.75rem;
}
.directions-card h4 {
  font-family: var(--font-heading);
  color: var(--maroon);
  margin-bottom: 1.2rem;
}
.direction-item {
  display: flex;
  gap: 0.85rem;
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #ddd5c8;
}
.direction-item:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.dir-icon {
  width: 38px;
  height: 38px;
  background: var(--maroon);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 0.85rem;
  flex-shrink: 0;
}
.direction-item h6 {
  font-weight: 700;
  font-size: 0.88rem;
  color: #333;
  margin-bottom: 0.25rem;
}
.direction-item p {
  font-size: 0.82rem;
  color: #666;
  margin: 0;
}

/* ================================================================
   JAIPUR PAGE (moved from inline <style> in jaipur.html's <head>)
================================================================ */
.attraction-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  transition: box-shadow 0.3s, transform 0.3s;
  height: 100%;
}
.attraction-card:hover {
  box-shadow: 0 12px 32px rgba(107,26,42,0.12);
  transform: translateY(-4px);
}
.attraction-img {
  width: 100%;
  height: 220px;
  object-fit: cover;
}
.attraction-body {
  padding: 1.5rem;
}
.attraction-badge {
  display: inline-block;
  background: var(--gold);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 20px;
  margin-bottom: 0.75rem;
}
.attraction-body h3 {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  color: var(--maroon);
  margin-bottom: 0.5rem;
}
.attraction-body p {
  font-size: 0.9rem;
  color: #555;
  margin-bottom: 0.75rem;
}
.distance-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--beige);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 4px 12px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--maroon);
}
.distance-pill i { font-size: 0.72rem; }

.distance-table {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,0.06);
}
.distance-table thead {
  background: var(--maroon);
  color: #fff;
}
.distance-table th, .distance-table td {
  padding: 0.9rem 1.2rem;
  vertical-align: middle;
}
.distance-table tbody tr:hover {
  background: var(--beige);
}
.time-pill {
  background: #f0f7f4;
  color: #1a7a4a;
  border-radius: 20px;
  padding: 3px 10px;
  font-size: 0.78rem;
  font-weight: 600;
}

.tips-card {
  background: linear-gradient(135deg, var(--maroon), var(--maroon-dark));
  color: #fff;
  border-radius: 12px;
  padding: 2rem;
}
.tips-card h3 {
  font-family: var(--font-heading);
  font-size: 1.4rem;
  margin-bottom: 1.25rem;
  color: var(--gold-light);
}
.tip-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
  font-size: 0.9rem;
}
.tip-item i {
  color: var(--gold);
  flex-shrink: 0;
}

.page-jaipur .map-frame {
  width: 100%;
  height: 420px;
  border: 0;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}

.transport-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.5rem;
  text-align: center;
  height: 100%;
}
.transport-icon {
  width: 60px;
  height: 60px;
  background: var(--beige);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: var(--maroon);
  margin: 0 auto 1rem;
}
.transport-card h4 {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  color: var(--maroon);
  margin-bottom: 0.5rem;
}
.transport-card p {
  font-size: 0.85rem;
  color: #666;
  margin-bottom: 0;
}

/* ================================================================
   RESERVATION PAGE DETAIL (moved from inline <style> in
   reservation.html's <head> - supplements the older RESERVATION
   PAGE block above)
================================================================ */
.booking-hero-section {
  background: linear-gradient(135deg, var(--maroon-dark) 0%, #2d0a12 100%);
  padding: 4rem 0 5rem;
  position: relative;
  overflow: hidden;
}
.booking-hero-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("hotel-images/heritage-haveli-courtyard-lanterns-carved-balconies.jpg");
  background-size: cover;
  background-position: center;
  opacity: 0.18;
}
.booking-hero-section .container { position: relative; z-index: 1; }

.booking-hero-section h1 {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 4vw, 2.8rem);
  color: var(--gold-light);
  margin-bottom: 0.5rem;
}
.booking-hero-section .lead {
  color: rgba(255,255,255,0.8);
  font-size: 1rem;
}

.booking-card-large {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.18);
  padding: 2.5rem;
  margin-top: -3rem;
  position: relative;
  z-index: 10;
}
.booking-card-large h2 {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  color: var(--maroon);
  margin-bottom: 1.5rem;
}

.bw-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--maroon);
  margin-bottom: 0.4rem;
}
.bw-input {
  border: 1.5px solid var(--border);
  border-radius: 8px;
  padding: 0.7rem 1rem;
  width: 100%;
  font-size: 0.9rem;
  font-family: var(--font-body);
  background: #fff;
  transition: border-color 0.2s;
}
.bw-input:focus { outline: none; border-color: var(--maroon); }

.counter-group {
  display: flex;
  align-items: center;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}
.counter-group button {
  background: var(--beige);
  border: none;
  width: 38px;
  height: 44px;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--maroon);
  cursor: pointer;
  transition: background 0.2s;
}
.counter-group button:hover { background: var(--maroon); color: #fff; }
.counter-val {
  flex: 1;
  text-align: center;
  font-weight: 700;
  font-size: 1rem;
  color: #333;
}

.btn-book-large {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1.2;
  background: linear-gradient(135deg, var(--maroon), var(--maroon-dark));
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 0.9rem 2rem;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  width: 100%;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
}
.btn-book-large:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(107,26,42,0.35); }
.btn-book-large i { margin-right: 8px; }

.best-rate-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #d4edda;
  color: #155724;
  border-radius: 20px;
  padding: 4px 14px;
  font-size: 0.78rem;
  font-weight: 700;
}

.room-rate-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  transition: box-shadow 0.3s;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.room-rate-card:hover {
  box-shadow: 0 8px 25px rgba(107,26,42,0.1);
}
.room-rate-img {
  height: 200px;
  object-fit: cover;
  width: 100%;
}
.room-rate-body {
  padding: 1.4rem;
  flex: 1;
}
.room-rate-body h3 {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  color: var(--maroon);
  margin-bottom: 0.4rem;
}
.room-rate-body .room-desc {
  font-size: 0.85rem;
  color: #666;
  margin-bottom: 0.75rem;
}
.amenity-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--beige);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 3px 10px;
  font-size: 0.72rem;
  color: #555;
  margin: 2px;
}

.policy-card {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.5rem;
  height: 100%;
  background: #fff;
}
.policy-card h4 {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  color: var(--maroon);
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 8px;
}
.policy-card h4 i {
  width: 32px;
  height: 32px;
  background: var(--beige);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  flex-shrink: 0;
}
.policy-card ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.policy-card ul li {
  font-size: 0.88rem;
  color: #555;
  padding: 0.35rem 0;
  border-bottom: 1px solid #f0ece8;
  display: flex;
  align-items: center;
  gap: 8px;
}
.policy-card ul li:last-child { border-bottom: none; }
.policy-card ul li i { color: var(--gold); flex-shrink: 0; }

.contact-book-card {
  background: var(--beige);
  border-radius: 12px;
  padding: 1.75rem;
}
.contact-book-card h4 {
  font-family: var(--font-heading);
  color: var(--maroon);
  margin-bottom: 1rem;
}
.contact-book-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.85rem;
}
.contact-book-row i {
  color: var(--maroon);
  width: 18px;
  flex-shrink: 0;
}
.contact-book-row a {
  color: var(--maroon);
  font-weight: 600;
  text-decoration: none;
}
.contact-book-row a:hover { text-decoration: underline; }