/*
|--------------------------------------------------------------------------
| Bali Indo Tour
| Homepage Hero Search
|--------------------------------------------------------------------------
*/


/*
|--------------------------------------------------------------------------
| Hero Search
|--------------------------------------------------------------------------
*/

.home-search {

    position: relative;

    display: flex;

    align-items: center;

    width: 100%;

    max-width: 820px;

    margin-bottom: var(--space-xl);

    padding: var(--space-sm);

    background: rgba(255, 255, 255, .97);

    border: var(--border-thin) solid rgba(255, 255, 255, .6);

    border-radius: var(--radius-pill);

    box-shadow: var(--shadow-lg);

    overflow: visible;

    isolation: isolate;

    z-index: 999999;

}


/*
|--------------------------------------------------------------------------
| Search Icon
|--------------------------------------------------------------------------
*/

.home-search-icon {

    width: 50px;

    height: 50px;

    flex: 0 0 50px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: var(--primary);

    font-size: var(--font-lg);

}


/*
|--------------------------------------------------------------------------
| Search Field
|--------------------------------------------------------------------------
*/

.home-search-field {

    min-width: 0;

    flex: 1;

    padding: 0 var(--space-md);

}


.home-search-field label,
.home-search-category label {

    display: block;

    margin-bottom: 2px;

    color: var(--text-muted);

    font-size: var(--font-xs);

    font-weight: var(--fw-semibold);

}


.home-search-field input {

    display: block;

    width: 100%;

    padding: 0;

    color: var(--text);

    background: transparent;

    border: 0;

    outline: 0;

    font-size: var(--font-sm);

}


.home-search-field input::placeholder {

    color: var(--text-muted);

}


/*
|--------------------------------------------------------------------------
| Search Category
|--------------------------------------------------------------------------
*/

.home-search-category {

    min-width: 170px;

    padding: 0 var(--space-xl);

    border-left: var(--border-thin) solid var(--border);

}


.home-search-category select {

    width: 100%;

    padding: 0;

    color: var(--text);

    background: transparent;

    border: 0;

    outline: 0;

    font-size: var(--font-sm);

    font-weight: var(--fw-semibold);

    cursor: pointer;

}


/*
|--------------------------------------------------------------------------
| Search Button
|--------------------------------------------------------------------------
*/

.home-search-button {

    min-height: 50px;

    padding: 0 1.6rem;

    color: var(--white);

    background: var(--primary);

    border: 0;

    border-radius: var(--radius-pill);

    font-size: var(--font-sm);

    font-weight: var(--fw-bold);

    transition: var(--transition);

}


.home-search-button:hover {

    background: var(--primary-dark);

}


/*
|--------------------------------------------------------------------------
| Search Suggestions
|--------------------------------------------------------------------------
*/

.home-search-suggestions {

    position: absolute;

    top: calc(100% + .65rem);

    left: 0;

    right: 0;

    width: 100%;

    max-height: min(420px,
            calc(100vh - 170px));

    overflow-x: hidden;

    overflow-y: auto;

    overscroll-behavior: contain;

    -webkit-overflow-scrolling: touch;

    padding: .5rem;

    color: var(--text);

    background: var(--surface);

    border: 1px solid var(--border);

    border-radius: var(--radius-lg);

    box-shadow: var(--shadow-lg);

    z-index: 2147483647;

}


/*
|--------------------------------------------------------------------------
| Hidden
|--------------------------------------------------------------------------
*/

.home-search-suggestions[hidden] {

    display: none !important;

}


/*
|--------------------------------------------------------------------------
| Suggestions Scrollbar
|--------------------------------------------------------------------------
*/

.home-search-suggestions {

    scrollbar-width: thin;

    scrollbar-color:
        var(--border-dark) transparent;

}


.home-search-suggestions::-webkit-scrollbar {

    width: 6px;

}


.home-search-suggestions::-webkit-scrollbar-track {

    background: transparent;

}


.home-search-suggestions::-webkit-scrollbar-thumb {

    background: var(--border-dark);

    border-radius: var(--radius-pill);

}


.home-search-suggestions::-webkit-scrollbar-thumb:hover {

    background: var(--text-muted);

}


