/* Common styles used across all templates */

:root {
  --radius-sm: 6px;
  --radius-lg: 24px;
  --shadow: 0 4px 24px var(--shadow-color);
  --shadow-hover: 0 8px 32px var(--shadow-color);
  --shadow-lg: 0 22px 60px var(--shadow-color);
  --transition-fast: 180ms ease;
  --transition-medium: 250ms ease;
  --transition-slow: 300ms ease;
}

body.no-scroll {
  position: fixed;
  width: 100%;
  overflow-y: scroll;
  touch-action: none;
}

.loader {
  width: 90px;
  aspect-ratio: 6;
  --dot: no-repeat
    radial-gradient(circle closest-side, currentColor 90%, transparent);
  --size: calc(100% / 4);
  --speed: 1s;
  background: var(--dot) 0% 50%, var(--dot) 33% 50%, var(--dot) 66% 50%,
    var(--dot) 100% 50%;
  background-size: var(--size) 100%;
  animation: l7 var(--speed) infinite ease-in-out;
}

@keyframes l7 {
  20% {
    background-size: var(--size) 0%, var(--size) 100%, var(--size) 100%,
      var(--size) 100%;
  }
  40% {
    background-size: var(--size) 100%, var(--size) 0%, var(--size) 100%,
      var(--size) 100%;
  }
  60% {
    background-size: var(--size) 100%, var(--size) 100%, var(--size) 0%,
      var(--size) 100%;
  }
  80% {
    background-size: var(--size) 100%, var(--size) 100%, var(--size) 100%,
      var(--size) 0%;
  }
}

.availabile-date {
  margin: 2px;
  background-color: rgba(var(--success-color-rgb), 0.1);
  border-radius: 2px;
}

.lightboxOverlay,
.lightbox {
  z-index: 2000000002 !important;
}

/* ── Menu ── */
/* FIXME: architecturally these menu/layer variables and rules do not belong in common.css.
   Template-specific menu behaviour (heights, shrink transitions) should live in each
   template's own stylesheet. Having them here creates hidden coupling — individual templates
   (cortiva, haven) already re-declare the same rules in their own <style> blocks, which
   means there are now multiple sources of truth for the same values.
   --layer-search-* vars are the only ones that genuinely belong here because
   common/sections/blocks/search-bar.ejs depends on them.

   The rule below was REMOVED because it is completely wrong and silently breaks
   every custom menu color configuration in every template:

   [data-section-type]:not([data-section-type="hero"]) > [data-block-type="menu"] {
     --background-color: inherit;
     --text-color: inherit;
     --heading-color: inherit;
   }

   This rule overrides the menu's own configured colors with whatever the parent section
   inherits, making it impossible for menus outside hero sections to use their own color scheme.
   If you think you need something like this — you do not. Fix it at the template level. */

:root {
  --layer-header: 100;
  --layer-dropdown: 101;
  --layer-mobile: 102;
  --layer-search-scrim: 2147483645;
  --layer-search-overlay: 2147483646;
  --layer-mobile-actions: 2147483647;
  --layer-search-trigger: 2147483644;
}

@media (min-width: 1024px) {
  :root {
    --menu-h-max: 112px;
    --menu-h-min: 72px;
    --logo-h-max: 56px;
    --logo-h-min: 40px;
    --menu-h-cur: var(--menu-h-max);
    --logo-h-cur: var(--logo-h-max);
  }

  .menu-shrinkable {
    --menu-h-cur: var(--menu-h-max);
    --logo-h-cur: var(--logo-h-max);
  }

  .menu-shrinkable.menu--shrunk {
    --menu-h-cur: var(--menu-h-min);
    --logo-h-cur: var(--logo-h-min);
  }
}

.menu-bar {
  height: var(--menu-h-cur);
  transition: height var(--transition-fast);
}

.menu-logo {
  height: var(--logo-h-cur);
  transition: height var(--transition-fast);
}

.menu-item a {
  line-height: 1.25;
}

/* ── Featured ── */

.featured-card {
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--surface-background-color, #000000);
  transition: transform var(--transition-fast);
}

.featured-card:hover .featured-image {
  transform: scale(1.04);
}

