/* Final modernist theme: calm color, reliable contrast, and clearer stay comparison. */
:root,
body[data-atmosphere="light"] {
  --modern-page: #edf4ef;
  --modern-surface: #fffefa;
  --modern-surface-alt: #f1f7f3;
  --modern-ink: #173a34;
  --modern-muted: #506961;
  --modern-accent: #286f5e;
  --modern-accent-strong: #174f43;
  --modern-warm: #b96538;
  --modern-sky: #5f98aa;
  --modern-line: rgba(23, 58, 52, 0.17);
  --modern-shadow: 0 24px 70px rgba(30, 65, 55, 0.12);
}

body[data-atmosphere="morning"] {
  --modern-page: #eaf5ef;
  --modern-surface: #fbfff9;
  --modern-surface-alt: #eef7f3;
  --modern-ink: #153a35;
  --modern-muted: #48665e;
  --modern-accent: #1f7665;
  --modern-accent-strong: #125345;
  --modern-warm: #c9703e;
  --modern-sky: #70a9ba;
  --modern-line: rgba(21, 58, 53, 0.16);
}

body[data-atmosphere="sunset"] {
  --modern-page: #f4ece5;
  --modern-surface: #fffaf4;
  --modern-surface-alt: #f5e9df;
  --modern-ink: #3d3029;
  --modern-muted: #6d594f;
  --modern-accent: #486f5e;
  --modern-accent-strong: #305244;
  --modern-warm: #b85d32;
  --modern-sky: #7e788f;
  --modern-line: rgba(61, 48, 41, 0.17);
  --modern-shadow: 0 24px 70px rgba(88, 57, 39, 0.13);
}

body[data-atmosphere="night"] {
  --modern-page: #dce9eb;
  --modern-surface: #f8fcfa;
  --modern-surface-alt: #e8f1f2;
  --modern-ink: #122f36;
  --modern-muted: #49636a;
  --modern-accent: #2b7068;
  --modern-accent-strong: #174e4a;
  --modern-warm: #aa6841;
  --modern-sky: #496f8a;
  --modern-line: rgba(18, 47, 54, 0.18);
  --modern-shadow: 0 26px 72px rgba(13, 44, 52, 0.16);
}

html {
  background: var(--modern-page);
}

body,
body[data-atmosphere] {
  background: var(--modern-page) !important;
  color: var(--modern-ink) !important;
  transition: background-color 520ms ease, color 360ms ease;
}

body[data-atmosphere] .ambient-page-tint {
  background: color-mix(in srgb, var(--modern-page) 78%, transparent) !important;
  opacity: 0.72 !important;
}

body[data-atmosphere] main > .section-pad {
  min-height: 0 !important;
  padding-block: clamp(72px, 8vw, 116px) !important;
  color: var(--modern-ink) !important;
}

body[data-atmosphere] main > .intro,
body[data-atmosphere] main > .villas-section,
body[data-atmosphere] main > .house-gallery,
body[data-atmosphere] main > .experience,
body[data-atmosphere] main > .concierge,
body[data-atmosphere] main > .trust,
body[data-atmosphere] main > .guest-voice,
body[data-atmosphere] main > .pay {
  background-color: var(--modern-surface) !important;
  background-image: none !important;
}

body[data-atmosphere] main > .media-experience,
body[data-atmosphere] main > .day-journey,
body[data-atmosphere] main > .property-details,
body[data-atmosphere] main > .amenities,
body[data-atmosphere] main > .channels,
body[data-atmosphere] main > .booking {
  background-color: var(--modern-surface-alt) !important;
  background-image: none !important;
}

