/* =====================================================================
   Reservation calendar styles
   Day states: available · booked · unavailable · past
   ===================================================================== */

.reserve-layout { display: grid; grid-template-columns: 1.2fr .9fr; gap: 2.5rem; align-items: start; }

/* Calendar shell */
.calendar { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: clamp(1.2rem, 3vw, 2rem); }
.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.4rem; }
.cal-head h3 { font-size: 1.5rem; color: var(--wine); }
.cal-nav { display: flex; gap: .5rem; }
.cal-nav a, .cal-nav span {
  width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px;
  border: 1.5px solid var(--line); color: var(--wine); font-size: 1.1rem; transition: all .25s var(--ease);
}
.cal-nav a:hover { background: var(--wine); color: #fff; border-color: var(--wine); }
.cal-nav span.disabled { opacity: .35; pointer-events: none; }

.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: .4rem; }
.cal-dow { text-align: center; font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); padding: .4rem 0; font-weight: 600; }
.cal-cell { aspect-ratio: 1; }
.cal-cell.blank { visibility: hidden; }

.day {
  width: 100%; height: 100%; border: 1.5px solid var(--line); border-radius: 14px; background: var(--ivory);
  display: grid; place-content: center; font-size: 1rem; font-weight: 500; color: var(--ink);
  cursor: default; position: relative; transition: transform .2s var(--ease), box-shadow .2s var(--ease), background .2s;
}
button.day { font-family: inherit; appearance: none; -webkit-appearance: none; }
.day .dot { position: absolute; bottom: 7px; width: 6px; height: 6px; border-radius: 50%; }

/* Available — invites a click (brand green for clarity) */
.day.available { cursor: pointer; border-color: #b7e8c8; background: #f1fbf4; color: #11713f; }
.day.available .dot { background: #16a34a; }
.day.available:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(22,163,74,.22); border-color: #16a34a; }
.day.available.selected { background: linear-gradient(135deg, var(--ruby), var(--crimson)); color: #fff; border-color: transparent; box-shadow: 0 12px 28px rgba(194,21,58,.4); }
.day.available.selected .dot { background: #fff; }

/* Booked / pending */
.day.booked { background: #fbeef0; border-color: #f3c9cf; color: #a23; cursor: not-allowed; }
.day.booked .dot { background: var(--crimson); }

/* Unavailable (owner has not opened it) */
.day.unavailable { background: #f6f3f3; border-color: #ece6e6; color: #b9adad; cursor: not-allowed; }

/* Past */
.day.past { background: transparent; border-color: transparent; color: #d7cdcd; cursor: not-allowed; }

/* Legend */
.cal-legend { display: flex; flex-wrap: wrap; gap: 1rem 1.4rem; margin-top: 1.5rem; padding-top: 1.3rem; border-top: 1px solid var(--line); }
.legend-item { display: inline-flex; align-items: center; gap: .5rem; font-size: .85rem; color: var(--ink-soft); }
.legend-swatch { width: 16px; height: 16px; border-radius: 5px; border: 1.5px solid; }
.legend-swatch.s-available { background: #f1fbf4; border-color: #16a34a; }
.legend-swatch.s-booked { background: #fbeef0; border-color: var(--crimson); }
.legend-swatch.s-unavailable { background: #f6f3f3; border-color: #ece6e6; }

/* Booking form panel */
.book-panel { position: sticky; top: 100px; }
.book-panel .selected-date { background: var(--blush); border: 1px solid #f3c9cf; border-radius: 14px; padding: 1rem 1.2rem; margin-bottom: 1.3rem; }
.book-panel .selected-date .lbl { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ruby); }
.book-panel .selected-date .val { font-family: var(--font-display); font-size: 1.4rem; color: var(--wine); margin-top: .2rem; }
.book-panel .selected-date .val.none { font-size: 1rem; color: var(--ink-soft); font-family: var(--font-body); }

@media (max-width: 900px) {
  .reserve-layout { grid-template-columns: 1fr; }
  .book-panel { position: static; }
}