@layer components {

  /* Booking Week Headers */

  .booking-week {
    margin-block-end: var(--block-space);
  }

  .booking-week__header {
    font-size: 0.875rem;
    color: var(--color-ink-muted);
    margin-block-end: var(--block-space-s);
  }

  /* Slot selection button (extends week-calendar__slot) */

  .booking-slot-btn {
    cursor: pointer;
    border: none;
    font: inherit;
    transition: background var(--transition-fast), color var(--transition-fast);

    &:hover {
      background: color-mix(in oklch, oklch(var(--lch-green)) 30%, transparent);
      color: oklch(var(--lch-green));
    }

    &:focus-visible {
      outline: 2px solid oklch(var(--lch-green));
      outline-offset: 1px;
    }
  }

  .week-calendar__slot--selected {
    background: oklch(var(--lch-green));
    color: white;

    &:hover {
      background: oklch(var(--lch-green));
      color: white;
    }
  }

  /* Booking confirmation panel */

  .booking-confirm {
    min-width: 16rem;
  }

  .booking-confirm__price {
    font-size: 1.1rem;
  }

  /* Booking card (index page) */

  .booking-card {
    padding: var(--block-space-s) var(--inline-space);
  }

  /* Homework items */

  .homework-item {
    padding: var(--block-space-s) var(--inline-space);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
  }

  .homework-item--done {
    text-decoration: line-through;
    color: var(--color-ink-muted);
  }
}