/* Targeted production mobile layout improvements. */
.booking-modal[aria-label="My Appointments"] {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.booking-modal[aria-label="My Appointments"] .appointment-group {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.booking-modal[aria-label="My Appointments"] .appointment-group-heading {
  position: sticky;
  top: 0;
  z-index: 1;
  padding-bottom: 8px;
  background: #171717;
}

@media (max-width: 640px) {
  .booking-modal-backdrop {
    background: #171717;
  }

  .booking-modal {
    height: 100vh;
    min-height: 100vh;
    max-height: 100vh;
  }

  @supports (height: 100dvh) {
    .booking-modal {
      height: 100dvh;
      min-height: 100dvh;
      max-height: 100dvh;
    }
  }

  .barber-grid {
    grid-template-columns: 1fr;
    gap: 16px;
    padding-bottom: calc(92px + env(safe-area-inset-bottom));
  }

  .barber-card {
    gap: 16px;
    padding: 16px;
  }

  .barber-card .barber-avatar {
    height: 340px;
  }

  .barber-card .barber-avatar img {
    object-position: center center;
  }

  .barber-card h3 {
    font-size: 1.25rem;
  }

  .barber-specialty {
    font-size: 0.98rem;
  }

  .barber-review {
    font-size: 0.88rem;
  }

  .barber-booking-count,
  .barber-availability-summary {
    font-size: 0.86rem;
  }

  .barber-card-body .text-button {
    min-height: 40px;
    margin-top: 6px;
    padding: 0.55rem 0.9rem;
    border: 1px solid rgba(214, 174, 120, 0.45);
    border-radius: 999px;
    text-decoration: none;
  }
}