/* ─────────────────────────────────────────────────────────────
   Подвал: «Обратная связь» + контакты + колонки ссылок,
   справа — карточка формы «Запись на прием».
   Итоговая высота секции при 1440px — 720px.
   ───────────────────────────────────────────────────────────── */
.footer {
  padding-top: 53px;    /* верх «Обратная связь» → y = 56 */
  padding-bottom: 99px; /* низ последней ссылки (621) + 99 = 720 */
  background: var(--white);
}

/* Две половины: контент 747px + форма 459px.
   1296 (контейнер) − 20 (правый отступ формы) − 70 (зазор) − 459 = 747 */
.footer__inner {
  display: flex;
  align-items: flex-start;
  gap: 70px;
}

.footer__main {
  flex: 1 1 auto;
  min-width: 0;
}

.footer__aside {
  flex: 0 0 459px;
  margin-right: 20px; /* форма не доходит до правого края контейнера */
  margin-top: 55px;   /* заголовок «Запись на прием» → y = 108 */
}

/* ── Надзаголовок «Обратная связь» ─────────────────────────── */
.footer__eyebrow {
  display: flex;
  align-items: center;
  gap: 13px;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 15px;
  font-weight: 500;
  color: var(--muted);
}

.footer__eyebrow-ico {
  flex: none;
  width: 20px;
  height: 20px;
  color: var(--brand);
}

/* ── Заголовок и вводный абзац ─────────────────────────────── */
.footer__title {
  margin-top: 4px;      /* → y = 77 */
  max-width: 560px;     /* перенос «…получите / консультацию» */
  font-family: var(--font-body);
  font-size: 28px;
  line-height: 33.6px;
  font-weight: 700;
  color: var(--ink);
}

.footer__lead {
  margin-top: 29px;     /* → y = 173, три строки по 27px */
  max-width: 747px;
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 27px;
  font-weight: 400;
  color: var(--muted);
}

/* ── Контакты: три колонки по 249px ────────────────────────── */
.footer__contacts {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 747 / 3 = 249 */
  margin-top: 61px;                      /* заголовки → y = 315 */
}

.contact__label {
  display: flex;
  align-items: center;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 21.9px;
  font-weight: 400;
  color: var(--muted);
}

.contact__ico {
  flex: none;
  width: 18px;
  height: 18px;
  margin-right: 10px; /* текст подписи → x = 100 / 349 / 598 */
  color: var(--brand);
}

.contact__value {
  margin-top: 15px;   /* → y = 352 */
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 21.9px;
  font-weight: 400;
  color: var(--ink);
}

.contact__value a { transition: color 0.2s; }
.contact__value a:hover { color: var(--brand); }

/* ── Колонки ссылок под тонким разделителем ────────────────── */
.footer__columns {
  display: grid;
  /* Точные ширины колонок из эталона: 183 + 220 + 172 + 172 = 747 */
  grid-template-columns: 183fr 220fr 172fr 172fr;
  margin-top: 54px;                    /* линия разделителя → y = 428 */
  padding-top: 48px;                   /* заголовки колонок → y = 477 */
  border-top: 1px solid var(--line);
}

.fcol__title {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 18px;
  font-weight: 700;
  color: var(--ink);
}

.fcol__list {
  margin-top: 8px;    /* первый пункт → y = 503 */
  display: flex;
  flex-direction: column;
  gap: 10px;          /* шаг пунктов 22 + 10 = 32px */
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 21.9px;
  font-weight: 400;
  color: var(--ink);
}

/* График работы идёт чуть плотнее: шаг 30px */
.fcol__list--tight { gap: 8px; }

.fcol__list a { transition: color 0.2s; }
.fcol__list a:hover { color: var(--brand); }

.fcol__day { color: var(--ink); }
.fcol__time { color: var(--muted); }

/* ── Правая половина: заголовок и абзац над формой ─────────── */
.footer__aside-title {
  font-family: var(--font-body);
  font-size: 28px;
  line-height: 33.6px;
  font-weight: 700;
  color: var(--ink);
}

.footer__aside-lead {
  margin-top: 28px;   /* → y = 170 */
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 27px;
  font-weight: 400;
  color: var(--muted);
}

