.search-bar-container{background-color:#fff;border:1px solid #ccc;border-radius:5px;box-shadow:0 2px 5px #0000001a;margin-bottom:30px}.search-bar-desktop{display:block}.search-bar-mobile{display:none}.search-form{display:flex;position:relative;width:100%;padding:10px}.search-input{width:100%;height:55px;padding:0 50px 0 20px;background-color:#fff;border:1px solid #ccc;border-radius:5px;font-size:16px;color:#5d666f;transition:border-color .3s}.search-input:focus{outline:none;border-color:var(--color-primary)}.search-input::placeholder{color:#5d666f;opacity:1}.search-button{position:absolute;right:0;top:0;height:100%;width:55px;background:transparent;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center}.search-button i{font-size:18px;color:#0c0a0a;transition:color .3s}.search-button:hover i{color:var(--color-primary)}.search-button .search-clear-icon{color:#e81c2e}@media (max-width: 1199px){.search-bar-desktop{display:none}.search-bar-mobile{display:block;position:sticky;top:100px;z-index:1;padding:10px;margin-bottom:30px}.search-bar-mobile .search-form{padding:0}}.search-button i.is-clear-icon{color:red!important;font-size:22px;font-weight:900}.search-button:hover i.is-clear-icon{color:#8b0000!important}