/*
 * Единый калькулятор лизинга. Все селекторы строго внутри .vcalc —
 * компонент встраивается в шаблон Аспро КС 3.0 и не должен конфликтовать
 * с его стилями. Цвета подхватывают тему Аспро через фоллбэк-переменные.
 */
.vcalc {
    --vcalc-accent: var(--theme-base-color, #6c5ce7);
    --vcalc-text: #2c3e50;
    --vcalc-muted: #7a8194;
    --vcalc-border: #e3e6ef;
    --vcalc-bg: #ffffff;
    --vcalc-track: #e8eaf2;
    --vcalc-success: #1faf5a;
    --vcalc-warn: #eb5e28;
    --vcalc-radius: 10px;

    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 32px;
    color: var(--vcalc-text);
    font-size: 16px;
    line-height: 1.45;
}
@media (max-width: 860px) {
    .vcalc { grid-template-columns: minmax(0, 1fr); }
}

/* hidden обязан скрывать всегда (author display: grid иначе победил бы UA-правило) */
.vcalc [hidden] { display: none !important; }

/* --- Группы полей --- */
.vcalc__group { margin: 0 0 28px; }
.vcalc__group:last-child { margin-bottom: 0; }
.vcalc__group-title { margin: 0 0 18px; font-size: 20px; font-weight: 700; }

.vcalc__field { margin: 0 0 22px; }
.vcalc__field:last-child { margin-bottom: 0; }
.vcalc__field-head { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; flex-wrap: wrap; }
.vcalc__label { font-weight: 600; margin-right: auto; }
.vcalc__label-pct { color: var(--vcalc-accent); font-weight: 700; }

.vcalc__nds-check { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--vcalc-muted); cursor: pointer; -webkit-user-select: none; user-select: none; }
.vcalc__nds-check input { width: 16px; height: 16px; accent-color: var(--vcalc-accent); cursor: pointer; margin: 0; }

.vcalc__value { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--vcalc-border); border-radius: 8px; padding: 6px 12px; background: var(--vcalc-bg); }
.vcalc__value input { width: 110px; border: 0; padding: 0; outline: 0; font: inherit; font-weight: 700; text-align: right; color: inherit; background: transparent; -moz-appearance: textfield; appearance: textfield; }
.vcalc__value input::-webkit-outer-spin-button,
.vcalc__value input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.vcalc__value:focus-within { border-color: var(--vcalc-accent); }

/* --- Слайдер (нативный range, заливка через --vcalc-fill из JS) --- */
.vcalc__slider { position: relative; padding: 8px 0 36px; }
/* без кликабельных тиков — подписи шкалы ближе к ползунку */
.vcalc__slider--bare { padding-bottom: 8px; }
.vcalc__slider input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    display: block;
    width: 100%;
    height: 4px;
    margin: 0;
    border: 0;
    border-radius: 2px;
    outline: none;
    cursor: pointer;
    background: linear-gradient(to right,
        var(--vcalc-accent) var(--vcalc-fill, 0%),
        var(--vcalc-track) var(--vcalc-fill, 0%));
}
.vcalc__slider input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 18px; height: 18px; border-radius: 50%;
    background: #fff; border: 2px solid var(--vcalc-accent);
    box-shadow: 0 1px 4px rgba(0, 0, 0, .18); cursor: grab;
}
.vcalc__slider input[type="range"]::-moz-range-thumb {
    width: 18px; height: 18px; border-radius: 50%;
    background: #fff; border: 2px solid var(--vcalc-accent);
    box-shadow: 0 1px 4px rgba(0, 0, 0, .18); cursor: grab;
}
.vcalc__slider input[type="range"]::-moz-range-track { background: transparent; }
.vcalc__slider input[type="range"]:focus-visible::-webkit-slider-thumb {
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--vcalc-accent) 25%, transparent), 0 1px 4px rgba(0, 0, 0, .18);
}
.vcalc__slider input[type="range"]:focus-visible::-moz-range-thumb {
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--vcalc-accent) 25%, transparent), 0 1px 4px rgba(0, 0, 0, .18);
}

.vcalc__tick {
    position: absolute; top: 23px; transform: translateX(-50%);
    padding: 0; border: 0; background: transparent;
    font: inherit; font-size: 12px; line-height: 1; color: var(--vcalc-muted); cursor: pointer;
}
.vcalc__tick::before { content: ''; display: block; width: 2px; height: 5px; margin: 0 auto 3px; background: var(--vcalc-border); }
.vcalc__tick:hover { color: var(--vcalc-accent); }

