/* CALENDAR SPILLOVER FIX - Saturday Column Containment for 344px */
/* Using cascade layers to eliminate !important declarations */

@layer overrides {

/* Force booking calendar container to use available width efficiently */
.booking-calendar-container {
  width: calc(100vw - 16px) !important;
  max-width: 340px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

/* Optimize booking calendar grid for 7 columns in narrow space */
.booking-calendar-grid {
  display: grid !important;
  grid-template-columns: repeat(7, minmax(35px, 1fr)) !important;
  gap: var(--space-xs, 4px) !important;
  padding: 0 var(--space-xs, 4px) !important;
  width: 100% !important;
  max-width: 332px !important;
  box-sizing: border-box !important;
}

/* Compress column headers for 344px */
.booking-calendar-columnheader {
  padding: 4px 2px !important;
  text-align: center;
  font-size: 0.75rem !important;
  font-weight: 600;
  min-width: 35px !important;
  max-width: 48px !important;
  box-sizing: border-box !important;
}

/* Compress calendar date cells while maintaining touch targets */
.booking-calendar-date {
  padding: var(--space-xs, 4px) !important;
  text-align: center;
  min-width: 35px !important;
  max-width: 48px !important;
  min-height: 44px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  touch-action: manipulation !important;
  font-size: 0.85rem !important;
}

/* Ensure calendar container doesn't overflow */
.booking-container,
#datetime-selection {
  max-width: 100% !important;
  overflow-x: hidden !important;
  padding: 0 8px !important;
}

/* Calendar viewport wrapper optimization */
.calendar-viewport-wrapper {
  width: 100% !important;
  max-width: 340px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow-x: hidden !important;
}

/* 344px ULTRA-SMALL SCREEN - CENTERED CONTAINMENT */
@media (max-width: 344px) {
  .booking-calendar-container {
    width: 300px !important;
    max-width: 300px !important;
    margin: 0 auto !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    position: relative !important;
  }

  .booking-calendar-grid {
    grid-template-columns: repeat(7, minmax(26px, 1fr)) !important;
    gap: var(--space-xs, 4px) !important;
    padding: 0 var(--space-xs, 4px) !important;
    max-width: 296px !important;
    margin: 0 auto !important;
  }

  .booking-calendar-columnheader {
    padding: 1px !important;
    font-size: 0.65rem !important;
    min-width: 28px !important;
    max-width: 44px !important;
  }

  .booking-calendar-date {
    min-width: 28px !important;
    max-width: 44px !important;
    min-height: 44px !important;
    padding: 1px !important;
    font-size: 0.8rem !important;
  }

  /* ULTRA-FORCE Saturday column (7th column) to stay within bounds */
  .booking-calendar-grid > .booking-calendar-columnheader:nth-child(7),
  .booking-calendar-grid > .booking-calendar-date:nth-child(7n) {
    max-width: 42px !important;
    min-width: 26px !important;
    font-size: 0.6rem !important;
  }

  /* Parent containers must not allow overflow */
  #datetime-selection,
  #booking-calendar-container {
    max-width: 320px !important;
    overflow: hidden !important;
    margin: 0 auto !important;
  }
}
} /* End @layer overrides */