/* Калькулятор визы. Грузится только на своей странице (extra_css во frontmatter).
   Цвета и шрифты берутся из переменных сайта — на visa.ru это циан на тёмно-синем,
   на danangvisarun.com янтарь на графите, ни одного своего цвета здесь нет. */

.vcalc {
  margin: 2.5rem 0;
  padding: 1.5rem;
  border: 1px solid var(--color-border-strong, rgba(255, 255, 255, .22));
  border-radius: 14px;
  background: var(--color-surface, #1f1f1f);
}

.vcalc__form {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  align-items: end;
}

.vcalc__field {
  display: flex;
  flex-direction: column;
  gap: .4rem;
}

.vcalc__label {
  font-family: var(--font-sans, system-ui, sans-serif);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--color-text-soft, #c8c4bc);
}

.vcalc__control {
  width: 100%;
  padding: .65rem .75rem;
  font: inherit;
  font-family: var(--font-sans, system-ui, sans-serif);
  font-size: 1rem;
  color: var(--color-text, #f5f5f5);
  background: var(--color-bg, #141414);
  border: 1px solid var(--color-border-strong, rgba(255, 255, 255, .22));
  border-radius: 8px;
}

.vcalc__control:focus-visible {
  outline: 2px solid var(--color-accent, #ff8c00);
  outline-offset: 2px;
}

.vcalc__hint {
  font-size: .75rem;
  color: var(--color-muted, #7a7570);
}

.vcalc__submit {
  padding: .7rem 1.4rem;
  font-family: var(--font-sans, system-ui, sans-serif);
  font-size: .9375rem;
  font-weight: 700;
  color: var(--color-bg, #141414);
  background: var(--color-accent, #ff8c00);
  border: 0;
  border-radius: 8px;
  cursor: pointer;
}

.vcalc__submit:hover { background: var(--color-accent-soft, #ffa940); }

.vcalc__result { margin-top: 1.75rem; }

.vcalc__warn {
  margin: 0 0 1rem;
  padding: .6rem .8rem;
  font-size: .875rem;
  color: var(--color-text, #f5f5f5);
  border-left: 3px solid var(--color-accent, #ff8c00);
  background: var(--color-surface-warm, rgba(255, 255, 255, .04));
}

.vcalc__verdict {
  margin: 0 0 .35rem;
  font-family: var(--font-display, Georgia, serif);
  font-size: 1.5rem;
  line-height: 1.2;
  color: var(--color-text, #f5f5f5);
}

.vcalc__intro {
  margin: 0 0 1.1rem;
  font-size: .9375rem;
  color: var(--color-text-soft, #c8c4bc);
}

.vcalc__plans {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

.vcalc__plan {
  padding: 1rem 1.1rem;
  border: 1px solid var(--color-border, rgba(255, 255, 255, .1));
  border-radius: 10px;
  background: var(--color-bg, #141414);
  /* Даёт .vcalc__rows знать ширину именно карточки, а не вьюпорта — на
     1440px в двухколоночном calc_hero карточка уже сама по себе узкая
     из-за sticky-сайдбара слева, media-запрос по вьюпорту это не видит. */
  container-type: inline-size;
}

.vcalc__plan-name {
  margin: 0;
  font-family: var(--font-sans, system-ui, sans-serif);
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text, #f5f5f5);
}

.vcalc__plan-badge {
  margin: .3rem 0 0;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--color-accent, #ff8c00);
}

.vcalc__rows {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .35rem .75rem;
  margin: .9rem 0 0;
  font-size: .875rem;
}

.vcalc__rows dt {
  margin: 0;
  color: var(--color-text-soft, #c8c4bc);
}

.vcalc__rows dd {
  margin: 0;
  font-weight: 700;
  text-align: right;
  color: var(--color-text, #f5f5f5);
  font-variant-numeric: tabular-nums;
}

/* Длинное значение (например «$0 — за штамп на границе не платят») в
   узкой карточке сжимает 1fr-колонку подписи, и она переносится на три
   строки. Контейнер уже карточки, а не вьюпорта (.vcalc__plan выше) —
   ниже порога подпись и значение встают друг под другом. */
@container (max-width: 26rem) {
  .vcalc__rows {
    grid-template-columns: 1fr;
    gap: 0 .75rem;
  }

  .vcalc__rows dd {
    margin: 0 0 .5rem;
    text-align: left;
  }
}

.vcalc__notes {
  margin: 1.25rem 0 0;
  padding-left: 1.1rem;
  font-size: .875rem;
  line-height: 1.6;
  color: var(--color-text-soft, #c8c4bc);
}

.vcalc__notes li { margin: .3rem 0; }

.vcalc__cta-lead {
  margin: 1.25rem 0 .85rem;
  font-size: .9375rem;
  line-height: 1.65;
  color: var(--color-text, #f5f5f5);
}

.vcalc__cta {
  display: inline-block;
  padding: .75rem 1.5rem;
  font-family: var(--font-sans, system-ui, sans-serif);
  font-size: .9375rem;
  font-weight: 700;
  text-decoration: none;
  color: var(--color-bg, #141414);
  background: var(--color-accent, #ff8c00);
  border-radius: 8px;
}

.vcalc__cta:hover { background: var(--color-accent-soft, #ffa940); }

/* Цвет текста кнопки повторён с бо́льшей специфичностью намеренно. Ниже по
   каскаду лежит `.landing__body a { color: var(--lp-accent) }` (0,2,0), и против
   одноклассового правила выше он выигрывал: текст красился в цвет собственного
   фона, кнопка выглядела пустым прямоугольником. Фон, паддинги и радиус здесь
   не дублируются — только цвет, который перебивали. */
.landing__body a.vcalc__cta { color: var(--color-bg, #141414); }

/* Блок «Что мы сделаем за вас» под полями. Закрывает пустоту левой колонки
   (форма 402 px против карточки ответа 811 px на 1440) и страницу не удлиняет —
   встаёт в уже существующую дыру. Разметку рисует visa-calc.js. */
.vcalc__promise {
  margin: .25rem 0 0;
  padding-top: .9rem;
  border-top: 1px solid var(--color-border, rgba(255, 255, 255, .14));
}

.vcalc__promise-title {
  margin: 0 0 .55rem;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: .75rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-muted, #7a7570);
}

.vcalc__promise-list {
  display: grid;
  gap: .4rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: .9375rem;
  line-height: 1.5;
  color: var(--color-text-soft, #c8c4bc);
}

.vcalc__promise-list li {
  position: relative;
  padding-left: 1.35rem;
}

.vcalc__promise-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 700;
  color: var(--color-accent, #ff8c00);
}

.vcalc__cta-note {
  margin: .7rem 0 0;
  font-size: .875rem;
  color: var(--color-muted, #7a7570);
}

/* Серверный дубль ответа (шорткод visa-answers): тот же справочник без
   JavaScript. Цвета берутся из переменных сайта, своих здесь тоже нет. */

.visa-answers { margin: 2rem 0 0; }

.visa-answers__item {
  margin: 0 0 .9rem;
  line-height: 1.65;
}

.visa-answers__asof {
  margin: 1.75rem 0 .6rem;
  font-size: .875rem;
  color: var(--color-text-soft, #c8c4bc);
}

/* Таблица шире узкого экрана — везём её в своей прокрутке, чтобы она не
   растягивала страницу целиком. */
.visa-answers__scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--color-border-strong, rgba(255, 255, 255, .22));
  border-radius: 12px;
}

/* Плотность: 29 строк — самый высокий объект страницы после калькулятора.
   На прежних .55rem/.875rem справочник занимал 1426px, то есть полтора
   экрана однотипной сетки. */
.visa-answers__table {
  width: 100%;
  border-collapse: collapse;
  font-size: .8125rem;
  line-height: 1.45;
}

.visa-answers__table caption {
  padding: .7rem .85rem;
  text-align: left;
  font-size: .8125rem;
  color: var(--color-text-soft, #c8c4bc);
}

/* `white-space: nowrap` стоял на ВСЕХ ячейках, и min-content таблицы выходил
   855px в колонке 729px — горизонтальная прокрутка появлялась уже на 1440.
   Длинным ячейкам («90 дней за 12 месяцев», «14 марта 2028») перенос разрешён,
   коротким числовым он не нужен: nowrap оставлен точечно ниже. */
.visa-answers__table th,
.visa-answers__table td {
  padding: .35rem .7rem;
  text-align: left;
  border-top: 1px solid var(--color-border, rgba(255, 255, 255, .12));
}

.visa-answers__table td:nth-child(2),
.visa-answers__table td:nth-child(5),
.visa-answers__table td:nth-child(6) { white-space: nowrap; }

.visa-answers__table thead th {
  font-weight: 700;
  color: var(--color-text, #f5f5f5);
}

.visa-answers__table tbody th { font-weight: 600; }

.visa-answers__foot {
  margin: .85rem 0 0;
  font-size: .8125rem;
  line-height: 1.6;
  color: var(--color-text-soft, #c8c4bc);
}

/* Ответ словами: 25 абзацев лежат в HTML целиком (их читает ИИ-краулер,
   который JS не исполняет), но человеку по умолчанию показана таблица —
   подряд идущие однотипные абзацы её только заслоняли. */
.visa-answers__more {
  margin: 1.25rem 0 0;
  border-top: 1px solid var(--color-border, rgba(255, 255, 255, .12));
}

.visa-answers__more > summary {
  padding: .85rem 0;
  font-family: var(--font-sans, system-ui, sans-serif);
  font-size: .9375rem;
  font-weight: 600;
  color: var(--color-text-soft, #c8c4bc);
  cursor: pointer;
}

.visa-answers__more > summary:hover { color: var(--color-text, #f5f5f5); }
.visa-answers__more[open] > summary { color: var(--color-text, #f5f5f5); }
.visa-answers__more .visa-answers__item:first-of-type { margin-top: .4rem; }

@media (max-width: 480px) {
  .vcalc { padding: 1.1rem; }
  .vcalc__verdict { font-size: 1.25rem; }
}

/* На телефоне шесть колонок в 335px не живут ни при каком переносе. Таблица
   остаётся таблицей, но название страны залипает у левого края — строка
   читается при прокрутке вбок, а прокрутка заперта внутри обёртки и наружу,
   на страницу, не выходит. */
@media (max-width: 700px) {
  .visa-answers__table th,
  .visa-answers__table td { white-space: nowrap; }

  .visa-answers__table tbody th {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--color-surface, #1f1f1f);
  }

  .visa-answers__table thead th:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--color-surface, #1f1f1f);
  }
}

/* ============================================================
   Первый экран страницы-калькулятора: герой и расчёт в две колонки.
   Включается двумя метками — `calc_hero: true` во фронтматтере
   (класс .landing--calc на статье) и модификатор .vcalc--split на
   самом блоке расчёта. Без них ни одна посадочная не меняется.
   Структура взята с danangvisarun.com/apply-e-visa-vietnam, цвета —
   свои: только переменные темы, ни одного числа-цвета здесь нет.
   ============================================================ */

/* Герой. Общий герой посадочной — две колонки под текст и картинку,
   у калькулятора картинки нет, и правая половина стояла пустой.
   Сводим в одну колонку и кладём на панель со скруглением. */
.landing--calc .landing__hero {
  grid-template-columns: 1fr;
  padding: clamp(1.1rem, 3vw, 1.9rem);
  border: 1px solid var(--color-border, rgba(255, 255, 255, .1));
  border-radius: 20px;
  background: linear-gradient(155deg,
    var(--color-surface, #1B2742) 0%,
    var(--color-bg, #0E1525) 78%);
}

/* Ряд доверия подтягивается вплотную к герою — в образце он читается
   как часть первого экрана, а не как отдельный следующий блок. */
.landing--calc .landing__trust {
  margin-top: .9rem;
  border-radius: 20px;
}

@media (min-width: 900px) {
  .landing--calc .landing__lead { max-width: 62ch; }
  .landing--calc .landing__points {
    grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
    gap: .7rem 1.75rem;
  }
}

/* Хлебные крошки на телефоне занимали две строки над H1 и отжимали калькулятор
   вниз, ничего не давая взамен: путь /услуги/ на этой странице и так очевиден. */
@media (max-width: 700px) {
  .landing--calc .landing__crumbs { display: none; }

  /* Четыре плитки доверия вставали в четыре этажа на 216px. Строка с боковой
     прокруткой читается тем же взглядом и не разрывает путь «ответ → дверь». */
  .landing--calc .landing__trust {
    display: flex;
    gap: .6rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .landing--calc .landing__trust-item {
    flex: 0 0 auto;
    min-width: 8.5rem;
  }
}

/* Единственная фотография страницы и короткая таблица «город → переход»
   стоят рядом: пять строк данных и кадр — соседи по фактуре, а друг под
   другом они дают лишний экран прокрутки и пустую половину справа. */
.visa-route {
  display: grid;
  gap: 1.25rem 1.75rem;
  align-items: start;
  margin: 1.5rem 0;
}

@media (min-width: 900px) {
  .visa-route { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
}

.visa-route__table {
  width: 100%;
  border-collapse: collapse;
  font-size: .9375rem;
}

.visa-route__table th,
.visa-route__table td {
  padding: .45rem .85rem .45rem 0;
  text-align: left;
  border-bottom: 1px solid var(--color-border, rgba(255, 255, 255, .12));
}

.visa-shot {
  margin: 0;
  max-width: 36rem;
}

.visa-shot img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
}

.visa-shot figcaption {
  margin: .6rem 0 0;
  font-size: .875rem;
  line-height: 1.55;
  color: var(--color-text-soft, #c8c4bc);
}

/* Проза остаётся в своей колонке для чтения, а блок расчёта выходит на
   всю ширину посадочной — в 68ch две колонки просто не помещаются. */
/* Герой и расчёт — один объект первого экрана, а не два блока подряд: между
   ними 44px вместо общих 88px, иначе кнопка «Посчитать» не влезает в 900px
   на 1440. Воздух между остальными блоками страницы не тронут. */
.landing__body--calc { max-width: none; margin-top: 2rem; }
.landing__body--calc > p,
.landing__body--calc > ul,
.landing__body--calc > ol,
.landing__body--calc > blockquote { max-width: 68ch; }

/* Сам расчёт: внешняя рамка снимается, карточками становятся поля и
   ответ по отдельности. */
.vcalc--split {
  padding: 0;
  border: 0;
  background: none;
}

.vcalc--split .vcalc__form,
.vcalc--split .vcalc__result {
  padding: clamp(1.1rem, 2.5vw, 1.5rem);
  border: 1px solid var(--color-border-strong, rgba(255, 255, 255, .22));
  border-radius: 16px;
  background: var(--color-surface, #1f1f1f);
}

.vcalc--split .vcalc__form {
  grid-template-columns: 1fr;
  align-items: stretch;
  gap: .8rem;
}

.vcalc--split .vcalc__result { margin-top: 1rem; }

@media (min-width: 1000px) {
  /* Слева поля, справа ответ. align-items: start обязателен: без него
     колонки растягиваются на высоту строки и sticky не за что зацепить. */
  .vcalc--split {
    display: grid;
    grid-template-columns: minmax(17rem, 21rem) minmax(0, 1fr);
    gap: 1.25rem;
    align-items: start;
  }

  /* Залипание ограничено высотой самого блока расчёта: оба элемента —
     ячейки одной строки грида, поэтому ниже неё карточка не уедет и на
     следующие секции не наползёт. Отступ сверху — под липкую шапку сайта. */
  .vcalc--split .vcalc__form,
  .vcalc--split .vcalc__result {
    position: sticky;
    top: calc(var(--header-h, 4rem) + 1rem);
  }

  .vcalc--split .vcalc__result { margin-top: 0; }
}

/* ============================================================
   Переключатель языка RU | EN в шапке.
   Живёт здесь, а не в main.css: файл грузится только на паре
   страниц-калькуляторов (extra_css во frontmatter), поэтому
   остальному сайту эти правила не достаются вовсе.
   Геометрия повторяет .lang-toggle — на его месте он и стоит.
   ============================================================ */
.lang-switch {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  overflow: hidden;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1;
}

.lang-switch__on,
.lang-switch__off {
  padding: 0.4rem 0.7rem;
  display: inline-flex;
  align-items: center;
}

/* Активный язык — метка, а не ссылка: нажимать на него некуда. */
.lang-switch__on {
  background: var(--color-accent);
  color: #0d0d0d;
  font-weight: 600;
}

.lang-switch__off {
  color: var(--color-text-soft);
  text-decoration: none;
  transition: background-color 0.2s var(--ease-out), color 0.2s var(--ease-out);
}

.lang-switch__off:hover,
.lang-switch__off:focus-visible {
  background: var(--color-surface, #1f1f1f);
  color: var(--color-text);
}

.lang-switch__off:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: -2px;
}