#numb_counter {
  display: flex;
  justify-content: space-between;
  width: 80px;
}
#numb_counter input{
    border-style: none;
    width: 30px;
    height: 30px;
    font-size: 26px;
    line-height: 26px;
    font-weight: 900;
    color: #ffffff;
    background-color: #9f8fff;
    border-radius: 14px;
}
#calculator-city {
    padding: 4px;
    background-image: none;
    font-size: 48px;
    text-align: center;
    opacity: 1;
    height: 0px;
    background-color: #f5f5dc00;

}
#calculator-city :hover{
        border-color: none;
}
.calculator select:hover, input:hover{
    box-shadow: none;
}
.calculator .container {
    padding: 30px 20px;
    border-radius: 14px;
}
.calculator {
    margin-bottom: 80px;
    padding: 0px 40px;
    background-color: #f3f1ff;
}

.calculator-main .container{ 
        background-color: #fff;
}
    button, html input[type=button], input[type=reset], input[type=submit] {
    -webkit-appearance: button;
    cursor: pointer;
}
#page_calculator .section__title, .section__subtitle {
  margin-bottom: 40px;
}

input {
    cursor: pointer;
}
.calculator__top {
    margin-bottom: 30px;
}
.calc__services-checkbox input {
    opacity: 0;
    position: absolute;
    z-index: -1;
    border-radius: 6px;
    webkit-appearance: none;
    appearance: none;
}
.calculator__hidden-counters {
    display: grid;
    grid-template-rows: 0.8fr;
    transition: all 400ms ease-in-out;
}
.calculator__hidden-counters.active {
    grid-template-rows: 1fr;
}
.calculator__hidden-counters .counters-wrapper {
    overflow-x: hidden;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}
.calculator__hidden-counters.active .counters-wrapper {
    overflow-x: auto;
}
.calculator-hidden-counters-reveal-btn {
    text-align: center;
    color: #fff;
    background: var(--accent);
    margin-block-start: -75px;
    width: 100%;
    position: relative;
    padding: 0;
    border: 2px solid var(--accent);
    border-top: none;
    border-bottom-right-radius: var(--small-border-radius);
    border-bottom-left-radius: var(--small-border-radius);
    transition: all 400ms ease-in-out;
    /*height: 20px;*/
	height: 10px;
    margin-block-end: 15px;
}
.calculator-hidden-counters-reveal-btn::after {
	content: '';
	position: absolute;
	inset: 0;
	margin: auto;
	/*width: 20px;*/
	/*height: 20px;*/
	width: 10px;
	height: 10px;
	top: 100%;
	background: var(--accent);
	transform: rotate(45deg);
	transition: all 400ms ease-in-out;
}
.calculator__counters-wrapper:has(.calculator__hidden-counters.active) .calculator-hidden-counters-reveal-btn::after {
	top: -100%;
}
.calculator__counters-wrapper:has(.calculator__hidden-counters.active) .calculator-hidden-counters-reveal-btn {
    margin-block-start: 0;
}
.calculator__top {
    gap: 10px;
    display: flex;
    flex-wrap: wrap;
}
.calculator__top img {
	max-height: 120px;
	border-radius: 20px;
	object-fit: cover;
	width: 100%;
}
.calculator__top select {

	padding: 16px;
	font-size: 16px;
	line-height: 1; /* 137.5% */
}
.calculator__top-selectors p {margin:0}

