/* Калькулятор скидок на макете редизайна. Разметка, id и подписи прежние,
   скрипты public/js/finansovie/discount-calc.js, money-format.js и custom-select.js не менялись.
   Файл грузится раньше rd.css, поэтому селекторы начинаются с .rd #simple-calc.
   Скрипт прячет поля через style.display = "none" и показывает их через "" (тогда действует этот файл),
   #resultContainer и #historyContainer показывает через "block": внутри них отступы заданы margin, а не gap.
   Enter считает только внутри #simple-calc .calculator, поэтому id и класс остались. */

.rd #simple-calc .calculator { display: flex; flex-direction: column; gap: 20px; max-width: none; margin: 0; padding: 0; border: 0; background: none; box-shadow: none; }
.rd #simple-calc p { display: block; opacity: 1; margin: 0; }
.rd #simple-calc .label-text { display: block; position: static; margin: 0 0 8px; padding: 0; background: none; font: 400 11px/1.3 var(--f-mono); letter-spacing: 1px; text-transform: uppercase; color: var(--mute); }

/* выпадающие списки на div */
.rd #simple-calc .custom-select { position: relative; width: auto; height: auto; min-height: 0; margin: 0; padding: 0; border: 0; background: none; }
.rd #simple-calc .custom-select__selected { box-sizing: border-box; position: relative; display: flex; align-items: center; min-height: 48px; height: auto; margin: 0; padding: 12px 44px 12px 16px; background: var(--tile); border: 1px solid var(--line); border-radius: 14px; font: 500 15px/1.35 var(--f-ui); color: var(--ink); cursor: pointer; }
.rd #simple-calc .custom-select__selected:hover { border-color: var(--accent-mid); }
.rd #simple-calc .custom-select.open .custom-select__selected { border-color: var(--accent); }
.rd #simple-calc .custom-select__selected::after { content: ""; position: absolute; right: 18px; top: 50%; width: 8px; height: 8px; margin-top: -6px; border: solid var(--ink); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); background: none; transition: transform .15s; }
.rd #simple-calc .custom-select.open .custom-select__selected::after { margin-top: -2px; transform: rotate(-135deg); }
.rd #simple-calc .custom-select__options { display: none; position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 20; max-height: 360px; overflow-y: auto; box-sizing: border-box; padding: 6px; background: var(--card); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 12px 32px rgba(13, 13, 13, .12); }
.rd #simple-calc .custom-select.open .custom-select__options { display: block; }
.rd #simple-calc .custom-select__option { padding: 10px 12px; border-radius: 10px; font: 400 14px/1.35 var(--f-ui); color: var(--ink); cursor: pointer; background: none; }
.rd #simple-calc .custom-select__option:hover,
.rd #simple-calc .custom-select__option.selected { background: var(--accent-soft); }
/* «Округлить до» — в ширину одного поля */
.rd #simple-calc .dc-fields + .custom-select { max-width: calc(50% - 8px); }

/* поля: подписи нет, тип значения — в placeholder */
.rd #simple-calc .dc-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin: 0; }
.rd #simple-calc .dc-field { min-width: 0; margin: 0; }
.rd #simple-calc .dc-field input { display: block; -webkit-appearance: none; appearance: none; box-sizing: border-box; width: 100%; height: 48px; margin: 0; padding: 0 16px; background: var(--tile); border: 1px solid var(--line); border-radius: 14px; box-shadow: none; outline: none; font: 500 16px/46px var(--f-ui); color: var(--ink); text-align: left; }
.rd #simple-calc .dc-field input::placeholder { font: 400 15px/46px var(--f-ui); color: var(--mute); opacity: 1; }
.rd #simple-calc .dc-field input:focus { border-color: var(--accent); }

/* примеры */
.rd #simple-calc .dc-chips { margin: 0; }
.rd #simple-calc .dc-chips__row { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.rd #simple-calc .dc-chip { display: inline-flex; align-items: center; justify-content: center; width: auto; height: 38px; margin: 0; padding: 0 16px; border: 0; border-radius: 999px; background: var(--pill); font: 500 13px/1.2 var(--f-ui); color: var(--ink); white-space: nowrap; cursor: pointer; transition: background .15s; }
.rd #simple-calc .dc-chip:hover { background: var(--accent-soft); }
.rd #simple-calc .dc-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* кнопки */
.rd #simple-calc button.action-button,
.rd #simple-calc button.clear-button { display: inline-flex; align-items: center; justify-content: center; flex: none; width: auto; max-width: none; height: 46px; margin: 0; padding: 0 24px; border: 0; border-radius: 999px; background: var(--pill); box-shadow: none; font: 500 14px/1.2 var(--f-ui); color: var(--ink); white-space: nowrap; cursor: pointer; transition: opacity .15s; }
.rd #simple-calc button.action-button.black { padding: 0 28px; background: var(--ink); color: #fff; }
.rd #simple-calc button.action-button:hover,
.rd #simple-calc button.clear-button:hover { opacity: .85; }
.rd #simple-calc button.action-button:focus-visible,
.rd #simple-calc button.clear-button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.rd #simple-calc .btn-wrapper { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 0; padding: 0; }

