/* ============================================================
   Custom CSS
   Add your custom styles below
   ============================================================ */

#hostaway-calendar-widget > div {
    display: flex;
    justify-content: center;
}

/* ---- Booking widget: stack fields vertically on mobile ---- */
@media (max-width: 640px) {
  #hostaway-booking-widget form,
  #hostaway-booking-widget [class*="form"],
  #hostaway-booking-widget [class*="fields"],
  #hostaway-booking-widget [class*="row"],
  #hostaway-booking-widget [class*="grid"] {
    flex-direction: column !important;
    grid-template-columns: 1fr !important;
  }

  #hostaway-booking-widget input,
  #hostaway-booking-widget select,
  #hostaway-booking-widget button[type="submit"],
  #hostaway-booking-widget [class*="btn"] {
    width: 100% !important;
    min-width: 0 !important;
  }
}

/* ---- Calendar widget: single column on mobile ---- */
@media (max-width: 768px) {
  #hostaway-calendar-widget [class*="months"],
  #hostaway-calendar-widget [class*="DayPicker-Months"],
  #hostaway-calendar-widget [class*="calendars"] {
    flex-direction: column !important;
    align-items: center !important;
  }

  #hostaway-calendar-widget [class*="month"],
  #hostaway-calendar-widget [class*="DayPicker-Month"],
  #hostaway-calendar-widget [class*="calendar"]:not(#hostaway-calendar-widget) {
    width: 100% !important;
    max-width: 360px !important;
  }
}