/* Страницы стран mysimway.com/esim/<slug>/ - дополнения к /styles.css.
   Всё основное - первый экран (.hero, как на лендинге), тарифы и «Ваш заказ»
   (.payment-*), плитки, шаги, вопросы, подвал - берётся из основного
   styles.css без изменений. Здесь только то, чего там нет: строки выбора
   срока и объёма в одну линию, подписи к ним и поле email в «Вашем заказе». */

/* Шапка поверх фото, как у saily.com: наверху страницы полностью прозрачная -
   фото первого экрана начинается от самого верха и видно под ней. При
   прокрутке (класс is-scrolled ставит esim-nav.js) - «матовое стекло»:
   полупрозрачная с размытием, поэтому её цвет меняется вместе с тем, что
   проезжает под ней. */
.esim-page .nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: transparent;
  border-bottom-color: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  transition: background-color 220ms ease, border-color 220ms ease, -webkit-backdrop-filter 220ms ease, backdrop-filter 220ms ease;
}
.esim-page .nav.is-scrolled {
  background: rgba(255, 255, 255, 0.72);
  border-bottom-color: rgba(20, 22, 26, 0.08);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  backdrop-filter: saturate(180%) blur(18px);
}
.esim-page .nav-links a {
  color: var(--ink);
}
/* Шапка тоньше, чем на лендинге: 60px вместо 72. */
.esim-page .nav-inner {
  height: 60px;
}
.esim-page .brand-mark {
  width: 28px;
  height: 28px;
}
.esim-page .brand-word {
  font-size: 18px;
}
.esim-page .nav .btn-sm {
  padding: 8px 20px;
}
/* Заголовок раздела вопросов - как остальные заголовки на странице, без
   жирного (владелец 12.09: «Вопросы про eSIM для Турции не нужно жирным»).
   В styles.css у .section-title вес 800 - здесь возвращаем обычный. */
.esim-page .faq .section-title {
  font-weight: 600;
}

/* Якоря (#tariffs, #faq) не прячутся под шапку. */
.esim-page [id] {
  scroll-margin-top: 76px;
}
.esim-page .hero {
  padding-top: calc(108px + 60px);
  min-height: min(932px, 100vh);
}
/* Предлог не отрывается от названия страны: на телефоне «Доступные eSIM для
   поездок в» / «Черногорию» съезжало в три строки с висящим «в», а
   «Шри-Ланку» ломалось по дефису (владелец 16.09). Генератор оборачивает
   хвост заголовка («в Черногорию», «на Шри-Ланку») в этот класс. */
.esim-page .hero h1 .nowrap {
  white-space: nowrap;
}

/* Первый экран - .hero лендинга, фото страны на всю ширину. Без белой
   полосы слева (она есть в styles.css) - текст стоит на светлом небе самой
   фотографии; нижний переход в белый как на лендинге. */
/* Фон задаётся переменными из разметки, а не inline-свойством: inline
   перебивает файл стилей, и мобильный кадр не подхватывался (12.09). */
.esim-page .hero-photo {
  background-image: var(--hero-photo);
  background-position: center 20%;
}
/* Переход в белый снизу - только короткий и мягкий, в нижних ~12% кадра.
   Владелец 15.09: сначала «убери забеление картинки снизу» (было от 62%),
   затем «чуть переход сделаем аккуратный». На телефоне перехода нет (ниже). */
.esim-page .hero-photo::after {
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0) 88%,
    rgba(255, 255, 255, 0.18) 92%,
    rgba(255, 255, 255, 0.55) 96%,
    var(--paper) 100%
  );
}

.esim-tariffs {
  padding-top: 72px;
}

/* Окно «Оформление заказа» - .drawer лендинга; промокод раскрывается поверх
   итога, как на странице оплаты, поэтому ему нужно место внутри окна. */
.esim-order-drawer .drawer-body {
  padding-bottom: 20px;
}
.esim-order-drawer .payment-total-row {
  margin-top: 0;
}

/* Выбор тарифа: подпись + одна строка пилюль «Страна / Регион». */
.esim-picker-label {
  margin: 0 0 10px;
  font-size: 14.5px;
  font-weight: 650;
  color: var(--ink);
}
.esim-picker-label + .esim-pick-row {
  margin-bottom: 22px;
}
.esim-pick-row {
  flex-wrap: nowrap;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  /* Тень кнопки не обрезается краем прокрутки. */
  padding: 2px;
  margin-left: -2px;
  margin-right: -2px;
}
.esim-pick-row::-webkit-scrollbar {
  display: none;
}
/* Когда строка не помещается (телефон), края мягко затухают - видно, что её
   можно листать. Класс ставит esim-page.js только при переполнении. */
