/* 修正預約彈出視窗寬度問題 - 讓日曆和時間選擇器正確並排顯示 */

/* 針對包含日曆和時間選擇器的 Modal 加寬 */
.modal-dialog {
    max-width: 900px !important;
}

/* 覆蓋原本的垂直排列，強制水平並排 */
#hourlyFields .form-row {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 30px !important; /* 日曆和時間選擇器之間的間距 */
}

/* 日曆容器 */
#hourlyFields .custom-datepicker,
#dailyFields .custom-datepicker {
    flex: 0 0 auto !important;
    width: auto !important;
    margin-bottom: 0 !important; /* 移除原本的底部邊距 */
}

/* 時間選擇器容器 */
#hourlyFields .datetime-group {
    flex: 0 0 auto !important;
    width: auto !important;
    padding-left: 20px !important; /* 額外的左側間距 */
}

/* 統一開始時間和結束時間選擇器的寬度 */
#startTime,
#endTime {
    width: 180px !important;
}

/* 確保日曆不被壓縮 */
.ui-datepicker,
#hourlyDate,
#dailyDate {
    min-width: 320px !important;
}

/* 響應式設計 - 平板和手機 */
@media (max-width: 991px) {
    #hourlyFields .form-row {
        flex-direction: column !important;
        gap: 20px !important;
    }
    
    #hourlyFields .custom-datepicker,
    #hourlyFields .datetime-group {
        width: 100% !important;
        padding-left: 0 !important;
    }
}