/* ==========================================================================
   Global Root Layout Foundations
   ========================================================================== */
:root {
  --nav-tan: #D2B48C; /* Premium soft tan accent color variable */
}

body p {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Nunito Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
}
body b, strong {font-weight:800;}
body.scroll-locked {
  overflow: hidden !important;
  height: 100vh !important;
}
h1,h2,h3,h4,h5,h6  {
  font-family: "Cormorant Garamond", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}
body ul {
 
  font-family: "Nunito Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300; 
  font-style: normal;
  
}
ul li::marker {
  color: #ac7f48;         /* Changes only the bullet color to red-orange */
  font-size: 1.2em;       /* Makes the bullet slightly larger */
}
/* ==========================================================================
   Scroll-Reactive Navbar Classes
   ========================================================================== */
.navbar-transparent {
  background-color: transparent !important;
  border-bottom: 1px solid transparent !important;
  box-shadow: none !important;
  transition: background-color 0.4s ease-out, border-color 0.4s ease-out, box-shadow 0.4s ease-out;
}

.glass-navbar {
  background-color: rgba(255, 255, 255, 0.75) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.04);
  transition: background-color 0.4s ease-out, border-color 0.4s ease-out, box-shadow 0.4s ease-out;
}

/* ==========================================================================
   MAIN MENU
/* ========================================================================== */


body.menu-open {
  overflow: hidden;
}

/* 1. Fixed Navbar Layout */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.25rem 5%;
  background: rgba(255, 255, 255, 0.1); 
  backdrop-filter: blur(4px);
  transition: background 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  z-index: 1000; 
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.navbar.scrolled {
  background: rgba(255, 255, 255, 1);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  border-bottom-color: rgba(0, 0, 0, 0.05);
}

.navbar.menu-active {
  background: transparent; 
  border-bottom-color: rgba(255, 255, 255, 0.1);
  box-shadow: none;
}

/* 2. Dual-State Logo System */
.logo-container {
  position: relative;
  width: 175; 
  height: 80px; 
}

.logo-container img {
  width: auto;
  height: 100%;
  max-height: 80px; /* Restricts the logo height to keep your navbar clean */
  object-fit: contain;
}