.esim-pick-row.is-overflowing {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 18px, #000 calc(100% - 28px), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 18px, #000 calc(100% - 28px), transparent 100%);
}
.esim-pick-row.is-overflowing.at-start {
  -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 28px), transparent 100%);
  mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 28px), transparent 100%);
}
.esim-pick-row.is-overflowing.at-end {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 18px, #000 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 18px, #000 100%);
}
.esim-pick-row .mode-toggle-btn {
  flex: 0 0 auto;
  font-size: 14.5px;
  padding: 10px 18px;
  white-space: nowrap;
}
/* Строки пилюль не переносятся - без min-width: 0 колонка сетки растягивается
   по их ширине, и на телефоне обе карточки вылезают за экран. */
.esim-picker,
.esim-grid > .payment-summary-card {
  min-width: 0;
}
/* Выбор тарифа - без рамки и фона карточки (владелец 12.09: «убери рамки
   вокруг выбора тарифов, структура такая же»). Раскладка, пилюли, плитки и
   примечания остаются как были; рамка сохраняется только у «Вашего заказа» -
   это блок оформления. */
.esim-picker {
  border: 0;
  background: transparent;
  padding: 0;
}
.esim-picker .payment-stat-grid {
  margin-top: 6px;
}
.esim-picker .tariff-note-block {
  margin-top: 16px;
}

/* Email в «Вашем заказе» - поле регистрации (.auth-input) внутри карточки. */
.shop-email {
  margin: 4px 0 6px;
}
.shop-email .auth-input-wrap {
  margin-bottom: 18px;
}
.shop-email .auth-hint {
  margin: -10px 0 14px;
}
.auth-input.shop-input-error,
.auth-input.shop-input-error:focus {
  border-color: #c23b30;
}
.auth-hint.shop-hint-error {
  color: #c23b30;
}
.shop-retry-note {
  margin: 4px 0 14px;
  font-size: 14px;
  color: var(--ink-soft);
}
.shop-legal-note {
  margin: 10px 0 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--ink-soft);
}
.shop-legal-note a {
  color: inherit;
  text-decoration: underline;
}

@media (max-width: 860px) {
  .esim-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 900px) {
  /* Первый экран на телефоне - как у saily.com: фотография идёт ОДНИМ куском
     и за текстом тоже, а текст стоит на ровной светлой части кадра (небо).
     Подложки нет вовсе (владелец забраковал выбеленное фото) - читаемость
     держится кадрированием: под текстом небо, шары и долина ниже текста. */
  .esim-page .hero {
    min-height: min(760px, 100svh);
    padding-top: calc(44px + 60px);
    padding-bottom: 40px;
  }
  /* Вертикальный сдвиг кадра работает только при зуме: при обычном cover на
     390x760 и 320x640 снимок вписывается ровно по высоте, запас по вертикали
     нулевой (проверено расчётом 12.09) - и «поднять фото» было невозможно. */
  .esim-page .hero-photo {
    display: block;
    /* Зум больше, кадр чуть ниже верха: под текстом остаётся небо, а в нижней
       половине первого экрана появляются шары и долина. При 140% и кадре от
       самого верха фотография превращалась в одно небо - «фото не видно». */
    background-size: auto 190%;
    background-position: center 28%;
  }
  .esim-page .hero-photo::before {
    content: none;
  }
  /* Перехода в белый снизу нет: владелец 12.09 - «переход на белый убери».
     Фото заканчивается ровной кромкой, ниже начинается белый блок тарифов. */
  .esim-page .hero-photo::after {
    content: none;
  }
  /* Заголовок первого экрана - в две строки, без висящего предлога. Генератор
     отдаёт в --h1-len длину самой длинной из двух строк («Доступные eSIM для»
     и «поездок в Черногорию»), кегль считается так, чтобы она влезла в ширину
     экрана. 0.62 - ширина знака к кеглю с запасом (замер по живым заголовкам
     16.09: 0.52-0.58). min() только уменьшает: где и так влезало (Франция,
     Турция), заголовок почти не меняется. */
  .esim-page .hero h1[style*="--h1-len"] {
    font-size: min(clamp(32px, 1.6vw + 26px, 54px), calc((100vw - 44px) / (var(--h1-len) * 0.62)));
  }
  .esim-tariffs {
    padding-top: 48px;
  }
  /* Заголовок раздела - одной строкой на телефоне (владелец 12.09): при
     общем мобильном кегле 30px «Тарифы eSIM для Турции» ломался на две. */
  .esim-tariffs .countries-title {
    font-size: clamp(21px, 6.2vw, 30px);
    white-space: nowrap;
  }
  /* Пояснение под заголовком мельче: на телефоне это три строки мелкого
     текста, владелец 12.09 попросил уменьшить. */
  .esim-page .countries-sub {
    font-size: 14.5px;
    line-height: 1.5;
    margin-bottom: 22px;
  }
}