/* Слайдер удорожания: зоны вокруг ключевой ставки ЦБ.
   Слева от «ЦБ −3%» — красный→жёлтый (нереалистично низко, лизинг откажет), правее — нейтраль. */
.vcalc__slider--zones input[type="range"] {
    background: linear-gradient(to right,
        #e74c3c 0%,
        #f4b400 var(--vcalc-warn-stop, 28%),
        #e8eaf2 var(--vcalc-gray-stop, 50%),
        #e8eaf2 100%);
}
.vcalc__cb-mark {
    position: absolute; top: 23px; transform: translateX(-50%);
    font-size: 11px; font-weight: 700; color: var(--vcalc-accent); white-space: nowrap; pointer-events: none;
}
.vcalc__cb-mark::before { content: ''; display: block; width: 2px; height: 5px; margin: 0 auto 3px; background: var(--vcalc-accent); }

/* Слайдер аванса: ≥20% зелёный, 10–20 жёлтый, 5–10 рыже-красный, <5 красный (диапазон 0–49 фиксирован) */
.vcalc__slider--advance input[type="range"] {
    background: linear-gradient(to right,
        #e74c3c 0%,
        #e74c3c 9%,
        #e8743b 18%,
        #f4c20d 30%,
        #f4c20d 40.8%,
        #2ecc71 45%,
        #2ecc71 100%);
}

.vcalc__scale { display: flex; justify-content: space-between; font-size: 14px; color: var(--vcalc-muted); }

/* --- Налогообложение --- */
.vcalc__select {
    width: 100%; height: 46px; border: 1px solid var(--vcalc-border); border-radius: 8px;
    padding: 0 42px 0 14px; font: inherit; color: inherit; cursor: pointer; outline: none;
    -webkit-appearance: none; appearance: none;
    background-color: var(--vcalc-bg);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%237a8194' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
}
.vcalc__select:focus { border-color: var(--vcalc-accent); }

/* Налогообложение: селект (фикс. ширина) и единственный параметр в одну строку */
.vcalc__tax-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.vcalc__tax-row .vcalc__select { flex: 0 0 300px; width: 300px; max-width: 100%; }
/* параметр занимает остаток строки, поле ввода прижато к правому краю — не съезжает и не переносится */
.vcalc__tax-params { display: flex; align-items: center; justify-content: flex-end; flex: 1 1 auto; }
.vcalc__rate { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.vcalc__rate-name { font-size: 14px; font-weight: 600; }
.vcalc__rate .vcalc__value input { width: 54px; }

/* --- Предупреждения --- */
.vcalc__warning { margin-top: 14px; padding: 12px 14px; border-radius: 8px; font-size: 14px; line-height: 1.4; }
.vcalc__warning--orange { background: rgba(235, 94, 40, .08); border: 1px solid rgba(235, 94, 40, .25); color: var(--vcalc-warn); }

/* --- Результаты --- */
.vcalc__card { border: 1px solid var(--vcalc-border); border-radius: var(--vcalc-radius); background: var(--vcalc-bg); padding: 20px 24px; margin: 0 0 16px; }
.vcalc__card-title { display: block; font-size: 14px; text-transform: uppercase; letter-spacing: .04em; color: var(--vcalc-muted); margin-bottom: 10px; }
.vcalc__card-hint { text-transform: none; letter-spacing: 0; font-size: 11px; }

/* Редактируемый ежемесячный платёж (обратный пересчёт ставки) */
.vcalc__pay-input {
    width: 150px; max-width: 60%;
    border: 1px solid transparent; border-bottom: 1px dashed var(--vcalc-border); border-radius: 4px;
    padding: 1px 6px; font: inherit; font-size: 24px; font-weight: 700;
    color: var(--vcalc-text); background: transparent; outline: none;
}
.vcalc__pay-input:hover,
.vcalc__pay-input:focus { border: 1px solid var(--vcalc-accent); }
.vcalc__pay-input--credit { color: var(--vcalc-muted); }
.vcalc__row { margin: 6px 0 0; font-size: 18px; }
.vcalc__row b { font-size: 24px; font-weight: 700; }
.vcalc__row--credit, .vcalc__row--credit b { color: var(--vcalc-muted); }
.vcalc__row--savings, .vcalc__row--savings b { color: var(--vcalc-success); }
.vcalc__row-label { font-weight: 400; }
.vcalc__note { margin: 4px 0 0; font-size: 14px; color: var(--vcalc-muted); }
.vcalc__details { margin: 6px 0 0 14px; font-size: 14px; color: var(--vcalc-muted); line-height: 1.5; }

.vcalc__card--accent { border: 2px solid var(--vcalc-accent); background: color-mix(in srgb, var(--vcalc-accent) 3%, #fff); }
.vcalc__net { color: var(--vcalc-accent); font-size: 28px; }
.vcalc__net--credit { color: var(--vcalc-text); }

/* --- Вердикт (внутри карточки «Реальные расходы», только full) --- */
.vcalc__verdict { margin: 14px 0 0; padding: 14px 0 0; border-top: 1px solid rgba(0, 0, 0, .08); font-weight: 600; text-align: center; line-height: 1.5; }
.vcalc__verdict--lease { color: var(--vcalc-success); }
.vcalc__verdict--credit { color: var(--vcalc-accent); }
.vcalc__verdict--equal { color: var(--vcalc-muted); }

/* --- Нефинансовые преимущества лизинга (блок на всю ширину снизу) --- */
.vcalc__benefits { grid-column: 1 / -1; margin-top: 8px; padding: 20px 24px; border: 1px solid var(--vcalc-border); border-radius: var(--vcalc-radius); background: color-mix(in srgb, var(--vcalc-accent) 3%, #fff); }
.vcalc__benefits-title { display: block; font-size: 14px; text-transform: uppercase; letter-spacing: .04em; color: var(--vcalc-muted); margin-bottom: 14px; }
.vcalc__benefits-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 8px 24px; margin: 0; padding: 0; list-style: none; }
.vcalc__benefits-list li { position: relative; padding-left: 26px; line-height: 1.45; text-decoration: none !important; }
.vcalc__benefits-list li::before {
    content: '✓'; position: absolute; left: 0; top: 0;
    color: var(--vcalc-success); font-weight: 700;
    text-decoration: none !important; border: 0 !important; box-shadow: none !important; background: none !important;
}
.vcalc__benefits-list li::after { content: none !important; }
.vcalc__benefits .vcalc__actions { margin-top: 18px; }

/* --- Действия --- */
.vcalc__actions { margin-top: 24px; text-align: center; }
.vcalc__btn { display: inline-block; padding: 14px 32px; border-radius: 8px; background: var(--vcalc-accent); color: #fff; font-weight: 700; text-decoration: none; transition: opacity .15s; }
.vcalc__btn:hover { opacity: .88; color: #fff; text-decoration: none; }
.vcalc__btn:visited,
.vcalc__btn:focus { color: #fff; text-decoration: none; }
.vcalc__compare-link { display: block; margin-top: 14px; color: var(--vcalc-accent); font-weight: 600; text-decoration: underline; }
.vcalc__compare-link:visited { color: var(--vcalc-accent); }
.vcalc__compare-link:hover,
.vcalc__compare-link:focus { color: var(--vcalc-accent); text-decoration: none; }

/* --- Промежуточные расчёты с формулами (блок отладки, ?debug=1) --- */
.vcalc__debug { grid-column: 1 / -1; margin-top: 8px; padding: 18px 22px; border: 1px dashed var(--vcalc-border); border-radius: var(--vcalc-radius); background: #fbfbfd; font-size: 13px; }
.vcalc__debug-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--vcalc-muted); margin-bottom: 14px; }
.vcalc__debug h4 { margin: 0 0 8px; font-size: 14px; color: var(--vcalc-accent); }
.vcalc__debug-inputs { margin-bottom: 18px; }
.vcalc__debug-kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 2px 24px; }
.vcalc__debug-row { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; border-bottom: 1px solid rgba(0, 0, 0, .05); }
.vcalc__debug-row span:first-child { color: var(--vcalc-muted); }
.vcalc__debug-row span:last-child { font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; overflow-wrap: anywhere; min-width: 0; }
.vcalc__debug-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 28px; }
.vcalc__formula { padding: 6px 0; border-bottom: 1px solid rgba(0, 0, 0, .05); }
.vcalc__formula-name { font-size: 12px; color: var(--vcalc-muted); margin-bottom: 1px; }
.vcalc__formula-calc { font-variant-numeric: tabular-nums; line-height: 1.5; }
.vcalc__formula-calc b { color: var(--vcalc-text); font-weight: 700; }