/* Revert mobile native date workaround and compact time picker.
   Keeps original custom calendar visible again.
*/

/* Force-hide native date fallback if old files/cache still exist */
.mobile-native-date {
    display: none !important;
}

body.mobile-native-date-enabled .calendar,
body.mobile-native-date-enabled .booking-calendar,
body.mobile-native-date-enabled .calendar-card,
body.mobile-native-date-enabled .date-picker,
body.mobile-native-date-enabled .booking-date-picker,
body.mobile-native-date-enabled .calendar-grid,
body.mobile-native-date-enabled .booking-calendar-grid,
body.mobile-native-date-enabled .days-grid,
body.mobile-native-date-enabled .date-grid,
body.mobile-native-date-enabled .calendar-weekdays,
body.mobile-native-date-enabled .weekdays,
body.mobile-native-date-enabled .mobile-hide-custom-calendar {
    display: revert !important;
}

/* Compact time selection on phones/tablets */
@media (max-width: 820px) {
    .time-grid,
    .times-grid,
    .available-times,
    .available-times-grid,
    .booking-times,
    .time-buttons {
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 6px !important;
        max-height: 190px !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        padding: 2px 2px 8px !important;
        -webkit-overflow-scrolling: touch !important;
        border-radius: 12px !important;
    }

    .time-grid button,
    .times-grid button,
    .available-times button,
    .available-times-grid button,
    .booking-times button,
    .time-buttons button,
    .time-button,
    button.time-button {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        min-height: 34px !important;
        height: 34px !important;
        padding: 0 4px !important;
        border-radius: 8px !important;
        font-size: 12px !important;
        line-height: 1 !important;
        font-weight: 900 !important;
    }

    /* If time options are labels instead of buttons */
    .time-grid label,
    .times-grid label,
    .available-times label,
    .available-times-grid label,
    .booking-times label,
    .time-buttons label {
        min-height: 34px !important;
        padding: 0 4px !important;
        border-radius: 8px !important;
        font-size: 12px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Make headings around time picker tighter */
    .time-grid,
    .times-grid,
    .available-times,
    .available-times-grid,
    .booking-times,
    .time-buttons {
        margin-top: 8px !important;
    }

    /* Common step/card text around time selection */
    .booking-card h3,
    .step-booking-card h3,
    .booking-form h3 {
        margin-bottom: 8px !important;
    }
}

@media (max-width: 520px) {
    .time-grid,
    .times-grid,
    .available-times,
    .available-times-grid,
    .booking-times,
    .time-buttons {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        max-height: 170px !important;
        gap: 5px !important;
    }

    .time-grid button,
    .times-grid button,
    .available-times button,
    .available-times-grid button,
    .booking-times button,
    .time-buttons button,
    .time-button,
    button.time-button,
    .time-grid label,
    .times-grid label,
    .available-times label,
    .available-times-grid label,
    .booking-times label,
    .time-buttons label {
        min-height: 32px !important;
        height: 32px !important;
        border-radius: 7px !important;
        font-size: 11px !important;
    }
}

@media (max-width: 360px) {
    .time-grid,
    .times-grid,
    .available-times,
    .available-times-grid,
    .booking-times,
    .time-buttons {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        max-height: 160px !important;
    }
}