/* ==================================================
   BOOK ONLINENOW BOOKING FORM
   Frontend stylesheet. Dynamic values are supplied
   by the plugin as CSS variables on .bon-quickbooking.
   ================================================== */

.bon-quickbooking, .bon-quickbooking * { box-sizing: border-box; }

.bon-quickbooking .book-col-form {
    position: relative;
    display: flex;
    width: var(--bon-width);
    max-width: var(--bon-max);
    margin: 0 auto;
    justify-content: center;
    left: 0;
    right: 0;
    z-index: 9999;
    background: var(--bon-wrap-bg);
}

.bon-quickbooking .book-col-column {
    margin-left: var(--bon-gap);
    box-shadow: 0 0 6px rgba(0,0,0,.25);
    background: var(--bon-col-bg);
}

.bon-quickbooking .chck-in-out { width: 16%; padding: 10px 14px; }
.bon-quickbooking .adlt-child { width: 12%; padding: 10px 14px; }

.bon-quickbooking label {
    display: block;
    margin-bottom: 5px;
    font-family: var(--bon-font);
    font-size: var(--bon-label-size);
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--bon-label-color);
    cursor: pointer;
}

.bon-quickbooking input, .bon-quickbooking select {
    display: block;
    width: 100%;
    height: 30px;
    padding: 5px 10px;
    font-family: var(--bon-font);
    font-size: var(--bon-input-size);
    border-radius: var(--bon-radius);
}

.bon-quickbooking input[type="text"], .bon-quickbooking input[type="number"], .bon-quickbooking input[type="email"], .bon-quickbooking select {
    color: var(--bon-input-color);
    background: var(--bon-input-bg);
    border: 1px solid var(--bon-border);
}

.bon-quickbooking input:focus, .bon-quickbooking select:focus {
    outline: none;
    border-color: var(--bon-border);
}

.bon-quickbooking select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2211%22 height=%227%22 viewBox=%220 0 11 7%22%3E%3Cpath d=%22M1 1l4.5 4L10 1%22 fill=%22none%22 stroke=%22%23323232%22 stroke-width=%221.5%22/%3E%3C/svg%3E');
    background-repeat: no-repeat;
    background-size: 11px;
    background-position: center right 11px;
    padding-right: 30px !important;
}

.bon-quickbooking .chck-in-out input {
    background-image: none;
    background-repeat: no-repeat;
    background-position: center right 11px;
    background-size: 14px;
    padding-right: 32px !important;
}

.bon-quickbooking .sub-btn-col { width: 15%; }
.bon-quickbooking .book-col-submit-wrap {
    width: 100%;
    height: 68px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bon-quickbooking input.book-col-submit {
    width: 100%;
    height: 100%;
    padding: 0 !important;
    font-family: var(--bon-btn-font);
    font-size: var(--bon-btn-size);
    font-weight: 900;
    color: var(--bon-btn-color);
    background: var(--bon-btn-bg);
    border: none;
    border-radius: var(--bon-radius) !important;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: 6px 4px 12px 2px rgba(0,0,0,.33);
    transition: transform .2s ease;
}

.bon-quickbooking input.book-col-submit:hover { transform: scale(1.05); }

.bon-quickbooking .ui-datepicker-calendar { background: #fff; }
.bon-quickbooking .ui-datepicker { font-size: 14px; font-weight: 500; }
.bon-quickbooking .ui-widget { font-family: var(--bon-font) !important; }

@media (max-width: 1024px) {
    .bon-quickbooking .book-col-form { width: calc(100% - 30px); }
    .bon-quickbooking .chck-in-out { width: 18%; }
    .bon-quickbooking .adlt-child { width: 13%; }
    .bon-quickbooking .sub-btn-col { width: 20%; }
}

@media (max-width: 767px) {
    .bon-quickbooking .book-col-form {
        position: relative;
        display: block;
        width: 100%;
        max-width: 100%;
        height: auto;
        left: 0;
        right: 0;
        bottom: auto;
        padding: var(--bon-mobile-padding);
        background: var(--bon-wrap-bg);
        overflow: visible;
        z-index: 9999;
    }
    .bon-quickbooking .book-col-column,
    .bon-quickbooking .chck-in-out,
    .bon-quickbooking .adlt-child,
    .bon-quickbooking .sub-btn-col {
        width: 100%;
        margin: 0 0 15px;
        padding: 0;
        box-shadow: none !important;
    }
    .bon-quickbooking input,
    .bon-quickbooking select { height: 40px; }
    .bon-quickbooking .book-col-submit-wrap { height: 50px; margin-top: 30px; }
    .bon-quickbooking input.book-col-submit { line-height: normal; }
}

/* ==================================================
   BOOK ONLINENOW - JQUERY UI DATEPICKER
   Calendar style matching the requested design
   ================================================== */

#ui-datepicker-div.bon-datepicker-open {
    display: block !important;
    visibility: visible !important;
}

#ui-datepicker-div {
    position: fixed !important;
    display: none;
    margin: 0 !important;
    float: none !important;
    width: 430px !important;
    max-width: calc(100vw - 16px) !important;
    padding: 6px !important;
    background: #ffffff !important;
    border: 1px solid #bdbdbd !important;
    border-radius: 4px !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18) !important;
    box-sizing: border-box !important;
    z-index: 999999 !important;
    visibility: hidden;
}

#ui-datepicker-div.bon-datepicker-open {
    display: block !important;
    visibility: visible !important;
}

#ui-datepicker-div, #ui-datepicker-div * {
    box-sizing: border-box !important;
}

#ui-datepicker-div .ui-datepicker-header {
    position: relative !important;
    height: 52px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: linear-gradient(#eeeeee, #d1d1d1) !important;
    border: 1px solid #b8b8b8 !important;
    border-radius: 3px !important;
    color: #222222 !important;
}