body[data-atmosphere] .section-heading h2,
body[data-atmosphere] .split-layout h2,
body[data-atmosphere] .media-copy h2,
body[data-atmosphere] .villa-card-content h3,
body[data-atmosphere] .detail-panel h3,
body[data-atmosphere] .booking-card h2,
body[data-atmosphere] .direct-booking-intro h2,
body[data-atmosphere] .platform-directory-heading h3,
body[data-atmosphere] .guest-form h3,
body[data-atmosphere] .guest-highlight h3,
body[data-atmosphere] .info-panel h3,
body[data-atmosphere] .pay-box strong,
body[data-atmosphere] .sound-card strong {
  color: var(--modern-ink) !important;
  text-shadow: none !important;
}

body[data-atmosphere] .section-heading p,
body[data-atmosphere] .intro-copy,
body[data-atmosphere] .intro-copy p,
body[data-atmosphere] .media-copy p,
body[data-atmosphere] .villa-card-content > p,
body[data-atmosphere] .detail-panel p,
body[data-atmosphere] .detail-panel li,
body[data-atmosphere] .day-journey-intro,
body[data-atmosphere] .booking-card p,
body[data-atmosphere] .direct-booking-intro p,
body[data-atmosphere] .booking-widget-heading p,
body[data-atmosphere] .booking-rate-note,
body[data-atmosphere] .booking-secure-note,
body[data-atmosphere] .guest-highlight p,
body[data-atmosphere] .guest-form p,
body[data-atmosphere] .guest-form small,
body[data-atmosphere] .sync-card p,
body[data-atmosphere] .pay-box p,
body[data-atmosphere] .info-panel p {
  color: var(--modern-muted) !important;
  text-shadow: none !important;
}

body[data-atmosphere] .section-kicker,
body[data-atmosphere] .villa-card-content > span:first-child,
body[data-atmosphere] .booking-widget-heading span,
body[data-atmosphere] .gallery-feature-copy > span,
body[data-atmosphere] .detail-panel > span {
  color: var(--modern-accent-strong) !important;
}

/* A clean, legible light-mode control in every atmosphere. */
.atmosphere-switch,
body[data-atmosphere="night"] .atmosphere-switch {
  position: fixed !important;
  z-index: 80 !important;
  top: auto !important;
  right: auto !important;
  bottom: 20px !important;
  left: 20px !important;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(58px, 1fr)) !important;
  width: min(348px, calc(100vw - 32px)) !important;
  padding: 6px !important;
  border: 1px solid rgba(255, 255, 255, 0.72) !important;
  border-radius: 8px !important;
  background: rgba(250, 253, 250, 0.94) !important;
  box-shadow: 0 12px 34px rgba(15, 50, 44, 0.18) !important;
  backdrop-filter: blur(16px) saturate(125%) !important;
}

.atmosphere-switch button,
body[data-atmosphere="night"] .atmosphere-switch button {
  min-height: 36px !important;
  padding: 7px 9px !important;
  border: 0 !important;
  border-radius: 5px !important;
  background: transparent !important;
  color: #264740 !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
}

.atmosphere-switch button:hover,
.atmosphere-switch button:focus-visible {
  background: #e4f0ea !important;
  color: #153f36 !important;
}

.atmosphere-switch button[aria-pressed="true"],
body[data-atmosphere="night"] .atmosphere-switch button[aria-pressed="true"] {
  background: var(--modern-accent) !important;
  color: #ffffff !important;
  box-shadow: 0 5px 14px color-mix(in srgb, var(--modern-accent) 32%, transparent) !important;
}

/* Stays: a restrained selector followed by a clear image-and-information layout. */
.villas-section,
body[data-atmosphere] .villas-section {
  overflow: hidden !important;
  padding-block: clamp(76px, 9vw, 138px) !important;
  color: var(--modern-ink) !important;
}

.villas-section::before,
.villas-section::after,
.villas-section .villa-card::before,
.villas-section .villa-card::after,
.villas-section .property-window::before,
.villas-section .property-window::after,
.villas-section .property-window-slide::before,
.villas-section .property-window-slide::after,
.villas-section .villa-card-content::before {
  display: none !important;
}

