/* Калькулятор визы. Грузится только на своей странице (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); }

/* Серверный дубль ответа (шорткод 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;
}

.visa-answers__table {
  width: 100%;
  border-collapse: collapse;
  font-size: .875rem;
  line-height: 1.5;
}

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

.visa-answers__table th,
.visa-answers__table td {
  padding: .55rem .85rem;
  text-align: left;
  white-space: nowrap;
  border-top: 1px solid var(--color-border, rgba(255, 255, 255, .12));
}

.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);
}

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

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

/* Герой. Общий герой посадочной — две колонки под текст и картинку,
   у калькулятора картинки нет, и правая половина стояла пустой.
   Сводим в одну колонку и кладём на панель со скруглением. */
.landing--calc .landing__hero {
  grid-template-columns: 1fr;
  padding: clamp(1.4rem, 4vw, 2.75rem);
  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;
  }
}

/* Проза остаётся в своей колонке для чтения, а блок расчёта выходит на
   всю ширину посадочной — в 68ch две колонки просто не помещаются. */
.landing__body--calc { max-width: none; }
.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: 1.1rem;
}

.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; }
}