/* Опциональный МОДУЛЬ «Калькулятор растаможки под ключ» (не блок ядра).
   Подключается только когда фича включена (data/features.json). CSS на токенах темы. */

.calc { margin-top: clamp(2.4rem, 5vw, 3.6rem); }
.calc__head { max-width: 640px; margin-bottom: 1.6rem; }
.calc__title { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.4rem, 2.6vw, 2rem); color: var(--text); letter-spacing: -.02em; margin: .2rem 0 .5rem; }
.calc__lead { color: var(--text-soft); font-size: 1rem; max-width: 58ch; margin: 0; }
.calc__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(1.1rem, 2.4vw, 1.9rem); align-items: start; }
@media (max-width: 820px) { .calc__grid { grid-template-columns: 1fr; } }
.calc__form { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(1.2rem, 2.5vw, 1.7rem); display: flex; flex-direction: column; gap: 1rem; }
.calc__field { display: flex; flex-direction: column; gap: .42rem; }
.calc__field > label { font-size: .9rem; color: var(--text-soft); font-weight: 500; }
.calc__pair { display: grid; grid-template-columns: 1.35fr .95fr; gap: .7rem; }
.calc__input, .calc__select { box-sizing: border-box; width: 100%; font: inherit; font-size: 1rem; color: var(--text); background: var(--bg); border: 1px solid var(--line-strong); border-radius: 10px; padding: .7rem .85rem; }
.calc__input:focus, .calc__select:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.calc__hint { font-size: .78rem; color: var(--text-dim); }
.calc__result { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(1.2rem, 2.5vw, 1.7rem); display: flex; flex-direction: column; }
.calc__brow { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .52rem 0; border-bottom: 1px dashed var(--line); color: var(--text-soft); font-size: .95rem; }
.calc__brow i { font-style: normal; color: var(--text); font-weight: 600; font-family: var(--font-display); white-space: nowrap; }
.calc__brow--warn i { color: var(--accent-bright); }
.calc__warnnote { display: none; gap: .5rem; align-items: flex-start; margin: .75rem 0 0; padding: .7rem .85rem; background: color-mix(in srgb, var(--accent) 9%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent); border-radius: 10px; color: var(--text-soft); font-size: .84rem; }
.calc__warnnote.on { display: flex; }
.calc__warnnote .icon { width: 18px; height: 18px; color: var(--accent-bright); flex: none; margin-top: .05rem; }
.calc__total { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-top: 1rem; padding-top: .9rem; border-top: 1px solid var(--line-strong); }
.calc__total span { color: var(--text); font-weight: 600; }
.calc__total b { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.4rem, 3vw, 1.85rem); color: var(--text); white-space: nowrap; }
.calc__rate { font-size: .78rem; color: var(--text-dim); margin: .85rem 0 0; }
.calc__cta { margin-top: 1.05rem; }
.btn--block { width: 100%; }
.calc__toast { font-size: .82rem; color: var(--accent2); margin: .55rem 0 0; min-height: 1.15em; }
.calc__disclaimer { color: var(--text-dim); font-size: .82rem; line-height: 1.55; margin: 1.4rem 0 0; max-width: 82ch; }