/* onlinevisa.pro — прототип. Палитра выведена из логотипа (синий #3E7CB9),
   углублена до чернильного и дополнена тёплым песочным фоном и терракотовым акцентом. */

:root{
  --ink:#0F2437;          /* основной текст, тёмно-синий, не чёрный */
  --ink-2:#4A5B6B;        /* вторичный текст */
  --ink-3:#8A99A6;        /* подписи */
  --blue:#2C6BA8;         /* фирменный из логотипа */
  --blue-deep:#123A5E;
  --clay:#C05B3B;         /* акцент действия */
  --clay-dark:#A34A2E;
  --sand:#F5F1EA;         /* фон страницы */
  --paper:#FFFDFA;        /* карточки */
  --line:#E2DAD0;         /* линии */
  --ok:#2F7A55;
  --warn:#B0762A;
  --maxw:1180px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html{background:var(--sand)}   /* картинку фона и вуаль добавляет ui.js по настройке из админки */
body{
  /* полупрозрачная вуаль поверх узора: чем она плотнее, тем бледнее рисунок */
  margin:0; min-height:100vh; background:transparent; color:var(--ink);
  font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:inherit}
button{font:inherit; cursor:pointer}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px}

/* ---------- шапка ---------- */
.top{background:var(--paper); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:40}
.top__in{display:flex; align-items:center; gap:32px; height:84px}
.logo img{height:48px; width:auto; display:block}
.nav{display:flex; gap:26px; font-size:15px; margin-left:8px}
.nav a{text-decoration:none; color:var(--ink-2); padding:6px 0; border-bottom:2px solid transparent}
.nav a:hover{color:var(--ink); border-bottom-color:var(--clay)}
.top__right{margin-left:auto; display:flex; align-items:center; gap:10px}
.pill{
  display:inline-flex; align-items:center; gap:8px; height:38px; padding:0 14px;
  border:1px solid var(--line); background:var(--paper); border-radius:3px;
  font-size:14px; color:var(--ink-2); text-decoration:none; white-space:nowrap;
}
.pill:hover{border-color:var(--blue); color:var(--ink)}
.pill--msg{border-color:var(--clay); background:var(--paper); color:var(--clay-dark); font-weight:600}
.pill--msg:hover{border-color:var(--clay-dark); background:#FDF4F1; color:var(--clay-dark)}
.cur{display:flex; border:1px solid var(--line); border-radius:3px; overflow:hidden; height:38px}
.cur button{border:0; background:transparent; min-width:36px; padding:0 9px; font-size:14px; color:var(--ink-2); letter-spacing:.02em}
.cur button.is-on{background:var(--ink); color:#fff}

/* выпадающий список стран в меню */
.navdrop{display:flex; align-items:center}
.navdrop__btn{background:transparent; border:0; padding:6px 0; font-size:15px; color:var(--ink-2);
  display:inline-flex; align-items:center; gap:6px; border-bottom:2px solid transparent}
.navdrop__btn:hover, .navdrop.is-open .navdrop__btn{color:var(--ink); border-bottom-color:var(--clay)}
.navdrop__menu{left:0; right:auto; width:250px; top:52px}
.navdrop__flag{width:34px; height:24px; flex:none; border-radius:3px; overflow:hidden;
  border:1px solid var(--line); background:#fff}
.navdrop__flag img{width:100%; height:100%; object-fit:cover}
.navdrop__all{border-top:1px solid var(--line); margin-top:4px; padding-top:10px !important}
.navdrop__all span{font-size:13.5px !important; color:var(--blue-deep) !important; font-weight:600}

/* выпадающий «Связаться» в шапке */
.cdrop{position:relative}
.cdrop__btn{cursor:pointer; display:inline-flex; align-items:center; gap:7px}
.cdrop__arr{font-size:10px; transition:transform .15s}
.cdrop.is-open .cdrop__arr{transform:rotate(180deg)}
.cdrop__menu{position:absolute; right:0; top:46px; width:262px; background:var(--paper);
  border:1px solid var(--line); border-radius:6px; box-shadow:0 12px 30px rgba(15,36,55,.16); padding:6px; z-index:50}
.cdrop__menu[hidden]{display:none}
.cdrop__menu a{display:flex; align-items:center; gap:11px; padding:9px 10px; text-decoration:none; border-radius:4px; color:var(--ink)}
.cdrop__menu a:hover{background:var(--sand)}
.cdrop__menu a span:last-child{display:flex; flex-direction:column; font-size:12px; color:var(--ink-3); line-height:1.3}
.cdrop__menu a b{font-size:14px; color:var(--ink); font-weight:600}
/* минималистичные иконки: прозрачный кружок с тонкой обводкой */
.cdrop__ic{width:32px; height:32px; border-radius:50%; flex:none; display:flex; align-items:center;
  justify-content:center; border:1px solid var(--line); color:var(--ink-2); background:transparent}
.cdrop__ic svg{width:17px; height:17px}
.cdrop__menu a:hover .cdrop__ic{border-color:var(--blue); color:var(--blue)}
/* аватарка с бейджем платформы */
.cdrop__av{position:relative; width:32px; height:32px; flex:none}
.cdrop__av img{width:32px; height:32px; border-radius:50%; object-fit:cover; display:block; background:#fff}
.cdrop__b{position:absolute; left:-3px; bottom:-3px; font-size:7px; font-style:normal; font-weight:700;
  color:#fff; border-radius:3px; padding:1px 3px; line-height:1.1; border:1.5px solid var(--paper)}
.cdrop__b--tg{background:#2AABEE}
.cdrop__b--wa{background:#25D366}
.cdrop__menu a em{font-style:normal}
.cdrop__menu a.is-copied em{color:var(--ok); font-weight:600}

/* бургер и мобильное меню — скрыты на десктопе, включаются в медиазапросе */
.burger{display:none; width:42px; height:42px; flex:none; border:1px solid var(--line);
  border-radius:3px; background:var(--paper); flex-direction:column; align-items:center;
  justify-content:center; gap:4px; padding:0}
.burger span{display:block; width:19px; height:2px; border-radius:2px; background:var(--ink-2); transition:.2s}
.burger.is-open span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger.is-open span:nth-child(2){opacity:0}
.burger.is-open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
/* видимостью управляет атрибут hidden (переключает JS); на десктопе меню и так закрыто,
   а бургер скрыт — открыть его нельзя. Базовый display:none тут ставить НЕЛЬЗЯ:
   он перебьёт снятие [hidden] и меню не покажется (урок 2026-07-25). */
.mobmenu{position:absolute; top:100%; left:0; right:0; z-index:45;
  background:var(--paper); border-bottom:1px solid var(--line); box-shadow:0 14px 30px rgba(15,36,55,.16);
  /* 100vh на телефоне БОЛЬШЕ видимой части: в него входит область под панелью браузера.
     Меню при этом считает, что всё поместилось, и не скроллится — нижние пункты
     («Форма на сайте») оказывались за краем экрана и были недоступны. dvh меряет
     реально видимую высоту; vh оставлен строкой выше для старых браузеров. */
  max-height:calc(100vh - 84px); max-height:calc(100dvh - 84px);
  overflow-y:auto; overscroll-behavior:contain; padding:8px 0}
.mobmenu[hidden]{display:none}
/* страховка: на десктопе меню не должно всплыть, даже если атрибут случайно снят */
@media (min-width:901px){ .mobmenu{display:none !important} }
.mobmenu__sec{padding:10px 18px; border-top:1px solid var(--line)}
.mobmenu__sec:first-child{border-top:0}
.mobmenu__sec h4{margin:2px 0 8px; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3)}
.mobmenu__c,.mobmenu__l,.mobmenu__all,.mobmenu__con{display:flex; align-items:center; gap:12px;
  text-decoration:none; color:var(--ink); padding:11px 4px; border-radius:4px}
.mobmenu__c{font-weight:600}
.mobmenu__flag{width:32px; height:22px; flex:none; border-radius:3px; overflow:hidden;
  border:1px solid var(--line); background:#fff}
.mobmenu__flag img{width:100%; height:100%; object-fit:cover; display:block}
.mobmenu__all{color:var(--blue-deep); font-weight:600; font-size:14px}
.mobmenu__l{font-size:16px}
.mobmenu__con span:last-child{display:flex; flex-direction:column; font-size:12px; color:var(--ink-3); line-height:1.3}
.mobmenu__con b{font-size:15px; color:var(--ink); font-weight:600}
.mobmenu__con em{font-style:normal}
.mobmenu__con.is-copied em{color:var(--ok); font-weight:600}
body.menu-open{overflow:hidden}

/* ---------- герой + поиск ---------- */
/* блок наезжает на баннер до середины — так же, как на страницах стран */
.hero{position:relative; z-index:2; margin-top:calc(var(--bh) * -0.5);
  padding:40px 0 14px; background:transparent}
.hero::before{content:''; position:absolute; z-index:-1; pointer-events:none;
  /* смягчает переход от баннера к тексту. Ширина — по колонке контента, а не по всему
     экрану: иначе полоса закрывает фоновый узор по краям страницы. */
  /* ровно по колонке контента (та же ширина, что у калькулятора) и до его нижнего края —
     иначе полоса вылезает по бокам и снизу и срезает фоновый узор */
  left:50%; transform:translateX(-50%);
  width:min(calc(var(--maxw) - 48px), calc(100% - 48px)); top:0; bottom:14px;
  background:linear-gradient(to bottom, rgba(245,241,234,0) 0%, rgba(245,241,234,.45) 16%,
    rgba(245,241,234,.8) 34%, rgba(245,241,234,.96) 52%, var(--sand) 64%, var(--sand) 100%)}
/* если баннера нет — обычный отступ, без наезда */
/* вправо сдвигаем только текст; калькулятор остаётся во всю ширину */
.hero__top{padding-left:52px}
body.no-banner .hero{margin-top:0; padding-top:56px}
body.no-banner .hero::before{display:none}
.hero h1{
  font-size:clamp(34px,5vw,56px); line-height:1.04; letter-spacing:-.03em;
  margin:0 0 16px; max-width:15ch; font-weight:700;
}
.hero h1 em{font-style:normal; color:var(--blue)}
.hero p.lead{font-size:19px; color:var(--ink-2); max-width:52ch; margin:0}
.hero__top{margin-bottom:26px}
.hero__stamp{display:flex; justify-content:center}
.hero__stamp img{width:100%; max-width:300px; height:auto; transform:rotate(-9deg); opacity:.6}
/* Печать: стартует на уровне заголовка, прилипает, когда нижний край буквы D доходит
   до низа баннера, и отцепляется ровно тогда же, когда «отлипает» сам баннер — дальше
   едет вместе с ним. Всё на нативном sticky: JS отстаёт от прокрутки на кадр и даёт дрожание.
   --stampT — точка прилипания (замерено: низ баннера − 156px).
   Высота зоны = --stampT − 157px: при ней sticky отпускает печать ровно на том же пикселе
   прокрутки, где отлипает баннер. Меняете --stampT — высота зоны едет за ней сама.
   ⛔ Здесь всё настроено и проверено владельцем — не трогать. Телефону свои числа
   заданы отдельно, в блоке @media (max-width:700px). */
.hero{position:relative}
.hero__stampwrap{position:absolute; top:37px; left:0; right:0; z-index:0; pointer-events:none;
  --stampT:calc(var(--bh) - 32px); height:calc(var(--stampT) - 157px)}
/* выравниваем по колонке контента, а не по всему экрану */
.hero__stamp{position:sticky; top:var(--stampT);
  display:flex; justify-content:flex-end; max-width:var(--maxw); margin:0 auto;
  padding-right:calc(24px + 52px)}
@media (max-width:860px){
  .hero__top{padding-left:0}
  .hero__stampwrap{position:static; height:auto}
  .hero__stamp{position:static; justify-content:flex-start; padding-right:0; margin:8px 0 0}
  .hero__stamp img{max-width:150px}
}

.picker{background:var(--paper); border:1px solid var(--line); border-radius:4px; padding:22px 24px;
  position:relative; z-index:1}

/* Прокрутка к якорю (ссылки подвала и меню: #pick, #visas, #reviews, #news…).
   Браузер ставит верх блока вровень с верхом окна, а там липкая шапка — блок наполовину
   уезжает под неё. Отступ = высота шапки + 10px, чтобы блок был виден целиком.
   Правило общее для всех якорных блоков: под шапку уезжали все, не только подбор виз. */
.picker[id], .section[id], .csec[id], .bstick[id]{ scroll-margin-top:var(--anchorGap) }
.hero .picker{margin-top:48px}
.picker__row{display:flex; gap:22px; align-items:flex-end; flex-wrap:wrap}
.field{display:flex; flex-direction:column; gap:7px; min-width:230px; flex:1}
.field label{font-size:12px; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3)}
.field select,.field input{
  height:48px; border:1px solid var(--line); border-radius:3px; background:#fff;
  padding:0 13px; font-size:16px; color:var(--ink); font-family:inherit;
}
.field select:focus,.field input:focus{outline:2px solid var(--blue); outline-offset:-2px}

/* возраст в калькуляторе: подсвечен, когда без него цену не посчитать;
   погашен, когда для выбранных виз он не нужен (поле не прячем — так видно, что оно есть) */
.field--need input{border-color:var(--clay); background:#FDF4F1}
.field--need label{color:var(--clay)}
.field--off label{color:#B3BCC4}
.field--off input{background:#F0ECE5; color:var(--ink-3); cursor:not-allowed; border-color:var(--line)}
.field--off input::placeholder{color:#B9C2C9}
.picker__note{margin:14px 0 0; font-size:14px; color:var(--ink-2)}
.picker__note b{color:var(--ink)}

/* ---------- сетка виз ---------- */
.section{padding:46px 0}
#visas{padding-top:23px}
.section__head{display:flex; align-items:baseline; gap:16px; margin-bottom:24px}
.section__head h2{font-size:26px; letter-spacing:-.02em; margin:0; font-weight:700}
.section__head span{font-size:14px; color:var(--ink-3)}
/* заголовок секции ведёт на свою страницу — выглядит как заголовок, подчёркивается при наведении */
.section__head h2 a{color:inherit; text-decoration:none}
.section__head h2 a:hover{text-decoration:underline; text-underline-offset:3px}
.section__all{margin-left:auto; font-size:14px; color:var(--blue-deep); text-decoration:none; white-space:nowrap}
.section__all:hover{text-decoration:underline}
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(268px,1fr)); gap:22px}

.card{
  background:var(--paper); border:1px solid var(--line); border-radius:4px; overflow:hidden;
  display:flex; flex-direction:column; text-decoration:none;
  transition:border-color .15s, transform .15s;
}
.card:hover{border-color:var(--blue); transform:translateY(-2px)}
/* вся карточка — ссылка на страницу визы; флаг и кнопка кликаются поверх неё */
.card{position:relative}
.card__link{position:absolute; inset:0; z-index:1}
.card .flagcol, .card .card__cta{position:relative; z-index:2}
.card__body{padding:18px 18px 16px; display:flex; flex-direction:column; gap:14px; flex:1}
.card__head{display:flex; gap:15px; align-items:flex-start}
.flagcol{display:flex; flex-direction:column; align-items:center; gap:7px; flex:none;
  text-decoration:none; color:inherit}
.flagcol:hover .flagcol__name{color:var(--blue)}
.flagcol:hover .flagcircle{border-color:var(--blue)}
.flagcircle{
  height:52px; border-radius:5px; border:1px solid var(--line);
  overflow:hidden; background:#fff; flex:none; box-shadow:0 1px 2px rgba(15,36,55,.08);
}
.flagcircle img{height:100%; width:auto; display:block}
.flagcol__name{font-size:12px; color:var(--ink-2); text-align:center; line-height:1.2; font-weight:600; max-width:96px}
.card__desc{flex:1; padding-top:3px}
.card__title{font-size:17px; font-weight:700; margin:0}
.card:hover .card__title{color:var(--blue)}
.card__sub{font-size:13px; color:var(--ink-3); margin:5px 0 0}
.specs{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;
  gap:clamp(5px,2vw,10px); border-top:1px solid var(--line); padding-top:11px}
.spec{min-width:0}
.spec b{display:block; font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); font-weight:600}
.spec span{font-size:14px; color:var(--ink)}
.spec--price span{font-weight:700; white-space:nowrap}
.ready{font-size:13px; color:var(--ink-2); margin-top:auto}
.ready b{color:var(--ok); font-weight:700}
.ready.is-late b{color:var(--warn)}
.card__cta{
  margin-top:4px; height:42px; display:flex; align-items:center; justify-content:center;
  background:var(--clay); color:#fff; border:0; border-radius:3px; font-size:15px; font-weight:600;
}
.card__cta:hover{background:var(--clay-dark)}

.card.is-blocked{opacity:1}
.card.is-blocked .card__ph img{filter:grayscale(1) contrast(.9)}
.blocked-note{
  border-top:1px solid var(--line); padding-top:11px; font-size:13px; color:var(--ink-2);
}
.blocked-note b{color:var(--ink); display:block; margin-bottom:3px}
.card__cta--ghost{background:var(--paper); color:var(--clay-dark); border:1px solid var(--clay); font-weight:600}
.card__cta--ghost:hover{background:#FDF4F1; border-color:var(--clay-dark)}

/* ---------- как работает ---------- */
.steps{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:0;
  border-top:1px solid var(--line);
  /* фон-узор просвечивал сквозь текст — приглушаем его под этим блоком */
  background:rgba(245,241,234,.72); border-radius:4px}
.step{padding:22px 24px 24px; border-right:1px solid var(--line)}
.step:last-child{border-right:0}
.step b{display:block; font-size:13px; color:var(--clay); letter-spacing:.1em; margin-bottom:8px}
.step h3{margin:0 0 6px; font-size:17px}
.step p{margin:0; font-size:14px; color:var(--ink-2)}

/* ---------- отзывы (карусель) ---------- */
.carousel-nav{margin-left:auto; display:flex; gap:8px}
.carousel-nav button{
  width:38px; height:38px; border:1px solid var(--line); background:var(--paper); border-radius:3px;
  font-size:20px; line-height:1; color:var(--ink-2);
}
.carousel-nav button:hover{border-color:var(--blue); color:var(--ink)}
.reviews{
  display:grid; grid-auto-flow:column; grid-auto-columns:minmax(320px,340px);
  gap:18px; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:6px;
  scrollbar-width:thin;
}
.review{
  scroll-snap-align:start; background:var(--paper); border:1px solid var(--line); border-radius:4px;
  padding:18px 20px; text-decoration:none; color:inherit; display:flex; flex-direction:column; gap:12px;
}
.review:hover{border-color:var(--blue)}
.review header{display:flex; align-items:center; gap:11px}
.ava{
  width:42px; height:42px; border-radius:50%; flex:none; color:#fff; font-weight:700; font-size:18px;
  display:flex; align-items:center; justify-content:center; object-fit:cover; background:#DCD5CC;
}
.review header b{display:block; font-size:15px}
.review header span{font-size:12.5px; color:var(--ink-3)}
.review p{margin:0; font-size:14.5px; line-height:1.6; color:var(--ink-2)}
.reviews-foot{display:flex; align-items:center; gap:20px; margin-top:20px; flex-wrap:wrap}
.btn-reviews{
  display:inline-flex; align-items:center; height:44px; padding:0 22px; background:var(--paper);
  border:1px solid var(--clay); border-radius:3px; text-decoration:none; color:var(--clay-dark);
  font-weight:600; font-size:15px;
}
.btn-reviews:hover{border-color:var(--clay-dark); background:#FDF4F1}
.src-note{margin:0; font-size:13px; color:var(--ink-3); flex:1; min-width:240px}
.src-note b{color:var(--ink-2)}

/* ---------- статьи ---------- */
.posts{display:grid; grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); gap:22px}
.post{background:var(--paper); border:1px solid var(--line); border-radius:4px; padding:20px; text-decoration:none; display:block}
.post:hover{border-color:var(--blue)}
.post span{font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3)}
.post h3{margin:8px 0 8px; font-size:18px; letter-spacing:-.01em}
.post p{margin:0; font-size:14px; color:var(--ink-2)}

/* ---------- страница страны ---------- */
.chero__calc{ margin-top:18px; max-width:820px }
.crumbs{padding:20px 24px 0; font-size:13px; color:var(--ink-3)}
.crumbs a{color:var(--ink-2); text-decoration:none}
.crumbs a:hover{color:var(--blue)}
.crumbs span{color:var(--ink)}
/* высота баннера при ширине контента: 2752×1536 → коэффициент 0.558 */
:root{ --bh: calc((min(100vw, 1180px) - 48px) * 0.558); }
/* Отступ при прокрутке к якорю: высота липкой шапки + 10px, чтобы блок был виден целиком.
   Одно число на все якоря — раньше у оглавления статьи стояло своё, и они разъезжались. */
:root{ --anchorGap:94px; }

/* баннер «прилипает», блок с заголовком наезжает на него до середины, дальше скролл обычный */
.bstick{ height: calc(var(--bh) * 1.5 + 18px); }
.bstick--c{ height: calc(var(--bh) * 1.667 + 18px); }
.cbanner{ position:sticky; top:84px; padding:18px 0 0; z-index:0 }
.cbanner img{width:100%; height:auto; aspect-ratio:2752/1536; display:block;
  border-radius:8px; background:#fff; border:1px solid var(--line)}

.chero{ position:relative; z-index:2; margin-top:calc(var(--bh) * -0.667);
  padding:40px 0 14px; background:transparent }
/* весь блок сдвинут вправо примерно на ширину флага */
.chero .wrap{ padding-left:calc(24px + 52px) }
/* мягкая дымка цвета фона: баннер просвечивает, но текст читается */
.chero::before{ content:''; position:absolute; z-index:-1; pointer-events:none;
  /* ширина — по колонке контента, иначе полоса закрывает фоновый узор по краям страницы */
  /* ширина — ровно как у баннера (колонка контента), переход растянут на всю высоту:
     короткий градиент выглядел резкой полосой поперёк картинки */
  left:50%; transform:translateX(-50%);
  width:min(calc(var(--maxw) - 48px), calc(100% - 48px));
  top:0; bottom:0;
  background:linear-gradient(to bottom, rgba(245,241,234,0) 0%, rgba(245,241,234,.18) 14%,
    rgba(245,241,234,.4) 30%, rgba(245,241,234,.62) 46%, rgba(245,241,234,.8) 62%,
    rgba(245,241,234,.92) 78%, var(--sand) 92%, var(--sand) 100%) }
.chero h1{ display:flex; align-items:center; gap:14px; margin:0 0 10px; padding-right:44px;
  font-size:clamp(30px,4vw,44px); letter-spacing:-.03em; line-height:1.05 }
.chero__flag{ height:38px; flex:none; border-radius:4px; overflow:hidden;
  border:1px solid var(--line); box-shadow:0 1px 3px rgba(15,36,55,.14); background:#fff }
.chero__flag img{ height:38px; width:auto; display:block }
.chero__need{ margin:0 0 11px; font-size:19px; line-height:1.35; color:var(--ink-2);
  max-width:none; padding-right:44px }
/* секции после баннера непрозрачны, иначе прилипший баннер просвечивает под ними */
.csec{padding:44px 0; position:relative; z-index:2}
.csec--alt{}   /* фон во всю ширину убран — подложка теперь у блока с текстом (.cinfo) */
.csec h2{font-size:26px; letter-spacing:-.02em; margin:0 0 22px}
.cgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:20px}
.ccard{background:var(--paper); border:1px solid var(--line); border-radius:6px; padding:20px; text-decoration:none; color:inherit; display:flex; flex-direction:column; gap:14px}
.ccard:hover{border-color:var(--blue); transform:translateY(-2px); transition:.15s}
.ccard__top b{font-size:17px; display:block}
.ccard__top span{font-size:13px; color:var(--ink-3)}
.ccard{display:flex; flex-direction:column}
.ccard__specs{display:flex; flex-direction:column; gap:8px; border-top:1px solid var(--line);
  padding-top:12px; margin-top:auto}
.ccard__specs div{gap:14px}
.ccard__specs div > span,.ccard__specs div > b{text-align:right}
.ccard__specs div{display:flex; justify-content:space-between; font-size:14px}
.ccard__specs i{color:var(--ink-3); font-style:normal}
.ccard__cta{color:var(--clay); font-weight:600; font-size:15px; margin-top:12px}
.cinfo{display:grid; grid-template-columns:1fr 1fr; gap:44px}
.cbul{margin:0; padding-left:18px; color:var(--ink-2); line-height:1.8}
.faq{border-bottom:1px solid var(--line); padding:12px 0}
.faq summary{cursor:pointer; font-weight:600; font-size:15px; list-style:none; display:flex; justify-content:space-between}
.faq summary::after{content:'+'; color:var(--clay); font-size:20px; line-height:1}
.faq[open] summary::after{content:'–'}
.faq p{margin:10px 0 0; color:var(--ink-2); font-size:14.5px}
.clink{color:var(--blue-deep); font-weight:600; text-decoration:none}
.cfin{display:flex; align-items:center; justify-content:space-between; gap:24px; background:var(--paper); border:1px solid var(--line); border-radius:8px; padding:28px 32px; flex-wrap:wrap}
.cfin h2{margin:0 0 6px}
.cfin p{margin:0; color:var(--ink-2)}
@media (max-width:760px){ .cinfo{grid-template-columns:1fr; gap:28px} .chero__in{flex-direction:column; align-items:flex-start} }

/* ---------- страница одной визы ---------- */
.vhero{padding:26px 0 40px}
.vhero__in{display:grid; grid-template-columns:1.1fr .9fr; gap:44px; align-items:center}
.vhero__flag{height:46px; width:auto; display:inline-block; border-radius:5px; overflow:hidden;
  border:1px solid var(--line); margin-bottom:14px; box-shadow:0 1px 3px rgba(15,36,55,.1)}
.vhero__flag img{height:46px; width:auto; display:block}
.vhero h1{margin:0 0 12px; font-size:clamp(27px,3.6vw,40px); letter-spacing:-.03em; line-height:1.1}
.vhero__lead{margin:0 0 22px; font-size:17px; color:var(--ink-2); max-width:52ch}
.vfacts{display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:6px; overflow:hidden}
.vfact{background:var(--paper); padding:16px 18px}
.vfact i{font-style:normal; font-size:11px; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-3); display:block; margin-bottom:6px}
.vfact b{font-size:19px; letter-spacing:-.01em; display:block}
.vfact small{font-size:12.5px; color:var(--ink-3); display:block; margin-top:3px}
@media (max-width:820px){ .vhero__in{grid-template-columns:1fr; gap:26px} }

/* ---------- новости ---------- */
.news{display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:20px}
.newsi{background:var(--paper); border:1px solid var(--line); border-radius:6px; padding:20px; border-left:3px solid var(--clay); text-decoration:none; color:inherit; display:block}
.newsi:hover{border-color:var(--blue); border-left-color:var(--clay)}
.newsi span{font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3)}
.newsi h3{margin:8px 0 8px; font-size:17px; letter-spacing:-.01em}
.newsi p{margin:0; font-size:14px; color:var(--ink-2)}

/* кнопка «наверх» — над кнопкой чата */
.gotop{position:fixed; right:22px; bottom:94px; z-index:59; width:44px; height:44px; border-radius:50%;
  border:1px solid var(--line); background:var(--paper); color:var(--ink-2); display:flex;
  align-items:center; justify-content:center; box-shadow:0 4px 14px rgba(15,36,55,.14);
  opacity:0; visibility:hidden; transform:translateY(8px); transition:.18s}
.gotop.is-on{opacity:1; visibility:visible; transform:none}
.gotop:hover{border-color:var(--blue); color:var(--blue)}
.gotop svg{width:19px; height:19px}

/* ---------- онлайн-чат ---------- */
.ovchat{position:fixed; right:22px; bottom:22px; z-index:60}
.ovchat__fab{width:60px; height:60px; border-radius:50%; border:0; background:var(--clay); color:#fff;
  box-shadow:0 8px 22px rgba(15,36,55,.28); position:relative; display:flex; align-items:center; justify-content:center}
.ovchat__fab:hover{background:var(--clay-dark)}
.ovchat__fab-ic{display:flex; align-items:center; justify-content:center}
.ovchat__fab-ic svg{width:26px; height:26px}
.ovchat__fab.is-open{background:var(--ink)}
.ovchat__badge{position:absolute; top:-2px; right:-2px; min-width:20px; height:20px; border-radius:10px;
  background:#fff; color:var(--clay); font-size:12px; font-weight:700; display:flex; align-items:center; justify-content:center; border:2px solid var(--clay)}
.ovchat__panel{position:absolute; right:0; bottom:74px; width:340px; max-width:calc(100vw - 32px); height:460px; max-height:calc(100vh - 120px);
  background:var(--paper); border:1px solid var(--line); border-radius:10px; box-shadow:0 16px 44px rgba(15,36,55,.24);
  display:flex; flex-direction:column; overflow:hidden}
.ovchat__panel[hidden], .ovchat__badge[hidden]{display:none}
.ovchat__head{display:flex; align-items:center; gap:11px; padding:12px 14px; background:var(--ink); color:#fff}
.ovchat__logo{width:34px; height:34px; border-radius:50%; background:#fff; padding:3px; flex:none; object-fit:contain}
.ovchat__head-t{flex:1; display:flex; flex-direction:column}
.ovchat__head-t b{font-size:15px}
.ovchat__head-t span{font-size:12px; color:#B7C4D0}
.ovchat__min{background:transparent; border:0; padding:8px; flex:none; display:flex; align-items:center; justify-content:center; border-radius:4px}
.ovchat__min span{display:block; width:16px; height:2px; border-radius:2px; background:#B7C4D0}
.ovchat__min:hover{background:rgba(255,255,255,.12)}
.ovchat__min:hover span{background:#fff}
.ovchat__body{flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:8px; background:var(--sand)}
.ovchat__msg{max-width:82%; padding:9px 13px; border-radius:12px; font-size:14px; line-height:1.45}
.ovchat__msg--op{align-self:flex-start; background:#fff; border:1px solid var(--line); border-bottom-left-radius:3px}
.ovchat__msg--me{align-self:flex-end; background:var(--blue); color:#fff; border-bottom-right-radius:3px}
.ovchat__form{display:flex; gap:8px; padding:12px; border-top:1px solid var(--line); background:var(--paper)}
.ovchat__input{flex:1; height:42px; border:1px solid var(--line); border-radius:21px; padding:0 16px; font-size:14px; font-family:inherit}
.ovchat__input:focus{outline:2px solid var(--blue); outline-offset:-2px}
.ovchat__send{width:42px; height:42px; border-radius:50%; border:0; background:var(--clay); color:#fff; font-size:15px; flex:none}
.ovchat__send:hover{background:var(--clay-dark)}

/* ---------- форма обратной связи ---------- */
.fb{display:grid; grid-template-columns:.85fr 1.15fr; gap:40px; align-items:center;
  background:var(--paper); border:1px solid var(--line); border-radius:6px; padding:34px 38px}
.fb__left h2{margin:0 0 12px; font-size:26px; letter-spacing:-.02em}
.fb__left p{margin:0; color:var(--ink-2); font-size:15px}
.fb__form{display:flex; flex-direction:column; gap:14px}
.fb__row{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.fb__form .field label{font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); margin-bottom:6px; display:block}
.fb__form input,.fb__form textarea{width:100%; border:1px solid var(--line); border-radius:3px; background:#fff; padding:11px 13px; font-size:15px; font-family:inherit}
.fb__form input:focus,.fb__form textarea:focus{outline:2px solid var(--blue); outline-offset:-2px}
.fb__form textarea{resize:vertical}
.fb__form .btn{align-self:flex-start; margin-top:2px}
.fb__note{font-size:12px; color:var(--ink-3)}
@media (max-width:760px){ .fb{grid-template-columns:1fr; gap:22px; padding:26px 22px} .fb__row{grid-template-columns:1fr} }

/* ---------- подвал ---------- */
.foot{background:var(--ink); color:#C6D2DC; margin-top:40px; padding:44px 0 30px; font-size:14px}
.foot a{color:#C6D2DC}
.foot__cols{display:grid; grid-template-columns:1.5fr .75fr .85fr 1.05fr 1.05fr; gap:26px; padding-bottom:26px; border-bottom:1px solid rgba(255,255,255,.12)}
.socials{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.socials--1col{grid-template-columns:1fr}
.soc{position:relative; display:flex; align-items:center; gap:10px; text-decoration:none; padding:8px 10px; border:1px solid rgba(255,255,255,.14); border-radius:3px}
.soc:hover{border-color:rgba(255,255,255,.4); background:rgba(255,255,255,.04)}
.soc__av{width:32px; height:32px; border-radius:50%; flex:none; object-fit:cover; background:#fff}
.soc__badge{position:absolute; left:30px; top:6px; font-size:8px; font-weight:700; color:#fff; border-radius:3px; padding:1px 3px; line-height:1}
.soc__badge--vk{background:#0077FF}
.soc__badge--tg{background:#2AABEE}
.soc__ic{width:32px; height:32px; border-radius:50%; flex:none; display:flex; align-items:center; justify-content:center; font-size:15px; color:#fff}
.soc__ic--tg{background:#2AABEE}
.soc__ic--wa{background:#25D366}
.soc__ic--mail{background:#8A99A6}
.soc__ic--form{background:var(--clay)}
/* минималистичная иконка в подвале: прозрачный кружок с обводкой */
.soc__ic--line{background:transparent; border:1px solid rgba(255,255,255,.28); color:#C6D2DC}
.soc__ic--line svg{width:16px; height:16px}
.soc:hover .soc__ic--line{border-color:rgba(255,255,255,.6); color:#fff}
.soc__badge--wa{background:#25D366}
.soc__t em{font-style:normal}
.soc.is-copied .soc__t em{color:#7BD3A0; font-weight:600}
.soc__t{display:flex; flex-direction:column; font-size:11px; color:#8DA0AF; line-height:1.25}
.soc__t b{color:#fff; font-size:13px; font-weight:600}
.foot h4{color:#fff; font-size:13px; letter-spacing:.08em; text-transform:uppercase; margin:0 0 12px}
.foot ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px}
.foot__bottom{padding-top:18px; display:flex; justify-content:space-between; gap:20px; color:#8DA0AF; font-size:13px; flex-wrap:wrap}
.foot__logo{background:#fff; padding:12px 16px; border-radius:4px; display:inline-block; margin-bottom:16px}
.foot__logo img{height:44px; display:block}

/* ---------- помощь-полоса ---------- */
.helpbar{
  background:#FDF4F1; border:1px solid #E8CCC3; border-radius:4px;
  padding:18px 22px; display:flex; align-items:center; gap:18px; flex-wrap:wrap;
}
.helpbar p{margin:0; font-size:15px; flex:1; min-width:240px}
.helpbar b{display:block}

/* ---------- страница-конструктор ---------- */
.flow{display:grid; grid-template-columns:1fr 320px; gap:34px; align-items:start; padding:34px 0 60px}
.progress{display:flex; gap:0; border:1px solid var(--line); border-radius:4px; overflow:hidden; background:var(--paper); margin-bottom:26px}
.progress div{
  flex:1; padding:11px 8px; font-size:12.5px; text-align:center; color:var(--ink-3);
  border-right:1px solid var(--line); letter-spacing:.01em;
}
.progress div:last-child{border-right:0}
.progress div.is-done{color:var(--ink-2); background:#F7F4EF}
.progress div.is-now{background:var(--ink); color:#fff; font-weight:600}
.panel{background:var(--paper); border:1px solid var(--line); border-radius:4px; padding:26px}
.panel h2{margin:0 0 6px; font-size:23px; letter-spacing:-.02em}
.panel .hint{margin:0 0 22px; color:var(--ink-2); font-size:15px}
.opts{display:flex; flex-direction:column; gap:12px}
.opt{
  display:flex; gap:14px; align-items:flex-start; border:1px solid var(--line); border-radius:3px;
  padding:15px 16px; background:#fff; cursor:pointer;
}
.opt:hover{border-color:var(--blue)}
.opt.is-sel{border-color:var(--blue); box-shadow:inset 0 0 0 1px var(--blue)}
.opt input{margin-top:4px}
.opt h4{margin:0 0 3px; font-size:16px}
.opt p{margin:0; font-size:13.5px; color:var(--ink-2)}
.opt .p{margin-left:auto; font-weight:700; white-space:nowrap}
.form-group{font-size:12px; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3); margin:24px 0 12px; padding-bottom:8px; border-bottom:1px solid var(--line)}
.form-group:first-of-type{margin-top:6px}
.fgrid{display:grid; grid-template-columns:1fr 1fr; gap:15px 16px}
.fgrid .field{min-width:0}
.field--wide{grid-column:1 / -1}
.field label{display:flex; align-items:center; gap:6px}

.opt-tag{font-size:10px; color:var(--ink-3); text-transform:none; letter-spacing:0; border:1px solid var(--line); border-radius:2px; padding:1px 5px}
.fhint{font-size:12px; color:var(--ink-3); margin-top:-2px}
.field textarea{border:1px solid var(--line); border-radius:3px; background:#fff; padding:10px 13px; font-size:15px; font-family:inherit; resize:vertical}
.field textarea:focus{outline:2px solid var(--blue); outline-offset:-2px}
.radio2{display:flex; gap:20px; height:48px; align-items:center}
.radio2 label{flex-direction:row; font-size:15px; color:var(--ink); gap:7px; cursor:pointer}
.radio2 input{width:auto; height:auto}
.uploads{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.uploads--1{grid-template-columns:1fr; max-width:520px}
.uploads--3{grid-template-columns:1fr 1fr 1fr}
.drop{border:1px solid var(--line); border-radius:4px; background:#FBF8F4; padding:18px 18px 20px; display:flex; flex-direction:column}
.drop__title{font-size:15px; font-weight:700; display:flex; align-items:center; gap:8px; margin-bottom:5px}
.drop__note{font-size:13px; color:var(--ink-2); margin-bottom:10px}
.doc-req{margin:0 0 14px; padding-left:16px; font-size:12.5px; color:var(--ink-2); line-height:1.5}
.doc-req li{margin-bottom:2px}
.drop__btn{margin-top:auto; height:40px; border:1px dashed #B79E86; background:#fff; border-radius:3px; color:var(--clay-dark); font-weight:600; font-size:14px}
.drop__btn:hover{border-color:var(--clay); background:#FFF7F2}
.drop__hint{font-size:12px; color:var(--ink-3); margin-top:8px; text-align:center}
.checks{margin:12px 0 0; padding-left:18px; font-size:13.5px; color:var(--ink-2)}
.actions{display:flex; gap:12px; margin-top:24px; align-items:center}
.btn{height:46px; padding:0 24px; border:0; border-radius:3px; font-size:15px; font-weight:600;
  background:var(--clay); color:#fff}
a.btn{display:inline-flex; align-items:center; justify-content:center; text-decoration:none; box-sizing:border-box}
.btn:hover{background:var(--clay-dark)}
.btn--ghost{background:transparent; border:1px solid var(--line); color:var(--ink-2)}
.btn--outline{background:transparent; border:2px solid var(--clay); color:var(--clay);
  height:54px; padding:0 32px; font-size:17px; border-radius:4px; display:inline-flex;
  align-items:center; text-decoration:none}
.btn--outline:hover{background:var(--clay); color:#fff}
.btn--ghost:hover{border-color:var(--ink-3); background:#fff}

.aside{position:sticky; top:96px; display:flex; flex-direction:column; gap:16px}
.summary{background:var(--paper); border:1px solid var(--line); border-radius:4px; padding:20px}
.summary h3{margin:0 0 14px; font-size:15px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3)}
.summary dl{margin:0; display:grid; grid-template-columns:auto 1fr; gap:9px 14px; font-size:14px}
.summary dt{color:var(--ink-3)}
.summary dd{margin:0; text-align:right; font-weight:600}
.summary .total{border-top:1px solid var(--line); margin-top:14px; padding-top:14px; display:flex; justify-content:space-between; align-items:baseline}
.summary .total b{font-size:22px}
.summary .total small{display:block; color:var(--ink-3); font-weight:400; font-size:13px; text-align:right}
.summary__pay{margin:12px 0 0; font-size:12.5px; color:var(--ink-3); line-height:1.45}

/* экран «заявка принята» */
.done{text-align:center; padding:16px 8px 8px}
.done__ic{width:64px; height:64px; border-radius:50%; background:#EAF5EE; color:var(--ok);
  font-size:32px; display:flex; align-items:center; justify-content:center; margin:0 auto 18px; font-weight:700}
.done h2{margin:0 0 12px; font-size:26px}
.done__lead{margin:0 auto 22px; max-width:52ch; color:var(--ink-2); font-size:16px; line-height:1.6}
.done__sum{display:flex; justify-content:center; gap:34px; flex-wrap:wrap; border-top:1px solid var(--line);
  border-bottom:1px solid var(--line); padding:16px 0; margin-bottom:18px}
.done__sum div{display:flex; flex-direction:column; gap:3px}
.done__sum i{font-style:normal; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3)}
.done__sum b{font-size:15px}
.done .actions{justify-content:center}
.done .btn{display:inline-flex; align-items:center; text-decoration:none}

.escape{background:#FDF4F1; border:1px solid #E8CCC3; border-radius:4px; padding:18px}
.escape h4{margin:0 0 6px; font-size:15px}
.escape p{margin:0 0 12px; font-size:13.5px; color:var(--ink-2)}
.escape a{display:flex; height:40px; align-items:center; justify-content:center; background:var(--paper); border:1px solid var(--clay); border-radius:3px; text-decoration:none; font-size:14px; font-weight:600; margin-bottom:8px; color:var(--clay-dark)}
.escape a:hover{border-color:var(--clay-dark); background:#FDF4F1}
.escape a:last-child{margin-bottom:0}

.pay{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.paycard{border:1px solid var(--line); border-radius:3px; padding:18px; background:#fff; cursor:pointer}
.paycard.is-sel{border-color:var(--blue); box-shadow:inset 0 0 0 1px var(--blue)}
.paycard b{display:block; margin-bottom:4px}
.paycard span{font-size:13px; color:var(--ink-2)}
.warnbox{background:#FDF6E9; border:1px solid #EBD9B4; border-radius:3px; padding:15px 17px; font-size:14px; margin-top:18px}
.warnbox b{display:block; margin-bottom:4px; color:var(--warn)}

/* 901–1080: пунктов в шапке пять, поэтому поджимаем отступы, пока не включился бургер */
@media (min-width:901px) and (max-width:1080px){
  .top__in{gap:20px}
  .nav{gap:18px; font-size:14px; margin-left:0}
}

@media (max-width:900px){
  .flow{grid-template-columns:1fr}
  .aside{position:static}
  .foot__cols{grid-template-columns:1fr 1fr}
  .socials,.socials--1col{grid-template-columns:1fr}
  .reviews{grid-auto-columns:minmax(280px,86vw)}
  .nav{display:none}
  /* нет места под меню — прячем десктопную навигацию/«Связаться», показываем бургер */
  .top__right .cdrop--contact{display:none}   /* в шапке её заменяет бургер; в блоках на странице она нужна */
  .burger{display:flex}
  .step{border-right:0; border-bottom:1px solid var(--line)}
  .step:last-child{border-bottom:0}
  .uploads,.uploads--3,.pay,.fgrid{grid-template-columns:1fr}
}

/* ---------- статья / юридическая страница ---------- */
.art{padding:22px 0 50px}
.art__in{max-width:760px}
.art__meta{font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3)}
.art h1{font-size:clamp(28px,3.6vw,40px); letter-spacing:-.03em; line-height:1.12; margin:10px 0 16px}
.art__lead{font-size:19px; color:var(--ink-2); line-height:1.6; margin:0 0 26px}
.art__body{font-size:16.5px; line-height:1.75; color:var(--ink)}
.art__body h2{font-size:22px; letter-spacing:-.02em; margin:30px 0 10px}
.art__body p{margin:0 0 14px; color:var(--ink-2)}
.art__body ul,.art__body ol{margin:0 0 16px; padding-left:20px; color:var(--ink-2)}
.art__body li{margin-bottom:6px}
.art__body a{color:var(--blue-deep)}
/* врезка: то, на чём чаще всего спотыкаются — должна цепляться глазом при беглом чтении */
.art__body .art__note{border-left:3px solid var(--clay); background:var(--paper);
  border-radius:0 6px 6px 0; padding:14px 18px; margin:0 0 18px; font-size:15.5px; color:var(--ink)}
/* оглавление — только у длинных материалов (от 3 подзаголовков) */
.art__toc{background:var(--paper); border:1px solid var(--line); border-radius:6px;
  padding:16px 20px; margin:0 0 26px}
.art__toc b{display:block; font-size:12px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-3); margin-bottom:8px}
.art__toc ol{margin:0; padding-left:18px; font-size:15px}
.art__toc li{margin-bottom:5px}
.art__toc li:last-child{margin-bottom:0}
.art__toc a{color:var(--ink-2); text-decoration:none}
.art__toc a:hover{color:var(--blue-deep); text-decoration:underline}
.art__body h2{scroll-margin-top:var(--anchorGap)}   /* оглавление статьи — тот же отступ */
.art__cta{display:flex; align-items:center; gap:20px; justify-content:space-between; flex-wrap:wrap;
  background:var(--paper); border:1px solid var(--line); border-radius:6px; padding:22px 24px; margin-top:32px}
.art__cta b{display:block; font-size:17px}
.art__cta span{font-size:14px; color:var(--ink-2)}
/* Визы страны прямо в статье: под призывом «оформить визу», компактной строкой —
   человек дочитал текст про страну и должен видеть, что именно можно оформить. */
.art__visas{display:flex; gap:10px; flex-wrap:wrap; margin-top:12px}
.art__visa{flex:1 1 210px; display:flex; align-items:baseline; justify-content:space-between;
  gap:12px; text-decoration:none; background:#fff; border:1px solid var(--line);
  border-radius:6px; padding:12px 15px}
.art__visa:hover{border-color:var(--blue)}
.art__visa b{font-size:14.5px; color:var(--ink); font-weight:600}
.art__visa span{font-size:14px; color:var(--blue-deep); white-space:nowrap}

/* ---------- страница «адрес не найден» ---------- */
.nf{display:flex; align-items:center; gap:44px; padding:54px 0 70px; flex-wrap:wrap}
.nf__art{flex:0 1 380px; margin:0}
.nf__art img{width:100%; height:auto; border-radius:10px; display:block}
.nf__body{flex:1 1 380px}
.nf__code{margin:0; font-size:15px; letter-spacing:.22em; color:var(--ink-3)}
.nf h1{margin:6px 0 12px; font-size:34px; letter-spacing:-.02em}
.nf__lead{margin:0 0 26px; font-size:17px; line-height:1.65; color:var(--ink-2); max-width:34em}
.nf__acts{display:flex; gap:12px; flex-wrap:wrap; align-items:center}
.nf__c{margin-top:30px; padding-top:22px; border-top:1px solid var(--line)}
.nf__clabel{display:block; margin-bottom:12px; font-size:13px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink-3)}
.nf__clist{display:flex; gap:10px; flex-wrap:wrap}
.nf__clist a{display:inline-flex; align-items:center; gap:8px; text-decoration:none;
  font-size:14.5px; color:var(--ink); background:var(--paper);
  border:1px solid var(--line); border-radius:999px; padding:7px 15px 7px 8px}
.nf__clist a:hover{border-color:var(--blue)}
.nf__clist img{border-radius:50%; object-fit:cover; flex:none}
@media (max-width:700px){
  .nf{gap:26px; padding:30px 0 46px}
  .nf h1{font-size:26px}
  .nf__lead{font-size:16px; margin-bottom:20px}
  .nf__art{flex-basis:100%; order:-1}      /* на телефоне картинка первой, как у образцов фото */
}

/* ---------- условия сделки перед отправкой заявки ---------- */
/* Памятка: три правила, из-за которых чаще всего спорят. Спокойная рамка, не тревожная —
   это не предупреждение об ошибке, а условия сделки. */
.terms{margin-top:16px; border:1px solid var(--line); border-radius:4px;
  background:var(--paper); padding:14px 16px}
.terms b{display:block; margin-bottom:7px; font-size:14px}
.terms ul{margin:0; padding-left:18px}
.terms li{font-size:13.5px; line-height:1.55; color:var(--ink-2); margin-bottom:5px}
.terms li:last-child{margin-bottom:0}

/* Строка акцепта у кнопки отправки и у формы вопроса. */
.accept{margin:10px 0 0; font-size:13px; line-height:1.5; color:var(--ink-3)}
.accept a{color:var(--blue-deep)}
.accept:empty{display:none}          /* ссылку вставляет скрипт — пустой абзац не занимает место */

/* Раздел юр. документа: то же оформление, что у абзаца статьи, но блочный контейнер —
   внутри бывают пункты-абзацы и маркированные списки (см. legal.js). */
.art__body .legalsec{margin:0 0 18px; color:var(--ink-2)}
.art__body .legalsec > p{margin:0 0 9px}
.art__body .legalsec > p:last-child{margin-bottom:0}
.art__body .legalsec > ul{margin:-2px 0 12px}
.art__body .legalsec li{margin-bottom:3px}

/* Дата редакции — отдельный блок в самом низу документа, а не хвост последнего раздела:
   иначе она читается как часть «Реквизитов» и теряется при перестановке разделов. */
.legalrev{margin-top:26px; padding-top:16px; border-top:1px solid var(--line);
  font-size:14px; color:var(--ink-3); font-style:italic}

.legalnav{display:flex; gap:10px; flex-wrap:wrap; margin-top:34px; padding-top:20px; border-top:1px solid var(--line)}
.legalnav a{font-size:14px; text-decoration:none; color:var(--ink-2); border:1px solid var(--line);
  border-radius:3px; padding:7px 13px; background:var(--paper)}
.legalnav a:hover{border-color:var(--blue); color:var(--ink)}
.legalnav a.is-on{background:var(--ink); color:#fff; border-color:var(--ink)}

/* ---------- трекер статуса ---------- */
.track{list-style:none; margin:0; padding:0; counter-reset:t}
.track li{position:relative; padding:0 0 22px 34px; counter-increment:t}
.track li::before{content:counter(t); position:absolute; left:0; top:0; width:24px; height:24px;
  border-radius:50%; background:#EAE4DC; color:var(--ink-3); font-size:12px; font-weight:700;
  display:flex; align-items:center; justify-content:center}
.track li::after{content:''; position:absolute; left:11px; top:26px; bottom:0; width:2px; background:var(--line)}
.track li:last-child::after{display:none}
.track li b{display:block; font-size:15.5px}
.track li span{font-size:13.5px; color:var(--ink-3)}
.track li.is-done::before{background:var(--ok); color:#fff; content:'✓'}
.track li.is-done::after{background:var(--ok)}
.track li.is-now::before{background:var(--clay); color:#fff}
.track li.is-now b{color:var(--clay-dark)}

@media (max-width:700px){
  /* --- общий ритм --- */
  .wrap{ padding:0 16px }
  .crumbs{ padding-left:16px; padding-right:16px }
  .section{ padding:32px 0 }
  .section__head{ flex-wrap:wrap; gap:6px; margin-bottom:18px }
  .section__head h2, .csec h2, .fb__left h2{ font-size:22px }

  /* --- шапка --- */
  .top__in{ gap:12px; height:64px }
  .logo img{ height:34px }
  .top__right{ gap:8px }
  .cur{ height:36px }
  .cur button{ min-width:32px; padding:0 8px; font-size:13px }
  .mobmenu{ max-height:calc(100vh - 64px); max-height:calc(100dvh - 64px) }
  /* шапка на телефоне ниже — и отступ прокрутки к якорю тоже */
  :root{ --anchorGap:74px }        /* шапка на телефоне ниже: 64 + 10 */

  /* --- герой главной --- */
  /* На телефоне работает ТА ЖЕ механика, что на большом экране: баннер прилипает под
     шапкой, блок с заголовком наезжает на него при прокрутке, печать прилипает и уходит
     вместе с баннером. Отличаются только числа — высота шапки, пропорция картинки
     и размер печати; формулы ниже выведены из них, а не подобраны на глаз.

     Мобильный баннер вертикальный, 3:4 → высота = ширина колонки × 4/3.
     Колонка = экран минус отступы .wrap (16+16). */
  :root{ --bh: calc((100vw - 32px) * 1.3333) }
  .cbanner{ top:64px }                            /* шапка на телефоне ниже: 64px вместо 84 */
  .cbanner img{ aspect-ratio:3/4; object-fit:cover }
  /* Наезд на телефоне глубже, чем на большом экране: 0.667 вместо 0.5 — как на страницах
     стран (замечание владельца). На большом экране главная остаётся с 0.5, там всё настроено.
     Высота зоны прокрутки идёт за наездом: --bh × (1 + наезд) + 18. */
  .bstick{ height:calc(var(--bh) * 1.667 + 18px) }
  .hero{ margin-top:calc(var(--bh) * -0.667); padding:26px 0 24px }
  /* Дымка плотнее, чем на большом экране: колонка уже, текст крупнее относительно картинки,
     и по светлому баннеру он читался плохо. */
  .hero::before{ display:block; width:calc(100% - 32px);
    background:linear-gradient(to bottom, rgba(245,241,234,0) 0%, rgba(245,241,234,.58) 12%,
      rgba(245,241,234,.88) 28%, rgba(245,241,234,.98) 44%, var(--sand) 56%, var(--sand) 100%) }
  /* Текст отступает от левого края баннера — как на большом экране (там 52px на колонке
     1132px). На телефоне колонка втрое уже, поэтому и отступ меньше: 32px. Двигается
     только текст, поля выбора остаются во всю ширину — тоже как на большом экране. */
  .hero__top{ padding-left:32px; padding-right:32px; margin-bottom:20px }

  /* Печать — ЗА текстом: заголовок перекрывает её, а не стоит под ней.
     z-index:-1 работает внутри .hero (у него свой слой, z-index:2), поэтому печать
     остаётся над баннером и над дымкой, но под текстом.

     Печать прилипает, целиком заехав на баннер: её низ встаёт в ~10px над низом баннера
     (просьба владельца 2026-07-31). Откуда --stampT:
       низ баннера на экране = шапка 64 + поле баннера 18 + --bh
       низ печати            = --stampT + высота печати 188 + свес от поворота −9° 14
       приравниваем «низ печати = низ баннера − 10» → --stampT = --bh − 130px
     Высота зоны считается ОТ --stampT, поэтому двигать надо только его: зона отпускает
     печать ровно там же, где отлипает баннер (вывод формулы — SITE-ARCHITECTURE 10.45).
     Ниже прилипание опускать некуда — печать упрётся в низ экрана; выше можно, но с каждым
     пикселем вверх сокращается ход, на котором печать держится (сейчас ~70px). */
  .hero__stampwrap{ position:absolute; top:24px; z-index:-1;
    --stampT:calc(var(--bh) - 130px);
    height:calc(var(--stampT) - var(--bh) * 0.333 + 82px) }
  .hero__stamp{ position:sticky; top:var(--stampT); justify-content:flex-end;
    margin:0 auto; padding-right:16px }
  /* Печать бледнее, чем на большом экране (там .6): колонка уже, и текст ложится прямо
     на неё. Пока печать прилипшая, она ещё и гаснет — --stampFade ведёт ui.js. */
  .hero__stamp img{ max-width:190px; opacity:calc(.42 - .3 * var(--stampFade, 0)) }

  /* Вторая дымка поверх первой: проявляется по мере прилипания печати и делает фон
     под текстом гуще. Отдельным слоем, а не пересчётом градиента, потому что ::after
     в порядке отрисовки идёт ПОСЛЕ печати — значит, гасит и её тоже, одним движением. */
  .hero::after{ content:''; position:absolute; z-index:-1; pointer-events:none;
    left:50%; transform:translateX(-50%); width:calc(100% - 32px); top:0; bottom:14px;
    opacity:var(--stampFade, 0);
    background:linear-gradient(to bottom, rgba(245,241,234,0) 0%, rgba(245,241,234,.35) 14%,
      rgba(245,241,234,.7) 32%, rgba(245,241,234,.9) 50%, var(--sand) 66%, var(--sand) 100%) }
  body.no-banner .hero::after{ display:none }   /* нет баннера — нечего затуманивать */

  .hero h1{ font-size:clamp(28px,7vw,40px) }
  .hero p.lead{ font-size:16px }
  .hero .picker{ margin-top:22px }
  .picker{ padding:18px 16px }
  .picker__row{ gap:14px }
  .picker__row .field{ min-width:100%; max-width:100% !important }

  /* --- страница страны --- */
  /* Наезд на баннер работает так же, как на большом экране и как на главной: доля наезда
     (-0.667) и высота зоны (--bh × 1.667) наследуются от общих правил, переопределять
     их не нужно — они уже считаются от мобильного --bh. */
  .chero{ padding:26px 0 26px }
  .chero::before{ width:calc(100% - 32px);    /* дымка по колонке: отступы .wrap 16px */
    background:linear-gradient(to bottom, rgba(245,241,234,0) 0%, rgba(245,241,234,.3) 12%,
      rgba(245,241,234,.55) 26%, rgba(245,241,234,.75) 40%, rgba(245,241,234,.9) 54%,
      rgba(245,241,234,.97) 68%, var(--sand) 82%, var(--sand) 100%) }
  .chero .wrap{ padding-left:calc(16px + 32px) }   /* тот же отступ от края баннера */
  .chero h1{ flex-wrap:wrap; gap:10px; padding-right:0; font-size:clamp(24px,6.5vw,34px) }
  .chero__flag, .chero__flag img{ height:30px }
  .chero__need{ padding-right:0; font-size:16px }
  .chero__calc{ max-width:none }
  .csec{ padding:32px 0 }
  .cfin{ padding:22px 20px }

  /* --- страница визы --- */
  .vhero{ padding:20px 0 30px }
  .vfact b{ font-size:17px }

  /* --- конструктор заявки --- */
  .panel{ padding:20px 16px }
  .progress{ overflow-x:auto; -webkit-overflow-scrolling:touch }
  .progress div{ flex:0 0 auto; min-width:118px; white-space:nowrap }
  .actions{ flex-wrap:wrap }
  .actions .btn{ flex:1 1 auto }

  /* --- форма и подвал --- */
  .fb{ padding:22px 16px }
  .foot{ padding:34px 0 26px }
  .foot__cols{ grid-template-columns:1fr; gap:22px }
  .foot__bottom{ flex-direction:column; gap:8px }

  /* --- плавающие кнопки --- */
  .ovchat{ right:16px; bottom:16px }
  .gotop{ right:16px; bottom:84px }
}

/* результат отправки формы «Остались вопросы?» */
.fb__result{margin:10px 0 0; font-size:14px; color:var(--ok)}
.fb__result.is-bad{color:#B3453C}
.done__num{margin:0 0 10px; font-size:15px; color:var(--ink-2)}
.done__num a{color:var(--blue-deep)}

/* ---------- фото на визу: разбор и образцы ---------- */
.checks .chk{position:relative; padding-left:26px; list-style:none}
.checks .chk::before{position:absolute; left:0; top:0; font-weight:700}
.chk--ok::before{content:'✓'; color:var(--ok)}
.chk--bad::before{content:'✕'; color:#B3453C}
.chk--warn::before{content:'!'; color:#B07D1A}

.phres{display:flex; gap:22px; align-items:flex-start; flex-wrap:wrap; margin-top:18px}
.phres__pic{text-align:center}
.phres__pic img{width:220px; height:220px; border:1px solid var(--line); border-radius:6px; display:block}
.phres__pic span{display:block; margin-top:6px; font-size:12px; color:var(--ink-3)}
.phres__act{display:flex; flex-direction:column; gap:10px; align-items:flex-start}

/* Карточка документа в заявке: загружено / не загружено / не хватает обязательного */
.drop.is-done{border-color:var(--ok); background:#F5FBF6}
.drop.is-empty{border-color:#B3453C; background:#FDF6F5}
.drop.is-loading{opacity:.6; pointer-events:none}
.drop__file{display:flex; align-items:center; gap:8px; margin:10px 0 6px; font-size:14px}
.drop__file b{font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.drop__del{border:0; background:transparent; cursor:pointer; font-size:18px; line-height:1;
  color:var(--ink-3); padding:0 2px}
.drop__del:hover{color:#B3453C}
.drop__btn--again{background:transparent; border:1px solid var(--line); color:var(--ink-2)}
.drop__guide{display:inline-block; margin-top:8px; font-size:13.5px}

/* Образцы: разбор слева, картинка справа. Картинка вертикальная (3:4), поэтому колонка
   под неё уже — иначе она задаёт высоту всему блоку и текст уезжает вниз. */
/* Подложка блока образцов — та же, что под «Как это работает» на главной:
   фоновый узор просвечивал сквозь текст и мешал читать. */
.phbox{background:rgba(245,241,234,.72); border:1px solid var(--line); border-radius:6px;
  padding:26px 28px 28px}
.phbox__lead{max-width:none; margin:0 0 22px}

.phcols{display:grid; grid-template-columns:1fr 1fr; gap:36px; align-items:start}
.phcols__text h3{font-size:17px; margin:0 0 10px}
.phsample{margin:0; align-self:center}
.phsample img{width:100%; height:auto; display:block; border:1px solid var(--line);
  border-radius:8px; background:#fff}
@media (max-width:860px){
  /* На узком экране картинка идёт ПЕРВОЙ: она объясняет быстрее, чем список пунктов. */
  .phbox{padding:20px 18px 22px}
  .phcols{grid-template-columns:1fr; gap:22px}
  .phsample{order:-1; align-self:start; max-width:420px}
}

/* флаг в заголовке страны на странице услуг */
.svcflag{display:inline-block; width:30px; height:30px; border-radius:50%; overflow:hidden;
  vertical-align:-7px; margin-right:10px; background:#fff; border:1px solid var(--line)}
.svcflag img{width:100%; height:100%; object-fit:cover; display:block}

/* вторая валюта рядом с ценой: «$150 (€138)» */
.alt-cur{font-size:.82em; color:var(--ink-3); font-weight:400; white-space:nowrap}
/* переключатель валют при четырёх и более: выпадающий список вместо ряда кнопок */
.cdrop--cur .cdrop__btn{height:38px; padding:0 12px; gap:6px}
.cdrop__menu--cur{width:230px}
.cdrop__menu--cur .cdrop__ic{font-size:15px; font-weight:600}
.cdrop__menu--cur a.is-on{background:var(--sand)}
.cdrop__menu--cur a.is-on b{color:var(--blue-deep)}

/* служебная строка в чате: приветствие и сообщения об ошибках отправки */
.ovchat__note{margin:6px 0; padding:8px 11px; border-radius:8px; background:#F2EFE9;
  color:var(--ink-2); font-size:13px; line-height:1.45}

/* --- телефон: валюта и язык переезжают в бургер-меню --- */
@media (max-width:700px){
  .top__right > #cur{ display:none }        /* валюты уезжают в бургер: в шапке им тесно */

  /* дата поездки и возраст встают в одну строку — оба поля короткие.
     Если возраст скрыт, дата растягивается на всю ширину сама (flex-grow). */
  #depBox, #ageBox{ min-width:0 !important; max-width:none !important; flex:1 1 calc(50% - 7px) }
  .picker__row{ gap:14px }
  #depBox label, #ageBox label{ display:flex; align-items:center }   /* без обрезки: она резала бы и кружок подсказки */
  #depBox label > span:not(.itip){ display:none }   /* «(если известна)» не влезает; подсказку оставляем */
  .mobopts{ display:flex; gap:10px; flex-wrap:wrap; padding:4px 0 8px }
  .mobopts .cur{ height:40px }
  .mobopts .cur button{ min-width:44px; font-size:14px }
}

/* ---------- подсказка «i» ----------
   Кружок рядом с подписью: клик — короткое объяснение, зачем это поле.
   На телефоне открывается шторкой снизу, прижатой к краям экрана, — так она
   не может вылезти за вьюпорт (приём взят из VEGALYSIS). */
.itip{position:relative; display:inline-flex; vertical-align:middle; margin-left:5px}
.itip__b{display:flex; width:16px; height:16px; align-items:center; justify-content:center;
  border:1px solid var(--line); border-radius:50%; background:var(--paper); cursor:pointer;
  font-size:10px; font-weight:700; font-style:normal; line-height:1; color:var(--ink-3); user-select:none;
  text-transform:none; letter-spacing:0; transition:.15s}
.itip__b:hover{border-color:var(--blue); color:var(--blue)}
.itip.is-open .itip__b{background:var(--blue); border-color:var(--blue); color:#fff}
/* Ширина по содержимому в разумных пределах, высота ограничена экраном: длинные пояснения
   из админки иначе уезжали за нижний край. Точные координаты ставит ui.js по факту размеров. */
.itip__pop{position:fixed; z-index:200; width:max-content; max-width:min(320px, calc(100vw - 24px));
  max-height:calc(100vh - 24px); overflow:auto; white-space:pre-line; font-style:normal;
  background:var(--paper); border:1px solid var(--line); border-radius:8px; padding:11px 13px;
  box-shadow:0 12px 30px rgba(15,36,55,.18); font-size:13px; line-height:1.5; color:var(--ink-2);
  font-weight:400; text-transform:none; letter-spacing:0; cursor:pointer}
.itip__veil{position:fixed; inset:0; z-index:199}
@media (max-width:700px){
  /* шторка снизу: прижата к краям экрана, поэтому не может вылезти за вьюпорт */
  .itip__pop{left:12px !important; right:12px; top:auto !important; bottom:12px; width:auto;
    padding:14px 16px; font-size:14px}
  .itip__veil{background:rgba(15,36,55,.12)}
}

/* ---------- свои поля: выбор из списка с поиском и календарь ----------
   Системные <select> и <input type="date"> на телефоне рисует ОС: чужой вид,
   в списке нет поиска, дату нельзя ввести руками. Здесь свои. */
.wpop__veil{position:fixed; inset:0; z-index:210}
.wpop{position:fixed; z-index:211; background:var(--paper); border:1px solid var(--line);
  border-radius:10px; box-shadow:0 18px 44px rgba(15,36,55,.22); overflow:hidden}
.wpop__top{padding:10px; border-bottom:1px solid var(--line)}
.wpop__search{width:100%; height:38px; border:1px solid var(--line); border-radius:6px;
  padding:0 11px; font:inherit; font-size:15px; background:#fff}
.wpop__search:focus{outline:2px solid var(--blue); outline-offset:-2px}
.wpop__list{max-height:320px; overflow-y:auto; padding:6px}
.wpop__i{display:block; width:100%; text-align:left; border:0; background:transparent;
  padding:9px 11px; border-radius:6px; font-size:15px; color:var(--ink)}
.wpop__i:hover{background:var(--sand)}
.wpop__i.is-on{background:var(--sand); font-weight:600; color:var(--blue-deep)}
.wpop__empty{padding:18px; text-align:center; color:var(--ink-3); font-size:14px}

/* поле-кнопка вместо select */
.combo__btn{display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%;
  height:48px; padding:0 13px; border:1px solid var(--line); border-radius:4px; background:#fff;
  font:inherit; font-size:15.5px; color:var(--ink); text-align:left}
.combo__btn:hover{border-color:var(--blue)}
.combo__btn i{font-style:normal; color:var(--ink-3); font-size:11px}
.combo__btn span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

/* поле даты: ручной ввод + кнопка календаря */
.dfield{position:relative; display:flex}
.dfield__in{width:100%; height:48px; border:1px solid var(--line); border-radius:4px;
  padding:0 42px 0 13px; font:inherit; font-size:15.5px; background:#fff; color:var(--ink)}
.dfield__in:focus{outline:2px solid var(--blue); outline-offset:-2px}
.dfield.is-bad .dfield__in{border-color:var(--clay); background:#FDF4F1}
.dfield__cal{position:absolute; right:1px; top:1px; bottom:1px; width:40px; border:0; background:transparent;
  color:var(--ink-3); display:flex; align-items:center; justify-content:center; border-radius:0 4px 4px 0}
.dfield__cal:hover{color:var(--blue); background:var(--sand)}
.dfield__cal svg{width:19px; height:19px}

/* календарь */
.wpop--cal{padding:12px}
.cal__head{display:flex; align-items:center; justify-content:space-between; margin-bottom:8px}
.cal__head b{font-size:15px}
.cal__nav{width:32px; height:32px; border:1px solid var(--line); background:#fff; border-radius:6px;
  color:var(--ink-2); font-size:16px; line-height:1}
.cal__nav:hover{border-color:var(--blue); color:var(--blue)}
.cal__wd,.cal__grid{display:grid; grid-template-columns:repeat(7,1fr); gap:2px}
.cal__wd span{text-align:center; font-size:11px; color:var(--ink-3); padding:4px 0}
.cal__d{height:36px; border:0; background:transparent; border-radius:6px; font-size:14.5px; color:var(--ink)}
.cal__d:hover:not(:disabled){background:var(--sand)}
.cal__d:disabled{color:#C9CFD4}
.cal__d.is-today{box-shadow:inset 0 0 0 1px var(--line)}
.cal__d.is-on{background:var(--blue); color:#fff; font-weight:600}
.cal__foot{display:flex; justify-content:space-between; margin-top:8px; padding-top:8px; border-top:1px solid var(--line)}
.cal__foot button{border:0; background:transparent; font-size:13.5px; color:var(--blue-deep); padding:4px 6px}
.cal__foot button:hover{text-decoration:underline}

@media (max-width:700px){
  /* на телефоне — лист снизу во всю ширину: не обрежется и не уедет за экран */
  .wpop{left:10px !important; right:10px; top:auto !important; bottom:10px; width:auto !important;
    max-height:76vh; display:flex; flex-direction:column}
  .wpop__veil{background:rgba(15,36,55,.25)}
  .wpop__list{max-height:none; flex:1}
  .cal__d{height:42px; font-size:16px}
  .wpop__i{padding:12px 11px; font-size:16px}
}
/* пока открыт список или календарь, фон под ними не прокручиваем */
body.wpop-open{overflow:hidden}

/* Меню «Связаться» в блоке «Не нашли своё гражданство».
   На десктопе кнопка стоит справа, как в шапке, — меню раскрывается влево (правило по умолчанию).
   На телефоне кнопка переносится на свою строку влево, и меню шириной 262px уезжало за край. */
@media (max-width:700px){
  /* на телефоне — лист снизу во всю ширину: обрезаться нечем, и он поверх чата */
  .helpbar .cdrop__menu{position:fixed; left:10px; right:10px; top:auto; bottom:10px;
    width:auto; max-height:70vh; overflow-y:auto; z-index:211;
    box-shadow:0 18px 44px rgba(15,36,55,.28)}
}

/* ссылка-кнопка: выглядит как текстовая ссылка, но открывает список каналов связи */
.clink--btn{border:0; background:transparent; padding:0; font:inherit; font-size:15px;
  color:var(--clay-dark); font-weight:600; cursor:pointer; display:inline-flex; align-items:center; gap:5px}
.clink--btn:hover{color:var(--clay)}
.cdrop--contact .card__cta{width:100%; justify-content:center}

/* звёздочка обязательного поля: крупнее и в конце подписи, как принято в формах */
.field label .req{color:var(--clay); font-style:normal; font-size:1.15em; line-height:1; margin-left:3px}
.field.is-empty input,.field.is-empty textarea{border-color:var(--clay); background:#FDF4F1}
.form-err{margin:14px 0 0; color:#B3453C; font-size:14px}
.doc-opt{font-size:11px; color:var(--ink-3); text-transform:none; letter-spacing:0}

/* подпись-пояснение у заголовка раздела анкеты */
.form-group__note{font-weight:400; font-size:12.5px; color:var(--ink-3); text-transform:none; letter-spacing:0}
/* карточки выбора визы в конструкторе */
.pay--visas .paycard{align-items:flex-start; text-align:left}
.paycard__p{margin-top:6px; font-weight:700; color:var(--ink)}
.paycard.is-off{opacity:.55; cursor:default}
.paycard.is-off .paycard__p{font-weight:400; color:var(--warn)}


/* Подложка под текстовыми блоками: на фоне-узоре текст читается хуже.
   Светлая, как у карточек — так блоки выглядят одинаково на всех страницах. */
.cinfo, .art__in, .track, .photoinfo, .faqbox{
  background:var(--paper); border:1px solid var(--line); border-radius:6px;
}
.faqbox{ padding:26px 28px }
.cinfo{ padding:26px 28px }
.art__in{ padding:26px 30px }
.photoinfo{ padding:22px 26px }
@media (max-width:700px){
  .cinfo, .art__in, .faqbox{ padding:20px 16px }
  .photoinfo{ padding:18px 16px }
}

/* кнопка оформления и «Задать вопрос» рядом: раньше вторая прилипала к первой */
.vhero__cta{display:flex; align-items:center; flex-wrap:wrap; gap:14px 26px; margin-top:6px}

/* ---------- срочное оформление ----------
   На карточке — короткая строка «Срочно за 4 часа — 9 000 ₽»: человек видит, что вариант
   есть, ещё до того, как что-то выбрал. На странице визы — все тарифы списком. */
.urgbadge{display:inline-block; margin:8px 0 0; padding:4px 10px; border-radius:20px;
  background:#FDF6E9; border:1px solid #EBD9B4; color:#8A6420;
  font-size:12.5px; line-height:1.35}
.ccard .urgbadge{margin:10px 0 0}

/* подзаголовок внутри шага (анкета услуги, «как с вами связаться») */
.speed__h{margin:22px 0 10px; font-size:16px}

/* ---------- безвизовый въезд ----------
   Не товар, а ответ на вопрос «нужна ли мне виза»: карточка спокойного зелёного тона,
   без кнопки «Оформить» — оформлять нечего. */
.card--free{background:#F4F9F5; border-color:#CBE3D4}
.card--free .card__title{color:#2F7A55}
.card--free .spec--price span{color:#2F7A55}
.ccard--free{background:#F4F9F5; border-color:#CBE3D4}
.ccard--free .ccard__top b{color:#2F7A55}
.ccard__note{display:block; margin-top:10px; font-size:12.5px; color:var(--ink-2)}

/* ---------- дополнительные услуги ----------
   Не виза: карточка вдвое ниже и без «оформить» — это довесок к поездке, а не главный товар. */
/* Ровно две в ряд на любом широком экране: карточка услуги должна читаться как половина
   ряда виз, а не растягиваться на всю ширину и не дробиться на четыре. */
.sgrid{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px; margin-top:18px}
@media (max-width: 780px){ .sgrid{grid-template-columns:1fr} }
.scard{display:flex; align-items:center; gap:16px; padding:14px 18px; text-decoration:none;
  background:var(--paper); border:1px solid var(--line); border-radius:6px; color:inherit}
.scard:hover{border-color:var(--clay)}
.scard__t{min-width:0; flex:1}
.scard__t b{display:block; font-size:15px; line-height:1.3}
.scard__t span{display:block; margin-top:3px; font-size:12.5px; color:var(--ink-3)}
.scard__r{text-align:right; white-space:nowrap}
.scard__p{display:block; font-size:16px; font-weight:600}
.scard__b{display:block; margin-top:2px; font-size:12.5px; color:var(--clay-dark)}

/* выбор услуг в конструкторе и в сводке заявки */
.summary__h{margin:18px 0 8px; font-size:13px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3)}
.svcopts{display:flex; flex-direction:column; gap:8px}
.svcopt{display:flex; align-items:center; gap:8px; padding:10px 13px;
  background:#fff; border:1px solid var(--line); border-radius:6px}
.svcopt:hover{border-color:var(--clay)}
.svcopt.is-sel{border-color:var(--clay); background:#FDF8F6}
/* Кликабелен только сам квадратик: по названию услугу больше не снять. Строка узкая,
   значок «i» и цена рядом — промахнуться и выкинуть услугу из заявки было слишком легко. */
.svcopt__pick{display:flex; align-items:center; gap:11px; flex:1; min-width:0}
.svcopt__pick input{cursor:pointer}
.svcopt .itip{flex:none}
.svcopt__t{flex:1; min-width:0}
.svcopt__t b{display:block; font-size:14px; line-height:1.3}
.svcopt__t span{display:block; font-size:12px; color:var(--ink-3)}
.svcopt__p{font-size:14px; font-weight:600; white-space:nowrap}
/* флаг страны в карточке услуги: видно, к какой стране она относится */
.scard__flag{flex:none; width:34px; height:34px; border-radius:50%; overflow:hidden;
  border:1px solid var(--line)}
.scard__flag img{width:100%; height:100%; object-fit:cover; display:block}
.scard .itip{flex:none; margin-left:2px}
/* описание услуги на странице заказа: это объяснение, а не подпись под полем */
.svcnote{margin:0 0 6px; font-size:15px; line-height:1.6; color:var(--ink-2); max-width:62ch}

/* выбор скорости прямо в карточке визы — стоит выше цены, потому что её меняет */
.spick{display:block; margin:0 0 12px}
.spick__btn{display:flex; align-items:center; gap:6px; width:100%; cursor:pointer;
  background:#fff; border:1px solid var(--line); border-radius:6px; padding:8px 12px;
  font:inherit; font-size:13.5px; color:var(--ink-2); text-align:left}
.spick__btn:hover{border-color:var(--clay)}
.spick__btn b{color:var(--ink); font-weight:600}
.spick__btn .cdrop__arr{margin-left:auto}
.spick__menu{min-width:240px}
.spick__menu a{display:flex; align-items:center; gap:14px; padding:9px 13px; text-decoration:none;
  color:inherit; font-size:14px}
.spick__menu a:hover{background:var(--sand)}
.spick__menu a.is-on{background:#FDF4F1}
.spick__menu a b{margin-left:auto; white-space:nowrap}

/* карточка визы на странице страны: кнопка и ссылка вместо одной большой ссылки */
.ccard__ready{margin:10px 0 0; font-size:13px; color:var(--ink-2)}
.ccard__act{display:flex; align-items:center; gap:14px; margin-top:12px}
.btn--sm{padding:9px 18px; font-size:14px}
.vfacts__pick{grid-column:1 / -1; margin-bottom:2px}
.applyspeed{margin-top:14px; max-width:420px}

/* меню раскрылось вверх: ставит ui.js, когда снизу не хватает места внутри карточки */
.cdrop--up .cdrop__menu{top:auto; bottom:calc(100% + 8px)}


/* ---------- анкета ----------
   Подписи бывают в одну и в две строки, и в двух колонках поля разъезжались по вертикали.
   Резервируем под подпись две строки: соседние поля встают на одну линию. Длинные вопросы
   помечаются в админке «на всю ширину» и занимают ряд целиком. */
.fgrid .field > label{min-height:2.7em; align-items:flex-start}
.fhint{display:block; margin-top:5px; font-size:12px; color:var(--ink-3); line-height:1.4}

/* мультивыбор стран в анкете: выбранные чипами, добавление по одной */
.cpick{display:flex; flex-direction:column; gap:8px}
/* Список слева, «нигде не был» справа от него — одной строкой. Список сжимается:
   вопрос может стоять и в узкой половине ряда, а галочка должна остаться рядом. */
.cpick__row{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.cpick__add{flex:0 1 340px; min-width:0}
.cpick__none{display:inline-flex; align-items:center; gap:7px; flex:none; white-space:nowrap;
  font-size:13.5px; color:var(--ink-2); cursor:pointer}
.cpick__list{display:flex; flex-wrap:wrap; gap:6px}
.cpick__list:empty{display:none}
.chip2{display:inline-flex; align-items:center; gap:6px; padding:5px 8px 5px 11px;
  background:#fff; border:1px solid var(--line); border-radius:20px; font-size:13.5px}
.chip2 button{border:0; background:none; cursor:pointer; font-size:15px; line-height:1;
  color:var(--ink-3); padding:0 2px}
.chip2 button:hover{color:var(--clay-dark)}


/* загрузка файла прямо из анкеты */
.fileup{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.fileup.is-loading{opacity:.5; pointer-events:none}
.abtn2{border:1px solid var(--line); background:#fff; border-radius:6px; padding:10px 16px;
  font:inherit; font-size:14px; cursor:pointer; color:var(--ink)}
.abtn2:hover{border-color:var(--clay); color:var(--clay-dark)}
.fileup__name{display:inline-flex; align-items:center; gap:8px; font-size:13.5px;
  background:#F4F9F5; border:1px solid #CBE3D4; border-radius:20px; padding:6px 10px 6px 13px}
.fileup__name button{border:0; background:none; cursor:pointer; font-size:15px; line-height:1;
  color:var(--ink-3); padding:0 2px}
.fileup__hint{font-size:12.5px; color:var(--ink-3)}

/* ---------- переносы строк из админки ----------
   Владелец пишет описания абзацами. В HTML перенос строки схлопывается в пробел, и текст
   выводился одной простынёй. `pre-line` сохраняет переносы и при этом убирает лишние пробелы,
   поэтому не требует превращать текст в разметку — и вставить теги через админку нельзя. */
.svcnote,
.chero__need,
.faq p,
.ccard__note,
.drop__note,
.itip__pop,
.svcopt__t span,
.scard__t span,
.cfin p,
.card--free .ready{white-space:pre-line}
/* невыбранный список подсвечиваем так же, как пустое поле */
.field.is-empty select,.field.is-empty .combo__btn{border-color:var(--clay); background:#FDF4F1}