/* Containers */

#guesty-search {
    transform: translateY(-50%);
    z-index: 2147483647;
    position: relative;
}
#guesty-search .container-wrap {
    background-color: #f7f7f7;
    padding: 0 !important;
    position: relative;
}
#guesty-search-container {
    display: flex;
    align-items: center;
    justify-content: center;
}
#guesty-search-wrapper {
    position: relative;
    border-radius: 80px !important;
    background-color: #fff;
    box-shadow: rgba(100,100,111,0.2) 0px 7px 29px 0px;
}


/* Date Picker */

:root {
    /*
    --litepicker-month-width: 350px;
    --litepicker-day-width: calc(var(--litepicker-month-width) / 7)
    */
    --litepicker-day-width: 42px;
    --litepicker-day-color-hover: var(--colorA);
    --litepicker-is-start-color-bg: var(--colorA);
    --litepicker-is-end-color-bg: var(--colorA);
    --litepicker-is-in-range-color: #729e8b29;
    --litepicker-is-today-color: #ffffff;
    --litepicker-is-locked-color-bg: #f7f7f7;
    --litepicker-is-locked-color: #9e9e9e;
    --litepicker-button-next-month-color-hover: var(--colorA);
    --litepicker-button-prev-month-color-hover: var(--colorA);
}
.litepicker {
    z-index: 2147483647 !important;
    border-radius: 15px !important;
    padding: 1rem 2rem 2rem;
    background-color: #fff;
    border: 1px solid rgb(221, 221, 221);
    box-shadow: rgb(0 0 0 / 12%) 0px 6px 16px;
    top: calc(100% + 1rem) !important;
    left: 50% !important;
    transform: translateX(-50%);
}
.litepicker .container__months {
    box-shadow: none;
    border-radius: 0;
    justify-content: space-between;
}
.litepicker .container__months.columns-2 {
    width: calc((var(--litepicker-month-width) * 2) + 3rem);
}
.litepicker .container__months .month-item { padding: 0 }
.litepicker .container__months .month-item-header button.reset-button { display: none }
.litepicker .container__months .month-item-header div > .month-item-year,
.litepicker .container__months .month-item-header div > .month-item-name {
    font-family: 'Titillium Web', sans-serif;
    font-weight: 600;
    font-size: 1.15rem !important;
    letter-spacing: -0.5px;
}
.litepicker .container__months .month-item-weekdays-row > div {
    color: var(--colorA);
    font-weight: 500;
}
.litepicker .container__days .day-item {
    height: 42px;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    line-height: 1.15;
    font-weight: 600;
    position: relative;
    margin: 0;
    padding: 10px;
    z-index: 1;
    cursor: pointer;
}
.litepicker .container__days .day-item.is-start-date.is-locked small { display: block }
.litepicker .container__days .day-item.is-today {
    background-color: transparent;
    color: var(--litepicker-day-color);
}
.litepicker .container__days .day-item.is-locked:not(.is-in-range) {
    color: var(--litepicker-is-locked-color);
    background-color: var(--litepicker-is-locked-color-bg);
    font-weight: 600;
    cursor: not-allowed !important;
    text-decoration: line-through;
    z-index: 0;
}
.litepicker .container__days .day-item.is-start-date.is-locked {
    background-color: var(--colorA) !important;
    color: #fff !important;
    border-top-left-radius: 5px !important;
    border-bottom-left-radius: 5px !important;
    text-decoration: none !important;
}
.litepicker .container__days .day-item.is-start-date,
.litepicker .container__days .day-item.is-end-date {
    color: var(--litepicker-is-end-color);
    background-color: var(--litepicker-is-end-color-bg);
}
.litepicker .container__footer {
    border-radius: 0 !important;
    background-color: #fff !important;
    box-shadow: none;
    padding: 0;
    margin: 1.5rem 0 0;
}
.litepicker .container__footer span.preview-date-range { display: none }
.litepicker .container__footer button.reset-button {
    display: none;
    font-family: var(--fontB);
    text-decoration: underline;
    font-size: 1rem;
    line-height: 1;
    padding: 0;
    cursor: pointer;
    margin: 0 1rem;
}
.litepicker .container__footer button.reset-button:first-of-type { display: inline }
.litepicker .container__footer button.reset-button:hover { text-decoration: none }
.litepicker .container__footer .button-apply {
    margin: 0;
    padding: 10px 20px;
    background-color: var(--colorB);
    font-family: var(--fontB);
    font-weight: 600;
    font-size: 1rem;
    line-height: 1;
    letter-spacing: -0.5px;
    cursor: pointer;
}
.litepicker .container__footer .button-apply:hover { background-color: var(--colorA) }
.litepicker .container__footer .button-cancel {
    display: none;
    margin: 0;
    padding: 10px 20px;
    background-color: var(--colorB);
    font-family: var(--fontB);
    font-weight: 600;
    font-size: 1rem;
    line-height: 1;
    letter-spacing: -0.5px;
    cursor: pointer;
}


