/* O8(4) — Homepage route planner glassmorphic submergence and boundary highlight purge. */
html body[data-oloropa-page="index.php"] #home-hero .ol-o5-booking-card.ol-o3-route-card-contrast.ol-o8-route-glass-card,
html body[data-oloropa-page="index.php"] .ol-o5-award-hero .ol-o5-booking-card.ol-o3-route-card-contrast.ol-o8-route-glass-card,
html body[data-oloropa-page="index.php"][data-oloropa-luxury-safari] #home-hero .ol-o5-booking-card.ol-o3-route-card-contrast.ol-o8-route-glass-card {
  --o84-brown: #2D1F18;
  --o84-espresso: #1E1510;
  --o84-charcoal: #18110D;
  --o84-gold: #D4A373;
  --o84-rust: #A25A38;
  --o84-ivory: #FDFBF7;
  --o84-muted-ivory: rgba(253, 251, 247, .78);
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: clamp(.82rem, 1.22vw, 1.08rem) !important;
  align-content: start !important;
  padding: clamp(1rem, 1.5vw, 1.36rem) !important;
  border-radius: clamp(1.35rem, 2vw, 1.72rem) !important;
  border: 1px solid rgba(253, 251, 247, .13) !important;
  color: var(--o84-ivory) !important;
  background:
    radial-gradient(circle at 13% 4%, rgba(253, 251, 247, .13), transparent 10.5rem),
    radial-gradient(circle at 87% 104%, rgba(212, 163, 115, .14), transparent 12.5rem),
    linear-gradient(180deg,
      rgba(253, 251, 247, .055) 0%,
      rgba(212, 163, 115, .055) 24%,
      rgba(45, 31, 24, .45) 46%,
      rgba(30, 21, 16, .58) 100%) !important;
  background-color: rgba(45, 31, 24, .38) !important;
  -webkit-backdrop-filter: blur(16px) saturate(120%) !important;
  backdrop-filter: blur(16px) saturate(120%) !important;
  box-shadow:
    0 30px 92px rgba(13, 8, 5, .34),
    0 0 0 1px rgba(212, 163, 115, .08),
    inset 0 1px 0 rgba(253, 251, 247, .18),
    inset 0 -1px 0 rgba(253, 251, 247, .08) !important;
  transform: translateZ(0) !important;
  contain: layout paint style !important;
}

html body[data-oloropa-page="index.php"] #home-hero .ol-o5-booking-card.ol-o8-route-glass-card::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  border-radius: inherit !important;
  background:
    linear-gradient(135deg, rgba(253, 251, 247, .12), transparent 25%, transparent 67%, rgba(212, 163, 115, .105)),
    linear-gradient(180deg, rgba(253, 251, 247, .05), rgba(45, 31, 24, .12) 52%, rgba(30, 21, 16, .30)),
    repeating-linear-gradient(90deg, rgba(253, 251, 247, .024) 0 1px, transparent 1px 54px) !important;
  opacity: .78 !important;
  mix-blend-mode: normal !important;
}

html body[data-oloropa-page="index.php"] #home-hero .ol-o5-booking-card.ol-o8-route-glass-card::after {
  content: "" !important;
  position: absolute !important;
  left: clamp(1rem, 1.6vw, 1.4rem) !important;
  right: clamp(1rem, 1.6vw, 1.4rem) !important;
  bottom: clamp(.76rem, 1.1vw, .95rem) !important;
  top: auto !important;
  inset-inline: clamp(1rem, 1.6vw, 1.4rem) !important;
  inset-block-start: auto !important;
  inset-block-end: clamp(.76rem, 1.1vw, .95rem) !important;
  width: auto !important;
  height: 1px !important;
  min-height: 0 !important;
  max-height: 1px !important;
  z-index: 1 !important;
  display: block !important;
  opacity: 1 !important;
  pointer-events: none !important;
  border: 0 !important;
  background: linear-gradient(90deg, transparent, rgba(253, 251, 247, .08), transparent) !important;
  background-size: 100% 1px !important;
  background-repeat: no-repeat !important;
  box-shadow: none !important;
  filter: none !important;
  animation: none !important;
  transform: none !important;
}

html body[data-oloropa-page="index.php"] #home-hero .ol-o8-route-glass-card > * {
  position: relative !important;
  z-index: 2 !important;
}

