/* ======================================================
Project : Sridevi Enterprises
File    : components/search.css
Purpose : Shared search bar component — loaded globally
          (layout/base.html) since it is used by the
          navbar on every page and reused as-is by the
          Products page's own search form.

Author  : Srikar
====================================================== */

/* ===========================================
   Search Bar
=========================================== */

.search-bar {

    display: flex;
    align-items: stretch;
    gap: 12px;

}

.search-bar-field {

    position: relative;
    display: flex;
    align-items: center;
    flex: 1;

}

.search-bar-icon {

    position: absolute;
    left: 18px;
    color: #667085;
    font-size: .95rem;
    pointer-events: none;

}

.search-bar-input {

    width: 100%;
    height: 52px;
    padding-left: 46px;
    padding-right: 44px;
    border: 1px solid #D0D5DD;
    border-radius: 10px;
    font-size: 1rem;

}

.search-bar-input:focus {

    border-color: #1E4FA3;
    box-shadow: 0 0 0 .2rem rgba(30, 79, 163, .15);

}

.search-bar-clear {

    position: absolute;
    right: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    color: #667085;
    text-decoration: none;

}

.search-bar-clear:hover {

    background: #F1F3F5;
    color: #1F2937;

}

.search-bar-clear:focus-visible {

    outline: 3px solid #1E4FA3;
    outline-offset: 2px;

}

.search-bar-submit {

    height: 52px;
    padding: 0 28px;
    border-radius: 10px;
    white-space: nowrap;

}