@media (max-width: 560px) {
  .esim-page .hero {
    padding-top: calc(28px + 60px);
    padding-bottom: 24px;
  }
  /* На телефоне - свой вертикальный кадр того же снимка (переменную отдаёт
     генератор, см. hero_photo_mobile): сверху ровное небо под текст, ниже
     шары и долина. Широкий кадр приходилось зумить, и читалось «непонятно
     что» - владелец 12.09. */
  .esim-page .hero-photo {
    background-image: var(--hero-photo-mobile);
    background-size: cover;
    /* Прижимаем к низу: кадр уже, чем экран, поэтому при заполнении обрезается
       однородное небо СВЕРХУ, а шары снизу остаются целыми. С прижатием к верху
       шар обрезался ровно пополам - «непонятно, что на фото» (владелец 12.09,
       снимок с телефона). */
    background-position: center bottom;
  }
  /* Нижний переход в белый начинается позже: на 320px текст кончается почти у
     границы 74%, и ниже него оставалась одна белая растяжка вместо фото
     (замер 12.09: разброс яркости 9.8 при норме 14). */
  .esim-tariffs {
    padding-top: 40px;
  }
  /* На основном сайте кнопки переключателя растягиваются на всю ширину
     (их две) - здесь их до шести. Делаем компактнее, чтобы пять сроков
     влезали без прокрутки: строка открывается ровной, и выбранный тариф
     виден сразу (владелец 12.09: «а то наполовину когда страницу
     открываешь, она уже перелистнута»). */
  .esim-pick-row .mode-toggle-btn {
    flex: 0 0 auto;
    justify-content: center;
    padding: 9px 10px;
    font-size: 13.5px;
  }
  .esim-pick-row {
    gap: 6px;
  }
}

/* ---------- Программа лояльности (/esim/programma-loyalnosti/) ----------
   Токены, карточки (.payment-card), плитки (.payment-stat), вопросы и
   заголовки разделов - из основного styles.css; здесь только раскладка. */
.loyalty-hero {
  padding: calc(88px + 60px) 0 24px;
  background:
    radial-gradient(900px 420px at 85% 0%, rgba(255, 224, 0, 0.22), transparent 70%),
    linear-gradient(180deg, var(--paper-soft) 0%, var(--paper) 100%);
  text-align: center;
}
.loyalty-hero h1 {
  max-width: 820px;
  margin: 0 auto;
}
.loyalty-lead {
  max-width: 640px;
  margin: 20px auto 0;
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-soft);
}
.loyalty-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 32px;
}
.loyalty-section {
  padding: 72px 0 0;
}
.loyalty-section + .faq {
  margin-top: 96px;
}

/* Диаграмма роста кэшбека: столбик тем выше, чем больше процент. Без рамки
   и фона карточки (.payment-card) - владелец 12.09 попросил убрать обводку;
   структуру держат сами серые дорожки столбиков. */
.loyalty-ladder {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px;
  /* По верху: двухстрочная подпись («6-я покупка и далее» на телефоне) не
     сдвигает свой столбик относительно соседних. */
  align-items: start;
  padding: 8px 0 0;
}
.loyalty-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}
.loyalty-step-pct {
  font-size: 23px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.loyalty-step-bar {
  display: flex;
  align-items: flex-end;
  width: 100%;
  height: 132px;
  border-radius: var(--radius-md);
  background: var(--dash-card);
  overflow: hidden;
}
.loyalty-step-bar span {
  display: block;
  width: 100%;
  border-radius: var(--radius-md);
  background: linear-gradient(180deg, var(--accent) 0%, var(--accent-strong) 100%);
}
.loyalty-step:first-child .loyalty-step-bar span {
  background: rgba(20, 22, 26, 0.12);
}
.loyalty-step-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
}
.loyalty-step.is-top .loyalty-step-label {
  color: var(--ink);
}

