/* ipotekabank:product.calc — общая дизайн-система калькуляторов (перенесено из прототипа дизайнера mortgage-v2.css,
   токены Figma «ipotekabank.uz — Design System», фрейм «Калькулятор»). Классы .mv2* — общие для всех модулей.
   Токены — на корне блока (не :root), без сброса стилей страницы. Шрифты Squad и Source Sans 3 подключены шаблоном сайта. */
.mv2-shell, .mv2-sticky, .mv2-sheet {
    --color-primary:   #52ae30;
    --color-primary-hover: #428b26;
    --color-text:      #151617;
    --color-text-2:    #7d828b;
    --color-text-3:    #72767e;
    --color-text-4:    #50545d;
    --color-tertiary:  #6b7079;
    --color-text-muted: #91959c;
    --bg-wrapper:      #f6f7fa;
    --bg-card:         #ffffff;
    --bg-track:        #e3e8f1;
    --bg-chip:         #eceff6;
    --radius-full:     999px;
    --font: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    --font-head: 'Squad', var(--font);
    font-family: var(--font); font-size: 16px; line-height: 1.5; color: var(--color-text);
}
.mv2-shell *, .mv2-shell *::before, .mv2-shell *::after,
.mv2-sticky *, .mv2-sheet *, .mv2-sheet *::before, .mv2-sheet *::after { box-sizing: border-box; }
.mv2-shell p, .mv2-shell h1, .mv2-shell h2, .mv2-shell h3, .mv2-sheet p { margin: 0; padding: 0; }
/* Шаблон сайта задаёт всем span/p размер 1.125rem и свой цвет (template_styles.css). Внутри калькулятора текст
   наследует размер и цвет от блока. Специфичность (0,0,2): выше глобального `span`, ниже любых классов модуля. */
:where(.mv2-shell, .mv2-sticky, .mv2-sheet) :is(span, p, b, li):is(span, p, b, li) { font-size: inherit; color: inherit; }
/* Шаблон сайта задаёт всем кнопкам height: 48px, отступы, inline-flex, скругление, цвет и серый фон для :disabled
   (template_styles.css, «button, .button»). Внутри калькулятора кнопки — свои элементы (выпадашки, карточки
   предложений, строки графика): сбрасываем с той же специфичностью (0,0,2) — выше глобального button, ниже классов. */
:where(.mv2-shell, .mv2-sheet) button:is(button), button:where(.mv2-sticky):is(button) {
    height: auto; min-height: 0; padding: 0; gap: 0; display: inline-block; border-radius: 0;
    font-size: inherit; font-weight: inherit; line-height: inherit; color: inherit; background-color: transparent; transition: none;
}
:where(.mv2-shell, .mv2-sheet) button:is(button):disabled { background-color: transparent; color: inherit; }
.mv2-shell button, .mv2-shell input, .mv2-sheet button, .mv2-sticky { font-family: inherit; }
.mv2-shell [hidden], .mv2-sheet [hidden] { display: none !important; }

/* ---- Серый блок: заголовок + две колонки ---- */
.mv2-shell { box-sizing: border-box; background: var(--bg-wrapper); border-radius: 40px; padding: 48px 56px; }
.mv2__heading { font-family: var(--font-head); font-size: 30px; font-weight: 700; line-height: 1.2; color: var(--color-text); }

/* ---- Заголовок + «Показать расчет в у.е.»: справа в строке заголовка, на телефоне — под заголовком ---- */
.mv2__head { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-right: 32px; margin-bottom: 8px; }
.mv2__currency {
    flex: none; border: 0; background: none; padding: 4px 0; cursor: pointer;
    font-size: 16px; font-weight: 600; line-height: 22px; letter-spacing: -0.08px; white-space: nowrap;
    color: var(--color-primary); transition: color .15s;
}
.mv2__currency:hover { color: var(--color-primary-hover); }
.mv2__currency:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; border-radius: 4px; }
@media (max-width: 767px) {
    .mv2__head { flex-direction: column; align-items: flex-start; gap: 12px; padding-right: 0; }
    .mv2__currency { padding: 0; }
}


.mv2 { display: grid; grid-template-columns: minmax(0, 560px) 400px; justify-content: space-between; align-items: start; }
.mv2__params { display: flex; flex-direction: column; gap: 20px; padding: 16px 0; min-width: 0; margin: 0; }
.mv2__result-col { position: sticky; top: 0; padding: 16px 0; display: flex; flex-direction: column; align-items: center; gap: 10px; }

