/* =========================================================
   DATE & TIME — FINAL PREMIUM TREATMENT
   CLEAN V6
   ========================================================= */


/* =========================================================
   TWO-PANEL LAYOUT
   ========================================================= */

#booknetic_theme_8
[data-step-id="date_time"]
.booknetic_date_time_area {
    display: grid !important;

    grid-template-columns:
        minmax(0, 1.08fr)
        minmax(0, .92fr) !important;

    align-items: stretch !important;

    gap: 18px !important;

    width: 100% !important;

    background: #000000 !important;

    box-sizing: border-box !important;
}


/* =========================================================
   CALENDAR PANEL
   ========================================================= */

#booknetic_theme_8
[data-step-id="date_time"]
.booknetic_calendar_div {
    min-width: 0 !important;

    background:
        linear-gradient(
            180deg,
            #070707 0%,
            #050505 100%
        ) !important;

    border: 1px solid #292929 !important;
    border-radius: 2px !important;

    box-shadow: none !important;

    overflow: hidden !important;
}


/* month header */

#booknetic_theme_8
[data-step-id="date_time"]
.booknetic_calendar_head {
    position: relative !important;

    min-height: 42px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    gap: 12px !important;

    padding: 0 12px !important;

    background: #0A0A0A !important;

    border-bottom: 1px solid #242424 !important;

    color: #FFFFFF !important;

    box-sizing: border-box !important;
}


#booknetic_theme_8
[data-step-id="date_time"]
.booknetic_month_name {
    color: #E9E9E9 !important;

    font-family: Helvetica, Arial, sans-serif !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;

    letter-spacing: .01em !important;
}


/* month arrows */

#booknetic_theme_8
[data-step-id="date_time"]
.booknetic_prev_month,

#booknetic_theme_8
[data-step-id="date_time"]
.booknetic_next_month {
    position: relative !important;

    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    padding: 0 !important;

    background: #080808 !important;

    color: transparent !important;

    border: 1px solid #454545 !important;
    border-radius: 50% !important;

    box-shadow: none !important;
    outline: none !important;

    font-size: 0 !important;
    line-height: 0 !important;

    cursor: pointer !important;

    transition:
        border-color .18s ease,
        background-color .18s ease !important;
}


#booknetic_theme_8
[data-step-id="date_time"]
.booknetic_prev_month::before,

#booknetic_theme_8
[data-step-id="date_time"]
.booknetic_next_month::before {
    content: "" !important;

    width: 7px !important;
    height: 11px !important;

    display: block !important;

    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;

    pointer-events: none !important;
}