/* Search Inputs */

#guesty-search-fields {
    display: flex;
    align-items: stretch;
    justify-content: center;
    border-radius: 80px !important;
    overflow: hidden;
}
#guesty-search-fields .input-container {
    margin: 0 !important;
    padding: 0.85rem 1.75rem;
    position: relative;
    transition: 250ms solid ease;
    min-width: 190px;
    cursor: pointer;
}
#guesty-search-fields .input-container .label {
    font-size: 16px;
    font-weight: 600;
    display: block;
    cursor: pointer;
}
#guesty-search-fields .input-wrapper {
    display: flex;
    width: 100%;
    align-items: center;
    font-size: 0.95rem;
    cursor: pointer;
}


/* Dates */

#guesty-search-fields .date-container::after {
    content: "";
    height: 65%;
    width: 1px;
    background-color: #cccccc;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
}
#guesty-search-fields .date-container .click-listener {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 1;
    top: 0;
    left: 0;
}
.month-item:not(.no-previous-month) button.button-previous-month,
button.button-next-month {
    height: 30px;
    width: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    transition: 250ms ease all !important;
}
button.button-previous-month:hover,
button.button-next-month:hover { background-color: #f7f7f7 !important }
button.button-previous-month svg,
button.button-next-month svg {
    display: block;
    height: 14px;
    width: 14px;
    fill: rgb(34,34,34);
}


/* Guests */

#guesty-search-fields .input-container.guest-container svg {
    width: 12px;
    height: 12px;
    position: absolute;
    top: 50%;
    right: 1.5rem;
    transform: translateY(-50%);
}
#guesty-search-guests {
    display: none !important;
    z-index: 1;
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
    max-width: 350px;
    height: auto;
    background-color: #fff;
    padding: 1.5rem 1.5rem 1rem;
    flex-direction: column;
    transform: translateY(calc(100% + 10px));
    border-radius: 4px !important;
    box-shadow: rgb(0 0 0 / 15%) 0px 2px 6px, rgb(0 0 0 / 7%) 0px 0px 0px 1px !important;
}
#booking-sidebar #guesty-search-guests { max-width: unset !important }
#guesty-search-guests.active { display: flex !important }
#guesty-search-guests .data-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 0 1rem;
    border-bottom: 1px solid #ebebeb;
    padding: 0 0 1rem;
}
#guesty-search-guests .data-option:nth-child(2) {
    border: none;
    padding: 0;
}
#guesty-search-guests .data-text {
    display: flex;
    flex-direction: column;
    font-size: 14px;
    line-height: 1.25;
}
#guesty-search-guests .data-text strong { font-size: 16px }
#guesty-search-guests .data-input {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
#guesty-search-guests .data-input .down,
#guesty-search-guests .data-input .up {
    height: 30px;
    width: 30px;
    border-radius: 50%;
    background-color: var(--colorB);
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 7px;
    transition: 250ms ease all;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
