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

/* --------------------------------------------
   Кнопка
   .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);
}

/* --- Кнопки-призывы (hero и футер) ---
   Только цвет, тень и вес. Размер задаёт контекст: базовый .btn = 65px,
   в футере переопределяется на 55px через .footer__actions .btn. */
.btn--primary {
  background-color: var(--color-brand);
  color: #FFFFFF;
  font-weight: var(--fw-semibold);
  /* Мягкая синяя тень — кнопка «приподнимается» над светлым фоном */
  box-shadow: 0 8px 20px rgba(0, 73, 255, 0.30);
}

.btn--primary:hover {
  background-color: #0039CC;
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(0, 73, 255, 0.40);
}

.btn--whatsapp {
  background-color: var(--color-whatsapp);
  color: #FFFFFF;
  font-weight: var(--fw-semibold);
  box-shadow: 0 8px 20px rgba(37, 211, 102, 0.30);
}

.btn--whatsapp:hover {
  background-color: var(--color-whatsapp-hover);
  transform: translateY(-2px);
}

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

/* --------------------------------------------
   Плашка с иконкой — «Срок от 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);
}

/* Фирменные цвета соцсетей в шапке (глифы внутри белые) */
.icon-link--whatsapp {
  background-color: var(--color-whatsapp);
}

/* Фирменный градиент Instagram — как в иконке приложения */
.icon-link--instagram {
  background-image: linear-gradient(45deg,
    #FEDA75 0%, #FA7E1E 25%, #D62976 50%, #962FBF 75%, #4F5BD5 100%);
}