/* store-mode.css — витрина на время переезда в App Store.
 *
 * Тарифы сюда больше не входят: бесплатный план вернули, и пара карточек
 * снова живёт по правилам styles.css, как до переезда. Осталось то, что к
 * тарифам не относится: постоянная зачёркнутая цена и подписка на новости.
 *
 * Здесь только вид; разметка — в самом index.html. */

/* Зачёркнутая старая цена больше не прячется: скидка теперь не событие, а
   постоянная витрина. */
.plan__price-was[hidden] {
  display: inline;
}
.plan__price-was {
  /* Вплотную к новой цене: пара читается как одно число, которое сменилось,
     а не как два ценника рядом. */
  margin-right: 0;
  color: var(--muted);
  /* Размер старой цены задан в styles.css заодно с припиской «/ once» — они
     набраны одинаково. Насыщенность здесь тоже её: 600 брали, пока цена была
     в 44 пункта, у мелкой она смотрелась бы тяжелее приписки рядом. */
  font-weight: 500;
}
.plan--pro .plan__price { gap: 6px; }

/* ─── Подписка на новости — последняя секция перед подвалом ──────────────
   Собрана как карточка подвала: та же ширина, тот же серый фон и радиус.
   Раньше это был белый блок с тенью – он висел над серым подвалом чужой
   деталью. Теперь два блока читаются как одна опора страницы. */
/* Почти вплотную к подвалу: две одинаковые карточки стоят парой, как ряды
   карточек выше по странице. */
.soon-sec { padding-top: 0; padding-bottom: 0; }

.soon {
  width: 100%; box-sizing: border-box;
  background: var(--card); border-radius: 20px;
  /* Выше подвала: это не сноска, а единственное место на странице, где
     просят адрес — ему нужен вес. */
  min-height: 148px;
  padding: 34px 40px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.soon__title {
  margin: 0;
  font-size: 20px; font-weight: 700; letter-spacing: -.3px;
  color: var(--text);
}
.soon__text {
  margin: 4px 0 0;
  font-size: 15px; line-height: 1.45;
  color: var(--card-text);
}
/* Текст слева, форма справа – как иконки и ссылки в подвале. */
.soon__copy { min-width: 0; }
.soon__form {
  display: flex; gap: 10px; flex: 0 0 auto;
}
.soon__input {
  width: 240px; min-width: 0;
  padding: 12px 18px;
  font: inherit; font-size: 15px;
  color: var(--text); background: var(--white);
  border: 1px solid transparent; border-radius: 999px;
  outline: none;
  transition: border-color .15s ease;
}
.soon__input:focus { border-color: var(--accent); }
.soon__cta {
  flex: 0 0 auto;
  padding: 12px 24px;
  font: inherit; font-size: 15px; font-weight: 700;
  color: var(--white); background: var(--surface-dark);
  border: 0; border-radius: 999px; cursor: pointer;
  transition: opacity .15s ease;
}
.soon__cta:hover { opacity: .88; }
.soon__cta:disabled { opacity: .5; cursor: default; }
/* Атрибут hidden проигрывает своему же display:flex — без этой строки форма
   после отправки оставалась на месте, а «спасибо» приезжало рядом с ней. */
.soon__form[hidden], .soon__done[hidden] { display: none !important; }

/* Ответ занимает место формы: галочка в кружке и одна строка. */
.soon__done {
  margin: 0; flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 16px; font-weight: 600;
  color: var(--text);
  animation: soonDone .32s cubic-bezier(.22, 1, .36, 1) both;
}
.soon__done::before {
  content: ""; flex: 0 0 auto;
  width: 26px; height: 26px;
  /* Кружок и галочка одной картинкой: две маски на один элемент не повесить,
     а второй псевдоэлемент пришлось бы позиционировать вручную. */
  background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='26'%20height='26'%20viewBox='0%200%2026%2026'%3E%3Ccircle%20cx='13'%20cy='13'%20r='13'%20fill='%233b9eff'/%3E%3Cpath%20d='M19%209L11.25%2017L7%2012.7'%20stroke='%23fff'%20stroke-width='2.2'%20fill='none'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
@keyframes soonDone {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .soon__done { animation: none; } }

@media (max-width: 720px) {
  /* Как и подвал на телефоне: в столбик. */
  .soon { flex-direction: column; align-items: stretch; text-align: center; gap: 16px; padding: 22px 24px 26px; }
  .soon__form { flex-direction: column; }
  .soon__input { width: 100%; }
}

/* ─── Полоса со скидкой ──────────────────────────────────────────────────
   Заменила всплывающую карточку promo.js. Липнет к низу окна во всю ширину:
   выше — плавающая шапка со своей кнопкой, и второй акцент рядом с ней
   спорил бы за внимание. Показывает её store-mode.js (и он же прячет её
   до конца сеанса, если человек закрыл). */
:root { --deal-h: 52px; }

.deal {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 95;
  color: #fff;
  background: linear-gradient(90deg, #1668d6 0%, #3b9eff 52%, #1f7ae0 100%);
  box-shadow: 0 -8px 26px rgba(18, 18, 18, .18);
  /* Выезд снизу: полоса появляется движением, а не возникает поверх текста. */
  animation: dealIn .45s cubic-bezier(.22, 1, .36, 1) both;
  overflow: hidden;
}
.deal[hidden] { display: none; }

@keyframes dealIn { from { transform: translateY(100%); } to { transform: none; } }

/* Блик, изредка пробегающий по полосе – единственное движение в ней. */
.deal::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent 40%, rgba(255,255,255,.22) 50%, transparent 60%);
  transform: translateX(-100%);
  animation: dealShine 7s ease-in-out 1.2s infinite;
}
@keyframes dealShine {
  0%   { transform: translateX(-100%); }
  35%  { transform: translateX(100%); }
  100% { transform: translateX(100%); }
}
@media (prefers-reduced-motion: reduce) {
  .deal { animation: none; }
  .deal::after { animation: none; opacity: 0; }
}

.deal__in {
  max-width: var(--nav-w, 1180px);
  margin-inline: auto;
  min-height: var(--deal-h);
  padding: 8px var(--gutter, 24px);
  display: flex; align-items: center; justify-content: center; gap: 14px;
  position: relative; z-index: 1;
}

.deal__badge {
  flex: 0 0 auto;
  padding: 4px 10px;
  font-size: 12px; font-weight: 700; letter-spacing: .02em;
  text-transform: uppercase;
  background: rgba(255, 255, 255, .18);
  border-radius: 999px;
}
.deal__text { font-size: 14px; font-weight: 500; }
.deal__price { font-size: 15px; white-space: nowrap; display: inline-flex; align-items: baseline; gap: .35em; }
/* Скидка — главное в полосе, поэтому крупнее всего остального в ней. */
.deal__price b { font-size: 21px; font-weight: 800; letter-spacing: -.01em; }

.deal__cta {
  flex: 0 0 auto;
  padding: 8px 18px;
  font-size: 14px; font-weight: 700;
  color: #12325a; background: #fff;
  border-radius: 999px; text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease;
}
.deal__cta:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0, 0, 0, .22); }