.calc__radio {display: none;}
.calc__radio-container {
	background: var(--soft-light-gray);
	padding: 3px;
	border-radius: 10px;
}
.counters__type-selector {
	padding:  0px;
    display: flex;
    justify-content: space-between;

}
.counters__type-selector p {
    margin-right: 5px;
}
.calc__radio-btn {
	border-radius: 10px;
	width: 50%;
	text-align: center;
	padding: 12px;
}
.calc__radio#home__type-house:checked~.calc__radio-btn-container .calc__radio-btn[for=home__type-house],.calc__radio#home__type-aparts:checked~.calc__radio-btn-container .calc__radio-btn[for=home__type-aparts] {
    background: #fff;
    box-shadow: 0 2px 4px 0 rgba(0,0,0,.08);
    color: var(--text-color)
}
.calc__radio#home__type-house:not(:checked)~.calc__radio-btn-container .calc__radio-btn[for=home__type-house],.calc__radio#home__type-aparts:not(:checked)~.calc__radio-btn-container .calc__radio-btn[for=home__type-aparts] {
    color: #7e8292;
}
.calc__services-checkbox {
	display: flex;
	align-items: center;
	line-height: normal;
}
.calc__services-checkbox::before {
  content: '';
  display: inline-block;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  flex-grow: 0;
  border: 1px solid #BDBCDB;
  border-radius: 0.25em;
  margin-right: 0.5em;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 60% 60%;
}
.calc__services-checkbox:has(input:checked)::before{
	border-color: var(--accent);
	background-color: var(--accent);
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3e%3c/svg%3e");
}
.calc__services-checkbox input{
	opacity:0;
	position:absolute;
	z-index: -1;
	border-radius: 6px;
	webkit-appearance:none;
	appearance: none;
}
.counters__type-selector input.calc__energy-type {
	border-radius: 40px;
    margin: 0;
    background: #F3F1FF;
    width: 520px;
    height: 80px;
    padding: 0px 10px;
    position: relative;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    transition: background 350ms ease;
}
.counters__type-selector label {font-weight:400}
.counters__type-selector input.calc__energy-type:checked {
    background: #F3F1FF;
    
}
.counters__type-selector input.calc__energy-type::before{
	content: 'Вода';
    width: 45%;
    height: 80%;
    background: #9F8FFF;
    position: absolute;
    border-radius: 40px;
    text-align: center;
    vertical-align: middle;
    padding: 18px;
    transition: 250ms;
    font-size: 20px;
    color: #fff;
    z-index: 1;
}

.counters__type-selector input:hover{
    webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 3px var(--accent);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 3px var(--accent);
}


.counters__type-selector input.calc__energy-type:checked:before{
	transform: translateX(114%);
    content: 'Тепло';
}
.counters__type-selector input.calc__energy-type::after{
	content: 'тепло';
    width: 45%;
    height: 36px;
    background: none;
    position: absolute;
    border-radius: 19px;
    text-align: center;
    transition: 250ms;
    font-size: 24px;
    color: #535353;
    transform: translateX(114%);
    z-index: 0;
}
.counters__type-selector input.calc__energy-type:checked:after{
	transform: translateX(0px);
	content: 'Вода';
}
.calculator__top-selectors {height: 100%;display: flex;flex-direction: column;justify-content: start;}
.counters-wrapper .name {
	font-size: 16px;
	font-weight: 400;
	 /* 120% */
}
.calculator__counters-wrapper {gap:16px}
.calculator__counters-wrapper .schetchiki__item .btn {
	font-size: 14px;
	padding: 8px;
}
.counters-wrapper {
	background: var(--soft-light-gray);
	padding: 16px;
	border-radius: var(--main-border-radius);
	grid-gap: 8px;
	grid-template-columns: repeat(auto-fill,minmax(160px,1fr));
	grid-auto-flow: column;
	grid-auto-columns: minmax(160px,1fr);
	grid-template-rows:  1fr 1fr;
	overflow-x: auto;
	overflow-y: hidden;
	width: 100%;
	transition: 250ms;
}
.counters-wrapper .schetchiki__item .schetchiki__buttons {
	gap:5px;
}
.calculator__counters-wrapper .schetchiki__item {display:flex;padding: 12px;width: 100%;}

.btn-calculate {
    margin: 15px auto 0px;
    width: 100%;
    font-size: 22px;
    font-size: clamp(18px, calc(var(--index)*1.15), 24px);
}
.calc__total-inner {
	gap: 10px;
	grid-template-columns: 0.7fr 1fr;
	grid-template-columns: auto;
	display: flex;
	justify-content: center;
	
}

.calc__summ-description {
    margin:0px;
    font-size: 20px;
    font-weight: 700;
    min-width: 210px;
    line-height: 135%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 15px;
    background-color: #fff;
    border-radius: 16px;
    padding: 20px;
    text-align: left;
}
.final_summ {
    background-color: inherit;
}
.calc__summ-description span {
    font-weight:300;
    text-align: left;
    
}
.calc-list-container .description{
    font-weight: 700;
    font-size: 24px;
}
.calc__summ-description:nth-child(6) {
	font-weight: 700;
	width: 100%;
	display: inline-flex;
	justify-content: space-between;
}
.calc__summ-description:nth-child(6) span {
	font-weight: 400;
	font-size: 24px
}
.calc-list-container ul{
	display: flex;
	gap: 10px 40px;
	list-style: auto;
	flex-wrap: wrap;
    padding-inline-start: 35px;
}
.calc-list-container {
    display: flex;
    overflow: auto;
    max-height: 20vh;
    flex-direction: column; 
    
}
.calc-list-container ul li {
	font-weight: 400;
    font-size: 20px;
}

