@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
* {
  box-sizing: border-box;
}
body {
  font-family: 'Poppins', sans-serif;
  box-sizing: inherit;
  margin: 0;
  padding: 0;
}

/* Custom elements default to inline; block + max-width lets the calendar fit narrow
   viewports instead of forcing a min width wider than the phone (which hid Saturday). */
calendar-view {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.calendar {
  /* Do not use min-width > typical phone content width — calendar was 342px while
     many viewports are ~280–320px inner, so centered layout pushed Saturday off-screen. */
  min-width: 0;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column; /* Stack week and month vertically */
  gap: 0; /* No gap between week and month views */
  /*background-color: #f0f0f0; /* Temporary background to see the container */
  min-height: 200px; /* Ensure container has height */
}

@media (min-width: 900px) {
  .calendar {
    width: 608px;
  }
}

.calendar__week {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  grid-template-rows: 54px auto;
  width: 100%; /* Ensure grid takes full width */
  max-width: 100%;
  min-width: 0; /* Allow shrinking inside padded containers */
  min-height: 118px; /* Ensure minimum height for both rows */
  margin: 0; /* Remove any margins */
  padding: 0; /* Remove any padding */
  box-sizing: border-box;
}

/* Target the first direct child div (header container with h2 and buttons) */
.calendar__week > div:first-of-type {
  grid-column: 1 / -1;
  grid-row: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  /*background-color: rebeccapurple !important; /* Override inline style */

  padding: 0 10px; /* Add horizontal padding */
  height: 54px; /* Match grid row height */
  box-sizing: border-box;
  min-height: 54px; /* Ensure minimum height */
  width: 100%; /* Ensure full width */
  z-index: 1; /* Ensure it's on top */
}

.calendar__week > div h2,
.calendar__week .calendar__caption {
  margin: 0;
  padding: 0;
  font-size: 1.5rem;
  font-weight: 600;
  flex-shrink: 0; /* Prevent h2 from shrinking */
  /*color: white; /* Make text visible on purple background */
}

.calendar__buttons {
  width: 108px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0; /* Prevent buttons container from shrinking */
  gap: 15px; /* Add gap between buttons */
}

.calendar__buttons button {
  width: 44px;
  height: 44px;
  padding: 0;
  flex-shrink: 0;
  flex-grow: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: lightgray; /* or whatever your button background should be */
  border: none;
  border-radius: 6px;
  opacity: 1;
}

.calendar__nav-button svg {
  width: 1.25rem; /* 24px */
  height: 1.25rem; /* 24px */
  stroke: currentColor; /* Ensure SVG is visible */
}

.calendar__buttons button:disabled svg {
  stroke: #9ca3af; /* Lighter gray for disabled state */
}
.calendar__week-dates {
  position: relative;
  overflow: hidden;

  grid-row: 2 !important; /* Force it to row 2 */
  grid-column: 1 / -1; /* Span all columns */
  display: flex;
  justify-content: center; /* Center the wrapper */
  align-items: center;
  min-height: 64px; /* Ensure row has height */
  padding: 10px 20px; /* 20px indent on left and right */
  width: 100%; /* Ensure full width */
  max-width: 100%;
  /* Grid + flex items default min-width: auto — can refuse to shrink and clip Sat */
  min-width: 0;
  box-sizing: border-box;
  margin: 0; /* Ensure no margin */
}

@media (max-width: 400px) {
  .calendar__week-dates {
    padding-left: 8px;
    padding-right: 8px;
  }
}

/* If anything still clips the 7th column on the narrowest phones, the strip can scroll */
@media (max-width: 420px) {
  .calendar__week-dates {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    justify-content: flex-start;
    overscroll-behavior-x: contain;
  }

  .calendar__week-dates-wrapper {
    min-width: max(100%, 292px);
  }
}

.calendar__week-dates-wrapper {
  position: relative;
  width: 100%; /* Full width of parent (which has padding) */
  max-width: 100%; /* Responsive - fill available space */
  min-width: 0; /* Allow shrinking */
  gap: 0; /* space-between handles spacing */
  margin: 0; /* No margin needed since parent has padding */
  padding: 0; /* Remove any padding */
  box-sizing: border-box;
  min-height: 64px;
  overflow: hidden; /* Ensure overflow is hidden at wrapper level too */
  flex-shrink: 0; /* Prevent flex shrinking */
  flex-grow: 1; /* Allow growing to fill space */
}

@media (min-width: 900px) {
  .calendar__week-dates-wrapper {
    max-width: 568px; /* Fixed max-width on larger screens */
  }
}

/* Week row uses a 7-column grid (see .past/.present/.future); buttons fill cells so
   all seven days stay visible on narrow screens. Wider viewports cap width below. */
.calendar__week-dates button {
  width: 100%;
  min-width: 0;
  max-width: none;
  height: 64px;
  padding: 0;
  background-color: transparent;
  border-radius: 6px;
  border: 1px solid transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  font-size: 1rem;
  box-sizing: border-box;
  justify-self: stretch;
}

@media (min-width: 900px) {
  .calendar__week-dates button {
    max-width: 48px;
    justify-self: center;
  }
}
.calendar__week-dates button.day.has-available-slots {
  border-color: gray;
}

.calendar__week-dates button:hover {
  background-color: #f5f5f5; /* Light gray background to make buttons visible */
}

/* Selected day styling - black background with white text */
.calendar__week-dates button.day.selected,
.calendar__month-days-grid button.month-day.selected {
  background-color: black !important;
  color: white !important;
  border-color: black !important;
}

/* .calendar__buttons button:disabled { */
/*cursor: not-allowed; or cursor: no-drop;*/
/* ... other disabled styles ... */
/* } */
.past,
.present,
.future {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%; /* Use exact width, not min-width */
  min-width: 100%; /* Fallback */
  max-width: 100%; /* Prevent overflow */
  height: 64px; /* Match button height */
  /* Grid (not flex + fixed-width buttons): seven equal columns so Saturday is never clipped */
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  column-gap: 2px;
  align-items: stretch;
  transition: transform 490ms ease-in-out;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

@media (max-width: 480px) {
  .calendar__week-dates button {
    font-size: 0.8125rem;
  }

  .past,
  .present,
  .future {
    column-gap: 0;
  }
}

.past {
  transform: translateX(-100%);
}

.present {
  transform: translateX(0);
}

.future {
  transform: translateX(100%);
}

/* .future comes after .present in the DOM; same stack + full-size abs = if a browser
   mishandles translateX(100%), the future strip paints on top and hides Saturday. */
.calendar__week-dates-wrapper .past,
.calendar__week-dates-wrapper .future {
  z-index: 1;
}

.calendar__week-dates-wrapper .present {
  z-index: 2;
}

/* Week-change animation: incoming strip above outgoing */
.calendar__week-dates-wrapper .future.forward-future {
  z-index: 4;
}

.calendar__week-dates-wrapper .present.forward-present {
  z-index: 3;
}

.calendar__week-dates-wrapper .past.forward-past {
  z-index: 4;
}

.calendar__week-dates-wrapper .present.backward-present {
  z-index: 3;
}

.forward-present {
  transform: translateX(-100%);
}

.backward-present {
  transform: translateX(100%);
}

.forward-future {
  transform: translateX(
    0
  ) !important; /* Move future to center during forward animation */
}

.forward-past {
  transform: translateX(0);
}

.hidden,
.calendar__month.hidden {
  display: none;
}

/* Month Styles */
.calendar__month {
  display: grid;
  grid-template-columns: repeat(9, 1fr); /* Match week view */
  grid-template-rows: 54px auto auto; /* Header + headings + days */
  width: 100%; /* Full width of parent - match .calendar__week */
  margin: 0; /* Remove any margins that might offset it */
  padding: 0; /* Remove any padding - match .calendar__week */
  box-sizing: border-box;
  min-width: 0; /* Allow shrinking */
}

/* Header row (caption + buttons) */
.calendar__month > div:first-of-type,
.calendar__month-header {
  grid-column: 1 / -1;
  grid-row: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 10px; /* Match week header padding exactly */
  box-sizing: border-box;
  height: 54px; /* Match grid row height */
  min-height: 54px; /* Ensure minimum height */
  width: 100%; /* Ensure full width */
}

/* Month header buttons - match week header button styling */
.calendar__month-header .calendar__nav-button {
  width: 44px;
  height: 44px;
  padding: 0;
  flex-shrink: 0;
  flex-grow: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: lightgray;
  border: none;
  border-radius: 6px;
  opacity: 1;
}

/* .calendar__month-header .calendar__nav-button :hover {
  opacity: 0.8;
} */

.calendar__month-header .calendar__nav-button:disabled {
  cursor: not-allowed; /* or cursor: no-drop; */
  /* ... other disabled styles ... */
}
/* Month days container */
.calendar__month-days {
  grid-row: 3; /* Changed from 2 to 3 - goes below headings */
  grid-column: 1 / -1;
  /* Your month grid styles */
  display: flex;
  flex-direction: column;
  align-items: center; /* Center horizontally - match .calendar__week-dates */
  justify-content: center;
  padding: 10px 20px; /* Padding to match .calendar__week-dates exactly */
  box-sizing: border-box;
  width: 100%; /* Ensure full width */
  margin: 0; /* Remove any default margins */
  min-width: 0; /* Allow flex item to shrink below content size */
  align-self: stretch; /* Fill the grid cell height */
  justify-self: stretch; /* Fill the grid cell width */
  position: relative; /* Match .calendar__week-dates */
  overflow: hidden; /* Match .calendar__week-dates */
}

/* The actual 7-column grid inside */
.calendar__month-days-grid {
  display: grid;
  /* Use flexible columns for responsive behavior on small screens */
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px; /* Must match .month-week-heading gap exactly */
  width: 100%; /* Full width of parent (which has padding) */
  max-width: 100%; /* Responsive - match week view wrapper */
  min-width: 0; /* Allow shrinking below content size */
  margin: 0; /* No margin - parent flex container centers it */
  padding: 0; /* Ensure no padding */
  box-sizing: border-box;
  justify-items: center; /* Center content in grid cells */
  flex-shrink: 0; /* Prevent flex shrinking - match wrapper */
  flex-grow: 1; /* Allow growing to fill space - match wrapper */
}

@media (min-width: 900px) {
  .calendar__month-days-grid {
    max-width: 568px; /* Fixed max-width on larger screens - match week view wrapper */
    /* Use fixed widths on larger screens to avoid sub-pixel rounding differences */
    grid-template-columns: 74px 74px 74px 74px 74px 74px 74px; /* 7 × 74px = 518px + 48px gaps = 566px (close to 568px) */
    row-gap: 15px;
  }
}

/* Month day buttons - must fill grid cells exactly */
.calendar__month-days-grid button {
  width: 100%; /* Fill the grid cell on small screens */
  min-width: 0; /* Allow shrinking */
  height: 44px; /* Fixed height */
  padding: 0;
  margin: 0;
  border: none;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

@media (min-width: 900px) {
  .calendar__month-days-grid button {
    width: 44px; /* Fixed 44px width on large screens */
    height: 44px; /* Fixed 44px height on large screens */
  }
}

/* Empty month day cells - take up space but are invisible */
.calendar__month-days-grid .month-day.empty {
  width: 100%; /* Fill the grid cell */
  min-width: 0; /* Allow shrinking */
  height: 44px; /* Match button height */
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
.calendar__month-days-grid button.past-date {
  text-decoration: line-through;
  cursor: not-allowed;
}
.month-week-heading {
  grid-row: 2;
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px; /* Match .calendar__month-days padding exactly */
  box-sizing: border-box;
  width: 100%; /* Ensure full width */
  margin: 0; /* Remove any default margins */
  min-width: 0; /* Allow flex item to shrink below content size */
  align-self: stretch; /* Fill the grid cell height */
  justify-self: stretch; /* Fill the grid cell width */
}

/* The inner grid - must match .calendar__month-days-grid exactly */
.month-week-heading-inner {
  display: grid;
  /* Use flexible columns for responsive behavior on small screens - match days grid */
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px; /* Must match .calendar__month-days-grid gap exactly */
  width: 100%; /* Full width of parent (which has padding) */
  max-width: 100%; /* Responsive - match week view wrapper */
  min-width: 0; /* Allow shrinking below content size */
  margin: 0;
  padding: 0;
  text-align: center;
  box-sizing: border-box;
  justify-items: center; /* Center content in grid cells - match days grid */
  flex-shrink: 0; /* Prevent flex shrinking - match wrapper */
  flex-grow: 1; /* Allow growing to fill space - match wrapper */
}

@media (min-width: 900px) {
  .month-week-heading-inner {
    max-width: 568px; /* Fixed max-width on larger screens - match week view wrapper */
    /* Use fixed widths on larger screens to match days grid exactly */
    grid-template-columns: 74px 74px 74px 74px 74px 74px 74px; /* Exact match to days grid */
  }
}

/* Heading cells - must match button sizing */
.month-week-heading-inner > div {
  width: 100%; /* Fill the grid cell */
  min-width: 0; /* Allow shrinking */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

@media (min-width: 900px) {
  .month-week-heading {
    /* Remove max-width - container should fill grid cell, not be constrained */
  }
}

/* Toggle button styles */
.calendar__toggle-button {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background-color: lightgray;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  align-self: center; /* Center horizontally in flex column container */
  transition: transform 0.2s ease;
}

.calendar__toggle-button .toggle-icon {
  width: 1.5rem;
  height: 1.5rem;
  transition: transform 0.3s ease;
}

/* Booking form uses flex column form-groups; custom elements can get min-width:auto */
.booking-form .form-group calendar-view {
  min-width: 0;
  max-width: 100%;
  align-self: stretch;
}