@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  .no-spinners {
    -moz-appearance: textfield;
  }
  .no-spinners::-webkit-outer-spin-button,
  .no-spinners::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }

  /* Mobile-only booking slot grid and container improvements */
  @media (max-width: 640px) {
    /* Make the booking slot container longer and more scrollable */
    .booking-slot-mobile-container {
      min-height: 32rem !important; /* 512px */
      max-height: 40rem !important; /* 640px */
      height: 40rem !important;
      overflow-y: auto !important;
      padding-bottom: 2rem;
    }
    /* Uniform slot sizing for all slots, including BOOKED */
    .booking-slot-mobile-btn {
      width: 6.5rem !important; /* 104px */
      min-width: 6.5rem !important;
      max-width: 6.5rem !important;
      height: 2.75rem !important; /* 44px */
      min-height: 2.75rem !important;
      max-height: 2.75rem !important;
      font-size: 1rem !important;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0.25rem 0.1rem;
      padding: 0.5rem 0.5rem;
      box-sizing: border-box;
    }
    /* Font size for BOOKED slots */
    .booking-slot-mobile-btn[disabled],
    .booking-slot-mobile-btn.cursor-default {
      font-size: 0.95rem !important;
      color: #888 !important;
      background: #e5e7eb !important;
      border-color: #d1d5db !important;
    }
  }
}