.vtw-search-wrapper{
    position:relative !important;
    width:var(--vtw-search-width, 100%) !important;
    max-width:1000px !important;
    margin:0 !important;
    z-index:1000 !important;
}

.vtw-search-wrapper.vtw-search-focused{
    z-index:1002 !important;
}

.vtw-search-input{
    width:94% !important;
    height:var(--vtw-search-height, 58px) !important;
    padding:0 calc(var(--vtw-search-button-width-pc, 76px) + 62px) 0 px !important;
    border-radius:var(--vtw-search-radius, 8px) !important;
    border:2px solid var(--vtw-search-border-color, #5bb8d6) !important;
    box-shadow:0 8px 24px rgba(15, 23, 42, 0.16) !important;
    font-size:var(--vtw-input-font-size, 18px) !important;
    line-height:1.2 !important;
    color:#111827 !important;
    background:#fff !important;
    outline:none !important;
    text-align:left !important;
    transition:border-color .2s ease, box-shadow .2s ease !important;
}

.vtw-search-input:placeholder-shown{
    text-align:center !important;
}

.vtw-search-input::placeholder{
    color:#777 !important;
    opacity:1 !important;
    font-size:var(--vtw-placeholder-font-size, 22px) !important;
    font-weight:400 !important;
    text-align:center !important;
}

.vtw-search-input:focus{
    border-color:var(--vtw-search-border-color, #5bb8d6) !important;
    box-shadow:0 10px 30px rgba(91,184,214,0.28) !important;
}

.vtw-search-button{
    position:absolute !important;
    right:0 !important;
    top:0 !important;
    width:var(--vtw-search-button-width-pc, 76px) !important;
    height:var(--vtw-search-height, 58px) !important;
    border:0 !important;
    border-left:2px solid var(--vtw-search-border-color, #5bb8d6) !important;
    border-radius:0 var(--vtw-search-radius, 8px) var(--vtw-search-radius, 8px) 0 !important;
    background:var(--vtw-search-button-color, #83d7f3) !important;
    color:#fff !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    cursor:pointer !important;
    box-shadow:none !important;
    padding:0 !important;
    line-height:1 !important;
    overflow:hidden !important;
}

.vtw-search-button svg{
    width:32px !important;
    height:32px !important;
    display:block !important;
    stroke:currentColor !important;
}

.vtw-search-button:hover{
    filter:brightness(.97) !important;
}

.vtw-search-clear{
    position:absolute !important;
    right:calc(var(--vtw-search-button-width-pc, 76px) + 12px) !important;
    top:50% !important;
    width:24px !important;
    height:24px !important;
    margin-top:-12px !important;
    border:0 !important;
    border-radius:100% !important;
    background:#2b2b2b !important;
    color:#fff !important;
    font-size:10px !important;
    font-weight:700 !important;
    line-height:24px !important;
    text-align:center !important;
    display:none !important;
    align-items:center !important;
    justify-content:center !important;
    cursor:pointer !important;
    padding:0 !important;
    z-index:3 !important;
    transition:border-color .2s ease, box-shadow .2s ease !important;
}

.vtw-search-wrapper.vtw-has-text .vtw-search-clear{
    display:flex !important;
}

.vtw-search-loading{
    position:absolute !important;
    right:calc(var(--vtw-search-button-width-pc, 76px) + 44px) !important;
    top:50% !important;
    width:19px !important;
    height:19px !important;
    margin-top:-9.5px !important;
    border:3px solid rgba(91,184,214,0.18) !important;
    border-top-color:var(--vtw-search-border-color, #5bb8d6) !important;
    border-radius:50% !important;
    display:none !important;
    pointer-events:none !important;
    animation:vtw-search-spin .72s linear infinite !important;
    z-index:3 !important;
}

.vtw-search-wrapper.vtw-is-loading .vtw-search-loading{
    display:block !important;
}

@keyframes vtw-search-spin{
    to{
        transform:rotate(360deg);
    }
}

.vtw-search-results{
    position:absolute !important;
    top:calc(100% + var(--vtw-results-gap-pc, 10px)) !important;
    left:50% !important;
    transform:translateX(-50%) !important;
    width:var(--vtw-results-width-pc, 95%) !important;
    max-width:calc(100vw - 32px) !important;
    background:#fff !important;
    border-radius:20px !important;
    padding:20px 20px 18px !important;
    z-index:1003 !important;
    display:none;
    box-shadow:0 18px 45px rgba(15,23,42,0.22) !important;
}

.vtw-results-scroll{
    display:flex !important;
    gap:20px !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    padding:3px 3px 19px !important;
    scroll-behavior:smooth !important;
    scrollbar-width:auto !important;
    scrollbar-color:var(--vtw-scroll-thumb-color, #8b5cf6) var(--vtw-scroll-track-color, #f1ecff) !important;
}

.vtw-results-scroll::-webkit-scrollbar{
    height:15px !important;
}

.vtw-results-scroll::-webkit-scrollbar-track{
    background:var(--vtw-scroll-track-color, #f1ecff) !important;
    border-radius:999px !important;
}

.vtw-results-scroll::-webkit-scrollbar-thumb{
    background:var(--vtw-scroll-thumb-color, #8b5cf6) !important;
    border-radius:999px !important;
    border:3px solid var(--vtw-scroll-track-color, #f1ecff) !important;
}

.vtw-results-scroll::-webkit-scrollbar-thumb:hover{
    filter:brightness(.9) !important;
}

.vtw-item{
    width:170px !important;
    min-width:170px !important;
    background:#fff !important;
    border-radius:14px !important;
    overflow:hidden !important;
    text-decoration:none !important;
    flex-shrink:0 !important;
    border:1px solid #e5e7eb !important;
    box-shadow:0 8px 20px rgba(15,23,42,0.06) !important;
    transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease !important;
}

.vtw-item:hover{
    transform:translateY(-2px) !important;
    border-color:var(--vtw-search-border-color, #5bb8d6) !important;
    box-shadow:0 14px 32px rgba(15,23,42,0.18), 0 0 0 3px rgba(91,184,214,0.12) !important;
}

.vtw-thumb{
    width:100% !important;
    height:128px !important;
    background:#f8fafc !important;
}

.vtw-thumb img{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
}

.vtw-title{
    font-size:14px !important;
    line-height:1.45 !important;
    font-weight:400 !important;
    padding:12px !important;
    color:#0056b3 !important;
    white-space:normal !important;
    word-break:break-word !important;
}

.vtw-empty{
    padding:10px !important;
    font-size:15px !important;
    font-weight:400 !important;
    color:#64748b !important;
    text-align:center !important;
}

@media(max-width:768px){

    .vtw-search-wrapper{
        width:100% !important;
        max-width:100% !important;
        margin:0 !important;
    }

    .vtw-search-input{
        height:48px !important;
        padding-left:15px !important;
        padding-right:calc(var(--vtw-search-button-width-mobile, 0px) + 48px) !important;
        font-size:min(var(--vtw-input-font-size, 16px), 16px) !important;
    }

    .vtw-search-input::placeholder{
        font-size:min(var(--vtw-placeholder-font-size, 16px), 16px) !important;
        font-weight:400 !important;
    }

    .vtw-search-button{
        width:var(--vtw-search-button-width-mobile, 0px) !important;
        height:48px !important;
        border-left:0 !important;
        overflow:hidden !important;
    }

    .vtw-search-button svg{
        width:25px !important;
        height:25px !important;
    }

    .vtw-search-clear{
        right:calc(var(--vtw-search-button-width-mobile, 0px) + 13px) !important;
        top:50% !important;
        width:22px !important;
        height:22px !important;
        margin-top:-11px !important;
        font-size:10px !important;
        line-height:22px !important;
    }

    .vtw-search-loading{
        right:calc(var(--vtw-search-button-width-mobile, 0px) + 42px) !important;
        width:18px !important;
        height:18px !important;
        margin-top:-9px !important;
    }

    .vtw-search-results{
        top:calc(100% + var(--vtw-results-gap-mobile, 8px)) !important;
        width:var(--vtw-results-width-mobile, 94%) !important;
        max-width:calc(100vw - 16px) !important;
        padding:12px !important;
        border-radius:16px !important;
    }

    .vtw-results-scroll{
        flex-direction:column !important;
        gap:9px !important;
        overflow-x:hidden !important;
        overflow-y:auto !important;
        max-height:70vh !important;
        padding:2px 2px 12px !important;
    }

    .vtw-results-scroll::-webkit-scrollbar{
        width:11px !important;
        height:11px !important;
    }

    .vtw-item{
        width:100% !important;
        min-width:100% !important;
        display:flex !important;
        align-items:center !important;
        gap:9px !important;
        padding:8px !important;
        border-radius:12px !important;
    }

    .vtw-thumb{
        width:62px !important;
        min-width:62px !important;
        height:62px !important;
        border-radius:9px !important;
        overflow:hidden !important;
    }

    .vtw-title{
        padding:0 !important;
        font-size:13px !important;
        line-height:1.35 !important;
        font-weight:400 !important;
        color:#111827 !important;
    }
}