/* ===== Quiz Block (лендинг: онлайн-расчет) ===== */

.calculator{
    --quiz-accent: var(--color-brand-500);
    position: relative;
    padding: var(--spacing-24) var(--spacing-20);
    background: linear-gradient(to bottom, var(--color-brand-50), var(--color-neutral-50));
    overflow: hidden
}
@media (min-width: 768px) and (max-width: 1023px){.calculator{
        padding: var(--spacing-20) var(--spacing-10)
    }}
@media (max-width: 767px){.calculator{
        padding: var(--spacing-24) var(--spacing-4)
    }}
.calculator__blur-circle{
    position: absolute;
    top: 0;
    left: 0;
    width: 457px;
    height: 457px;
    border-radius: 50%;
    background: var(--color-transparent-brand-10);
    filter: blur(50px);
    pointer-events: none
}
.calculator__bagel{
    position: absolute;
    bottom: 24px;
    right: 0;
    width: 125px;
    height: 250px;
    border-radius: 125px 0 0 125px;
    border: var(--border-lg) solid var(--color-brand-50);
    border-left: 0;
    pointer-events: none
}
@media (max-width: 767px){.calculator__bagel{
        display: none
    }}
.calculator__container{
    position: relative;
    max-width: 960px;
    margin-inline: auto;
    padding: 60px 80px;
    background: var(--color-transparent-white-70);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    border: var(--border-s) solid var(--color-neutral-100-stroke);
    border-radius: var(--radius-lg);
    box-shadow: var(--glass-inner-shadow-1), var(--glass-inner-shadow-2), var(--glass-inner-shadow-3);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-10)
}
@media (min-width: 768px) and (max-width: 1023px){.calculator__container{
        padding: var(--spacing-10) var(--spacing-8)
    }}
@media (max-width: 767px){.calculator__container{
        padding: var(--spacing-8) var(--spacing-7);
        gap: var(--spacing-10)
    }}
.calculator__header{
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4)
}
@media (max-width: 767px){.calculator__header{
        gap: var(--spacing-5)
    }}
.calculator__tag{
    display: inline-flex;
    align-self: flex-start;
    padding: var(--spacing-2) var(--spacing-4);
    border-radius: var(--radius-full);
    background: var(--color-transparent-brand-10);
    font-family: var(--font-base);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-xs);
    color: var(--quiz-accent);
    text-transform: uppercase
}
.calculator__title{
    font-family: var(--font-heading);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-xl);
    color: var(--color-brand-850);
    margin: 0
}
@media (max-width: 767px){.calculator__title{
        font-size: var(--font-size-l);
        line-height: 40px
    }.calculator__title br{
        display: none
    }}
.calculator__subtitle{
    font-family: var(--font-base);
    font-size: var(--font-size-m);
    font-weight: var(--font-weight-light);
    line-height: var(--line-height-base);
    color: var(--color-neutral-700);
    margin: 0
}
@media (max-width: 767px){.calculator__subtitle{
        font-size: var(--font-size-s);
        font-weight: var(--font-weight-regular);
        line-height: var(--line-height-s)
    }}
.calculator__form{
    display: flex;
    flex-direction: column;
    gap: var(--spacing-10)
}
.calculator__question{
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4)
}
.calculator__question--bordered{
    border-top: var(--border-s) solid var(--color-neutral-100-stroke);
    padding-top: var(--spacing-10)
}
.calculator__question-title{
    font-family: var(--font-base);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semi);
    line-height: var(--line-height-base);
    color: var(--color-brand-800);
    margin: 0
}
.calculator__radio{
    position: absolute;
    opacity: 0;
    pointer-events: none
}
.calculator__tabs-big{
    display: grid;
    grid-template-columns:repeat(3, 1fr);
    gap: var(--spacing-6)
}
@media (max-width: 767px){.calculator__tabs-big{
        grid-template-columns:1fr;
        gap: var(--spacing-6)
    }}
