/* ============================================
   КОМПОНЕНТЫ — переиспользуемые элементы.
   Собраны один раз, применяются во всех блоках.
   ============================================ */

/* --------------------------------------------
   Кнопка
   .btn                 — общая основа
   .btn--light          — белая заливка
   .btn--ghost          — прозрачная с белой обводкой
   -------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  height: var(--control-h);
  padding-inline: var(--space-8);
  border: 1.5px solid transparent;
  border-radius: var(--radius-md);
  background: none;
  font-size: var(--fs-lg);
  font-weight: var(--fw-medium);
  line-height: 1;
  white-space: nowrap;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.btn--light {
  background-color: var(--color-surface);
  color: var(--color-ink);
}

.btn--light:hover {
  background-color: #F0F3FA;
}

.btn--ghost {
  /* Шире базовой кнопки — так пропорции совпадают с макетом */
  padding-inline: var(--space-10);
  border-color: var(--color-on-brand-border);
  color: var(--color-on-brand);
}

.btn--ghost:hover {
  background-color: rgba(255, 255, 255, 0.12);
  border-color: var(--color-on-brand);
}

/* --- Кнопки для светлого фона (футер) --- */
/* Ниже героевских: --control-h равен 65px, а в макете 55px */
.btn--brand,
.btn--outline {
  height: 55px;
  padding-inline: var(--space-10);
  border-radius: var(--radius-sm);
  font-size: clamp(0.9375rem, 1.1vw, 1.0625rem); /* 15px → 17px */
}

.btn--brand {
  background-color: var(--color-brand);
  color: var(--color-surface);
}

.btn--brand:hover {
  background-color: #0039CC;
}

.btn--outline {
  border-color: #D5D5DA;
  color: var(--color-ink);
}

.btn--outline:hover {
  background-color: #F5F5F7;
  border-color: var(--color-ink-soft);
}

/* Заметная рамка при переходе с клавиатуры (Tab) */
.btn:focus-visible,
.icon-link:focus-visible {
  outline: 2px solid var(--color-on-brand);
  outline-offset: 3px;
}

/* На светлом фоне белая обводка не видна — берём фирменный синий */
.btn--brand:focus-visible,
.btn--outline:focus-visible,
.icon-link--brand:focus-visible {
  outline-color: var(--color-brand);
}

/* --------------------------------------------
   Плашка с иконкой — «Срок от 7 до 10 дней».
   Это факт, а не действие, поэтому не кнопка.
   -------------------------------------------- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  height: var(--control-h);
  /* Слева отступ меньше — там квадратная иконка */
  padding-left: var(--space-2);
  padding-right: var(--space-6);
  border-radius: var(--radius-md);
  background-color: var(--color-surface);
  color: var(--color-ink);
  font-size: var(--fs-lg);
  font-weight: var(--fw-medium);
  white-space: nowrap;
}

/* Синий квадрат с иконкой внутри плашки */
.pill__icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: calc(var(--control-h) - var(--space-5));
  aspect-ratio: 1;
  border-radius: var(--radius-sm);
  background-color: var(--color-brand);
  color: var(--color-surface);
}

.pill__icon svg {
  width: 55%;
  height: auto;
}

/* --------------------------------------------
   Заголовок секции: иконка в квадрате + текст
   -------------------------------------------- */
.section-head {
  display: flex;
  align-items: center;
  gap: var(--space-5);
}

/* Файл из макета — 96×96, но сам квадрат внутри 70×70:
   запас по краям нужен свечению.
   Обёртка держит в потоке ровно 70px, а картинка выходит за неё
   абсолютным позиционированием. Через отрицательный margin не выйдет:
   он сдвигает элемент целиком, и свечение вылезает за край карточки. */
.section-head__icon {
  position: relative;
  flex-shrink: 0;
  width: 70px;
  height: 70px;
}

.section-head__icon img {
  position: absolute;
  top: -13px;
  left: -13px;
  /* max-width из base.css здесь помешал бы — картинка шире обёртки */
  max-width: none;
  width: 96px;
  height: 96px;
}

.section-head__title {
  font-size: clamp(1.75rem, 3.6vw, 3.4375rem); /* 28px → 55px */
  font-weight: var(--fw-bold);
  letter-spacing: -0.02em;
  line-height: 1.1;
}

/* --------------------------------------------
   Синяя плашка с иконкой — заголовок тарифа
   -------------------------------------------- */
.badge {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 60px;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm);
  background-color: var(--color-brand);
  color: var(--color-surface);
  font-size: clamp(0.9375rem, 1.45vw, 1.375rem); /* 15px → 22px */
  font-weight: var(--fw-semibold);
  line-height: 1.25;
}

/* Белый квадрат рисуем сами — в файле только сама иконка */
.badge__icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 30px;
  aspect-ratio: 1;
  border-radius: 7px;
  background-color: var(--color-surface);
}

/* Иконка, у которой квадрат-подложка уже внутри файла —
   обёртка не нужна, вставляется картинкой напрямую */
.badge__pic {
  flex-shrink: 0;
}

/* Белая плашка с тёмным текстом */
.badge--light {
  min-height: 42px;
  background-color: var(--color-surface);
  color: var(--color-ink);
}

/* Чёрная плашка со светлым текстом */
.badge--dark {
  min-height: 42px;
  background-color: #000000;
  color: var(--color-surface);
}

/* Обе ниже тарифных, поэтому текст мельче */
.badge--light,
.badge--dark {
  padding: var(--space-1) var(--space-3);
  font-size: clamp(0.9375rem, 1.15vw, 1.125rem); /* 15px → 18px */
}

/* --------------------------------------------
   Пункт нумерованного списка
   -------------------------------------------- */
.num-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.num-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 37px;
  padding: var(--space-1) var(--space-3);
  border-radius: 9px;
  background-color: #F1F1F4;
  font-size: clamp(0.875rem, 1.25vw, 1.1875rem); /* 14px → 19px */
}

/* Градиентный квадрат с цифрой — целиком из файла макета */
.num-item__num {
  flex-shrink: 0;
  width: 23px;
  height: 23px;
}

/* --------------------------------------------
   Круглая стрелка в углу карточки
   -------------------------------------------- */
.arrow-circle {
  flex-shrink: 0;
  width: 27px;
  height: 27px;
}

/* --------------------------------------------
   Квадратная иконка-ссылка (соцсети в шапке)
   -------------------------------------------- */
.icon-link {
  display: grid;
  place-items: center;
  width: var(--icon-btn-size);
  aspect-ratio: 1;
  border-radius: var(--radius-sm);
  background-color: var(--color-ink);
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.icon-link:hover {
  opacity: 0.8;
  transform: translateY(-2px);
}

.icon-link img {
  width: 55%;
  height: auto;
}

/* Синий квадрат вместо чёрного — для светлого фона футера */
.icon-link--brand {
  width: 34px;
  border-radius: 8px;
  background-color: var(--color-brand);
}