.featured-card:hover {
  transform: translateY(-4px);
}

.featured-slide {
  width: auto;
}

.featured-pagination :global(.swiper-pagination-bullet) {
  background: var(--border-color, #ffffff);
  opacity: 0.6;
}

.featured-pagination :global(.swiper-pagination-bullet-active) {
  background: var(--primary-button-background-color, #ffffff);
  opacity: 1;
}

/* Shared slider navigation button base */
.slider-nav-btn,
.featured-nav-btn,
.mc-slider-nav-btn {
  height: 44px;
  width: 44px;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--surface-background-color, #000) 80%, transparent);
  color: var(--text-color, #ffffff);
  border: 1px solid color-mix(in srgb, var(--border-color, #ffffff) 60%, transparent);
  transition: background-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}

.slider-nav-btn:hover,
.featured-nav-btn:hover,
.mc-slider-nav-btn:hover {
  background: color-mix(in srgb, var(--primary-button-background-color, #ffffff) 80%, transparent);
  color: var(--primary-button-text-color, #000000);
}

.slider-nav-btn:focus-visible,
.featured-nav-btn:focus-visible,
.mc-slider-nav-btn:focus-visible {
  outline: 2px solid var(--primary-button-background-color, #ffffff);
  outline-offset: 2px;
}

/* ── Search bar ── */

#searchBarContainer {
  position: relative;
  transition:
    transform 200ms ease,
    opacity 200ms ease;
}

#searchBarContainer .search-fields {
  width: 100%;
}

#searchBarContainer .mobile-only-cta {
  display: block;
}

@media (min-width: 768px) {
  #searchBarContainer .mobile-only-cta {
    display: none;
  }
}

@media (max-width: 767px) {
  #searchBarContainer .search-fields {
    display: none;
  }

  #searchBarContainer.mobile-overlay .search-fields {
    display: block;
  }

  #searchBarContainer.mobile-overlay .mobile-only-cta {
    display: none;
  }
}

#searchBarContainer.mobile-hidden {
  display: none;
}

#searchBarContainer.mobile-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--layer-search-overlay);
  background: var(--popup-background-color);
  color: var(--popup-text-color);
  overflow-y: auto;
  padding: 1.5rem 1.5rem 2.5rem;
  display: block;
}

#searchBarContainer .search-bar-close-btn {
  display: none;
  margin-bottom: 1.25rem;
}

#searchBarContainer.mobile-overlay .search-bar-close-btn {
  display: flex;
}

#searchBarContainer.mobile-overlay .search-bar-close-btn button {
  border-radius: var(--radius-sm);
  border: 1px solid var(--surface-border-color);
  background: var(--surface-background-color);
  color: var(--surface-text-color);
  font-weight: 600;
}

#searchBarContainer.mobile-overlay .search-grid {
  padding-bottom: 140px;
}

#searchBarContainer .search-grid__field {
  width: 100%;
}

@media (min-width: 768px) {
  #searchBarContainer .search-grid__field--markets {
    flex: 1 1 0%;
    min-width: 220px;
  }

  #searchBarContainer .search-grid__field--dates {
    flex: 1.35 1 0%;
    min-width: 280px;
  }

  #searchBarContainer .search-grid__field--guests {
    flex: 0.85 1 0%;
    max-width: 260px;
  }

  #searchBarContainer .search-grid--basic .search-grid__field--dates {
    flex: 1.4 1 0%;
  }

  #searchBarContainer .search-grid--basic .search-grid__field--guests {
    flex: 0.8 1 0%;
  }
}

#searchBarContainer .search-input {
  border-radius: 0;
  color: var(--control-text-color);
  background-color: var(--control-background-color);
  border-color: var(--control-border-color);
  caret-color: var(--control-text-color);
}

#searchBarContainer .search-input:focus {
  outline: 2px solid var(--primary-button-background-color);
  outline-offset: -2px;
}

#searchBarContainer .search-input::placeholder {
  color: color-mix(in srgb, var(--control-text-color) 55%, transparent);
  opacity: 1;
}

