/* Litepicker 7-column alignment — load after litepicker.css (sync link, this file last).
   Theme skins must not set month-item width: 100% on mobile (breaks header/day alignment).
   content-box avoids Bootstrap border-box shrinking the month (Litepicker #17). */

.litepicker {
  --litepicker-day-width: 40px;
  --litepicker-month-width: calc(var(--litepicker-day-width) * 7 + 10px);
}

.litepicker .container__months .month-item,
.litepicker .container__days {
  box-sizing: content-box;
}

.litepicker .month-item {
  width: var(--litepicker-month-width) !important;
  max-width: 100%;
}

.litepicker .month-item-weekdays-row > div {
  flex: 0 0 var(--litepicker-day-width) !important;
  width: var(--litepicker-day-width) !important;
  max-width: var(--litepicker-day-width);
}

.litepicker .container__days {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: flex-start !important;
}

.litepicker .container__days > div,
.litepicker .container__days > a {
  flex: 0 0 var(--litepicker-day-width);
  width: var(--litepicker-day-width) !important;
  max-width: var(--litepicker-day-width);
  height: var(--litepicker-day-width);
  min-width: 0;
}

/* Match Litepicker columns-N width so two months stay side-by-side (CDN uses 38px at :root). */
.litepicker .container__months {
  width: calc(var(--litepicker-month-width) + 10px) !important;
}

.litepicker .container__months.columns-2 {
  width: calc(var(--litepicker-month-width) * 2 + 20px) !important;
}

.litepicker .container__months.columns-3 {
  width: calc(var(--litepicker-month-width) * 3 + 30px) !important;
}

@media (min-width: 768px) {
  .litepicker .container__main,
  .fyv-page .litepicker .container__main,
  .litepicker.header-search-litepicker .container__main,
  .litepicker.lp-hero-litepicker .container__main,
  body.property-detail .litepicker.propdetail-litepicker .container__main,
  .litepicker.recommendation-litepicker .container__main {
    width: fit-content;
    max-width: 100%;
    overflow: visible;
  }

  /* wrap: banner is full-width row; month-items sit on the next row (nowrap hid them behind overflow:hidden). */
  .litepicker .container__months {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: flex-start;
  }

  .litepicker .fyv-picker-banner {
    flex: 0 0 100%;
    width: 100%;
    box-sizing: border-box;
  }
}

@media (max-width: 767px) {
  .litepicker .container__main {
    align-items: center;
    width: 100%;
  }

  .litepicker .container__months,
  .fyv-page .litepicker .container__months,
  body.property-detail .litepicker.propdetail-litepicker .container__months,
  .litepicker.header-search-litepicker .container__months,
  .litepicker.lp-hero-litepicker .container__months,
  #modalSearchMobile .litepicker .container__months,
  .litepicker.recommendation-litepicker .container__months {
    --litepicker-day-width: clamp(36px, calc((100vw - 48px) / 7), 48px);
    --litepicker-month-width: calc(var(--litepicker-day-width) * 7 + 10px);
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: flex-start;
    width: var(--litepicker-month-width) !important;
    max-width: calc(100% - 2px);
    margin-left: auto;
    margin-right: auto;
  }

  .litepicker .container__months.columns-2 {
    width: calc(var(--litepicker-month-width) * 2 + 20px) !important;
    max-width: calc(100% - 32px);
  }

  .litepicker .fyv-picker-banner {
    flex: 0 0 100%;
    width: 100%;
    box-sizing: border-box;
  }

  .litepicker .month-item,
  .fyv-page .litepicker .month-item,
  body.property-detail .litepicker.propdetail-litepicker .month-item,
  .litepicker.header-search-litepicker .month-item,
  .litepicker.lp-hero-litepicker .month-item,
  #modalSearchMobile .litepicker .month-item,
  .litepicker.recommendation-litepicker .month-item {
    width: var(--litepicker-month-width) !important;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  .litepicker .month-item-weekdays-row,
  .fyv-page .litepicker .month-item-weekdays-row,
  body.property-detail .litepicker.propdetail-litepicker .month-item-weekdays-row,
  .litepicker.header-search-litepicker .month-item-weekdays-row,
  .litepicker.lp-hero-litepicker .month-item-weekdays-row,
  #modalSearchMobile .litepicker .month-item-weekdays-row,
  .litepicker.recommendation-litepicker .month-item-weekdays-row {
    justify-content: flex-start !important;
    width: var(--litepicker-month-width);
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  .litepicker .container__days,
  .fyv-page .litepicker .container__days,
  body.property-detail .litepicker.propdetail-litepicker .container__days,
  .litepicker.header-search-litepicker .container__days,
  .litepicker.lp-hero-litepicker .container__days,
  #modalSearchMobile .litepicker .container__days,
  .litepicker.recommendation-litepicker .container__days {
    width: var(--litepicker-month-width);
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
  }
}