/* ถ้าต้องการให้ CSS สอดคล้องกับ JS ใช้ 768 - 1023 เป็นช่วง tablet */
@media (min-width: 768px) and (max-width: 1023px) {
  /* ซ่อนเฉพาะ .device-container ที่เป็น desktop */
  .device-container-booking-search[data-device="desktop"] {
    display: none !important;
  }

  /* แสดงเฉพาะ .device-container ที่รองรับ tablet */
  .device-container-booking-search[data-device-tablet="true"] {
    display: block !important;
  }
}

.date-active[readonly],
.date-active[readonly]:focus {
  background-color: white;
  color: #212529;
  opacity: 1;
  cursor: pointer;
}

.date-picker-wrapper-booking-search {
  position: relative;
}

.date-picker-wrapper-booking-search .calendar-icon-gray-booking-search {
  position: absolute;
  top: 50%;
  left: 10px;
  /* ปรับตามต้องการ */
  transform: translateY(-50%);
  pointer-events: none;
  /* ให้คลิกผ่านไป input */
  z-index: 2;
}

.date-picker-wrapper-booking-search .input-booking-search,
.date-picker-wrapper-booking-search .input-booking-search.flatpickr-input {
  padding-left: 35px;
  /* เว้นที่ให้ icon ไม่ทับข้อความ */
}

.input-booking-search::placeholder,
.input-booking-search.flatpickr-input::placeholder {
  font-size: 18px;
}

.date-go,
.date-feedback,
.date-register,
.date-start,
.date-career {
  width: 100% !important;
  border: 1px solid #c8c8c8 !important;
  border-radius: 10px !important;
}

.date-back,
.date-end {
  width: 100% !important;
  border: 1px solid #c8c8c8 !important;
  border-radius: 10px !important;
}