:root {
    --day-passed-color: var(--zinc-400);
    --day-future-color: var(--zinc-600);
    --day-today-color: var(--zinc-900);
    --day-opened-color: var(--sky-900);
}

#booking {
    padding: var(--gap) !important;
    min-height: calc(100vh - var(--nav-height)) !important;

    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    gap: var(--gap);

    article {
        max-width: 400px;

        p {
            text-align: left;
            margin: 0 auto 10px auto;
            font-family: va(--font-family) !important;
            font-size: var(--font-size) !important;
        }

        content {
            p {
                max-width: 400px;
                font-family: var(--font-family) !important;
                font-size: var(--font-size) !important;
            }
        }
    }

    #booking-intro {
        width: 100%;
        max-width: 840px !important;
        margin: 0 auto;

        p {
            width: 100%;
        }
    }

    #booking-calendar {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: flex-start;
        gap: calc(var(--gap) * 2);
        width: 100%;
        max-width: 840px !important;
        margin: 0 auto;

        content {
            flex: 1 1 400px;

            #calendar {
                flex: 1 1 400px;
                table-layout: fixed;
                width: 100%;
                max-width: 400px;
                margin: 0 auto 20px auto;
                border-collapse: collapse;
                border: var(--card-border);
                background-color: var(--zinc-200);
                color: var(--zinc-900);

                #calendar-thead {
                    background-color: var(--zinc-400);
                    text-transform: uppercase;

                    tr:nth-child(1) > th {
                        font-weight: bold;
                    }

                    tr:nth-child(2) {
                        font-weight: normal;
                    }
                }

                td,
                th {
                    height: 50px;
                    padding: 5px;
                    text-align: center;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    user-select: none;
                    font-weight: normal;
                    font-family: var(--font-family);
                }

                tr:nth-child(1) th:nth-child(1),
                tr:nth-child(1) th:nth-child(3) {
                    text-decoration: none;
                    font-size: 30px;
                    color: black;
                    cursor: pointer;
                }

                tr:nth-child(1) th:nth-child(1):hover,
                tr:nth-child(1) th:nth-child(3):hover {
                    color: white;
                }

                td {
                    width: calc(100% / 7);
                }

                .passed {
                    color: var(--day-passed-color);
                    background-color: var(--zinc-200);
                    font-weight: normal;
                }

                .today {
                    color: var(--day-today-color);
                    font-weight: bold;
                }

                .future {
                    color: var(--day-future-color);
                }

                .passed div,
                .today div,
                .future div {
                    display: flex;
                    flex-direction: column;
                    flex-wrap: nowrap;
                    justify-content: center;
                    align-items: center;
                    width: 40px;
                    height: 40px;
                    margin: auto;
                    padding: 0;
                    border-radius: 50%;
                }

                .today div {
                    background-color: var(--zinc-400);
                }

                .closed {
                    background-color: var(--zinc-300) !important;
                    font-weight: normal;
                }

                .opened {
                    color: var(--day-opened-color);
                    background-color: white;
                    cursor: pointer;
                }

                .opened:hover {
                    background-color: var(--sky-100);
                    font-weight: bold;
                }

                .full {
                    background-color: var(--red-200);
                }
            }

            #calendar-times {
                display: flex;
                flex-direction: column;
                flex-wrap: nowrap;
                align-content: flex-start;
                justify-content: center;
                align-items: center;
                gap: 10px;
                width: 100%;
                max-width: 400px;
                padding: 10px;
                margin: auto;
                border: var(--card-border);
                background-color: var(--zinc-200);
                color: var(--zinc-900);

                div {
                    display: flex;
                    flex-direction: row;
                    flex-wrap: nowrap;
                    align-content: flex-start;
                    justify-content: flex-start;
                    align-items: flex-start;
                    gap: 10px;
                    width: 100%;
                    min-height: 40px;

                    span:nth-child(1) {
                        width: 100%;
                        max-width: 20px;
                        text-align: center;
                        display: inline-flex;
                        align-items: center;
                        justify-content: center;
                        height: 40px;
                    }

                    .time {
                        display: inline-flex;
                        width: 100%;
                        height: 40px;
                        text-align: center;
                        white-space: nowrap;
                        user-select: none;
                        font-family: var(--font-family-condensed);
                        font-size: 80%;
                        font-weight: normal;
                        cursor: pointer;
                        justify-content: center;
                        align-items: center;
                        border: 1px solid var(--zinc-400);
                        border-radius: 5px;
                        background-color: var(--zinc-100);
                    }

                    .time:hover {
                        background-color: var(--sky-200);
                    }
                }
            }

            #rdv-form {
                max-width: 400px;
                margin: 0 auto;
                color: var(--zinc-900);
                background-color: var(--darker-20);
                border: var(--zinc-600);

                label {
                    color: var(--zinc-300);
                }

                #rdv-date-time {
                    border-bottom: 1px solid rgba(0, 0, 0, 0.25);
                }

                #rdv-date-time input[type="date"],
                #rdv-date-time input[type="time"] {
                    text-align: center;
                    user-select: none;
                    cursor: default;
                }

                #inputMessage {
                    height: 139px;
                }

                p {
                    max-width: 400px;
                }
            }

            .selected {
                background-color: var(--sky-200) !important;
            }
        }
    }
}