/****************************
 * Header slider
*****************************/
/* slide */
.site-banner__slider-inner,
.site-banner__slider-image {width:100%; height:clamp(160px, 42vw, 72vh);}

/* Booking form */
.site-banner__booking {
    bottom:var(--vii-spacing-30); left:var(--vii-gap-container); width:calc(100% - var(--vii-gap-container) * 2);
    padding:0 20px;
}
.site-banner__booking-inner {min-height:90px; max-width:1020px; margin-left:auto; margin-right:auto;}

/* panel */
.site-banner__panel {bottom:calc(100% + 10px); width:100%; min-width:300px; max-width:330px; transition:var(--vii-transition);}
.site-banner__panel--inner {padding:20px;}
.site-banner__panel:before {
    content:""; position:absolute; top:100%; left:20px; width:0; height:0;
    border-top:10px solid var(--vii-color-white);
    border-left:10px solid transparent;
    border-right:10px solid transparent;
}

/* not show */
.site-banner__col:not(.show) .site-banner__panel {opacity:0; visibility:hidden; pointer-events:none;}

/* col */
.site-banner__col {padding:20px; position:relative;}
.site-banner__col:not(.button) {cursor:pointer;}

/* dashed line */
.site-banner__col:before {
    content:""; position:absolute; top:20px; left:0; width:100%; height:calc(100% - 40px);
    pointer-events:none;
}

/* row */
.site-banner__panel--row:not(:last-child) {margin-bottom:var(--vii-spacing-20);}
.site-banner__panel--row.adults {padding-top:var(--vii-spacing-20); border-top:1px solid var(--vii-color-green);}

/* button */
.site-banner__panel--inner button {background:transparent; font-size:12px;}

/* button close */
.site-banner__panel--inner button.close:hover,
.site-banner__panel--inner button.close:focus {color:var(--vii-color-dark-green)}

/* quantity button */
.site-banner__panel .quantity-button {border:1px solid var(--vii-color-green); width:120px;}
.site-banner__panel .quantity-button input {
    width:100%; font-size:14px; font-family:var(--vii-font-primary);
    padding:5px 10px; text-align:center;
}
.site-banner__panel .quantity-button button {
    width:35px; min-width:35px; height:35px;
    background:var(--vii-color-green); color:var(--vii-color-white);
}
/* hover */
.site-banner__panel .quantity-button button:hover {background:var(--vii-color-dark-green);}

/* disabled */
.site-banner__panel .quantity-button button:disabled {opacity:0.6; pointer-events:none;}


/* Remove arrows/spinners */
/* Chrome, Safari, Edge, Opera */
.site-banner__panel input::-webkit-outer-spin-button,
.site-banner__panel input::-webkit-inner-spin-button {-webkit-appearance:none; margin:0;}

/* Firefox */
.site-banner__panel input[type=number] {-moz-appearance:textfield;}

/* chevron icon */
.site-banner__col span.icon {font-size:12px; font-weight:400; display:inline-block; transition:var(--vii-transition);}
.site-banner__col.show span.icon {transform:rotate(180deg) translateY(2px);}

/* Avoid layout shift */
.site-banner__slider-inner:not(.flickity-enabled) .site-banner__slider-image {height:clamp(400px, 42vw, 610px);}
.site-banner__slider-inner:not(.flickity-enabled) .site-banner__slider-image:not(:first-child) {display:none;}

/* image zoom-in effect */
.site-banner__slider-image img {transition:transform 10s ease;}
.site-banner__slider-image:not(.is-selected) img {transform:scale(1.1);}

