/* Калькулятор стоимости забора — /calculator
   Токены цвета/шрифта взяты из Figma (mobile adaptive), см. ТЗ. */
.fence-calc {
    --fc-big-stone: #193243;
    --fc-blue-dianne: #213748;
    --fc-sandwisp: #F5E8A9;
    --fc-mystic: #DDE5EA;
    --fc-white: #FFFFFF;
    --fc-desert-storm: #F8F8F6;
    --fc-sisal: #D6D1BE;
    --fc-slate-gray: #7C8A96;
    --fc-tacha: #D2B65F;
    --fc-soft-amber: #D8D0BA;
    --fc-wheat: #F2E4A7;
    --fc-alto: #D7D7D7;
    --fc-spring-wood: #FBFBF8;
    --fc-bone: #E5DDC5;
    --fc-athens-gray: #F3F5F7;
    --fc-pale-sky: #687784;
    --fc-red: #B3261E;

    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    width: 100%;
    max-width: 650px;
    margin: 0 auto;
    padding: 0 12px 36px;
    box-sizing: border-box;
    font-family: 'Inter', Arial, sans-serif;
}
.fence-calc * { box-sizing: border-box; }

.fence-calc__section {
    width: 100%;
}

/* Заголовок */
.fence-calc__hero {
    background: var(--fc-big-stone);
    border: 1px solid var(--fc-blue-dianne);
    box-shadow: 0px 16px 36px rgba(20, 31, 42, 0.18);
    border-radius: 24px;
    padding: 19px 20px 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.fence-calc__title {
    margin: 0;
    font-weight: 700;
    font-size: 28px;
    line-height: 1.25;
    color: var(--fc-sandwisp);
}
.fence-calc__subtitle {
    margin: 0;
    font-weight: 400;
    font-size: 13px;
    line-height: 22px;
    color: var(--fc-mystic);
}

/* Карточка с белым фоном (материал, доп.элементы) */
.fence-calc__card {
    background: var(--fc-white);
    box-shadow: 0px 10px 26px rgba(18, 32, 48, 0.1);
    border-radius: 24px;
    overflow: hidden;
}
.fence-calc__card-head {
    padding: 19px 20px 20px;
    background: linear-gradient(90deg, #F7F0CF 0%, #F8F8F6 100%);
}
.fence-calc__h2 {
    margin: 0;
    font-weight: 700;
    font-size: 18px;
    line-height: 24px;
    color: var(--fc-blue-dianne);
}
.fence-calc__card-body {
    padding: 20px;
    background: var(--fc-desert-storm);
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.fence-calc__h3 {
    margin: 0;
    font-weight: 700;
    font-size: 16px;
    line-height: 23px;
    color: var(--fc-blue-dianne);
}

/* Пилюли выбора (тип забора, варианты характеристик) */
.fence-calc__pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.fence-calc__pill {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 14px;
    min-height: 44px;
    background: var(--fc-white);
    border: 1px solid var(--fc-soft-amber);
    border-radius: 14px;
    font-weight: 700;
    font-size: 13px;
    line-height: 16px;
    color: var(--fc-blue-dianne);
    text-align: center;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
    flex: 1 1 auto;
}
.fence-calc__pill:hover {
    border-color: var(--fc-tacha);
}
.fence-calc__pill.is-active {
    background: var(--fc-blue-dianne);
    border-color: var(--fc-tacha);
    color: var(--fc-sandwisp);
}
.fence-calc__pill.is-auto {
    cursor: default;
}

/* Шаг параметров (label + группа пилюль) */
.fence-calc__step {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.fence-calc__label {
    font-weight: 500;
    font-size: 13px;
    line-height: 18px;
    color: var(--fc-blue-dianne);
}
.fence-calc__hint {
    font-weight: 400;
    font-size: 12px;
    color: var(--fc-slate-gray);
}

/* Текстовые/числовые поля */
.fence-calc__input,
.fence-calc__select {
    width: 100%;
    height: 44px;
    padding: 0 14px;
    background: var(--fc-white);
    border: 1px solid var(--fc-sisal);
    border-radius: 12px;
    font-family: inherit;
    font-weight: 400;
    font-size: 14px;
    color: var(--fc-blue-dianne);
    appearance: none;
    -webkit-appearance: none;
}
.fence-calc__select {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3e%3cpath fill='%23213748' d='M1 1l5 5 5-5'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 32px;
}
.fence-calc__input::placeholder { color: var(--fc-slate-gray); }
.fence-calc__input:focus,
.fence-calc__select:focus {
    outline: none;
    border-color: var(--fc-tacha);
}

.fence-calc__row2 {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}
.fence-calc__row2 > * { flex: 1 1 220px; min-width: 0; }

/* Итоговая стоимость */
.fence-calc__result {
    background: var(--fc-blue-dianne);
    box-shadow: 0px 10px 24px rgba(18, 32, 48, 0.12);
    border-radius: 24px;
    padding: 20px;
    display: none;
    flex-direction: column;
    gap: 8px;
}
.fence-calc__result.is-visible { display: flex; }
.fence-calc__result-label {
    font-weight: 700;
    font-size: 12px;
    line-height: 14px;
    color: var(--fc-wheat);
    text-transform: uppercase;
    letter-spacing: .02em;
}
.fence-calc__result-price {
    font-weight: 700;
    font-size: 30px;
    line-height: 1.25;
    color: var(--fc-white);
}
.fence-calc__result-desc {
    font-weight: 400;
    font-size: 13px;
    line-height: 20px;
    color: var(--fc-mystic);
}
.fence-calc__result.is-error .fence-calc__result-price {
    font-size: 18px;
    color: var(--fc-sandwisp);
}

/* Форма контакта */
.fence-calc__contact {
    background: var(--fc-white);
    box-shadow: 0px 10px 26px rgba(18, 32, 48, 0.1);
    border-radius: 24px;
    padding: 20px;
}
.fence-calc__contact-inner {
    background: var(--fc-spring-wood);
    border: 1px solid var(--fc-bone);
    border-radius: 20px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.fence-calc__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 48px;
    background: var(--fc-tacha);
    border: none;
    border-radius: 999px;
    font-weight: 700;
    font-size: 14px;
    color: var(--fc-blue-dianne);
    cursor: pointer;
}
.fence-calc__btn:disabled { opacity: .6; cursor: default; }
.fence-calc__disclaimer {
    background: var(--fc-athens-gray);
    border-radius: 12px;
    padding: 11px 12px;
    font-weight: 400;
    font-size: 11px;
    line-height: 19px;
    color: var(--fc-pale-sky);
}
.fence-calc__field-error {
    display: none;
    font-size: 12px;
    color: var(--fc-red);
}
.fence-calc__field-error.is-visible { display: block; }
.fence-calc__submit-message {
    display: none;
    font-size: 13px;
    color: var(--fc-blue-dianne);
    background: #E9F5EC;
    border-radius: 12px;
    padding: 12px;
}
.fence-calc__submit-message.is-visible { display: block; }

@media (max-width: 480px) {
    .fence-calc__title { font-size: 22px; }
    .fence-calc__result-price { font-size: 24px; }
    .fence-calc__pill { font-size: 12px; padding: 10px 12px; }
}