@import url('https://fonts.googleapis.com/css2?family=Titillium+Web:ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700&display=swap');

:root {
    --font: "Titillium Web";
    --error-color: #bb1b1b;
    --main-color: #377951;
}

* {
    box-sizing: border-box;
    margin: 0px;
}

html {
    scroll-behavior: smooth;
    font-family: var(--font);
}

.calendar-table {
    display: flex;
    flex-wrap: wrap;
    gap: 50px;
    justify-content: center;
}

.calendar_month {
    display: none;
    border-radius: 15px;
    border: 1px solid rgb(138, 138, 138);
    padding: 10px;
}

.month_header {
    display: flex;
    justify-content: center;
    align-self: center;
    background-color: var(--main-color);
    color: white;
    background-color: #377951;
}

.month_title {
    text-align: center;
    font-size: 1.5em;
    margin-bottom: 10px;
}

.nextMonth .month_title {
    position: relative;
    z-index: 2;
    color: #686868;
}

.previousMonth .month_title {
    position: relative;
    z-index: 1;
    color: #686868;
}

.month_header_day {
    display: flex;
    justify-content: center;
    align-self: center;
    width: 50px;
    height: 48px;
    line-height: 50px;
}

.month_week {
    display: flex;
}

.invalid_day {
    width: 50px;
    min-height: 48px;
    background-color: #ecebeb;
    padding-top: 5px;
    padding-bottom: 5px;
    text-align: center;
    user-select: none;
}

.valid_day {
    position: relative;
    width: 50px;
    height: 48px;
    padding-top: 12px;
    padding-bottom: 5px;
    text-align: center;
    cursor: pointer;
    user-select: none;
    color: white;
}

.valid_day:hover {
    background-color: #ecebeb !important;
    color: #000;
}

.calendar-title {
    display: flex;
    flex-wrap: wrap;
    gap: 25px;
    justify-content: center;
}

.currentMonth {
    display: block
}

.nextMonth {
    display: block
}

.previousMonth {
    display: block
}

#prevMonthBtn, #nextMonthBtn {
    cursor: pointer;
    margin-left: 15px;
    margin-right: 15px;
}

.priced {
    /* background-color: #bb1b1b; */
}


.unoccupied {
    color: white;
}

.occupied {
    text-align: center;
    color: white  ;
    /* background-color: #377951; */
}

.occupied_indicator {
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: -1;
    width: 100%;
    height: 100%;
    background-color: rgba(187, 27, 27, 0.8);;
}

.occupied_start_indicator_red {
    position: absolute;
    z-index: -1;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-color: rgba(187, 27, 27, 0.8);
    clip-path: polygon(100% 0, 100% 100%, 0 0);
}

.occupied_end_indicator_red {
    position: absolute;
    z-index: -1;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-color: rgba(187, 27, 27, 0.8);
    clip-path: polygon(0 100%, 100% 100%, 0 0);
}

/* .occupied_end_indicator_red, .occupied_start_indicator_red {
    position: absolute;
    width: 48px;
    height: 10px;
    font-size: 10px;
    margin-top: -6px;
    color: #bb1b1b;
    text-align: center;
}

.occupied_end_indicator_green, .occupied_start_indicator_green {
    position: absolute;
    width: 48px;
    height: 10px;
    font-size: 10px;
    margin-top: -6px;
    color: #377951;
    text-align: center;
} */

.occupied_start_indicator_green {
    position: absolute;
    z-index: -1;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-color: rgba(55, 121, 81, 0.7);
    clip-path: polygon(100% 0, 100% 100%, 0 0);
}

.occupied_end_indicator_green {
    position: absolute;
    z-index: -1;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-color: rgba(55, 121, 81, 0.7);
    clip-path: polygon(0 100%, 100% 100%, 0 0);
}

.unoccupied_indicator {
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: -1;
    width: 100%;
    height: 100%;
    background-color: rgba(55, 121, 81, 0.7);
}

.calendar-month-select {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
}

.select-markup {
    position: relative;
    background-color: #fff;
}

.month-arrow-btn {
    font-size: 25px;
}

