/* Villa Eliopetra v4.0 — authoritative calendar overlay layer.
   Loaded AFTER legacy site/booking styles. Do not move above booking-search.css. */

html.bsv-calendar-lock,
body.bsv-contact-calendar-open,
body.bsv-stay-calendar-open {
  overflow: hidden !important;
  overscroll-behavior: none !important;
}

/* Backdrop sits above every site header/menu but below the calendar itself. */
body.bsv-contact-calendar-open::after,
body.bsv-stay-calendar-open::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 2147483500;
  background: rgba(53,67,59,.42);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  pointer-events: auto;
}

/* BOTH calendars are portalled under BODY by JS while open. Desktop uses a
   viewport-contained modal so no parent section/card can clip the bottom. */
body.bsv-contact-calendar-open > .bsv-contact-stay-calendar,
body.bsv-stay-calendar-open > .bsv-stay-calendar {
  display: block !important;
  position: fixed !important;
  left: 50% !important;
  right: auto !important;
  top: 50% !important;
  bottom: auto !important;
  transform: translate(-50%, -50%) !important;
  width: min(1000px, calc(100vw - 36px)) !important;
  height: auto !important;
  max-height: calc(var(--bsv-visible-height, 100dvh) - 36px) !important;
  margin: 0 !important;
  padding: 22px !important;
  border: 1px solid #E5DDD2 !important;
  border-radius: 22px !important;
  background: #fff !important;
  box-shadow: 0 32px 100px rgba(53,67,59,.34) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  touch-action: pan-y !important;
  -webkit-overflow-scrolling: touch !important;
  z-index: 2147483600 !important;
  isolation: isolate !important;
}

body.bsv-contact-calendar-open > .bsv-contact-stay-calendar[hidden],
body.bsv-stay-calendar-open > .bsv-stay-calendar[hidden] {
  display: none !important;
}

body.bsv-contact-calendar-open > .bsv-contact-stay-calendar .bsv-stay-calendar-head,
body.bsv-stay-calendar-open > .bsv-stay-calendar .bsv-stay-calendar-head {
  position: sticky !important;
  top: -22px !important;
  z-index: 25 !important;
  margin: 0 !important;
  padding: 7px 0 16px !important;
  background: #fff !important;
}

body.bsv-contact-calendar-open > .bsv-contact-stay-calendar .bsv-stay-calendar-foot,
body.bsv-stay-calendar-open > .bsv-stay-calendar .bsv-stay-calendar-foot {
  position: sticky !important;
  bottom: -22px !important;
  z-index: 25 !important;
  margin: 0 !important;
  padding: 14px 0 7px !important;
  background: #fff !important;
}

/* Contact submit overlay must beat even the calendar/sticky navigation. */
.bsv-contact-spinner,
#spinner.bsv-contact-spinner {
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147483647 !important;
}

