/* ===========================
   RED MANGO — AVAILABILITY-PAGE.CSS
   Dedicated Check Availability page. Dark hero + overlapping glass search
   card near the navbar, leading into a light results grid of apartment
   cards. Distinct from availability.css, which still styles the small
   homepage widget.
   =========================== */

.avail-page-body {
  background: var(--white);
}

/* ===== SEARCH HERO =====
   Deliberately not full-height like the homepage hero — this is a
   functional page, not a marketing moment. Height just needs to clear
   the fixed nav and leave enough room below the heading for the search
   card to overlap its bottom edge. */

.avail-hero {
  position: relative;
  min-height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.avail-hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 20%;
}

.avail-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(13, 13, 13, 0.55) 0%,
    rgba(13, 13, 13, 0.5) 55%,
    rgba(13, 13, 13, 0.75) 100%
  );
}

.avail-hero-content {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: calc(var(--nav-height) + 40px) 24px 110px;
  max-width: 640px;
}

.avail-hero-eyebrow {
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 14px;
}

.avail-hero-content h1 {
  font-family: 'Oswald', sans-serif;
  font-size: clamp(26px, 4vw, 44px);
  font-weight: 400;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: 14px;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.5);
}

.avail-hero-subtext {
  font-size: 14px;
  font-weight: 500;
  color: var(--cream);
  line-height: 1.7;
}

/* ===== SEARCH CARD =====
   Sits in normal flow right after the hero, then pulls itself up with a
   negative margin so it visually overlaps the hero/main boundary — the
   "close to the navbar, can't miss it" placement. A near-opaque frosted
   card (rather than the very sheer glass used on the homepage widget)
   because this one has to read clearly against BOTH the dark hero image
   behind its top half and the light results section behind its bottom
   half. */

.avail-search-wrapper {
  position: relative;
  z-index: 2;
  max-width: 980px;
  margin: -70px auto 0;
  padding: 0 24px;
}

.avail-search-card {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 18px;

  padding: 28px 32px;

  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.94),
    rgba(250, 248, 246, 0.88)
  );
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);

  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 18px;

  box-shadow:
    0 20px 60px rgba(13, 13, 13, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.avail-search-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1 1 180px;
}

.avail-search-field-guests {
  flex: 0 1 100px;
}

.avail-search-field-dates {
  flex: 2 1 280px;
}

.avail-search-field label {
  font-family: 'Montserrat', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #444;
}

.avail-search-field input {
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  font-weight: 400;
  color: #333;
  background: var(--white);
  border: 1px solid #e0e0e0;
  padding: 12px 14px;
  border-radius: 6px;
  outline: none;
  width: 100%;
  transition: border-color 0.2s;
}

.avail-search-field input:focus {
  border-color: var(--red);
}

/* The dates field is readonly and opens Flatpickr — style it to look
   clickable rather than like a disabled text input. */
.avail-search-field-dates input {
  cursor: pointer;
  background-color: var(--white);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23c0392b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 40px;
}

/* ===== FLATPICKR THEME =====
   Overrides Flatpickr's default blue theme to match the site palette.
   Scoped globally (Flatpickr renders its calendar in a body-level popup,
   not inside .avail-search-card), so these rules aren't nested under an
   .avail- ancestor — fine since this page is the only one loading
   Flatpickr for now. */

.flatpickr-calendar {
  font-family: 'Montserrat', sans-serif;
  border-radius: 14px;
  border: 1px solid #eee;
  box-shadow: 0 16px 48px rgba(13, 13, 13, 0.18);
}

.flatpickr-calendar.arrowTop::before,
.flatpickr-calendar.arrowTop::after {
  display: none;
}

.flatpickr-months {
  padding: 14px 10px 4px;
}

.flatpickr-current-month {
  font-family: 'Cormorant Garamond', serif;
  font-size: 18px;
  font-weight: 600;
  color: #1a1a1a;
}