/* Пример расчёта + правила плитками. */
.loyalty-example-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 24px;
  align-items: stretch;
}
.loyalty-example h2 {
  margin: 0 0 18px;
  font-size: 19px;
  font-weight: 700;
}
.loyalty-example-head,
.loyalty-example-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 90px 130px;
  gap: 12px;
  align-items: center;
}
.loyalty-example-head {
  padding-bottom: 8px;
  font-size: 12.5px;
  font-weight: 650;
  color: var(--ink-soft);
  text-align: right;
}
.loyalty-example-row {
  padding: 9px 0;
  font-size: 15px;
  border-top: 1px solid var(--line);
}
.loyalty-example-head + .loyalty-example-row {
  border-top: 0;
}
.loyalty-example-val {
  text-align: right;
  font-weight: 650;
}
.loyalty-example-val.is-friend {
  color: #128a4a;
}
.loyalty-example-row.is-total {
  border-top: 0;
  padding-top: 0;
  font-weight: 700;
}
.loyalty-example-row.is-total .loyalty-example-val {
  font-size: 20px;
  font-weight: 800;
}
.loyalty-rules {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.loyalty-rules .payment-stat {
  justify-content: center;
  padding: 24px 16px;
  gap: 10px;
}
/* Плашки крупнее остальных на сайте - по просьбе владельца 12.09: это
   главные правила программы, их читают в первую очередь. Иконки те же, что
   в карточке заказа (styles.css), только крупнее: эмодзи владелец отверг. */
.loyalty-rule .payment-stat-icon svg {
  width: 32px;
  height: 32px;
}
.loyalty-rule strong {
  font-size: 19px;
}
.loyalty-rule span:last-child {
  font-size: 14.5px;
  line-height: 1.45;
}

/* Реферальная программа: две карточки - вам и другу. */
.loyalty-ref-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px;
}
.loyalty-ref-card {
  position: relative;
  padding: 36px 36px 34px;
  border-radius: var(--radius-lg);
  background: #eef2f8;
  overflow: hidden;
}
.loyalty-ref-card.is-you {
  background: #fff4c2;
}
.loyalty-ref-icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 8px 20px rgba(20, 22, 26, 0.06);
}
.loyalty-ref-icon svg {
  width: 26px;
  height: 26px;
}
.loyalty-ref-pct {
  position: absolute;
  top: 24px;
  right: 34px;
  font-size: 64px;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--ink);
}
.loyalty-ref-card h3 {
  margin: 30px 0 10px;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.loyalty-ref-card p {
  margin: 0;
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink-soft);
}
.loyalty-how {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin: 40px 0 0;
  padding: 0;
  list-style: none;
}
.loyalty-how li {
  display: flex;
  gap: 16px;
  padding: 22px 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}
.loyalty-how .step-number {
  flex: none;
  font-size: 26px;
  line-height: 1;
}
.loyalty-how b {
  display: block;
  font-size: 15.5px;
}
.loyalty-how p {
  margin: 6px 0 0;
  font-size: 14px;
  color: var(--ink-soft);
}
.loyalty-legal {
  margin: 28px 0 0;
  text-align: center;
  font-size: 14px;
  color: var(--ink-soft);
}
.loyalty-legal a {
  color: var(--ink);
  text-decoration: underline;
}

