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

/* Timezone tooltip — outside @layer so it beats Tailwind utility specificity */
.tz-tooltip {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.tz-tooltip-wrap.tz-open .tz-tooltip {
  opacity: 1;
  pointer-events: auto;
}

.tz-tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: #334155;
}

@layer base {
  html {
    font-family: "Poppins", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  }

  body,
  button,
  input,
  textarea,
  select,
  option,
  .fc,
  .fc *,
  .zt,
  .zt * {
    font-family: inherit;
  }
}

@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;
    }
  }
}