/* ==========================================================
   TOUR SEARCH
========================================================== */

.ua-tour-search {

    position: relative;

    z-index: 20;

    margin-top: 21px;

    margin-bottom: 21px;

}

.ua-tour-search .container {

    position: relative;

}

/* ==========================================================
   SEARCH CARD
========================================================== */

.ua-search-card {

    position: relative;

    display: grid;

    grid-template-columns: 1fr auto;

    grid-template-areas:
        "search button"
        "popular popular";

    gap: 18px;

    padding: 22px;

    border-radius: 30px;

    background:
        linear-gradient(180deg,
            rgba(255, 255, 255, .96),
            rgba(248, 250, 252, .92));

    backdrop-filter: blur(26px);
    -webkit-backdrop-filter: blur(26px);

    border: 1px solid rgba(255, 255, 255, .90);

    outline: 1px solid rgba(226, 232, 240, .65);

    box-shadow:
        0 30px 70px rgba(15, 23, 42, .12),
        0 10px 25px rgba(15, 23, 42, .08),
        inset 0 1px 0 rgba(255, 255, 255, .95);

    overflow: visible;

}

/* Soft Glow */

.ua-search-card::after {

    content: "";

    position: absolute;

    left: 50%;

    bottom: -24px;

    transform: translateX(-50%);

    width: 220px;

    height: 55px;

    border-radius: 50%;

    background: rgba(244, 180, 0, .15);

    filter: blur(28px);

    pointer-events: none;

}

/* ==========================================================
   SEARCH BOX
========================================================== */

.ua-search-box {

    grid-area: search;

    display: flex;

    align-items: center;

    gap: 14px;

    height: 64px;

    padding: 0 20px;

    border-radius: 18px;

    background: #fff;

    border: 1px solid #E7EAF0;

    box-shadow:
        inset 0 2px 6px rgba(15, 23, 42, .03),
        0 6px 18px rgba(15, 23, 42, .04);

    transition: all .30s ease;

}

.ua-search-box:focus-within {

    border-color: rgba(244, 180, 0, .45);

    box-shadow:
        inset 0 2px 6px rgba(15, 23, 42, .03),
        0 0 0 4px rgba(244, 180, 0, .10),
        0 12px 30px rgba(15, 23, 42, .08);

}

/* ==========================================================
   SEARCH ICON
========================================================== */

.ua-search-icon {

    flex-shrink: 0;

    width: 42px;

    height: 42px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 12px;

    background: #FFF8E6;

    color: var(--primary);

    font-size: 1.1rem;

}

/* ==========================================================
   INPUT
========================================================== */

.ua-search-input {

    flex: 1;

    min-width: 0;

    border: none;

    outline: none;

    background: transparent;

    color: #111827;

    font-size: .96rem;

    font-weight: 500;

}

.ua-search-input::placeholder {

    color: #9CA3AF;

    font-weight: 500;

}

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

