.dwf-booking-period-selector {
    position: relative;
    color: #0D120E;
}

.dwf-booking-period-selector .period-selector {
    position: relative;
    background-color: white;
    border:1px solid lightgray;
    padding:0.5em;
    margin:0.5em 0;
    border-radius: 10px;
    font-size: 1rem;
}

.dwf-booking-period-selector .period-selector .dropdown-icon {
    position: absolute;
    right:0.5em;
    top:50%;
    transform: translateY(-50%);
}

.dwf-booking-period-selector .period-selector-popup {
    position: absolute;
    left:0;
    bottom:0;
    width: 100%;
    min-width: 700px;
    transform: translateY(100%);
    z-index: 999;
    padding:1em;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    background-color: #FFFFFF;
    border: 1px solid lightgray;
}

.dwf-booking-period-selector .period-selector-popup.hidden {
    display: none;
}

.dwf-booking-period-selector .dwf-calendar-table .calendar-row {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
}

.dwf-booking-period-selector .dwf-calendar-table .col {
    width: 100%;
}

.dwf-booking-period-selector .dwf-calendar-table .date {
    width: 100%;
    aspect-ratio: 1/1;
    padding:0.5em;
    font-size: 1rem;
}

.dwf-booking-period-selector .dwf-calendar-table .date:hover {
    cursor: pointer;
    box-shadow:0 0 0 1px lightgray inset;
    border-radius: 3px;
}

.dwf-booking-period-selector .calendar-months-grid.loading {
    opacity:0.5;
}

.dwf-booking-period-selector .date.today {
    position: relative;
}

.dwf-booking-period-selector .date.today::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 2px solid var(--primary-color);
    z-index: 1;
}

/* Only start available */
.dwf-booking-period-selector .date.unavailable-end.available-start:not(.in-past):not(.today),
.dwf-booking-period-selector .date[class="date available-start"]:not(.in-past) {
    --available-background: #d4f1d0;
    --unavailable-background: #f1d0d0;
    --unavailable-color: #000;
    background: linear-gradient(-45deg, var(--available-background) 50%, var(--unavailable-background) 50%);
    color: var(--unavailable-color);
}

/* Only end available */
.dwf-booking-period-selector .date.available-end.unavailable-start:not(.in-past):not(.today) {
    --available-background: #d4f1d0;
    --unavailable-background: #f1d0d0;
    --available-color: #000;
    background: linear-gradient(45deg, var(--available-background) 50%, var(--unavailable-background) 50%);
    color: var(--available-color);
}

/* Full available */
.dwf-booking-period-selector .date.available-start.available-end:not(.in-past):not(.today) {
    --available-background: #d4f1d0;
    --available-color: #000;
    background: var(--available-background);
    color: var(--available-color);
}

/* Fully unavailable */
.dwf-booking-period-selector .date.unavailable-end.unavailable-start:not(.in-past):not(.today) {
    --unavailable-background: #f1d0d0;
    --unavailable-color: #000;
    background: var(--unavailable-background);
    color: var(--unavailable-color);
}

/* Date is in past and unavailable */
.dwf-booking-period-selector .date.in-past:not(.past-start):not(.today) {
    --in-past-background: #d8d8d8;
    --in-past-color: #000;
    background: var(--in-past-background);
    color: var(--in-past-color);
}

/* Date starts in the past, but is available today */
.dwf-booking-period-selector .date.today.available-start {
    --available-background: #d4f1d0;
    --in-past-background: #d8d8d8;
    --in-past-color: #000;
    background: linear-gradient(-45deg, var(--available-background) 50%, var(--in-past-background) 50%);
    color: var(--in-past-color);
}

/* Date starts in the past, but is unavailable today */
.dwf-booking-period-selector .date.today.unavailable-start {
    --unavailable-background: #f1d0d0;
    --in-past-background: #d8d8d8;
    --in-past-color: #000;
    background: linear-gradient(-45deg, var(--unavailable-background) 50%, var(--in-past-background) 50%);
    color: var(--in-past-color);
}

.dwf-booking-period-selector .date.selection {
    --selection-background: #0c88b4;
    --selection-color: #FFF;
    background: var(--selection-background)!important;
    color: var(--selection-color)!important;
}

.dwf-booking-period-selector .calendar-months-grid {
    display: grid;
    grid-template-columns: 1fr 5fr 5fr 1fr;
    grid-gap: 1.5em;
    margin-top: 0.5em;
}

.dwf-booking-period-selector .dwf-booking-restrictions {
    grid-column: 2/4;
}

.dwf-booking-period-selector .previous-button-col,
.dwf-booking-period-selector .next-button-col {
    text-align: center;
}

.dwf-booking-period-selector .responsive-text {
    display: none;
}

@media screen and (max-width: 768px) {
    .dwf-booking-period-selector .responsive-text {
        display: inline;
    }

    .dwf-booking-period-selector .period-selector-popup {
        min-width: auto;
    }
    .dwf-booking-period-selector .calendar-months-grid {
        grid-template-columns: 1fr 1fr;
    }

    .dwf-booking-period-selector .dwf-booking-restrictions {
        grid-column: 1/3;
    }

    .dwf-booking-period-selector .previous-button-col {
        text-align: left;
        order: -2;
    }

    .dwf-booking-period-selector .next-button-col {
        text-align: right;
        order: -1;
    }

    .dwf-booking-period-selector .calendar-months-grid .calendar-col {
        grid-column: 1/3;
    }
}