#searchBarContainer .search-input-icon,
#searchBarContainer .search-input-icon i,
#searchBarContainer .search-input-icon .fa {
  color: var(--control-text-color);
}

#searchBarContainer.mobile-overlay .search-input {
  background-color: var(--surface-background-color);
  color: var(--surface-text-color);
  border-color: var(--surface-border-color);
  caret-color: var(--surface-text-color);
}

#searchBarContainer.mobile-overlay .search-input::placeholder {
  color: color-mix(in srgb, var(--surface-text-color) 55%, transparent);
}

#searchBarContainer.mobile-overlay .search-input-icon,
#searchBarContainer.mobile-overlay .search-input-icon i,
#searchBarContainer.mobile-overlay .search-input-icon .fa {
  color: var(--surface-text-color);
}

#searchBarContainer .guests-field,
#searchBarContainer .guests-field__control {
  position: relative;
  width: 100%;
}

#searchBarContainer .guests-field__icons {
  min-width: 3.25rem;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

#searchBarContainer .guest-menu {
  min-width: 280px;
  max-width: 360px;
  box-shadow: 0 22px 45px -20px rgba(0, 0, 0, 0.35);
  border-radius: var(--radius-sm);
}

#searchBarContainer .guest-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--surface-border-color);
}

#searchBarContainer .guest-row:last-of-type {
  border-bottom: none;
}

#searchBarContainer .guest-row__title {
  font-weight: 600;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

#searchBarContainer .guest-row__controls {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
}

#searchBarContainer .guest-control__btn {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  font-weight: 600;
  border-radius: var(--radius-sm);
  border: 1px solid var(--secondary-button-background-color);
  background: var(--secondary-button-background-color);
  color: var(--secondary-button-text-color);
  transition:
    background 150ms ease,
    color 150ms ease,
    border-color 150ms ease,
    transform 120ms ease;
}

#searchBarContainer .guest-control__btn:active {
  transform: scale(0.95);
}

#searchBarContainer .guest-control__btn--primary {
  background: var(--primary-background-color);
  color: var(--primary-text-color);
  border-color: var(--primary-background-color);
}

#searchBarContainer .guest-control__value {
  min-width: 2.25rem;
  text-align: center;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--surface-text-color);
}

#searchBarContainer .guest-row__checkbox {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  color: var(--surface-text-color);
}

#searchBarContainer .guest-checkbox {
  width: 20px;
  height: 20px;
  accent-color: var(--primary-background-color);
}

#searchBarContainer .guest-row--checkbox {
  align-items: center;
}

#searchBarContainer .guest-actions {
  display: flex;
  justify-content: flex-end;
  padding-top: 1rem;
}

#searchBarContainer .guest-actions__apply {
  min-width: 120px;
  border-radius: var(--radius-sm);
}

#searchBarContainer.mobile-overlay #guestsMenu {
  position: static;
  width: 100%;
  max-width: none;
  min-width: 0;
  margin-top: 0.75rem;
  box-shadow: 0 18px 45px -32px rgba(0, 0, 0, 0.4);
}

@media (max-width: 360px) {
  #searchBarContainer .guest-row {
    flex-wrap: wrap;
    gap: 0.75rem;
  }

  #searchBarContainer .guest-row__controls {
    width: 100%;
    justify-content: space-between;
  }

  #searchBarContainer .guest-control__btn {
    width: 30px;
    height: 30px;
  }

  #searchBarContainer .guest-control__value {
    min-width: 2rem;
  }
}

@media (max-width: 700px) {
  #searchBarContainer .guest-row {
    padding: 1rem 0;
    gap: 1.25rem;
  }

  #searchBarContainer .guest-row__title {
    font-size: 1.05rem;
  }

  #searchBarContainer .guest-row__controls {
    gap: 0.9rem;
  }

  #searchBarContainer .guest-control__btn {
    width: 40px;
    height: 40px;
    font-size: 1.15rem;
  }

  #searchBarContainer .guest-control__value {
    min-width: 2.2rem;
    font-size: 1.2rem;
  }

  #searchBarContainer .guest-checkbox {
    width: 24px;
    height: 24px;
  }
}

#mobileSearchScrim {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: var(--layer-search-scrim);
}