.calculator__tab-big{
    cursor: pointer
}
.calculator__tab-big-inner{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-2);
    height: 160px;
    padding: 30px 34px;
    border: var(--border-md) solid var(--color-neutral-100-stroke);
    border-radius: var(--radius-lg);
    background: var(--color-neutral-50);
    transition: border-color .3s ease, background-color .3s ease, color .3s ease
}
.calculator__tab-big .calculator__radio:checked ~ .calculator__tab-big-inner{
    border-color: var(--quiz-accent);
    background: var(--color-transparent-brand-5)
}
.calculator__tab-big-icon{
    display: block;
    width: 52px;
    height: 52px;
    background-color: var(--color-neutral-500);
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    transition: background-color .3s ease
}
@media (max-width: 767px){.calculator__tab-big-icon{
        width: 52px;
        height: 52px
    }}
.calculator__tab-big .calculator__radio:checked ~ .calculator__tab-big-inner .calculator__tab-big-icon{
    background-color: var(--quiz-accent)
}
.calculator__tab-big-text{
    font-family: var(--font-base);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semi);
    line-height: var(--line-height-base);
    color: var(--color-brand-800);
    text-align: center;
    white-space: nowrap
}
.calculator__tab-big .calculator__radio:checked ~ .calculator__tab-big-inner .calculator__tab-big-text{
    color: var(--quiz-accent)
}
.calculator__tabs-small{
    display: grid;
    grid-template-columns:repeat(3, 1fr);
    gap: var(--spacing-6)
}
@media (max-width: 767px){.calculator__tabs-small{
        grid-template-columns:1fr;
        gap: var(--spacing-6)
    }}
.calculator__tab-small{
    cursor: pointer
}
.calculator__tab-small-inner{
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px 26px;
    border: var(--border-md) solid var(--color-neutral-100-stroke);
    border-radius: var(--radius-full);
    background: var(--color-neutral-50);
    font-family: var(--font-base);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semi);
    line-height: var(--line-height-base);
    color: var(--color-brand-800);
    text-align: center;
    white-space: nowrap;
    transition: border-color .3s ease, background-color .3s ease, color .3s ease
}
.calculator__tab-small .calculator__radio:checked ~ .calculator__tab-small-inner{
    border-color: var(--quiz-accent);
    background: var(--color-transparent-brand-5);
    color: var(--quiz-accent)
}
.calculator__form-row{
    display: flex;
    align-items: flex-end;
    gap: var(--spacing-6);
    padding-top: var(--spacing-5)
}
@media (max-width: 767px){.calculator__form-row{
        flex-direction: column;
        align-items: stretch
    }}
.calculator__field{
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0
}
.calculator__label{
    padding: var(--spacing-1) var(--spacing-1) var(--spacing-2);
    font-family: var(--font-base);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-xs);
    color: var(--color-brand-850)
}
.calculator__input{
    height: 52px;
    padding: 0 var(--spacing-6);
    border: var(--border-s) solid var(--color-neutral-100-stroke);
    border-radius: var(--radius-full);
    background: var(--color-neutral-0);
    font-family: var(--font-base);
    font-size: var(--font-size-xs);
    line-height: var(--line-height-xs-alt);
    color: var(--color-brand-850);
    outline: none;
    transition: border-color .3s ease
}
.calculator__input::placeholder{
    color: var(--color-neutral-500)
}
.calculator__input:focus{
    border-color: var(--quiz-accent)
}
.calculator__submit{
    height: 52px;
    padding: 0 var(--spacing-6);
    white-space: nowrap;
    flex-shrink: 0
}
.calculator__disclaimer{
    font-family: var(--font-base);
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-2xs);
    color: var(--color-neutral-600);
    text-align: center;
    margin: 0;
    padding-top: var(--spacing-2)
}
.calculator__disclaimer-link{
    color: var(--color-neutral-600);
    text-decoration: underline;
    transition: color .3s ease
}
.calculator__disclaimer-link:hover{
    color: var(--quiz-accent)
}

.calculator__input--error{
    border-color: var(--color-red)
}
@media (max-width: 767px){.calculator__tab-big-inner{
        height: auto;
        padding: var(--spacing-6)
    }.calculator__tab-small-inner{
        white-space: normal
    }.calculator__submit{
        width: 100%
    }}

/* Перебиваем глобальные стили h1/h2 сайта: заголовок как в лендинге */
.calculator__title{
    text-align: left;
    padding: 0
}