.month-arrow-btn.active {
    color: #377951;
}

.month-arrow-btn.inactive {
    color: #b3b3b3;
}

.select-dropdown-icon {
    position: absolute;
    bottom: 7px;
    right: 7px;
    z-index: 1;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 0px 10px 10px;
    border-color: transparent transparent #377951 transparent;
}

.months-input, .years-input {
    position: relative;
    z-index: 2;
    appearance: none;
    width: auto;
    font-size: 1.15rem;
    padding: 0.475em 1em 0.475em 0.675em;
    background-color: transparent;
    border: 1px solid #caced1;
    border-radius: 0.25rem;
    color: #000;
    cursor: pointer;
}

.months-input::after {
  --size: 0.3rem;
  position: absolute;
  content: "!";
  right: 4rem;
  pointer-events: none;
}

.calendar-informatie-container {
    display: flex;
    justify-content: center;
    align-self: center;
    width: 100svw;
    margin-top: 50px;
}

.calendar-information {
    width: 400px;
    border-radius: 15px;
    border: 1px solid rgb(138, 138, 138);
    padding: 10px;
}

.calendar-information h3 {
    color: #2C2B2B;
    text-align: center;
    font-size: 30px;
    font-weight: 600;
    margin-bottom: 10px;
}

.bookings-datum {
    margin-bottom: 15px;
}

.bookings-datum h4 {
    color: #2C2B2B;
    font-size: 20px;
    font-weight: 400; 
}

.reservatie-date-input {
    display: block;
    width: 100%;
    color: #2C2B2B;
    font-size: 25px;
    height: 35px;
    min-width: 1px;
}

.reservatie-date-input.active {
    display: none;
}

.booked_date_input_error {
    border: #bb1b1b 2px solid;
}

#startManualDate:focus {
    outline: none;
}

#endManualDate:focus {
    outline: none;
}

.date-span {
    display: none;
    color: #2C2B2B;
    font-size: 25px;
    font-weight: 700;
    height: 27px;
    min-width: 1px;
}

.date-span.active {
    display: none !important;
}

.prijs {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    margin-top: 10px;
}

.prijs-info {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    width: 100%;
}

.prijs-info {
    cursor: pointer;
}

.prijs-icon {
    color: rgb(196, 196, 196);
    margin-right: 10px;
}

.prijs h4{
    color: #2C2B2B;
    font-size: 20px;
    font-weight: 400;
    margin-right: 10px;
}


.prijs .prijs-getal{
    display: inline-block;
    color: #2C2B2B;
    text-align: right;
    font-size: 40px;
    font-weight: 700;
    width: 100%;
}

.voorwaarden-container {
    margin-top: 15px;
    width: 100%;
    text-align: center;
}

.voorwaarden-container a {
    color: #2C2B2B;
    font-size: 15px;
    font-weight: 300; 
}

.prijs-info:hover ~ .prijs-pop-up {
    display: flex;
}

.prijs-pop-up:hover {
    display: flex;
}

.prijs-pop-up {
    display: none;
    flex-wrap: wrap;
    position: absolute;

    width: 100%;
    bottom: 30px;
    left: 0;
    background-color: #fff;
    border-radius: 15px;
    padding: 15px 15px;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.1);
}