#booknetic_theme_8
[data-step-id="date_time"]
.booknetic_prev_month::before {
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 12'%3E%3Cpath d='M6.5 1.5 2 6l4.5 4.5' fill='none' stroke='%23FFD700' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}


#booknetic_theme_8
[data-step-id="date_time"]
.booknetic_next_month::before {
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 12'%3E%3Cpath d='M1.5 1.5 6 6l-4.5 4.5' fill='none' stroke='%23FFD700' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}


#booknetic_theme_8
[data-step-id="date_time"]
.booknetic_prev_month:hover,

#booknetic_theme_8
[data-step-id="date_time"]
.booknetic_next_month:hover {
    background: #0D0D0D !important;
    border-color: #FFD700 !important;
}


/* calendar area */

#booknetic_theme_8
[data-step-id="date_time"]
#booknetic_calendar_area,

#booknetic_theme_8
[data-step-id="date_time"]
.booknetic_calendar,

#booknetic_theme_8
[data-step-id="date_time"]
.booknetic_calendar_rows,

#booknetic_theme_8
[data-step-id="date_time"]
.booknetic_week_names {
    background: transparent !important;
    color: #FFFFFF !important;

    box-shadow: none !important;
}


/* weekday names */

#booknetic_theme_8
[data-step-id="date_time"]
.booknetic_week_names {
    border-bottom: 1px solid #202020 !important;
}


#booknetic_theme_8
[data-step-id="date_time"]
.booknetic_week_names
.booknetic_td {
    background: transparent !important;

    color: #777777 !important;

    font-family: Helvetica, Arial, sans-serif !important;
    font-size: 10px !important;
    font-weight: 500 !important;

    letter-spacing: .03em !important;
}


/* date cells */

#booknetic_theme_8
[data-step-id="date_time"]
.booknetic_td.booknetic_calendar_days
> div {
    box-sizing: border-box !important;

    border-radius: 2px !important;

    transition:
        background-color .15s ease,
        border-color .15s ease,
        color .15s ease !important;
}


#booknetic_theme_8
[data-step-id="date_time"]
.booknetic_td.booknetic_calendar_days:not(
    .booknetic_calendar_empty_day
)
> div {
    background: #090909 !important;

    color: #D8D8D8 !important;

    border: 1px solid #252525 !important;
}


#booknetic_theme_8
[data-step-id="date_time"]
.booknetic_td.booknetic_calendar_days:not(
    .booknetic_calendar_empty_day
):not(
    .booknetic_calendar_selected_day
)
> div:hover {
    background: #101010 !important;

    color: #FFFFFF !important;

    border-color: #626262 !important;
}


#booknetic_theme_8
[data-step-id="date_time"]
.booknetic_td.booknetic_calendar_days.booknetic_calendar_selected_day
> div {
    background: #FFD700 !important;

    color: #000000 !important;

    border-color: #FFD700 !important;

    font-weight: 700 !important;

    box-shadow: none !important;
}


#booknetic_theme_8
[data-step-id="date_time"]
.booknetic_td.booknetic_calendar_days.booknetic_calendar_empty_day
> div {
    background: #050505 !important;

    color: #555555 !important;

    border-color: #151515 !important;
}


/* availability marks */

#booknetic_theme_8
[data-step-id="date_time"]
.booknetic_calendar_days
> div
> span
> i[a] {
    background: #FFD700 !important;
}


#booknetic_theme_8
[data-step-id="date_time"]
.booknetic_calendar_days
> div
> span
> i[b] {
    background: #4D4D4D !important;
}


#booknetic_theme_8
[data-step-id="date_time"]
.booknetic_calendar_days.booknetic_calendar_selected_day
> div
> span
> i[a] {
    background: #000000 !important;
}


#booknetic_theme_8
[data-step-id="date_time"]
.booknetic_calendar_days.booknetic_calendar_selected_day
> div
> span
> i[b] {
    background: #777777 !important;
}


/* =========================================================
   TIME PANEL
   ========================================================= */

#booknetic_theme_8
[data-step-id="date_time"]
.booknetic_time_div {
    position: relative !important;

    min-width: 0 !important;

    background:
        linear-gradient(
            180deg,
            #070707 0%,
            #050505 100%
        ) !important;

    border: 1px solid #292929 !important;
    border-radius: 2px !important;

    box-shadow: none !important;

    overflow: visible !important;
}


/* "Time" heading */

#booknetic_theme_8
[data-step-id="date_time"]
.booknetic_times_head {
    min-height: 42px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    padding: 0 14px !important;

    background: #0A0A0A !important;

    color: #E9E9E9 !important;

    border-bottom: 1px solid #242424 !important;

    font-family: Helvetica, Arial, sans-serif !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;

    box-sizing: border-box !important;
}


#booknetic_theme_8
[data-step-id="date_time"]
.booknetic_times {
    position: relative !important;

    min-height: 216px !important;

    background: transparent !important;

    color: #FFFFFF !important;

    box-sizing: border-box !important;
}


/* human-readable selected date */

#booknetic_theme_8
[data-step-id="date_time"]
.booknetic_times_title {
    min-height: 43px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    margin: 0 !important;
    padding: 0 14px !important;

    background: transparent !important;

    color: #BDBDBD !important;

    border-bottom: 1px solid #242424 !important;

    font-family: Helvetica, Arial, sans-serif !important;
    font-size: 10.5px !important;
    font-weight: 500 !important;
    line-height: 1.3 !important;

    letter-spacing: .015em !important;

    text-align: center !important;

    box-sizing: border-box !important;
}


/* empty state */

#booknetic_theme_8
[data-step-id="date_time"]
.booknetic_time_div.dp-awaiting-date
.booknetic_times {
    display: flex !important;
    flex-direction: column !important;

    min-height: 216px !important;
}


#booknetic_theme_8
[data-step-id="date_time"]
.booknetic_time_div.dp-awaiting-date
.booknetic_times::after {
    content: "" !important;

    display: block !important;

    width: 30px !important;
    height: 30px !important;

    margin: 48px auto 0 !important;

    opacity: .55 !important;

    background:
        transparent
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='4' y='5.5' width='16' height='14' rx='1.5' fill='none' stroke='%23FFD700' stroke-width='1.2'/%3E%3Cpath d='M7.5 3.5v4M16.5 3.5v4M4 9h16' fill='none' stroke='%23FFD700' stroke-width='1.2' stroke-linecap='round'/%3E%3C/svg%3E")
        center
        / contain
        no-repeat !important;
}


/* =========================================================
   TIME SLOT GRID
   ========================================================= */

#booknetic_theme_8
[data-step-id="date_time"]
.booknetic_times_list {
    display: grid !important;

    grid-template-columns:
        repeat(2, minmax(0, 1fr)) !important;

    align-content: start !important;

    gap: 8px !important;

    width: 100% !important;

    padding: 10px !important;

    background: transparent !important;

    box-sizing: border-box !important;
}


/* time card */

#booknetic_theme_8
[data-step-id="date_time"]
.booknetic_time_element {
    position: relative !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;

    gap: 3px !important;

    width: 100% !important;
    min-width: 0 !important;
    min-height: 54px !important;

    margin: 0 !important;
    padding: 8px 7px !important;

    background: #0D0D0D !important;

    color: #FFFFFF !important;

    border: 1px solid #303030 !important;
    border-radius: 2px !important;

    box-shadow: none !important;

    box-sizing: border-box !important;

    cursor: pointer !important;

    transition:
        background-color .16s ease,
        border-color .16s ease,
        color .16s ease !important;
}


#booknetic_theme_8
[data-step-id="date_time"]
.booknetic_time_element:not(
    .booknetic_selected_time
):not(
    .bkntc_busy_slots
):hover {
    background: #141414 !important;

    border-color: #666666 !important;
}


/* JS marks the two time values */

#booknetic_theme_8
[data-step-id="date_time"]
.booknetic_time_element
.dp-time-start {
    display: block !important;

    color: inherit !important;

    font-family: Helvetica, Arial, sans-serif !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1.15 !important;
}


#booknetic_theme_8
[data-step-id="date_time"]
.booknetic_time_element
.dp-time-end {
    display: block !important;

    color: #8F8F8F !important;

    font-family: Helvetica, Arial, sans-serif !important;
    font-size: 9px !important;
    font-weight: 400 !important;
    line-height: 1.15 !important;
}


#booknetic_theme_8
[data-step-id="date_time"]
.booknetic_time_element
.dp-time-end::before {
    content: "until " !important;

    color: #666666 !important;
}


/* selected time */

#booknetic_theme_8
[data-step-id="date_time"]
.booknetic_time_element.booknetic_selected_time {
    background: #FFD700 !important;

    color: #000000 !important;

    border-color: #FFD700 !important;

    box-shadow: none !important;
}


#booknetic_theme_8
[data-step-id="date_time"]
.booknetic_time_element.booknetic_selected_time
.dp-time-start {
    color: #000000 !important;
}


#booknetic_theme_8
[data-step-id="date_time"]
.booknetic_time_element.booknetic_selected_time
.dp-time-end,

#booknetic_theme_8
[data-step-id="date_time"]
.booknetic_time_element.booknetic_selected_time
.dp-time-end::before {
    color: rgba(0, 0, 0, .64) !important;
}


/* =========================================================
   WAITLIST / BUSY SLOT
   ========================================================= */

#booknetic_theme_8
[data-step-id="date_time"]
.booknetic_time_element.bkntc_busy_slots {
    background: #0C0C0C !important;

    color: #DADADA !important;

    border-color: #5B4B12 !important;

    box-shadow: none !important;
}


#booknetic_theme_8
[data-step-id="date_time"]
.booknetic_time_element.bkntc_busy_slots:hover {
    background: #111111 !important;

    border-color: #FFD700 !important;
}


/* move Booknetic's exclamation marker inside the time card */

#booknetic_theme_8
[data-step-id="date_time"]
.booknetic_time_element.bkntc_busy_slots
.bkntc_busy_slot_info {
    position: absolute !important;

    top: 5px !important;
    right: 5px !important;
    left: auto !important;

    width: 15px !important;
    height: 15px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    padding: 0 !important;

    transform: none !important;

    background: #FFD700 !important;

    color: #000000 !important;

    border: 0 !important;
    border-radius: 50% !important;

    box-shadow: none !important;

    font-family: Helvetica, Arial, sans-serif !important;
    font-size: 9px !important;
    font-weight: 700 !important;
    line-height: 1 !important;

    z-index: 4 !important;
}


/* =========================================================
   WAITLIST TOOLTIP
   ========================================================= */

#booknetic_theme_8
[data-step-id="date_time"]
.booknetic_dropdown {
    max-width: 220px !important;

    padding: 10px 12px !important;

    background: #090909 !important;

    color: #FFFFFF !important;

    border: 1px solid #FFD700 !important;
    border-radius: 2px !important;

    box-shadow:
        0 12px 28px rgba(0, 0, 0, .34) !important;

    box-sizing: border-box !important;
}


#booknetic_theme_8
[data-step-id="date_time"]
.booknetic_dropdown
.content,

#booknetic_theme_8
[data-step-id="date_time"]
.waiting_list_info {
    background: transparent !important;

    color: #D6D6D6 !important;

    font-family: Helvetica, Arial, sans-serif !important;
    font-size: 10px !important;
    font-weight: 400 !important;
    line-height: 1.45 !important;

    text-align: center !important;
}


/* =========================================================
   PORTRAIT MOBILE
   ========================================================= */

@media only screen
and (max-width: 767px)
and (orientation: portrait) {

    #booknetic_theme_8
    [data-step-id="date_time"]
    .booknetic_date_time_area {
        grid-template-columns: 1fr !important;

        gap: 12px !important;
    }

    #booknetic_theme_8
    [data-step-id="date_time"]
    .booknetic_times {
        min-height: 160px !important;
    }

    #booknetic_theme_8
    [data-step-id="date_time"]
    .booknetic_time_div.dp-awaiting-date
    .booknetic_times {
        min-height: 150px !important;
    }

    #booknetic_theme_8
    [data-step-id="date_time"]
    .booknetic_time_div.dp-awaiting-date
    .booknetic_times::after {
        margin-top: 30px !important;
    }

    #booknetic_theme_8
    [data-step-id="date_time"]
    .booknetic_times_list {
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;

        gap: 7px !important;

        padding: 9px !important;
    }

    #booknetic_theme_8
    [data-step-id="date_time"]
    .booknetic_time_element {
        min-height: 50px !important;
    }

}


/* =========================================================
   SHORT LANDSCAPE PHONE
   ========================================================= */

@media screen
and (orientation: landscape)
and (max-height: 600px) {

    #booknetic_theme_8
    [data-step-id="date_time"]
    .booknetic_date_time_area {
        gap: 10px !important;
    }

    #booknetic_theme_8
    [data-step-id="date_time"]
    .booknetic_calendar_head,

    #booknetic_theme_8
    [data-step-id="date_time"]
    .booknetic_times_head {
        min-height: 34px !important;
    }

    #booknetic_theme_8
    [data-step-id="date_time"]
    .booknetic_times_title {
        min-height: 36px !important;
    }

    #booknetic_theme_8
    [data-step-id="date_time"]
    .booknetic_times {
        min-height: 170px !important;
    }

    #booknetic_theme_8
    [data-step-id="date_time"]
    .booknetic_times_list {
        gap: 6px !important;

        padding: 7px !important;
    }

    #booknetic_theme_8
    [data-step-id="date_time"]
    .booknetic_time_element {
        min-height: 44px !important;

        padding: 6px !important;
    }

    #booknetic_theme_8
    [data-step-id="date_time"]
    .booknetic_time_element
    .dp-time-start {
        font-size: 11px !important;
    }

    #booknetic_theme_8
    [data-step-id="date_time"]
    .booknetic_time_element
    .dp-time-end {
        font-size: 8.5px !important;
    }

}


/* =========================================================
   v1.0.3 — TIME PANEL SCROLLBAR
   ========================================================= */

#booknetic_theme_8
[data-step-id="date_time"]
.booknetic_times,

#booknetic_theme_8
[data-step-id="date_time"]
.booknetic_times_list {
    scrollbar-width: thin !important;
    scrollbar-color: #4A4A4A #080808 !important;
}

#booknetic_theme_8
[data-step-id="date_time"]
.booknetic_times::-webkit-scrollbar,

#booknetic_theme_8
[data-step-id="date_time"]
.booknetic_times_list::-webkit-scrollbar {
    width: 5px !important;
    height: 5px !important;
}

#booknetic_theme_8
[data-step-id="date_time"]
.booknetic_times::-webkit-scrollbar-track,

#booknetic_theme_8
[data-step-id="date_time"]
.booknetic_times_list::-webkit-scrollbar-track {
    background: #080808 !important;
}

#booknetic_theme_8
[data-step-id="date_time"]
.booknetic_times::-webkit-scrollbar-thumb,

#booknetic_theme_8
[data-step-id="date_time"]
.booknetic_times_list::-webkit-scrollbar-thumb {
    background: #444444 !important;
    border-radius: 999px !important;
}

#booknetic_theme_8
[data-step-id="date_time"]
.booknetic_times::-webkit-scrollbar-thumb:hover,

#booknetic_theme_8
[data-step-id="date_time"]
.booknetic_times_list::-webkit-scrollbar-thumb:hover {
    background: #FFD700 !important;
}


/* =========================================================
   v1.1.0 — PORTRAIT MOBILE TWO-STAGE DATE / TIME VIEW
   ---------------------------------------------------------
   No automatic scrolling.
   Stage 1: Calendar.
   Stage 2: Available times.
   This avoids Safari / Booknetic moving the whole webpage.
   ========================================================= */

@media only screen
and (max-width: 767px)
and (orientation: portrait) {

    #booknetic_theme_8
    [data-step-id="date_time"] {
        overflow-anchor: none !important;
    }

    #booknetic_theme_8
    [data-step-id="date_time"]
    .booknetic_date_time_area {
        display: block !important;
        width: 100% !important;
        overflow: visible !important;
    }

    /* CALENDAR MODE */
    #booknetic_theme_8
    [data-step-id="date_time"].dp-mobile-calendar-view
    .booknetic_calendar_div {
        display: block !important;
        width: 100% !important;
    }

    #booknetic_theme_8
    [data-step-id="date_time"].dp-mobile-calendar-view
    .booknetic_time_div {
        display: none !important;
    }

    /* TIME MODE */
    #booknetic_theme_8
    [data-step-id="date_time"].dp-mobile-time-view
    .booknetic_calendar_div {
        display: none !important;
    }

    #booknetic_theme_8
    [data-step-id="date_time"].dp-mobile-time-view
    .booknetic_time_div {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
    }

    /*
     * Once a date has been chosen the empty-state treatment is
     * no longer required. Let the loaded time grid determine height.
     */
    #booknetic_theme_8
    [data-step-id="date_time"].dp-mobile-time-view
    .booknetic_times {
        min-height: 0 !important;
        height: auto !important;
    }

    #booknetic_theme_8
    [data-step-id="date_time"].dp-mobile-time-view
    .booknetic_times_list {
        max-height: min(48dvh, 430px) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior: contain !important;
    }

    /* Small mobile toolbar above the selected date / times. */
    #booknetic_theme_8
    [data-step-id="date_time"]
    .dp-mobile-time-toolbar {
        display: none;
    }

    #booknetic_theme_8
    [data-step-id="date_time"].dp-mobile-time-view
    .dp-mobile-time-toolbar {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;

        min-height: 36px !important;
        padding: 6px 8px !important;

        background: #080808 !important;
        border-bottom: 1px solid #242424 !important;

        box-sizing: border-box !important;
    }

    #booknetic_theme_8
    [data-step-id="date_time"]
    .dp-mobile-change-date {
        appearance: none !important;
        -webkit-appearance: none !important;

        margin: 0 !important;
        padding: 6px 10px !important;

        background: transparent !important;
        color: #FFD700 !important;

        border: 1px solid #4B4100 !important;
        border-radius: 2px !important;

        font-family: Helvetica, Arial, sans-serif !important;
        font-size: 9px !important;
        font-weight: 600 !important;
        line-height: 1 !important;
        letter-spacing: .06em !important;

        text-transform: uppercase !important;
        cursor: pointer !important;
    }

    #booknetic_theme_8
    [data-step-id="date_time"]
    .dp-mobile-change-date:active {
        background: #FFD700 !important;
        color: #000000 !important;
    }

    /*
     * Do not turn the whole booking body into a mobile scroller.
     * The time list itself may scroll if there are many slots.
     */
    #booknetic_theme_8:has(
        .booknetic_appointment_step_element.booknetic_active_step[data-step-id="date_time"]
    )
    .booknetic_appointment_container_body {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow-y: visible !important;
        overflow-x: hidden !important;
        scroll-behavior: auto !important;
    }
}