:root {
    --bs-body-font-family: "Manrope", sans-serif;
    --bs-body-font-weight: 400;
    --bs-body-font-size: 1rem;

    --global-color-white: #FFFFFF;
    --global-color-black: #000000;
    --global-color-accent: #B2705F;
    --global-color-accent-2: #E8B3A3;
}

h1 {
    font-family: "Fraunces", serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
    font-variation-settings:
        "SOFT" 0,
        "WONK" 0;
}

.calendar-container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.calendar {
    display: contents;
}

.calendar__header {
    padding: 0.5rem;
   
    color: var(--global-color-white);
    background: linear-gradient(128deg, var(--global-color-accent) 47%, var(--global-color-accent-2) 100%);
    
    border-radius: 999px;

    text-align: center;

    font-family: "Fraunces", serif;
    font-weight: 500;
    font-style: normal;
}

.calendar__grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);

    padding: 0.5rem 1rem;
}

.calendar__grid__days {
    display: contents;
    
    text-align: center;

    font-family: "Fraunces", serif;
    font-weight: 500;

    color: var(--global-color-accent);
}

.calendar__grid__weeks {
    display: contents;
}

.calendar__grid__weeks__week {
    display: contents;
}

.calendar__grid__weeks__week__day {
    padding: 0.5rem;
    text-align: center;
}

.calendar__grid__weeks__week__day--disabled {
    color: lightgray;
    background-color: unset;
}

.calendar__grid__weeks__week__day--free {
    background-color: lightgreen;
}

.calendar__grid__weeks__week__day--confirmed {
    color: var(--global-color-white);
    background-color: var(--global-color-accent);
}

.calendar__grid__weeks__week__day--tentative {
    background-color: orange !important;
}

.btn {
    --bs-btn-border-radius: 999px;
    --bs-btn-padding-x: 2rem;
    --bs-btn-padding-y: 0.625rem;
    --bs-btn-font-weight: 700;
}

/* Third party */
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected:hover  {
    background-color: var(--global-color-accent) !important;
    border-color: var(--global-color-accent) !important;
}

.flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n+1)), 
.flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n+1)), 
.flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n+1)) {
    -webkit-box-shadow: -10px 0 0 var(--global-color-accent-2) !important;
    box-shadow: -10px 0 0 var(--global-color-accent-2) !important;
}

.flatpickr-day.inRange {
    background-color: var(--global-color-accent-2) !important;
    border-color: var(--global-color-accent-2) !important;
    box-shadow: -5px 0 0 var(--global-color-accent-2), 5px 0 0 var(--global-color-accent-2) !important;
    color: var(--global-color-white) !important;
}

.date-input-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    align-self: stretch;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--bs-body-color);
    background-color: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);

    &:focus-within {
        border-color: var(--bs-border-color);
        outline: 0;
        box-shadow: 0 0 0 0.25rem rgba(13,110,253,.25);
    }

    input {
        all: unset;
        display: flex;
        flex: 1;
    }
    
    &.is-invalid {
        border-color: var(--bs-danger);
        
        &:focus-within {
            border-color: var(--bs-danger);
            box-shadow: 0 0 0 0.25rem rgba(220,53,69,.25);
        }
    }

    .form-control:focus {
        all: unset
    }
}

.flatpickr-current-month .flatpickr-monthDropdown-months {
    appearance: none;
    background: url("../icons/mdi/chevron-down-P_fyGkX.svg") no-repeat right 0.5ch center;
    padding-right: 1.5em;
}

.flatpickr-current-month .flatpickr-monthDropdown-months:hover,
.flatpickr-current-month .flatpickr-monthDropdown-months:focus {
    background: url("../icons/mdi/chevron-down-P_fyGkX.svg") no-repeat right 0.5ch center;
}


.chevron {
    transition: transform 0.3s ease;
    transform: rotate(0deg);
    cursor: pointer;
}
  
.chevron.rotate {
    transform: rotate(180deg);
}

label.required:after {
    content: " *";
    color: #dc3545; /* Bootstrap danger color */
}