#guesty-search-guests .data-input .down.disabled,
#guesty-search-guests .data-input .up.disabled {
    cursor: not-allowed !important;
    opacity: 0.25 !important;
    filter: grayscale(1);
}
#guesty-search-guests .data-input svg {
    display: block;
    height: 14px;
    width: 14px;
}
#guesty-search-guests .data-input .down svg path,
#guesty-search-guests .data-input .up svg path {
    stroke: #ffffff;
    stroke-width: 3px;
    transition: 250ms ease all;
}
#guesty-search-guests .data-input .count {
    width: 40px;
    text-align: center;
    font-size: 18px;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
#guesty-search-guests .alerts p {
    display: none;
    font-size: 14px;
    line-height: 1.15;
    background-color: #e73838;
    font-weight: 600;
    text-align: center;
    padding: 1rem !important;
    color: #ffffff;
    margin: 0.75rem 0 !important;
    border-radius: 4px;
}
#guesty-search-guests .alerts p a {
    color: #fff;
    text-decoration: underline;
}
#guesty-search-guests .close {
    padding: 0.5rem 0;
    cursor: pointer;
    font-weight: 600;
    text-decoration: underline;
    line-height: 1;
    display: inline-block;
    text-align: center;
}


/* Submit  */

#guesty-search-submit {
    border: none !important;
    min-width: unset !important;
    padding: 0 0.5rem 0 0 !important;
    background-color: var(--colorA);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 75px;
}
#guesty-search-submit svg {
    height: 20px;
    width: 20px;
    transition: 500ms ease all !important;
}
#guesty-search-submit:hover svg { transform: scale(1.15) }


/* Validation */

#guesty-warning-message {
    display: none;
    position: absolute;
    left: 0;
    bottom: -30px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    color: #A62A23;
    width: 100%;
    text-align: center;
}
.validation-warning label,
.validation-warning .input-wrapper { color: #A62A23 }


/* Mobile */

@media screen and (max-width: 768px) {


    /* Layering */

    .ocm-effect-wrap,
    #ajax-content-wrap { z-index: 2147483646 !important }
    body.calendar-open #ajax-content-wrap { z-index: 2147483647 !important }
    #slide-out-widget-area,
    .slide-out-widget-area-toggle,
    #header-outer { z-index: 2147483646 !important }


    /* Search Bar */

    #guesty-search { transform: unset !important }
    #guesty-search-wrapper {
        flex-wrap: wrap;
        border-radius: 0 !important;
        padding: 0.75rem;
        width: 100%;
    }
    #guesty-search-fields {
        flex-wrap: wrap;
        border-radius: 0 !important;
        max-width: 375px;
        margin: 0 auto;
    }
    #guesty-search-fields .input-container {
        border: 1px solid var(--colorA) !important;
        padding: 0.5rem 1rem;
    }
    #guesty-search-fields .date-container {
        width: 50%;
        min-width: unset;
    }
    #guesty-search-fields .date-container::after { display: none }
    #guesty-search-fields .date-container:first-child {
        border-right: none !important;
        border-top-left-radius: 6px;
    }
    #guesty-search-fields .date-container:nth-child(2) { border-top-right-radius: 6px }
    #guesty-search-fields .guest-container {
        width: 100%;
        border-top: none !important;
        border-bottom: none !important;
        border-radius: 0 !important;
    }
    #guesty-search-submit {
        width: 100%;
        height: 60px;
        border-radius: 6px;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        padding: 0 !important;
    }
    #guesty-search-guests {
        width: 100%;
        transform: translateY(-59px) !important;
        right: unset;
        bottom: unset;
        position: relative;
    }

    /* Litepicker */
    .month-item-weekdays-row { width: 100% }
    .litepicker {
        --litepicker-day-width: calc(100% / 7) !important;
        --litepicker-month-width: calc(var(--litepicker-day-width) * 7) !important;
    }
    .litepicker .container__days > div {
        height: 50px !important;
    }
    .litepicker {
        transform: unset !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        height: 100vh !important;
        width: 100vw !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        padding: 1.5rem !important;
    }

}