/* ============================================
   CALENDAR RESPONSIVE STYLES
   Extracted from calendar-styles.css (all media queries)
   ============================================ */


/* ============================================
   700px AND BELOW
   ============================================ */
@media (max-width: 700px) {

  /* ---------- NAVIGATION (stacked layout) ---------- */
  .calendar-nav {
    padding: 10px 12px;
    gap: 10px;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .month-title {
    font-size: var(--font-size-month-title-mobile);
  }

  .calendar-nav .nav-group {
    display: flex;
    gap: 6px;
    justify-content: center;
    width: auto;
  }

  .calendar-nav .nav-btn {
    padding: 4px 10px;
    font-size: var(--font-size-nav-button-mobile);
    text-align: center;
  }

  /* ---------- FILTERS (fully centred) ---------- */
  .filters-wrapper {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .filters-bar,
  .filters-status {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .pill-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    width: 100%;
    justify-content: center;
    text-align: center;
  }

  .filters-right {
    justify-content: center;
    margin-top: 22px;
    width: 100%;
  }

  #requestRoomBtn {
    display: block;
    margin: 0 auto;
    width: 100%;
    max-width: 260px;
  }

  /* ---------- CALENDAR GRID ---------- */
  .date-cell {
    padding: 4px 4px 6px;
    min-height: var(--calendar-row-height-mobile);
  }

  .day-name {
    font-size: var(--font-size-day-name-mobile);
    padding: 6px 0;
  }

  .date-number {
    font-size: var(--font-size-date-number-mobile);
  }

  .calendar-grid-month {
    gap: 0;
  }
}


/* ============================================
   640px AND BELOW
   ============================================ */
@media (max-width: 640px) {

  /* ---------- CALENDAR + BOOKING SECTION ---------- */
  .booking-section {
    padding: 10px 0;
  }

  .calendar-wrapper {
    width: 90%;
    padding: 10px 0 20px;
    border-radius: 10px;
  }

  .calendar-container {
    padding: 10px 0 20px;
  }

  /* ---------- REQUEST ROOM FORM ---------- */
  .request-room-form {
    transform: scale(0.65);
    transform-origin: top center;
    padding: 12px;
  }

  .request-room-form input,
  .request-room-form textarea,
  .request-room-form select {
    font-size: 0.9rem;
    padding: 8px;
  }

  .request-room-form button {
    font-size: 0.9rem;
    padding: 10px 14px;
  }
}


/* ============================================
   480px AND BELOW
   ============================================ */
@media (max-width: 480px) {

  /* ---------- NAVIGATION ---------- */
  .calendar-nav {
    padding: 8px 10px;
  }

  .calendar-nav .nav-group {
    gap: 4px;
  }

  .calendar-nav .nav-btn {
    padding: 3px 8px;
    font-size: 0.7rem;
  }

  .month-title {
    font-size: 0.9rem;
  }

  /* ---------- CALENDAR GRID ---------- */
  .date-cell {
    min-height: var(--calendar-row-height-mobile-sm);
    padding: 3px 3px 5px;
  }

  .day-name {
    font-size: 0.65rem;
  }
}