/* qc-fixes.css — QC Checklist fixes, loaded after the compiled Next.js stylesheets
   so these overrides win on the cascade. See js/qc-fixes.js for the JS-side fixes
   (back-to-top button, reviews slide indicator). */

/* All QC findings fixed here in one place:
   - language button / FAQ accordion icons missing cursor:pointer
   - Why Choose Us icon invisible on hover (bg stays near-white while icon turns white)
   - Contact Us section missing a divider between header and content
   - Gallery images distorting on small/mobile widths
   - mobile "Book Now" button collapsing because .btn-rainbow's own
     display:inline-flex (loaded after Tailwind) beats the "block" utility
   - Back to Top button styling
   - Reviews mobile slide-indicator dots styling
*/

button:not(:disabled) {
  cursor: pointer;
}

/* Anchor jumps (from the sitemap page, or any #section link) land straight
   under the fixed 76px header instead of clearing it, hiding the section's
   own heading behind the bar. scroll-padding-top reserves that much space at
   the top of the scrollport for the whole document, so every in-page and
   cross-page #anchor jump (native browser behavior, no JS needed) stops far
   enough down to clear the header. */
html {
  scroll-padding-top: 76px;
}

/* This is a static Next.js export: Tailwind's CSS was pre-compiled at build time
   from the original source, so any *new* utility-class string introduced later
   (one that never appeared in the original source) has no matching rule and is a
   silent no-op. Anything below that needs custom positioning/z-index is therefore
   done here in plain CSS (scoped by id/selector) instead of via new Tailwind
   classes spliced into the compiled bundle. */

/* Hero section on mobile: h-screen/min-h-[640px] forced a full-screen-tall
   hero even though the booking form no longer lives inside it — leaving a lot
   of empty space below the text/CTA. Let it size to its actual content instead. */
@media (max-width: 767px) {
  #home {
    height: auto !important;
    min-height: 0 !important;
    padding-top: 6rem;
    padding-bottom: 3rem;
  }
}

/* Mobile booking section: modest, controlled padding instead of the gap left
   over from the old dark full-bleed treatment. */
#qc-mobile-hero-booking {
  padding-top: 1rem;
  padding-bottom: 2rem;
}

/* Booking form placement: on mobile the booking widget moves out of the hero
   entirely and appears as its own section right after it, instead of being
   squeezed into the bottom of the full-screen hero image alongside the dots,
   scroll cue, and CTA text. Desktop keeps the original overlay-on-hero version.
   (Duplicated in the markup rather than reparented via CSS, since the hero
   section is h-screen + overflow-hidden — nothing can visually escape it with
   CSS alone; the two copies share the same component state so they always
   stay in sync.) */
@media (max-width: 767px) {
  #booking {
    display: none !important;
  }
}
@media (min-width: 768px) {
  #qc-mobile-hero-booking {
    display: none !important;
  }
}

/* Hero slider left/right arrow buttons: desktop only, per client request. */
@media (max-width: 767px) {
  #qc-hero-prev, #qc-hero-next {
    display: none !important;
  }
}

/* Hero slider dots: keep clear of the header above and the booking form below,
   at every breakpoint. */
#qc-hero-dots {
  display: none !important;
}

/* Booking form always wins clicks over the hero dots / scroll-cue arrow behind it. */
#booking {
  z-index: 30 !important;
}

/* Scroll-cue chevron: clickable (scrolls down ~90% of a viewport per click,
   see the bundle's onClick).
   - Below 768px: the booking form no longer lives inside the hero (it's its
     own section right after), so a fixed low offset is always safe.
   - 768px+: positioned dynamically in js/qc-fixes.js (positionScrollCue) at
     exactly 20px above the booking form overlay — deliberately no
     !important/bottom rule here so that JS-set inline style always wins. */
@media (max-width: 767px) {
  #qc-scroll-cue {
    bottom: 1.25rem !important;
  }
}

/* Mobile nav dropdown: scroll internally instead of overflowing off-screen
   in short/landscape viewports. */
header > div.lg\:hidden.bg-white.border-t > div {
  max-height: calc(100vh - 76px);
  overflow-y: auto;
}

/* Custom nav breakpoint at 1230px (per client request: hamburger below this,
   full nav links above it — the compiled Tailwind "lg" breakpoint is 1024px,
   which is too narrow for the full link row to fit without squeezing).
   Phone / language / Book Now stay visible in the top bar at every width,
   including when the hamburger is showing.

   Progressive collapse: instead of all 5 links (Rooms/Restaurants/Offers/
   Gallery/Contact) disappearing at once at 1230px, they tuck into the
   hamburger one at a time, from the end of the list backwards, as the
   viewport keeps narrowing — each dropdown link only appears once its
   top-bar twin has actually been hidden, so nothing is ever duplicated. */

