/* Start:/kalkulyator/styles.css?17827203983987*/
/* global*/

/*
*,
*::before,
*::after{
box-sizing:border-box;
margin:0;
padding:0;
}
*/

:root{
--blue:#0755e6;
--blue-hover:#0a6bff;
--green:#16a34a;
--text-gray:#6b7280;
--border:#e6eefb;
--bg-soft:#f1f5fb;
--bg-panel:#f8fbff;
--shadow-soft:0 6px 18px rgba(0,0,0,.05);
--shadow-hover:0 6px 14px rgba(0,0,0,.08);
--shadow-strong:0 20px 60px rgba(20,30,60,0.08);
}

.calc{
max-width:900px;
margin:40px auto;
padding:32px;
background:#fff;
border-radius:14px;
box-shadow:var(--shadow-strong);
font-family:'Inter',Arial,sans-serif;
}

/* grid */

.calc__grid{
display:flex;
gap:28px;
align-items:flex-start;
}

.calc__left{
flex:1;
}

.calc__right{
width:300px;
min-width:260px;
background:var(--bg-panel);
padding:18px;
border-radius:12px;
}

/* block */

.calc__block{
margin-bottom:16px;
width:100%;
}

.calc__label{
font-size:16px;
color:var(--text-gray);
margin:10px 0 6px;
font-weight:600;
}

/* segment buttons */

.calc__segment{
display:flex;
flex-wrap:wrap;
gap:8px;
margin-bottom:8px;
}

.calc__segment button{
flex:1;
padding:11px;
border-radius:10px;
border:1px solid var(--border);
background:var(--bg-soft);
cursor:pointer;
font-weight:800;
transition:.2s ease;
}

.calc__segment button:hover{
transform:translateY(-2px);
box-shadow:var(--shadow-hover);
}

.calc__segment button.active{
background:var(--blue);
color:#fff;
box-shadow:0 8px 18px rgba(7,85,230,.25);
}

/* toogle */

.calc__toggle{
display:flex;
gap:10px;
}

.calc__toggle div{
flex:1;
text-align:center;
padding:10px;
border-radius:8px;
border:1px solid var(--border);
background:#fff;
cursor:pointer;
font-weight:600;
transition:.2s ease;
}

.calc__toggle div:hover{
transform:translateY(-2px);
box-shadow:var(--shadow-hover);
}

.calc__toggle .active{
background:var(--blue);
color:#fff;
}

/* price box */

.calc__priceBox{
text-align:center;
background:#fff;
padding:18px;
border-radius:10px;
box-shadow:var(--shadow-soft);
}

.calc__price{
font-size:34px;
font-weight:900;
color:var(--green);
letter-spacing:.5px;
margin-top:4px;
}

/* small text */

.calc__small{
font-size:16px;
color:var(--text-gray);
margin-top:6px;
}

/* button */

.calc__btn{
display:none;
margin-top:14px;
padding:14px;
background:var(--blue-hover);
color:#fff;
font-weight:700;
text-align:center;
border-radius:10px;
cursor:pointer;
transition:.2s ease;
user-select:none;
}

.calc__btn:hover{
background:var(--blue);
transform:translateY(-2px);
box-shadow:0 12px 22px rgba(0,0,0,.15);
}

/* slider */

.calc__slider{
width:100%;
margin-top:14px;
cursor:pointer;
height:8px;
appearance:none;
background:var(--border);
border-radius:6px;
outline:none;
}

/* track */

.calc__slider::-webkit-slider-runnable-track{
height:8px;
border-radius:6px;
}

/* thumb */

.calc__slider::-webkit-slider-thumb{
appearance:none;
width:22px;
height:22px;
border-radius:50%;
background:var(--blue);
cursor:pointer;
margin-top:-7px;
box-shadow:0 6px 16px rgba(0,0,0,.2);
transition:.15s ease;
}

.calc__slider::-webkit-slider-thumb:hover{
transform:scale(1.08);
}

/* firefox */

.calc__slider::-moz-range-thumb{
width:22px;
height:22px;
border:none;
border-radius:50%;
background:var(--blue);
cursor:pointer;
box-shadow:0 6px 16px rgba(0,0,0,.2);
}

/* range steps */

.calc__range-steps{
display:flex;
justify-content:space-between;
margin-top:10px;
font-size:12px;
color:var(--text-gray);

padding:0 11px;   
position:relative;
}

.calc__range-steps span{
position:relative;
}

/* range */

.calc__range-steps span::before{
content:'';
position:absolute;
top:-10px;
left:50%;
transform:translateX(-50%);
width:2px;
height:6px;
background:#cbd5e1;
}

/* mobile */

@media(max-width:900px){

.calc__grid{
flex-direction:column;
}

.calc__right{
width:100%;
}

.calc{
margin:20px;
padding:24px;
}

}

/* деления под ползунком */

.calc__range-steps{
display:flex;
justify-content:space-between;
margin-top:8px;
font-size:12px;
color:#6b7280;
padding:0 4px;
position:relative;
}

.calc__range-steps span{
position:relative;
}


/* End */
/* /kalkulyator/styles.css?17827203983987 */