:root { --ease: cubic-bezier(.2,.8,.2,1); }

html { scroll-behavior: smooth; }

.reveal {
  opacity: 0;
  transform: translateY(14px) scale(.99);
  filter: blur(4px);
  transition: opacity 700ms var(--ease), transform 700ms var(--ease), filter 700ms var(--ease);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}

/* Premium hover */
a, button { transition: transform 250ms var(--ease), filter 250ms var(--ease); }
a:hover, button:hover { filter: brightness(1.02); }

/* Modal animation */
#modal.show {
  display: flex;
  animation: fadeIn 220ms var(--ease) both;
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}


/* Calendar grid */
/*
 * The booking calendar uses a responsive CSS grid. Each row begins with a time column
 * followed by seven day columns. To eliminate extra whitespace when scrolling and to
 * improve responsiveness on smaller screens, the grid now defines a fixed width
 * for the first column with flexible units for the day columns. The entire grid
 * has a minimum width of 100%, so it will expand to fill its container without
 * creating an oversized canvas that causes overflow on the far right. Cells have
 * reduced corner radii to better match the rest of the design. The call badge at
 * the top of the calendar (“15 min call”) also uses a moderate radius instead of
 * a fully pill‑shaped one.
 */
/*
 * The booking calendar uses a responsive CSS grid. Each row begins with a time column
 * followed by seven day columns. To ensure the grid expands to fill the available
 * width on larger viewports while still allowing horizontal scrolling on small
 * screens, the grid now takes up the full width of its container but cannot shrink
 * below the width needed to display all eight columns. Setting `min-width: max-content`
 * prevents a blank gap from appearing when the user scrolls all the way to the
 * right on narrow devices. The explicit `width: 100%` allows the grid to stretch
 * and match its container when there’s more room. The flexible `minmax` values
 * keep day columns from collapsing too small.
 */
.calendar-grid {
  grid-template-columns: 80px repeat(7, minmax(80px, 1fr));
  width: 100%;
  min-width: max-content;
}

/* Header cells (day labels and top-left corner) */
.cal-head {
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: rgba(11,20,18,0.70);
  padding: 10px;
  border-radius: 12px;
  background: rgba(246,248,247,0.92);
  border: 1px solid rgba(231,236,234,0.9);
}

/* Time column cells */
.cal-time {
  font-weight: 800;
  font-size: 12px;
  color: rgba(11,20,18,0.60);
  padding: 10px;
  border-radius: 12px;
  background: rgba(246,248,247,0.92);
  border: 1px solid rgba(231,236,234,0.9);
}

/* Booking cells */
.cal-cell {
  padding: 10px;
  border: 1px solid rgba(231,236,234,0.9);
  background: rgba(246,248,247,0.92);
  border-radius: 12px;
  font-size: 13px;
  color: rgba(11,20,18,0.78);
  cursor: pointer;
  user-select: none;
  transition: background 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.cal-cell:hover {
  background: rgba(255,255,255,0.97);
}
.cal-cell[aria-disabled="true"] {
  opacity: 0.35;
  cursor: not-allowed;
}
.cal-cell.is-selected {
  background: rgba(215,179,93,0.15);
  border-color: rgba(215,179,93,0.95);
  box-shadow: 0 0 0 3px rgba(215,179,93,0.45);
}

/* Pill for the call label */
.cal-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 18px;
  background: rgba(215,179,93,0.14);
  border: 1px solid rgba(215,179,93,0.35);
  color: rgba(20,58,51,0.95);
  font-weight: 800;
  font-size: 12px;
}