.popup__headline{
    font-weight: 500;
    font-size: 24px;
    line-height: 30px;
    margin-top: 0;
    font-family: Rubik;
    margin: var(--margin-text, 20px 0);
}

#calculator-popup .popup__inner{
	width: auto;
    height: auto;
    background-color: #F6F9FE;
    max-height: 100vh;
    overflow-y: scroll;
}
#calculator-popup h3{
font-size: 36px;
font-weight: 400;
line-height: normal;
}

.services__labels {
    display: flex;
    justify-content: space-between;
}


.counts-list{
    
}
.calculator__services-selector{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 30px;
}
.calculator__services-selector select {
    width: 70%;
    height: 80px;
    font-size: 24px;
}

.calculator__services-selector p{
    height: max-content;
    font-size: 28px;
    font-weight: 600;
    line-height: 1;
    text-align: left;

}

.counts-list p{
    height: max-content;
    font-size: 28px;
    font-weight: 600;
    line-height: 1;
    text-align: left;
}
.counts-list_water{
    width: 100%;
    display: flex;
    gap: 20px;
    padding: 20px 0px;
    overflow-x: scroll;
    max-height: 450px;
    flex-wrap: wrap;
    justify-content: flex-start;
}
.counts-list_warm{
    width: 100%;
    display: flex;
    gap: 20px;
    padding: 20px 0px;
    overflow-x: scroll;
    max-height: 450px;
    flex-wrap: wrap;
    justify-content: flex-start;
}
.counts-list_active{
    display: flex;
    gap: 20px;
}

.count-item{
    position: relative;
    max-width: 304px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    background-color: #F3F1FF;
    border-radius: 20px;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

.count-item_image{
    width: 240px;
    height: 174px;
    background-image: url(/img/counts/00_norma-svkm-15u.webp);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    
}
.count-item_brand{
    font-size: 24px;
    font-weight: 400;
}
.count-item_brand{
    
}
.count-item_button_link {
    color: #fff;
    max-width: 280px;
    font-size: 20px;
    padding: 10px 97px;
    background-color: #9F8FFF;
    border-radius: 16px;
}
.count-item_button--check {
    color: #fff;
    max-width: 280px;
    font-size: 20px;
    padding: 10px 97px;
    background-color: #9F8FFF;
    border-radius: 16px;
    display: flex;
}
.count-item_button--check:hover{
    cursor: pointer;
}


.hidden {
    display: none;
}
.active_calc{
    display: flex;
}
.count-item_button input {
    display: none;
}
.count-item_button label::after{
    content: "";
    display: none;
    position: absolute;
    background-color: #9F8FFF;
    background-image: url(/assets/components/img/counts/material-symbols_check.png);
    background-position: center;
    background-size: 24px;
    width: 48px;
    top: 20px;
    height: 48px;
    right: 48px;
    border-radius: 50%;
    background-repeat: no-repeat;
    
}
.count-item_button input:checked ~ label::after{
    display: flex;
}
.count-item_button input:checked ~ label {
    background-color: #EBEBEB;
    color: #9F8FFF;
}


.select_type{
    position: relative;
}
.type_house:hover{
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 3px var(--accent);
    transition: .3s;
}
.select_type input{
    display: none;
}
.type_house{
    border-radius: 40px;
    margin: 0;
    background: #F3F1FF;
    width: 520px;
    height: 80px;
    padding: 0px 10px;
    position: relative;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    transition: background 350ms ease;
}
.select_type label::before{
    content: "Квартира";
    position: absolute;
    left: 2%;
    transition: .3s;
    font-size: 20px;
    width: 45%;
    height: 80%;
    text-align: center;
    font-weight: 400;
    border-radius: 40px;
    background-color: #9F8FFF;
    color: #fff;
    padding: 18px 0px;
    z-index: 1;
}
.select_type label::after{
    content: "Частный дом";
    position: absolute;
    right: 2%;
    transition: .3s;
    font-size: 20px;
    padding: 18px 0px;
    width: 45%;
    height: 80%;
    text-align: center;
    font-weight: 400;
    border-radius: 40px;
    color: #535353;
    
}

.select_type input:checked ~ label::before{
    transform: translateX(265px);
    transition: .3s;
    content: "Частный дом";
}
.select_type input:checked ~ label::after{
    transform: translateX(-265px);
    transition: .3s;
    
    content: "Квартира";
}