@charset "UTF-8";/* ------------- SEARCH PAGE ---------------- */
:root {
    --search-color:#2C9657;
    --search-bg:#eee;
}

.search-pad {
    display:block;
    max-width:600px;
    width:96%;
    margin:0 auto;

    .find {
 		display:flex;
        flex-flow:row nowrap;
        border:solid 1px var(--search-color);
        background:var(--search-color);
        border-radius: 10px;
        overflow: hidden;
        input.search-query[type=text]{
            background:white;
        }
    }

    .find input.search-query, select{
        font-size: 1.2em;
        margin: 0;
        border-radius:0;
        border:none;
    }

    input.search-button{
        background-image:url(/local/templates/termotronik_bitrix/css/images/search.svg);
        background-color:transparent;
        background-size:contain;
        background-position:center;
        width:80px;
        height:50px;
        border:none;
		&:active {
        	transform: translate(2px, -1px);/* Сдвигаем кнопку на 1px по диагонали */
    	}
    }

    .select-wrap {
     	display:flex;
        flex-flow:row nowrap;
        gap:10px;
        align-items:center;
        margin:3px 5px;
        font-size:16px;
        font-weight:400;
        color:var(--search-color);
        select {
            font-size:inherit;
            font-weight:inherit;
            color:white;
            background-color:var(--search-color);
            padding:0 7px;
            border-radius: 5px;
        }
    }
}



.search-page > div.search-result {
    &:has(.search-item) {
        border:solid 1px var(--search-bg);
	    border-radius:var(--radius-big);
    }

    overflow:hidden;
    div.search-item {
        margin:0;
        padding:.7em 0 .3em 2em;
        &:nth-of-type(2n+1){
            background:var(--search-bg);
        }
        border:none;
    }
    h4{margin:0}
    pre {
        display:none;
    }
    .pagination-list,
    .search-sorting {padding-left:2em;}

    .pagination-list {
        display:flex;
        margin-top:5px;
        flex-flow:row wrap;
        list-style:none;
        gap:10px;
        li {
            padding:.1em .5em;
            background:var(--search-bg);
            border-radius:var(--radius-small);
            &.active {
                background:red;
                color:white;
            }
        }
    }
}