/* Native search clear buttons are hidden; Villa Eliopetra supplies its own close. */
.bsv-contact-phone-search input[type="search"]::-webkit-search-cancel-button,
.bsv-contact-phone-search input::-webkit-search-cancel-button,
.bsv-contact-phone-search input::-ms-clear,
.bsv-contact-phone-search input::-ms-reveal {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

/* Phones, tablets, landscape phones and touch devices: one true full-screen
   calendar. Months are rendered vertically by JS and the CALENDAR scrolls,
   never the page behind it. */
@media (max-width: 1024px), (pointer: coarse) {
  body.bsv-contact-calendar-open::after,
  body.bsv-stay-calendar-open::after {
    display: none !important;
  }

  body.bsv-contact-calendar-open > .bsv-contact-stay-calendar,
  body.bsv-stay-calendar-open > .bsv-stay-calendar {
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    bottom: auto !important;
    inset: 0 auto auto 0 !important;
    transform: none !important;
    width: 100vw !important;
    min-width: 100vw !important;
    max-width: 100vw !important;
    height: var(--bsv-visible-height, 100dvh) !important;
    min-height: var(--bsv-visible-height, 100dvh) !important;
    max-height: var(--bsv-visible-height, 100dvh) !important;
    margin: 0 !important;
    padding: 0 16px max(28px, env(safe-area-inset-bottom)) !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow-y: scroll !important;
    overflow-x: hidden !important;
    overscroll-behavior-y: contain !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y !important;
    z-index: 2147483646 !important;
  }

  body.bsv-contact-calendar-open > .bsv-contact-stay-calendar .bsv-stay-calendar-head,
  body.bsv-stay-calendar-open > .bsv-stay-calendar .bsv-stay-calendar-head {
    position: sticky !important;
    top: 0 !important;
    z-index: 40 !important;
    margin: 0 -16px !important;
    padding: calc(12px + env(safe-area-inset-top)) 16px 12px !important;
    background: rgba(255, 255, 255, .99) !important;
    border-bottom: 1px solid #E5DDD2 !important;
    box-shadow: 0 5px 18px rgba(75,93,83,.07) !important;
  }

  .bsv-stay-calendar-head .eyebrow { display: none !important; }
  .bsv-stay-calendar-head strong { font-size: 24px !important; line-height: 1.08 !important; }
  .bsv-calendar-head-actions { display: flex !important; align-items: center !important; gap: 7px !important; }
  .bsv-calendar-head-actions [data-stay-prev],
  .bsv-calendar-head-actions [data-stay-next],
  .bsv-calendar-head-actions [data-contact-stay-prev],
  .bsv-calendar-head-actions [data-contact-stay-next] { display: none !important; }
  .bsv-calendar-clear-mobile {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    height: 40px !important;
    padding: 0 10px !important;
    border: 0 !important;
    background: transparent !important;
    color: #4B5D53 !important;
    font: 700 11px/1 Montserrat, sans-serif !important;
    letter-spacing: .05em !important;
    text-transform: uppercase !important;
  }
  .bsv-calendar-close {
    display: inline-grid !important;
    place-items: center !important;
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    flex: 0 0 42px !important;
  }

  body.bsv-contact-calendar-open > .bsv-contact-stay-calendar .bsv-stay-calendar-message,
  body.bsv-stay-calendar-open > .bsv-stay-calendar .bsv-stay-calendar-message {
    padding: 13px 2px 6px !important;
    min-height: 0 !important;
  }

  body.bsv-contact-calendar-open > .bsv-contact-stay-calendar .bsv-stay-months,
  body.bsv-stay-calendar-open > .bsv-stay-calendar .bsv-stay-months {
    display: block !important;
    grid-template-columns: none !important;
    gap: 0 !important;
    padding: 8px 0 24px !important;
  }

  body.bsv-contact-calendar-open > .bsv-contact-stay-calendar .bsv-stay-month,
  body.bsv-stay-calendar-open > .bsv-stay-calendar .bsv-stay-month {
    display: block !important;
    width: 100% !important;
    margin: 0 0 38px !important;
    padding: 8px 0 0 !important;
    scroll-margin-top: calc(80px + env(safe-area-inset-top)) !important;
  }

  .bsv-stay-month h3 {
    margin: 0 0 14px !important;
    text-align: left !important;
    font-size: 26px !important;
  }
  .bsv-calendar-week { margin-bottom: 8px !important; }
  .bsv-calendar-days { gap: 5px !important; }
  .bsv-stay-day {
    min-height: 44px !important;
    max-height: none !important;
    aspect-ratio: 1 / 1 !important;
  }

  body.bsv-contact-calendar-open > .bsv-contact-stay-calendar .bsv-stay-calendar-foot,
  body.bsv-stay-calendar-open > .bsv-stay-calendar .bsv-stay-calendar-foot {
    display: none !important;
  }

  /* Country search stays above the sticky site menu as well. */
  .bsv-contact-phone-popover {
    z-index: 2147483645 !important;
  }
}