.pop-up-divider {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.pop-up-left {
    flex-grow: 1;
    width: 50%;
    text-align: left;
}

.pop-up-right {
    flex-grow: 1;
    width: 50%;
    text-align: end;
}

.prijs-pop-up-total {
    display: flex;
    justify-content: space-between;

    width: 100%;
    margin-top: 20px;
    font-weight: bold;

    border-top: #2C2B2B 1px solid;
}

.pop-up-title {
    width: 100%;
    margin-bottom: 5px;
    font-weight: bolder;
}

.btn_container {
    display: flex;
    justify-content: center;
    width: 350px;
    margin-top: 25px;
}

.green-divider-container {
    display: flex;
    justify-content: center;
    width: 100vw;
    height: 50px;
    margin-bottom: 75px;
}

.green-divider {
    width: 60%;
    height: 2px; 
    border-radius: 50%;
    background: #377951; 
}

.green-divider-price {
    display: flex;
    justify-content: center;
    width: 100%;
    height: 35px;
}

.green-divider-p {
    width: 100%;
    height: 2px; 
    border-radius: 50%;
    background: #377951; 
}

.calendar-button {
    text-decoration: none;
    background-color: var(--main-color);
    color: white;
    padding: 5px 35px 5px 35px;
    font-weight: 700;
    transition: all 0.7s ease;
    cursor: pointer;
}

.calendar-button:hover {
    outline: var(--main-color) 5px solid;
    text-decoration: none;
    background-color: white;
    color: var(--main-color);
    padding: 5px 35px 5px 35px;
    font-weight: 700;
    cursor: pointer;
}


.button-error {
    text-decoration: none;
    background-color: rgba(204, 204, 204, 0.60);
    color: rgb(150, 147, 147);
    padding: 5px 35px 5px 35px;
    font-weight: 700;
    transition: all 0.7s ease;
    cursor: no-drop;
}

.waarborg-info {
    display: block;
    margin-top: -15px;
    text-align: right;
    color: rgb(175, 175, 175);
}

/* CALENDAR MARK-UP BASED ON SELECTION */

.start-date {
    background-color: #377951 !important;
    display: flex;
    justify-content: center;
    /* align-items: center; */
    font-size: large;
    color: white;
    
}

.end-date {
    background-color: #377951 !important;
    display: flex;
    justify-content: center;
    /* align-items: center; */
    font-size: large;
    color: white;
}

.selected-date {
    background-color: #377951;
    display: flex;
    justify-content: center;
    /* align-items: center; */
    font-size: large;
    color: white;
    border-radius: 0px 0px 0px 0px !important;
}

.start-date .unoccupied_indicator, .end-date .unoccupied_indicator, .selected-date .unoccupied_indicator {
    display: none;
}

.start-date .occupied_indicator, .end-date .occupied_indicator, .selected-date .occupied_indicator {
    display: none;
}

.start-date .occupied_start_indicator_red, .end-date .occupied_start_indicator_red, .selected-date .occupied_start_indicator_red,
.start-date .occupied_end_indicator_red, .end-date .occupied_end_indicator_red, .selected-date .occupied_end_indicator_red {
    display: none;
}

.start-date .occupied_start_indicator_green, .end-date .occupied_start_indicator_green, .selected-date .occupied_start_indicator_green,
.start-date .occupied_end_indicator_green, .end-date .occupied_end_indicator_green, .selected-date .occupied_end_indicator_green {
    display: none;
}

.start-error {
    background-color: #bb1b1b !important;
    display: flex;
    justify-content: center;
    font-size: large;
    color: white;
    /* border-radius: 10px 0px 0px 10px; */
}

.end-error {
    background-color: #bb1b1b !important;
    display: flex;
    justify-content: center;
    font-size: large;
    color: white;
    /* border-radius: 0px 10px 10px 0px; */
}

.input-error {
    border: #bb1b1b 2px solid;
    outline: none;
}

.selected-error {
    background-color: rgba(187, 27, 27) !important;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: large;
    color: white;
    padding: 0px 0px 0px 0px !important;
}

.start-error .unoccupied_indicator, .end-error .unoccupied_indicator, .selected-error .unoccupied_indicator {
    display: none;
}  

.start-error .occupied_indicator, .end-error .occupied_indicator, .selected-error .occupied_indicator {
    display: none;
} 

.start-error .occupied_start_indicator_red, .end-error .occupied_start_indicator_red, .selected-error .occupied_start_indicator_red,
.start-error .occupied_end_indicator_red, .end-error .occupied_end_indicator_red, .selected-error .occupied_end_indicator_red {
    display: none;
} 

.start-error .occupied_start_indicator_green, .end-error .occupied_start_indicator_green, .selected-error .occupied_start_indicator_green,
.start-error .occupied_end_indicator_green, .end-error .occupied_end_indicator_green, .selected-error .occupied_end_indicator_green {
    display: none;
}