/* ═══════════════════════════════════════════════════════════════
   BOOKING INQUIRY — PAGE-SPECIFIC STYLES
   Reuses every color, font, spacing unit, radius, shadow and
   button style already defined in style.css / villa-details.css.
   No new colors, no glassmorphism, no neon, no extra gradients.
   ═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════
   PAGE TRANSITION (entrance)
   Fade-in + slight upward movement, cinematic and understated.
═══════════════════════════════════════ */
body.bi-page {
  /* backwards (not "both"): keeps the from-keyframe applied before the
     animation starts so there's no flash of unstyled content, but does
     NOT leave transform/filter permanently on <body> once the animation
     finishes. A lingering transform/filter on <body> creates a new
     "containing block" for position:fixed children, which was making
     Razorpay's fixed-position checkout overlay position itself relative
     to <body> instead of the viewport — clipped/offset instead of
     full-screen. */
  animation: bi-page-in 0.65s cubic-bezier(.22,.61,.36,1) backwards;
}

@keyframes bi-page-in {
  from { opacity: 0; transform: translateY(22px); filter: blur(4px); }
  to   { opacity: 1; transform: translateY(0);     filter: blur(0); }
}

@media (prefers-reduced-motion: reduce) {
  body.bi-page { animation: none; }
}

/* ═══════════════════════════════════════
   NAVBAR OVERRIDE — solid black band, rounded bottom corners
   Same treatment as the Villa Details page's navy override,
   just swapped to black per the reference design. Pulls the
   navbar out of its floating/absolute state into normal flow
   since this page's hero already carries its own dark overlay.
═══════════════════════════════════════ */
body.bi-page .en-navbar {
  position: relative;
  top: 0;
  left: auto;
  right: auto;
  background: #1E1E1E;
  border-radius: 0 0 28px 28px;
  padding: 18px var(--gutter) 18px;
  animation: none;
}

body.bi-page .en-nav-inner {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* ═══════════════════════════════════════════════════════════════
   LOCAL COPIES — page-owned duplicates of classes originally
   defined in style.css / villa-details.css.

   Why: this page reused those shared classes directly, so editing
   them here meant editing style.css/villa-details.css itself,
   which then changed the homepage and villa-details page too.

   Everything below has the SAME class name and SAME values as the
   shared file, but lives only in this file. Because it's declared
   after the shared stylesheets in the <link> order and has the
   same selector specificity, it quietly takes over on THIS page
   only — style.css and villa-details.css are untouched and still
   drive every other page exactly as before.

   Edit values here freely; nothing outside booking-inquiry.html
   will ever be affected.
═══════════════════════════════════════════════════════════════ */

/* -- from villa-details.css -- */
.vd-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.vd-breadcrumb {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'Mulish', sans-serif;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--mid-gray);
  transition: color 0.3s ease;
}

.vd-breadcrumb:hover { color: var(--gold-dark); }

.vd-booking { position: sticky; top: 24px; }

.vd-booking-card {
  background: var(--white);
  border-radius: 16px;
  padding: 28px;
  box-shadow: 0 20px 50px rgba(30,20,10,0.08);
}

/* -- from style.css -- */
.en-villa-photo {
  position: relative;
  height: 300px;
  overflow: hidden;
}

.en-villa-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(.2,.7,.3,1);
}

.en-villa-body { padding: 26px 30px 30px; }

.en-villa-name {
  font-family: Georgia, serif;
  font-weight: 500;
  font-size: 28px;
  color: var(--charcoal);
  margin-bottom: 12px;
}

.en-villa-desc {
  font-family: 'Mulish', sans-serif;
  font-size: 14.5px;
  font-weight: 300;
  line-height: 1.7;
  color: var(--mid-gray);
  margin-bottom: 18px;
}

.en-villa-amenities {
  display: flex;
  gap: 34px;
  margin-bottom: 26px;
}

.en-villa-amenity {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-family: 'Mulish', sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: #4B4B47;
}