.villas-section > .section-heading,
.villas-section > .stay-selector,
.villas-section > .villa-grid {
  width: min(1420px, calc(100% - 64px)) !important;
  max-width: 1420px !important;
  margin-inline: auto !important;
}

.villas-section > .section-heading {
  display: grid !important;
  grid-template-columns: minmax(180px, 0.42fr) minmax(0, 1.58fr) !important;
  align-items: end !important;
  gap: 42px !important;
  margin-bottom: 40px !important;
}

.villas-section .section-heading h2 {
  max-width: 940px !important;
  margin: 0 !important;
  color: var(--modern-ink) !important;
  font-size: clamp(2.1rem, 4.5vw, 4.7rem) !important;
  line-height: 0.98 !important;
  letter-spacing: 0 !important;
}

body[data-atmosphere] main .section-heading h2,
body[data-atmosphere] main .split-layout h2,
body[data-atmosphere] main .media-copy h2,
body[data-atmosphere] main .experience-content h2,
body[data-atmosphere] main .booking-card h2 {
  font-size: clamp(2.2rem, 4.2vw, 4.35rem) !important;
  line-height: 1.02 !important;
  letter-spacing: 0 !important;
}

.stay-selector {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 0 !important;
  margin-bottom: clamp(34px, 5vw, 72px) !important;
  padding: 0 !important;
  border: 1px solid var(--modern-line) !important;
  border-radius: 6px !important;
  background: color-mix(in srgb, var(--modern-surface-alt) 86%, #ffffff) !important;
  box-shadow: none !important;
}

.stay-selector-button,
body[data-atmosphere] .stay-selector-button {
  min-width: 0 !important;
  padding: 20px 22px !important;
  border: 0 !important;
  border-right: 1px solid var(--modern-line) !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--modern-muted) !important;
  text-align: left !important;
  box-shadow: none !important;
}

.stay-selector-button:last-child {
  border-right: 0 !important;
}

.stay-selector-button:hover,
.stay-selector-button:focus-visible {
  background: color-mix(in srgb, var(--modern-surface) 68%, var(--modern-sky)) !important;
}

.stay-selector-button.is-active,
.stay-selector-button[aria-selected="true"] {
  background: var(--modern-accent) !important;
  color: #ffffff !important;
}

.stay-selector-button.is-active *,
.stay-selector-button[aria-selected="true"] * {
  color: #ffffff !important;
}

.stay-selector-name {
  color: var(--modern-ink) !important;
  font-family: "Cormorant Garamond", Georgia, serif !important;
  font-size: clamp(1.15rem, 2vw, 1.55rem) !important;
  letter-spacing: 0 !important;
}

.stay-selector-meta,
.stay-selector-number {
  color: var(--modern-muted) !important;
}

.villas-section .villa-grid {
  min-height: 0 !important;
}

.villas-section .villa-card,
.villas-section .villa-card:nth-child(even) {
  display: grid !important;
  grid-template-columns: minmax(0, 1.15fr) minmax(360px, 0.85fr) !important;
  align-items: start !important;
  gap: clamp(38px, 6vw, 90px) !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--modern-ink) !important;
  box-shadow: none !important;
}

.villas-section .villa-card[hidden] {
  display: none !important;
}

.villas-section .property-window {
  position: relative !important;
  align-self: start !important;
  min-width: 0 !important;
  padding: 0 0 52px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  perspective: 1300px !important;
}

.villas-section .property-window-stage {
  position: relative !important;
  width: 100% !important;
  aspect-ratio: 16 / 10 !important;
  min-height: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform-style: preserve-3d !important;
}

.villas-section .property-window-slide {
  position: absolute !important;
  inset: 0 !important;
  display: grid !important;
  place-items: center !important;
  margin: 0 !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transform: rotateY(36deg) translateX(7%) scale(0.92) !important;
  transform-origin: 50% 50% !important;
  transition: opacity 560ms ease, transform 720ms cubic-bezier(0.2, 0.75, 0.2, 1), visibility 560ms ease !important;
  pointer-events: none !important;
}