.logo {
  position: absolute;
  top: 0;
  left: 0;
  font-size: 1.5rem;
  font-weight: 700;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.logo-white { color: #ffffff; opacity: 1; }
.logo-color { color: #2563eb; opacity: 0; }

.navbar.scrolled .logo-white { opacity: 0; }
.navbar.scrolled .logo-color { opacity: 1; }

.navbar.menu-active .logo-white { opacity: 1; }
.navbar.menu-active .logo-color { opacity: 0; }

.nav-actions {
  display: flex;
  align-items: center;
  gap: 1.2rem;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px; /* Space between SVG icon and button text string */
  text-align: center;
  padding: 0.6rem 1.4rem;
 
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
  transition: all 0.3s ease;
}

/* Inline SVG sizing */
.btn-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* Header Secondary Variant (Plan Your Trip) */
.btn-secondary {
  
  color: #ffffff;
  background: #B2773A; border: 0px; border-radius:0px;
}
.btn-secondary:hover { background: #ac7f48; }

.navbar.scrolled .btn-secondary {
 color: #ffffff;
  background: #B2773A;
}
.navbar.scrolled .btn-secondary:hover { background: #ac7f48; color: #ffffff; border: 0px; }

.navbar.menu-active .btn-secondary {
 color: #E4E2D9;
  background: #B2773A;
}
.navbar.menu-active .btn-secondary:hover { background: #332114; color: #ffffff; }

.btn-primary { background: #332114; color: #ffffff; border: none; border-radius:0px }
.btn-primary:hover { background: #B2773A;color: #332114; }

.btn-secondary-mobile {
  border: 2px solid rgba(255, 255, 255, 0.4);
  color: #ffffff;
  background: transparent;
}
.btn-secondary-mobile:hover { background: rgba(255, 255, 255, 0.1); border-color: #ffffff; }

/* 4. Morphing Hamburger Icon + Dynamic Label Text */
.menu-toggle {
  background: none;
  border: none;
  color: #AC7F48;
  cursor: pointer;
  padding: 0.5rem;
  display: flex;
  align-items: center;
  gap: 12px; 
  margin-left: 0.5rem;
  height: 32px;
}

/* Center spinal spine bar of the letter 'E' */
.hamburger {
  position: relative;
  width: 18px; 
  height: 2px;
  background-color: #ffffff; 
  display: block;
  transition: background-color 0.3s ease, width 0.3s ease;
}

/* Outer boundary lines expand to finish the layout structure */
.hamburger::before, 
.hamburger::after {
  content: "";
  position: absolute;
  width: 24px; 
  height: 2px;
  background-color: #ffffff;
  left: 0;
  transition: transform 0.3s ease, top 0.3s ease, bottom 0.3s ease, background-color 0.3s ease, width 0.3s ease;
}
.hamburger::before { top: -7px; }
.hamburger::after { bottom: -7px; }

/* Color tracking changes when layout scrolls down */
.navbar.scrolled .hamburger,
.navbar.scrolled .hamburger::before,
.navbar.scrolled .hamburger::after {
  background-color: #B2773A;
}

/* Retain solid white rules when mobile panel is open */
.navbar.menu-active .hamburger::before,
.navbar.menu-active .hamburger::after {
  background-color: #ffffff;
  width: 24px; 
}

/* Open Panel Transformations: Converts 'E' shape back into an even closed 'X' mark */
.navbar.menu-active .hamburger {
  background-color: transparent !important; 
}
.navbar.menu-active .hamburger::before { top: 0; transform: rotate(45deg); }
.navbar.menu-active .hamburger::after { bottom: 0; transform: rotate(-45deg); }


/* --- UPDATED TOGGLE TEXT ADJUSTMENT --- */
.toggle-text {
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #ffffff; 
  transition: color 0.3s ease;
  display: inline-block;
  min-width: 45px; 
  text-align: left;
  
  /* Added Translation nudge to push text 2px down vertically */
  transform: translateY(2px); 
}

.toggle-text::before { content: "MENU"; }
.navbar.scrolled .toggle-text { color: #B2773A; }
.navbar.menu-active .toggle-text { color: #ffffff; }
.navbar.menu-active .toggle-text::before { content: "CLOSE"; }


/* 5. Full-Screen Drawer Menu Panel */
.offcanvas-menu {
  position: fixed;
  top: 0;
  right: -100%;
  width: 100%;
  height: 100vh;
  background: rgba(0, 0, 0, 0.55); 
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  padding: 7rem 5% 4rem 5%; 
  display: flex;
  flex-direction: column;
  transition: right 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 950; 
}

.offcanvas-menu.active { right: 0; }

/* Update your CSS from this: .nav-links */
/* To target the WordPress output element accurately: */
.nav-links,
.nav-links ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2.5rem;
  margin-top: auto;
  margin-bottom: auto;
}

.nav-links li a {
  text-decoration: none;
  color: #F2F1EB; font-family: "Cormorant Garamond", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-size: 2.2rem; letter-spacing:2px;
  transition: color 0.2s ease, transform 0.2s ease;
  display: inline-block;
}

.nav-links li a:hover {
  color: #AC7F48; 
  transform: scale(1.05);
}

/* --- Added Mobile Media Query (Bootstrap 5 'sm' breakpoint) --- */
@media (max-width: 575.98px) {
  .nav-links,
  .nav-links ul {
    gap: 1.5rem; /* Slightly reduced gap so links don't overflow on small screens */
  }

  .nav-links li a {
    font-size: 1.5rem; /* Mobile font size */
  }
}

.mobile-ctas {
  display: none;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
  max-width: 320px;
  margin: 0 auto;
}

.mobile-ctas .btn { font-size: 1.1rem; padding: 0.9rem; }

.nav-links li, .mobile-ctas {
  opacity: 0;
  transform: translateY(25px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.offcanvas-menu.active .nav-links li,
.offcanvas-menu.active .mobile-ctas {
  opacity: 1;
  transform: translateY(0);
  transition-delay: calc(0.08s * var(--slide-order));
}

.content-spacer {
  height: 200vh; 
  padding: 150px 10% 50px 10%; 
  background: linear-gradient(180deg, #1f2937, #d1d5db);
  font-size: 1.2rem;
  line-height: 1.6;
  color: #ffffff;
}

@media (max-width: 560px) {
  .nav-actions .btn { display: none; }
  .mobile-ctas { display: flex; }
}


/* ==========================================================================
   The Animated Mouse Indicator Mechanics
   ========================================================================== */
.mouse-frame {
  width: 26px;
  height: 44px;
  border: 2px solid rgba(255, 255, 255, 0.65);
  border-radius: 20px;
  position: relative;
  display: flex;
  justify-content: center;
}

.mouse-wheel {
  width: 4px;
  height: 8px;
  background-color: #ffffff;
  border-radius: 4px;
  position: absolute;
  top: 8px;
  animation: scrollWheelMove 1.6s ease-out infinite;
}

@keyframes scrollWheelMove {
  0% { opacity: 0; transform: translateY(0); }
  20% { opacity: 1; }
  60% { opacity: 1; transform: translateY(12px); }
  100% { opacity: 0; transform: translateY(16px); }
}



/* ==========================================================================
   Media Controller Deck UI Rules
   ========================================================================== */

/* 1. Left Hand Side Circle Button Structure */
.video-control-ring {
  width: 80px;
  height: 80px;
  background-color: rgba(255, 255, 255, 0.1);
  border: 2px solid rgba(255, 255, 255, 0.5);
  color: #ffffff;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
  position: relative;
}

.video-control-ring:hover {
  background-color: rgba(255, 255, 255, 0.25);
  border-color: #ffffff;
  transform: scale(1.05);
}

/* 2. Pure CSS Morphing Play / Pause Icon Blueprint */
.media-icon-glyph {
  position: relative;
  display: block;
  width: 14px;
  height: 14px;
  transition: transform 0.3s ease-out;
}

/* Base State: Renders a Pause Icon (2 parallel vertical lines) */
.media-icon-glyph::before,
.media-icon-glyph::after {
  content: '';
  position: absolute;
  top: 0;
  width: 4px;
  height: 14px;
  background-color: #ffffff;
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), 
              width 0.4s ease, 
              height 0.4s ease, 
              left 0.4s ease;
}

.media-icon-glyph::before { left: 1px; }
.media-icon-glyph::after { left: 9px; }

/* Morph State: When video is paused, shape transitions smoothly to a Play triangle */
.video-is-paused .media-icon-glyph {
  transform: translateX(2px); /* Offsets alignment shift on triangle point bounds */
}

.video-is-paused .media-icon-glyph::before {
  left: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 7px 0 7px 12px;
  border-color: transparent transparent transparent #ffffff;
  background-color: transparent;
  transform: scale(1);
}

/* Hide secondary bar entirely during play triangle render mode */
.video-is-paused .media-icon-glyph::after {
  opacity: 0;
  transform: scale(0);
}
/* Ensure the video element has a base transition style */
#heroVideo.fade-video {
  opacity: 1;
  transition: opacity 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

/* 
   State Rule: When video has the paused class, force opacity to 0.
   Using !important ensures it overrides the inline z-index/display constraints.
*/
#heroVideo.video-is-paused-mode {
  opacity: 0 !important;
  pointer-events: none; /* Prevents an invisible video layer from blocking button clicks */
}
/* Base structural layers */
.video-hero-sandbox {
  position: relative;
}

/* Image fallback styling */
#heroPoster.fallback-image-layer {
  z-index: 2;
  opacity: 1;
  transition: opacity 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Base video styling */
#heroVideo.fade-video {
  z-index: 1;
  opacity: 0;
  transition: opacity 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

/* ==========================================================================
   ACTIVE PLAYBACK STATE: Fades video in and drops the image out of focus
   ========================================================================== */
#heroVideo:not(.video-is-paused-mode) {
  z-index: 3 !important; /* Forces video to move above the image layer */
  opacity: 1 !important;  /* Fades video into view smoothly */
}

#heroVideo:not(.video-is-paused-mode) ~ #heroPoster.fallback-image-layer {
  opacity: 0 !important;  /* Fades out the image layer completely */
}

/* --- Keep existing mouse animations and rules intact below --- */
.mouse-frame {
  width: 26px;
  height: 44px;
  border: 2px solid rgba(255, 255, 255, 0.65);
  border-radius: 20px;
  position: relative;
  display: flex;
  justify-content: center;
}

.mouse-wheel {
  width: 4px;
  height: 8px;
  background-color: #ffffff;
  border-radius: 4px;
  position: absolute;
  top: 8px;
  animation: scrollWheelMove 1.6s ease-out infinite;
}

@keyframes scrollWheelMove {
  0% { opacity: 0; transform: translateY(0); }
  20% { opacity: 1; }
  60% { opacity: 1; transform: translateY(12px); }
  100% { opacity: 0; transform: translateY(16px); }
}

/* ==========================================================================
   Precision Video-to-Poster Image Crossfade Rules
   ========================================================================== */

/* Gives the video layer a smooth 0.6 second hardware-accelerated fade curve */
.fade-video {
  opacity: 1;
  transition: opacity 0.6s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: opacity;
}

/* 
  When the video element has this class, it smoothly fades out.
  The dedicated <img> tag underneath stays perfectly crisp and visible.
*/
.video-is-paused-mode {
  opacity: 0 !important;
}


/* ==========================================================================
   Section Blueprint Matrix Styles (Static Offsets & Plain White Text)
   ========================================================================== */
.blueprint-section-sandbox {
  min-height: 500px;
}

.blueprint-bg-image {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.25;
  z-index: 1;
}

.technical-grid-overlay {
  pointer-events: none;
}

.blueprint-line {
  position: absolute;
  background-color: rgba(255, 255, 255, 1.0); /* Premium Tan matching menu lines */
  will-change: transform, background-color;
}

/* Independent Vertical Line Animation Configuration */
.section-vertical-line {
  top: 0;
  right: 150px; /* Base horizontal grid axis */
  width: 1px;
  height: 100%;
  animation: mechanicalPulseVertical 6.2s cubic-bezier(0.4, 0, 0.2, 1) infinite alternate;
}

/* Independent Horizontal Line Animation Configuration */
.section-horizontal-line {
  bottom: 100px; /* Base vertical grid axis */
  left: 0;
  width: 100%;
  height: 1px;
  animation: mechanicalPulseHorizontal 3.8s cubic-bezier(0.4, 0, 0.2, 1) infinite alternate;
}

/* 
  STATIC PLAIN WHITE COORDINATES TEXT STYLE
  - 'right: 50px' locations it exactly 100px to the right of the vertical line line boundary (150px - 100px)
  - 'bottom: 50px' locations it exactly 50px below the horizontal line line boundary (100px - 50px)
*/
.static-crosshair-label {
  position: absolute;
  right: 250px; 
  bottom: 30px;
  color: #ffffff;             /* Clean plain white text style */
  font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.72rem;
  letter-spacing: 0.15em;
  padding: 0;
  margin: 0;
  background: none !important; /* No background container boxes */
  border: none !important;     /* No panel layout borders */
  white-space: nowrap;
  z-index: 5;
}

/* ==========================================================================
   Independent Movement Keyframe Loops
   ========================================================================== */
@keyframes mechanicalPulseVertical {
  0% {
    transform: translateX(0);
    background-color: rgba(255, 255, 255, 0.15);
  }
  50% {
    background-color: rgba(255, 255, 255, 0.4);
  }
  100% {
    transform: translateX(-60px);
    background-color: rgba(255, 255, 255,0.15);
  }
}

@keyframes mechanicalPulseHorizontal {
  0% {
    transform: translateY(0);
    background-color: rgba(255, 255, 255, 0.15);
  }
  50% {
    background-color: rgba(255, 255, 255, 0.4);
  }
  100% {
    transform: translateY(40px);
    background-color: rgba(255, 255, 255, 0.15);
  }
}



/* --- LUXURY SAFARI TRACK SLIDER SYSTEM --- */
.safari-track-slider {
  width: 100%;
  position: relative;
  /* UPDATED: Main background body set to your signature safari sand color tint */
  background-color: #CECC8E; 
  padding-bottom: 2rem; 
}

.slider-viewport {
  width: 100%; padding: 50px 0px 0px;
  height: 500px;
  overflow: hidden; 
}

.slider-track {
  display: flex;
  height: 100%;
  width: 100%;
  will-change: transform;
}

/* Individual Slide Pane Styles */
.slider-pane {
  position: relative;
  height: 100%;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  flex: 0 0 calc(25% - 7.5px); 
  width: calc(25% - 7.5px);
  margin-right: 10px; /* Fixed 10px spacing gap between cards */
  transition: flex 0.6s cubic-bezier(0.16, 1, 0.3, 1), width 0.6s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease;
}

.slider-pane.active {
  flex: 0 0 calc(50% - 5px);
  width: calc(50% - 5px);
}

/* --- OVERLAY CAPTION COMPONENT FONTS & GRADIENTS --- */
.slide-gradient-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 65%;
  background: linear-gradient(to top, rgba(28, 29, 26, 0.95) 0%, rgba(28, 29, 26, 0.5) 45%, rgba(28, 29, 26, 0) 100%);
  display: flex;
  align-items: flex-end;
  padding: 3.5rem 8%;
}

.slide-caption-content {
  width: 100%;
  max-width: 520px;
}

.slide-heading {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 400;
  color: #ffffff;
  margin-bottom: 0.5rem;
  font-size: 1.4rem;
  transition: font-size 0.5s ease, border 0.5s ease;
}

.slide-paragraph {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  color: #e8e3d5;
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 0;
  opacity: 0;
  max-height: 0;
  transform: translateY(15px);
  transition: opacity 0.4s ease, transform 0.4s ease, max-height 0.4s ease;
  overflow: hidden;
}

.slider-pane.active .slide-heading {
  font-size: 2.6rem;
  padding-bottom: 0.5rem;
  margin-bottom: 0.75rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.slider-pane.active .slide-paragraph {
  opacity: 1;
  max-height: 120px;
  transform: translateY(0);
  transition-delay: 0.2s;
}

/* --- LOWER METRIC CONTROLS SECTION (REALIGNED TO MATCH NEW THEME) --- */
.slider-bottom-controls {
  max-width: 1200px;
  margin: 0 auto;
}

/* UPDATED: Dynamic numbers tracker string color matches dark wood #332114 */
.slider-counter-string {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: #332114; 
  letter-spacing: 0.05em;
  min-width: 40px;
}

/* UPDATED: The hair-thin static background timeline track line turns into dark wood #332114 */
.slider-timeline-rail {
  flex-grow: 1;
  height: 1px; 
  background: rgba(51, 33, 20, 0.75); /* Subtle transparent variant of #332114 for clean visibility */
  margin: 0 2rem;
  position: relative;
}

/* Active moving bullet line indicator */
.slider-timeline-mover {
  position: absolute;
  top: -1px;
  left: 0;
  height: 3px; 
  width: 0%; 
  background-color: #ff3300; /* Dynamic active orange/gold timeline metric */
  transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1), left 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* UPDATED: Directional control buttons now feature completely round circles */
.nav-arrow-btn {
  background: transparent;
  border: 1px solid #332114; /* Border path matches espresso #332114 */
  color: #332114; /* Arrow icons map to #332114 */
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1.1rem;
  
  /* UPDATED: Enforces a perfectly round circular geometric format shape layout */
  border-radius: 50% !important; 
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

/* UPDATED HOVER: Turns into bright orange progress color, background fills, and arrow flips to white */
.nav-arrow-btn:hover {
  background-color: #ffb74d !important; /* Vivid active matching orange theme fill color */
  border-color: #ffb74d !important;
  color: #ffffff !important; /* Clean contrast white vector arrows on hover trigger */
}

/* Responsive breakdowns formatting rules */
@media (max-width: 768px) {
  .slider-viewport { height: 450px; }
  .slider-pane { flex: 0 0 0% !important; width: 0% !important; margin-right: 0 !important; opacity: 0; }
  .slider-pane.active { flex: 0 0 100% !important; width: 100% !important; opacity: 1; }
  .slider-pane.active .slide-heading { font-size: 2.2rem; }
  .slider-timeline-rail { margin: 0 1rem; }
}



.plethoraplugins-tabs-container--horizontal.plethoraplugins-theme__minimal.plethoraplugins-theme__basic .plethoraplugins-tabs a { color:#ac7f48;font-size: 14px; font-weight:500; letter-spacing:2px;  }

.plethoraplugins-tabs-container--horizontal.plethoraplugins-theme__minimal.plethoraplugins-theme__basic .plethoraplugins-tabs a.active { color:#332114; border-bottom:#332114;}

.plethoraplugins-accordion.plethoraplugins-theme__minimal.plethoraplugins-theme__basic .pds-accordion__title {
    background: #ac7f48;
    color: #FFFFFF; font-weight: 400; letter-spacing:2px;
    margin-bottom: var(--pds-tabs-acc-header-gap-basic);
    padding: var(--pds-tabs-acc-header-padding-basic);
}

/* ==========================================================================
   Sesha Game Ranch Custom Inquiry Form Styling
   ========================================================================== */

/* 1. Base Structure & Form Containment Grid */
#seshaInquiryForm .form-floating {
    position: relative;
}

/* 2. Accommodation Selection Cards Base State */
#seshaInquiryForm .form-check.p-3.rounded.border {
    background-color: #F2F1EB !important;
    border-color: #E4E2D9 !important;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

/* Hover effect to make the cards feel interactive */
#seshaInquiryForm .form-check.p-3.rounded.border:hover {
    background-color: #EBEAE2 !important;
    border-color: #D6D4C8 !important;
}

/* 3. Form Check Radio and Circular Checkbox Inputs Base State */
#seshaInquiryForm .form-check-input {
    border-color: #AC7F48 !important;
    background-color: #F2F1EB;
}

#seshaInquiryForm .form-check-input.rounded-circle:checked {
    border-radius: 50% !important; /* Locks circle geometry shape on check rendering */
}

/* Checked State: Apply premium gold color theme values when clicked */
#seshaInquiryForm .form-check-input:checked {
    background-color: #AC7F48 !important;
    border-color: #AC7F48 !important;
    box-shadow: 0 0 0 0.25rem rgba(172, 127, 72, 0.25) !important; /* Soft match focus halo */
}

/* 4. Base Input, Textarea, & Select Controls Styling */
#seshaInquiryForm .form-control,
#seshaInquiryForm .form-select,
#seshaInquiryForm textarea.form-control {
    background-color: #F2F1EB !important; /* Custom soft warm gray background */
    color: #4A4A4A !important;           /* Dark gray text for readability */
    border: 1px solid #E4E2D9 !important; /* Discrete matching border */
}

/* 5. Floating Labels Positioning Engine (Prevents Overlapping) */
#seshaInquiryForm .form-floating > label,
#seshaInquiryForm .form-label {
    color: #AC7F48 !important; /* Premium gold styling for text indicators */
}

/* Normal state: label sits nicely inside the field */
#seshaInquiryForm .form-control:placeholder-shown ~ label,
#seshaInquiryForm .form-select:placeholder-shown ~ label {
    transform: scale(1) translateY(0);
}

/* Floating animation state when input is active or filled out */
#seshaInquiryForm .form-control:focus ~ label,
#seshaInquiryForm .form-control:not(:placeholder-shown) ~ label,
#seshaInquiryForm .form-select:focus ~ label,
#seshaInquiryForm .form-select:not([value=""]) ~ label {
    transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem) !important;
    color: #AC7F48 !important;
    opacity: 1;
}

/* 6. Input Focus State (When clicked into) */
#seshaInquiryForm .form-control:focus,
#seshaInquiryForm .form-select:focus {
    background-color: #F2F1EB !important;
    border-color: #AC7F48 !important;     /* Changes border color to your gold */
    box-shadow: 0 0 0 0.25rem rgba(172, 127, 72, 0.15) !important; /* Matching gold focus halo */
}

/* ==========================================================================
   7. Native Placeholder Styling Engine (FIXED STRUCTURAL LEAK)
   ========================================================================== */

/* Hide the placeholder text completely when the label is resting inside the input */
#seshaInquiryForm .form-control:placeholder-shown::placeholder,
#seshaInquiryForm textarea.form-control:placeholder-shown::placeholder {
    color: transparent !important;
    opacity: 0 !important;
}