.en-villa-amenity svg { color: #C99A2E; }

.en-label-gold {
  font-family: 'Mulish', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: #234630;
  margin-bottom: 18px;
  display: block;
}

.en-cta-inner .en-label-gold {
  text-align: center;
  color: var(--gold-light);
}

.en-story-heading {
  font-family: Georgia, serif;
  font-weight: 500;
  font-size: 44px;
  line-height: 1.15;
  color: var(--charcoal);
  margin-bottom: 26px;
}

.en-story-body {
  font-family: 'Mulish', sans-serif;
  font-size: 15.5px;
  font-weight: 300;
  line-height: 1.8;
  color: #6E6D68;
  margin-bottom: 18px;
  max-width: 560px;
}

.en-btn-gold-block {
  display: block;
  width: 100%;
  text-align: center;
  font-family: 'Mulish', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--charcoal);
  background: linear-gradient(180deg, var(--gold-light), var(--gold));
  padding: 16px;
  border-radius: 12px;
  border: none;
  cursor: pointer;
  margin-top: 6px;
  transition: transform 0.3s;
}

.en-btn-gold-block:hover { transform: translateY(-2px); }

.en-btn-gold-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'Mulish', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--charcoal);
  background: linear-gradient(180deg, #C9A76D, #E3CEA9);
  padding: 18px 32px;
  border-radius: 30px;
  transition: transform 0.3s;
}

.en-btn-gold-pill:hover { transform: translateY(-2px); }

.en-btn-outline-cta {
  display: inline-flex;
  align-items: center;
  font-family: 'Mulish', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--white);
  border: 1.5px solid rgba(255,255,255,0.7);
  padding: 18px 32px;
  border-radius: 30px;
  transition: background 0.3s, color 0.3s;
}

.en-btn-outline-cta:hover {
  background: var(--white);
  color: var(--charcoal);
}

.en-cta {
  position: relative;
  overflow: hidden;
  padding: 130px var(--gutter) 150px;
}

.en-cta-bg { position: absolute; inset: 0; z-index: 0; }
.en-cta-bg img { width: 100%; height: 100%; object-fit: cover; }

.en-cta-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10,14,24,0.55) 0%, rgba(10,14,24,0.72) 100%);
}

.en-cta-inner {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
}

.en-cta-heading {
  font-family: Georgia, serif;
  font-weight: 500;
  font-size: 50px;
  line-height: 1.2;
  color: var(--white);
  margin-bottom: 36px;
}

.en-cta-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
}

/* -- responsive versions of the copies above -- */
@media (max-width: 900px) {
  .en-villa-amenities { flex-wrap: wrap; gap: 18px; }
}

@media (max-width: 768px) {
  .en-story-heading { font-size: 32px; }
  .en-cta-heading { font-size: 32px; }
}

@media (max-width: 600px) {
  .en-villa-amenities { gap: 16px; row-gap: 16px; }
}

@media (max-width: 480px) {
  .en-cta-heading { font-size: 26px; }
  .en-cta-actions { flex-direction: column; }
}

/* ═══════════════════════════════════════
   SECTION 01 — HERO
   Same construction as .ab-hero (about page): full-bleed image,
   dark overlay, slow zoom. Shorter than the homepage hero since
   the heading now lives in the intro band below it.
═══════════════════════════════════════ */
.bi-hero {
  position: relative;
  min-height: clamp(320px, 44vh, 460px);
  overflow: hidden;
}

.bi-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.bi-hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: en-hero-zoom 14s ease-out both;
}

.bi-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10,12,20,0.30) 0%, rgba(10,12,20,0.58) 100%);
}

/* ═══════════════════════════════════════
   INTRO — Step label / heading / description
═══════════════════════════════════════ */
.bi-intro {
  background: var(--cream-1);
  padding: 34px 0 8px;
}

.bi-intro .vd-breadcrumb {
  margin-bottom: 18px;
}

.bi-intro-label {
  margin-bottom: 14px;
}

/* ═══════════════════════════════════════
   BOOKING STEP NAVIGATION — Search → Hotel → Guest
   A full-width pill card; the active step becomes a solid
   charcoal pill, done steps get a gold check, upcoming steps
   stay muted. Reuses --gold / --gold-dark / --charcoal / --mid-gray.
═══════════════════════════════════════ */
.bi-steps-bar {
  background: var(--white);
  border: 1px solid rgba(0,0,0,0.07);
  border-radius: 999px;
  box-shadow: 0 14px 34px rgba(30,20,10,0.05);
  padding: 12px 30px;
  margin: 4px 0 30px;
}

