/* ═══════════════════════════════════════════════════════════════════════════
   Калькулятор — в мире лендинга.

   Логика страницы не менялась: те же идентификаторы, те же обработчики. Ушла
   только оболочка из другой эпохи — тёмные карточки со скруглением 16, свои
   шапка и подвал, а потом и встроенные стили старого сайта с переменными,
   которых здесь нет. Здесь описан один экран: две колонки расчёта и таблица
   тарифов под ними.

   Токены и общие элементы берутся из site.css. Размеры шрифта и скругления —
   только ступени из DESIGN.md.
   ═══════════════════════════════════════════════════════════════════════════ */

.page-wrap{max-width:var(--maxw);margin:0 auto;padding:54px var(--gut) 84px}

.calc-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 6%;
  align-items:start}
.calc-col{display:flex;flex-direction:column;min-width:0}
/* Вторая колонка отделена линейкой, а не рамкой: разговор один, просто о двух
   разных вещах — что покупаем и куда везём. */
.calc-grid>.calc-col+.calc-col{border-left:1px solid var(--line);padding-left:6%}
.calc-col-title{font-size:11.5px;font-weight:800;letter-spacing:.13em;
  text-transform:uppercase;color:var(--muted);margin:0 0 22px;line-height:1.4}

/* ── Поле ввода как отдельная строка, а не карточка ─────────────────────── */
.calc-card{padding:0 0 22px;margin-bottom:22px;border-bottom:1px solid var(--line)}
.calc-card:last-child{border-bottom:0;padding-bottom:0;margin-bottom:0}
.card-label,.fl{font-size:11.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  color:var(--muted);margin-bottom:12px}
.field-hint{margin-top:10px;font-size:12.5px;line-height:1.5;color:var(--muted)}
.calc-cta{margin-top:18px}

.price-row{display:flex;align-items:baseline;gap:10px;border-bottom:1.5px solid var(--line);
  padding-bottom:8px;transition:border-color .18s}
.price-row:focus-within{border-bottom-color:var(--accent)}
.price-sym{font-size:26px;font-weight:700;color:var(--muted);letter-spacing:-.03em;
  flex:none;line-height:1.1}
.price-inp{flex:1;min-width:0;border:0;background:none;padding:0;
  font-size:clamp(30px,3vw,40px);font-weight:700;letter-spacing:-.04em;color:var(--ink);
  font-variant-numeric:tabular-nums;line-height:1.1}
.price-inp:focus{outline:none}
.price-inp::placeholder{color:var(--line);opacity:1}
/* Стрелки у числового поля тут только мешают: цифру набирают, а не листают. */
.price-inp::-webkit-outer-spin-button,.price-inp::-webkit-inner-spin-button{
  -webkit-appearance:none;margin:0}
.price-inp[type=number]{-moz-appearance:textfield}

.fi{width:100%;padding:12px 14px;border:1px solid var(--line);background:var(--card);
  color:var(--ink);border-radius:12px;font-size:15.5px;font-weight:600;
  transition:border-color .18s,box-shadow .18s}
.fi:hover{border-color:var(--muted)}
.fi:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 3px var(--accent-wash)}

/* ── Счётчик штук ───────────────────────────────────────────────────────── */
.cnt-row{display:flex;align-items:center;width:max-content;
  border:1px solid var(--line);border-radius:999px;overflow:hidden;background:var(--card)}
.cnt-btn{width:48px;height:46px;display:grid;place-items:center;color:var(--muted);
  background:var(--card);transition:background .16s,color .16s}
.cnt-btn svg{width:18px;height:18px}
.cnt-btn:hover{background:var(--panel);color:var(--ink)}
/* Рамка пилюли обрезает всё, что снаружи кнопки, — кольцо фокуса рисуем внутри */
.cnt-btn:focus-visible{outline-offset:-5px;border-radius:999px}
.cnt-val{min-width:56px;text-align:center;font-size:19px;font-weight:800;
  font-variant-numeric:tabular-nums;border-inline:1px solid var(--line);
  line-height:46px;background:var(--card)}