/* Only reveal your premium gold placeholder when the user actively clicks into the field */
#seshaInquiryForm .form-control:focus::placeholder,
#seshaInquiryForm textarea.form-control:focus::placeholder {
    color: #AC7F48 !important;
    opacity: 0.5 !important; 
    transition: opacity 0.2s ease;
}

/* Cross-browser placeholder engine structural resets */
#seshaInquiryForm .form-control:placeholder-shown:-ms-input-placeholder { color: transparent !important; }
#seshaInquiryForm .form-control:placeholder-shown::-ms-input-placeholder { color: transparent !important; }

/* Explicit isolation protection rule ensuring the footer elements never inherit form opacity drops */
.footer-logo-link,
.footer-logo-link img {
    opacity: 1 !important;
    color: #ffffff !important;
    display: inline-block !important;
    visibility: visible !important;
}

/* 8. Native Calendar Picker Invisible Overlay Matrix */
#seshaInquiryForm input[type="date"]::-webkit-calendar-picker-indicator {
    background: transparent !important; /* Empties webkit assets to allow pseudo elements */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    z-index: 2;
}

/* 9. Premium Custom SVG Injections (FIXED XML NAMESPACES) */

/* Inject custom gold calendar icon on date wrappers */
#seshaInquiryForm .custom-date-wrapper::after {
    content: '';
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    pointer-events: none;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://w3.org" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%23AC7F48" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>') !important;
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 1;
}