/* результат */
.rd #simple-calc .result { box-sizing: border-box; margin: 0; padding: 28px; border: 0; border-radius: 20px; background: var(--tile); text-align: left; }
.rd #simple-calc .res-wrapper { margin: 0; padding: 0; background: none; }
.rd #simple-calc .result-text { margin: 0; font: 600 44px/1.1 var(--f-ui); letter-spacing: -.5px; color: var(--ink); font-variant-numeric: tabular-nums; word-break: break-word; }
.rd #simple-calc .dc-extra { margin: 16px 0 0; }
.rd #simple-calc .dc-extra:empty { display: none; }
.rd #simple-calc .dc-metric { margin: 0; padding: 10px 0; border-top: 1px solid var(--line); font: 400 14px/1.5 var(--f-ui); color: var(--mute); }
.rd #simple-calc .dc-metric b { font-weight: 600; color: var(--ink); }
.rd #simple-calc .formula-wrapper { margin: 16px 0 0; padding: 20px; border: 1px solid var(--line); border-radius: 16px; background: transparent; }
/* при ошибке ввода шагов нет: пустой «Метод расчёта» не показываем, текст ошибки — обычным размером */
.rd #simple-calc .result:has(.resultDetails:empty) .formula-wrapper { display: none; }
.rd #simple-calc .result:has(.resultDetails:empty) .result-text { font: 500 15px/1.45 var(--f-ui); letter-spacing: 0; color: var(--bad); }
.rd #simple-calc .formula { margin: 0 0 14px; font: 500 16px/1.45 var(--f-mono); color: var(--ink); word-break: break-word; }
.rd #simple-calc .resultDetails { margin: 0; font: 400 14px/1.55 var(--f-ui); color: var(--ink); }
.rd #simple-calc .step-container p { margin: 12px 0 0; }
.rd #simple-calc .step-container p:first-child { margin-top: 0; }
.rd #simple-calc .step-container strong { font-weight: 600; }
.rd #simple-calc .formula-line { margin: 4px 0 0; font: 500 14px/1.5 var(--f-mono); color: var(--ink); word-break: break-word; }
.rd #simple-calc .result > button.clear-button { height: 38px; margin: 16px 0 0; padding: 0 16px; font-size: 13px; }

/* история */
.rd #simple-calc .history { box-sizing: border-box; margin: 0; padding: 20px 24px; border-radius: 20px; background: var(--tile); }
.rd #simple-calc .history > p { margin: 0 0 4px; }
.rd #simple-calc .history > p b { font: 400 11px/1.3 var(--f-mono); letter-spacing: 1px; text-transform: uppercase; color: var(--mute); }
.rd #simple-calc .historyList { list-style: none; margin: 0 0 14px; padding: 0; }
.rd #simple-calc .historyList li { margin: 0; padding: 10px 0; border-bottom: 1px solid var(--line); font: 400 14px/1.5 var(--f-ui); color: var(--ink); }
.rd #simple-calc .historyList li::before,
.rd #simple-calc .historyList li::marker { content: none; }
.rd #simple-calc .historyList li:last-child { border-bottom: 0; }
.rd #simple-calc .historyList b { font-weight: 600; }
.rd #simple-calc .history > button.clear-button { height: 38px; padding: 0 16px; font-size: 13px; }

/* таблица формул в статье */
.rd .rd-article__body > .table-scroll { overflow-x: auto; }
.rd .rd-article__body .pct-table td:not(:first-child) { white-space: nowrap; font-weight: 600; }

@media (max-width: 639px) {
    .rd #simple-calc .calculator { gap: 16px; }
    .rd #simple-calc .custom-select__selected { padding: 12px 40px 12px 14px; font-size: 14px; }
    .rd #simple-calc .custom-select__options { max-height: 300px; }
    .rd #simple-calc .custom-select__option { font-size: 13px; }
    .rd #simple-calc .dc-fields + .custom-select { max-width: none; }
    .rd #simple-calc .dc-fields { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .rd #simple-calc .btn-wrapper { flex-direction: column; }
    .rd #simple-calc .btn-wrapper button { width: 100%; }
    .rd #simple-calc .result { padding: 18px 16px; }
    .rd #simple-calc .result-text { font-size: 32px; letter-spacing: 0; }
    .rd #simple-calc .dc-metric,
    .rd #simple-calc .resultDetails,
    .rd #simple-calc .historyList li { font-size: 13px; }
    .rd #simple-calc .formula-wrapper { padding: 16px; }
    .rd #simple-calc .formula { font-size: 14px; }
    .rd #simple-calc .formula-line { font-size: 13px; }
    .rd #simple-calc .history { padding: 16px; }
}

/* источники в боковой колонке статьи */
.rd .rda-src h2.rd-label { margin: 0; padding: 0; border: 0; font: 400 11px/1.4 var(--f-mono); letter-spacing: 1px; text-transform: uppercase; color: var(--mute); scroll-margin-top: 16px; }
.rd .rda-src__lead { margin: 0; font: 400 13px/1.5 var(--f-ui); color: var(--mute); }
.rd .rda-src__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.rd .rda-src__list li { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 12px 0; border-bottom: 1px solid var(--line); }
.rd .rda-src__list li:first-child { padding-top: 0; }
.rd .rda-src__list li:last-child { padding-bottom: 0; border-bottom: 0; }
.rd .rda-src__list li::before { display: none; }
.rd .rda-src__list b { font: 600 14px/1.35 var(--f-ui); color: var(--ink); }
.rd .rda-src__list span { font: 400 13px/1.45 var(--f-ui); color: var(--mute); }
.rd .rda-src__list a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent-mid); text-underline-offset: 2px; }