.bi-steps {
  display: flex;
  align-items: center;
  list-style: none;
  padding: 0;
  margin: 0;
}

.bi-step {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.bi-step-inner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px;
  border-radius: 999px;
  transition: background 0.35s ease, padding 0.35s ease;
}

.bi-step-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: 50%;
  font-family: 'Mulish', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--mid-gray);
  background: var(--white);
  border: 1.5px solid var(--light-gray);
  transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

.bi-step-label {
  font-family: 'Mulish', sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mid-gray);
  white-space: nowrap;
  transition: color 0.3s ease;
}

.bi-step-sep {
  flex: 1 1 auto;
  min-width: 40px;
  height: 1px;
  background: var(--light-gray);
  margin: 0 18px;
}

.bi-step.is-done .bi-step-dot {
  background: linear-gradient(180deg, var(--gold-light), var(--gold));
  border-color: var(--gold);
  color: var(--charcoal);
}

.bi-step.is-done .bi-step-label { color: var(--gold-dark); }

.bi-step.is-active .bi-step-inner {
  background: var(--charcoal);
  padding: 6px 22px 6px 6px;
}

.bi-step.is-active .bi-step-dot {
  background: var(--white);
  border-color: var(--white);
  color: var(--charcoal);
}

.bi-step.is-active .bi-step-label { color: var(--white); }

@media (max-width: 640px) {
  .bi-steps-bar { padding: 10px 16px; border-radius: 28px; }
  .bi-step-inner { gap: 8px; }
  .bi-step.is-active .bi-step-inner { padding: 5px 16px 5px 5px; }
  .bi-step-sep { margin: 0 10px; min-width: 16px; }
  .bi-step-dot { width: 28px; height: 28px; font-size: 12px; }
  .bi-step-label { font-size: 11px; }
}

.bi-intro-heading {
  font-size: 40px;
  margin-bottom: 14px;
}

.bi-intro-body {
  max-width: 620px;
  margin-bottom: 0;
}

/* ═══════════════════════════════════════
   MAIN LAYOUT — content column + sticky summary sidebar
   Same two-column ratio and gap as the Villa Details page.
═══════════════════════════════════════ */
.bi-main {
  background: var(--cream-1);
  padding: 2px 0 60px;
}

.bi-main-grid {
  display: grid;
  grid-template-columns: 1.7fr 1fr;
  gap: 28px;
  align-items: start;
}

.bi-content {
  display: flex;
  flex-direction: column;
  gap: 28px;
  background: var(--white);
  border-radius: 16px;
  box-shadow: 0 20px 50px rgba(30,20,10,0.06);
  padding: 22px;
}

/* ═══════════════════════════════════════
   SECTION 02 — FEATURED ROOM
   Horizontal row: photo left, content right — matches the PDF.
   Built on the existing .en-villa-card system (radius, shadow,
   fonts, spacing all reused), just laid out as a row instead of
   a stacked photo-on-top card.
═══════════════════════════════════════ */
.bi-featured-card {
  margin: 0;
  display: flex;
  align-items: stretch;
}

.bi-featured-photo {
  flex: 0 0 260px;
  width: 320px;
  height: auto;
  border-radius: 16px;
  overflow: hidden;
}

.bi-featured-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.bi-featured-top-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.bi-badge-seller {
  display: inline-flex;
  align-items: center;
  font-family: 'Mulish', sans-serif;
  font-size: 11px;
  letter-spacing: 0.08em;
  padding: 10px 18px;
  border-radius: 20px;
  background: linear-gradient(180deg, var(--gold-light), var(--gold));
  color: var(--charcoal);
  font-weight: 700;
}

.bi-featured-price {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0;
  line-height: 1.3;
  flex-shrink: 0;
}

.bi-price-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--mid-gray);
}

.bi-featured-price strong {
  font-family: Georgia, serif;
  font-size: 26px;
  font-weight: 500;
  color: var(--charcoal);
}

.bi-price-unit {
  font-size: 10.5px;
  color: var(--mid-gray);
}