#ui-datepicker-div .ui-datepicker-title {
    margin: 0 !important;
    padding: 0 !important;
    font-family: Arial, sans-serif !important;
    font-size: 22px !important;
    line-height: 1 !important;
    font-weight: 700 !important;
    color: #222222 !important;
}

#ui-datepicker-div .ui-datepicker-prev, #ui-datepicker-div .ui-datepicker-next {
    top: 50% !important;
    position: absolute !important;
    display: block !important;
    width: 22px !important;
    height: 22px !important;
    margin-top: -11px !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: #222222 !important;
    cursor: pointer !important;
    opacity: 1 !important;
}

#ui-datepicker-div .ui-datepicker-prev { left: 8px !important; }
#ui-datepicker-div .ui-datepicker-next { right: 8px !important; }

#ui-datepicker-div .ui-datepicker-prev:hover, #ui-datepicker-div .ui-datepicker-next:hover {
    background: #000000 !important;
}

#ui-datepicker-div .ui-datepicker-prev span, #ui-datepicker-div .ui-datepicker-next span {
    display: none !important;
}

#ui-datepicker-div .ui-datepicker-prev::after {
    content: '\2039' !important;
    display: block !important;
    color: #ffffff !important;
    font-family: Arial, sans-serif !important;
    font-size: 20px !important;
    line-height: 20px !important;
    text-align: center !important;
}

#ui-datepicker-div .ui-datepicker-next::after {
    content: '\203A' !important;
    display: block !important;
    color: #ffffff !important;
    font-family: Arial, sans-serif !important;
    font-size: 20px !important;
    line-height: 20px !important;
    text-align: center !important;
}

#ui-datepicker-div .ui-datepicker-calendar {
    width: 100% !important;
    margin: 5px 0 0 !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    background: #ffffff !important;
}

#ui-datepicker-div .ui-datepicker-calendar thead th {
    height: 40px !important;
    padding: 0 !important;
    background: #ffffff !important;
    border: 0 !important;
    color: #222222 !important;
    font-family: Arial, sans-serif !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    text-align: center !important;
}

#ui-datepicker-div .ui-datepicker-calendar tbody td {
    height: 40px !important;
    padding: 0 !important;
    background: #eeeeee !important;
    border: 1px solid #d6d6d6 !important;
    vertical-align: middle !important;
}

#ui-datepicker-div .ui-datepicker-calendar tbody td a, #ui-datepicker-div .ui-datepicker-calendar tbody td span {
    display: flex !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 38px !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: #eeeeee !important;
    color: #555555 !important;
    font-family: Arial, sans-serif !important;
    font-size: 17px !important;
    font-weight: 400 !important;
    text-decoration: none !important;
}

#ui-datepicker-div .ui-datepicker-calendar tbody td a:hover {
    background: #dddddd !important;
    color: #222222 !important;
}

#ui-datepicker-div .ui-datepicker-calendar tbody td.ui-datepicker-today a, #ui-datepicker-div .ui-datepicker-calendar tbody td .ui-state-highlight {
    background: #fffde6 !important;
    color: #222222 !important;
    outline: 1px solid #f0df83 !important;
    outline-offset: -1px !important;
}

#ui-datepicker-div .ui-datepicker-calendar tbody td .ui-state-active {
    background: #ffffff !important;
    color: #111111 !important;
    outline: 1px solid #333333 !important;
    outline-offset: -1px !important;
    font-weight: 500 !important;
}

#ui-datepicker-div .ui-datepicker-calendar tbody td.ui-state-disabled, #ui-datepicker-div .ui-datepicker-calendar tbody td.ui-datepicker-unselectable {
    background: #f7f7f7 !important;
}

#ui-datepicker-div .ui-datepicker-calendar tbody td.ui-state-disabled span, #ui-datepicker-div .ui-datepicker-calendar tbody td.ui-datepicker-unselectable span {
    background: #f7f7f7 !important;
    color: #c5c5c5 !important;
}

#ui-datepicker-div .ui-datepicker-calendar tbody tr:first-child td {
    border-top-color: #d6d6d6 !important;
}

#ui-datepicker-div .ui-datepicker-calendar tbody td:first-child {
    border-left-color: #d6d6d6 !important;
}

@media (max-width: 1024px) {
    #ui-datepicker-div {
        width: min(430px, calc(100vw - 16px)) !important;
        max-width: calc(100vw - 16px) !important;
        padding: 5px !important;
        max-height: calc(100vh - 16px) !important;
        overflow: auto !important;
    }
}

@media (max-width: 767px) {
    #ui-datepicker-div .ui-datepicker-header {
        height: 48px !important;
    }
    #ui-datepicker-div .ui-datepicker-title {
        font-size: 19px !important;
    }
    #ui-datepicker-div .ui-datepicker-prev {
        left: 10px !important;
    }
    #ui-datepicker-div .ui-datepicker-next {
        right: 10px !important;
    }
    #ui-datepicker-div .ui-datepicker-calendar thead th {
        height: 34px !important;
        font-size: 14px !important;
    }
    #ui-datepicker-div .ui-datepicker-calendar tbody td {
        height: 38px !important;
    }
    #ui-datepicker-div .ui-datepicker-calendar tbody td a,
    #ui-datepicker-div .ui-datepicker-calendar tbody td span {
        min-height: 36px !important;
        font-size: 14px !important;
    }
}
/* v1.3.9 - mobile/homepage popup safety */
.bon-quickbooking .bon-date {
    cursor: pointer !important;
    -webkit-user-select: none !important;
    user-select: none !important;
    touch-action: manipulation;
}

#ui-datepicker-div {
    pointer-events: auto !important;
}