/* ==========================================================================
   OotyBookings.com — Premium Design System
   ========================================================================== */

:root {
  /* Editorial palette — shared with the Parcel-style header (ph- tokens) so the
     whole site reads as one designed system, not two templates stitched together. */
  --forest: #24402F;       /* deep Nilgiri pine — primary brand ink-green */
  --forest-dark: #16281D;
  --forest-light: #3C5B47;
  --gold: #A47A2E;         /* antique brass — was a saturated yellow-gold */
  --gold-light: #C7A25A;
  --orange: #A04A2C;       /* muted terracotta, used sparingly (call CTA) */
  --white: #FFFFFF;
  --ink: #1C221F;
  --muted: #6B7269;
  --bg-soft: #F4F4EF;
  --border-soft: #E3E1D8;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  --shadow-sm: 0 4px 14px rgba(28, 34, 31, 0.07);
  --shadow-md: 0 12px 32px rgba(28, 34, 31, 0.10);
  --shadow-lg: 0 24px 60px rgba(28, 34, 31, 0.16);

  --gradient-forest: linear-gradient(135deg, #1E3626 0%, #2E4C3A 100%);
  --gradient-gold: linear-gradient(135deg, #A47A2E 0%, #C7A25A 100%);
  --gradient-hero-overlay: linear-gradient(180deg, rgba(15,20,17,.22) 0%, rgba(15,20,17,.2) 30%, rgba(14,18,15,.5) 60%, rgba(12,16,13,.9) 92%);
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
  width: 100%;
}

body {
  font-family: 'Inter', sans-serif;
  color: var(--ink);
  background: var(--white);
  overflow-x: hidden;
  width: 100%;
  position: relative;
}

h1, h2, h3, h4, h5, h6, .font-heading {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  letter-spacing: -0.01em;
}

a { text-decoration: none; }

.text-forest { color: var(--forest) !important; }
.text-gold { color: var(--gold) !important; }
.text-orange { color: var(--orange) !important; }
.text-muted-soft { color: var(--muted); }
.bg-forest { background: var(--forest) !important; }
.bg-soft { background: var(--bg-soft); }

.container-xl { max-width: 1280px; margin: 0 auto; padding: 0 1.25rem; }

/* ---------- Buttons ---------- */
.btn-brand, .btn-gold, .btn-outline-brand {
  font-family: 'Inter', sans-serif;
  font-size: .82rem;
  letter-spacing: .03em;
}

.btn-brand {
  background: var(--gradient-forest);
  color: #fff;
  border: none;
  border-radius: var(--radius-pill);
  padding: 0.75rem 1.75rem;
  font-weight: 600;
  transition: transform .25s ease, box-shadow .25s ease;
  box-shadow: var(--shadow-sm);
}
.btn-brand:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); color: #fff; }

.btn-gold {
  background: var(--gradient-gold);
  color: #fff;
  border: none;
  border-radius: var(--radius-pill);
  padding: 0.75rem 1.75rem;
  font-weight: 700;
  transition: transform .25s ease, box-shadow .25s ease;
}
.btn-gold:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); color: #fff; }