/* ---- Вкладки: белая «таблетка», активная — чёрная ---- */
.mv2__tabs { display: flex; align-self: flex-start; gap: 4px; background: var(--bg-card); border-radius: var(--radius-full); padding: 4px; }
.mv2__tab {
    font-size: 16px; font-weight: 500; line-height: 24px; color: var(--color-text-4);
    background: transparent; border: none; border-radius: var(--radius-full); padding: 12px 16px; cursor: pointer;
    white-space: nowrap; transition: background .15s, color .15s;
}
.mv2__tab:hover:not([aria-pressed="true"]) { background: var(--bg-wrapper); }
.mv2__tab[aria-pressed="true"] { background: var(--color-text); color: #fff; }
.mv2__tab:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

/* ---- Карточка группы с чипами ---- */
.mv2__card { background: var(--bg-card); border-radius: 16px; padding: 16px 20px; display: flex; flex-direction: column; gap: 12px; }
.mv2__card-title { font-size: 18px; font-weight: 600; line-height: 1.333; }
.mv2__memo { display: flex; gap: 8px; align-items: flex-start; margin-top: 4px; background: var(--bg-card); border: 1px solid var(--bg-track); border-radius: 12px; padding: 12px; }
.mv2__memo-icon { flex: none; color: var(--color-primary); }
.mv2__memo-title { font-size: 14px; font-weight: 600; line-height: 20px; color: var(--color-text); }
.mv2__memo-text { font-size: 14px; line-height: 20px; color: var(--color-text-4); margin-top: 4px !important; }
/* Чипы: на компьютере переносятся; на телефоне и сенсорных экранах — одной строкой с прокруткой и мягким краем. */
.mv2__chips { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 767px), (pointer: coarse) {
    .mv2__chips {
        flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain;
        margin: -4px -20px; padding: 4px 20px; scroll-padding: 0 20px; scrollbar-width: none; -webkit-overflow-scrolling: touch;
    }
    .mv2__chips::-webkit-scrollbar { display: none; }
    .mv2__chip { flex: none; }
    .mv2__chips.can-drag { cursor: grab; }
    .mv2__chips.is-dragging { cursor: grabbing; user-select: none; }
    .mv2__chips.is-dragging .mv2__chip { pointer-events: none; }
    .mv2__chips {
        --l0: #000; --l1: #000; --l2: #000; --l3: #000;
        --r0: #000; --r1: #000; --r2: #000; --r3: #000;
        -webkit-mask-image: linear-gradient(90deg, var(--l0) 0, var(--l1) 6px, var(--l2) 12px, var(--l3) 18px, #000 24px,
            #000 calc(100% - 24px), var(--r3) calc(100% - 18px), var(--r2) calc(100% - 12px), var(--r1) calc(100% - 6px), var(--r0) 100%);
        mask-image: linear-gradient(90deg, var(--l0) 0, var(--l1) 6px, var(--l2) 12px, var(--l3) 18px, #000 24px,
            #000 calc(100% - 24px), var(--r3) calc(100% - 18px), var(--r2) calc(100% - 12px), var(--r1) calc(100% - 6px), var(--r0) 100%);
    }
    .mv2__chips.can-left  { --l0: rgba(0, 0, 0, .2); --l1: rgba(0, 0, 0, .45); --l2: rgba(0, 0, 0, .75); --l3: rgba(0, 0, 0, .93); }
    .mv2__chips.can-right { --r0: rgba(0, 0, 0, .2); --r1: rgba(0, 0, 0, .45); --r2: rgba(0, 0, 0, .75); --r3: rgba(0, 0, 0, .93); }
}
.mv2__chip {
    font-size: 14px; font-weight: 600; line-height: normal; color: var(--color-text-4);
    background: var(--bg-chip); border: none; border-radius: var(--radius-full);
    height: 32px; padding: 6px 16px; cursor: pointer; white-space: nowrap; transition: background .15s, color .15s;
}
.mv2__chip:hover:not([aria-pressed="true"]) { background: #e1e5ee; }
.mv2__chip[aria-pressed="true"] { background: #e8f7e3; color: #377420; }
.mv2__chip:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

/* ---- Выбор ЖК: поле + выпадающий список ---- */
.mv2__pick { position: relative; padding: 0; gap: 0; }
.mv2__pick-btn {
    display: block; width: 100%; text-align: left; color: inherit; cursor: pointer;
    background: transparent; border: none; border-radius: 16px; padding: 12px 52px 14px 16px; position: relative;
}
.mv2__pick-btn:focus { outline: none; }
.mv2__pick-btn:focus-visible { box-shadow: 0 0 0 2px var(--color-primary); }
.mv2__pick-btn.no-ring:focus-visible { box-shadow: none; }
.mv2__pick-label { display: block; font-size: 16px; line-height: 1.5; color: var(--color-text-2); }
.mv2__pick-value { display: block; font-family: var(--font-head); font-size: 24px; font-weight: 700; line-height: 1.17; color: var(--color-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mv2__pick-value.is-placeholder { color: var(--color-text-muted); }
.mv2__pick-btn::after {
    content: ''; position: absolute; right: 22px; top: 50%; width: 9px; height: 9px; margin-top: -7px;
    border: solid var(--color-text-2); border-width: 0 2px 2px 0; transform: rotate(45deg); pointer-events: none; transition: transform .15s;
}
.mv2__pick-btn[aria-expanded="true"]::after { transform: rotate(225deg); margin-top: -2px; }
.mv2__dd {
    position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 30; max-height: min(380px, 55vh); overflow-y: auto;
    background: #fff; border: 1px solid var(--bg-chip); border-radius: 12px; padding: 4px;
    box-shadow: 0 8px 12px rgba(0, 0, 0, .12);
}
.mv2__dd:focus { outline: none; }
.mv2__dd-sect + .mv2__dd-sect { border-top: 1px solid var(--bg-chip); margin-top: 4px; padding-top: 4px; }
.mv2__dd-group { padding: 12px 16px 6px; font-size: 14px; font-weight: 600; line-height: 1.28; color: var(--color-text-3); }
.mv2__dd-opt { display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 8px; font-size: 16px; line-height: 1.5; color: var(--color-text); cursor: pointer; }
.mv2__dd-opt:hover, .mv2__dd-opt.is-active { background: var(--bg-wrapper); }
.mv2__dd-opt[aria-selected="true"] { background: #e8f7e3; }
.mv2__dd-opt[aria-selected="true"]::after {
    content: ''; flex: none; width: 24px; height: 24px; margin-left: auto;
    background: url('img/check-mark.svg') center / 19.2px 19.2px no-repeat;
}

/* ---- Поле-слайдер: белая карточка 82px, трек у нижнего края, границы диапазона снаружи ---- */
.mv2__field { position: relative; display: flex; flex-direction: column; gap: 4px; }
.mv2__field-card { position: relative; height: 82px; background: var(--bg-card); border-radius: 16px; padding: 12px 16px 0; }
.mv2__field-card:has(:focus-visible) { box-shadow: 0 0 0 2px var(--color-primary); }
.mv2__field-label { display: block; margin: 0; font-size: 16px; font-weight: 400; line-height: 1.5; color: var(--color-text-2); }
.mv2__field-row { display: flex; align-items: center; gap: 10px; font-family: var(--font-head); font-size: 24px; font-weight: 700; line-height: 1.17; }
.mv2__field-input {
    display: block; min-width: 0; border: none; background: transparent; padding: 0; margin: 0; height: auto; box-shadow: none;
    font: inherit; color: var(--color-text);
}
.mv2__field-input:focus { outline: none; box-shadow: none; }
.mv2__field-input--main { flex: 1; width: 100%; }
.mv2__tail { flex: none; display: inline-flex; align-items: baseline; color: #c1c4c9; white-space: nowrap; }
.mv2__range {
    position: absolute; left: 12px; right: 12px; bottom: -7px; width: calc(100% - 24px); height: 20px; margin: 0; padding: 0; border: 0;
    -webkit-appearance: none; appearance: none; background: transparent; cursor: pointer;
}
/* Дорожка: зелёный — входит в значение, серый — нет; толстая — можно двигать, тонкая — нельзя.
   p(x) = 10px + (100% − 20px)·x. A — граница минимума (--lo), H — максимума (--hi), F — ползунок (--f).
   У взноса (--lock: 1) шкала — вся стоимость: тонкая светло-зелёная 0…мин, толстая мин…макс, тонкая серая макс…100%. */
.mv2__range {
    --A: calc((10px + (100% - 20px) * var(--lo, 0)) * var(--lock, 0));
    --H: calc(100% - (100% - 10px - (100% - 20px) * var(--hi, 1)) * var(--lock, 0));
    --F: calc(10px + (100% - 20px) * var(--f, 0));
    --track:
        radial-gradient(circle 3px at calc(var(--A) + 3px) 50%, var(--color-primary) 98%, transparent 100%) center / 100% 6px no-repeat,
        linear-gradient(90deg, transparent calc(var(--A) + 3px), var(--color-primary) calc(var(--A) + 3px), var(--color-primary) var(--F), transparent var(--F)) center / 100% 6px no-repeat,
        linear-gradient(90deg, #a6d593 calc(var(--A) + 3px), transparent calc(var(--A) + 3px)) center / 100% 2px no-repeat,
        radial-gradient(circle 2px at calc(var(--H) - 2px) 50%, var(--bg-track) 98%, transparent 100%) center / 100% 4px no-repeat,
        linear-gradient(90deg, transparent var(--A), var(--bg-track) var(--A), var(--bg-track) calc(var(--H) - 2px), transparent calc(var(--H) - 2px)) center / 100% 4px no-repeat,
        linear-gradient(90deg, transparent calc(var(--H) - 2px), #d3d9e4 calc(var(--H) - 2px)) center / 100% 2px no-repeat;
}
.mv2__range::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: var(--track); }
.mv2__range::-webkit-slider-thumb {
    -webkit-appearance: none; width: 20px; height: 20px; margin-top: -7px; border: none; border-radius: 50%;
    background: url('img/slider-thumb.svg') center / 100% 100% no-repeat;
}
.mv2__range::-moz-range-track { height: 6px; border-radius: 3px; background: var(--track); }
.mv2__range::-moz-range-thumb { width: 20px; height: 20px; border: none; border-radius: 50%; background: url('img/slider-thumb.svg') center / 100% 100% no-repeat; }
.mv2__range:focus { outline: none; }
.mv2__range:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 4px; border-radius: 6px; }
.mv2__bounds { display: flex; justify-content: space-between; font-size: 18px; line-height: normal; color: var(--color-text-2); }
.mv2__bounds--dp { position: relative; justify-content: flex-end; }
.mv2__bounds--dp [data-min] { position: absolute; top: 0; left: 0; white-space: nowrap; }
.mv2__bounds--dp [data-max] { white-space: nowrap; }
.mv2__bounds--dp [data-maxlim] { position: absolute; top: 0; left: 0; white-space: nowrap; }
.mv2__limit-tip {
    position: absolute; z-index: 25; top: calc(82px + 30px); left: 0; width: max-content; max-width: min(240px, 100%);
    background: #fff; border: 1px solid var(--bg-chip); border-radius: 8px; box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
    display: flex; align-items: center; gap: 6px;
    padding: 6px 6px 6px 10px; font-size: 12px; line-height: 1.35; color: var(--color-text-4); white-space: nowrap;
    animation: mv2-tip-in .2s ease-out;
}
.mv2__limit-tip::before {
    content: ''; position: absolute; top: -5px; left: calc(var(--arrow, 50%) - 4px); width: 8px; height: 8px;
    background: #fff; border-left: 1px solid var(--bg-chip); border-top: 1px solid var(--bg-chip); transform: rotate(45deg);
}
.mv2__limit-tip-close {
    flex: none; position: relative; display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px;
    padding: 0; border: none; border-radius: 50%; background: transparent; color: var(--color-text-muted); cursor: pointer;
}
.mv2__limit-tip-close::before { content: ''; position: absolute; inset: -10px; }
.mv2__limit-tip-close:hover { background: var(--bg-wrapper); color: var(--color-text); }
.mv2__limit-tip-close:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 1px; }
@keyframes mv2-tip-in { from { transform: translateY(-4px); } to { transform: none; } }

/* ---- Результат ---- */
.mv2__result { width: 400px; background: var(--bg-card); border-radius: 24px; padding: 24px; }
.mv2 .js-result, .mv2-sheet__body { display: flex; flex-direction: column; gap: 16px; }
.mv2__monthly { padding: 8px 0; }
.mv2__monthly-label { font-size: 16px; color: var(--color-text-3); }
.mv2__monthly-value { font-family: var(--font-head); font-size: 30px; font-weight: 700; line-height: 1.2; color: var(--color-text); }
.mv2__divider { display: block; width: 100%; height: 1px; background: var(--bg-chip); }

.mv2__rows { display: flex; flex-direction: column; gap: 8px; padding: 8px 0; }
.mv2__row { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 14px; line-height: 1.28; }
.mv2__row > span { color: var(--color-tertiary); }
.mv2__row b { font-weight: 400; color: var(--color-text); text-align: right; }
.mv2__tip-wrap { position: relative; display: inline-flex; align-items: center; gap: 4px; }
.mv2__tip-btn {
    position: relative; top: -1px; flex: none; display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; padding: 0;
    border: none; background: transparent; border-radius: 50%; color: var(--color-text-muted); cursor: pointer;
}
.mv2__tip-btn::before { content: ''; position: absolute; inset: -8px; }
.mv2__tip-btn:hover, .mv2__tip-wrap.is-open .mv2__tip-btn { color: var(--color-text); }
.mv2__tip-btn:focus { outline: none; }
.mv2__tip-btn:focus-visible { box-shadow: 0 0 0 2px var(--color-primary); }
.mv2__tip {
    display: none; position: absolute; left: -8px; top: calc(100% + 8px); z-index: 20; width: max-content; max-width: min(280px, calc(100vw - 64px));
    background: #fff; border: 1px solid var(--bg-chip); border-radius: 12px; box-shadow: 0 8px 12px rgba(0, 0, 0, .12);
    padding: 10px 12px; font-size: 13px; font-weight: 400; line-height: 1.4; color: var(--color-text); white-space: pre-line; text-align: left;
}
.mv2__card-title .mv2__tip-wrap { gap: 6px; }
.mv2__card-title .mv2__tip-btn { width: 16px; height: 16px; top: 0; }
.mv2__card-title .mv2__tip-btn svg { width: 16px; height: 16px; }
.mv2__tip-wrap:hover .mv2__tip, .mv2__tip-wrap:focus-within .mv2__tip, .mv2__tip-wrap.is-open .mv2__tip { display: block; }
.mv2__monthly-sub { font-size: 14px; line-height: 1.3; color: var(--color-tertiary); margin-top: 4px !important; }
.mv2__hint-rate { font-size: 14px; line-height: 1.4; font-weight: 400; color: #377420; background: #eef7ea; border-radius: 12px; padding: 10px 14px !important; text-wrap: pretty; }
.mv2__result.is-empty { padding: 56px 32px; }
.mv2__placeholder { padding: 8px 0; display: flex; flex-direction: column; gap: 8px; }
.mv2__placeholder-title { font-family: var(--font-head); font-size: 24px; font-weight: 700; line-height: 1.17; color: var(--color-text); }
.mv2__placeholder-desc { font-size: 16px; line-height: 1.5; color: var(--color-text-4); }
.mv2__cta {
    display: flex; align-items: center; justify-content: center; width: 100%; min-height: 48px; padding: 12px 20px; line-height: 1.25; text-align: center; font-size: 16px; font-weight: 600; letter-spacing: -.08px;
    color: #fff; background: var(--color-primary); border: none; border-radius: var(--radius-full); cursor: pointer; transition: background .15s;
    text-decoration: none;
}
.mv2__cta:hover { background: var(--color-primary-hover); color: #fff; text-decoration: none; }
.mv2__cta:focus-visible { outline: 2px solid var(--color-text); outline-offset: 2px; }
.mv2__early { font-size: 14px; font-weight: 400; line-height: 1.28; color: var(--color-tertiary); text-align: center; }
.mv2__footnote { width: 320px; max-width: 100%; font-size: 13px; line-height: 1.23; color: var(--color-text-4); text-align: center; text-wrap: balance; margin: 0; }

/* Планшет: форма слева, результат справа, оба тянутся по ширине. */
@media (max-width: 1180px) {
    .mv2-shell { padding: 32px 28px; border-radius: 32px; }
    .mv2 { grid-template-columns: minmax(0, 1fr) minmax(300px, 340px); gap: 24px; justify-content: normal; }
    .mv2__result-col { align-items: stretch; }
    .mv2__result { width: 100%; padding: 20px; }
    .mv2__result.is-empty { padding: 40px 24px; }
    .mv2__footnote { width: 100%; }
}

/* ---- Телефон: закреплённая плашка с платежом ---- */
.mv2-sticky { display: none; }
@media (max-width: 767px) {
    .mv2-sticky {
        position: fixed; left: 20px; right: 20px; max-width: 400px; margin: 0 auto; z-index: 940;
        bottom: max(8px, calc(env(safe-area-inset-bottom, 0px) + 4px));
        display: flex; align-items: center; justify-content: space-between; gap: 12px;
        padding: 12px 12px 12px 20px; border: none; border-radius: 28px; background: none;
        color: var(--color-text); text-align: left; cursor: pointer;
        --press: 1;
        transition: transform .3s cubic-bezier(.2, .8, .2, 1);
    }
    .mv2-sticky__glass {
        position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
        background:
            radial-gradient(120% 80% at 15% -30%, rgba(255, 255, 255, .7), rgba(255, 255, 255, 0) 60%),
            rgba(255, 255, 255, .74);
        -webkit-backdrop-filter: blur(16px) saturate(170%);
        backdrop-filter: blur(16px) saturate(170%);
        border: 1px solid rgba(255, 255, 255, .8);
        box-shadow: 0 4px 16px rgba(21, 22, 23, .10);
        transform: scale(var(--press));
        transition: opacity .25s ease, transform .25s cubic-bezier(.2, .8, .2, 1);
    }
    .mv2-sticky.is-docked .mv2-sticky__glass { opacity: 0; transform: scale(.92); }
    .mv2-sticky:active { --press: .985; }
    .mv2-sticky.is-docked { pointer-events: none; }
    .mv2-sticky.is-hidden { transform: translateY(calc(100% + 80px)); pointer-events: none; }
    .mv2-sticky:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
    .mv2-sticky__text { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
    .mv2-sticky__label { font-size: 13px; line-height: 1.5; color: var(--color-text-3); transform-origin: 0 0; }
    .mv2-sticky__value { font-family: var(--font-head); font-size: 20px; font-weight: 700; line-height: 1.2; white-space: nowrap; transform-origin: 0 0; }
    .mv2__result .mv2__monthly-label, .mv2__result .mv2__monthly-value { transform-origin: 0 0; }
    .mv2-sticky__more {
        flex: none; display: inline-flex; align-items: center; height: 36px; padding: 0 16px; border-radius: 999px;
        font-size: 14px; font-weight: 600; color: var(--color-primary-hover); background: rgba(82, 174, 48, .12);
        transition: opacity .2s ease, transform .2s ease;
    }
    .mv2-sticky.is-docked .mv2-sticky__more { opacity: 0; transform: scale(.85); }
    .mv2-sticky.is-docked .mv2-sticky__label, .mv2-sticky.is-docked .mv2-sticky__value { visibility: hidden; }
    @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
        .mv2-sticky__glass { background: var(--bg-card); border-color: var(--bg-chip); }
    }
    /* место под плашку под калькулятором */
    .mv2-shell { margin-bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }
}

/* ---- Телефон: шторка с расчётом ---- */
.mv2-sheet { display: none; }
@media (max-width: 767px) {
    html.mv2-lock, html.mv2-lock body { overflow: hidden; }
    .mv2-sheet { display: block; position: fixed; inset: 0; z-index: 950; }
    .mv2-sheet[hidden] { display: none; }
    .mv2-sheet__backdrop { position: absolute; inset: 0; background: rgba(21, 22, 23, .48); opacity: 0; transition: opacity .25s ease; }
    .mv2-sheet.is-open .mv2-sheet__backdrop { opacity: 1; }
    .mv2-sheet__panel {
        position: absolute; left: 0; right: 0; bottom: 0; max-height: calc(100% - 48px); overflow-y: auto; overscroll-behavior: contain;
        background: var(--bg-card); border-radius: 24px 24px 0 0; padding: 8px 20px calc(20px + env(safe-area-inset-bottom, 0px));
        display: flex; flex-direction: column; gap: 16px;
        transform: translateY(100%); transition: transform .28s cubic-bezier(.2, .8, .2, 1);
    }
    .mv2-sheet.is-open .mv2-sheet__panel { transform: translateY(0); }
    .mv2-sheet__panel:focus { outline: none; }
    .mv2-sheet__handle { flex: none; width: 40px; height: 4px; border-radius: 2px; background: #d5d9e0; margin: 0 auto -4px; }
    .mv2-sheet__close {
        position: absolute; top: 16px; right: 16px; width: 36px; height: 36px; border: none; border-radius: 50%;
        display: flex; align-items: center; justify-content: center; background: var(--bg-wrapper); color: var(--color-text); cursor: pointer;
    }
    .mv2-sheet__close:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
    .mv2-sheet__body .mv2__monthly { padding-right: 48px; }
    .mv2-sheet .mv2-sheet__note { width: auto; max-width: 320px; align-self: center; }
}
@media (prefers-reduced-motion: reduce) {
    .mv2-sticky, .mv2-sheet__panel, .mv2-sheet__backdrop, .mv2-sticky__glass, .mv2-sticky__more { transition: none; }
}

/* Телефон: одна колонка, результат под формой. */
@media (max-width: 767px) {
    .mv2 { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .mv2__result-col { position: static; padding-top: 0; align-items: center; }
    .mv2__result { padding: 24px; width: 100%; max-width: 400px; }
    .mv2__result.is-empty { padding: 32px; }
    .mv2__result.is-empty .mv2__placeholder-title { font-size: 20px; line-height: 1.2; }
    .mv2__footnote { width: 320px; }
}
@media (max-width: 560px) {
    .mv2__tabs { align-self: stretch; }
    .mv2__tab { flex: 1; }
    .mv2__bounds { font-size: 16px; }
}
/* ---- Компактный вид на телефоне: форма и начало результата — на первом экране ---- */
@media (max-width: 560px) {
    .mv2-shell { padding: 20px 12px; border-radius: 24px; }
    .mv2__heading { font-size: 22px; }
    .mv2__params { gap: 14px; padding: 12px 0; }
    .mv2__tab { padding: 8px 6px; font-size: 15px; }
    .mv2__card { padding: 12px 16px; gap: 8px; border-radius: 14px; }
    .mv2__card-title { font-size: 15px; }
    .mv2__chips { margin: -4px -16px; padding: 4px 16px; scroll-padding: 0 16px; }
    .mv2__memo { padding: 10px; }
    .mv2__field { gap: 2px; }
    .mv2__field-card { height: 66px; padding: 10px 14px 0; border-radius: 14px; }
    .mv2__limit-tip { top: calc(66px + 26px); }
    .mv2__field-label { font-size: 13px; line-height: 1.35; }
    .mv2__field-row { font-size: 24px; }
    .mv2__bounds { font-size: 13px; }
    .mv2__card.mv2__pick { padding: 0; border-radius: 14px; }
    .mv2__pick-btn { padding: 10px 40px 15px 14px; border-radius: 14px; }
    .mv2__pick-label { font-size: 13px; line-height: 1.35; }
    .mv2__pick-value { font-size: 20px; }
    .mv2__pick-btn::after { right: 18px; }
    .mv2__dd { border-radius: 14px; }
    .mv2__dd-group { padding: 10px 14px 4px; }
    .mv2__dd-opt { padding: 10px 14px; }
    .mv2__result { padding: 20px; border-radius: 24px; }
}

/* ---- Тумблер в карточке (например, «Хочу снять раньше срока») ---- */
.mv2__card--toggle { gap: 8px; }
.mv2__toggle { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0; cursor: pointer; font-weight: 400; }
.mv2__toggle-label { font-size: 18px; font-weight: 600; line-height: 1.333; color: var(--color-text); }
.mv2__toggle-input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.mv2__toggle-track { flex: none; position: relative; width: 44px; height: 24px; border-radius: 12px; background: #d3d9e4; transition: background .15s; }
.mv2__toggle-thumb { position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .2); transition: transform .15s; }
.mv2__toggle-input:checked + .mv2__toggle-track { background: var(--color-primary); }
.mv2__toggle-input:checked + .mv2__toggle-track .mv2__toggle-thumb { transform: translateX(20px); }
.mv2__toggle-input:focus-visible + .mv2__toggle-track { outline: 2px solid var(--color-primary); outline-offset: 2px; }

/* ---- Пояснение под чипами (текстом, без рамки) ---- */
.mv2-shell .mv2__card-hint { font-size: 14px; line-height: 20px; color: var(--color-text-4); margin: 0; }

/* ---- Уведомления в результате: предупреждения (оранжевая плашка) и «ок» (зелёный текст) ---- */
.mv2__notices { display: flex; flex-direction: column; gap: 8px; }
.mv2-shell .mv2__notice, .mv2-sheet .mv2__notice { font-size: 14px; line-height: 1.4; margin: 0; text-wrap: pretty; }
.mv2-shell .mv2__notice--warn, .mv2-sheet .mv2__notice--warn { color: #8a4b00; background: #fff4e5; border-radius: 12px; padding: 10px 14px; }
.mv2-shell .mv2__notice--ok, .mv2-sheet .mv2__notice--ok { color: #377420; }
.mv2__notice a { color: inherit; text-decoration: underline; }

/* ---- Результат-текст вместо расчёта (комбинация недоступна, вклад до востребования) ---- */
.mv2-shell .mv2__result-info, .mv2-sheet .mv2__result-info { font-size: 16px; line-height: 1.5; color: var(--color-text-4); margin: 0; }

@media (max-width: 560px) {
    .mv2__toggle-label { font-size: 15px; }
}

/* ---- «Детали расчёта»: ссылка под калькулятором и помесячный график (Figma «Детали расчета» 2795:10457) ---- */
.mv2__details-wrap { margin-top: 24px; }
.mv2__details-wrap[hidden] { display: none; }
.mv2__details-toggle {
    display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0 auto; padding: 8px 12px;
    border: 0; background: none; cursor: pointer; font-size: 16px; font-weight: 600; line-height: 22px; color: var(--color-text);
}
.mv2__details-toggle:hover { color: var(--color-primary-hover); }
.mv2__details-toggle:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; border-radius: 8px; }
.mv2__chevron { flex: none; transition: transform .15s; }
.mv2__details-toggle.is-open .mv2__chevron { transform: rotate(180deg); }
@media (min-width: 768px) { .mv2__details-wrap > .mv2__details-toggle.is-open { display: none; } }   /* компьютер: «Скрыть» — внизу таблицы; телефон — сверху списка (как в макете) */
.mv2__details { background: var(--bg-card); border-radius: 24px; padding: 24px; margin-top: 8px; }
.mv2-shell .mv2__details-note { font-size: 14px; line-height: 1.4; color: var(--color-text-4); margin: 0 0 12px; }
.mv2__table-wrap { max-height: 560px; overflow-y: auto; scrollbar-width: thin; }
.mv2__table { width: 100%; border-collapse: collapse; font-size: 16px; line-height: 1.4; color: var(--color-text); }
.mv2__table th { position: sticky; top: 0; z-index: 1; background: var(--bg-card); text-align: left; font-weight: 400; font-size: 14px; color: var(--color-text-2); padding: 8px; border-bottom: 1px solid var(--bg-track); }
.mv2__table td { padding: 15px 8px; border-bottom: 1px solid var(--bg-track); white-space: nowrap; font-variant-numeric: tabular-nums; }
.mv2__table tfoot td { position: sticky; bottom: 0; background: var(--bg-card); font-weight: 600; border-bottom: 0; }
.mv2__details-actions { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 20px; }
.mv2__btn-soft {
    height: 48px; padding: 0 24px; border: 0; border-radius: var(--radius-full); background: var(--bg-chip); cursor: pointer;
    font-size: 16px; font-weight: 600; color: var(--color-text); transition: background .15s;
}
.mv2__btn-soft:hover { background: #e1e5ee; }
.mv2__btn-soft:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.mv2__mlist, .mv2__mtotal { display: none; }

@media (max-width: 767px) {
    .mv2__details { padding: 0; background: var(--bg-card); }
    .mv2__table-wrap { display: none; }
    .mv2__mlist { display: block; max-height: 560px; overflow-y: auto; overscroll-behavior: contain; }
    .mv2__details-actions .mv2__details-toggle { display: none; }
    .mv2__mrow + .mv2__mrow { border-top: 1px solid var(--bg-track); }
    .mv2__mrow-head {
        display: flex; align-items: center; gap: 8px; width: 100%; padding: 16px; border: 0; background: none; cursor: pointer; text-align: left; color: var(--color-text);
    }
    .mv2__mrow-left, .mv2__mrow-right { display: flex; flex-direction: column; gap: 2px; }
    .mv2__mrow-left { flex: 1; min-width: 0; }
    .mv2__mrow-right { align-items: flex-end; }
    .mv2-shell .mv2__mrow-head b { font-size: 16px; font-weight: 600; line-height: 1.35; }
    .mv2-shell .mv2__mrow-head span span, .mv2-shell .mv2__mrow-left > span, .mv2-shell .mv2__mrow-right > span { font-size: 13px; line-height: 1.3; color: var(--color-text-2); }
    .mv2__mrow-head[aria-expanded="true"] .mv2__chevron { transform: rotate(180deg); }
    .mv2__mrow-body { margin: 0 16px 16px; padding: 12px; border-radius: 12px; background: var(--bg-wrapper); display: flex; flex-direction: column; gap: 8px; }
    .mv2__mrow-body[hidden] { display: none; }
    .mv2__mrow-body div, .mv2__mtotal div { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; }
    .mv2-shell .mv2__mrow-body span, .mv2-shell .mv2__mtotal span { color: var(--color-text-4); }
    .mv2-shell .mv2__mrow-body b, .mv2-shell .mv2__mtotal b { font-weight: 600; white-space: nowrap; }
    .mv2-shell .mv2__mrow-left > span, .mv2-shell .mv2__mrow-right b { white-space: nowrap; }
    .mv2__mtotal { display: flex; flex-direction: column; gap: 8px; margin: 0 16px; padding: 12px; border-radius: 12px; background: var(--bg-wrapper); }
    .mv2-shell .mv2__mtotal-title { font-size: 14px; font-weight: 600; margin: 0; }
    .mv2__details-actions { padding: 16px; margin-top: 0; }
    .mv2-shell .mv2__details-note { margin: 0; padding: 16px 16px 0; }
}

/* ---- «Выберите предложение»: список программ (автокредиты и др.) ---- */
.mv2__offers { display: flex; flex-direction: column; gap: 8px; }
.mv2__offer {
    display: grid; grid-template-columns: minmax(0, 1fr) repeat(3, auto); align-items: center; gap: 4px 20px; width: 100%;
    padding: 12px 16px; border: 1px solid var(--bg-track); border-radius: 12px; background: var(--bg-card); cursor: pointer; text-align: left;
    color: var(--color-text); transition: border-color .15s, background .15s;
}
.mv2__offer:hover:not(:disabled) { border-color: var(--color-primary); }
.mv2__offer:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.mv2__offer[aria-pressed="true"] { border: 2px solid var(--color-primary); padding: 11px 15px; background: #f3faf0; }
.mv2__offer:disabled { cursor: default; opacity: .65; background: var(--bg-card); color: var(--color-text); }
.mv2__offer-name { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mv2-shell .mv2__offer-name b { font-size: 15px; font-weight: 600; line-height: 1.3; }
.mv2-shell .mv2__offer-name span { font-size: 13px; line-height: 1.3; color: var(--color-text-2); }
.mv2-shell .mv2__offer-best { align-self: flex-start; margin-top: 2px; padding: 1px 8px; border-radius: 999px; background: #e8f7e3; color: #377420; font-size: 12px; font-weight: 600; }
.mv2__offer-cell { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; white-space: nowrap; }
.mv2-shell .mv2__offer-cell span { font-size: 12px; line-height: 1.3; color: var(--color-text-2); }
.mv2-shell .mv2__offer-cell b { font-size: 14px; font-weight: 600; line-height: 1.3; }
.mv2-shell .mv2__offer-cell b.is-warn { color: #cc5200; font-weight: 600; }
.mv2-shell .mv2__offers-empty { font-size: 14px; color: var(--color-text-4); margin: 0; }
@media (max-width: 560px) {
    .mv2__offer { grid-template-columns: minmax(0, 1fr); gap: 6px; }
    .mv2__offer-name { margin-bottom: 2px; }
    .mv2__offer-cell { flex-direction: row; justify-content: space-between; align-items: baseline; gap: 12px; }   /* телефон: строки «подпись — значение» */
}

/* ---- Срок, который не выбирают (рассрочка: зависит от взноса) ---- */
.mv2-shell .mv2__card-value { font-family: var(--font-head); font-size: 24px; font-weight: 700; line-height: 1.17; margin: 0; }
/* поле ввода без слайдера (например, «Стоимость КАСКО») */
.mv2__field-card--plain { height: auto; padding-bottom: 12px; background: var(--bg-wrapper); }