/* ── Строки разбивки ────────────────────────────────────────────────────── */
.calc-card-glow{background:var(--panel);border-radius:18px;
  padding:24px 26px;border-bottom:0;margin-bottom:0}
/* Панель расчёта стоит в колонке последней, и общее «последней карточке — без
   нижнего отступа» прижимало кнопку к краю плашки: низ кнопки срезало. */
.calc-card.calc-card-glow{padding-bottom:26px}
.calc-card-glow .card-label{margin-bottom:6px}
.bl{display:flex;align-items:baseline;justify-content:space-between;gap:20px;
  padding:11px 0;border-bottom:1px solid var(--line)}
.bl-t{font-size:14.5px;font-weight:600;line-height:1.4}
.bl-h{font-size:12.5px;color:var(--muted);margin-top:3px;line-height:1.45;max-width:34ch}
.bl-v{font-size:15.5px;font-weight:800;white-space:nowrap;font-variant-numeric:tabular-nums}
.bl-v .rk-fl{margin-right:0}
.bl-v svg{vertical-align:-3px;color:var(--muted)}
.tot-row{display:flex;align-items:baseline;justify-content:space-between;gap:20px;
  padding:18px 0 4px}
.tot-lbl{font-size:14.5px;font-weight:800}
.tot-val{font-size:clamp(26px,2.6vw,34px);font-weight:800;letter-spacing:-.04em;
  color:var(--accent-ink);font-variant-numeric:tabular-nums;line-height:1}
.tot-note{font-size:12.5px;color:var(--muted);line-height:1.55;margin-top:6px}
.empty-hint{font-size:13.5px;color:var(--muted);line-height:1.6;padding:6px 0}

.btn-primary{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  width:100%;background:var(--accent);color:var(--on-accent);border-radius:999px;
  padding:15px 22px;font-size:15.5px;font-weight:800;min-height:52px;
  transition:background .2s,transform .2s}
.btn-primary:hover{background:var(--accent-hi);color:var(--on-accent);transform:translateY(-2px)}
/* Кнопка одна и та же в обеих колонках. Две одинаковые заливки рядом спорят
   друг с другом — во второй оставляем контур: действие то же, вес меньше. */
.calc-grid>.calc-col+.calc-col .btn-primary{background:transparent;color:var(--ink);
  border:1.5px solid var(--line)}
.calc-grid>.calc-col+.calc-col .btn-primary:hover{background:var(--panel);color:var(--ink);
  border-color:var(--muted);transform:none}

/* ── Страховка ──────────────────────────────────────────────────────────── */
.ins-row{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:13px 15px;background:var(--card);border:1px solid var(--line);
  border-radius:12px;cursor:pointer;transition:border-color .18s}
.ins-row:hover{border-color:var(--muted)}
.ins-t{font-size:14.5px;font-weight:600}
.ins-row .field-hint{margin-top:2px}
.ins-toggle{position:relative;flex:none;width:42px;height:24px;border-radius:999px;
  background:var(--line);transition:background .2s}
/* Сам флажок невидим, но остаётся в разметке: клики и клавиатура — его */
.ins-toggle input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.ins-slider{position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;
  background:var(--card);box-shadow:0 1px 3px rgba(20,30,24,.28);pointer-events:none;
  transition:transform .2s cubic-bezier(.22,1,.36,1)}
.ins-toggle:has(input:checked),.ins-toggle.on{background:var(--accent)}
.ins-toggle:has(input:checked) .ins-slider,.ins-toggle.on .ins-slider{transform:translateX(18px)}
.ins-toggle:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:3px}
.ins-toggle:has(input:disabled){opacity:.75}
#s-ins-row{margin-top:12px}
#s-ins-row .fl{margin-bottom:8px}

/* ── Способы доставки ───────────────────────────────────────────────────── */
#s-method-row{margin-top:16px}
#s-method-row .card-label{margin-bottom:8px}
.method-chips{display:flex;flex-wrap:wrap;gap:8px}
.rate-chip{display:inline-flex;align-items:center;gap:7px;padding:9px 16px;
  border:1px solid var(--line);border-radius:999px;background:var(--card);
  font-size:13.5px;font-weight:700;color:var(--muted);
  transition:border-color .18s,color .18s,background .18s}
