@import "tailwindcss";
@import "react-datepicker/dist/react-datepicker.css";

@layer components {
  .booking-datepicker {
    border: 1px solid rgb(254 215 170);
    border-radius: 1rem;
    box-shadow: 0 22px 55px -35px rgba(146, 85, 20, 0.6);
    overflow: hidden;
  }

  .booking-datepicker .react-datepicker__header {
    background: linear-gradient(90deg, rgb(255 237 213), rgb(255 241 242));
    border-bottom: 1px solid rgb(254 215 170);
  }

  .booking-datepicker .react-datepicker__current-month,
  .booking-datepicker .react-datepicker-time__header,
  .booking-datepicker .react-datepicker-year-header {
    color: rgb(24 24 27);
    font-weight: 600;
  }

  .booking-datepicker .react-datepicker__day,
  .booking-datepicker .react-datepicker__time-name,
  .booking-datepicker .react-datepicker__time-list-item {
    color: rgb(39 39 42);
  }

  .booking-datepicker .react-datepicker__day:hover,
  .booking-datepicker .react-datepicker__time-list-item:hover {
    background: rgb(255 237 213);
  }

  .booking-datepicker .react-datepicker__day--selected,
  .booking-datepicker .react-datepicker__time-list-item--selected,
  .booking-datepicker .react-datepicker__day--keyboard-selected {
    background: rgb(249 115 22);
    color: white;
  }

  .booking-datepicker .react-datepicker__triangle {
    display: none;
  }

  .error-message {
    @apply rounded-xl border border-rose-200 bg-rose-50 px-3 py-2 text-sm text-rose-700;
  }

  .input {
    @apply w-full rounded-xl border border-orange-200 bg-orange-50/40 px-3 py-2.5 text-zinc-900 outline-none transition focus:border-orange-400 focus:ring-2 focus:ring-orange-200;
  }

  .btn-primary {
    @apply inline-flex items-center justify-center rounded-xl cursor-pointer bg-orange-500 px-4 py-2 text-sm font-medium text-white transition hover:bg-orange-600 disabled:cursor-not-allowed disabled:opacity-60;
  }
}