/* Inject custom gold dropdown arrow on select elements */
#seshaInquiryForm .form-select.custom-select-arrow {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://w3.org' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23AC7F48' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
    background-position: right 16px center !important;
    background-size: 16px 12px !important;
}
/* 1. Hide the placeholder completely when the label is resting inside the input */
#seshaInquiryForm .form-control:placeholder-shown::placeholder {
    color: transparent !important;
    opacity: 0 !important;
}

/* 2. Only reveal your premium gold placeholder when the user actively clicks into the field */
#seshaInquiryForm .form-control:focus::placeholder {
    color: #AC7F48 !important;
    opacity: 0.5 !important; /* Kept slightly soft so it doesn't compete with the label */
    transition: opacity 0.2s ease;
}

/* Also ensure cross-browser placeholders obey the transparency hide rule */
#seshaInquiryForm .form-control:placeholder-shown:-ms-input-placeholder { color: transparent !important; }
#seshaInquiryForm .form-control:placeholder-shown::-ms-input-placeholder { color: transparent !important; }
/* ==========================================================================
   DROPDOWN VALUE OPTION VISIBILITY FIX
   ========================================================================== */

/* Forces browser select dropdown option strings to render in high-contrast dark gray */
#seshaInquiryForm .form-select option {
    color: #4A4A4A !important;
    background-color: #F2F1EB !important; /* Matches your soft warm background theme */
}