@media (max-width: 900px) {
  .loyalty-hero {
    padding-top: calc(48px + 60px);
  }
  .loyalty-ladder {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    row-gap: 24px;
  }
  .loyalty-step-bar {
    height: 92px;
  }
  .loyalty-example-grid,
  .loyalty-ref-grid,
  .loyalty-how {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 560px) {
  .loyalty-hero {
    padding-top: calc(32px + 60px);
    text-align: left;
  }
  .loyalty-hero h1 br {
    display: none;
  }
  .loyalty-lead {
    margin-left: 0;
    font-size: 16px;
  }
  .loyalty-actions {
    justify-content: flex-start;
  }
  .loyalty-actions .btn {
    width: 100%;
  }
  .loyalty-section {
    padding-top: 48px;
  }
  .loyalty-section + .faq {
    margin-top: 56px;
  }
  .loyalty-ladder {
    gap: 10px;
    row-gap: 18px;
    padding: 6px 0 0;
  }
  .loyalty-step-pct {
    font-size: 19px;
  }
  .loyalty-step-bar {
    height: 76px;
  }
  .loyalty-step-label {
    font-size: 12px;
  }
  .loyalty-rule .payment-stat-icon svg {
    width: 28px;
    height: 28px;
  }
  .loyalty-rule strong {
    font-size: 17px;
  }
  /* Каждая строка - своя сетка, поэтому колонки фиксированные (иначе суммы
     разъезжаются между строками). Ширины подобраны под 320px: подпись
     «1-я поездка» и «372 ₽» помещаются в одну строку и в WebKit. */
  .loyalty-example-head,
  .loyalty-example-row {
    grid-template-columns: minmax(0, 1fr) 58px 90px;
    gap: 8px;
  }
  .loyalty-example-row > span:first-child {
    white-space: nowrap;
  }
  .loyalty-example-row.is-total > span:first-child {
    white-space: normal;
  }
  .loyalty-example-val {
    white-space: nowrap;
  }
  .loyalty-example-row.is-total .loyalty-example-val {
    font-size: 17px;
  }
  .loyalty-example-row {
    font-size: 14px;
  }
  /* Цена уже в заголовке примера - на узком экране не переносим «₽». */
  .loyalty-example-price {
    display: none;
  }
  .loyalty-ref-grid {
    gap: 20px;
  }
  .loyalty-ref-card {
    padding: 26px 22px 24px;
  }
  .loyalty-ref-card h3 {
    margin-top: 24px;
  }
  .loyalty-ref-pct {
    font-size: 46px;
    top: 20px;
    right: 22px;
  }
  .loyalty-how {
    margin-top: 28px;
    gap: 14px;
  }
  .loyalty-how li {
    padding: 18px 20px;
  }
}

/* ---------- Способы оплаты в подвале ----------
   Раскладка как на saily.com (скриншот владельца 12.09): самая нижняя строка -
   слева копирайт, справа логотипы; отдельной подписи «Оплата» нет. Плашки
   светлые: на тёмном подвале ни градиентный «Мир», ни зелёный SberPay не
   читаются. Visa и Mastercard не показываем - в России ими не оплатить
   (владелец, 12.09). Реальные способы терминала: карты «Мир», СБП, SberPay,
   T-Pay; логотип T-Pay - нынешний (тёмная плашка, жёлтый щит, белое PAY),
   до 12.09 стоял текстовой плашкой, пока файл не нашёлся. */
.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  width: 100%;
  margin-top: 8px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
/* Ссылки на все страны - перелинковка для поиска, свёрнутая в «eSIM по
   странам» (владелец 16.09). Раскладка и поведение - те же правила, что на
   главной (site/styles.css), здесь только ширина блока в подвале. */
.footer-countries {
  width: 100%;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.footer-bottom .footer-legal {
  width: auto;
  margin: 0;
}
.footer-pay {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.footer-pay-item {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 62px;
  height: 38px;
  padding: 0 12px;
  border-radius: 10px;
  background: var(--paper);
}
.footer-pay-item img {
  display: block;
  width: auto;
  max-width: 100%;
  /* Потолок под самый высокий логотип (СБП - знак и «сбп»); остальные ниже
     за счёт своих width/height в разметке. */
  max-height: 26px;
}

@media (max-width: 560px) {
  .footer-bottom {
    align-items: flex-start;
    flex-direction: column-reverse;
    gap: 18px;
  }
  .footer-pay {
    gap: 8px;
  }
  .footer-pay-item {
    min-width: 56px;
    height: 34px;
    padding: 0 10px;
  }
  .footer-pay-item img {
    max-height: 22px;
  }
}

/* ---------- Окно «Оформление заказа»: плавность ----------
   В styles.css есть только анимация появления; закрытие было мгновенным
   (`hidden = true`), и это читалось как рывок - владелец 12.09. Здесь
   добавлено закрытие, свайп вниз и плавный вывод сообщений. */
.esim-order-drawer {
  will-change: transform;
}
#esim-order-overlay.is-closing {
  animation: esim-overlay-out 200ms ease forwards;
}
#esim-order-overlay.is-closing .drawer {
  animation: esim-drawer-out 200ms cubic-bezier(0.4, 0, 1, 1) forwards;
}
@keyframes esim-overlay-out {
  from { background: rgba(16, 17, 20, 0.5); }
  to { background: rgba(16, 17, 20, 0); }
}
@keyframes esim-drawer-out {
  from { opacity: 1; transform: scale(1) translateY(0); }
  to { opacity: 0; transform: scale(0.97) translateY(12px); }
}
/* Возврат на место после недотянутого свайпа. */
.esim-order-drawer.is-springing {
  transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* Сообщения (промокод, оплата, email) появляются плавно, а не рывком. */
#payment-promo-note,
#payment-pay-notice,
#checkout-email-hint {
  transition: opacity 180ms ease, transform 180ms ease;
}
#payment-promo-note:not(.is-visible),
#payment-pay-notice:not(.is-visible),
#checkout-email-hint:not(.is-visible) {
  opacity: 0;
  transform: translateY(-4px);
}
#payment-promo-note.is-visible,
#payment-pay-notice.is-visible,
#checkout-email-hint.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 560px) {
  /* Нижний лист: выезжает снизу и уезжает вниз - так же, как его тянут
     пальцем. */
  .esim-order-drawer {
    animation: esim-sheet-in 260ms cubic-bezier(0.16, 1, 0.3, 1);
  }
  #esim-order-overlay.is-closing .drawer {
    animation: esim-sheet-out 220ms cubic-bezier(0.4, 0, 1, 1) forwards;
  }
  @keyframes esim-sheet-in {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
  }
  @keyframes esim-sheet-out {
    from { transform: translateY(0); }
    to { transform: translateY(100%); }
  }
  /* Полоска-ручка: понятно, что лист можно стянуть вниз. */
  .esim-order-drawer .drawer-head::before {
    content: "";
    position: absolute;
    top: 8px;
    left: 50%;
    width: 44px;
    height: 4px;
    margin-left: -22px;
    border-radius: 999px;
    background: rgba(20, 22, 26, 0.18);
  }
  .esim-order-drawer .drawer-head {
    position: relative;
    padding-top: 22px;
  }
}