html body[data-oloropa-page="index.php"] #home-hero .ol-o8-route-card-eyebrow,
html body[data-oloropa-page="index.php"] #home-hero .ol-o8-route-glass-card > p:first-child {
  margin: 0 !important;
  padding: 0 !important;
  color: rgba(212, 163, 115, .95) !important;
  font-family: var(--ol-font-ui, "Plus Jakarta Sans", system-ui, sans-serif) !important;
  font-size: clamp(.6rem, .68vw, .72rem) !important;
  font-weight: 950 !important;
  line-height: 1.15 !important;
  letter-spacing: .22em !important;
  text-transform: uppercase !important;
  text-shadow: 0 1px 14px rgba(0, 0, 0, .42) !important;
}

html body[data-oloropa-page="index.php"] #home-hero .ol-o8-route-card-mood {
  display: grid !important;
  align-content: end !important;
  gap: .42rem !important;
  min-height: clamp(5rem, 8.3vw, 6.6rem) !important;
  padding: clamp(.92rem, 1.35vw, 1.14rem) !important;
  border-radius: clamp(1rem, 1.45vw, 1.28rem) !important;
  border: 1px solid rgba(253, 251, 247, .14) !important;
  background:
    radial-gradient(circle at 88% 7%, rgba(253, 251, 247, .14), transparent 9rem),
    linear-gradient(135deg, rgba(30, 21, 16, .42), rgba(45, 31, 24, .30) 54%, rgba(253, 251, 247, .075)) !important;
  -webkit-backdrop-filter: blur(10px) saturate(112%) !important;
  backdrop-filter: blur(10px) saturate(112%) !important;
  box-shadow:
    inset 0 1px 0 rgba(253, 251, 247, .14),
    inset 0 -1px 0 rgba(45, 31, 24, .18),
    0 18px 52px rgba(13, 8, 5, .20) !important;
}

html body[data-oloropa-page="index.php"] #home-hero .ol-o8-route-card-mood::before {
  opacity: .28 !important;
  background: linear-gradient(115deg, transparent 0%, rgba(253, 251, 247, .22) 45%, transparent 72%) !important;
  filter: blur(.5px) !important;
}

html body[data-oloropa-page="index.php"] #home-hero .ol-o8-route-card-mood span {
  color: rgba(212, 163, 115, .96) !important;
  font-family: var(--ol-font-ui, "Plus Jakarta Sans", system-ui, sans-serif) !important;
  font-size: clamp(.62rem, .72vw, .72rem) !important;
  font-weight: 950 !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
  text-shadow: 0 1px 13px rgba(0, 0, 0, .46) !important;
}

html body[data-oloropa-page="index.php"] #home-hero .ol-o8-route-card-mood strong {
  max-width: 13.5ch !important;
  color: var(--o84-ivory) !important;
  font-family: var(--ol-font-display, Georgia, serif) !important;
  font-size: clamp(1.28rem, 2vw, 1.82rem) !important;
  font-weight: 600 !important;
  letter-spacing: -.035em !important;
  line-height: .98 !important;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .46) !important;
}

html body[data-oloropa-page="index.php"] #home-hero .ol-o8-route-data-box {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: .42rem !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body[data-oloropa-page="index.php"] #home-hero .ol-o8-route-data-row {
  display: grid !important;
  grid-template-columns: minmax(4.8rem, .42fr) minmax(0, 1fr) !important;
  gap: .72rem !important;
  align-items: baseline !important;
  min-height: 2.2rem !important;
  padding: .58rem .72rem !important;
  border-radius: .82rem !important;
  border: 1px solid rgba(253, 251, 247, .055) !important;
  background:
    radial-gradient(circle at 0% 0%, rgba(212, 163, 115, .065), transparent 9rem),
    linear-gradient(135deg, rgba(0, 0, 0, .05), rgba(253, 251, 247, .035)) !important;
  box-shadow:
    inset 0 1px 0 rgba(253, 251, 247, .04),
    0 10px 22px rgba(13, 8, 5, .10) !important;
}

html body[data-oloropa-page="index.php"] #home-hero .ol-o8-route-data-row span,
html body[data-oloropa-page="index.php"] #home-hero .ol-o8-route-data-box > span {
  min-width: 0 !important;
  color: rgba(253, 251, 247, .92) !important;
  font-family: var(--ol-font-ui, "Plus Jakarta Sans", system-ui, sans-serif) !important;
  font-size: clamp(.61rem, .68vw, .70rem) !important;
  font-weight: 950 !important;
  line-height: 1.25 !important;
  letter-spacing: .13em !important;
  text-transform: uppercase !important;
  text-shadow: 0 1px 14px rgba(0, 0, 0, .45) !important;
}