/* #qc-nav-actions gets margin-left:auto below 1230px (further down) to group
   it with the hamburger — but auto-margin on a flex item consumes ALL free
   space before it, and now that #qc-nav-links stays in the flex row even
   when some/most of its links are hidden (rather than disappearing outright),
   that auto-margin was swallowing the logo↔nav gap too, jamming the first
   visible link straight into the logo text. A guaranteed minimum gap on the
   row fixes it without touching the auto-margin trick: gap is reserved
   before justify-content/auto-margins divide up whatever's left, so logo and
   nav can never collapse to zero space between them. */
#qc-nav-row {
  gap: 2rem;
}
#qc-nav-links {
  display: flex !important;
}
#qc-nav-toggle {
  display: block !important;
}
/* The dropdown panel itself still carries the real compiled "lg:hidden" class
   (Tailwind's 1024px breakpoint), which hid it outright between 1024-1229px —
   the exact range where the hamburger button (above) was already showing.
   Keep the panel's visible range in sync with the toggle button's. */
#qc-mobile-panel {
  display: block !important;
}
@media (min-width: 1230px) {
  #qc-nav-toggle {
    display: none !important;
  }
  #qc-mobile-panel {
    display: none !important;
  }
}

/* Step 1 — Contact: hidden below 1230px (the first to go, matching the
   hamburger's own threshold), shown in the dropdown at the same point. */
@media (max-width: 1229px) {
  #qc-navlink-contact { display: none !important; }
}
#qc-navlink-dd-contact { display: none; }
@media (max-width: 1229px) {
  #qc-navlink-dd-contact { display: block; }
}

/* Step 1.5 — Blogs: second to go, hidden below 1100px — its own step between
   Contact's (1230) and Gallery's (1030), rather than sharing Contact's
   threshold. Measured directly (getBoundingClientRect on each nav item at
   several widths, see the calibration this threshold — and the four below —
   were derived from): with Rooms+Restaurants+Offers+Gallery+Blogs all shown,
   the row needs >=1081px to avoid the toggle overlapping the language/Book
   Now cluster; 1100 keeps a ~19px safety margin.
   The bundle derives each nav link's id as "qc-navlink-"+href.slice(1) —
   built assuming every href is a "#section" anchor, so it strips what it
   assumes is the "#". For this link's href ("blogs.html" / "ja/blogs.html")
   that instead strips the leading "b"/"j", producing "qc-navlink-logs.html",
   not "qc-navlink-blog" — so an id-based rule here would silently never
   match. Target the href directly instead so this doesn't depend on that
   quirk. The dropdown's own copy has the identical id problem — see the
   matching href-selector rule right after this block. */
@media (max-width: 1099px) {
  #qc-nav-links > a[href$="blogs.html"] { display: none !important; }
}
/* Dropdown's own Blogs copy has the same id quirk (slice(1) again produces
   "qc-navlink-dd-logs.html", not a usable id) — without a matching rule here
   it would stay unconditionally visible whenever the panel opens, duplicating
   the bar's own Blogs link for the whole 1100-1229px range where the bar
   version is still shown. Same href-selector fix, mirrored for the dropdown. */
#qc-dd-links > a[href$="blogs.html"] { display: none; }
@media (max-width: 1099px) {
  #qc-dd-links > a[href$="blogs.html"] { display: block; }
}

/* Step 2 — Gallery: hidden below 1030px (measured: >=1012px needed for
   Rooms+Restaurants+Offers+Gallery, ~18px margin). */
@media (max-width: 1029px) {
  #qc-navlink-gallery { display: none !important; }
}
#qc-navlink-dd-gallery { display: none; }
@media (max-width: 1029px) {
  #qc-navlink-dd-gallery { display: block; }
}

/* Step 3 — Offers: hidden below 950px (measured: >=932px needed for
   Rooms+Restaurants+Offers, ~18px margin). */
@media (max-width: 949px) {
  #qc-navlink-offers { display: none !important; }
}
#qc-navlink-dd-offers { display: none; }
@media (max-width: 949px) {
  #qc-navlink-dd-offers { display: block; }
}

/* Step 4 — Restaurants: hidden below 880px (measured: >=860px needed for
   Rooms+Restaurants, ~20px margin). */
@media (max-width: 879px) {
  #qc-navlink-restaurants { display: none !important; }
}
#qc-navlink-dd-restaurants { display: none; }
@media (max-width: 879px) {
  #qc-navlink-dd-restaurants { display: block; }
}