#mobileSearchTrigger {
  border-radius: 0;
  box-shadow: none;
  z-index: var(--layer-search-trigger);
}

#mobileActionsBar {
  z-index: var(--layer-mobile-actions);
  border-top: 1px solid var(--surface-border-color);
  box-shadow: 0 -18px 40px -24px rgba(0, 0, 0, 0.35);
}

.date-picker-wrapper.tw-datepicker {
  z-index: 50;
}

body.mobile-no-scroll #showMapButton,
.show-map-hidden {
  opacity: 0;
  pointer-events: none;
}

.mobile-no-scroll .z-\[var\(--layer-header\)\],
.mobile-no-scroll .z-\[var\(--layer-mobile\)\] {
  z-index: 10 !important;
}

@media (max-width: 768px) {
  #mobileSearchTrigger.is-visible {
    display: flex;
  }

  #searchBarContainer.mobile-overlay {
    padding-top: 1.25rem;
  }

  body.mobile-no-scroll {
    overflow: hidden;
    touch-action: none;
  }
}

/* ── List toggle ── */

.common-list-toggle-item[open] .list-toggle-icon {
  transform: rotate(180deg);
}

.common-list-toggle-item .list-toggle-icon {
  transition: transform var(--transition-medium);
}

.common-list-toggle-item[open] .list-toggle-content {
  animation: list-toggle-reveal var(--transition-medium);
}

@keyframes list-toggle-reveal {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ── FAQ ── */

.faq-toggle + .faq-question .faq-icon {
  transform: rotate(-90deg);
  transition: transform var(--transition-slow);
}

.faq-toggle:checked + .faq-question .faq-icon {
  transform: rotate(0deg);
}

.faq-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 500ms ease;
}

.faq-toggle:checked ~ .faq-content {
  max-height: fit-content;
  padding: 0px 10px 20px 0;
}

/* ── Collections ── */

.collectionFilterItem.is-active {
  color: var(--primary-text-color);
  border-color: var(--primary-button-background-color);
}

.collections-filters::-webkit-scrollbar {
  display: none;
}

.collections-swiper .swiper-pagination-bullet {
  background-color: var(--surface-border-color);
  opacity: 1;
}

.collections-swiper .swiper-pagination-bullet-active {
  background-color: var(--primary-button-background-color);
}

/* ── Properties collection grid ── */

.property-card {
  transition: transform var(--transition-medium), box-shadow var(--transition-medium);
}

.property-card:hover,
.property-card:focus-visible {
  transform: translateY(-6px);
  box-shadow: 0 10px 24px rgba(0,0,0,.15);
}

.no-scrollbar { scrollbar-width: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }

/* ── Multiple cards slider ── */

.mc-pagination :global(.swiper-pagination-bullet) {
  background: var(--border-color, #ffffff);
  opacity: 0.6;
}

.mc-pagination :global(.swiper-pagination-bullet-active) {
  background: var(--primary-button-background-color, #ffffff);
  opacity: 1;
}

/* ── Property search ── */

.search-input-item {
  border: 1px solid black;
}

.list-map-swiper-slide {
  width: 100% !important;
  height: 250px !important;
  text-align: center;
  font-size: 18px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.gallery-swiper-slide {
  width: 100% !important;
  height: 250px !important;
}

.gallery-swiper-slide img {
  margin: auto;
  height: 100%;
}

@media (min-width: 640px) {
  .gallery-swiper-slide {
    width: fit-content !important;
  }
  .gallery-swiper-slide img {
    height: 100%;
  }
}

.list-map-swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.map-icon {
  border-radius: 20px;
  border: 1px solid gray;
  background-image: linear-gradient(#eeeeee, white, #eeeeee);
  box-shadow: 3px 3px 6px gray;
  padding: 4px;
  stroke: black;
}

.map-icon-selected,
.map-icon:hover {
  background: var(--primary-button-background-color);
  z-index: 100000;
  stroke: var(--primary-button-text-color);
}

.property-search-title-font {
  font-family: var(--property-search-title-font);
}

.property-search-details-font {
  font-family: var(--property-search-details-font);
}