/* Small alternate suite-count price hint on the top villa card only
   (e.g. "2 Suites — ₹21,250/night") — see gocart/views/ui/booking-inquiry.php
   and build_booking_inquiry_villas() in gocart/helpers/villa_helper.php. */
.bi-price-alt {
  display: block;
  font-size: 10.5px;
  color: var(--mid-gray);
  font-style: italic;
  margin-top: 2px;
  white-space: nowrap;
}

.bi-amenities { flex-wrap: wrap; gap: 26px; margin-bottom: 22px; }

/* ═══════════════════════════════════════
   QUICK FACTS ROW (guests / suites / baths)
   + divider before the amenity icons.
   Reuses --charcoal, --light-gray, Mulish stack only.
═══════════════════════════════════════ */
.bi-quick-facts {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'Mulish', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #69625A;
  margin-bottom: 18px;
}

.bi-quick-facts-sep {
  color: var(--light-gray);
  font-weight: 400;
}

.bi-amenities-divider {
  border: none;
  height: 1px;
  background: rgba(0,0,0,0.08);
  margin: 0 0 20px;
}

.bi-hotel-details-toggle,
.bi-explore-link {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  border: none;
  background: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  font-family: 'Mulish', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--charcoal);
  text-align: left;
}

.bi-hotel-details-toggle:hover,
.bi-explore-link:hover {
  color: var(--gold-dark);
}

.bi-accordion-toggle:focus,
.bi-accordion-toggle:focus-visible {
  outline: none;
}

.bi-accordion-toggle svg {
  transition: transform 0.3s ease;
}

.bi-accordion-toggle[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

/* ═══════════════════════════════════════
   SECTION 03 — BOOKING PACKAGES
   New card type, styled strictly with existing tokens: same
   radius scale as en-villa-card (16px), same border treatment
   as vd-booking-field, same gold accent for the selected state.
═══════════════════════════════════════ */

.bi-packages {
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow: hidden;
  max-height: 1200px;
  opacity: 1;
  margin-top: 0;
  transition: max-height 350ms ease-in-out,
              opacity 350ms ease-in-out,
              padding 350ms ease-in-out,
              margin 350ms ease-in-out;
}

.bi-packages.is-collapsed {
  max-height: 0;
  opacity: 0;
  margin-top: -14px;
  padding-top: 0;
  padding-bottom: 0;
}

.bi-package-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  text-align: left;
  background: var(--white);
  border: 1.5px solid rgba(0,0,0,0.08);
  border-radius: 16px;
  padding: 22px 26px;
  cursor: pointer;
  font-family: 'Mulish', sans-serif;
  transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease, background 0.3s ease;
}

.bi-package-card:hover {
  border-color: rgba(201,167,109,0.55);
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(30,20,10,0.07);
}

.bi-package-card.is-selected,
.bi-package-card.is-companion {
  border-color: var(--gold);
  background: linear-gradient(135deg, rgba(201,167,109,0.09), rgba(227,206,169,0.14));
  box-shadow: 0 18px 40px rgba(30,20,10,0.1);
}

.bi-package-name {
  font-family: Georgia, serif;
  font-weight: 500;
  font-size: 18px;
  color: var(--charcoal);
  margin-bottom: 0;
}

.bi-package-header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 14px;
  margin-bottom: 12px;
}

.bi-package-discount {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--gold-dark);
  white-space: nowrap;
}

.bi-package-discount svg { flex-shrink: 0; }

.bi-package-features {
  display: flex;
  flex-direction: column;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.bi-feature {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--mid-gray);
}

.bi-feature svg { flex-shrink: 0; color: var(--mid-gray); }

.bi-package-price {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  flex-shrink: 0;
}

.bi-package-price strong {
  font-family: Georgia, serif;
  font-size: 22px;
  font-weight: 500;
  color: var(--charcoal);
}

.bi-package-btn {
  display: inline-block;
  margin-top: 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--charcoal);
  background: var(--white);
  border: 1.5px solid rgba(0,0,0,0.14);
  border-radius: 20px;
  padding: 8px 18px;
  transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

.bi-package-card.is-selected .bi-package-btn,
.bi-package-card.is-companion .bi-package-btn {
  background: linear-gradient(180deg, var(--gold-light), var(--gold));
  border-color: transparent;
  color: var(--charcoal);
}