/* ── Карточка формы записи (459 × 353) ─────────────────────── */
/* Форму рисует Битрикс — со своей карточкой, тенью и полями.
   Наш блок только держит высоту, пока она грузится, иначе подвал
   дёргается в момент появления формы. Своей карточки здесь больше нет:
   иначе получалась карточка внутри карточки. */
.booking { min-height: 340px; }
.booking__fallback {
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 24px;
  color: var(--muted);
}
.booking__fallback a { color: var(--brand-deep); font-weight: 600; }

.booking { margin-top: 9px; }

.booking__field { position: relative; }
.booking__field + .booking__field { margin-top: 15px; }

.booking__input {
  display: block;
  width: 100%;
  height: 52px;
  padding: 0 13px;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 22px;
  font-weight: 400;
  color: var(--ink);
  /* Значения полей ввода взяты из эталона напрямую — токенов для них нет */
  background: rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.09);
  border-radius: 4px;
  outline: none;
  transition: border-color 0.2s, background 0.2s;
}
.booking__input:focus { border-color: var(--brand); }

/* Подпись лежит поверх поля и «всплывает», когда поле заполнено */
.booking__label {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 17px;
  font-weight: 500;
  color: var(--muted);
  pointer-events: none;
  transition: top 0.15s, font-size 0.15s, transform 0.15s;
}

.booking__field.is-filled .booking__label {
  top: 8px;          /* → y = 436 у поля «Телефон» */
  transform: none;
  font-size: 13px;
}
.booking__field.is-filled .booking__input { padding-top: 22px; }

/* Кнопка отправки */
.booking__btn {
  display: block;
  width: 100%;
  height: 60px;
  margin-top: 20px;   /* → y = 500 */
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 22px;
  font-weight: 500;
  color: var(--ink);
  text-align: center;
  background: var(--line);           /* rgb(230,236,242) */
  border-radius: var(--radius-pill); /* 48px */
  box-shadow: -1px -1px 1px 0 rgba(0, 0, 0, 0.09);
  transition: background 0.2s;
}
.booking__btn:hover { background: #dbe3ec; } /* чуть темнее --line */

/* Нижняя строка карточки: ссылка + знак вопроса */
.booking__legal {
  display: flex;
  align-items: center;
  gap: 5px;
  height: 20px;
  margin-top: 23px;   /* → y = 583 */
}

.booking__abuse {
  /* Шрифт системной b24-формы, в токенах его нет */
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 12px;
  line-height: normal;
  font-weight: 400;
  color: #000;
  text-decoration: underline;
}

.booking__help {
  flex: none;
  width: 20px;
  height: 20px;
  color: #a8adb8; /* серый значок справки из эталона */
}
.booking__help svg { width: 100%; height: 100%; }

/* ── Планшет ───────────────────────────────────────────────── */
@media (max-width: 1199px) {
  .footer {
    padding-top: 48px;
    padding-bottom: 64px;
  }

  .footer__inner {
    flex-direction: column;
    gap: 48px;
  }

  .footer__aside {
    flex: 1 1 auto;
    width: 100%;
    max-width: 560px;
    margin-right: 0;
    margin-top: 0;
  }

  .footer__title,
  .footer__lead { max-width: none; }

  .footer__contacts { margin-top: 44px; }

  .footer__columns {
    grid-template-columns: repeat(2, 1fr);
    gap: 36px 32px;
    margin-top: 40px;
    padding-top: 36px;
  }
}

/* ── Телефон ───────────────────────────────────────────────── */
@media (max-width: 767px) {
  /* 16px — порог, ниже которого iOS увеличивает страницу при касании поля */
  .booking__input { font-size: 16px; }
  .footer {
    padding-top: 40px;
    padding-bottom: 48px;
  }

  .footer__title,
  .footer__aside-title {
    font-size: 24px;
    line-height: 30px;
  }

  .footer__lead,
  .footer__aside-lead {
    font-size: 16px;
    line-height: 25px;
  }

  .footer__contacts {
    grid-template-columns: 1fr;
    gap: 24px;
    margin-top: 32px;
  }

  .footer__columns {
    grid-template-columns: 1fr;
    gap: 28px;
    margin-top: 32px;
    padding-top: 28px;
  }

  .booking { padding: 24px 20px 10px; }
}