/* Step 5 — Rooms: hidden below 830px (all 5 now in the hamburger, matching
   ordinary full-mobile behavior from here down). */
@media (max-width: 829px) {
  #qc-navlink-rooms { display: none !important; }
}
#qc-navlink-dd-rooms { display: none; }
@media (max-width: 829px) {
  #qc-navlink-dd-rooms { display: block; }
}

/* Below 830px all 5 links are individually hidden (step 5 above), but
   #qc-nav-links itself is still `display:flex` (needed so links can show/hide
   individually at all) — an empty flex item still claims its gap on both
   sides from #qc-nav-row, wasting 2x that gap on an already-tight phone
   screen. Collapse the container itself once it has nothing left to show. */
@media (max-width: 829px) {
  #qc-nav-links {
    display: none !important;
  }
}

/* A phone rotated to landscape can easily report a CSS width in the 830-1229
   "progressive desktop" range above (e.g. ~930px on larger phones) — it's
   still a phone, just sideways, and should stay in full mobile-nav mode
   rather than switching to the partial-desktop link row. Width alone can't
   tell those apart, but short viewport height reliably can: phones in
   landscape are still short (~400-430px), while a genuine desktop window at
   that width is rarely that short. Force full mobile behavior whenever the
   viewport is short, regardless of width. */
@media (max-height: 500px) {
  #qc-nav-links {
    display: none !important;
  }
  #qc-nav-toggle {
    display: block !important;
  }
  #qc-mobile-panel {
    display: block !important;
  }
  #qc-navlink-dd-rooms, #qc-navlink-dd-restaurants, #qc-navlink-dd-offers,
  #qc-navlink-dd-gallery, #qc-navlink-dd-contact {
    display: block !important;
  }
}

#qc-nav-actions {
  display: flex !important;
}
@media (max-width: 1229px) {
  /* Group the retained phone/language/Book Now cluster immediately to the left
     of the hamburger instead of letting the header's justify-between spread it
     out into the middle of the bar. */
  #qc-nav-actions {
    margin-left: auto;
    margin-right: 1rem;
  }
}

/* Full mobile nav (below 830px, where all 5 links are already collapsed —
   see the progressive-collapse steps above). Layout: hamburger on the left,
   logo centered independent of everything else, Book Now + language on the
   right — phone number moves into the dropdown instead (alongside the nav
   links, both stacked vertically), since there's only room for two items
   beside the centered logo. The 830-1229px desktop-progressive range is
   untouched. */
#qc-dd-actions {
  display: none;
}
@media (max-width: 829px), (max-height: 500px) {
  #qc-dd-actions {
    display: flex !important;
  }
  #qc-dd-links {
    flex-direction: column;
  }
}
@media (max-width: 829px), (max-height: 500px) {
  #qc-logo-text {
    display: none !important;
  }
  /* Layout, left to right: hamburger + language grouped tight on the left,
     logo dead-center, Book Now alone on the right.
     #qc-nav-actions wraps phone+language+Book Now together in the compiled
     markup; independently positioning language and Book Now on either side
     of the logo requires them to be genuine direct children of the row (a
     wrapped group can't be split visually around a sibling), so
     js/qc-fixes.js physically moves #qc-lang-btn into a new #qc-left-cluster
     wrapper alongside the hamburger, and #qc-booknow-btn to be a direct
     child of #qc-nav-row, at this breakpoint (undoing both moves, restoring
     original order inside #qc-nav-actions, on desktop).
     Four earlier attempts all broke: CSS Grid + display:contents (hamburger
     dropped to a second row — a known cross-browser-inconsistent
     combination), CSS Grid with genuinely-moved children but no wrapper
     (same symptom), flexbox + `order` with justify-content:space-between
     (never wraps, but space-between only guarantees *equal gaps* between 4
     items of different widths, not a centered logo, and reads as cluttered),
     and taking the logo out of flow with position:absolute + left:50% (the
     logo centered correctly, but nothing then stopped the *normal-flow*
     language button from spatially extending into that same centered zone —
     it rendered visually behind/overlapping the logo card).
     Fix: real CSS Grid, three tracks (`1fr auto 1fr`), with the hamburger+
     language wrapped into one grid item so left/logo/right are exactly three
     items in three non-overlapping columns — grid tracks never overlap by
     definition, unlike flex order or absolute positioning, so this holds
     regardless of how wide the language label or Book Now button get.
     `1fr auto 1fr` alone still isn't true centering, though: fr tracks only
     split *leftover* space equally — each track's own floor is its content's
     min-content width first, so a wider left cluster than Book Now (or vice
     versa) makes the two 1fr tracks different sizes and drags the centered
     column off-center. Pin both outer columns to the same fixed width
     instead (comfortably wider than either side's content) so they're
     identical by construction, not by coincidence of matching content
     widths. #qc-nav-actions is left with nothing to show at this breakpoint
     (its tel link is hidden below, and lang/Book Now have been moved out of
     it) but is still a real DOM child with no explicit grid-column — left
     alone it becomes an unplaced auto-positioned grid item competing with
     #qc-left-cluster for the first grid column. Take it out of the grid
     layout entirely rather than reason about where the auto-placement
     algorithm parks an empty box. */
  #qc-nav-row {
    display: grid;
    grid-template-columns: 140px auto 140px;
    align-items: center;
    gap: 0.5rem;
  }
  #qc-nav-actions {
    display: none !important;
  }
  #qc-left-cluster {
    grid-column: 1;
    justify-self: start;
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }
  #qc-logo-link {
    grid-column: 2;
    justify-self: center;
  }
  #qc-booknow-btn {
    grid-column: 3;
    justify-self: end;
  }
}