/* Fixes the rendering color for the text inside the input container box once selected */
#seshaInquiryForm .form-select {
    color: #4A4A4A !important;
}

/* Cleans up the floating selector override rule to prevent dropdown collision glitches */
#seshaInquiryForm .form-select:focus ~ label,
#seshaInquiryForm .form-select:valid ~ label {
    transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem) !important;
    color: #AC7F48 !important;
    opacity: 1;
}

/* Creates a locked bounding frame around each form field */
#seshaInquiryForm .sesha-input-wrapper {
    position: relative;
    width: 100%;
    display: block;
}

/* Positions icons perfectly relative to the new bounding frame */
#seshaInquiryForm .sesha-input-wrapper .sesha-inline-icon {
    position: absolute !important;
    right: 16px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 20px !important;
    height: 20px !important;
    pointer-events: none !important; /* Allows clicks to pass through to inputs */
    z-index: 10 !important;          /* Keeps icons on top when inputs shift */
}

#seshaInquiryForm .sesha-experience-icon {
    display: inline-block;
    vertical-align: middle;
    flex-shrink: 0; /* Prevents icons from squishing on mobile layouts */
}

#heading-footer { font-family: "Nunito Sans", sans-serif;
  font-optical-sizing: auto; font-size: 21px; color:#332114;
	font-weight:900; letter-spacing:2px;}