.bi-package-card--static {
  cursor: default;
}

.bi-package-card--static:hover {
  transform: none;
}

a.bi-package-btn {
  text-decoration: none;
  cursor: pointer;
}

a.bi-package-btn:hover {
  border-color: rgba(201,167,109,0.6);
}

/* ═══════════════════════════════════════
   SECTION 04 — EXPLORE OTHER ROOM CATEGORIES
   Compact horizontal rows (thumbnail + content), matching the
   PDF exactly — same row pattern as the package cards above,
   not a large stacked photo card.
═══════════════════════════════════════ */
.bi-explore {
  margin-top: px;
  padding-top: 28px;
  border-top: 1px solid rgba(0,0,0,0.08);
}

.bi-explore-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.bi-explore-header .en-label-gold { margin-bottom: 0; }

.bi-explore-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.bi-explore-item {
  display: flex;
  flex-direction: column;
}

.bi-explore-item .bi-packages {
  margin-top: 14px;
}

.bi-explore-item .bi-packages.is-collapsed {
  margin-top: 0;
}

.bi-explore-row {
  display: flex;
  align-items: center;
  gap: 24px;
  width: 100%;
  background: var(--white);
  border: 1.5px solid rgba(0,0,0,0.08);
  border-radius: 16px;
  padding: 16px;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.bi-explore-row:hover {
  border-color: lab(70.29% 4.84 34.57 / 0.55);
  box-shadow: 0 16px 34px rgba(30,20,10,0.07);
}

/* Selected villa (set via JS from the incoming ?villa= param / booking-inquiry.js) */
.bi-explore-item.is-selected .bi-explore-row {
  border-color: var(--gold);
  background: linear-gradient(135deg, rgba(201,167,109,0.09), rgba(227,206,169,0.14));
  box-shadow: 0 18px 40px rgba(30,20,10,0.1);
}

.bi-explore-row-img {
  flex: 0 0 240px;
  width: 240px;
  height: 190px;
  border-radius: 12px;
  overflow: hidden;
}

.bi-explore-row-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bi-explore-row-body {
  flex: 1;
  min-width: 0;
}

.bi-explore-row-label {
  display: block;
  margin-bottom: 4px;
}

.bi-explore-card .en-villa-name { font-size: 19px; margin-bottom: 0; }
.bi-explore-card .en-villa-desc { font-size: 13px; margin: 6px 0 10px; }
.bi-explore-card .bi-amenities { gap: 16px; margin-bottom: 8px; flex-wrap: wrap; }

.bi-badge-seller--inline {
  display: inline-flex;
  padding: 4px 12px;
  font-size: 10px;
  margin-bottom: 6px;
}

.bi-explore-price-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.bi-explore-price {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  flex-shrink: 0;
  line-height: 1.25;
}

.bi-explore-price strong {
  font-family: Georgia, serif;
  font-size: 17px;
  font-weight: 500;
  color: var(--charcoal);
}

.bi-explore-link { margin-top: 2px; display: inline-flex; }

/* ═══════════════════════════════════════
   BOOKING SUMMARY SIDEBAR
   Reuses .vd-booking / .vd-booking-card verbatim; only the
   inner content markup is new, styled with the same field
   pattern as .vd-booking-field / .vd-guests.
═══════════════════════════════════════ */
.bi-summary { top: 24px; }

.bi-summary-label { margin-bottom: 6px; }

.bi-summary-title {
  font-family: Georgia, serif;
  font-weight: 500;
  font-size: 22px;
  color: var(--charcoal);
  margin-bottom: 22px;
}

.bi-summary-field {
  border-top: 1px solid rgba(0,0,0,0.08);
  padding: 14px 0;
}

.bi-summary-field:first-of-type { border-top: none; padding-top: 0; }

.bi-summary-field label {
  display: block;
  font-family: 'Mulish', sans-serif;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--mid-gray);
  margin-bottom: 6px;
}

.bi-summary-value {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Mulish', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--charcoal);
}

.bi-summary-value svg { color: var(--gold-dark); flex-shrink: 0; }

.bi-summary-sub {
  display: block;
  margin-top: 4px;
  margin-left: 22px;
  font-size: 11.5px;
  color: var(--mid-gray);
}

