/**
 * ============================================================================
 * Shivanya Healthcare
 * File    : assets/css/search.css
 * Purpose : Smart Search
 * Version : 1.0.0
 * Bootstrap : 5.x
 * ============================================================================
 */


/* ==========================================================================
   Search Wrapper
   ========================================================================== */

.search-wrapper,
[data-search-wrapper] {

    position: relative;

    width: 100%;

}


/* ==========================================================================
   Search Form
   ========================================================================== */

.search-form {

    position: relative;

    width: 100%;

    margin: 0;

}

.search-form .input-group {

    flex-wrap: nowrap;

}


/* ==========================================================================
   Search Input
   ========================================================================== */

.search-form .form-control {

    height: 48px;

    border-radius: .5rem 0 0 .5rem;

    border-right: 0;

    box-shadow: none;

}

.search-form .form-control:focus {

    box-shadow: none;

}


/* ==========================================================================
   Search Button
   ========================================================================== */

.search-form .btn {

    min-width: 52px;

    border-radius: 0 .5rem .5rem 0;

}


/* ==========================================================================
   Clear Button
   ========================================================================== */

.search-clear {

    position: absolute;

    top: 50%;

    right: 60px;

    transform: translateY(-50%);

    cursor: pointer;

    color: #6c757d;

    z-index: 5;

}

.search-clear:hover {

    color: #dc3545;

}


/* ==========================================================================
   Loading Spinner
   ========================================================================== */

.search-loader {

    position: absolute;

    top: 50%;

    right: 95px;

    transform: translateY(-50%);

    display: none;

    z-index: 5;

}

.search-loader.show {

    display: inline-flex;

}

/* ==========================================================================
   Search Dropdown
   ========================================================================== */

.search-dropdown,
[data-search-dropdown] {

    position: absolute;

    top: calc(100% + 4px);

    left: 0;

    width: 100%;

    display: none;

    background: #ffffff;

    border: 1px solid #dee2e6;

    border-radius: 0 0 .50rem .50rem;

    box-shadow: 0 10px 30px rgba(0,0,0,.15);

    max-height: 420px;

    overflow-y: auto;

    overflow-x: hidden;

    z-index: 99999;

}


/* Show */

.search-dropdown.show,
[data-search-dropdown].show {

    display: block;

}


/* ==========================================================================
   Search Result Item
   ========================================================================== */

.search-dropdown .dropdown-item,
[data-search-dropdown] .dropdown-item {

    display: block;

    padding: .85rem 1rem;

    text-decoration: none;

    color: #212529;

    border-bottom: 1px solid #f1f3f5;

    transition: all .18s ease;

    background: #fff;

}


.search-dropdown .dropdown-item:last-child,
[data-search-dropdown] .dropdown-item:last-child {

    border-bottom: none;

}


.search-dropdown .dropdown-item:hover,
.search-dropdown .dropdown-item.active,
[data-search-dropdown] .dropdown-item:hover,
[data-search-dropdown] .dropdown-item.active {

    background: #f8f9fa;

    color: #0d6efd;

}


/* ==========================================================================
   Result Title
   ========================================================================== */

.search-dropdown .fw-semibold {

    font-size: 15px;

    font-weight: 600;

    color: #212529;

    margin-bottom: 4px;

}


/* ==========================================================================
   Result Subtitle
   ========================================================================== */

.search-dropdown .small,
[data-search-dropdown] .small {

    font-size: 13px;

    color: #6c757d;

}


/* ==========================================================================
   Price Block
   ========================================================================== */

.search-price {

    display: flex;

    align-items: center;

    gap: 10px;

    margin-top: 8px;

}


.search-price-current {

    font-size: 15px;

    font-weight: 700;

    color: #198754;

}


.search-price-old {

    font-size: 13px;

    color: #6c757d;

    text-decoration: line-through;

}


.search-discount {

    font-size: 11px;

    font-weight: 600;

    color: #dc3545;

}


/* ==========================================================================
   Badge
   ========================================================================== */

.search-dropdown .badge {

    font-size: 11px;

    font-weight: 500;

}


/* ==========================================================================
   Scrollbar
   ========================================================================== */

.search-dropdown::-webkit-scrollbar {

    width: 8px;

}


.search-dropdown::-webkit-scrollbar-thumb {

    background: #ced4da;

    border-radius: 8px;

}


.search-dropdown::-webkit-scrollbar-thumb:hover {

    background: #adb5bd;

}


/* ==========================================================================
   Empty Result
   ========================================================================== */

.search-empty {

    padding: 18px;

    text-align: center;

    color: #6c757d;

}


.search-empty i {

    display: block;

    font-size: 24px;

    margin-bottom: 10px;

}


/* ==========================================================================
   Loading
   ========================================================================== */

.search-loading {

    padding: 16px;

    text-align: center;

}


/* ==========================================================================
   Mobile
   ========================================================================== */

@media (max-width: 991.98px) {

    .search-dropdown,
    [data-search-dropdown] {

        max-height: 300px;

    }

}