@media (max-width: 360px) {
  /* Короткий и узкий экран (320x640): текст занимает ~72% высоты, и на общем
     телефонном кадре последняя строка списка ложилась на шар (яркость 136 при
     норме 150). Здесь кадр с большей полосой неба сверху. */
  .esim-page .hero-photo {
    background-image: var(--hero-photo-narrow);
  }
  /* Пять сроков должны влезать и на 320px: иначе строка переполняется и
     выбранные «30 дней» оказываются за правым краем (живая проверка 12.09
     показала это там, где локальный тест со сменой размера окна - нет). */
  .esim-pick-row .mode-toggle-btn {
    padding: 8px 7px;
    font-size: 12.5px;
  }
  .esim-pick-row {
    gap: 4px;
  }
  .esim-picker-label {
    font-size: 13.5px;
  }
}

/* ---------- Первый экран «hero-fit» (15.09.2026) ----------
   Для страниц с классом .hero-fit (Китай и страны, добавленные с 15.09).
   Проблема, которую он решает: фото тянулось по экрану (cover), а текст имеет
   высоту в пикселях, поэтому на КОРОТКИХ экранах (телефон с панелями Safari/
   Telegram 375x667, 390x660, ноутбук 1440x760) полоса с объектом поднималась
   под текст - владелец: «не видно слово операторами».
   Решение: снимок масштабируется строго по ширине и прижат к низу, а нижний
   отступ первого экрана равен высоте полосы с объектом в этом снимке. Долю
   полосы (--band-*) и цвет верхнего края неба (--sky-*) генератор замеряет
   по самим файлам. Если текст выше снимка, сверху видна заливка цветом неба
   (верх снимков - ровное небо). --ar-* - высота снимка к ширине (генератор
   читает из файлов): у снимков 3:2 широкий кадр выше 1.6, иначе над объектом
   не надставить небо. */