/* В самом углу полосы: раньше он сидел у края центральной колонки и на
   широком экране висел посреди синевы. */
.deal__x {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  z-index: 2;
  width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 20px; line-height: 1;
  color: #fff; background: transparent; border: 0; border-radius: 50%;
  opacity: .65; cursor: pointer;
  transition: opacity .15s ease, background .15s ease;
}
.deal__x:hover { opacity: 1; background: rgba(255, 255, 255, .16); }

/* Плавающая кнопка на телефонах вела туда же, куда полоса – к тарифу.
   Оставлять обе значит держать две липкие штуки друг на друге. */
.mobile-dl { display: none !important; }

/* Печенье живёт в том же углу: поднимаем его над полосой, иначе оно садится
   на неё сверху (у него z-index 99999 и свои inline-стили). */
#tf-consent { bottom: calc(18px + var(--deal-h)) !important; }

/* Полоса перекрывала бы низ подвала. Верхний отступ подрезан: подписка и
   подвал — две одинаковые карточки, и между ними нужен зазор, а не провал. */
.footer { padding-top: 6px; padding-bottom: calc(32px + var(--deal-h)); }

@media (max-width: 720px) {
  /* На узком экране остаётся суть: скидка, цена, кнопка. */
  .deal__text { display: none; }
  .deal__in { gap: 10px; padding-right: 40px; }
  .deal__badge { font-size: 11px; padding: 3px 8px; }
}

/* Первый экран занимает ровно высоту окна, а низ окна теперь забрала полоса
   со скидкой: подпись под каруселью упиралась прямо в неё. Отдаём первому
   экрану запас снизу — вся сцена вместе с карточками поднимается. */
.nhero {
  padding-bottom: calc(var(--deal-h) + 40px);
}
.nhero__caption {
  margin-top: 8px;
}

/* ─── Кнопка в шапке появляется только после первого экрана ──────────────
   hero-scene.css держит её видимой всегда (!important, «сцены здесь нет»),
   хотя скрипт исправно ставит .is-cta-on, когда первый экран уходит вверх.
   Возвращаем задуманное поведение: наверху в правом углу стоит только выбор
   языка, ниже к нему выезжает кнопка и встаёт рядом. */
.nav:not(.is-cta-on) .nav__cta {
  max-width: 0 !important;
  padding: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
.nav:not(.is-cta-on) .nav__right { gap: 0 !important; }

/* Сжатая шапка прячет выбор языка (он уезжает в меню «…»). Пока кнопки не
   было, это освобождало место; теперь пара «язык + кнопка» — то, ради чего
   всё и затевалось, поэтому язык остаётся на виду. */
.nav.is-condensed .lang { opacity: 1 !important; pointer-events: auto !important; }
.nav.is-condensed .lang__slot { max-width: 72px !important; }
.nav.is-cta-on .nav__right { gap: 12px !important; }