.rate-chip:hover{border-color:var(--muted);color:var(--ink)}
.rate-chip[aria-pressed=true]{border-color:var(--accent);color:var(--accent-ink);background:var(--accent-wash)}
.rate-chip:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.rate-chip span{min-width:22px;padding:0 7px;border-radius:999px;background:var(--panel);color:var(--ink);
  font-size:12.5px;font-weight:800;text-align:center;font-variant-numeric:tabular-nums}
.rate-chip[aria-pressed=true] span{background:var(--accent);color:var(--on-accent)}
.rates-modes{margin-bottom:16px}

/* ── Выбор страны ───────────────────────────────────────────────────────── */
.country-btn{display:flex;align-items:center;gap:10px;text-align:left;cursor:pointer;color:var(--muted)}
.country-btn.is-set{color:var(--ink)}
.country-flag:empty{display:none}
.country-flag img{display:block;box-shadow:0 0 0 1px var(--line)}
.country-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.country-btn svg{flex:none;color:var(--muted)}
/* Окно выбора страны (static/countries.js) рисуется цветами кабинета, если их
   не переопределить: оранжевый вне экрана кабинета — чужой цвет для лендинга. */
.rkcp-back{--border:var(--line);--text:var(--ink);--label:var(--muted);--cyan:var(--accent);
  --w4:var(--panel);--w6:var(--panel);background:rgba(8,8,7,.78)}
.rkcp-back .rkcp{background:var(--card);border-radius:26px;box-shadow:0 22px 44px -16px rgba(0,0,0,.6)}
.rkcp-back .rkcp-ico{background:var(--accent-wash);border-color:var(--accent);color:var(--accent-ink)}
.rkcp-back .rkcp-item.on{background:var(--accent-wash);border-color:var(--accent)}
.rkcp-back .rkcp-abc button.on{color:var(--on-accent)}
/* На телефоне окно на весь экран — скругление там только съедает углы */
@media (max-width:560px){.rkcp-back .rkcp{border-radius:0}}

/* ── Примечания к направлению ───────────────────────────────────────────── */
.calc-note{margin-top:12px;padding:12px 14px;border-radius:12px;background:var(--panel);
  color:var(--muted);font-size:12.5px;line-height:1.6}
.calc-note b{color:var(--ink);font-weight:700}
.calc-note svg{display:inline-block;width:16px;height:16px;margin-right:6px;
  vertical-align:-3px;color:var(--accent-ink)}
/* Обязательная страховка и таможенный сбор меняют итог — их выделяем */
.calc-note--warn{background:var(--accent-wash);color:var(--ink)}
.calc-card-glow .calc-note{background:var(--card)}
#s-r-carrier-link{margin-top:12px;font-size:12.5px;color:var(--muted);text-align:center}
#s-r-carrier-link a{color:var(--accent-ink);font-weight:700;text-decoration:underline}

/* ── Ступени веса ───────────────────────────────────────────────────────── */
#s-tiers-card{margin-top:18px;border:1px solid var(--line);border-radius:18px;
  overflow:hidden;background:var(--card)}
#s-tiers-label{padding:11px 15px;background:var(--panel);font-size:11.5px;font-weight:800;
  letter-spacing:.11em;text-transform:uppercase;color:var(--muted)}
.tier-table{width:100%;border-collapse:collapse;font-size:13.5px}
.tier-table th{padding:6px 15px 10px;text-align:left;font-size:12.5px;font-weight:600;
  color:var(--muted);border-bottom:1px solid var(--line-soft)}
.tier-table td{padding:9px 15px;border-bottom:1px solid var(--line-soft);
  font-variant-numeric:tabular-nums}
.tier-table th:not(:first-child),.tier-table td:not(:first-child){text-align:right}
.tier-table td:not(:first-child){font-weight:700}
.tier-table tr:last-child td{border-bottom:0}
.tier-row.hit td,tr.hit td{background:var(--accent-wash);color:var(--accent-ink);font-weight:800}
.tier-you{display:inline-block;margin-left:8px;padding:1px 9px;border-radius:999px;
  background:var(--accent);color:var(--on-accent);font-size:11.5px;font-weight:800;
  line-height:1.6;vertical-align:1px}