.esim-page .hero.hero-fit {
  padding-bottom: calc(var(--band-d, 0.32) * var(--ar-d, 0.625) * 100vw + 16px);
}
.esim-page .hero.hero-fit .hero-photo {
  background-size: 100% auto;
  background-position: center bottom;
  background-color: var(--sky-d, #cfe2f2);
}
/* Компьютер (16.09 вечер). Отступ снизу по полосе объекта уводил снимок за
   край окна: на экране 1536x820 при открытии было одно небо (владелец: «нужно
   чтоб основная фотка при открытии была, как в Японии»). Теперь первый экран
   ровно по высоте окна, а снимок сдвинут так, чтобы верх объекта стоял сразу
   под текстом (max(50vh, 420px)); лишний низ снимка обрезается. Опускать
   снимок ниже верхнего края можно не больше чем на --drop-d (с 17.09 30vh), иначе
   объект превращается в полоску. Верх объекта - --objtop-d, по умолчанию
   из полосы: 1.03 - --band-d. */
/* 17.09: якорь max(50vh, 420px) стоял ВЫШЕ конца текста (~518px), и на
   1536x820 у Кипра, Киргизии, Болгарии, Чехии и др. нижние строки списка
   лежали на объекте. Теперь верх объекта ставится под последней строкой:
   --text-end считается из тех же размеров, что у заголовка и списка
   (h1 всегда в две строки, 4 пункта по 24.75px). На экранах ниже 900px
   отступы текста поджаты, чтобы фото оставалось видно сразу. */
@media (min-width: 901px) {
  .esim-page .hero.hero-fit {
    --pad-t: 168px;
    --list-m: 48px;
    --list-g: 26px;
    --text-end: calc(var(--pad-t) + 2.3 * clamp(32px, 1.6vw + 26px, 54px) + var(--list-m) + 99px + 3 * var(--list-g));
    min-height: 100vh;
    padding-top: var(--pad-t);
    padding-bottom: 40px;
  }
  /* «поездок в Великобританию» не влезала в колонку 660px и давала третью
     строку. Кегль только уменьшается, как на телефоне. */
  .esim-page .hero.hero-fit h1[style*="--h1-len"] {
    font-size: min(clamp(32px, 1.6vw + 26px, 54px), calc(660px / (var(--h1-len) * 0.6)));
  }
  .esim-page .hero.hero-fit .hero-checklist {
    margin-top: var(--list-m);
    gap: var(--list-g);
  }
  /* Линия на стыке заливки и снимка (владелец 17.09: «что за линия на фото»).
     Градиент ровно по высоте заливки плюс небольшой запас - дальше в кадр он
     не лезет, иначе гасит сам объект (у Франции пропал шпиль). */
  .esim-page .hero.hero-fit .hero-photo::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: calc(
      max(0px, var(--text-end) + 20px - var(--objtop-d, calc(1.03 - var(--band-d, 0.32))) * var(--ar-d, 0.625) * 100vw)
      + 7vh
    );
    background: linear-gradient(
      to bottom,
      rgb(var(--sky-rgb-d, 207, 226, 242)) 0%,
      rgba(var(--sky-rgb-d, 207, 226, 242), 0.96) 34%,
      rgba(var(--sky-rgb-d, 207, 226, 242), 0.5) 62%,
      rgba(var(--sky-rgb-d, 207, 226, 242), 0) 100%
    );
    pointer-events: none;
  }
  .esim-page .hero.hero-fit .hero-photo {
    background-position: center clamp(
      calc(100vh - var(--ar-d, 0.625) * 100vw),
      calc(var(--text-end) + 20px - var(--objtop-d, calc(1.03 - var(--band-d, 0.32))) * var(--ar-d, 0.625) * 100vw),
      var(--drop-d, 30vh)
    );
  }
}
@media (min-width: 901px) and (max-height: 899px) {
  .esim-page .hero.hero-fit {
    --pad-t: 132px;
    --list-m: 36px;
    --list-g: 18px;
  }
}
@media (min-width: 901px) and (max-height: 700px) {
  .esim-page .hero.hero-fit {
    --pad-t: 104px;
    --list-m: 28px;
    --list-g: 14px;
  }
}
@media (max-width: 900px) and (orientation: portrait) {
  /* Телефон (17.09): первый экран по высоте экрана, как у Турции, - раньше
     под текстом резервировалась вся полоса снимка, и при открытых панелях
     браузера (390x664) экран выходил на 60-140px длиннее Турции (владелец:
     «слишком по высоте длинные»). Снимок прижат к низу; если экран низкий и
     объект доставал бы до списка (текст кончается около 460px), снимок
     уходит ниже края на --cut-m, но не больше чем на 45% полосы объекта. */
  .esim-page .hero.hero-fit {
    --cut-m: clamp(0px, calc(460px - min(760px, 100svh) + var(--band-m, 0.3) * var(--ar-m, 2.1645) * 100vw), calc(var(--band-m, 0.3) * var(--ar-m, 2.1645) * 45vw));
    padding-bottom: 12px;
  }
  .esim-page .hero.hero-fit .hero-photo {
    background-image: var(--hero-photo-mobile);
    background-size: 100% auto;
    background-position: center bottom calc(-1 * var(--cut-m, 0px));
    background-color: var(--sky-m, #cfe2f2);
  }
}
@media (max-width: 900px) and (orientation: landscape) {
  .esim-page .hero.hero-fit .hero-photo {
    background-size: 100% auto;
    background-position: center bottom;
  }
}
@media (max-width: 360px) {
  /* Узкий экран: текст кончается ниже, около 540px. */
  .esim-page .hero.hero-fit {
    --cut-m: clamp(0px, calc(540px - min(760px, 100svh) + var(--band-n, 0.18) * var(--ar-n, 2) * 100vw), calc(var(--band-n, 0.18) * var(--ar-n, 2) * 45vw));
    padding-bottom: 10px;
  }
  .esim-page .hero.hero-fit .hero-photo {
    background-image: var(--hero-photo-narrow);
    background-color: var(--sky-n, #cfe2f2);
  }
}

/* ---------- Первый экран без заливки: фото во весь экран (18.09.2026) ----
   Владелец: «сверху всё заблюрено, переход ужасный, видно одни облака».
   Причина - режим .hero-fit масштабирует снимок ПО ШИРИНЕ, и над ним
   остаётся ровная заливка цветом неба (--sky-*), то есть видимая полоса.
   Здесь снимок закрывает первый экран целиком, как на странице Турции:
   cover + прижатие к низу. Тогда лишнее срезается сверху (ровное небо), а
   объект всегда стоит у нижнего края и виден целиком.
   Требование к кадру: объект начинается примерно с 0.60 высоты файла
   (на телефоне с 0.70) - иначе текст ляжет на него. */
.esim-page .hero.hero-cover {
  padding-bottom: 40px;
}
.esim-page .hero.hero-cover .hero-photo {
  background-image: var(--hero-photo);
  background-size: cover;
  background-position: center bottom;
  background-color: var(--sky-d, #cfe2f2);
}
.esim-page .hero.hero-cover .hero-photo::before {
  content: none;
}
@media (min-width: 901px) {
  .esim-page .hero.hero-cover {
    min-height: 100vh;
    padding-top: var(--pad-t, 168px);
    padding-bottom: 40px;
  }
  .esim-page .hero.hero-cover .hero-photo {
    background-position: center bottom;
  }
}
/* Низкий, но широкий экран (ноутбук 1440x760): снимок при cover выше окна,
   и объект поднимается под последние строки списка. Опускаем кадр ниже края
   на столько же, на сколько окно короче самого кадра. */
@media (min-width: 901px) and (max-height: 880px) {
  .esim-page .hero.hero-cover .hero-photo {
    background-position: center bottom -70px;
  }
}
@media (min-width: 901px) and (max-height: 780px) {
  .esim-page .hero.hero-cover .hero-photo {
    background-position: center bottom -120px;
  }
}
@media (max-width: 900px) and (orientation: portrait) {
  .esim-page .hero.hero-cover {
    padding-bottom: 12px;
  }
  .esim-page .hero.hero-cover .hero-photo {
    background-image: var(--hero-photo-mobile);
    background-size: cover;
    background-position: center bottom;
    background-color: var(--sky-m, #cfe2f2);
  }
}
@media (max-width: 360px) {
  .esim-page .hero.hero-cover .hero-photo {
    background-image: var(--hero-photo-narrow);
    background-color: var(--sky-n, #cfe2f2);
  }
}

/* Длинные названия («Тарифы eSIM для Южной Кореи») не влезали в одну строку
   на телефоне. Генератор отдаёт число символов в --title-len только длинным
   заголовкам; кегль считается так, чтобы строка вписалась в ширину экрана.
   Короткие заголовки остаются на прежнем clamp(21px, 6.2vw, 30px). */
@media (max-width: 900px) {
  .esim-tariffs .countries-title.countries-title-long {
    font-size: clamp(15px, calc((100vw - 44px) / (var(--title-len) * 0.6)), 30px);
  }
}

/* Список стран на странице 404 (.esim-related). Таблицы цен и блок
   «соседние страны» на страницах стран убраны 18.09.2026 по просьбе
   владельца - остались только заголовок, выбор тарифа, шаги и вопросы. */
.esim-related {
  padding: 56px 0 48px;
}
/* Вес заголовка - как у «Вопросы про eSIM» (600, не 800 из styles.css). */
.esim-related .section-title {
  margin-bottom: 24px;
  font-weight: 600;
}
.esim-related .country-card {
  color: inherit;
  text-decoration: none;
}
@media (max-width: 560px) {
  .esim-related {
    padding-top: 40px;
  }
}