/* 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: #2BAE8B;
  font-weight: 400;
}

/* 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;
}

.calendar-date.gap-discount-start {
  background: rgba(0, 168, 142, 0.08);
  box-shadow: inset 0 0 0 1px rgba(0, 168, 142, 0.28);
}

.calendar-date.gap-discount-end {
  background: rgba(0, 168, 142, 0.06);
  box-shadow: inset 0 0 0 1px rgba(0, 168, 142, 0.22);
  color: #0f766e;
}

.calendar-date.gap-discount-start:not(.disabled-date):hover {
  background: rgba(0, 168, 142, 0.16);
}

.calendar-date.gap-discount-end.checkout-ok:hover {
  background: rgba(0, 168, 142, 0.14);
}

.gap-discount-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  z-index: 4;
  min-width: 28px;
  padding: 1px 4px;
  border-radius: 999px;
  background: #0f766e;
  color: #ffffff;
  font-size: 0.62rem;
  line-height: 1.3;
  font-weight: 800;
  box-shadow: 0 0 0 0 rgba(15, 118, 110, 0.28);
  animation: gapDiscountPulse 3.2s ease-in-out infinite;
}

.calendar-date.selected .gap-discount-badge,
.calendar-date.in-range .gap-discount-badge {
  background: #ffffff;
  color: #0f766e;
}

@keyframes gapDiscountPulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(15, 118, 110, 0.22);
  }
  50% {
    box-shadow: 0 0 0 5px rgba(15, 118, 110, 0);
  }
}

.discount-note {
  width: min(420px, 100%);
  margin: 4px auto 0;
  padding: 9px 12px;
  border-radius: 10px;
  border: 1px solid rgba(15, 118, 110, 0.18);
  background: rgba(0, 168, 142, 0.08);
  color: #0f766e;
  font-size: 14px;
  font-weight: 800;
  text-align: center;
}

.discount-note.is-active {
  background: rgba(0, 168, 142, 0.12);
  border-color: rgba(15, 118, 110, 0.30);
}

.extension-offer {
  width: min(650px, 100%);
  margin: 10px auto 18px;
  padding: 14px 16px;
  border-radius: 10px;
  border: 1px solid rgba(15, 118, 110, 0.24);
  background: #f0fdf9;
  color: #0f4f49;
  box-shadow: 0 8px 24px rgba(15, 118, 110, 0.08);
  text-align: left;
}

.extension-offer__text {
  display: grid;
  gap: 3px;
  font-size: 14px;
  line-height: 1.35;
}

.extension-offer__text strong {
  color: #0f766e;
  font-size: 15px;
}

.extension-offer__text span {
  color: #42645f;
}

.extension-offer__actions {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.extension-offer__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid rgba(15, 118, 110, 0.28);
  border-radius: 8px;
  background: #ffffff;
}

.extension-offer__details {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.extension-offer__details strong {
  color: #0f766e;
  font-size: 15px;
}

.extension-offer__details span {
  color: #42645f;
  font-size: 13px;
  font-weight: 700;
}

.extension-offer__button {
  min-height: 38px;
  border: 0;
  border-radius: 8px;
  padding: 8px 16px;
  background: #22b78f;
  color: #0f766e;
  font-weight: 800;
  cursor: pointer;
  color: #ffffff;
  box-shadow: 0 6px 18px rgba(34, 183, 143, 0.22);
}

.extension-offer__button:hover {
  background: #159b7a;
}

.extension-offer.is-applied {
  background: #ecfdf5;
  border-color: rgba(5, 150, 105, 0.34);
}

.book-action-section {
  margin-top: 14px;
}

/* ============================================ */
/* ============================================ */
@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;
  }

  .extension-offer__item {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .extension-offer__button {
    width: 100%;
  }
}

.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