/* ==========================================================================
   FOOTER
   ========================================================================== */

   /* Custom Footer Styling */
footer, 
.footer-links a, 
.footer-links i {
  color: #AC7F48 !important;
  transition: opacity 0.2s ease-in-out;
}

/* Subtle hover effect for interactivity */
.footer-links a:hover, 
.footer-links a:hover i {
  opacity: 0.8;
}

.footer-sliding-menu a {color:#AC7F48; text-decoration:none; text-transform:none; letter-spacing:2px; font-size:0.95rem; font-weight:300; padding-bottom:10px 0px; }
.footer-sliding-menu a:hover {color:#332114; font-weight:400;}

.contact-details a {color:#332114; text-decoration:none; font-family: "Cormorant Garamond", serif;
  font-optical-sizing: auto; font-size:1.5rem;
  font-weight: 400;
  font-style: normal;  }
.contact-details a:hover {color:#332114;}

 .price-container {
      font-family: 'Cormorant Garamond', serif;
      display: inline-block;
      line-height: 1.1;
    }

    .price-main {
      font-weight: 700;
      color: #332114; /* Change to your preferred text color */
    }

    .currency {
      font-size: 1.25rem; /* Small currency code */
      vertical-align: super; /* Aligns currency to the top */
      margin-right: 2px;
    }

    .amount {
      font-size: 3rem; /* Big amount */
    }

    .price-subtext {
      display: block;
      font-size: 1rem; font-family: "Nunito Sans", sans-serif;
      color: #000; /* Muted gray for the label */
      font-weight: 400;
      margin-top: 4px;
    }

* Targets mobile and tablets (everything below 768px) */
@media (max-width: 767.98px) {
    body p {
        text-align: center;
    }
	
	.nav-links li a {font-size:1.5rem;}
}

.ranch-safari-theme {
    background-color: var(--safari-cream-bg) !important;
    color: var(--safari-text-dark);
}

.ranch-safari-theme .card {
    background-color: #ffffff;
    border: 1px solid var(--safari-soft-cream) !important;
}

.ranch-safari-theme .btn-dark, 
.ranch-safari-theme .btn-primary {
    background-color: var(--safari-tobacco) !important;
    border-color: var(--safari-tobacco) !important;
    color: #ffffff !important;
}

.ranch-safari-theme .btn-dark:hover, 
.ranch-safari-theme .btn-primary:hover {
    background-color: var(--safari-dark-brown) !important;
    border-color: var(--safari-dark-brown) !important;
}

.ranch-safari-theme .text-muted {
    color: #6e6255 !important;
}

.ranch-safari-theme .badge.bg-dark {
    background-color: var(--safari-tobacco) !important;
}

.ranch-safari-theme .border-end,
.ranch-safari-theme .border-start {
    border-color: var(--safari-soft-cream) !important;
}
.flatpickr-calendar {
    background: #ffffff !important;
    border: 1px solid #f3ede2 !important;
    box-shadow: 0 10px 25px rgba(43, 32, 19, 0.1) !important;
    font-family: 'Inter', sans-serif !important;
    border-radius: 12px !important;
    padding: 6px !important;
}

.flatpickr-months .flatpickr-month {
    background: #3d2f1d !important;
    color: #ffffff !important;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

.flatpickr-current-month .flatpickr-monthDropdown-months,
span.flatpickr-weekday {
    font-weight: 700 !important;
    text-uppercase: uppercase !important;
    font-size: 0.75rem !important;
    letter-spacing: 0.05em !important;
}

span.flatpickr-weekday {
    color: #6e6255 !important;
    background: #f9f6f0 !important;
    padding: 6px 0 !important;
}

.flatpickr-day.selected, 
.flatpickr-day.startRange, 
.flatpickr-day.endRange, 
.flatpickr-day.selected.inRange, 
.flatpickr-day.startRange.inRange, 
.flatpickr-day.endRange.inRange, 
.flatpickr-day.selected:focus, 
.flatpickr-day.startRange:focus, 
.flatpickr-day.endRange:focus, 
.flatpickr-day.selected:hover, 
.flatpickr-day.startRange:hover, 
.flatpickr-day.endRange:hover {
    background: #B2773A !important;
    border-color: #B2773A !important;
    color: #ffffff !important;
}

.flatpickr-day.inRange {
    background: #f3ede2 !important;
    border-color: transparent !important;
    box-shadow: -5px 0 0 #f3ede2, 5px 0 0 #f3ede2 !important;
    color: #221c16 !important;
}

.flatpickr-day:hover {
    background: #e6ded0 !important;
    border-color: #e6ded0 !important;
}

.flatpickr-day.today {
    border-color: #3d2f1d !important;
}

.flatpickr-day.today:hover {
    background: #3d2f1d !important;
    color: #ffffff !important;
}

.flatpickr-months .flatpickr-prev-month, 
.flatpickr-months .flatpickr-next-month {
    color: #ffffff !important;
    fill: #ffffff !important;
}