.flatpickr-current-month .numInputWrapper span.arrowUp:after {
  border-bottom-color: var(--red);
}

.flatpickr-current-month .numInputWrapper span.arrowDown:after {
  border-top-color: var(--red);
}

.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
  color: var(--red);
  fill: var(--red);
}

.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg {
  fill: var(--red-dark);
}

span.flatpickr-weekday {
  font-family: 'Montserrat', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--red);
}

.flatpickr-day {
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: #333;
  border-radius: 8px;
}

.flatpickr-day.today {
  border-color: var(--red);
}

.flatpickr-day.today:hover {
  background: rgba(192, 57, 43, 0.1);
  border-color: var(--red);
}

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
  background: var(--red);
  border-color: var(--red);
  color: var(--white);
}

.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover {
  background: var(--red-dark);
  border-color: var(--red-dark);
}

.flatpickr-day.inRange {
  background: rgba(192, 57, 43, 0.12);
  border-color: transparent;
  box-shadow: -5px 0 0 rgba(192, 57, 43, 0.12), 5px 0 0 rgba(192, 57, 43, 0.12);
  border-radius: 0;
}

.flatpickr-day.startRange.endRange {
  border-radius: 8px;
}

.flatpickr-day.startRange {
  border-radius: 8px 0 0 8px;
}

.flatpickr-day.endRange {
  border-radius: 0 8px 8px 0;
}

.flatpickr-day.flatpickr-disabled,
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
  color: #ccc;
}

.flatpickr-day.flatpickr-disabled {
  text-decoration: line-through;
}

.avail-search-submit {
  flex: 1 1 200px;
  background: var(--red);
  color: var(--white);
  border: none;
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  padding: 15px 28px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.3s ease;
  white-space: nowrap;
}

.avail-search-submit:hover {
  background: var(--red-dark);
}

.avail-search-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ===== STATUS LINE (checking / error) — sits under the card ===== */

.avail-page-status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 20px;
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: #888;
  text-align: center;
}

.avail-page-status.is-error {
  color: var(--red);
}

.avail-page-status .avail-page-spinner {
  width: 14px;
  height: 14px;
  border: 2px solid rgba(0, 0, 0, 0.12);
  border-top-color: var(--red);
  border-radius: 50%;
  animation: availPageSpin 0.7s linear infinite;
  display: inline-block;
}

@keyframes availPageSpin {
  to { transform: rotate(360deg); }
}

/* ===== SELECTION BAR =====
   Sticky bar summarizing the multi-apartment cart. Sits above the results
   grid content in the stacking order but stays fixed to the bottom of
   the viewport so it's visible no matter how far the guest scrolls
   through result cards. */

.avail-selection-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;

  padding: 16px 32px;

  background: rgba(13, 13, 13, 0.92);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.25);
}

.avail-selection-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  flex: 1 1 300px;
}

.avail-selection-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 20px;
  padding: 6px 8px 6px 14px;
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: var(--white);
}

.avail-selection-chip-remove {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  border: none;
  color: var(--white);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s ease;
}

.avail-selection-chip-remove:hover {
  background: var(--red);
}

.avail-selection-actions {
  display: flex;
  align-items: center;
  gap: 20px;
  flex: 0 0 auto;
}

.avail-selection-total {
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px;
  font-weight: 600;
  color: var(--cream);
  white-space: nowrap;
}

.avail-selection-cta {
  display: inline-block;
  text-decoration: none;
  background: var(--red);
  color: var(--white);
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 13px 26px;
  border-radius: 6px;
  white-space: nowrap;
  transition: background 0.3s ease;
}

.avail-selection-cta:hover {
  background: var(--red-dark);
}

/* Room to breathe above the fixed bar so it never overlaps the last row
   of result cards. */
.avail-main.has-selection {
  padding-bottom: 140px;
}

/* ===== RESULT CARD TOGGLE STATE ===== */

.avail-result-cta.is-selected {
  background: var(--dark-mid);
}