/* The phone number, language button, and Book Now text were wrapping onto
   multiple lines ("Book" / "Now", "+91" / "74280" / "95672") once squeezed —
   none of them had whitespace-nowrap, so shrinking flex items let their text
   wrap instead of just crowding. Keep every label on one line everywhere. */
#qc-nav-actions a[href^="tel:"],
#qc-nav-actions button,
#qc-nav-actions a[href*="bookings."],
#qc-lang-btn,
#qc-booknow-btn {
  white-space: nowrap;
}

@media (max-width: 829px) {
  /* #qc-nav-row's 2rem gap exists to stop the (visible, partial) nav links
     from crashing into the logo on desktop widths — below 830px the nav is
     hidden entirely, so that gap just wastes space the phone/language/Book
     Now cluster badly needs on an actual phone screen. */
  #qc-nav-row {
    gap: 0.5rem;
  }
}

@media (max-width: 1229px) {
  /* Nav-bar phone link is replaced by the floating Call button (below) at and
     under the width where the hamburger/progressive-collapse system already
     needs the horizontal room — not just on narrow phones. */
  #qc-nav-actions a[href^="tel:"] {
    display: none;
  }
}

/* Property name (was `hidden sm:block` — invisible below 640px entirely).
   Shown in full at every width now — the mobile top bar is just logo +
   hamburger (phone/language/Book Now moved into the dropdown), so there's no
   longer a space fight that needs truncating this down. */

#why .group.grad-border-hover > div:first-child {
  transition: background 0.3s;
}
#why .group.grad-border-hover:hover > div:first-child {
  background: linear-gradient(135deg, #7357FF, #FF8A45) !important;
}

#contact > div > div:first-child {
  padding-bottom: 2rem;
  border-bottom: 1px solid #E5E7EB;
}

@media (max-width: 767px) {
  #gallery img {
    object-fit: cover !important;
    width: 100% !important;
    height: 100% !important;
  }
}

/* Section (widget) spacing: py-28 (112px top+bottom) is generous on desktop
   but excessive on mobile, forcing a lot of scrolling through empty gaps
   between widgets. Tighten it up on small screens. */
@media (max-width: 767px) {
  #about, #why, #rooms, #amenities, #restaurants, #location, #offers,
  #gallery, #testimonials, #faq, #contact {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }
}

/* Footer policy links: 4 links (Privacy Policy / Terms & Conditions /
   Cancellation Policy / Sitemap) in one non-wrapping row overflow a mobile
   viewport (they need ~430px+ together). Let them wrap and center instead. */
@media (max-width: 639px) {
  #qc-footer-policy-links {
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 0.75rem;
    column-gap: 1.25rem;
    /* On mobile (flex-col), show the policy links above the copyright line
       instead of below it — reorder visually without touching DOM order. */
    order: -1;
  }
}

.btn-rainbow.block {
  display: block;
  width: 100%;
}

/* Book Now CTA inside the hamburger dropdown: was full-bleed width + tall
   padding, which looked fine at real mobile widths but oversized now that the
   dropdown also shows on tablet/small-laptop widths (up to 1230px). Cap it to
   a sensible button size and center it instead of stretching edge-to-edge. */
#qc-mobile-panel a[href*="bookings.artserviceapartment.com"] {
  display: flex !important;
  max-width: 280px;
  margin: 0 auto !important;
  padding-top: 0.75rem !important;
  padding-bottom: 0.75rem !important;
}