.villas-section .property-window-slide.is-active {
  z-index: 2 !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: rotateY(0deg) translateX(0) scale(1) !important;
  pointer-events: auto !important;
}

.villas-section .property-window-slide img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: var(--modern-shadow) !important;
  filter: none !important;
  transform: none !important;
}

.villas-section .property-window-controls {
  position: absolute !important;
  left: 0 !important;
  bottom: 0 !important;
  z-index: 4 !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--modern-ink) !important;
  box-shadow: none !important;
}

.villas-section .property-window-controls button {
  width: 38px !important;
  height: 38px !important;
  border: 1px solid var(--modern-line) !important;
  border-radius: 50% !important;
  background: var(--modern-surface) !important;
  color: var(--modern-ink) !important;
  box-shadow: 0 8px 20px rgba(21, 57, 49, 0.09) !important;
}

.villas-section .property-window-controls button:hover,
.villas-section .property-window-controls button:focus-visible {
  border-color: var(--modern-accent) !important;
  background: var(--modern-accent) !important;
  color: #ffffff !important;
}

.villas-section .property-window-controls > span {
  color: var(--modern-muted) !important;
}

.villas-section .villa-card-content {
  position: relative !important;
  max-width: 620px !important;
  padding: 16px 0 16px clamp(28px, 4vw, 58px) !important;
  border: 0 !important;
  border-left: 1px solid var(--modern-line) !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--modern-ink) !important;
  box-shadow: none !important;
}

.villas-section .villa-card-content h3 {
  margin: 8px 0 18px !important;
  color: var(--modern-ink) !important;
  font-size: clamp(2.5rem, 4.8vw, 5rem) !important;
  line-height: 0.94 !important;
  letter-spacing: 0 !important;
}

.villas-section .villa-card-content > p {
  max-width: 58ch !important;
  margin: 0 0 24px !important;
  color: var(--modern-muted) !important;
  font-size: clamp(1rem, 1.25vw, 1.12rem) !important;
  line-height: 1.75 !important;
}

