/*
|--------------------------------------------------------------------------
| FVH Resort Search Bar
|--------------------------------------------------------------------------
| Stable Production Stylesheet
|--------------------------------------------------------------------------
*/


/* ==========================================================================
   RESET
   ========================================================================== */

.fvh-resort-search-bar,
.fvh-resort-search-bar *,
.fvh-resort-search-bar *::before,
.fvh-resort-search-bar *::after {
    box-sizing: border-box;
}

.fvh-resort-search-bar.is-loading {
    opacity: 0;
    visibility: hidden;
}

.fvh-resort-search-bar.is-ready {
    opacity: 1;
    visibility: visible;
    transition: opacity .18s ease;
}


/* ==========================================================================
   ROOT
   ========================================================================== */

.fvh-resort-search-bar {
    --fvh-rsb-blue: #437ff1;
    --fvh-rsb-black: #000;
    --fvh-rsb-white: #fff;
    --fvh-rsb-muted: #777;
    --fvh-rsb-border: rgba(0,0,0,.08);

    --fvh-rsb-outline-text-color: #fff;
    --fvh-rsb-outline-bg-color: #437ff1;
    --fvh-rsb-outline-border-color: #ffffff;

    position: relative;
    z-index: 20;

    width: 100%;
    max-width: 100%;
    min-width: 0;

    margin-inline: auto;

    font-family: inherit;
}


/* ==========================================================================
   PANEL
   ========================================================================== */

.fvh-rsb-panel {
    display: grid;

    grid-template-columns:
        minmax(0, 1.15fr)
        minmax(0, 1.15fr)
        minmax(0, .9fr)
        96px;

    align-items: stretch;

    width: 100%;
    max-width: 100%;

    min-height: 96px;

    padding: 8px;

    background: #fff;

    border-radius: 22px;

    box-shadow:
        0 12px 32px rgba(0,0,0,.14);

    overflow: visible;
}


/* ==========================================================================
   FIELDS
   ========================================================================== */

.fvh-rsb-field {
    display: flex;
    align-items: center;

    width: 100%;
    min-width: 0;

    min-height: 80px;

    padding: 0 34px;

    border: 0 !important;

    background: transparent !important;

    color: #111 !important;

    text-align: left;

    cursor: pointer;

    box-shadow: none !important;

    outline: none !important;
}

.fvh-rsb-value {
    min-width: 0;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

    color: #111;

    /*font-size: clamp(22px, 1.7vw, 30px);*/
    font-size: clamp(18px, 1.2vw, 22px);
    font-weight: 400;
    letter-spacing: 0.01em;
    line-height: 1.2;
}


/* ==========================================================================
   DATE BUTTONS
   ========================================================================== */

.fvh-rsb-date-field {
    gap: 18px;

    border-radius: 16px;

    transition:
        background .18s ease,
        color .18s ease;
}

.fvh-rsb-date-field:hover,
.fvh-rsb-date-field:focus,
.fvh-rsb-date-field:focus-visible,
.fvh-rsb-date-field:active,
.fvh-rsb-date-field[aria-expanded="true"] {
    background: #f4f4f4 !important;

    color: #111 !important;

    outline: none !important;

    box-shadow: none !important;
}

.fvh-rsb-date-field:hover *,
.fvh-rsb-date-field:focus *,
.fvh-rsb-date-field:active * {
    color: #111 !important;
}


/* ==========================================================================
   CALENDAR ICON
   ========================================================================== */