.avail-result-cta.is-selected:hover {
  background: var(--dark);
}

/* ===== MAIN / RESULTS ===== */

.avail-main {
  background: var(--white);
  padding: 70px 60px 90px;
  min-height: 300px;
}

.avail-empty-state {
  max-width: 560px;
  margin: 40px auto;
  text-align: center;
}

.avail-empty-eyebrow {
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 14px;
}

.avail-empty-state h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 500;
  color: #1a1a1a;
  line-height: 1.35;
  margin-bottom: 12px;
}

.avail-empty-state p:last-child {
  font-size: 14px;
  font-weight: 500;
  color: #888;
  line-height: 1.7;
}

.avail-results-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 32px;
  max-width: 1200px;
  margin: 0 auto;
}

/* ===== RESULT CARD =====
   Class names below are the contract for availability-page.js — keep in
   sync when the JS is built. */

.avail-result-card {
  background: var(--white);
  border: 1px solid #eee;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  display: flex;
  flex-direction: column;
}

.avail-result-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
}

.avail-result-image-wrap {
  position: relative;
  width: 100%;
  height: 210px;
}

.avail-result-image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.avail-result-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  padding: 6px 14px;
  border-radius: 20px;
  font-family: 'Montserrat', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.avail-result-badge.is-available {
  background: rgba(46, 125, 50, 0.85);
  color: var(--white);
}

.avail-result-badge.is-unavailable {
  background: rgba(138, 109, 59, 0.85);
  color: var(--white);
}

.avail-result-body {
  padding: 22px 24px 24px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.avail-result-name {
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #222;
  margin-bottom: 8px;
}

.avail-result-tagline {
  font-size: 13px;
  font-weight: 400;
  color: #888;
  line-height: 1.55;
}

.avail-result-amenities {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 14px;
}

.avail-result-amenity {
  font-family: 'Montserrat', sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 20px;
  background: rgba(240, 230, 211, 0.45);
  border: 1px solid #ece5d6;
  color: #6b5f45;
}

.avail-result-guest-warning {
  margin-top: 10px;
  font-size: 11.5px;
  font-weight: 600;
  color: #8a6d3b;
}

.avail-result-price-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid #ece8e3;
}

.avail-result-price {
  font-family: 'Cormorant Garamond', serif;
  font-size: 26px;
  font-weight: 600;
  color: var(--red);
}

.avail-result-rate-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #aaa;
}

.avail-result-total-note {
  font-size: 11px;
  font-weight: 500;
  color: #999;
  margin-top: 4px;
}

.avail-result-cta {
  display: block;
  text-align: center;
  text-decoration: none;
  margin-top: 18px;
  background: var(--red);
  color: var(--white);
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 14px;
  border-radius: 6px;
  transition: background 0.3s ease;
}

.avail-result-cta:hover {
  background: var(--red-dark);
}

.avail-result-cta.is-disabled {
  background: #eee;
  color: #aaa;
  pointer-events: none;
}

.avail-result-card.is-unavailable {
  opacity: 0.7;
}

/* ===== RESPONSIVE ===== */

@media (max-width: 700px) {
  .avail-hero {
    min-height: 360px;
  }

  .avail-hero-content {
    padding: calc(var(--nav-height) + 24px) 20px 130px;
  }

  .avail-search-wrapper {
    margin-top: -90px;
  }

  .avail-search-card {
    flex-direction: column;
    align-items: stretch;
    padding: 24px 20px;
  }

  .avail-search-field,
  .avail-search-field-guests {
    flex: 1 1 auto;
  }

  .avail-main {
    padding: 50px 20px 60px;
  }

  .avail-results-grid {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .avail-selection-bar {
    flex-direction: column;
    align-items: stretch;
    padding: 14px 20px;
  }

  .avail-selection-actions {
    justify-content: space-between;
  }

  .avail-main.has-selection {
    padding-bottom: 170px;
  }
}