/* =========================================================
   Блок: "Тарифы" (tariffs)
   Один и тот же компонент карточки на страницах:
     - individuals.html — кнопка ведёт сразу на онлайн-оплату
     - business.html — кнопка открывает всплывающую форму (modal)
   ========================================================= */

.tariffs__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
  max-width: 920px;
  margin-inline: auto;
}

/* Шапка раздела «Тарифы» — по левому краю, в ширину контента (920px) */
.tariffs__head {
  max-width: 920px;
  margin: 0 auto var(--space-5);
  text-align: left;
}

.tariffs__head .eyebrow {
  justify-content: flex-start;
}

/* Описания тарифов над карточками (2 колонки под сетку карточек) */
.tariffs__intro {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
  max-width: 920px;
  margin: 0 auto var(--space-6);
}

.tariffs__intro-item {
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--color-text-muted);
  text-align: left;
}

/* Название тарифа — белым по фирменной оранжевой плашке.
   inline-block, а не inline: у строчного элемента вертикальные паддинги не
   раздвигают строку, и заливка налезала бы на текст следующей строки.
   box-decoration-break нужен на случай, если длинное название всё же
   перенесётся — тогда у обеих частей будут скруглены свои края, а не
   разрезанный пополам прямоугольник. */
.tariffs__intro-name {
  display: inline-block;
  background: var(--color-accent);
  color: #ffffff;
  /* Начертание не задаём — наследуется от абзаца (обычное).
     Название выделяется плашкой, дополнительный жир тут не нужен. */
  /* Скругление «в полный овал», как у кнопок (.btn в base.css — 999px).
     Боковой паддинг увеличен вместе с радиусом: у скруглённых торцов текст
     иначе прижимается к краю. */
  padding: 3px 16px;
  border-radius: 999px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

@media (max-width: 720px) {
  .tariffs__intro {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
}

.tariff-card {
  position: relative;
  top: 0;
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border-radius: var(--radius-l);
  padding: var(--space-6);
  box-shadow: var(--shadow-card);
  border: 2px solid transparent;
  transition: top 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.3s ease;
}

/* Приподнимается при наведении и остаётся, при уходе плавно опускается */
.tariff-card:hover {
  top: -8px;
  box-shadow: 0 22px 44px rgba(37, 45, 67, 0.16);
}

/* Анимированная подсветка бордера (см. glow-border в base.css) */
.tariff-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 2px;
  background: conic-gradient(
    from var(--glow-angle),
    #ffffff 0deg,
    var(--color-accent) 22deg,
    rgba(206, 93, 37, 0) 120deg,
    transparent 360deg
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  /* Линия бежит по контуру постоянно у ВСЕХ карточек, без наведения курсора.
     Раньше у обычных карточек подсветка включалась только по :hover (3s), а у
     выделенной шла всегда (5s). Теперь поведение общее и задаётся один раз
     здесь. Отдельного правила на :hover сознательно нет: одинаковая анимация
     в двух правилах перезапускалась бы при наведении и дёргалась — ровно то,
     о чём предупреждал прежний комментарий. Скорость взята от «Премиум» (5s). */
  opacity: 1;
  animation: glow-border-travel 5s linear infinite;
}

/* Выделенная карточка — без жёсткого бордера. Подсветку не переопределяем:
   она уже задана выше и одинакова у обеих карточек. Выделение держится на
   бейдже «Оптимальный». */
.tariff-card--featured {
  border-color: transparent;
}

/* ВНИМАНИЕ: сюда НЕ добавлять @media (prefers-reduced-motion: reduce) с
   animation: none. В Windows 11 «Параметры → Специальные возможности →
   Визуальные эффекты → Эффекты анимации» выключены у многих пользователей,
   браузер тогда отдаёт reduce — и бегущий контур пропадает у всех таких
   посетителей. Постоянная подсветка здесь — осознанное требование заказчика. */

.tariff-card__badge {
  align-self: flex-start;
  background: var(--color-accent);
  color: #ffffff;
  font-size: var(--fs-small);
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 999px;
  margin-bottom: var(--space-3);
}

.tariff-card__title {
  font-size: 1.35rem;
  font-weight: 600;
}

.tariff-card__price {
  /* Цена — Manrope (не заголовок), крупная и жирная */
  font-family: var(--font-main);
  font-size: var(--fs-h3);
  font-weight: 800;
  margin-top: var(--space-2);
}

.tariff-card__price span {
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--color-text-muted);
}

.tariff-card__features {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: var(--space-5) 0;
  flex: 1;
}

.tariff-card__feature {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.tariff-card__feature-icon {
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  margin-top: 2px;
  background: rgba(206, 93, 37, 0.15);
  color: var(--color-accent-dark);
}

.tariff-card__feature--excluded {
  color: var(--color-text-muted);
}

.tariff-card__feature--excluded .tariff-card__feature-icon {
  background: var(--color-border);
  color: var(--color-text-muted);
}

/* ---------- Модалка всплывающей формы (для бизнеса) ---------- */
.tariff-modal {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
}

.tariff-modal[hidden] {
  display: none;
}

.tariff-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(37, 45, 67, 0.6);
}

.tariff-modal__panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 480px;
  max-height: 90vh;
  overflow-y: auto;
  background: var(--color-surface);
  border-radius: var(--radius-l);
  padding: var(--space-6);
}

.tariff-modal__close {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-bg);
}

.tariff-modal__close:hover {
  background: var(--color-border);
}

.tariff-modal__title {
  font-size: 1.4rem;
  font-weight: 800;
  margin-bottom: var(--space-1);
}

.tariff-modal__subtitle {
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
}

@media (max-width: 720px) {
  .tariffs__grid {
    grid-template-columns: 1fr;
  }
}