/*
|--------------------------------------------------------------------------
| Individual Suggestion
|--------------------------------------------------------------------------
*/

.home-search-suggestion {

    position: relative;

    display: flex;

    align-items: center;

    width: 100%;

    min-height: 58px;

    padding: .75rem .85rem;

    color: var(--text);

    background: transparent;

    border-radius: var(--radius-md);

    text-decoration: none;

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

}


.home-search-suggestion:hover,
.home-search-suggestion.is-active {

    color: var(--text);

    background: var(--surface-secondary);

}


/*
|--------------------------------------------------------------------------
| Suggestion Image
|--------------------------------------------------------------------------
*/

.home-search-suggestion-image {

    width: 52px;

    height: 52px;

    flex: 0 0 52px;

    display: block;

    overflow: hidden;

    margin-right: .8rem;

    background: var(--surface-secondary);

    border-radius: var(--radius-md);

}


.home-search-suggestion-image img {

    display: block;

    width: 100%;

    height: 100%;

    object-fit: cover;

}


/*
|--------------------------------------------------------------------------
| Suggestion Content
|--------------------------------------------------------------------------
*/

.home-search-suggestion-content {

    min-width: 0;

    flex: 1;

    display: flex;

    flex-direction: column;

}


.home-search-suggestion-title {

    display: block;

    overflow: hidden;

    color: var(--text);

    font-size: var(--font-sm);

    font-weight: var(--fw-semibold);

    line-height: var(--lh-sm);

    text-overflow: ellipsis;

    white-space: nowrap;

}


.home-search-suggestion-title mark {

    padding: 0;

    color: var(--primary);

    background: transparent;

    font-weight: var(--fw-bold);

}


.home-search-suggestion-type {

    display: block;

    margin-top: .2rem;

    color: var(--text-muted);

    font-size: var(--font-xs);

    line-height: var(--lh-sm);

}


.home-search-suggestion-summary {

    display: -webkit-box;

    margin-top: .25rem;

    overflow: hidden;

    color: var(--text-light);

    font-size: var(--font-xs);

    line-height: 1.4;

    -webkit-box-orient: vertical;

    -webkit-line-clamp: 1;

}


/*
|--------------------------------------------------------------------------
| Suggestion Arrow
|--------------------------------------------------------------------------
*/

.home-search-suggestion>i {

    flex: 0 0 auto;

    margin-left: .75rem;

    color: var(--text-muted);

    font-size: .75rem;

    transition:
        color .18s ease,
        transform .18s ease;

}


.home-search-suggestion:hover>i,
.home-search-suggestion.is-active>i {

    color: var(--primary);

    transform: translateX(3px);

}


/*
|--------------------------------------------------------------------------
| Loading
|--------------------------------------------------------------------------
*/

.home-search-suggestion-loading {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: .65rem;

    min-height: 70px;

    padding: 1rem;

    color: var(--text-muted);

    font-size: var(--font-sm);

}


/*
|--------------------------------------------------------------------------
| Loading Spinner
|--------------------------------------------------------------------------
*/

.home-search-suggestion-spinner {

    width: 18px;

    height: 18px;

    flex: 0 0 18px;

    display: block;

    border: 2px solid var(--border);

    border-top-color: var(--primary);

    border-radius: 50%;

    animation:
        home-search-spin .7s linear infinite;

}


@keyframes home-search-spin {

    to {

        transform: rotate(360deg);

    }

}


/*
|--------------------------------------------------------------------------
| Empty / Error
|--------------------------------------------------------------------------
*/

.home-search-suggestion-empty {

    display: flex;

    align-items: center;

    gap: .75rem;

    min-height: 70px;

    padding: 1rem;

    color: var(--text-muted);

}


.home-search-suggestion-empty-icon {

    width: 38px;

    height: 38px;

    flex: 0 0 38px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: var(--primary);

    background: var(--primary-light);

    border-radius: 50%;

}


.home-search-suggestion-empty>div {

    min-width: 0;

    display: flex;

    flex-direction: column;

    gap: .15rem;

}


.home-search-suggestion-empty strong {

    color: var(--text);

    font-size: var(--font-sm);

}


.home-search-suggestion-empty span {

    color: var(--text-muted);

    font-size: var(--font-xs);

}