.villas-section .stay-facts {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin: 0 0 28px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

.villas-section .stay-facts > * {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 34px !important;
  padding: 7px 11px !important;
  border: 1px solid var(--modern-line) !important;
  border-radius: 4px !important;
  background: color-mix(in srgb, var(--modern-surface-alt) 76%, #ffffff) !important;
  color: var(--modern-ink) !important;
  font-size: 0.78rem !important;
  line-height: 1.2 !important;
}

.villas-section .stay-facts > strong {
  border-color: color-mix(in srgb, var(--modern-warm) 55%, transparent) !important;
  color: var(--modern-warm) !important;
}

.villas-section .villa-card-content > a,
.product-detail-cta,
.villas-section .stay-availability-note {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  width: auto !important;
  min-height: 44px !important;
  padding: 11px 18px !important;
  border: 1px solid var(--modern-accent) !important;
  border-radius: 4px !important;
  background: var(--modern-accent) !important;
  color: #ffffff !important;
  text-decoration: none !important;
  box-shadow: none !important;
}

.villas-section .stay-availability-note {
  flex-direction: column !important;
  align-items: flex-start !important;
  margin: 0 !important;
  border-color: color-mix(in srgb, var(--modern-warm) 45%, transparent) !important;
  background: color-mix(in srgb, var(--modern-warm) 9%, var(--modern-surface)) !important;
  color: var(--modern-ink) !important;
}

.villas-section .stay-availability-note strong,
.villas-section .stay-availability-note span {
  color: var(--modern-ink) !important;
}

.villas-section .stay-availability-note span {
  font-size: 0.8rem !important;
  color: var(--modern-muted) !important;
}

/* Keep galleries dimensional while preserving every photograph in full. */
body[data-atmosphere] .house-gallery,
body[data-atmosphere] .gallery-panel,
body[data-atmosphere] .gallery-stage,
body[data-atmosphere] .gallery-feature,
body[data-atmosphere] .gallery-rail,
body[data-atmosphere] .gallery-photo {
  color: var(--modern-ink) !important;
}

body[data-atmosphere] .gallery-panel,
body[data-atmosphere] .gallery-stage {
  background: transparent !important;
  box-shadow: none !important;
}

body[data-atmosphere] .gallery-feature,
body[data-atmosphere] .gallery-photo {
  border-color: var(--modern-line) !important;
  background: transparent !important;
}

body[data-atmosphere] .gallery-feature img,
body[data-atmosphere] .gallery-photo img,
body[data-atmosphere] .light-story-slide img {
  object-fit: contain !important;
  object-position: center !important;
  background: transparent !important;
  filter: none !important;
}

body[data-atmosphere] .gallery-feature::before,
body[data-atmosphere] .gallery-feature::after,
body[data-atmosphere] .gallery-photo::before,
body[data-atmosphere] .gallery-photo::after {
  display: none !important;
}

body[data-atmosphere] .gallery-tablist,
body[data-atmosphere] .light-story-nav,
body[data-atmosphere] .booking-property-tabs,
body[data-atmosphere] .booking-widget-shell,
body[data-atmosphere] .booking-card,
body[data-atmosphere] .guest-form,
body[data-atmosphere] .guest-highlight,
body[data-atmosphere] .sync-card,
body[data-atmosphere] .pay-box,
body[data-atmosphere] .detail-panel,
body[data-atmosphere] .info-panel {
  border-color: var(--modern-line) !important;
  background: var(--modern-surface) !important;
  color: var(--modern-ink) !important;
  box-shadow: 0 18px 52px rgba(24, 60, 52, 0.08) !important;
}

body[data-atmosphere] .gallery-tab,
body[data-atmosphere] .light-story-nav button,
body[data-atmosphere] .booking-property-tabs button {
  color: var(--modern-ink) !important;
}

body[data-atmosphere] .gallery-tab[aria-selected="true"],
body[data-atmosphere] .light-story-nav button[aria-pressed="true"],
body[data-atmosphere] .booking-property-tabs button[aria-selected="true"] {
  background: var(--modern-accent) !important;
  color: #ffffff !important;
}

.booking-property-tabs button:disabled {
  cursor: not-allowed !important;
  opacity: 1 !important;
  background: color-mix(in srgb, var(--modern-warm) 9%, var(--modern-surface)) !important;
  color: var(--modern-muted) !important;
}

.booking-property-tabs button:disabled strong {
  color: var(--modern-warm) !important;
}

.booking-paused-panel {
  padding: 28px !important;
  border: 1px solid color-mix(in srgb, var(--modern-warm) 42%, transparent) !important;
  background: color-mix(in srgb, var(--modern-warm) 8%, var(--modern-surface)) !important;
}

.is-booking-paused {
  border-color: color-mix(in srgb, var(--modern-warm) 46%, transparent) !important;
  background: color-mix(in srgb, var(--modern-warm) 8%, var(--modern-surface)) !important;
  color: var(--modern-ink) !important;
}

body[data-atmosphere] input,
body[data-atmosphere] select,
body[data-atmosphere] textarea {
  border-color: var(--modern-line) !important;
  background: #ffffff !important;
  color: var(--modern-ink) !important;
}

body[data-atmosphere] label,
body[data-atmosphere] legend,
body[data-atmosphere] .booking-policy span,
body[data-atmosphere] .booking-policy strong {
  color: var(--modern-ink) !important;
}

body[data-atmosphere="night"] .site-header:not(.is-scrolled),
body[data-atmosphere="sunset"] .site-header:not(.is-scrolled) {
  color: #ffffff !important;
}

body[data-atmosphere="night"] .site-header.is-scrolled,
body[data-atmosphere="sunset"] .site-header.is-scrolled,
body[data-atmosphere] .site-header.is-scrolled {
  background: rgba(250, 253, 250, 0.95) !important;
  color: #183b34 !important;
  border-bottom-color: rgba(24, 59, 52, 0.13) !important;
}

body[data-atmosphere] .site-header.is-scrolled a,
body[data-atmosphere] .site-header.is-scrolled button,
body[data-atmosphere] .site-header.is-scrolled .brand-text strong,
body[data-atmosphere] .site-header.is-scrolled .brand-text small {
  color: #183b34 !important;
}

@media (max-width: 980px) {
  .atmosphere-switch,
  body[data-atmosphere="night"] .atmosphere-switch {
    top: auto !important;
    right: auto !important;
    bottom: 14px !important;
    left: 14px !important;
  }

  .villas-section > .section-heading {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .villas-section .villa-card,
  .villas-section .villa-card:nth-child(even) {
    grid-template-columns: 1fr !important;
    gap: 30px !important;
  }

  .villas-section .villa-card-content {
    max-width: none !important;
    padding: 28px 0 0 !important;
    border-left: 0 !important;
    border-top: 1px solid var(--modern-line) !important;
  }
}

@media (max-width: 700px) {
  .atmosphere-switch,
  body[data-atmosphere="night"] .atmosphere-switch {
    right: 104px !important;
    width: auto !important;
  }

  .whatsapp-float {
    right: 14px !important;
    left: auto !important;
    width: 82px !important;
    min-width: 82px !important;
    padding-inline: 8px !important;
    font-size: 0.68rem !important;
  }

  .villas-section > .section-heading,
  .villas-section > .stay-selector,
  .villas-section > .villa-grid {
    width: min(100% - 28px, 1420px) !important;
  }

  .stay-selector {
    grid-template-columns: 1fr !important;
  }

  .stay-selector-button {
    border-right: 0 !important;
    border-bottom: 1px solid var(--modern-line) !important;
  }

  .stay-selector-button:last-child {
    border-bottom: 0 !important;
  }

  .villas-section .property-window-stage {
    aspect-ratio: 4 / 3 !important;
  }

  .villas-section .villa-card-content h3 {
    font-size: clamp(2.35rem, 13vw, 3.65rem) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .villas-section .property-window-slide {
    transition: opacity 180ms ease !important;
    transform: none !important;
  }
}

/* Final contrast guardrails for every atmosphere. */
body[data-atmosphere] .site-header .header-cta {
  background: var(--modern-accent-strong) !important;
  border-color: var(--modern-accent-strong) !important;
  color: #ffffff !important;
}

body[data-atmosphere] .site-header.is-scrolled a.header-cta {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

body[data-atmosphere] .stay-selector .stay-selector-button.is-active,
body[data-atmosphere] .stay-selector .stay-selector-button[aria-selected="true"] {
  background: var(--modern-accent-strong) !important;
  color: #ffffff !important;
}

body[data-atmosphere] .stay-selector .stay-selector-button.is-active *,
body[data-atmosphere] .stay-selector .stay-selector-button[aria-selected="true"] * {
  color: #ffffff !important;
}

body[data-atmosphere] .direct-booking-hub .booking-policy {
  border-color: var(--modern-line) !important;
  background: var(--modern-surface-alt) !important;
  color: var(--modern-ink) !important;
}

body[data-atmosphere] .direct-booking-hub .booking-policy p + p {
  border-left-color: var(--modern-line) !important;
}

body[data-atmosphere] .direct-booking-hub .booking-policy span,
body[data-atmosphere] .direct-booking-hub .booking-policy strong {
  color: var(--modern-ink) !important;
}

body[data-atmosphere] .pay-box > span,
body[data-atmosphere] .house-gallery .section-kicker {
  color: var(--modern-accent-strong) !important;
}

body[data-atmosphere] .pay-box > a,
body[data-atmosphere] .btn.btn-primary {
  background: var(--modern-accent-strong) !important;
  border-color: var(--modern-accent-strong) !important;
  color: #ffffff !important;
}