// Variables for colors and sizes
$container-gap: 15px;
$container-min-width: 250px;
$input-padding: 10px 15px 10px 35px;
$border-color: var(--border-gray-1);
$border-radius: 6px;
$font-size: var(--font-size-small);
$text-color: var(--text-gray);

// Main container styles using nesting
.search-container_my {
    display: flex;
    gap: $container-gap;
    flex-wrap: wrap;

    // Wrapper for search inputs
    .search-input-wrapper {
        position: relative;
        flex: 1;
        min-width: $container-min-width;
    }

    // Styles for the search input field
    .search-input {
        width: 100%;
        padding: $input-padding;
        border: 1px solid $border-color;
        border-radius: $border-radius;
        font-size: $font-size;
        line-height: 1.5;
        background-color: #fff;
        transition: border-color 0.15s ease-in-out;

        &:focus {
            outline: none;
            border-color: #cbd5e0;
            box-shadow: 0 0 0 1px rgba(66, 153, 225, 0.5);
        }

        &::placeholder {
            color: $text-color;
        }
    }

    // Common styles for both search and date icons
    .search-icon, .date-icon {
        position: absolute;
        left: 12px;
        top: 50%;
        transform: translateY(-50%);
        color: $text-color;
    }

    // Specific display for each icon
    .search-icon {
        display: flex;
    }

    .date-icon {
        display: inline-flex;
    }
}

.custom-dropdown-js-full{
    .custom-dropdown{
        width: 100%;
    }
}

.search-page-header{
    .woocommerce-ordering{
        margin-bottom: 0;
        & select{
         
            padding: .375rem 2.25rem .375rem .75rem;
            font-size: 1rem;
            font-weight: 400;
            line-height: 1.5;
            color: var(--bs-body-color);
            background-size: 16px 12px;
            border: var(--bs-border-width) solid var(--bs-border-color);
            border-radius: var(--bs-border-radius);
          
        }
    }
    
}

.search-page_wapper{
    .nav-underline .nav-link.active, .nav-underline .show>.nav-link{
        background-color: transparent;
    }
    .nav-underline .nav-link:focus, .nav-underline .nav-link:hover{
        background-color: transparent;
    }
}