.fvh-rsb-calendar-icon {
    width: 30px;
    height: 30px;

    flex: 0 0 30px;

    display: inline-block;

    margin-left: 10px;

    background-color: currentColor;

    -webkit-mask:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7 2a1 1 0 0 1 1 1v1h8V3a1 1 0 1 1 2 0v1h1.5A2.5 2.5 0 0 1 22 6.5v13A2.5 2.5 0 0 1 19.5 22h-15A2.5 2.5 0 0 1 2 19.5v-13A2.5 2.5 0 0 1 4.5 4H6V3a1 1 0 0 1 1-1Zm13 8H4v9.5c0 .28.22.5.5.5h15a.5.5 0 0 0 .5-.5V10ZM8.5 13.5a1 1 0 0 1 1.42 0L11 14.59l3.09-3.09a1 1 0 1 1 1.41 1.41l-3.79 3.8a1 1 0 0 1-1.42 0L8.5 14.91a1 1 0 0 1 0-1.41Z'/%3E%3C/svg%3E")
        center / contain no-repeat;

    mask:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7 2a1 1 0 0 1 1 1v1h8V3a1 1 0 1 1 2 0v1h1.5A2.5 2.5 0 0 1 22 6.5v13A2.5 2.5 0 0 1 19.5 22h-15A2.5 2.5 0 0 1 2 19.5v-13A2.5 2.5 0 0 1 4.5 4H6V3a1 1 0 0 1 1-1Zm13 8H4v9.5c0 .28.22.5.5.5h15a.5.5 0 0 0 .5-.5V10ZM8.5 13.5a1 1 0 0 1 1.42 0L11 14.59l3.09-3.09a1 1 0 1 1 1.41 1.41l-3.79 3.8a1 1 0 0 1-1.42 0L8.5 14.91a1 1 0 0 1 0-1.41Z'/%3E%3C/svg%3E")
        center / contain no-repeat;
}


/* ==========================================================================
   GUESTS
   ========================================================================== */

.fvh-rsb-guests-field {
    position: relative;

    min-width: 0;
}

.fvh-rsb-guests-button {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 20px;

    width: 100%;

    min-height: 80px;

    padding: 0 34px;

    border: 0 !important;

    border-radius: 16px;

    background: transparent !important;

    cursor: pointer;

    transition: background .18s ease;

    box-shadow: none !important;

    outline: none !important;
}

.fvh-rsb-guests-button:hover,
.fvh-rsb-guests-button[aria-expanded="true"] {
    background: #f4f4f4 !important;
}

.fvh-rsb-guests-label {
    min-width: 0;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

    color: #111;

    /*font-size: clamp(22px, 1.7vw, 30px);

    line-height: 1;
    */
    font-size: clamp(18px, 1.2vw, 22px);
    font-weight: 400;
    letter-spacing: 0.01em;
    line-height: 1.2;
}


/* ==========================================================================
   GUESTS ARROWS
   ========================================================================== */

.fvh-rsb-guests-arrows {
    position: relative;

    width: 16px;
    height: 20px;

    flex: 0 0 16px;

    opacity: .65;
}

.fvh-rsb-guests-arrows::before,
.fvh-rsb-guests-arrows::after {
    content: "";

    position: absolute;

    left: 50%;

    width: 8px;
    height: 8px;

    border-right: 2px solid #c9c9c9;
    border-bottom: 2px solid #c9c9c9;

    transform-origin: center;
}

.fvh-rsb-guests-arrows::before {
    top: 1px;

    transform:
        translateX(-50%)
        rotate(-135deg);
}

.fvh-rsb-guests-arrows::after {
    bottom: 1px;

    transform:
        translateX(-50%)
        rotate(45deg);
}


/* ==========================================================================
   GUESTS DROPDOWN
   ========================================================================== */

.fvh-rsb-guests-dropdown {
    position: absolute;

    top: calc(100% + 18px);

    left: 50%;

    z-index: 999999;

    width: 210px;

    max-height: 420px;

    overflow-y: auto;

    padding: 18px;

    border: 1px solid rgba(229,231,235,.95);

    border-radius: 18px;

    background: #fff;

    box-shadow:
        0 24px 70px rgba(15,23,42,.18);

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transform:
        translate(-50%, 8px);

    transition:
        opacity .14s ease,
        transform .14s ease,
        visibility .14s ease;
}

