.tm-widget-search-form .search-form-default {
position: relative;
margin: 0px;
}
.tm-widget-search-form .search-form-default input[type=search] {
position: relative;
padding-left: 1.5em;
padding-right: 4em;
border-radius: 50px;
background: #fff;
border: 1px solid #eee;
color: #333;
font-size: 15px;
display: block;
width: 100%;
height: 55px;
transition: all 500ms ease;
-moz-transition: all 500ms ease;
-webkit-transition: all 500ms ease;
-ms-transition: all 500ms ease;
-o-transition: all 500ms ease;
}
.tm-widget-search-form .search-form-default input:focus {
border-color: #222;
box-shadow: none;
}
.tm-widget-search-form .search-form-default button {
position: absolute;
right: 0;
top: 0px;
border: none;
outline: none;
padding: 0;
height: 100%;
width: 55px;
line-height: 0;
display: block;
font-size: 20px;
color: #aaa;
background: none;
font-weight: normal;
transition: all 0.3s ease;
}
@media (prefers-reduced-motion: reduce) {
.tm-widget-search-form .search-form-default button {
transition: none;
}
}
.tm-widget-search-form .search-form-default button:hover {
color: #181b1f;
}
.search-form-cat {
max-width: 650px;
width: 100%;
display: flex;
flex-wrap: wrap;
border: 2px solid #e7e7e7;
border-radius: 57px;
}
.search-form-cat .product-search-category .nice-select {
border: none;
background-color: #f5f5f5;
border-radius: 50px 0 0 50px;
color: #1a2428;
min-width: auto;
padding-left: 20px;
font-size: 12px;
height: 55px;
box-shadow: none;
}
.search-form-cat .product-search-category .nice-select:after {
border-bottom: 1px solid #111;
border-right: 1px solid #111;
}
.search-form-cat .product-search-category .nice-select span.current {
line-height: 39px;
}
.search-form-cat .product-search-meta {
display: flex;
flex-grow: 1;
}
.search-form-cat .product-search-meta input {
background-color: #fff;
border: none;
border-radius: 0;
font-size: 12px;
color: #e7e7e7;
height: 55px;
width: auto;
flex-grow: 1;
}
.search-form-cat .product-search-meta input:hover, .search-form-cat .product-search-meta input:focus {
color: #888;
}
.search-form-cat .product-search-meta button {
font-size: 14px;
padding: 0 48px;
color: var(--text-color-bg-theme-color1);
background-color: var(--theme-color1);
border-color: var(--theme-color1);
border: 0;
box-shadow: none;
border-radius: 0 50px 50px 0;
transition: all 0.3s ease;
}
@media (prefers-reduced-motion: reduce) {
.search-form-cat .product-search-meta button {
transition: none;
}
}
.search-form-cat .product-search-meta button:before {
border-radius: inherit;
}
.search-form-cat .product-search-meta button:hover, .search-form-cat .product-search-meta button:focus {
color: var(--text-color-bg-theme-color2);
background-color: var(--theme-color2);
border-color: var(--theme-color2);
}
.tm-widget-search-form .icon-search-popup {
font-size: 22px;
color: #2f382f;
line-height: 1;
}
.tm-widget-search-form .icon-search-popup:hover {
color: var(--theme-color1);
}
.tm-widget-search-form .icon-search-popup i {
line-height: 1;
vertical-align: middle;
}
.site-search-popup {
position: fixed;
width: 100vw;
height: 100vh;
top: 0;
left: 0;
z-index: 99998;
background-color: rgba(0, 0, 0, 0.7);
transition: all ease-in-out 0.3s;
opacity: 0;
visibility: hidden;
pointer-events: none;
}
.site-search-popup .site-search-popup-wrap {
display: flex;
align-items: center;
justify-content: center;
position: relative;
padding: 40px;
background-color: #fff;
transform: translateY(-100%);
transition: all ease-in-out 0.3s;
}
@media (min-width: 992px) {
.site-search-popup .site-search-popup-wrap {
padding: 80px;
}
}
.site-search-popup .site-search-popup-wrap .site-search-popup-close {
position: absolute;
right: 10px;
top: 10px;
font-size: 20px;
line-height: 1;
width: 26px;
height: 26px;
}
@media (min-width: 992px) {
.site-search-popup .site-search-popup-wrap .site-search-popup-close {
top: 20px;
right: 30px;
}
}
.site-search-popup .site-search-popup-wrap .site-search-popup-close:before, .site-search-popup .site-search-popup-wrap .site-search-popup-close:after {
content: " ";
position: absolute;
top: 50%;
display: inline-block;
margin-top: -1px;
width: 26px;
height: 2px;
background-color: #222;
transition: background-color 0.2s ease-in-out, transform 0.2s ease-in-out, width 0.2s ease-in-out;
right: 0;
transform: rotate(-45deg);
}
.site-search-popup .site-search-popup-wrap .site-search-popup-close:before {
transform: rotate(45deg);
}
.site-search-popup .site-search-popup-wrap .site-search-popup-close:hover:before, .site-search-popup .site-search-popup-wrap .site-search-popup-close:hover:after {
transform: rotate(0);
}
.site-search-popup .site-search-popup-wrap input[type=search] {
width: 600px;
}
@media (max-width: 767.98px) {
.site-search-popup .site-search-popup-wrap input[type=search] {
max-width: 300px;
}
}
.search-popup-active .site-search-popup {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.search-popup-active .site-search-popup .site-search-popup-wrap {
transform: translateY(0);
}