html body[data-oloropa-page="index.php"] #home-hero .ol-o8-route-data-row b,
html body[data-oloropa-page="index.php"] #home-hero .ol-o8-route-data-box > b {
  min-width: 0 !important;
  color: rgba(253, 251, 247, .86) !important;
  font-family: var(--ol-font-ui, "Plus Jakarta Sans", system-ui, sans-serif) !important;
  font-size: clamp(.72rem, .82vw, .86rem) !important;
  font-weight: 850 !important;
  line-height: 1.32 !important;
  letter-spacing: -.01em !important;
  overflow-wrap: anywhere !important;
  text-shadow: 0 1px 14px rgba(0, 0, 0, .48) !important;
}

html body[data-oloropa-page="index.php"] #home-hero .ol-o8-route-plan-cta,
html body[data-oloropa-page="index.php"] #home-hero .ol-o5-booking-card.ol-o8-route-glass-card .ol-o5-booking-card-cta {
  width: 100% !important;
  min-height: clamp(2.9rem, 4vw, 3.26rem) !important;
  margin: .05rem 0 0 !important;
  border: 1px solid rgba(212, 163, 115, .68) !important;
  border-radius: 999px !important;
  background:
    linear-gradient(135deg, rgba(253, 251, 247, .08), rgba(253, 251, 247, .02)),
    linear-gradient(135deg, rgba(212, 163, 115, .88), rgba(162, 90, 56, .82)) !important;
  color: #18110D !important;
  font-family: var(--ol-font-ui, "Plus Jakarta Sans", system-ui, sans-serif) !important;
  font-size: clamp(.82rem, .92vw, .94rem) !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  letter-spacing: -.01em !important;
  text-shadow: 0 1px 0 rgba(253, 251, 247, .24) !important;
  box-shadow:
    0 16px 42px rgba(13, 8, 5, .22),
    0 10px 30px rgba(162, 90, 56, .18),
    inset 0 1px 0 rgba(253, 251, 247, .38),
    inset 0 -10px 22px rgba(45, 31, 24, .12) !important;
}

html body[data-oloropa-page="index.php"] #home-hero .ol-o8-route-plan-cta:hover,
html body[data-oloropa-page="index.php"] #home-hero .ol-o8-route-plan-cta:focus-visible {
  transform: translateY(-1px) !important;
  filter: saturate(1.05) brightness(1.03) !important;
  border-color: rgba(253, 251, 247, .42) !important;
  box-shadow:
    0 20px 54px rgba(13, 8, 5, .28),
    0 0 0 4px rgba(212, 163, 115, .12),
    inset 0 1px 0 rgba(253, 251, 247, .48) !important;
}

html body[data-oloropa-page="index.php"] #home-hero .ol-o8-route-card-note {
  display: block !important;
  margin: .02rem 0 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
  background: transparent !important;
  border: 0 !important;
  color: rgba(253, 251, 247, .54) !important;
  font-family: var(--ol-font-ui, "Plus Jakarta Sans", system-ui, sans-serif) !important;
  font-size: clamp(.65rem, .74vw, .74rem) !important;
  line-height: 1.35 !important;
  letter-spacing: .01em !important;
  text-shadow: 0 1px 12px rgba(0, 0, 0, .42) !important;
  box-shadow: none !important;
}

html body[data-oloropa-page="index.php"] #home-hero .ol-o8-route-glass-card :is(.ol-o8-route-data-row, .ol-o8-route-card-mood, .ol-o8-route-plan-cta) {
  -webkit-font-smoothing: antialiased !important;
  text-rendering: optimizeLegibility !important;
}

@media (max-width: 900px) {
  html body[data-oloropa-page="index.php"] #home-hero .ol-o5-booking-card.ol-o8-route-glass-card {
    width: min(100%, 25rem) !important;
    margin-inline: auto !important;
  }
}

@media (max-width: 520px) {
  html body[data-oloropa-page="index.php"] #home-hero .ol-o8-route-data-row {
    grid-template-columns: 1fr !important;
    gap: .18rem !important;
    padding: .68rem .76rem !important;
  }

  html body[data-oloropa-page="index.php"] #home-hero .ol-o8-route-data-row b {
    margin: 0 !important;
  }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html body[data-oloropa-page="index.php"] #home-hero .ol-o5-booking-card.ol-o8-route-glass-card {
    background:
      radial-gradient(circle at 13% 4%, rgba(253, 251, 247, .10), transparent 10.5rem),
      linear-gradient(180deg, rgba(45, 31, 24, .72), rgba(30, 21, 16, .82)) !important;
    background-color: rgba(45, 31, 24, .78) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body[data-oloropa-page="index.php"] #home-hero .ol-o8-route-plan-cta {
    transition: none !important;
  }
}