.ua-search-button {

    grid-area: button;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    align-self: stretch;

    min-width: 180px;

    padding: 0 26px;

    border: none;

    border-radius: 18px;

    background: linear-gradient(180deg,
            #F8C63A,
            #F4B400);

    color: #111827;

    font-size: .94rem;

    font-weight: 700;

    box-shadow:
        0 12px 28px rgba(244, 180, 0, .30);

    transition: all .30s ease;

}

.ua-search-button:hover {

    transform: translateY(-2px);

    box-shadow:
        0 18px 36px rgba(244, 180, 0, .36);

}

.ua-search-button i {

    font-size: .9rem;

}

/* ==========================================================
   SEARCH DIVIDER
========================================================== */

.ua-search-divider {

    grid-column: 1 / -1;

    height: 1px;

    background: linear-gradient(90deg,
            transparent,
            rgba(226, 232, 240, .9),
            transparent);

    margin: 4px 0;

}

/* ==========================================================
   POPULAR
========================================================== */

.ua-search-popular {

    grid-area: popular;

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 10px;

}

.ua-popular-title {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    margin-right: 6px;

    color: #111827;

    font-size: .92rem;

    font-weight: 700;

    white-space: nowrap;

}

.ua-popular-title i {

    color: var(--primary);

    font-size: 1rem;

}

/* ==========================================================
   TAG
========================================================== */

.ua-search-tag {

    position: relative;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    height: 38px;

    padding: 0 16px;

    border: 1px solid #E7EAF0;

    border-radius: 999px;

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

    color: #374151;

    font-size: .84rem;

    font-weight: 600;

    white-space: nowrap;

    cursor: pointer;

    transition:
        transform .25s ease,
        border-color .25s ease,
        background .25s ease,
        box-shadow .25s ease;

    box-shadow:
        0 3px 10px rgba(15, 23, 42, .05);

}

.ua-search-tag i {

    font-size: .88rem;

    color: #6B7280;

    transition: .25s;

}

.ua-search-tag:hover {

    transform: translateY(-2px);

    background: #FFF9E8;

    border-color: rgba(244, 180, 0, .45);

    box-shadow:
        0 10px 20px rgba(15, 23, 42, .10);

}

.ua-search-tag:hover i {

    color: var(--primary);

}

.ua-search-tag:active {

    transform: scale(.97);

}

/* ==========================================================
   ACTIVE TAG
========================================================== */

.ua-search-tag.active {

    background: linear-gradient(180deg,
            #F8C63A,
            #F4B400);

    border-color: transparent;

    color: #111827;

    box-shadow:
        0 10px 22px rgba(244, 180, 0, .28);

}

.ua-search-tag.active i {

    color: #111827;

}

/* ==========================================================
   SEARCH CARD HOVER
========================================================== */

.ua-search-card {

    transition:
        transform .35s ease,
        box-shadow .35s ease;

}

.ua-search-card:hover {

    transform: translateY(-3px);

    box-shadow:
        0 40px 80px rgba(15, 23, 42, .14),
        0 18px 40px rgba(15, 23, 42, .10),
        inset 0 1px 0 rgba(255, 255, 255, .95);

}

/* ==========================================================
   BUTTON HOVER
========================================================== */

.ua-search-button:hover {

    background: linear-gradient(180deg,
            #FFD04D,
            #F4B400);

}

.ua-search-button:active {

    transform: scale(.98);

}


/* ==========================================================
   SEARCH ANIMATION
========================================================== */

.ua-search-card {

    animation: uaSearchFade .6s ease;

}

@keyframes uaSearchFade {

    from {

        opacity: 0;

        transform: translateY(20px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}

/* ==========================================================
   SEARCH INPUT
========================================================== */

.ua-search-input {

    transition: color .25s ease;

}

.ua-search-input:focus {

    color: #111827;

}

.ua-search-input::selection {

    background: rgba(244, 180, 0, .20);

}

/* ==========================================================
   SEARCH RESULT
========================================================== */

.ua-search-result {

    position: absolute;
    top: 78px;
    left: 0;
    right: 0;

    display: none;

    background: #fff;
    border: 1px solid #E5E7EB;
    border-radius: 18px;

    max-height: 560px;
    overflow-y: auto;
    overflow-x: hidden;

    box-shadow: 0 25px 45px rgba(15, 23, 42, .14);

    z-index: 100;
}

.ua-search-result.active {

    display: block;

}

.ua-search-item {

    display: flex;

    align-items: center;

    gap: 14px;

    padding: 14px 18px;

    cursor: pointer;

    transition: .25s;

}

.ua-search-item:hover {

    background: #FFF9E8;

}

.ua-search-item i {

    color: var(--primary);

    font-size: 1rem;

}

.ua-search-item-title {

    font-size: .92rem;

    font-weight: 600;

    color: #111827;

}

.ua-search-item-subtitle {

    margin-top: 2px;

    font-size: .8rem;

    color: #6B7280;

}

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

.ua-search-button {

    overflow: hidden;

    position: relative;

}

.ua-search-button::before {

    content: "";

    position: absolute;

    top: 0;

    left: -120%;

    width: 60%;

    height: 100%;

    background:

        linear-gradient(90deg,

            transparent,

            rgba(255, 255, 255, .45),

            transparent);

    transition: .65s;

}

.ua-search-button:hover::before {

    left: 150%;

}

/* ==========================================================
   TAG RIPPLE
========================================================== */

.ua-search-tag {

    overflow: hidden;

    position: relative;

}

.ua-search-tag::after {

    content: "";

    position: absolute;

    inset: 0;

    opacity: 0;

    border-radius: 999px;

    background:

        rgba(244, 180, 0, .10);

    transition: .25s;

}

.ua-search-tag:hover::after {

    opacity: 1;

}

/* ==========================================================
   CARD HOVER
========================================================== */

.ua-search-card:hover {

    transform: translateY(-3px);

    box-shadow:

        0 40px 80px rgba(15, 23, 42, .14),

        0 18px 35px rgba(15, 23, 42, .08),

        inset 0 1px 0 rgba(255, 255, 255, .95);

}

/* ==========================================================
   ACCESSIBILITY
========================================================== */

.ua-search-button:focus-visible,

.ua-search-tag:focus-visible {

    outline: 3px solid rgba(244, 180, 0, .35);

    outline-offset: 3px;

}

.ua-search-input:focus-visible {

    outline: none;

}

/* ==========================================================
   REDUCE MOTION
========================================================== */

@media (prefers-reduced-motion:reduce) {

    .ua-search-card,

    .ua-search-button,

    .ua-search-tag,

    .ua-search-box {

        animation: none;

        transition: none;

    }

}

/* ==========================================================
   MOBILE & TABLET
========================================================== */

@media (max-width:991.98px) {

    /* Section */

    .ua-tour-search {

        margin-top: 13px;
        margin-bottom: 13px;

    }

    /* Card */

    .ua-search-card {

        display: flex;

        flex-direction: column;

        gap: 18px;

        padding: 20px;

        border-radius: 24px;

    }

    /* Search */

    .ua-search-box {

        order: 1;

        height: 56px;

        padding: 0 16px;

        border-radius: 16px;

    }

    .ua-search-field {

        height: 56px;

        padding: 0 16px;

        border-radius: 16px;

    }

    .ua-search-icon {

        width: 36px;

        height: 36px;

        font-size: 1rem;

    }

    .ua-search-input {

        font-size: .94rem;

    }

    /* Divider */

    .ua-search-divider {

        order: 3;

        margin: 0;

    }

    /* Popular */

    .ua-search-popular {

        order: 2;

        display: grid;

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

        gap: 10px;

        margin-top: 18px;

        padding-top: 18px;

    }

    .ua-popular-title {

        grid-column: 1 / -1;

        margin: 0 0 4px;

    }

    .ua-search-tag {

        width: 100%;

        justify-content: flex-start;

        height: 40px;

        padding: 0 14px;

        border-radius: 12px;

        font-size: .84rem;

    }

    .ua-search-tag i {

        font-size: .85rem;

    }

    /* Button */

    .ua-search-button {

        order: 4;

        width: 100%;

        min-width: 100%;

        height: 50px;

        margin-top: 20px;

        border-radius: 14px;

        font-size: .92rem;

    }

}

.ua-search-title mark {

    background: #fff3b0;

    color: #111827;

    padding: 0;

    font-weight: 700;

    border-radius: 3px;

}

/* ==========================================================
   SEARCH RESULT LAYOUT
========================================================== */

.ua-search-group+.ua-search-group {
    border-top: 1px solid #eef2f7;
}

.ua-search-group-title {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 20px;
    background: #fafbfc;
    color: #6b7280;
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.ua-search-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 16px 20px;
    text-decoration: none;
    color: inherit;
    transition: background .25s ease;
    border-bottom: 1px solid #f3f4f6;
}

.ua-search-item:last-child {
    border-bottom: none;
}

.ua-search-item:hover {
    background: #fff9e8;
}

.ua-search-thumb {
    width: 110px;
    height: 82px;
    flex-shrink: 0;
    object-fit: cover;
    border-radius: 14px;
}

.ua-search-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ua-search-title {
    font-size: 1rem;
    font-weight: 700;
    color: #111827;
    line-height: 1.35;
}

.ua-search-subtitle {
    font-size: .88rem;
    color: #6b7280;
    line-height: 1.6;

    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ua-search-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.ua-search-location,
.ua-search-duration {
    font-size: .78rem;
    color: #6b7280;
}

.ua-search-badge {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;

    margin-top: 4px;
    padding: 5px 10px;

    border-radius: 999px;

    background: #fff5d9;
    color: #b7791f;

    font-size: .72rem;
    font-weight: 700;
}

/* ==========================================================
   TABLET
========================================================== */

@media (max-width:991.98px) {

    .ua-search-item {
        gap: 14px;
        padding: 14px 16px;
    }

    .ua-search-thumb {
        width: 90px;
        height: 72px;
    }

    .ua-search-title {
        font-size: .95rem;
    }

    .ua-search-subtitle {
        font-size: .82rem;
        -webkit-line-clamp: 2;
    }

}

/* ==========================================================
   MOBILE
========================================================== */

@media (max-width:575.98px) {

    .ua-search-group-title {
        padding: 12px 16px;
        font-size: .72rem;
    }

    .ua-search-item {
        align-items: flex-start;
        gap: 12px;
        padding: 12px 16px;
    }

    .ua-search-thumb {
        width: 72px;
        height: 72px;
        border-radius: 12px;
    }

    .ua-search-title {
        font-size: .9rem;
        line-height: 1.4;
    }

    .ua-search-subtitle {
        display: none;
    }

    .ua-search-meta {
        gap: 6px;
    }

    .ua-search-location,
    .ua-search-duration {
        font-size: .72rem;
    }

    .ua-search-badge {
        margin-top: 2px;
        font-size: .68rem;
        padding: 4px 8px;
    }

}