.fvh-rsb-guests-dropdown.is-open {
    opacity: 1;

    visibility: visible;

    pointer-events: auto;

    transform:
        translate(-50%, 0);
}

.fvh-rsb-guests-dropdown::before {
    content: "";

    position: absolute;

    top: -9px;
    left: 50%;

    width: 18px;
    height: 18px;

    background: #fff;

    border-top:
        1px solid rgba(229,231,235,.95);

    border-left:
        1px solid rgba(229,231,235,.95);

    transform:
        translateX(-50%)
        rotate(45deg);
}

.fvh-rsb-guests-dropdown-title {
    padding-bottom: 14px;

    margin-bottom: 10px;

    border-bottom: 1px solid #e5e7eb;

    font-size: 20px;

    color: #111;
}

.fvh-rsb-guests-option {
    display: block;

    width: 100%;

    padding: 8px 10px;

    border: 0;

    border-radius: 10px;

    background: transparent;

    color: #111;

    font-size: 18px;

    text-align: left;

    cursor: pointer;
}

.fvh-rsb-guests-option:hover,
.fvh-rsb-guests-option.is-selected {
    background: #f4f4f4;
}


/* ==========================================================================
   SEARCH BUTTON
   ========================================================================== */

.fvh-rsb-search-button {
    display: flex;

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

    width: 88px;
    height: 80px;

    border: 0 !important;

    border-radius: 18px;

    background: #dca54a !important; /*var(--fvh-rsb-blue) !important;*/

    cursor: pointer;

    box-shadow: none !important;

    outline: none !important;

    transition:
        transform .16s ease,
        filter .16s ease;
}

.fvh-rsb-search-button:hover {
    transform: translateY(-1px);

    filter: brightness(.97);
}

.fvh-rsb-search-button span {
    display: block;

    width: 40px;
    height: 40px;

    background: #0f172a; /*#fff;*/

    -webkit-mask:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E")
        center / contain no-repeat;

    mask:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E")
        center / contain no-repeat;
}


/* ==========================================================================
   ACTION BUTTONS
   ========================================================================== */

.fvh-rsb-actions {
    display: flex;

    justify-content: center;

    gap: 24px;

    margin-top: 28px;

    flex-wrap: wrap;
}

.fvh-rsb-action {
    display: inline-flex;

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

    min-height: 50px;

    padding: 12px 34px;

    border-radius: 12px;

    text-decoration: none !important;

    font-size: clamp(18px, 1.4vw, 22px);

    font-weight: 600;
}

.fvh-rsb-action-outline {
    color:
        var(--fvh-rsb-outline-text-color);

    background:
        var(--fvh-rsb-outline-bg-color);

    border:
        3px solid
        var(--fvh-rsb-outline-border-color);
}


/* ==========================================================================
   CALENDAR OVERLAY
   ========================================================================== */

.fvh-rsb-datepicker-anchor {
    display: none !important;
}

.fvh-rsb-calendar-overlay {
    display: none;

    position: absolute;

    left: 0;

    top: calc(100% + 14px);

    width: min(96vw, 1240px);

    z-index: 999999;
}

.fvh-rsb-calendar-overlay.is-open {
    display: block;
}

.fvh-rsb-calendar-card {
    position: relative;

    width: 100%;

    padding: 36px 48px 34px;

    background: #fff !important;

    border-radius: 22px;

    box-shadow:
        0 18px 44px rgba(0,0,0,.16);
}

.fvh-rsb-calendar-card::before {
    content: "";

    position: absolute;

    top: -13px;

    left: var(--fvh-rsb-arrow-left, 64px);

    width: 28px;
    height: 28px;

    background: #fff;

    transform:
        translateX(-50%)
        rotate(45deg);
}


/* ==========================================================================
   CALENDAR NAVIGATION
   ========================================================================== */