/* Back to Top button (injected by js/qc-fixes.js) */
#qc-back-to-top {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 44px;
  height: 44px;
  border-radius: 9999px;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #7357FF 0%, #C344D8 50%, #FF8A45 100%);
  color: #fff;
  box-shadow: 0 8px 24px rgba(115, 87, 255, 0.35);
  z-index: 60;
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
#qc-back-to-top.qc-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
#qc-back-to-top:hover {
  filter: brightness(1.08);
}
@media (max-width: 640px) {
  #qc-back-to-top {
    right: 14px;
    bottom: 14px;
    width: 40px;
    height: 40px;
  }
}

/* Floating Call button (injected by js/qc-fixes.js): stacked directly above
   Back to Top, same right offset, so the two never overlap at any width. */
#qc-float-phone-wrap {
  position: fixed;
  right: 20px;
  bottom: 76px;
  z-index: 60;
  display: none;
}
@media (max-width: 1229px) {
  #qc-float-phone-wrap {
    display: block;
  }
}
#qc-float-phone {
  width: 44px;
  height: 44px;
  border-radius: 9999px;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #7357FF 0%, #C344D8 50%, #FF8A45 100%);
  color: #fff;
  box-shadow: 0 8px 24px rgba(115, 87, 255, 0.35);
  transition: filter 0.2s ease;
}
#qc-float-phone:hover {
  filter: brightness(1.08);
}
#qc-float-phone-tooltip {
  position: absolute;
  right: 52px;
  bottom: 50%;
  transform: translateY(50%);
  white-space: nowrap;
  background: #0A0A14;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  padding: 0.5rem 0.9rem;
  border-radius: 9999px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
#qc-float-phone-tooltip.qc-visible {
  opacity: 1;
}
@media (max-width: 640px) {
  #qc-float-phone-wrap {
    right: 14px;
    bottom: 64px;
  }
  #qc-float-phone {
    width: 40px;
    height: 40px;
  }
}

/* Reviews slide indicator (injected by js/qc-fixes.js) — the slider/auto-scroll
   is mobile-only (desktop keeps the original static 3-column grid), so the
   indicator only needs to show on mobile too. */
#qc-reviews-dots {
  display: none;
  justify-content: center;
  gap: 6px;
  margin-top: 20px;
}
@media (max-width: 767px) {
  #qc-reviews-dots {
    display: flex;
  }
}
#qc-reviews-dots button {
  width: 6px;
  height: 6px;
  border-radius: 9999px;
  border: none;
  padding: 0;
  background: #E5E7EB;
  transition: all 0.3s;
}
#qc-reviews-dots button.qc-active {
  width: 22px;
  background: linear-gradient(135deg, #7357FF, #FF8A45);
}

/* Offers highlight strip (injected by js/qc-fixes.js) — sits between the
   Special Offers heading and the 3 offer cards, gradient border in the same
   #7357FF / #C344D8 / #FF8A45 brand gradient the Early Bird card uses. */
#qc-offer-highlight {
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: 1000px;
  margin: 0 auto 40px;
  padding: 16px 16px 16px 20px;
  border: 1.5px solid transparent;
  border-radius: 9999px;
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(135deg, #7357FF 0%, #C344D8 50%, #FF8A45 100%) border-box;
  box-shadow: 0 8px 24px rgba(115, 87, 255, 0.12);
}
#qc-offer-highlight .qc-oh-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #7357FF20, #FF8A4520);
  color: #7357FF;
}
#qc-offer-highlight .qc-oh-text {
  flex: 1;
  margin: 0;
  font-family: var(--font-playfair), Georgia, serif;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.35;
  color: #1A1A2A;
}
#qc-offer-highlight .qc-oh-cta {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 9999px;
  background: linear-gradient(135deg, #7357FF 0%, #C344D8 50%, #FF8A45 100%);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  transition: filter 0.2s ease, gap 0.2s ease;
}
#qc-offer-highlight .qc-oh-cta:hover {
  filter: brightness(1.08);
  gap: 12px;
}
@media (max-width: 767px) {
  #qc-offer-highlight {
    flex-direction: column;
    text-align: center;
    gap: 12px;
    margin-bottom: 32px;
    padding: 20px 18px;
    border-radius: 24px;
  }
  #qc-offer-highlight .qc-oh-text {
    font-size: 17px;
  }
}

/* Discount badge on the Last Minute Deal / Basic Rate offer cards (rendered by
   the offers component itself; the card carries `relative`). */
.qc-offer-badge {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 2;
  padding: 8px 14px;
  border-radius: 9999px;
  background: linear-gradient(135deg, #7357FF 0%, #C344D8 50%, #FF8A45 100%);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1;
  box-shadow: 0 6px 18px rgba(115, 87, 255, 0.35);
  pointer-events: none;
}