.btn-outline-brand {
  border: 1.5px solid var(--forest);
  color: var(--forest);
  border-radius: var(--radius-pill);
  padding: 0.65rem 1.6rem;
  font-weight: 600;
  background: transparent;
  transition: all .25s ease;
}
.btn-outline-brand:hover { background: var(--forest); color: #fff; }

/* Fix: Bootstrap's .btn-sm padding was being overridden by the larger
   .btn-brand / .btn-outline-brand / .btn-gold padding above (same CSS
   specificity, this file loads after Bootstrap). That made "small" pill
   buttons render at full size, so they wrapped their text and looked
   broken inside tight card layouts (e.g. tour package cards). */
.btn-brand.btn-sm,
.btn-outline-brand.btn-sm,
.btn-gold.btn-sm {
  padding: .45rem 1rem;
  font-size: .76rem;
  white-space: nowrap;
}
.btn-brand.btn-lg,
.btn-outline-brand.btn-lg,
.btn-gold.btn-lg {
  padding: .9rem 2.1rem;
  font-size: .92rem;
}

/* Fix: .btn-brand's default 1.75rem side padding + letter-spacing made the
   label overflow the pill when the button sits in a narrow grid column
   (e.g. the "Recommend" button on the Get Recommendations form). Give it
   its own compact, non-wrapping sizing instead of relying on w-100. */
.btn-recommend {
  width: 100%;
  padding: 0.75rem 0.75rem;
  font-size: .82rem;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (max-width: 767.98px) {
  .btn-recommend { padding: 0.75rem 1rem; }
}

/* ==========================================================================
   PARCEL-STYLE HEADER
   Palette: basalt ink, chalk/stone, antique brass. Fraunces (serif display)
   + Archivo (grotesque UI). Ported from the Parcel template's header module.
   ========================================================================== */
:root {
  --ph-ink:      #1C221F;
  --ph-slate:    #434A44;
  --ph-sage:     #7C857B;
  --ph-stone:    #C4C8BD;
  --ph-stone-2:  #D9DCD0;
  --ph-chalk:    #F4F4EF;
  --ph-white:    #FCFCF9;
  --ph-brass:    #9A7B44;
  --ph-brass-dk: #7C6234;
  --ph-serif: 'Inter', sans-serif;
  --ph-sans:  'Inter', sans-serif;
  --ph-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---------- Floating header shell ----------
   Fixed to the viewport so it can sit as a transparent glass layer on top of
   the hero photograph / forest-gradient page banners, then switch to a light
   chalk bar (like the rest of the site's cards) once the user scrolls.
   JS adds:
     - body.has-transparent-header  → on pages that open on dark imagery
     - .site-header.is-scrolled     → once the user scrolls, on every page
   Pages with no dark imagery under the header (plain white content) simply
   never get .has-transparent-header, so the header renders light/solid from
   the very first frame — no invisible white-on-white text.
   Header colours are driven by CSS variables so every child element (brand,
   nav links, buttons) flips between "white on dark" and "ink on chalk" from
   one place. */
.site-header {
  position: sticky;
  top: 0; left: 0; right: 0;
  z-index: 1050;
  background: var(--forest-dark);
  transition: background .4s var(--ph-ease), box-shadow .4s var(--ph-ease), backdrop-filter .4s var(--ph-ease);

  --hdr-fg: #fff;
  --hdr-fg-soft: rgba(244,244,239,.75);
  --hdr-border: rgba(244,244,239,.18);
  --hdr-brand-accent: var(--gold-light);
  --hdr-brand-sub: rgba(244,244,239,.6);
  --hdr-btn-border: rgba(244,244,239,.5);
  --hdr-btn-hover-bg: #fff;
  --hdr-btn-hover-fg: var(--forest-dark);
  --hdr-dropdown-bg: var(--forest-dark);
  --hdr-dropdown-border: rgba(244,244,239,.14);
  --hdr-dropdown-fg: rgba(244,244,239,.82);
}
/* The dark gradient lives on a pseudo-element (not on `background` itself),
   because browsers can't smoothly transition between a gradient and a solid
   colour — this way we only ever fade its opacity, which is reliable. */
.site-header::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(10,15,11,.6) 0%, rgba(10,15,11,.24) 65%, rgba(10,15,11,0) 100%);
  opacity: 0;
  transition: opacity .4s var(--ph-ease);
  pointer-events: none;
}
/* Hero / banner pages only: header stays the same solid brand-green bar as
   every other page — no transparent/see-through variant — for a single,
   consistent navbar colour that matches the footer everywhere. */
body.has-transparent-header .site-header {
  position: fixed;
  background: var(--forest-dark);
  box-shadow: 0 1px 0 rgba(0,0,0,.12), 0 18px 40px -30px rgba(0,0,0,.6);

  --hdr-fg: #fff;
  --hdr-fg-soft: rgba(244,244,239,.75);
  --hdr-border: rgba(244,244,239,.18);
  --hdr-brand-accent: var(--gold-light);
  --hdr-brand-sub: rgba(244,244,239,.6);
  --hdr-btn-border: rgba(244,244,239,.5);
  --hdr-btn-hover-bg: #fff;
  --hdr-btn-hover-fg: var(--forest-dark);
  --hdr-dropdown-bg: var(--forest-dark);
  --hdr-dropdown-border: rgba(244,244,239,.14);
  --hdr-dropdown-fg: rgba(244,244,239,.82);
}
body.has-transparent-header .site-header::before { opacity: 0; }
body.has-transparent-header .flash-alert-wrap { margin-top: calc(8.5rem + var(--promo-h)) !important; }

/* Scrolled state — same brand-green bar, just with a touch more depth/blur
   so it still reads as "lifted" once the page scrolls beneath it. */
.site-header.is-scrolled,
body.has-transparent-header .site-header.is-scrolled {
  background: rgba(22, 40, 29, .96);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 1px 0 rgba(0,0,0,.14), 0 18px 40px -30px rgba(0,0,0,.65);

  --hdr-fg: #fff;
  --hdr-fg-soft: rgba(244,244,239,.75);
  --hdr-border: rgba(244,244,239,.18);
  --hdr-brand-accent: var(--gold-light);
  --hdr-brand-sub: rgba(244,244,239,.6);
  --hdr-btn-border: rgba(244,244,239,.5);
  --hdr-btn-hover-bg: #fff;
  --hdr-btn-hover-fg: var(--forest-dark);
  --hdr-dropdown-bg: var(--forest-dark);
  --hdr-dropdown-border: rgba(244,244,239,.14);
  --hdr-dropdown-fg: rgba(244,244,239,.82);
}
.site-header.is-scrolled::before,
body.has-transparent-header .site-header.is-scrolled::before { opacity: 0; }

/* ---------- Offer ticker ---------- */
/* A slim, brand-coloured strip pinned to the very top of the header with a
   continuously scrolling row of live offers. Always visible (no dismiss/
   close control) — height is exposed as --promo-h so every fixed-header
   offset below (.hero, .page-header-banner, .flash-alert-wrap) can add it
   via calc() from one place. */
:root { --promo-h: 38px; }
@media (max-width: 767.98px) { :root { --promo-h: 34px; } }

.promo-ticker {
  background: var(--gradient-gold, linear-gradient(135deg, #caa24a, #e0b968));
  height: var(--promo-h);
  overflow: hidden;
}
.promo-ticker-inner {
  height: var(--promo-h);
  transition: height .35s var(--ph-ease);
  display: flex;
  align-items: center;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 1.25rem;
  gap: .75rem;
}
.promo-ticker-tag {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  background: rgba(28,34,31,.16);
  color: var(--forest-dark, #123a28);
  font-family: var(--ph-sans, 'Inter', sans-serif);
  font-weight: 700;
  font-size: .62rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: .3rem .6rem;
  border-radius: var(--radius-pill);
}
.promo-ticker-viewport {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
}
.promo-ticker-track {
  display: flex;
  align-items: center;
  width: max-content;
  white-space: nowrap;
  animation: promoScroll 26s linear infinite;
}
.promo-ticker.is-paused .promo-ticker-track,
.promo-ticker-viewport:hover .promo-ticker-track { animation-play-state: paused; }
.promo-ticker-item {
  display: inline-flex;
  align-items: center;
  gap: .9rem;
  color: #2a2410;
  font-family: var(--ph-sans, 'Inter', sans-serif);
  font-weight: 600;
  font-size: .74rem;
  letter-spacing: .01em;
  padding-right: .9rem;
}
.promo-ticker-dot { font-size: .3rem; color: rgba(42,36,16,.45); margin-left: .9rem; }
@keyframes promoScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .promo-ticker-track { animation: none; }
  .promo-ticker-viewport { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
}
@media (max-width: 575.98px) {
  .promo-ticker-tag span { display: none; }
  .promo-ticker-item { font-size: .68rem; gap: .7rem; padding-right: .7rem; }
}

/* ---------- Top bar ---------- */
.topbar {
  background: transparent;
  border-bottom: 1px solid var(--hdr-border);
  color: var(--hdr-fg-soft);
  font-family: var(--ph-sans);
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .06em;
  padding: .5rem 0;
  transition: border-color .4s var(--ph-ease), color .4s var(--ph-ease);
}
.topbar a { color: var(--hdr-fg); opacity: .82; }
.topbar a:hover { color: var(--hdr-brand-accent); opacity: 1; }

/* ---------- Brand (image logo) ----------
   Same logo file everywhere, but colour-adaptive: rendered white via filter
   while the header floats transparently over dark hero imagery, and shown
   in its natural forest/gold colours once the header solidifies to the
   light chalk bar (on scroll, or on pages that never had a transparent
   header to begin with). */
.navbar-brand-wrap { display: flex; align-items: center; min-width: 0; flex-shrink: 0; line-height: 1; }
.navbar-logo {
  height: 40px;
  width: auto;
  display: block;
  /* Header is solid brand-green everywhere now, so the logo is always
     rendered pure white — no colour switch on scroll or between pages. */
  filter: brightness(0) invert(1);
  transition: height .35s var(--ph-ease);
}
.site-header.is-scrolled .navbar-logo { height: 34px; }
@media (max-width: 767.98px) {
  .navbar-logo { height: 34px; }
  .site-header.is-scrolled .navbar-logo { height: 30px; }
}
@media (max-width: 400px) {
  .navbar-logo { height: 30px; }
}

/* ---------- Main navbar ---------- */
.main-navbar {
  background: transparent;
  border-bottom: 1px solid var(--hdr-border);
  padding: 1.15rem 0;
  transition: padding .35s var(--ph-ease), border-color .4s var(--ph-ease);
}
.site-header.is-scrolled .main-navbar { padding: .7rem 0; }
.main-navbar .container-xl { flex-wrap: wrap; row-gap: .6rem; }
.main-navbar .navbar-collapse {
  flex-wrap: wrap;
  row-gap: .7rem;
  column-gap: 1rem;
}
.main-navbar .navbar-nav {
  flex-wrap: wrap;
  row-gap: .2rem;
}
.main-navbar .nav-link {
  color: var(--hdr-fg);
  font-family: var(--ph-sans);
  font-weight: 500;
  font-size: .68rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  padding: .55rem .55rem !important;
  position: relative;
  opacity: .82;
  white-space: nowrap;
  transition: color .4s var(--ph-ease);
}
.main-navbar .nav-link::after {
  content: '';
  position: absolute;
  left: .55rem; right: .55rem; bottom: .3rem;
  height: 1px;
  background: var(--hdr-brand-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .4s var(--ph-ease);
}
.main-navbar .nav-link:hover,
.main-navbar .nav-link.active { color: var(--hdr-fg); opacity: 1; }
.main-navbar .nav-link:hover::after,
.main-navbar .nav-link.active::after { transform: scaleX(1); }
.main-navbar .dropdown-toggle::after { vertical-align: .1em; opacity: .6; }

.main-navbar .dropdown-menu {
  background: var(--hdr-dropdown-bg);
  border: 1px solid var(--hdr-dropdown-border);
  border-radius: 2px;
  box-shadow: 0 24px 48px -24px rgba(0,0,0,.3);
  padding: .5rem 0;
  margin-top: .5rem !important;
  transition: background .4s var(--ph-ease), border-color .4s var(--ph-ease);
}
.main-navbar .dropdown-item {
  font-family: var(--ph-sans);
  font-size: .8rem;
  letter-spacing: .02em;
  color: var(--hdr-dropdown-fg);
  padding: .55rem 1.2rem;
  transition: color .3s var(--ph-ease);
}
.main-navbar .dropdown-item:hover,
.main-navbar .dropdown-item:focus {
  background: rgba(128,128,128,.08);
  color: var(--hdr-brand-accent);
}

/* ---------- Phone pill (Parcel "guide price" style button) ---------- */
.btn-phone-outline {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--ph-sans);
  font-size: .68rem; font-weight: 600;
  letter-spacing: .07em; text-transform: uppercase;
  color: var(--hdr-fg);
  border: 1px solid var(--hdr-btn-border);
  border-radius: 2px;
  padding: .62rem 1.05rem;
  white-space: nowrap;
  transition: background .3s var(--ph-ease), color .3s var(--ph-ease), border-color .3s var(--ph-ease);
}
.btn-phone-outline i { color: var(--hdr-brand-accent); font-size: .78rem; }
.btn-phone-outline:hover { background: var(--hdr-btn-hover-bg); color: var(--hdr-btn-hover-fg); border-color: var(--hdr-btn-hover-bg); }
.btn-phone-outline:hover i { color: inherit; }

/* ---------- Header action buttons (Parcel line/fill style) ---------- */
.btn-line-brand, .btn-fill-brand {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--ph-sans);
  font-size: .64rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  padding: .6rem 1.05rem;
  border-radius: 0;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background .35s var(--ph-ease), color .35s var(--ph-ease), border-color .35s var(--ph-ease);
}
.btn-line-brand { background: transparent; color: var(--hdr-fg); border: 1px solid var(--hdr-btn-border); }
.btn-line-brand:hover { background: var(--hdr-btn-hover-bg); color: var(--hdr-btn-hover-fg); border-color: var(--hdr-btn-hover-bg); }
.btn-fill-brand { background: var(--gold); color: #fff; border: 1px solid var(--gold); }
.btn-fill-brand:hover { background: var(--hdr-btn-hover-bg); border-color: var(--hdr-btn-hover-bg); color: var(--hdr-btn-hover-fg); }

/* ---------- Mobile toggle (replaces default navbar-toggler look) ---------- */
.ph-nav-toggle {
  background: none; border: none; padding: 10px; margin: -10px; color: var(--hdr-fg);
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px; line-height: 0; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.ph-nav-toggle svg { width: 24px; height: 24px; }

/* ---------- Fullscreen mobile menu overlay ---------- */
.ph-mobile-menu {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1200;
  background: var(--ph-ink); color: var(--ph-chalk);
  display: flex; flex-direction: column;
  padding: max(1.25rem, env(safe-area-inset-top)) clamp(1.15rem, 6vw, 3rem) max(1.25rem, env(safe-area-inset-bottom));
  transform: translateY(-100%);
  transition: transform .5s var(--ph-ease);
  visibility: hidden;
  overflow-y: auto;
}
.ph-mobile-menu.is-open { transform: translateY(0); visibility: visible; }
.ph-mobile-menu-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.ph-mobile-menu-top img { height: 28px; filter: brightness(0) invert(1); }
.ph-mobile-menu-top button {
  background: none; border: none; color: var(--ph-chalk);
  padding: 10px; margin: -10px;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px;
  -webkit-tap-highlight-color: transparent;
}
.ph-mobile-menu-top svg { width: 22px; height: 22px; }

/* Auth row — Login/Register (or account links when signed in), right under the logo */
.ph-mobile-menu-auth {
  display: flex; flex-wrap: wrap; align-items: center; gap: .55rem;
  padding-bottom: 1rem; margin-bottom: .2rem;
  border-bottom: 1px solid rgba(244,244,239,.14);
}
/* Two-column layout for mobile menu sections (Explore + Company side by side) */
.ph-mobile-nav-columns {
  display: flex;
  gap: clamp(1.5rem, 6vw, 3rem);
  flex-wrap: wrap;
}
.ph-mobile-nav-columns .ph-mobile-nav-group {
  flex: 1 1 0;
  min-width: 130px;
}
.ph-mobile-nav-columns .ph-mobile-nav-heading {
  font-family: var(--ph-sans);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ph-stone);
  margin-bottom: .4rem;
}
/* Links inside the two-column groups are smaller than the main nav list,
   since they now share half the width */
.ph-mobile-nav-columns .ph-mobile-nav a {
  font-size: clamp(.85rem, 3.6vw, 1rem);
  padding: .4rem 0;
  min-height: 38px;
  border-bottom: none;
}
.ph-mobile-menu-auth .btn-line-brand,
.ph-mobile-menu-auth .btn-fill-brand {
  padding: .48rem .9rem; font-size: .6rem;
}
.ph-mobile-menu-auth .btn-line-brand { color: var(--ph-chalk); border-color: rgba(244,244,239,.5); }
.ph-mobile-menu-auth .btn-line-brand:hover { background: var(--ph-chalk); color: var(--ph-ink); }
.ph-mobile-auth-name {
  font-family: var(--ph-sans); font-size: .7rem; font-weight: 600;
  letter-spacing: .04em; color: var(--ph-chalk); margin-right: .1rem;
}

.ph-mobile-nav { display: flex; flex-direction: column; }
.ph-mobile-nav a {
  font-family: var(--ph-serif);
  font-size: clamp(1rem, 4.6vw, 1.25rem);
  color: var(--ph-chalk);
  padding: .58rem 0;
  min-height: 44px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgba(244,244,239,.12);
  transition: color .3s var(--ph-ease), padding-left .35s var(--ph-ease);
}
.ph-mobile-nav a:hover, .ph-mobile-nav a:active { color: #C7A968; padding-left: .4rem; }
.ph-mobile-nav a .idx {
  font-family: var(--ph-sans);
  font-size: .55rem; letter-spacing: .16em; color: var(--ph-sage);
  vertical-align: super; margin-right: .5rem;
}
.ph-mobile-menu-foot {
  margin-top: auto; padding-top: 1rem; border-top: 1px solid rgba(244,244,239,.14);
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.4rem;
  font-family: var(--ph-sans);
  font-size: .64rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ph-stone);
}
.ph-mobile-menu-foot a { color: var(--ph-stone); }
.ph-mobile-menu-foot a:hover { color: #C7A968; }

/* ---------- Hero ---------- */
/* Editorial, bottom-anchored hero: full-bleed photograph, a single serif
   headline set like a masthead, and a "booking ticket" search panel that
   overlaps the photo edge — the signature element for a booking site. */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh; /* stable viewport height so the hero always fills the screen the same way, regardless of browser UI/zoom quirks that can shrink plain vh */
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  padding-top: calc(9.5rem + var(--promo-h));
}
.hero-media {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 0;
}
/* Misty hills replace the old photo slider: a dark forest base standing in
   for hill silhouettes, with soft blurred fog bands drifting horizontally
   at different depths/speeds for a slow parallax roll-through effect. */
.hero-media-mist {
  overflow: hidden;
}
.mist-base {
  position: absolute; inset: 0;
  background: linear-gradient(
    180deg,
    #0c1510 0%,
    #16281d 22%,
    #24402f 46%,
    #3c5b47 66%,
    #1c3122 100%
  );
}
.mist-layer {
  position: absolute;
  left: -25%; width: 150%;
  mix-blend-mode: screen;
  will-change: transform;
}
.mist-layer-1 {
  top: -4%; height: 46%;
  background:
    radial-gradient(ellipse 42% 70% at 18% 45%, rgba(255,255,255,.4) 0%, transparent 68%),
    radial-gradient(ellipse 38% 65% at 55% 55%, rgba(255,255,255,.3) 0%, transparent 65%),
    radial-gradient(ellipse 34% 60% at 85% 40%, rgba(255,255,255,.32) 0%, transparent 65%);
  filter: blur(20px);
  opacity: .85;
  animation: mistDrift1 30s ease-in-out infinite;
}
.mist-layer-2 {
  top: 26%; height: 48%;
  background:
    radial-gradient(ellipse 46% 75% at 30% 50%, rgba(199,162,90,.38) 0%, transparent 68%),
    radial-gradient(ellipse 40% 70% at 72% 45%, rgba(199,162,90,.3) 0%, transparent 66%);
  filter: blur(30px);
  opacity: .8;
  animation: mistDrift2 40s ease-in-out infinite;
}
.mist-layer-3 {
  top: 54%; height: 48%;
  background:
    radial-gradient(ellipse 40% 68% at 22% 55%, rgba(255,255,255,.36) 0%, transparent 65%),
    radial-gradient(ellipse 44% 72% at 62% 45%, rgba(255,255,255,.28) 0%, transparent 66%),
    radial-gradient(ellipse 36% 60% at 90% 55%, rgba(255,255,255,.3) 0%, transparent 64%);
  filter: blur(18px);
  opacity: .9;
  animation: mistDrift3 24s ease-in-out infinite;
}
@keyframes mistDrift1 {
  0%, 100% { transform: translateX(-8%); }
  50%      { transform: translateX(8%); }
}
@keyframes mistDrift2 {
  0%, 100% { transform: translateX(10%); }
  50%      { transform: translateX(-10%); }
}
@keyframes mistDrift3 {
  0%, 100% { transform: translateX(-6%); }
  50%      { transform: translateX(12%); }
}
@media (prefers-reduced-motion: reduce) {
  .mist-layer { animation: none; }
}
.hero::before {
  content: '';
  position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(15,20,17,.12) 0%, rgba(15,20,17,.1) 30%, rgba(14,18,15,.38) 60%, rgba(12,16,13,.86) 92%);
}
.hero-inner { position: relative; z-index: 2; width: 100%; padding-bottom: 4.5rem; }
.hero-content { color: #fff; max-width: 640px; }

.hero-kicker {
  display: flex; align-items: center; gap: .7rem;
  font-family: 'Inter', sans-serif;
  font-size: .72rem; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--gold-light);
  margin-bottom: 1.1rem;
  text-shadow: 0 2px 10px rgba(0,0,0,.35);
}
.hero-kicker::before {
  content: '';
  width: 34px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-light));
  display: block; flex-shrink: 0;
}
@media (max-width: 575.98px) {
  .hero-kicker { font-size: .6rem; letter-spacing: .14em; gap: .5rem; }
  .hero-kicker::before { width: 18px; }
}

/* Signature headline treatment — layered depth shadow so the wordmark holds
   up over any photo, plus a warm brass ".com" for a bespoke, non-generic feel. */
.hero-title {
  font-size: clamp(2.1rem, 6.4vw, 4.4rem);
  font-weight: 600;
  line-height: 1.04;
  margin-bottom: 1.05rem;
  letter-spacing: -0.015em;
  display: block;
}
.hero-title-main {
  color: #fff;
  text-shadow:
    0 1px 0 rgba(0,0,0,.15),
    0 8px 24px rgba(0,0,0,.35),
    0 22px 46px rgba(0,0,0,.28);
}
.hero-title-tld {
  color: #EFC988;
  font-style: italic;
  font-weight: 500;
  text-shadow:
    0 2px 4px rgba(0,0,0,.55),
    0 8px 22px rgba(0,0,0,.5),
    0 0 34px rgba(0,0,0,.35);
}
.hero h1 em { font-style: italic; color: var(--gold-light); font-weight: 500; }
.hero p.lead {
  font-family: 'Inter', sans-serif;
  font-size: 1.08rem; line-height: 1.6;
  color: #fff; max-width: 480px; font-weight: 400;
  text-shadow: 0 2px 4px rgba(0,0,0,.5), 0 8px 20px rgba(0,0,0,.45);
}
@media (max-width: 767.98px) {
  .hero-title { font-size: clamp(2rem, 9vw, 2.75rem); margin-bottom: .8rem; }
  .hero p.lead { font-size: .96rem; line-height: 1.55; max-width: 100%; }
}
@media (max-width: 380px) {
  .hero-title { font-size: 1.9rem; }
}


/* Promo/graphic panel: sits to the right of the hero tagline on desktop
   (in its own grid column) and stacks centered below the text on
   smaller screens. Now holds only the "Explore Ooty" 3D carousel (see
   .hero-carousel3d-slide below for its aspect-ratio/sizing). */
.hero-top-row { row-gap: 1.6rem; }
@media (min-width: 992px) {
  /* Extra breathing room so the "ootybookings.com" headline doesn't
     crowd the "Explore Ooty" carousel card sitting beside it. */
  .hero-content { margin-right: 2.5rem; }
}
.hero-banner-col {
  display: flex;
  justify-content: flex-end;
}
.hero-banner-square {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: 430px;
}
@media (max-width: 991.98px) {
  .hero-banner-col { justify-content: center; }
  .hero-banner-square { max-width: 300px; }
}
@media (max-width: 575.98px) {
  .hero-banner-square { max-width: 240px; }
}

/* 3D carousel widget gets a bit more room than the old square banner —
   both because it's wider now (see aspect-ratio on .hero-carousel3d-slide
   below) and so its ring of cards stays legible at every size. Uses vw
   here (viewport, not container) since this sets the OUTER box's actual
   footprint on the page across breakpoints; sizing *inside* the card
   below switches to container-query units so it stays crisp regardless
   of the box it ends up in. */
.hero-banner-square.has-carousel3d { max-width: 640px; }
@media (max-width: 991.98px) {
  .hero-banner-square.has-carousel3d { max-width: min(80vw, 420px); }
}
@media (max-width: 767.98px) {
  .hero-banner-square.has-carousel3d { max-width: min(88vw, 400px); }
}
@media (max-width: 575.98px) {
  .hero-banner-square.has-carousel3d { max-width: min(94vw, 380px); }
}
@media (max-width: 360px) {
  .hero-banner-square.has-carousel3d { max-width: 100%; }
}

/* ---------- Explore Ooty (auto-rotating 3D photo carousel) ----------
   Now the ONLY thing in the hero side panel (the old rotating banner
   images have been removed, so this card owns the container visuals —
   aspect-ratio, rounded corners, shadow — that used to live on the
   generic banner-slider wrapper). A ring of photo cards spins in 3D
   space like a little turntable of postcards, gently auto-rotating to
   draw the eye, and pausing on hover/touch/keyboard focus. Tapping any
   card, or the arrow buttons, brings that spot to the front — inviting
   people to actively browse rather than just read a list. */
.hero-carousel3d-slide {
  position: relative;
  /* "slightly wide" rectangle rather than a perfect square — gives the
     ring more horizontal breathing room so the side cards aren't
     immediately butted up against the edge. container-type lets the
     inner sizing below use cqw (% of THIS element's width) instead of
     the viewport, so it stays pixel-correct at any width — mobile,
     tablet, or if this card ever gets embedded somewhere narrower. */
  aspect-ratio: 6 / 5;
  container-type: inline-size;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.2);
  box-shadow: 0 18px 44px rgba(0,0,0,.42);
  transition: transform .25s ease, box-shadow .25s ease;
}
.hero-carousel3d-slide:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 50px rgba(0,0,0,.5);
}
.hero-carousel3d {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  padding: 6% 0 4%;
  background: radial-gradient(120% 100% at 50% 0%, #F8F6EF 0%, #F1EEE3 100%);
  overflow: hidden;
}
.carousel3d-head { text-align: center; flex-shrink: 0; margin-bottom: 2%; padding: 0 4%; }
.carousel3d-title {
  display: block;
  font-size: clamp(.92rem, 4.6cqw, 1.3rem);
  font-weight: 700; color: var(--forest); letter-spacing: .01em;
}
.carousel3d-title em { font-style: italic; color: var(--gold); }
.carousel3d-sub {
  display: block; margin-top: 2px;
  font-size: .58rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}

/* stage-wrap gives the 3D scene its perspective and vertical room. The
   mask fades cards to transparent as they near the left/right edge, so
   a side card gets gently cropped instead of hard-clipped mid-photo. */
.carousel3d-stage-wrap {
  position: relative; flex: 1; min-height: 0;
  display: flex; align-items: center; justify-content: center;
  perspective: 900px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 10%, #000 90%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0%, #000 10%, #000 90%, transparent 100%);
}
.carousel3d-stage {
  position: relative; width: clamp(88px, 30cqw, 132px); height: clamp(88px, 30cqw, 132px);
  transform-style: preserve-3d;
  /* rotation angle is driven entirely by JS (rAF for the continuous
     auto-spin, eased lerp for click/arrow "snap to card") via the
     --rot custom property, so both behaviours share one code path
     with no fight between a CSS animation and inline styles */
  transform: rotateY(var(--rot, 0deg));
}

.carousel3d-item {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  border: 0; background: transparent; padding: 0; cursor: pointer;
  /* each card is pushed out to the edge of the ring and rotated to face
     outward; --i (its index) and --count (total cards) come from PHP */
  transform: rotateY(calc(360deg / var(--count) * var(--i))) translateZ(clamp(160px, 42cqw, 230px));
  transition: filter .35s ease, opacity .35s ease;
  backface-visibility: hidden;
}
.carousel3d-item:focus-visible .carousel3d-photo { outline: 2px solid var(--gold); outline-offset: 3px; }

.carousel3d-photo {
  position: relative; overflow: hidden; flex-shrink: 0;
  width: clamp(72px, 23cqw, 104px); height: clamp(72px, 23cqw, 104px);
  border-radius: 50%; border: 3px solid #fff;
  box-shadow: 0 8px 20px rgba(28,34,31,.28);
  display: flex; align-items: center; justify-content: center;
  transition: transform .3s ease, box-shadow .3s ease;
}
.carousel3d-item:hover .carousel3d-photo,
.carousel3d-item:focus-visible .carousel3d-photo {
  transform: scale(1.08);
  box-shadow: 0 12px 26px rgba(28,34,31,.38);
}
.carousel3d-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.carousel3d-photo i {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; color: #fff;
}
/* themed gradient medallions for spots without a photo yet, so a missing
   shot still looks intentional/on-brand rather than broken */
.theme-green .carousel3d-photo i { background: linear-gradient(145deg, #4B6B4E, #2F4A32); }
.theme-blue  .carousel3d-photo i { background: linear-gradient(145deg, #4E8EA6, #2E5E70); }
.theme-rose  .carousel3d-photo i { background: linear-gradient(145deg, #C97D8E, #A2566A); }
.theme-amber .carousel3d-photo i { background: linear-gradient(145deg, #D3A15B, #B07A33); }

.carousel3d-num {
  position: absolute; top: 0; right: 0;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--gold); color: #fff;
  font-size: 9px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 5px rgba(0,0,0,.25);
}

.carousel3d-label {
  max-width: 30cqw;
  font-size: clamp(8.6px, 2.3cqw, 10.5px); font-weight: 700;
  text-align: center; text-transform: uppercase; letter-spacing: .01em;
  color: var(--forest); line-height: 1.2;
  background: rgba(248,246,239,.88); border-radius: 999px;
  padding: 2px 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.carousel3d-controls {
  flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  gap: 10px; margin-top: 3%; padding: 0 4%;
}
.carousel3d-arrow {
  width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid rgba(28,34,31,.15); background: #fff; color: var(--forest);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; cursor: pointer; flex-shrink: 0;
  box-shadow: var(--shadow-sm);
  transition: transform .2s ease, background .2s ease, color .2s ease;
}
.carousel3d-arrow:hover { background: var(--forest); color: #fff; transform: scale(1.08); }
.carousel3d-cta {
  font-size: .62rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: #fff; background: var(--orange, var(--gold));
  border-radius: 999px; padding: 8px 16px;
  box-shadow: var(--shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease;
  white-space: nowrap;
}
.carousel3d-cta:hover { transform: translateY(-1px); box-shadow: 0 8px 18px rgba(28,34,31,.28); color: #fff; }

@media (prefers-reduced-motion: reduce) {
  .carousel3d-item, .carousel3d-photo { transition: none; }
}

/* Wrapper holding the Search/Recommend tab switcher + whichever panel is
   active. Owns the spacing that used to live on .search-box directly. */
.search-box-wrap {
  position: relative;
  z-index: 3;
  margin-top: 1.4rem;
}
.search-tabs {
  display: flex;
  gap: .4rem;
  margin-bottom: .6rem;
}
.search-tab {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  background: rgba(255,255,255,.82);
  border: 1px solid rgba(28,34,31,.14);
  border-bottom: none;
  color: rgba(164,122,46,.75);
  font-family: 'Inter', sans-serif;
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: .55rem 1.1rem;
  border-radius: 10px 10px 0 0;
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.search-tab i { font-size: .8rem; color: var(--gold); }
.search-tab:hover { background: #fff; color: var(--gold); }
.search-tab.is-active {
  background: #fff;
  color: var(--gold);
  border-color: rgba(28,34,31,.14);
}
@media (max-width: 575.98px) {
  .search-tab { font-size: .66rem; padding: .5rem .8rem; }
}

/* "Booking ticket" search panel — solid brass-gold card so it reads as
   the site's primary action panel at a glance, with dark ink text for
   contrast against the gold fill. */
.search-box {
  position: relative;
  z-index: 3;
  background: var(--gold-light);
  border: 1px solid rgba(28,34,31,.12);
  border-radius: var(--radius-sm);
  box-shadow: 0 24px 60px rgba(8, 10, 8, .35);
  padding: 1.6rem 1.8rem 1.4rem;
  color-scheme: light;
}
/* On the recommend panel, "Recommend" is worth spelling out even on
   desktop — unlike the magnifying-glass icon, a wand icon alone is
   ambiguous. */
#recommend-panel .btn-gold-label { display: inline-block; }
.search-box .ticket-tag {
  position: absolute; top: -1px; right: 1.8rem;
  transform: translateY(-100%);
  background: var(--ink);
  color: var(--gold-light);
  font-family: 'Inter', sans-serif;
  font-size: .62rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  padding: .4rem .8rem;
  border: 1px solid rgba(255,255,255,.18);
  border-bottom: none;
  border-radius: 4px 4px 0 0;
}
.search-box .row.g-3 { row-gap: 1.1rem !important; }
.search-box .field-group {
  position: relative;
  padding-right: .55rem;
}
.search-box .col-lg-1 .field-group,
.search-box .col-lg-2:last-of-type .field-group { padding-right: 0; }
/* Each input/select is its own solid white bar — clearly tappable fields
   sitting on the gold panel, instead of transparent underlined text. */
.search-box .form-control, .search-box .form-select {
  border-radius: var(--radius-sm);
  border: 1px solid rgba(28,34,31,.14);
  background: #fff;
  padding: .6rem .75rem;
  font-size: .92rem;
  font-family: 'Inter', sans-serif;
  color: var(--ink);
  box-shadow: 0 1px 3px rgba(28,34,31,.08);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.search-box .form-select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%2324402F' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .75rem center;
  padding-right: 1.9rem;
}
.search-box .form-select option { color: var(--ink); background: var(--white); }
.search-box .form-control::placeholder { color: rgba(28,34,31,.45); }
.search-box .form-control:focus, .search-box .form-select:focus {
  outline: none;
  border-color: var(--forest-dark);
  box-shadow: 0 0 0 3px rgba(36,64,47,.15);
}
.search-box label {
  display: block;
  color: rgba(28,34,31,.72);
  font-family: 'Inter', sans-serif;
  font-size: .68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .09em;
  margin-bottom: .35rem;
}
.search-box .btn-gold {
  width: 100%; height: 46px;
  border-radius: var(--radius-sm);
  padding: 0; font-size: 1rem;
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  border: none;
  color: #fff;
}
/* Search and Recommend each get their own accent colour (not black) so
   the two actions read as visually distinct against the gold panel. */
#search-panel .btn-gold {
  background: #fff;
  color: var(--forest-dark);
}
#search-panel .btn-gold:hover { background: var(--forest-dark); color: #fff; }
#recommend-panel .btn-gold {
  background: var(--orange);
}
#recommend-panel .btn-gold:hover { background: #8A3E22; color: #fff; }
.search-box .btn-gold-label { display: none; }
@media (max-width: 991.98px) {
  .search-box { margin-right: 4.5rem; }
  .search-box .field-group { padding-right: 0; }
}
@media (max-width: 767.98px) {
  .hero { min-height: 100svh; min-height: 100dvh; padding-top: calc(6.75rem + var(--promo-h)); align-items: flex-end; }
  .hero-inner { padding-bottom: 2.4rem; }
  .search-box-wrap { margin-top: 1.8rem; }
  .search-box {
    padding: 1.3rem 1.2rem 1.15rem;
    margin-right: 0;
    border-radius: 14px;
  }
  .search-box .ticket-tag { right: 1.2rem; }
  /* Bootstrap's row gutter is driven by these custom properties, not by
     plain `row-gap` — set them directly so the panel is actually compact
     on phones instead of stacking ~1rem of hidden margin between fields. */
  .search-box .row.g-3 { --bs-gutter-x: .7rem; --bs-gutter-y: .7rem; row-gap: .7rem !important; }
  .search-box .field-group { padding-bottom: 0; }
  .search-box .form-control, .search-box .form-select { font-size: .95rem; padding: .6rem .7rem; }
  .search-box .form-select { background-position: right .65rem center; padding-right: 1.7rem; }
  /* Only the destination field goes full-width; Check-in/Check-out and
     Guests/Property Type stay paired two-per-row so the panel doesn't
     turn into five long stacked fields on a phone. */
  .search-box .col-12.col-md-6.col-lg-3 { flex: 0 0 100%; max-width: 100%; }
  .search-box .btn-gold { height: 50px; font-size: 1rem; margin-top: .2rem; }
  .search-box .btn-gold-label { display: inline-block; font-family: 'Inter', sans-serif; letter-spacing: .04em; }
}
@media (max-width: 380px) {
  .hero { padding-top: calc(6rem + var(--promo-h)); }
  .search-box { padding: 1.1rem 1rem 1rem; }
  .search-box .ticket-tag { font-size: .56rem; padding: .35rem .65rem; right: 1rem; }
}

/* ---------- Trust strip ---------- */
.trust-strip {
  background: var(--ink);
  padding: 1.6rem 0;
}
.trust-strip .trust-num {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 1.7rem; font-weight: 600;
  color: var(--gold-light);
  line-height: 1;
}
.trust-strip .trust-label {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: .68rem; font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase;
  color: rgba(244,244,239,.62);
  margin-top: .35rem;
}
@media (max-width: 767.98px) {
  .trust-strip .col-6 { border-right: 1px solid rgba(244,244,239,.1); }
  .trust-strip .col-6:nth-child(2n) { border-right: none; }
}

/* ---------- Section headings ---------- */
.section-eyebrow {
  font-family: 'Inter', sans-serif;
  display: inline-flex; align-items: center; gap: .6rem;
  color: var(--gold);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: .74rem;
  margin-bottom: .3rem;
}
.section-eyebrow::before { content: ''; width: 22px; height: 1px; background: var(--gold); display: inline-block; }
.section-title { font-size: clamp(1.6rem, 3vw, 2.35rem); font-weight: 600; color: var(--forest-dark); }
.section-sub { color: var(--muted); max-width: 640px; }

/* ---------- Category cards ---------- */
.category-card {
  border-radius: var(--radius-md);
  overflow: hidden;
  position: relative;
  height: 220px;
  box-shadow: var(--shadow-sm);
  transition: transform .35s ease, box-shadow .35s ease;
}
.category-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.category-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.category-card:hover img { transform: scale(1.08); }
.category-card .overlay {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  background: linear-gradient(180deg, rgba(20,28,24,0) 40%, rgba(16,20,17,.88) 100%);
  display: flex; align-items: flex-end; padding: 1.2rem;
}
.category-card .overlay h5 { color: #fff; margin: 0; font-weight: 600; font-family: 'Inter', sans-serif; }
.category-card .overlay span { color: rgba(244,244,239,.72); font-size: .78rem; font-family: 'Inter', sans-serif; letter-spacing: .03em; }

/* ---------- Property cards ---------- */
.property-card {
  border-radius: var(--radius-md);
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--border-soft);
  box-shadow: var(--shadow-sm);
  transition: transform .3s ease, box-shadow .3s ease;
  height: 100%;
}
.property-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.property-card .img-wrap { position: relative; height: 190px; overflow: hidden; }
.property-card .img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.property-card:hover .img-wrap img { transform: scale(1.1); }
.property-card .badge-type {
  position: absolute; top: .75rem; left: .75rem;
  background: rgba(28,34,31,.55);
  color: #fff;
  font-family: 'Inter', sans-serif;
  font-weight: 600; font-size: .66rem;
  text-transform: uppercase; letter-spacing: .06em;
  padding: .3rem .7rem; border-radius: var(--radius-pill);
}
.property-card .badge-discount {
  position: absolute; top: .75rem; left: 4.7rem;
  background: var(--orange);
  color: #fff;
  font-family: 'Inter', sans-serif;
  font-weight: 600; font-size: .64rem;
  padding: .3rem .65rem; border-radius: var(--radius-pill);
}
.badge-verified {
  display: inline-flex; align-items: center; gap: .3rem;
  background: rgba(36,64,47,.09);
  color: var(--forest);
  font-family: 'Inter', sans-serif;
  font-weight: 600; font-size: .7rem;
  padding: .22rem .6rem; border-radius: var(--radius-pill);
  line-height: 1.5;
}
.badge-verified i { color: var(--forest); font-size: .7rem; }
.property-card .badge-verified { margin-bottom: .4rem; }
.property-card .wishlist-btn {
  position: absolute; top: .75rem; right: .75rem;
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(255,255,255,.92);
  display: flex; align-items: center; justify-content: center;
  color: var(--orange);
  border: none;
}
.property-card .rating-pill {
  position: absolute; bottom: .75rem; left: .75rem;
  background: #fff;
  color: var(--forest-dark); font-size: .76rem; font-weight: 700;
  padding: .22rem .6rem; border-radius: var(--radius-sm);
  display: inline-flex; align-items: center; gap: .3rem;
  box-shadow: var(--shadow-sm);
}
.property-card .rating-pill .fa-star { color: var(--gold); }
.property-card .rating-pill .review-count { font-weight: 400; color: var(--muted); margin-left: .1rem; }
.property-card .body { padding: 1.1rem 1.2rem 1.2rem; }
.property-card h5 { font-size: 1.02rem; margin: 0 0 .3rem; font-family: 'Inter', sans-serif; line-height: 1.3; }
.property-card .location { color: var(--muted); font-size: .82rem; font-family: 'Inter', sans-serif; display: flex; align-items: center; gap: .35rem; margin-bottom: .65rem; }
.property-card .amenity-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .9rem; }
.property-card .amenity-chips span {
  font-size: .7rem; color: var(--forest);
  background: var(--bg-soft);
  padding: .2rem .55rem; border-radius: var(--radius-pill);
}
.property-card .price-row {
  display: flex; justify-content: space-between; align-items: flex-end;
  border-top: 1px solid var(--border-soft); padding-top: .8rem;
}
.property-card .price-label { font-size: .7rem; color: var(--muted); font-family: 'Inter', sans-serif; }
.property-card .price-was { font-size: .72rem; color: var(--muted); text-decoration: line-through; font-family: 'Inter', sans-serif; }
.property-card .price { font-size: 1.15rem; font-weight: 600; color: var(--forest-dark); font-family: 'Inter', sans-serif; }
.property-card .price small { font-size: .72rem; font-weight: 400; color: var(--muted); font-family: 'Inter', sans-serif; }
.property-card .view-btn {
  background: var(--forest); color: #fff; font-size: .78rem; font-weight: 600;
  padding: .5rem 1rem; border-radius: var(--radius-sm);
  font-family: 'Inter', sans-serif; white-space: nowrap;
}

/* ---------- Tour package card: price + action buttons row ---------- */
.pkg-price-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: .6rem;
}
.pkg-price-actions .price { min-width: 0; }
.pkg-price-actions .pkg-actions {
  display: flex;
  flex-wrap: nowrap;
  gap: .5rem;
  margin-left: auto;
}
.pkg-price-actions .pkg-actions .btn {
  white-space: nowrap;
  flex: 0 0 auto;
}
/* Below ~360px inside a 2-3 column grid, or on very narrow phones,
   stack price above the buttons and make the buttons share the width
   evenly so nothing wraps or gets squeezed. */
@media (max-width: 420px) {
  .pkg-price-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .pkg-price-actions .pkg-actions {
    width: 100%;
    margin-left: 0;
  }
  .pkg-price-actions .pkg-actions .btn {
    flex: 1 1 0;
  }
}

/* ---------- Cards general / soft shadows ---------- */
.soft-card {
  background: #fff; border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm); border: 1px solid var(--border-soft);
}

/* ---------- Why choose us ---------- */
.feature-icon {
  width: 58px; height: 58px; border-radius: 12px;
  background: var(--ink);
  display: flex; align-items: center; justify-content: center;
  color: var(--gold-light); font-size: 1.3rem; margin-bottom: 1.1rem;
}

/* ---------- Testimonials ---------- */
.review-card { padding: 1.6rem; position: relative; }
.review-card::before {
  content: '\201C';
  position: absolute; top: .4rem; left: 1.2rem;
  font-family: 'Inter', sans-serif;
  font-size: 3.2rem; color: var(--border-soft);
  line-height: 1;
}
.review-card p.fst-italic { position: relative; font-family: 'Inter', sans-serif; font-style: italic !important; font-size: 1.02rem; color: var(--ink); }
.review-stars { color: var(--gold); font-size: .82rem; }

/* ---------- CTA / Offers ---------- */
.offer-banner {
  background: var(--ink);
  border-radius: var(--radius-sm);
  border-top: 3px solid var(--gold);
  color: #fff;
  padding: 3rem;
  position: relative;
  overflow: hidden;
}
.offer-banner h2 { font-family: 'Inter', sans-serif; }

/* ---------- Footer ---------- */
footer.site-footer { background: var(--forest-dark); color: rgba(255,255,255,.75); }
footer.site-footer h6 { color: #fff; font-weight: 600; margin-bottom: 1.1rem; }
footer.site-footer a { color: rgba(255,255,255,.68); }
footer.site-footer a:hover { color: var(--gold-light); }
footer.site-footer .social-icon {
  width: 38px; height: 38px; border-radius: 50%;
  background: rgba(255,255,255,.1);
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; margin-right: .5rem; transition: background .25s ease;
}
footer.site-footer .social-icon:hover { background: var(--gold); color: var(--forest-dark); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.1); font-size: .85rem; padding: 1.25rem 0; }
.footer-legal-links { display: inline-flex; align-items: center; gap: .55rem; flex-wrap: wrap; justify-content: center; }
.footer-legal-sep { color: rgba(255,255,255,.35); }
@media (max-width: 767.98px) {
  .footer-bottom { padding: 1.4rem 0 1.6rem; }
  .footer-bottom .footer-legal-links {
    flex-direction: column;
    gap: .65rem;
  }
  .footer-bottom .footer-legal-links .footer-legal-sep { display: none; }
  .footer-bottom .footer-legal-links a { display: block; }
}

/* ---------- Floating buttons ---------- */
.floating-btns { position: fixed; right: 20px; bottom: 90px; z-index: 1040; display: flex; flex-direction: column; align-items: flex-end; gap: .7rem; }
.floating-btn {
  position: relative;
  width: 54px; height: 54px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 1.4rem; box-shadow: var(--shadow-md);
  transition: transform .25s ease, box-shadow .25s ease, width .25s ease, border-radius .25s ease;
}
.floating-btn:hover { transform: scale(1.08); color: #fff; box-shadow: 0 10px 26px rgba(0,0,0,.28); }
.floating-btn.whatsapp { background: #25D366; }
.floating-btn.call { background: var(--ph-brass, var(--orange)); }
.floating-btn.enquiry { background: var(--forest, #24402F); }

/* Inner wrapper owns the clipping + pill-expand-on-hover so the outer
   button can stay unclipped (needed for the WhatsApp ping ring below to
   bleed outward past the circle instead of being cut off). */
.floating-btn-inner {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%;
  border-radius: inherit;
  overflow: hidden;
  font-size: 1em;
}
.floating-btn:hover .floating-btn-inner { padding-inline: 1.1rem; }
.floating-btn-inner i, .floating-btn-inner svg { flex-shrink: 0; }

/* Text label hidden by default, slides into view (button widens into a
   pill) on hover — desktop/pointer devices only, so mobile stays compact
   circular icons that don't crowd the screen. */
.floating-btn-label {
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .01em;
  white-space: nowrap;
  transition: max-width .3s ease, opacity .2s ease, margin-left .3s ease;
}
@media (hover: hover) and (pointer: fine) {
  .floating-btn:hover { border-radius: 999px; }
  .floating-btn:hover .floating-btn-label {
    max-width: 140px;
    opacity: 1;
    margin-left: .55rem;
  }
}

/* Continuous soft pulse ring on the WhatsApp button so it reads as "live"
   at a glance, same idea as the reference site. Respects reduced-motion. */
.floating-btn-ping {
  position: absolute; inset: 0;
  border-radius: 50%;
  background: #25D366;
  opacity: .55;
  animation: floatingPing 2.4s cubic-bezier(0,0,.2,1) infinite;
  pointer-events: none;
  z-index: -1;
}
@keyframes floatingPing {
  0%   { transform: scale(1);   opacity: .55; }
  75%  { transform: scale(1.9); opacity: 0; }
  100% { transform: scale(1.9); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .floating-btn-ping { animation: none; display: none; }
}

/* ---------- Circular icon-only action buttons (e.g. cab call / WhatsApp) ---------- */
.icon-action-btn {
  width: 40px;
  height: 40px;
  min-width: 40px;
  padding: 0;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  flex-shrink: 0;
}
.icon-action-btn svg,
.icon-action-btn i { display: block; }
.icon-action-btn.whatsapp-btn { background: #25D366; color: #fff; border: none; }
.icon-action-btn.whatsapp-btn:hover { background: #1ebe5a; color: #fff; }
@media (max-width: 575.98px) {
  .icon-action-btn { width: 44px; height: 44px; min-width: 44px; }
}

/* ---------- Sticky mobile bottom nav ---------- */
.mobile-bottom-nav {
  display: none;
  position: fixed; bottom: 0; left: 0; right: 0;
  background: var(--ph-chalk, #fff); border-top: 1px solid var(--ph-stone-2, var(--border-soft));
  box-shadow: 0 -6px 20px rgba(28,34,31,.08);
  z-index: 1045;
  padding: .5rem 0 calc(.5rem + env(safe-area-inset-bottom));
  font-family: var(--ph-sans, inherit);
}
.mobile-bottom-nav a {
  color: var(--ph-sage, var(--muted)); font-size: .62rem;
  letter-spacing: .04em; text-transform: uppercase;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .25rem;
  min-height: 44px;
}
.mobile-bottom-nav a.active, .mobile-bottom-nav a:hover { color: var(--ph-brass-dk, var(--forest)); }
.mobile-bottom-nav i { font-size: 1.1rem; }

@media (max-width: 991.98px) {
  .mobile-bottom-nav { display: flex; justify-content: space-around; }
  body { padding-bottom: calc(62px + env(safe-area-inset-bottom)); }
  .floating-btns { bottom: calc(78px + env(safe-area-inset-bottom)); right: 14px; gap: .55rem; }
  .floating-btn { width: 46px; height: 46px; font-size: 1.2rem; }
}
@media (max-width: 575.98px) {
  .floating-btns { right: 12px; }
  .floating-btn { width: 44px; height: 44px; font-size: 1.1rem; }
}

/* ---------- Booking sticky card (property details) ---------- */
.sticky-booking-card { position: sticky; top: 100px; }

/* ---------- Availability calendar dots (owner dashboard strip) ---------- */
.avail-day { border-radius: 8px; padding: .5rem .3rem; text-align: center; font-size: .78rem; font-weight: 600; }
.avail-day.available { background: #e6f7ec; color: #1b7a3d; }
.avail-day.booked { background: #fdeaea; color: #c0392b; }
.avail-day.blocked { background: #fff6e0; color: #b8860b; }

/* ---------- Live availability calendar (property page / booking page) ---------- */
.live-avail { background: #fff; border: 1px solid var(--border-soft); border-radius: var(--radius-md); padding: 1.4rem 1.5rem; }
.live-avail-tabs { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1.1rem; }
.live-avail-tab {
  font-size: .8rem; font-weight: 600; padding: .4rem .9rem; border-radius: var(--radius-pill);
  border: 1px solid var(--border-soft); background: #fff; color: var(--muted); cursor: pointer;
  font-family: 'Inter', sans-serif; transition: all .15s ease;
}
.live-avail-tab.active { background: var(--forest); border-color: var(--forest); color: #fff; }
.live-avail-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .9rem; }
.live-avail-head h6 { margin: 0; font-family: 'Inter', sans-serif; font-size: 1rem; color: var(--forest-dark); }
.live-avail-nav { display: flex; gap: .4rem; }
.live-avail-nav button {
  width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--border-soft);
  background: #fff; color: var(--forest); display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.live-avail-nav button:disabled { opacity: .35; cursor: not-allowed; }
.live-avail-nav button:not(:disabled):hover { background: var(--bg-soft); }
.live-avail-weekdays { display: grid; grid-template-columns: repeat(7,1fr); gap: 4px; margin-bottom: 4px; }
.live-avail-weekdays span { text-align: center; font-size: .68rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.live-avail-grid { display: grid; grid-template-columns: repeat(7,1fr); gap: 4px; }
.live-avail-grid .cell {
  aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  border-radius: 8px; font-size: .78rem; font-weight: 600; font-family: 'Inter', sans-serif;
}
.live-avail-grid .cell.blank { visibility: hidden; }
.live-avail-grid .cell.past { color: var(--border-soft); background: transparent; }
.live-avail-grid .cell.available { background: #E7F2EA; color: var(--forest-dark); }
.live-avail-grid .cell.booked { background: #FBEAE6; color: #9A3B1E; text-decoration: line-through; }
.live-avail-grid .cell.blocked { background: #FBF1DC; color: #8A6A12; }
.live-avail-legend { display: flex; gap: 1.1rem; flex-wrap: wrap; margin-top: 1rem; padding-top: .9rem; border-top: 1px solid var(--border-soft); }
.live-avail-legend span { font-size: .76rem; color: var(--muted); display: inline-flex; align-items: center; gap: .4rem; }
.live-avail-legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.live-avail-legend .dot-available { background: #E7F2EA; border: 1px solid #9BC7AA; }
.live-avail-legend .dot-booked { background: #FBEAE6; border: 1px solid #E8A793; }
.live-avail-legend .dot-blocked { background: #FBF1DC; border: 1px solid #E3C87B; }

/* ---------- Rating pill (standalone, e.g. property header) ---------- */
.rating-pill {
  background: var(--bg-soft); color: var(--forest-dark); font-size: .82rem; font-weight: 700;
  padding: .3rem .7rem; border-radius: var(--radius-sm);
  display: inline-flex; align-items: center; gap: .35rem;
  border: 1px solid var(--border-soft);
}
.rating-pill .fa-star { color: var(--gold); }

/* ---------- Dashboard shell (admin/owner) ---------- */
.dash-shell { display: flex; min-height: 100vh; background: var(--bg-soft); }
.dash-sidebar {
  width: 260px; background: var(--forest-dark); color: #fff; flex-shrink: 0;
  min-height: 100vh; position: sticky; top: 0;
}
.dash-sidebar .brand { padding: 1.4rem 1.4rem 1rem; display: flex; align-items: center; gap: .6rem; }
.dash-sidebar .brand img { height: 34px; }
.dash-sidebar nav a {
  display: flex; align-items: center; gap: .7rem;
  color: rgba(255,255,255,.75); padding: .7rem 1.4rem;
  font-size: .9rem; font-weight: 500; border-left: 3px solid transparent;
}
.dash-sidebar nav a:hover, .dash-sidebar nav a.active {
  background: rgba(255,255,255,.06); color: #fff; border-left-color: var(--gold);
}
.dash-nav-heading {
  text-transform: uppercase; letter-spacing: .06em; font-size: .7rem; font-weight: 700;
  color: rgba(255,255,255,.4); padding: 1rem 1.4rem .3rem;
}
.dash-main { flex: 1; min-width: 0; }
.dash-topbar {
  background: #fff; border-bottom: 1px solid var(--border-soft);
  padding: 1rem 1.6rem; display: flex; align-items: center; justify-content: space-between;
  position: sticky; top: 0; z-index: 10;
}
.dash-content { padding: 1.6rem; }
.stat-card {
  background: #fff; border-radius: var(--radius-md); padding: 1.4rem;
  border: 1px solid var(--border-soft); box-shadow: var(--shadow-sm);
}
.stat-card .stat-icon {
  width: 46px; height: 46px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 1.2rem;
}
.table-clean thead th {
  border-bottom: 2px solid var(--border-soft); font-size: .78rem;
  text-transform: uppercase; letter-spacing: .04em; color: var(--muted);
  font-weight: 700;
}
.table-clean td { vertical-align: middle; font-size: .9rem; }
.status-badge { padding: .3rem .7rem; border-radius: var(--radius-pill); font-size: .72rem; font-weight: 700; }
.status-badge.approved, .status-badge.active, .status-badge.confirmed { background: #e6f7ec; color: #1b7a3d; }
.status-badge.pending { background: #fff6e0; color: #b8860b; }
.status-badge.rejected, .status-badge.cancelled { background: #fdeaea; color: #c0392b; }
.status-badge.checked_in { background: #e7f0fb; color: #2e6f9e; }
.status-badge.checked_out { background: #efeafb; color: #5a4a9e; }
.status-badge.driver_assigned { background: #e7f0fb; color: #2e6f9e; }
.status-badge.ongoing { background: #fdf0e0; color: #b8631a; }
.status-badge.completed { background: #e6f7ec; color: #1b7a3d; }

/* ---------- Cab Booking (Phase 6) ---------- */
.badge-type { display: inline-block; padding: .2rem .6rem; border-radius: var(--radius-pill); background: var(--border-soft); color: var(--forest); font-weight: 600; }
.nav-pills .nav-link { color: var(--forest); font-weight: 600; border-radius: var(--radius-pill); }
.nav-pills .nav-link.active { background: var(--forest); color: #fff; }

/* ---------- My Bookings (customer dashboard) ---------- */
.booking-card-img {
  width: 100px; height: 90px; object-fit: cover; border-radius: 12px;
  flex-shrink: 0;
}
.booking-card-actions .btn { font-size: .8rem; padding: .5rem 1.1rem; }
@media (max-width: 575.98px) {
  .booking-card-img { width: 100%; height: 160px; }
  .booking-card-actions { flex-direction: column; }
  .booking-card-actions .btn { width: 100%; }
  .booking-card h6 { font-size: 1rem; }
}

.page-link { color: var(--forest); }
.page-item.active .page-link { background: var(--forest); border-color: var(--forest); }
.page-link:focus { box-shadow: 0 0 0 .2rem rgba(36,64,47,.15); }
.progress { background: #eef1ee; }

@media (max-width: 991.98px) {
  .dash-sidebar { position: fixed; left: -260px; z-index: 1060; transition: left .3s ease; height: 100vh; }
  .dash-sidebar.open { left: 0; }
}

/* ---------- FAQ accordion ---------- */
.accordion-button {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 1.02rem;
  color: var(--ink);
  background: #fff;
  box-shadow: none !important;
}
.accordion-button:not(.collapsed) { color: var(--forest-dark); background: #fff; }
.accordion-button::after { filter: sepia(1) saturate(2) hue-rotate(2deg) brightness(.7); }
.accordion-button:focus { border-color: var(--border-soft); }

/* ---------- Newsletter ---------- */
.newsletter-band { background: var(--ink); color: rgba(244,244,239,.85); }
.newsletter-band .section-title { color: #fff; }
.newsletter-band .section-eyebrow { color: var(--gold-light); }
.newsletter-band .section-eyebrow::before { background: var(--gold-light); }
.newsletter-band .form-control { border: none; padding: .8rem 1.1rem; border-radius: var(--radius-sm); }

/* ---------- Misc ---------- */
.breadcrumb-bar { background: var(--bg-soft); padding: 1.2rem 0; border-bottom: 1px solid var(--border-soft); }
.page-header-banner {
  background: var(--gradient-forest);
  color: #fff; padding: calc(9.5rem + var(--promo-h)) 0 3.5rem; position: relative;
}
@media (max-width: 767.98px) {
  .page-header-banner { padding-top: calc(6.75rem + var(--promo-h)); }
}
.auth-card { max-width: 460px; margin: 0 auto; }
.rounded-xl { border-radius: var(--radius-lg) !important; }

/* ---------- Filter chips (vehicle type / trip type, etc.) ---------- */
.filter-block + .filter-block { margin-top: 1.1rem; }
.filter-chip-group {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}
.filter-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-radius: var(--radius-pill) !important;
  border: 1.5px solid var(--forest);
  color: var(--forest);
  background: transparent;
  font-family: 'Inter', sans-serif;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .02em;
  padding: .55rem 1.25rem;
  line-height: 1.2;
  white-space: nowrap;
  transition: all .2s ease;
}
.filter-chip:hover { background: var(--forest); color: #fff; }
.filter-chip.active {
  background: var(--gradient-forest);
  color: #fff;
  border-color: transparent;
  box-shadow: var(--shadow-sm);
}
.filter-summary { color: var(--muted); font-size: .85rem; }

@media (max-width: 767.98px) {
  .filter-chip-group { gap: .45rem; }
  .filter-chip { flex: 1 1 calc(50% - .45rem); padding: .6rem .75rem; font-size: .8rem; white-space: normal; }
  .filter-summary { display: block; text-align: center; margin-top: .9rem; }
}
@media (max-width: 380px) {
  .filter-chip { flex: 1 1 100%; }
}
/* Password show/hide toggle (login, register, reset-password, etc.) */
.password-field { position: relative; }
.password-field .form-control { padding-right: 44px; }
.password-toggle {
  position: absolute;
  top: 50%;
  right: 4px;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border: none;
  background: transparent;
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 50%;
}
.password-toggle:hover { color: var(--forest); background: rgba(0,0,0,0.04); }
.password-toggle:focus-visible { outline: 2px solid var(--forest); outline-offset: 1px; }

/* Live Ooty weather widget (homepage) */
.weather-widget {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  background: linear-gradient(120deg, var(--forest) 0%, var(--forest-dark) 100%);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: 22px 30px;
  box-shadow: var(--shadow-sm);
}
.weather-widget-icon {
  font-size: 2.6rem;
  color: var(--gold-light);
  width: 64px;
  text-align: center;
  flex-shrink: 0;
}
.weather-widget-main { flex: 1 1 220px; min-width: 200px; }
.weather-widget-place {
  font-size: .78rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: rgba(255,255,255,.7);
  margin-bottom: 4px;
}
.weather-widget-place i { color: var(--gold-light); margin-right: 4px; }
.weather-widget-temp {
  font-family: 'Georgia', serif;
  font-size: 1.9rem;
  font-weight: 700;
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.weather-widget-cond {
  font-family: 'Inter', sans-serif;
  font-size: .95rem;
  font-weight: 400;
  color: rgba(255,255,255,.82);
}
.weather-widget-stats {
  display: flex;
  gap: 26px;
  flex-wrap: wrap;
}
.weather-stat { display: flex; flex-direction: column; gap: 2px; min-width: 74px; }
.weather-stat-label {
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: rgba(255,255,255,.6);
}
.weather-stat-value { font-size: 1rem; font-weight: 600; color: #fff; }
.weather-widget-updated {
  font-size: .72rem;
  color: rgba(255,255,255,.55);
  flex-basis: 100%;
  text-align: right;
}
@media (max-width: 767.98px) {
  .weather-widget { padding: 18px 20px; gap: 16px; }
  .weather-widget-stats { gap: 18px; }
  .weather-widget-updated { text-align: left; }
}

/* ---------- Flash message popup (toast) ----------
   Replaces the old full-width inline alert banner that pushed page
   content down. Flashes now float in as dismissible popups instead. */
.flash-toast-stack {
  position: fixed;
  top: calc(1.25rem + var(--promo-h, 0px));
  right: 1.25rem;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  gap: .75rem;
  width: min(380px, calc(100vw - 2.5rem));
  pointer-events: none;
}
.flash-toast {
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  background: #fff;
  color: var(--forest-dark, #16281D);
  border-radius: 14px;
  padding: .9rem 1rem;
  box-shadow: 0 18px 40px -14px rgba(0,0,0,.35), 0 2px 8px rgba(0,0,0,.08);
  border-left: 4px solid var(--forest, #24402F);
  opacity: 0;
  transform: translateX(24px);
  transition: opacity .3s ease, transform .3s ease;
  pointer-events: auto;
}
.flash-toast.show { opacity: 1; transform: translateX(0); }
.flash-toast-success { border-left-color: #2f9e5b; }
.flash-toast-danger  { border-left-color: #d64545; }
.flash-toast-info,
.flash-toast-warning { border-left-color: var(--gold, #A47A2E); }
.flash-toast-icon { font-size: 1.15rem; line-height: 1; margin-top: 1px; }
.flash-toast-success .flash-toast-icon { color: #2f9e5b; }
.flash-toast-danger .flash-toast-icon  { color: #d64545; }
.flash-toast-info .flash-toast-icon,
.flash-toast-warning .flash-toast-icon { color: var(--gold, #A47A2E); }
.flash-toast-msg { flex: 1; font-size: .92rem; line-height: 1.4; }
.flash-toast-close {
  background: none;
  border: none;
  font-size: 1.2rem;
  line-height: 1;
  color: rgba(0,0,0,.4);
  cursor: pointer;
  padding: 0 0 0 .5rem;
  margin-top: -2px;
}
.flash-toast-close:hover { color: rgba(0,0,0,.7); }
@media (max-width: 575.98px) {
  .flash-toast-stack { left: 1.25rem; right: 1.25rem; width: auto; top: 1rem; }
}
/* ==========================================================================
   PAGE TRANSITION LOADER — OotyBookings mark bridges every page-to-page
   navigation (classic multi-page site, so this is a full-screen overlay
   shown by default in the HTML, faded out once the page finishes loading,
   and faded back in just before the browser navigates away). See
   assets/js/page-loader.js for the show/hide logic.
   ========================================================================== */
#pageLoader {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gradient-forest, linear-gradient(135deg, #1E3626 0%, #2E4C3A 100%));
  opacity: 1;
  visibility: visible;
  transition: opacity .5s ease, visibility 0s linear 0s;
}
#pageLoader.is-hidden {
  opacity: 0;
  visibility: hidden;
  transition: opacity .5s ease, visibility 0s linear .5s;
  pointer-events: none;
}
.page-loader-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
}
.page-loader-logo {
  width: 200px;
  max-width: 60vw;
  height: auto;
  /* logo-white.png is the full-colour mark on a transparent background
     (same file the footer uses); inverting it to solid white here reads
     cleanly against the dark forest-gradient overlay. */
  filter: brightness(0) invert(1);
  animation: pageLoaderBreathe 1.6s ease-in-out infinite;
}
.page-loader-bar {
  width: 140px;
  height: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  overflow: hidden;
}
.page-loader-bar::after {
  content: "";
  display: block;
  width: 40%;
  height: 100%;
  border-radius: 999px;
  background: var(--gold-light, #C7A25A);
  animation: pageLoaderSweep 1.1s ease-in-out infinite;
}
@keyframes pageLoaderBreathe {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(0.94); opacity: 0.8; }
}
@keyframes pageLoaderSweep {
  0%   { transform: translateX(-110%); }
  50%  { transform: translateX(140%); }
  100% { transform: translateX(140%); }
}
@media (prefers-reduced-motion: reduce) {
  .page-loader-logo { animation: none; }
  .page-loader-bar::after { animation: none; left: 0; width: 100%; }
}
/* ==========================================================================
   Contact page — self-contained flex/grid layout.
   Deliberately does NOT rely on Bootstrap's .row/.col-* grid math for the
   structural layout (only Bootstrap utility classes like spacing/typography
   are still used elsewhere). On slow connections the Bootstrap CSS from the
   CDN can apply late or be briefly unavailable; if that happens, elements
   that depend purely on .row > * / .col-lg-* end up shrink-wrapped instead
   of stacking full-width, which produced the "narrow floating card" bug on
   mobile. Every rule below is same-origin (ships in this file) and mobile-
   first, so the contact page always lays out correctly regardless of CDN
   timing.
   ========================================================================== */

.contact-page .req { color: var(--orange); }

/* ---------- Info cards (Call / Email / WhatsApp / Office) ---------- */
.contact-info-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.1rem;
}
@media (min-width: 576px) {
  .contact-info-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 992px) {
  .contact-info-grid { grid-template-columns: repeat(4, 1fr); }
}
.contact-info-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1.75rem 1.25rem;
  width: 100%;
  box-sizing: border-box;
}
.contact-info-card h6 { font-weight: 600; margin-bottom: .4rem; }
.contact-info-card .text-muted-soft { font-size: .92rem; word-break: break-word; }

/* Office card gets its own internal layout (was completely unstyled
   before, so its rows had no spacing/alignment on any screen size). */
.office-card { align-items: stretch; text-align: left; }
.office-details {
  display: flex;
  flex-direction: column;
  gap: .85rem;
  width: 100%;
}
.office-row { display: flex; flex-direction: column; gap: .15rem; }
.office-row strong {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted);
  font-weight: 600;
}
.office-row span {
  font-size: .9rem;
  color: var(--ink);
  line-height: 1.4;
  word-break: break-word;
}

/* ---------- Form + map main layout ---------- */
.contact-main-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.75rem;
  width: 100%;
}
@media (min-width: 992px) {
  .contact-main-grid { grid-template-columns: 1.1fr 1fr; align-items: start; }
}

.contact-form-card {
  width: 100%;
  box-sizing: border-box;
  padding: 1.75rem 1.5rem;
}
@media (min-width: 768px) {
  .contact-form-card { padding: 2.25rem 2.5rem; }
}

.contact-form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.1rem;
  width: 100%;
}
@media (min-width: 576px) {
  .contact-form-grid { grid-template-columns: 1fr 1fr; }
}
.contact-field { display: flex; flex-direction: column; min-width: 0; }
.contact-field-full { grid-column: 1 / -1; }

/* 16px font-size on inputs stops iOS Safari from auto-zooming the page
   when a field is focused — a common source of "broken layout" reports
   on mobile that's actually the browser's own zoom kicking in. */
.contact-form .form-control {
  width: 100%;
  box-sizing: border-box;
  font-size: 1rem;
  padding: .7rem .9rem;
  min-height: 48px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-soft);
}
.contact-form textarea.form-control { min-height: 130px; resize: vertical; }
.contact-form .form-control:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 .2rem rgba(164,122,46,.15);
  outline: none;
}
.contact-form .btn-brand { min-height: 50px; font-size: 1rem; }

/* ---------- Map column ---------- */
.contact-map-card {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: .9rem;
}
.contact-map-frame {
  width: 100%;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}
.contact-map-frame iframe { width: 100%; height: 100%; }
.contact-map-link {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  font-weight: 600;
  font-size: .9rem;
  color: var(--forest);
  padding: .6rem 1.1rem;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-pill);
  transition: all .2s ease;
}
.contact-map-link:hover { background: var(--forest); color: #fff; border-color: var(--forest); }

@media (max-width: 575.98px) {
  .contact-form-card { padding: 1.5rem 1.1rem; }
  .contact-info-card { padding: 1.5rem 1rem; }
}