/* reservation.css: styles for calendar carousel */
.calendar{
  background:#fff;
  padding:14px;
  border-radius:8px;
  width:min(920px,95%);
  box-shadow:0 6px 18px rgba(0,0,0,0.08);
  /* use column layout so legend can be placed at the bottom without absolute positioning */
  display:flex;
  flex-direction:column;
}
.calendar-controls{
  display:flex;
  align-items:center;
  gap:8px;
}
.cal-btn{
  background:#2b6cb0;color:#fff;border:none;padding:8px 12px;border-radius:6px;cursor:pointer;font-size:18px;
}
.month-viewport{
  overflow:hidden;flex:1;
}
.month-track{
  display:flex;gap:12px;transition:transform 300ms ease;
}
.month{
  /* make three months fit the viewport by default (gap is 12px -> two gaps between three items = 24px) */
  flex: 0 0 calc((100% - 24px) / 3);
  background:#f9fafb;padding:12px;border-radius:6px;box-sizing:border-box;
}
.month h3{margin:0 0 8px 0;font-size:1.05rem;text-align:center}
.month .weekdays{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;margin-top:10px;color:#555}
.month .weekdays > div{padding:8px 6px;box-sizing:border-box;font-weight:600;color:#444}
.month .days{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-top:8px}
.day{
  padding:8px 6px;border-radius:6px;text-align:center;cursor:pointer;background:transparent;color:#222;border:1px solid transparent;box-sizing:border-box;
}
.day:hover{background:#e6f0ff}
.day.disabled{color:#bbb;cursor:default}
.day.selected{background:#2b6cb0;color:#fff;border-color:#1f4e7a}
.day.range-start{box-shadow:inset 6px 0 0 rgba(0,0,0,0.06);}
.day.range-end{box-shadow:inset -6px 0 0 rgba(0,0,0,0.06);}
.day.selected:not(.range-start):not(.range-end){background:#6ea3e6}
/* responsive */
@media(max-width:720px){
  /* show 1 month on narrow screens */
  .month{flex: 0 0 100%}
  .cal-btn{padding:6px 8px}
}

/* winter months styling */
.month.winter{background:linear-gradient(180deg,#f0f7fb,#eef6fa);border:1px solid rgba(50,90,120,0.06)}
.month.winter h3{color:#1f4e7a}
.month.winter .day{color:#1b3b4f}

/* default selected appearance for non-end days (lighter) */
.day.selected:not(.range-start):not(.range-end){
  background:#6ea3e6; /* fallback blue-ish */
  color: #111; /* darker text on lighter background */
}

/* winter endpoints: strong dark blue with white text */
.month.winter .day.range-start,
.month.winter .day.range-end{
  background:#1f4e7a;
  color:#fff;
  border-color:#12324a;
}
/* winter middle-range: lighter blue */
.month.winter .day.selected:not(.range-start):not(.range-end){
  background:#c7dbe6;
  color:#0b2b36;
}

/* summer endpoints: strong warm color with white text */
.month.summer .day.range-start,
.month.summer .day.range-end{
  background:#b85b00;
  color:#fff;
  border-color:#7a3800;
}
/* summer middle-range: lighter warm shade */
.month.summer .day.selected:not(.range-start):not(.range-end){
  background:#ffe9cd;
  color:#5a3300;
}

/* season footer label */
.month-season{text-align:center;margin-top:8px;font-size:0.92rem;color:#444}
.month.summer .month-season{color:#b85b00;font-weight:600}
.month.winter .month-season{color:#1f4e7a;font-weight:600}

/* summer months styling (warmer) */
.month.summer{background:linear-gradient(180deg,#fff6ea,#fff1df);border:1px solid rgba(180,120,60,0.06)}
.month.summer h3{color:#b85b00}
.month.summer .day{color:#663b00}
.month.summer .day.selected{background:#b85b00}

/* calendar legend (bottom-right) */
.calendar-legend{align-self:flex-end;margin-top:8px;background:rgba(255,255,255,0.95);padding:8px 10px;border-radius:6px;font-size:0.92rem;color:#333}
.calendar-legend .legend-item{display:block;margin:2px 0}

/* small gray superscript for note references */
.note-ref{
  font-size:0.6em;
  color:#888;
  margin-left:0;
  display:inline-block;
  line-height:1;
  transform:translateY(-0.35em);
}

/* align the bottom row so legend sits at the same height as options */
.calendar-bottom-row{width:100%;display:flex;justify-content:space-between;align-items:center}
.calendar-options{display:flex;gap:12px;align-items:center}