/****************************
 * Header slider - Responsive
*****************************/
@media only screen and (max-width:1024px) and (min-width:769px) {
    .site-banner__booking {padding:0;}
}
@media only screen and (min-width:769px) {
    .site-banner__booking-inner {background:#fff;}

    /* dashed line */
    .site-banner__col[data-datepicker]:before {border-left:1px dashed var(--vii-color-dark-gray);}
}
@media only screen and (max-width:768px) {
    /* banner */
    .site-banner.header-slider-layout {padding-bottom:0;}

    /* site banner booking */
    .site-banner__booking {
        position:initial; width:calc(100% + var(--vii-gap-container) * 2); padding:0;
        margin-left:calc(-1 * var(--vii-gap-container)); margin-right:calc(-1 * var(--vii-gap-container));
    }
    .site-banner__booking-inner {
        flex-wrap:wrap; padding:var(--vii-gap-container); position:relative;
    }
    .site-banner__booking-inner:before {
        content:""; position:absolute; top:var(--vii-gap-container); left:var(--vii-gap-container);
        width:calc(100% - var(--vii-gap-container) * 2); height:calc(100% - var(--vii-gap-container) * 2);
        box-shadow:0 -6px 34px rgb(0 0 0 / 10%), 0 64px 128px -156px rgb(0 0 0 / 20%);
    }

    /* slider */
    .site-banner__slider-inner .flickity-button {--flkt-position:4px;}
    .site-banner__slider-inner {
        width:calc(100% + var(--vii-gap-container) * 2);
        margin-left:calc(-1 * var(--vii-gap-container)); margin-right:calc(-1 * var(--vii-gap-container));
    }

    /* slide */
    .site-banner__slider-inner,
    .site-banner__slider-image {aspect-ratio:1346/610;}

    /* site banner col */
    .site-banner__col {width:100%; padding:20px;}

    /* datepicker */
    .site-banner__col[data-datepicker] {width:50%;}

    /* site banner button */
    .site-banner__col.button button {width:100%; min-height:46px;}


    /* hidden booking form on mobile and adjust height of slider inner */
    .site-banner__slider-inner,
    .site-banner__slider-image {height:clamp(200px, 40vh, 72vh);}

    .site-banner__booking {display:none;}
}
@media only screen and (min-width:601px) and (max-width:768px) {
    /* dashed line */
    .site-banner__col[data-datepicker="check-out"]:before {
        top:0; left:0; width:100%; height:100%;
        border-left:1px dashed var(--vii-color-dark-gray);
    }

    .site-banner__col:not([data-datepicker]):not(.button):before {
        top:0; left:20px; width:calc(100% - 40px); height:100%;
        border-top:1px dashed var(--vii-color-dark-gray); z-index:2;
    }
    .site-banner__col:not([data-datepicker]):first-child:before {border-bottom:1px dashed var(--vii-color-dark-gray); border-top:unset;}
}
@media only screen and (max-width:600px) {
    .site-banner__col[data-datepicker] {width:100%;}

    /* dashed */
    .site-banner__col:not(:first-child):not(.button):before {
        top:0; left:20px; width:calc(100% - 40px); height:100%;
        border-top:1px dashed var(--vii-color-dark-gray); z-index:2;
    }
    .site-banner__col.button {padding-top:0;}
}

/****************************
 * Custom datepicker
*****************************/
/* container */
.qs-datepicker-container {
    transition:var(--vii-transition); width:100%; max-width:328px; border-radius:0;
    font-family:var(--vii-font-primary);
}

/* year */
.qs-overlay .qs-overlay-year::-webkit-input-placeholder {color:rgba(255, 255, 255, 0.6);}

/* heading */
.qs-controls {min-height:30px; display:flex; align-items:center; background:#eee;}
.qs-day {font-size:15px;}
.qs-month-year {font-weight:400;}

/* current */
.qs-square {width:calc(100% / 7); height:33px; border-radius:0;}
.qs-current {text-decoration:unset; font-weight:400;}

/* range + active */
.qs-active, .qs-range-end, .qs-range-start {background:var(--vii-color-green); color:white;}

/* hover */
.qs-square:not(.qs-empty):not(.qs-disabled):not(.qs-day).qs-current:hover {
    background:#eee; color:gray;
}
.qs-square:not(.qs-empty):not(.qs-disabled):not(.qs-day):not(.qs-active):hover {
    background:var(--vii-color-green); color:white;
}

/* hidden */
.qs-hidden {opacity:0; visibility:hidden; pointer-events:none; display:block;}

/* arrow */
.qs-arrow:hover {background:var(--vii-color-primary);}
.qs-arrow.qs-left:hover:after {border-right-color:white;}
.qs-arrow.qs-right:hover:after {border-left-color:white;}

@media only screen and (max-width:768px) and (min-width:601px) {
    /* container */
    .qs-datepicker-container {max-width:285px;}
}