/* Calendar styles (calendar/calendar.css) */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  /* Calendar page uses booking_system minimal header; keep body flush to viewport. */
  padding: 0;
}

/* ============================================ */
/* ============================================ */

.calendar-wrapper {
  width: 100%;
  max-width: 840px;
  margin: 0 auto;
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  padding: 15px 12px;
}

.calendar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  margin-bottom: 10px;
}

.nav-btn {
  background: none;
  border: 2px solid #2BAE8B;
  font-size: 1.2rem;
  cursor: pointer;
  color: #2BAE8B;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background 0.2s, color 0.2s;
  padding: 0;
}

.nav-btn:hover {
  background: rgba(43,174,139,0.1);
}

.nav-btn {
  border: none;
  width: 24px;
  height: 24px;
  border-radius: 4px;
  padding: 4px;
}
.nav-btn:hover { background: rgba(43,174,139,0.15); }
*/

.months-container {
  display: flex;
  overflow: hidden;
  transition: opacity 0.3s ease;
}

.calendar-month {
  width: 50%;
  padding: 10px;
}

.calendar-month-header {
  text-align: center;
  font-size: 1.2rem;
  margin-bottom: 10px;
  color: #333333;
}

.calendar-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  gap: 2px;
}

.calendar-day-name {
  font-weight: bold;
  padding: 6px 0;
  color: #555555;
}

.calendar-empty {
  visibility: hidden;
  height: 28px;
}

.calendar-date {
  position: relative;
  padding: 8px 0 20px;
  margin: 2px;
  border-radius: 4px;
  cursor: default;
  transition: background 0.2s, color 0.2s;
  color: #333333;
  font-size: 0.95rem;
  text-align: center;
}

.calendar-date:not(.disabled-date):hover {
  background: rgba(43,174,139,0.1);
  cursor: pointer;
}

/* When picking a check-out date, show which dates are selectable (no jumping over blocks/unavailable). */
body.is-picking-checkout .calendar-date.checkout-allowed {
  outline: 2px solid rgba(43,174,139,0.35);
  outline-offset: -2px;
  border-radius: 6px;
}

body.is-picking-checkout .calendar-date.checkout-blocked {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}

.disabled-date {
  color: #cccccc;
  pointer-events: none;
}

.unavailable-date {
  /* Fully booked night starting at this date (can still be used as check-out). */
  background: transparent;
  color: #9ca3af;
  cursor: not-allowed;
}

/* A fully-booked date can still be used as a check-out day (end-exclusive). */
.calendar-date.unavailable-date.checkout-ok {
  cursor: pointer;
  color: #333333;
}

.price-block,
.overlap-block {
  position: absolute;
  bottom: 2px;
  height: 4px;
  border-radius: 2px;
  z-index: 2;
}

.price-block.full {
  left: 2px;
  right: 2px;
  background: #2BAE8B;
}

.price-block.start {
  left: 50%;
  right: 2px;
  background: #2BAE8B;
}

.price-block.end {
  left: 2px;
  right: 50%;
  background: #2BAE8B;
}

.overlap-block {
  left: 2px;
  right: 2px;
}

.price-text {
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.75rem;
  color: #2BAE8B;
  white-space: nowrap;
  z-index: 3;
}

/* If a price is shown together with a block underline, lift the text so it doesn't overlap the underline. */
.calendar-date.has-underline .price-text {
  bottom: 6px;
}

/* If the availability underline is present as well, lift a bit more. */
.calendar-date.has-occ-underline .price-text {
  bottom: 7px;
}

.occ-block {
  position: absolute;
  bottom: 0;
  height: 3px;
  border-radius: 2px;
  background: rgba(107, 114, 128, 0.8);
  z-index: 1;
}

.occ-block.full {
  left: 2px;
  right: 2px;
}

.occ-block.start {
  left: 50%;
  right: 2px;
}

.occ-block.end {
  left: 2px;
  right: 50%;
}

.price-text.is-daily {
  color: #111827;
  font-weight: 700;
}

/* Keep text readable on selected dates */
.calendar-date.selected .price-text.is-daily {
  color: inherit;
}

.calendar-date.selected {
  background: #2BAE8B !important;
  color: #ffffff !important;
}

.calendar-date.in-range {
  background: rgba(43,174,139,0.2) !important;
  color: #333333 !important;
}

.calendar-date.block-selected {
  background: rgba(43,174,139,0.2) !important;
}

/* ============================================ */
/* ============================================ */
@media (max-width: 600px) {
  .months-container {
    flex-direction: column;
  }

  .calendar-month {
    width: 100%;
  }

  .calendar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  margin-bottom: 10px;
}

  .nav-btn {
    width: 28px;
    height: 28px;
    font-size: 1rem;
  }
}

.calendar-date {
  position: relative;
}

.price-block {
  position: absolute;
  bottom: 0;
  height: 4px;
  background: #3cb371;
}

.price-block.full {
  left: 0;
  width: 100%;
}

.price-block.half-left {
  left: 0;
  width: 50%;
}

.price-block.half-right {
  right: 0;
  width: 50%;
  left: auto;
}

/* Desktop guard: keep two months side-by-side */
@media (min-width: 601px) {
  .months-container {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
  }
  .calendar-month {
    width: 50%;
    min-width: 0;
  }
}

/* Spacing under minimal header on calendar page */
.booking-min-header + .calendar-wrapper {
  margin-top: 14px;
}
\n