/*
|--------------------------------------------------------------------------
| Hero Search Layer
|--------------------------------------------------------------------------
*/

.home-hero {

    position: relative;

    z-index: 1;

    overflow: visible;

}


.home-hero-content {

    position: relative;

    z-index: 1000;

    overflow: visible;

}


.home-hero .container {

    position: relative;

    z-index: 1000;

    overflow: visible;

}


/*
|--------------------------------------------------------------------------
| Hero Actions
|--------------------------------------------------------------------------
*/

.home-hero-actions {

    display: flex;

    flex-wrap: wrap;

    gap: var(--space-md);

}


.home-hero-actions .btn {

    min-height: 48px;

    padding: .75rem 1.5rem;

    border-radius: var(--radius-pill);

    font-size: var(--font-sm);

    font-weight: var(--fw-semibold);

}


.home-hero-actions .btn-primary {

    color: var(--white);

    background: var(--primary);

    border-color: var(--primary);

}


.home-hero-actions .btn-primary:hover {

    background: var(--primary-dark);

    border-color: var(--primary-dark);

}


.home-hero-actions .btn-outline-light {

    border-width: var(--border-thin);

}


/*
|--------------------------------------------------------------------------
| Mobile
|--------------------------------------------------------------------------
*/

@media (max-width: 767.98px) {

    /*
    |--------------------------------------------------------------------------
    | Hero
    |--------------------------------------------------------------------------
    */

    .home-hero {

        min-height: 720px;

        color: var(--white);

        overflow: visible;

        z-index: 1;

        background:
            linear-gradient(90deg,
                rgba(15, 23, 42, .82) 0%,
                rgba(15, 23, 42, .68) 35%,
                rgba(15, 23, 42, .32) 65%,
                rgba(15, 23, 42, .08) 100%),
            url("../../img/home/hero.webp") center center / cover no-repeat;

    }


    /*
    |--------------------------------------------------------------------------
    | Hero Content
    |--------------------------------------------------------------------------
    */

    .home-hero-content {

        position: relative;

        z-index: 1000;

        padding-top: 7rem;

        padding-bottom: 4rem;

        overflow: visible;

    }


    .home-hero .container {

        position: relative;

        z-index: 1000;

        overflow: visible;

    }


    /*
    |--------------------------------------------------------------------------
    | Hero Heading
    |--------------------------------------------------------------------------
    */

    .home-hero h1 {

        margin-bottom: var(--space-lg);

        font-size: clamp(2.5rem,
                11vw,
                3.5rem);

        line-height: 1.04;

    }


    /*
    |--------------------------------------------------------------------------
    | Hero Description
    |--------------------------------------------------------------------------
    */

    .home-hero p {

        margin-bottom: var(--space-xl);

        font-size: var(--font-base);

        line-height: var(--lh-md);

    }


    /*
    |--------------------------------------------------------------------------
    | Search
    |--------------------------------------------------------------------------
    */

    .home-search {

        position: relative;

        display: flex;

        align-items: center;

        gap: var(--space-sm);

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

        min-width: 0;
        margin-bottom: var(--space-lg);

        padding: .45rem;

        border-radius: var(--radius-lg);

        overflow: visible;

        isolation: isolate;

        z-index: 999999;

    }


    /*
    |--------------------------------------------------------------------------
    | Search Icon
    |--------------------------------------------------------------------------
    */

    .home-search-icon {

        width: 42px;

        height: 42px;

        flex: 0 0 42px;

        font-size: var(--font-md);

    }


    /*
    |--------------------------------------------------------------------------
    | Search Field
    |--------------------------------------------------------------------------
    */

    .home-search-field {

        min-width: 0;

        flex: 1;

        padding: 0;

    }


    .home-search-field label {

        margin-bottom: 1px;

        font-size: .6875rem;

    }


    .home-search-field input {

        width: 100%;

        font-size: var(--font-xs);

    }


    /*
    |--------------------------------------------------------------------------
    | Search Category
    |--------------------------------------------------------------------------
    */

    .home-search-category {

        display: none;

    }


    /*
    |--------------------------------------------------------------------------
    | Search Button
    |--------------------------------------------------------------------------
    */

    .home-search-button {

        width: 34px;

        height: 34px;

        min-height: 34px;

        flex: 0 0 34px;

        display: flex;

        align-items: center;

        justify-content: center;

        padding: 0;

        border-radius: 50%;

        font-size: 0;

    }


    .home-search-button::after {

        content: "\f061";

        font-family:
            "Font Awesome 7 Free";

        font-weight: 900;

        font-size: var(--font-sm);

    }


    /*
    |--------------------------------------------------------------------------
    | Search Suggestions
    |--------------------------------------------------------------------------
    */

    /*
|--------------------------------------------------------------------------
| Mobile Search Suggestions
|--------------------------------------------------------------------------
*/

    .home-search-suggestions {

        position: absolute;

        top: calc(100% + .5rem);

        left: 50%;

        right: auto;

        width: calc(100vw - 2rem);

        max-width: calc(100vw - 2rem);

        max-height: min(420px,
                calc(100vh - 150px));

        transform: translateX(-50%);

        overflow-x: hidden;

        overflow-y: auto;

        overscroll-behavior: contain;

        -webkit-overflow-scrolling: touch;

        box-sizing: border-box;

        padding: .4rem;

        color: var(--text);

        background: var(--surface);

        border: 1px solid var(--border);

        border-radius: var(--radius-lg);

        box-shadow: var(--shadow-lg);

        z-index: 2147483647;

    }


    /*
    |--------------------------------------------------------------------------
    | Mobile Suggestion
    |--------------------------------------------------------------------------
    */

    .home-search-suggestion {

        width: 100%;

        max-width: 100%;

        min-width: 0;

        box-sizing: border-box;

    }


    .home-search-suggestion-content {

        min-width: 0;

        max-width: 100%;

        overflow: hidden;

    }


    .home-search-suggestion-title {

        max-width: 100%;

        overflow: hidden;

        text-overflow: ellipsis;

        white-space: nowrap;

    }


    /*
    |--------------------------------------------------------------------------
    | Mobile Image
    |--------------------------------------------------------------------------
    */

    .home-search-suggestion-image {

        width: 44px;

        height: 44px;

        flex: 0 0 44px;

        margin-right: .65rem;

        border-radius: var(--radius-md);

    }


    /*
    |--------------------------------------------------------------------------
    | Mobile Title
    |--------------------------------------------------------------------------
    */

    .home-search-suggestion-title {

        font-size: var(--font-xs);

        line-height: 1.35;

    }


    /*
    |--------------------------------------------------------------------------
    | Mobile Type
    |--------------------------------------------------------------------------
    */

    .home-search-suggestion-type {

        margin-top: .15rem;

        font-size: .6875rem;

    }


    /*
    |--------------------------------------------------------------------------
    | Mobile Summary
    |--------------------------------------------------------------------------
    */

    .home-search-suggestion-summary {

        display: none;

    }


    /*
    |--------------------------------------------------------------------------
    | Mobile Arrow
    |--------------------------------------------------------------------------
    */

    .home-search-suggestion>i {

        margin-left: .5rem;

        font-size: .7rem;

    }


    /*
    |--------------------------------------------------------------------------
    | Mobile Loading
    |--------------------------------------------------------------------------
    */

    .home-search-suggestion-loading {

        min-height: 60px;

        padding: .8rem;

        font-size: var(--font-xs);

    }


    /*
    |--------------------------------------------------------------------------
    | Mobile Empty / Error
    |--------------------------------------------------------------------------
    */

    .home-search-suggestion-empty {

        min-height: 60px;

        padding: .8rem;

    }


    .home-search-suggestion-empty-icon {

        width: 34px;

        height: 34px;

        flex: 0 0 34px;

        font-size: .8rem;

    }


    /*
    |--------------------------------------------------------------------------
    | Hero Actions
    |--------------------------------------------------------------------------
    */

    .home-hero-actions {

        width: 100%;

        display: flex;

        flex-direction: column;

        gap: .65rem;

    }


    .home-hero-actions .btn {

        width: 100%;

        min-height: 46px;

        padding: .7rem 1.25rem;

        border-radius: var(--radius-pill);

        font-size: var(--font-sm);

    }

}