/* CSS Document */
/* Availability calendar component */
  .calendar-wrap .months { display: grid; gap: 1rem; }
  @media (min-width: 768px) { .calendar-wrap .months { grid-template-columns: repeat(2, minmax(260px, 1fr)); } }
  @media (max-width: 767.98px) { .calendar-wrap .months { grid-template-columns: 1fr; } }

  .cal-header { display:flex; align-items:center; justify-content:space-between; }
  .cal-title { font-weight:600; }
  .cal-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:.25rem; }

  .dow { text-transform: uppercase; font-size:.75rem; opacity:.7; padding:.25rem 0; text-align:center; }

  .day { position:relative; aspect-ratio:1/1; border:1px solid rgba(0,0,0,.075); border-radius:.5rem;
         display:flex; align-items:center; justify-content:center; font-size:.95rem; background:#fff; }
  .day.out { opacity:.35; }
  .day.past { opacity:.25; pointer-events:none; }
  .day.today { outline:2px solid var(--bs-primary); outline-offset:-2px; }
  .day.booked { background: #f8d7da; border-color:#f5c2c7; color:#842029; }
  .day.available:hover { background:#f8f9fa; }

  .legend-box { width:14px; height:14px; border-radius:3px; display:inline-block; border:1px solid rgba(0,0,0,.15); }
  .bg-booked { background:#f8d7da; border-color:#f5c2c7; }
  .bg-available { background:#fff; }
  .bg-today { background: var(--bs-primary); border-color: var(--bs-primary); }
  .cal-nav .btn { padding:.25rem .5rem; }