.tier-total td{background:var(--panel);font-weight:800}

/* ── Таблица тарифов внизу ──────────────────────────────────────────────── */
.calc-rates{margin-top:86px;padding-top:60px;border-top:1px solid var(--line)}
/* «Международной» — длинное слово: в половину ширины оно не влезало даже на
   ноутбуке. Заголовок над абзацем, а не рядом. */
.calc-rates .section-heading{grid-template-columns:minmax(0,1fr);gap:18px;margin-bottom:32px}
.calc-rates .section-heading>p{max-width:62ch}
.calc-rates .tbl-foot{line-height:1.6}
#static-rates-head th{font-size:11.5px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--muted);font-weight:800;background:var(--panel);padding:13px 16px;
  text-align:left;white-space:nowrap}
#static-rates-head th:not(:first-child){text-align:right}
#static-rates-body td{padding:12px 16px;border-bottom:1px solid var(--line-soft);
  font-variant-numeric:tabular-nums}
#static-rates-body td:first-child{font-weight:600;white-space:nowrap}
#static-rates-body td.num{text-align:right;font-weight:700;white-space:nowrap}
#static-rates-body td.na{color:var(--muted)}
#static-rates-body td.rates-loading{padding:20px;text-align:center;color:var(--muted);
  font-size:12.5px;font-weight:400}
#static-rates-body tr:last-child td{border-bottom:0}
#static-rates-body tr:hover td{background:var(--panel)}
.rk-fl{width:20px;height:14px;object-fit:cover;box-shadow:0 0 0 1px var(--line);
  display:inline-block;vertical-align:-2px;margin-right:8px}
/* Флаги направления — внахлёст, общие стили .flags в site.css */
.flags{vertical-align:-2px}
#static-rates-body .flags{margin-right:10px}

/* ── Узкие экраны ───────────────────────────────────────────────────────── */
@media (max-width:1000px){
  .calc-grid{grid-template-columns:1fr;gap:44px}
  .calc-grid>.calc-col+.calc-col{border-left:0;padding-left:0;border-top:1px solid var(--line);
    padding-top:44px}
}
@media (max-width:760px){
  .page-wrap{padding:34px var(--gut) 56px}
  .calc-grid{gap:36px}
  .calc-grid>.calc-col+.calc-col{padding-top:36px}
  .calc-col-title{margin-bottom:18px}
  .calc-card{padding-bottom:18px;margin-bottom:18px}
  .price-inp{font-size:30px}
  .price-sym{font-size:22px}
  .calc-card-glow{padding:20px}
  .calc-card.calc-card-glow{padding-bottom:20px}
  .bl-h{max-width:none}
  .calc-rates{margin-top:56px;padding-top:44px}
  #static-rates-head th,#static-rates-body td{padding:11px 13px}
  /* Таблица шире экрана и листается вбок. Направление переносится и стоит на
     месте, иначе длинное «Азербайджан / Армения…» уводило цены за край и
     было непонятно, что таблицу можно листать. */
  #static-rates-head th:first-child,#static-rates-body td:first-child{position:sticky;left:0;z-index:1;
    box-shadow:1px 0 0 var(--line)}
  #static-rates-body td:first-child{min-width:10.5rem;white-space:normal;background:var(--card)}
  #static-rates-body td.rates-loading{position:static;box-shadow:none}
}
/* габариты для объёмного веса (25.10.2026) */
.dims-t{margin-top:18px;font-size:12.5px;font-weight:700;color:var(--ink)}
.dims-row{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:8px;margin-top:8px}
.dims-row span{color:var(--muted);font-size:14px}
.dims-row .fi{text-align:center;padding:11px 6px;min-width:0}
.dims-row .fi::-webkit-outer-spin-button,.dims-row .fi::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.dims-row .fi[type=number]{-moz-appearance:textfield}