.bi-summary-breakdown {
  border-top: 1px solid rgba(0,0,0,0.08);
  padding: 16px 0;
  margin-bottom: 6px;
}

.bi-summary-empty {
  font-family: Georgia, serif;
  font-style: italic;
  font-size: 13px;
  color: var(--mid-gray);
}

.bi-summary-breakdown.has-selection .bi-summary-empty { display: none; }

.bi-breakdown-row {
  display: none;
  align-items: center;
  justify-content: space-between;
  font-family: Georgia, serif;
  font-size: 13px;
  color: var(--mid-gray);
  padding: 5px 0;
}

.bi-summary-breakdown.has-selection .bi-breakdown-row { display: flex; }

.bi-breakdown-row--total {
  font-weight: 600;
  color: var(--charcoal);
  font-size: 15px;
  padding-top: 10px;
  margin-top: 4px;
  border-top: 1px solid rgba(0,0,0,0.08);
}

.bi-breakdown-row--discount {
  color: var(--gold-dark);
}

.bi-continue-btn { margin-top: 4px; }

.bi-secure-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 14px;
  font-family: 'Mulish', sans-serif;
  font-size: 11px;
  color: var(--mid-gray);
  text-align: center;
}

/* ═══════════════════════════════════════
   FINAL CTA — extra description line beneath the heading
   (kept in the same restrained size/spacing as the rest of
   the CTA content).
═══════════════════════════════════════ */
.bi-cta-desc {
  font-family: 'Mulish', sans-serif;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.7;
  color: rgba(255,255,255,0.82);
  margin: -12px auto 30px;
  max-width: 560px;
}

/* ═══════════════════════════════════════
   RESPONSIVE — same breakpoint scale as the rest of the site
═══════════════════════════════════════ */
@media (max-width: 1200px) {
  .bi-intro-heading { font-size: 42px; }
}

@media (max-width: 1024px) {
  .bi-main-grid { grid-template-columns: 1fr; }
  .bi-summary { position: static; max-width: 480px; }
}

@media (max-width: 900px) {
  .bi-package-card { flex-direction: column; align-items: flex-start; gap: 16px; }
  .bi-package-price { align-items: flex-start; width: 100%; }
  .bi-package-btn { align-self: flex-start; }
}

@media (max-width: 560px) {
  .bi-explore-row { flex-direction: column; align-items: stretch; }
  .bi-explore-row-img { width: 100%; flex-basis: auto; height: 200px; }
}

@media (max-width: 768px) {
  .bi-intro-heading { font-size: 34px; }
  .bi-content { padding: 22px; }
  .bi-featured-card { flex-direction: column; }
  .bi-featured-photo { width: 100%; flex-basis: auto; height: 240px; }
  .bi-featured-body { padding: 22px 4px 0; }
}

@media (max-width: 600px) {
  .bi-intro { padding-top: 26px; }
  .bi-main { padding-top: 30px; }
  .bi-explore-header { flex-direction: column; align-items: flex-start; gap: 14px; }
}

/* ═══════════════════════════════════════
   GUEST FORM — Step 3
   Step transition (Hotel <-> Guest) + card flip on submit.
═══════════════════════════════════════ */
.is-hidden { display: none !important; }

/* ═══════════════════════════════════════
   RAZORPAY CHECKOUT — force full-screen, correctly
   positioned overlay no matter what else is on the page
   (guards against ad-blocker / dark-mode extensions and
   any stacking-context interference).
═══════════════════════════════════════ */
.razorpay-container,
#razorpay-checkout-frame-container,
iframe[name="razorpay-checkout-frame"],
iframe#razorpay-checkout-frame {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  max-width: 100vw !important;
  max-height: 100vh !important;
  margin: 0 !important;
  z-index: 2147483647 !important;
}

/* Step swap animation */
.bi-hotel-step,
.bi-guest-step {
  animation: biStepIn 0.5s cubic-bezier(.2,.7,.3,1);
}

.bi-hotel-step.bi-step-leave,
.bi-guest-step.bi-step-leave {
  animation: biStepOut 0.3s ease forwards;
}

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

@keyframes biStepOut {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(-14px); }
}

/* Flip scene */
.bi-flip-scene {
  perspective: 1800px;
}

