/* ================================
   Calendar Wrapper
================================ */

.calendar-wrapper {
    width: 100%;
    max-width: 365px;
    position: relative;z-index: 6;
}

.calendar-wrapper label, .time-picker label, .quantity-control-wrap label, .location-wrap label {
  display: block;
  font-size: 20px;
  line-height: 1.5;margin-bottom: 10px;
}


/* ================================
   Selected Date Header
================================ */

.date-display {height: 44px;padding: 0 13px;display: flex;align-items: center;background: #413016;border-radius: 8px;color: #ffffff;font-size: 16px;cursor: pointer;}
.date-display .calendar-icon {margin-right: 12px;width: 15px;display: inline-block;}
.date-display .calendar-icon img {display: block;width: 100%;}

#selected-date {flex: 1;background: none;border: 0;outline: 0;color: #fff;font-size: 16px;line-height: 1;}

.date-display .arrow-down {width: 11px;height: 11px;border-right: 2px solid #ffffff;border-bottom: 2px solid #ffffff;transform: rotate(-45deg);transition: 0.4s;margin-right: 5px;}
.date-display.calendar-open .arrow-down {transform: rotate(45deg);}


/* ================================
   Calendar Container
================================ */

.custom-datepicker {padding: 17px 20px 10px;background: #000000;border: 1px solid #B9A16D;border-radius: 8px;width: 100%;position: absolute;left: 0;top: calc(100% + 20px);z-index: 9;}


/* ================================
   jQuery UI Datepicker
================================ */

.custom-datepicker .ui-datepicker {width: 100%;padding: 0;border: 0 !important;background: transparent;color: #ffffff;}


/* ================================
   Month Header
================================ */

.custom-datepicker .ui-datepicker-header {position: relative;padding: 0 0 11px !important;background: transparent;border: 0;border-bottom: 1px solid #B9A16D;border-radius: 0;}

.custom-datepicker .ui-datepicker-title {color: #ffffff;font-size: 20px;line-height: 1.5 !important;font-family: "Hind", sans-serif;font-weight: 400;}


/* ================================
   Previous / Next Buttons
================================ */

.custom-datepicker .ui-datepicker-prev, .custom-datepicker .ui-datepicker-next {position: absolute;top: 0;width: 30px;height: 30px;cursor: pointer;background: transparent;border: 0;}
.custom-datepicker .ui-datepicker-prev {left: 0;}
.custom-datepicker .ui-datepicker-next {right: 0;}
.custom-datepicker .ui-datepicker-prev:hover, .custom-datepicker .ui-datepicker-next:hover {background: transparent;border: 0;}

.custom-datepicker .ui-datepicker-prev span,
.custom-datepicker .ui-datepicker-next span {
    display: none;
}


/* Left Arrow */

.custom-datepicker .ui-datepicker-prev::before {
    content: "";

    position: absolute;

    width: 10px;
    height: 10px;

    top: 8px;
    left: 8px;

    border-left: 3px solid #ffffff;
    border-bottom: 3px solid #ffffff;

    transform: rotate(45deg);
}


/* Right Arrow */

.custom-datepicker .ui-datepicker-next::before {
    content: "";

    position: absolute;

    width: 10px;
    height: 10px;

    top: 8px;
    right: 8px;

    border-right: 3px solid #ffffff;
    border-top: 3px solid #ffffff;

    transform: rotate(45deg);
}


/* ================================
   Calendar Table
================================ */

.custom-datepicker .ui-datepicker-calendar {
    width: 100%;

    margin: 8px 0 0;

    border-collapse: separate;
    border-spacing: 0 8px;
}

.custom-datepicker .ui-datepicker-calendar th {
    padding: 0 !important;
    text-align: center;
    
}

.custom-datepicker .ui-datepicker-calendar td {
    padding: 0;

    text-align: center;
}


/* ================================
   Date Numbers
================================ */

.custom-datepicker .ui-datepicker-calendar td a,
.custom-datepicker .ui-datepicker-calendar td span, .custom-datepicker .ui-datepicker-calendar th span {
    width: 42px;
    height: 42px;

    max-width: 100%;
    margin: auto 2.5px;

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

    border: 0;
    border-radius: 50%;

    background: transparent;

    color: #ffffff;

    font-size: 16px;
    font-weight: 400;
    font-family: "Hind", sans-serif;

    text-decoration: none;
}


/* ================================
   Normal Date Hover
================================ */

.custom-datepicker .ui-datepicker-calendar td a:hover {
    background: #B9A16D;

    color: #000000;
}


/* ================================
   Bezet / Busy Date
================================ */

/* Bezette dagen zijn niet te kiezen: jQuery UI toont ze als
   <span> in een td.ui-state-disabled (met opacity .35). */
.custom-datepicker
.ui-datepicker-calendar
td.available-date a,
.custom-datepicker
.ui-datepicker-calendar
td.available-date.ui-state-disabled span {

    background: #413016;

    color: #8E6F3F;
    cursor: not-allowed;
}

.custom-datepicker
.ui-datepicker-calendar
td.available-date.ui-state-disabled {

    opacity: 1;
}

/* .custom-datepicker
.ui-datepicker-calendar
td.available-date a:hover {

    background: #60471f;

    color: #ffffff;
} */


/* ================================
   Selected Date
================================ */

.custom-datepicker
.ui-datepicker-calendar
td.selected-date a {

    background: #ffffff;

    color: #8E6F3F;
}

.custom-datepicker
.ui-datepicker-calendar
td.selected-date a:hover {

    background: #ffffff;

    color: #775c29;
}


/* ================================
   Dates From Previous / Next Month
================================ */

.custom-datepicker
.ui-datepicker-calendar
td.ui-datepicker-other-month {

    opacity: 0.3;
}


/* ================================
   Disabled Dates
================================ */

.custom-datepicker
.ui-datepicker-calendar
td.ui-state-disabled span {

    color: #ffff;
}


/* ================================
   Legend
================================ */

.calendar-legend {

    display: flex;
    align-items: center;

    gap: 40px;


    color: #ffffff;

    font-size: 16px;
    font-family: "Hind", sans-serif;
    font-weight: 400;
    margin-top: 18px;
}

.legend-item {
    display: flex;
    align-items: center;

    gap: 10px;
}

.legend-dot {
    width: 10px;
    height: 10px;

    flex: 0 0 10px;

    border-radius: 50%;
}

.legend-dot.available {
    background: #413016;
}

.legend-dot.selected {
    background: #ffffff;
}


/* ================================
   Mobile
================================ */

@media only screen and (max-width: 600px) {
.calendar-wrapper label, .time-picker label, .quantity-control-wrap label, .location-wrap label {font-size: 16px;line-height: 21px;margin-bottom: 5px;}
#selected-date, .time-picker-trigger, .quantity-control input[type="number"] {font-size: 14px;}
.custom-datepicker .ui-datepicker-calendar td a, .custom-datepicker .ui-datepicker-calendar td span, .custom-datepicker .ui-datepicker-calendar th span {width: 35px;height: 35px;margin: auto 2px;font-size: 14px;}
.calendar-legend {font-size: 14px;}
.custom-datepicker .ui-datepicker-title {font-size: 16px;}

}