:root {
  --family7-forest: var(--luxury-forest);
  --family7-forest-deep: var(--luxury-forest-deep);
  --family7-gold: var(--luxury-gold);
  --family7-gold-soft: var(--luxury-gold-soft);
  --family7-ink: var(--luxury-text);
  --family7-muted: var(--luxury-muted);
  --family7-line: rgba(23, 57, 44, 0.1);
  --family7-shadow: 0 24px 58px rgba(15, 40, 30, 0.1);
  --primary: var(--family7-forest);
  --accent: var(--family7-gold);
  --text: var(--family7-ink);
  --muted: var(--family7-muted);
  --bg: var(--luxury-surface-soft);
}

html {
  scroll-behavior: smooth;
}

body.family-safari-page {
  margin: 0;
  color: var(--family7-ink);
  font-family: "Lato", "Segoe UI", Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.72;
  overflow-x: clip;
  background:
    radial-gradient(circle at top left, rgba(199, 162, 93, 0.12), transparent 24%),
    linear-gradient(180deg, var(--luxury-surface-soft) 0%, #f7f5ef 42%, #edf4ee 100%);
}

body.family-safari-page :where(p, li, td, th, span, div, a, button) {
  font-family: "Lato", "Segoe UI", Arial, sans-serif !important;
  letter-spacing: 0 !important;
}

body.family-safari-page :where(h1, h2, h3, h4, h5, h6) {
  font-family: Georgia, "Times New Roman", serif !important;
  font-weight: 500 !important;
  letter-spacing: -0.02em !important;
  text-transform: none !important;
}

body.family-safari-page main {
  width: 100%;
  max-width: none;
  margin: 0 auto;
  padding: 0 0 72px;
}

.family-hero {
  position: relative;
  display: grid;
  align-items: end;
  min-height: 82vh;
  margin-top: 0;
  padding: 138px 0 54px;
  overflow: hidden;
  color: var(--luxury-cream);
  background:
    linear-gradient(180deg, rgba(8, 20, 15, 0.08) 0%, rgba(8, 20, 15, 0.16) 46%, rgba(8, 20, 15, 0.48) 100%),
    url("../images/optimized/packages/queen2.webp") center/cover no-repeat;
  box-shadow: var(--family7-shadow);
}

.family-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 16%, rgba(255, 255, 255, 0.08), transparent 30%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.02), transparent 38%);
  pointer-events: none;
}

.family-hero__content {
  position: relative;
  z-index: 1;
  width: min(620px, calc(100% - 40px));
  margin: 0 auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.family-hero__title {
  margin: 0;
  color: var(--luxury-cream);
  font-size: clamp(2rem, 4vw, 3.6rem) !important;
  line-height: 1.02 !important;
  letter-spacing: -0.03em !important;
  text-wrap: balance;
  text-shadow: 0 3px 18px rgba(0, 0, 0, 0.65);
}

.family-hero__sub {
  max-width: 62ch;
  margin: 14px 0 0;
  color: rgba(255, 249, 239, 0.9);
  font-size: 0.94rem !important;
  line-height: 1.58 !important;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.52);
}

.itinerary {
  width: min(900px, calc(100% - 40px)) !important;
  max-width: 900px !important;
  margin: 0 auto !important;
  padding: 28px 0 72px;
}

.itinerary > h2,
.itinerary h2[data-i18n] {
  margin: 28px 0 14px !important;
  color: var(--family7-forest) !important;
  font-size: clamp(1.55rem, 2.3vw, 2.28rem) !important;
  line-height: 1.08 !important;
  text-align: left !important;
  text-wrap: balance;
}

.safari-overview,
.summary,
.family-note,
.overview-table,
.family-inquiry {
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.safari-overview {
  margin: 0 0 24px !important;
  text-align: left !important;
}

.safari-overview p,
.family-note,
.overview-table td,
.day-content p,
.day-snapshot span,
.meta span,
.family-inquiry p {
  color: var(--family7-muted) !important;
  font-size: 0.9rem !important;
  line-height: 1.58 !important;
}

.summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 18px 0 26px;
}

.summary div {
  padding: 0 0 0 14px;
  border-left: 2px solid rgba(199, 162, 93, 0.76);
  color: var(--family7-muted);
  font-size: 0.9rem;
  line-height: 1.5;
}

.summary strong,
.meta strong,
.family-note strong {
  color: var(--family7-forest);
  font-weight: 800;
}

.summary strong {
  display: block;
  margin-bottom: 3px;
}

.family-note {
  margin: 0 0 34px !important;
  padding-left: 14px !important;
  border-left: 2px solid rgba(199, 162, 93, 0.76) !important;
}

.overview-table {
  margin: 18px 0 56px !important;
  overflow-x: auto !important;
}

.overview-table table {
  width: 100% !important;
  min-width: 640px !important;
  border-collapse: collapse !important;
}

.overview-table th,
.overview-table td {
  padding: 10px 12px !important;
  border-bottom: 1px solid rgba(23, 57, 44, 0.08) !important;
  text-align: left !important;
}