.bi-flip-card {
  display: grid;
  transform-style: preserve-3d;
  transition: transform 0.9s cubic-bezier(.45,.05,.15,1);
}

.bi-flip-card.is-flipped { transform: rotateY(180deg); }

.bi-flip-front,
.bi-flip-back {
  grid-area: 1 / 1;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.bi-flip-back {
  transform: rotateY(180deg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 14px;
  background: var(--white);
  border: 1.5px solid rgba(0,0,0,0.08);
  border-radius: 16px;
  padding: 60px 40px;
}

.bi-guest-confirm-box h3 {
  font-family: Georgia, serif;
  font-weight: 500;
  font-size: 24px;
  color: var(--charcoal);
}

.bi-guest-confirm-box p {
  font-family: 'Mulish', sans-serif;
  font-size: 14px;
  color: var(--mid-gray);
  max-width: 380px;
  line-height: 1.7;
}

.bi-guest-confirm-box .en-btn-outline-cta { margin-top: 6px; }

.bi-confirm-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  color: var(--charcoal);
  background: linear-gradient(180deg, var(--gold-light), var(--gold));
}

/* Guest form box */
.bi-guest-form-box {
  background: var(--white);
  border: 1.5px solid rgba(0,0,0,0.08);
  border-radius: 16px;
  padding: 30px 34px;
}

.bi-form-row {
  display: flex;
  gap: 20px;
  margin-bottom: 18px;
}

.bi-form-field {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.bi-form-field label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: 'Mulish', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold-dark);
}

.bi-form-field input {
  font-family: 'Mulish', sans-serif;
  font-size: 14.5px;
  color: var(--charcoal);
  background: var(--cream-1);
  border: 1.5px solid rgba(0,0,0,0.08);
  border-radius: 10px;
  padding: 13px 16px;
  transition: border-color 0.3s ease, background 0.3s ease;
}

.bi-form-field input::placeholder { color: #A6A29A; }

.bi-form-field input:focus {
  outline: none;
  border-color: var(--gold);
  background: var(--white);
}

/* Phone dial-code prefix (value comes from the DB — eagle_billcountry) */
.bi-phone-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.bi-phone-code {
  flex-shrink: 0;
  font-family: 'Mulish', sans-serif;
  font-weight: 600;
  font-size: 14.5px;
  color: var(--charcoal);
  background: var(--cream-1);
  border: 1.5px solid rgba(0,0,0,0.08);
  border-radius: 10px;
  padding: 13px 14px;
  display: flex;
  align-items: center;
}

.bi-phone-group input {
  flex: 1;
  min-width: 0;
}

/* Simple math captcha — mirrors .captcha-input-fields on the Contact Us page */
.bi-captcha-fields {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.bi-captcha-question {
  font-family: 'Mulish', sans-serif;
  font-weight: 500;
  font-size: 14px;
  color: var(--charcoal);
  white-space: nowrap;
  flex-shrink: 0;
}

.bi-captcha-input {
  flex: 0.5;
  min-width: 0;
  width: 100%;
  font-family: 'Mulish', sans-serif;
  font-size: 14.5px;
  color: var(--charcoal);
  background: var(--cream-1);
  border: 1.5px solid rgba(0,0,0,0.08);
  border-radius: 10px;
  padding: 13px 16px;
}

.bi-captcha-input:focus {
  outline: none;
  border-color: var(--gold);
  background: var(--white);
}

.bi-captcha-refresh {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--mid-gray);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.4s ease, color 0.3s ease, background 0.3s ease;
  flex-shrink: 0;
}

.bi-captcha-refresh:hover {
  color: var(--gold-dark);
  background: rgba(201,167,109,0.12);
  transform: rotate(180deg);
}

/* GST-details toggle + mandatory Terms agreement — shared checkbox style */
.bi-checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  font-family: 'Mulish', sans-serif;
  font-size: 13.5px;
  color: var(--charcoal);
  line-height: 1.5;
}

.bi-checkbox-label input[type="checkbox"] {
  flex-shrink: 0;
  width: 17px;
  height: 17px;
  margin-top: 2px;
  accent-color: var(--gold-dark, var(--gold));
  cursor: pointer;
}

.bi-checkbox-label em { color: var(--mid-gray); font-style: normal; }