.fvh-rsb-cal-nav {
    position: absolute;

    top: 32px;

    z-index: 5;

    width: 48px;
    height: 48px;

    border: 0 !important;

    border-radius: 12px !important;

    background: #f4f4f4 !important;

    color: #000 !important;

    font-size: 42px;

    line-height: 1;

    display: flex !important;

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

    cursor: pointer;

    box-shadow: none !important;

    outline: none !important;
}

.fvh-rsb-cal-nav:hover,
.fvh-rsb-cal-nav:focus,
.fvh-rsb-cal-nav:active {
    background: #ececec !important;

    color: #000 !important;
}

.fvh-rsb-cal-prev {
    left: 28px;
}

.fvh-rsb-cal-next {
    right: 28px;
}


/* ==========================================================================
   CALENDAR MONTHS
   ========================================================================== */

.fvh-rsb-cal-months {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0,1fr));

    column-gap: 64px;
}

.fvh-rsb-cal-title {
    margin-bottom: 28px;

    text-align: center;

    font-size: clamp(26px, 2vw, 36px);

    font-weight: 700;

    color: #000;
}


/* ==========================================================================
   CALENDAR DAYS
   ========================================================================== */

.fvh-rsb-cal-days,
.fvh-rsb-cal-grid {
    display: grid;

    grid-template-columns:
        repeat(7, minmax(0,1fr));
}

.fvh-rsb-cal-days span {
    display: flex;

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

    height: 34px;

    color: #565656;

    font-size: clamp(17px, 1.3vw, 23px);

    font-weight: 700;
}


/* ==========================================================================
   CALENDAR CELLS
   ========================================================================== */

.fvh-rsb-cal-cell {
    display: flex;

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

    width: 100%;
    height: 58px;

    border: 0 !important;

    background: transparent !important;

    color: #111 !important;

    font-size: clamp(18px, 1.5vw, 27px);

    cursor: pointer;

    border-radius: 0 !important;

    box-shadow: none !important;
}

.fvh-rsb-cal-cell:hover {
    background: #f5f5f5 !important;
}

.fvh-rsb-cal-cell.is-outside {
    color: #d8d8d8 !important;
}

.fvh-rsb-cal-cell.is-disabled {
    color: #e0e0e0 !important;

    cursor: not-allowed;
}

.fvh-rsb-cal-cell.is-in-range {
    background: #f1f1f1 !important;
}

.fvh-rsb-cal-cell.is-selected {
    background: #000 !important;

    color: #fff !important;

    border-radius: 14px !important;
}


/* ==========================================================================
   CLEAR DATES
   ========================================================================== */

.fvh-rsb-cal-clear {
    display: block;

    margin: 24px auto 0;

    border: 0 !important;

    background: transparent !important;

    color: #777 !important;

    font-size: clamp(18px, 1.45vw, 25px);

    font-weight: 700;

    cursor: pointer;
}

.fvh-rsb-search-button.is-loading {
    pointer-events: none;
    opacity: .75;
}

.fvh-rsb-search-button.is-loading span {
    animation: fvh-rsb-spin .8s linear infinite;
}

@keyframes fvh-rsb-spin {
    to {
        transform: rotate(360deg);
    }
}


/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 980px) {

    .fvh-rsb-panel {
        grid-template-columns: 1fr;

        padding: 10px;
    }

    .fvh-rsb-field,
    .fvh-rsb-guests-button {
        min-height: 62px;

        padding: 0 20px;
    }

    .fvh-rsb-search-button {
        width: 100%;

        height: 58px;

        margin-top: 8px;
    }

    .fvh-rsb-value,
    .fvh-rsb-guests-label {
        font-size: 20px;
    }

    .fvh-rsb-calendar-overlay {
        width: min(94vw, 460px);
    }

    .fvh-rsb-cal-months {
        grid-template-columns: 1fr;

        column-gap: 0;
    }
}