.overview-table thead tr {
  background: transparent !important;
  color: var(--family7-forest) !important;
}

.overview-table th {
  color: var(--family7-forest) !important;
  font-size: 0.9rem !important;
  font-weight: 700 !important;
}

.day {
  position: relative;
  display: grid !important;
  grid-template-columns: minmax(260px, 0.86fr) minmax(0, 1.14fr);
  gap: clamp(24px, 4vw, 42px);
  align-items: center;
  max-width: 900px;
  margin: 0 auto !important;
  padding: clamp(18px, 2.8vw, 32px) 0 !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  isolation: auto;
}

.day + .day {
  margin-top: clamp(34px, 5vw, 58px) !important;
  padding-top: clamp(44px, 5vw, 68px) !important;
}

.day + .day::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 9px;
  margin: 0 auto;
  background:
    radial-gradient(circle, rgba(199, 162, 93, 0.86) 0 2px, transparent 2.8px),
    linear-gradient(90deg, transparent 0%, rgba(23, 57, 44, 0.1) 14%, rgba(199, 162, 93, 0.72) 50%, rgba(23, 57, 44, 0.1) 86%, transparent 100%);
  background-position: center, center;
  background-repeat: no-repeat;
  background-size: 9px 9px, 100% 1px;
  pointer-events: none;
}

.day::after {
  content: none;
}

.day > * {
  position: relative;
  z-index: 1;
}

.day > img {
  display: block !important;
  order: 1;
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: 1.08 / 1 !important;
  align-self: center;
  margin: 0 !important;
  object-fit: cover !important;
  border: 0 !important;
  border-radius: 14px !important;
  box-shadow: none !important;
  background: transparent !important;
}

.itinerary > .day:nth-child(even) > img {
  order: 2;
}

.itinerary > .day:nth-child(even) .day-content {
  order: 1;
}

.day-content {
  order: 2;
  display: block !important;
  min-width: 0;
  padding: 0 !important;
}

.day-number {
  display: inline-flex !important;
  align-items: center;
  margin: 0 0 10px;
  color: var(--family7-gold) !important;
  font-size: 0.78rem !important;
  font-weight: 800 !important;
  line-height: 1;
  letter-spacing: 0.14em !important;
  text-transform: uppercase;
}

.day-content h3 {
  margin: 0 !important;
  color: var(--family7-forest) !important;
  font-size: clamp(1.55rem, 2.3vw, 2.28rem) !important;
  line-height: 1.08 !important;
  text-wrap: balance;
}

.day-content p {
  margin: 9px 0 0 !important;
  color: #35463f !important;
}

.day-snapshot {
  margin: 14px 0 0 !important;
  padding: 0 0 0 14px !important;
  border: 0 !important;
  border-left: 2px solid rgba(199, 162, 93, 0.76) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.day-snapshot strong {
  display: block;
  margin: 0 0 6px;
  color: var(--family7-forest) !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: 1rem !important;
  font-weight: 500 !important;
  letter-spacing: -0.02em !important;
  text-transform: none !important;
}

.meta {
  clear: both;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 20px !important;
}

.meta span {
  padding: 0 0 0 14px !important;
  border: 0 !important;
  border-left: 2px solid rgba(199, 162, 93, 0.76) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.family-inquiry {
  max-width: 760px;
  margin: 36px auto 0 !important;
  text-align: center;
}

.family-inquiry h2 {
  margin: 0;
  color: var(--family7-forest) !important;
  font-size: clamp(1.6rem, 2.4vw, 2.3rem) !important;
  line-height: 1.08 !important;
}

.family-inquiry__button {
  min-height: 50px;
  margin-top: 18px;
  padding: 12px 18px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--luxury-gold-soft), var(--family7-gold));
  color: var(--luxury-forest-deep);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 16px 30px rgba(185, 145, 66, 0.24);
}

.floating-actions {
  display: none;
}

@media (max-width: 980px) {
  .summary,
  .meta {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  body.family-safari-page main {
    padding-bottom: 56px;
  }

  .family-hero {
    min-height: auto;
    padding: 116px 0 42px;
  }

  .family-hero__content,
  .itinerary {
    width: min(100%, calc(100% - 24px)) !important;
  }

  .day {
    grid-template-columns: 1fr;
    gap: 18px;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .day + .day {
    margin-top: 28px !important;
    padding-top: 38px !important;
  }

  .day + .day::before {
    left: 16px;
    right: 16px;
    width: auto;
  }

  .day > img,
  .itinerary > .day:nth-child(even) > img {
    order: 1;
    width: min(100%, 420px) !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 auto 18px !important;
  }

  .day-content,
  .itinerary > .day:nth-child(even) .day-content {
    order: 2;
  }
}

@media (min-width: 761px) {
  .day > img {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
  }

  .itinerary > .day:nth-child(even) > img {
    order: 2;
  }

  .itinerary > .day:nth-child(even) .day-content {
    order: 1;
  }
}