/* Privacy Policy / Terms & Conditions (real links) and Cancellation &
   Refund / Check-in & Check-out (popup triggers) inside the agreement
   text — same look for both <a> and <button> so they read as one style. */
.bi-policy-link {
  font: inherit;
  color: var(--gold-dark);
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  transition: color 0.2s ease;
}

.bi-policy-link:hover,
.bi-policy-link:focus-visible {
  color: var(--navy);
}

.bi-gst-toggle-row { margin-bottom: 14px; }

.bi-gst-fields {
  border-left: 2px solid var(--gold);
  padding-left: 16px;
  margin: 0 0 18px;
}

.bi-gst-fields.is-hidden { display: none; }

.bi-form-field--full { flex: 1 1 100%; }

.bi-agree-row {
  margin: 4px 0 14px;
}

.bi-form-status {
  font-family: 'Mulish', sans-serif;
  font-size: 13px;
  font-weight: 600;
  min-height: 18px;
  margin-bottom: 4px;
}

.bi-form-status.is-error { color: #B23A3A; }
.bi-form-status.is-success { color: #2E7D4F; }

.bi-form-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
}

.bi-form-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'Mulish', sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--mid-gray);
  background: none;
  border: none;
  cursor: pointer;
  transition: color 0.3s ease;
}

.bi-form-back:hover { color: var(--charcoal); }

.bi-submit-btn {
  font-family: 'Mulish', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--charcoal);
  background: linear-gradient(180deg, var(--gold-light), var(--gold));
  border: none;
  border-radius: 24px;
  padding: 14px 30px;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.bi-submit-btn:hover { transform: translateY(-2px); }
.bi-submit-btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }

@media (max-width: 640px) {
  .bi-form-row { flex-direction: column; gap: 16px; margin-bottom: 16px; }
  .bi-guest-form-box { padding: 24px 20px; }
  .bi-flip-back { padding: 44px 22px; }
  .bi-captcha-fields { gap: 8px; }
  .bi-captcha-question { font-size: 13px; }
  .bi-captcha-refresh { width: 34px; height: 34px; }
}

/* ═══════════════════════════════════════
   CANCELLATION & REFUND / CHECK-IN & CHECK-OUT — popup
   Same overlay + panel treatment as the Villa Details photo lightbox
   (.vd-lightbox), just swapped for a scrollable content card instead
   of an image. Body content is injected from the matching <template>
   in booking-inquiry.php — see initPolicyModal() in booking-inquiry.js.
═══════════════════════════════════════ */
.bi-policy-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.bi-policy-modal.is-open { opacity: 1; visibility: visible; }

.bi-policy-modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(8,10,18,0.7);
  cursor: pointer;
}

.bi-policy-modal-panel {
  position: relative;
  width: 100%;
  max-width: 560px;
  max-height: 82vh;
  overflow-y: auto;
  background: var(--white);
  border-radius: 14px;
  padding: 36px 34px;
  box-shadow: 0 24px 60px rgba(7, 18, 74, 0.25);
  transform: translateY(14px) scale(0.98);
  transition: transform 0.3s ease;
}

.bi-policy-modal.is-open .bi-policy-modal-panel { transform: translateY(0) scale(1); }

.bi-policy-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(7, 18, 74, 0.12);
  background: var(--cream-1);
  color: var(--charcoal);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.bi-policy-modal-close:hover { background: rgba(201,167,109,0.16); border-color: var(--gold); }

.bi-policy-modal-body h3 {
  font-family: Georgia, serif;
  font-size: 19px;
  font-weight: 600;
  color: var(--navy);
  margin: 0 0 18px;
  padding-right: 26px;
}

.bi-policy-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.bi-policy-list li {
  font-family: 'Mulish', sans-serif;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--charcoal);
}

.bi-policy-list li strong { color: var(--navy); font-weight: 700; }

.bi-policy-note {
  margin: 16px 0 0;
  font-family: 'Mulish', sans-serif;
  font-size: 13px;
  line-height: 1.65;
  color: var(--mid-gray);
}

body.bi-modal-lock { overflow: hidden; }

@media (max-width: 640px) {
  .bi-policy-modal-panel { padding: 30px 22px; }
}