/* --- Контейнер с каруселью и плиткой "Проверить адрес" --- */
.tariffs-container {
  display: flex;
  justify-content: center;
  /* горизонтальное центрирование */
  gap: 30px;
  /* отступ между блоками */
  flex-wrap: nowrap;
  /* всё в одну строку */
  max-width: 1280px;
  align-items: flex-end !important;
  /* ⬅️ выравнивание по нижнему краю */
  position: relative;
}

/* НЕ задаём общую min-height на .carousel/.address-card,
   вместо этого запрещаем растягивание карточек внутри карусели. */

/* Отключаем растяжение карточек по вертикали в track'е */
.carousel-track {
  /* display: flex; уже есть — но явно указываем выравнивание */
  align-items: flex-start;
  /* важное правило — карточки не будут stretch */
}

/* На всякий случай: запретим отдельной карточке растягиваться */
.carousel-track .tariff-card {
  align-self: flex-start;
  /* гарантия, что карточка высотой по содержимому */
}

/* --- Стили карусели --- */
.carousel {
  /* Позиционирование для дочерних кнопок */
  position: relative;
  /* Фиксированная ширина для десктопной версии */
  width: 930px;
}

/* Обертка для скрытия выходящих за пределы элементов */
.carousel-wrapper {
  overflow: hidden;
  background-color: #fff;
  /* Убирает визуальные артефакты между плитками */
}

/* Контейнер, который будет прокручиваться */
.carousel-track {
  display: flex;
  /* Плавный переход для анимации прокрутки */
  transition: transform 0.3s ease-in-out;
}

/* Стили для карточки тарифа внутри карусели */
.carousel-track .tariff-card {
  /* Предотвращает сжатие карточек */
  flex-shrink: 0;

  /* Отступ справа от карточки */
  margin-right: 10px;
}

/* Стили для кнопок навигации карусели */
.carousel-btn {
  /* Абсолютное позиционирование относительно .carousel */
  position: absolute;
  /* Расположение по центру по вертикали */
  top: 50%;
  /* Коррекция вертикального центрирования */
  transform: translateY(-50%);
  /* Полупрозрачный белый фон */
  background-color: rgba(255, 255, 255, 0.9);
  /* Рамка */
  border: 1px solid #ddd;
  /* Круглая форма */
  border-radius: 50%;
  /* Ширина кнопки */
  width: 40px;
  /* Высота кнопки */
  height: 40px;
  /* Указатель в виде руки при наведении */
  cursor: pointer;
  /* Отображение поверх других элементов */
  z-index: 10;
  /* Размер шрифта (для стрелок) */
  font-size: 24px;
  /* Цвет стрелок */
  color: #333;
  /* Легкая тень для объема */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  /* Плавный переход для прозрачности */
  transition: opacity 0.3s ease;
}

/* Стиль кнопки при наведении */
.carousel-btn:hover {
  background-color: #fff;
}

/* Позиционирование кнопки "назад" */
.carousel-btn--prev {
  left: -15px;
}

/* Позиционирование кнопки "вперед" */
.carousel-btn--next {
  right: -15px;
}

/* Стиль для скрытых кнопок */
.carousel-btn.hidden {
  /* Полная прозрачность */
  opacity: 0;
  /* Отключение событий мыши */
  pointer-events: none;
}

/* --- Общие стили карточек тарифов --- */
.tariff-card {
  background-color: #ffffff;
  /* Скругление углов */
  border-radius: 16px;
  /* Тень для объема */
  box-shadow: none;
  /* Скрывает все, что выходит за пределы скругленных углов */
  overflow: hidden;
  /* Flex-контейнер для вертикального расположения дочерних элементов */
  display: flex;
  flex-direction: column;
  /* Необходимо для позиционирования псевдо-элементов и дочерних .tariff-badge */
  position: relative;
  border: 2px solid #e0e0e0;
  box-sizing: border-box;
}

/* Стиль для плашки "Акция" */
.tariff-badge {
  /* Абсолютное позиционирование */
  position: absolute;
  /* Отступ сверху */
  top: -1px;
  /* Отступ справа */
  right: 20px;
  /* Цвет фона */
  background-color: #e53935;
  /* Цвет текста */
  color: white;
  /* Внутренние отступы */
  padding: 8px 12px;
  /* Размер шрифта */
  font-size: 14px;
  /* Насыщенность шрифта */
  font-weight: bold;
  /* Скругление нижних углов */
  border-radius: 0 0 6px 6px;
  /* Отображение поверх шапки карточки */
  z-index: 2;
  /* Плавные переходы для анимации */
  transition: left 0.4s ease-in-out, transform 0.4s ease-in-out,
    opacity 0.3s ease;
}

/* Шапка карточки */
.tariff-header {
  background-color: #1f68a7;
  color: white;
  text-align: left;
  position: relative;
  z-index: 1;
  cursor: pointer;
  display: flex;
}

/* --- Стили для иконки кликабельности в шапке --- */
.clickable-icon-container {
  position: absolute;
  right: 30px;
  top: 58%;
  /* Скорректировано для центрирования по числу */
  transform: translateY(-50%);
  height: 52px;
  /* Соответствует font-size у .tariff-number */
  opacity: 0.7;
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
  /* Иконка не должна мешать клику по шапке */
}

.tariff-header:hover .clickable-icon-container {
  opacity: 1;
  transform: translateY(-50%) scale(1.05);
  /* Легкое увеличение при наведении */
}

.clickable-icon-container svg {
  height: 100%;
  width: auto;
}

/* Скрываем иконку в раскрытой карточке */
.tariff-card.expanded .clickable-icon-container {
  display: none;
}

.header-column {
  padding: 24px 30px;
  box-sizing: border-box;
  width: 267px;
  flex-shrink: 0;
  position: relative;
}

/* Заголовок "Тариф" в шапке */
.tariff-title {
  /* Размер шрифта */
  font-size: 16px;
  /* Легкая прозрачность */
  opacity: 0.8;
  /* Отступ снизу */
  margin-bottom: 4px;
}

/* Номер тарифа (например, "100") */
.tariff-number {
  /* Размер шрифта */
  font-size: 52px;
  /* Насыщенность шрифта */
  font-weight: 700;
  /* Высота строки для компактности */
  line-height: 1.1;
}

/* Тело карточки (основное содержимое) */
.tariff-body {
  /* Растягивается на всю доступную высоту */
  flex-grow: 1;
  /* Flex-контейнер для дочерних колонок */
  display: flex;
  /* Выравнивание текста по левому краю */
  text-align: left;
}

/* Колонка внутри тела карточки */
.tariff-column {
  /* Внутренние отступы */
  padding: 24px 15px;
  /* Учитывает padding в общей ширине */
  box-sizing: border-box;
  /* Предотвращает сжатие */
  flex-shrink: 0;
  /* Фиксированная ширина, равная ширине карточки */
  width: 267px;
  /* Flex-контейнер для вертикального расположения и распределения контента */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* Список характеристик тарифа (скорость, цена) */
.tariff-features {
  /* Убирает маркеры списка */
  list-style: none;
  /* Убирает внутренние отступы */
  padding: 0;
  /* Убирает отступ снизу и устанавливает отступ сверху */
  margin: 0 0 24px 0;
}

/* Элемент списка характеристик */
.feature-item {
  /* Flex для выравнивания иконки и текста */
  display: flex;
  align-items: center;
  /* Размер шрифта */
  font-size: 18px;
  /* Цвет текста */
  color: #333;
  /* Отступ снизу */
  margin-bottom: 16px;
}

/* Иконка характеристики */
.feature-item svg {
  /* Ширина */
  width: 24px;
  /* Высота */
  height: 24px;
  /* Отступ справа */
  margin-right: 12px;
  /* Предотвращает сжатие */
  flex-shrink: 0;
}

/* Значение цены */
.feature-item .price-value {
  font-weight: bold;
}

/* Текст "Р/месяц" */
.feature-item .price-period {
  font-size: 16px;
  color: #333;
  margin-left: 4px;
  font-weight: bold;
}

/* --- Выравнивание иконки и текста в .feature-item --- */
.feature-item {
  display: flex;
  align-items: center;
  /* выравнивает svg и текст по вертикали */
  gap: 6px;
  /* расстояние между иконкой и текстом */
}

.feature-item svg {
  flex-shrink: 0;
  /* иконка не сжимается */
  width: 20px;
  height: 20px;
  vertical-align: middle;
}

.feature-item span {
  display: inline-block;
  line-height: 1;
  /* убирает лишние отступы */
  vertical-align: middle;
}

.tariff-button {
  display: inline-block;
  padding: 12px 20px;
  background-color: #1f68a7;
  color: #fff;
  border: 2px solid #1f68a7;
  border-radius: 8px;
  font-size: 16px;
  font-weight: bold;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease;
  box-sizing: border-box;
  text-align: center;
  align-self: center;
  width: 200px;
}

#application-form .tariff-button {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* Стиль кнопки при наведении */
.tariff-button:hover {
  background-color: #286090;
  border-color: #286090;
}

/* --- Стили для расширенного вида карточки --- */
/* Скрытый контент (колонки с опциями) */
.expanded-content {
  /* Изначально скрыт */
  display: none;
  /* Разделительная линия слева */
  border-left: 1px solid #e0e0e0;
}

/* Убираем разделительные линии в шапке */
.tariff-header .expanded-content {
  border-left: none;
}

/* Тело карточки в раскрытом состоянии */
.tariff-card.expanded .tariff-body {
  /* Выравнивание колонок по левому краю */
  justify-content: flex-start;
  /* Выравнивание содержимого колонок по верху */
  align-items: flex-start;
}

/* Отображение скрытого контента в раскрытой карточке */
.tariff-card.expanded .expanded-content {
  /* Отображается как flex-контейнер */
  display: flex;
  /* Растягивается на доступное пространство */
  flex-grow: 1;
  /* Выравнивание по верху */
  align-items: flex-start;
  justify-content: flex-start;
  /* Цвет текста */
  color: #333;
  padding: 12px 15px 24px !important;
}

/* Уменьшение верхнего отступа у колонок в раскрытом виде */
.tariff-card.expanded .expanded-content,
.tariff-card.expanded .subscription-column {
  padding-top: 12px;
}

/* Убирает верхний отступ у заголовков внутри раскрытых колонок */
.tariff-card.expanded .expanded-content h2,
.tariff-card.expanded .expanded-content h3 {
  margin-top: 0;
}

/* Выравнивание основной колонки в раскрытом виде */
.tariff-card.expanded .subscription-column {
  justify-content: flex-start;
}

/* Основные стили для раскрытой карточки (анимация) */
.tariff-card.expanded {
  /* Абсолютное позиционирование для "отрыва" от потока */
  position: absolute;
  /* Отображение поверх всех остальных элементов */
  z-index: 100;
  /* Плавные переходы для анимации размера и положения */
  transition: width 0.4s ease-in-out, height 0.4s ease-in-out,
    top 0.4s ease-in-out, left 0.4s ease-in-out;
}

/* "Заполнитель" на месте карточки, когда она раскрывается */
.placeholder {
  flex-shrink: 0;
}

/* --- Стили для выбора абонемента --- */
.subscription-options {
  /* Убирает маркеры списка */
  list-style: none;
  /* Убирает отступы */
  padding: 0;
  margin: 0;
  /* На всю ширину родителя */
  width: 100%;
}

/* Заголовок в блоке опций */
.subscription-options h3 {
  font-size: 18px;
  color: #1a237e;
  margin-top: 0;
  margin-bottom: 16px;
}

/* Элемент списка опций */
.subscription-options li {
  margin-bottom: 12px;
  list-style-type: none;
}

/* Метка (label) для радио-кнопки или чекбокса */
.subscription-options label {
  display: flex;
  align-items: center;
  cursor: pointer;
  font-size: 16px;
  width: 100%;
  /* Распределяет контент по краям */
  justify-content: space-between;
}

/* Скрываем стандартные радио-кнопки и чекбоксы */
.subscription-options input[type="radio"],
.subscription-options input[type="checkbox"] {
  display: none;
}

/* Кастомный вид для радио-кнопки (псевдо-элемент) */
.subscription-options label::before {
  content: "";
  width: 18px;
  height: 18px;
  border: 2px solid #ccc;
  margin-right: 12px;
  transition: border-color 0.2s ease;
  flex-shrink: 0;
  box-sizing: border-box;
  /* Круглая форма для радио-кнопки */
  border-radius: 50%;
}

/* Делаем кастомный чекбокс квадратным */
.subscription-options input[type="checkbox"] + label::before {
  border-radius: 4px;
}

/* Стиль для выбранной радио-кнопки или чекбокса */
.subscription-options input[type="radio"]:checked + label::before,
.subscription-options input[type="checkbox"]:checked + label::before {
  border-color: #0d47a1;
  background-color: #0d47a1;
  /* "Точка" внутри с помощью тени */
  box-shadow: inset 0 0 0 3px #fff;
}

/* --- Стили для карточки проверки адреса --- */
.address-card {
  background-color: #ffffff;
  border-radius: 16px;
  box-shadow: none;
  width: 290px;
  padding: 24px 15px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  border: 2px solid #e0e0e0;
}

.address-card h2 {
  color: #1f68a7;
  margin-top: 0;
  margin-bottom: 16px;
  text-align: center;
}

/* Текст-подсказка в карточке адреса */
.address-card p {
  text-align: left;
  margin-top: 0;
  margin-bottom: 8px;
  color: #757575;
  font-size: 14px;
}

/* Поле ввода адреса */
.address-card input {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 8px;
  font-size: 16px;
  box-sizing: border-box;
}

/* Контейнер для вывода результата проверки адреса */
#data2 {
  margin-top: 15px;
  text-align: left;
  font-size: 14px;
}

/* --- Стили для модального окна --- */
/* Полупрозрачный фон (оверлей) */
.modal-overlay {
  position: fixed;
  /* Фиксированное положение на весь экран */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 20, 60, 0.7);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  /* Выравниваем по верху */
  /* ЗАМЕНА: vh на px для стабильности */
  padding-top: 80px;
  /* ДОБАВЛЕНО: для корректного скролла контента */
  overflow-y: auto;
  z-index: 1000;
  /* Изначально скрыто */
  opacity: 0;
  visibility: hidden;
  /* Плавный переход для появления */
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* Активное состояние оверлея */
.modal-overlay.active {
  opacity: 1;
  visibility: visible;
}

/* Само модальное окно */
.modal-window {
  background-color: #fff;
  padding: 30px;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  width: 100%;
  max-width: 450px;
  position: relative;
  /* Начальное положение для анимации "выдвижения" */
  transform: translateY(-20px);
  /* ИЗМЕНЕНИЕ: Добавляем задержку в 50мс */
  transition: transform 0.3s ease 50ms;
}

/* Конечное положение окна при появлении */
.modal-overlay.active .modal-window {
  transform: translateY(0);
}

/* Кнопка закрытия модального окна */
.modal-close-btn {
  position: absolute;
  top: 15px;
  right: 15px;
  font-size: 28px;
  line-height: 1;
  color: #aaa;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

/* Заголовок в модальном окне */
.modal-header h2 {
  margin: 0 0 20px 0;
  color: #1f68a7;
  font-size: 24px;
}

/* Группа элементов формы (метка + поле ввода) */
.form-group {
  margin-bottom: 20px;
}

/* Метка поля ввода */
.form-group label {
  display: block;
  margin-bottom: 8px;
  color: #333;
  font-weight: 500;
}

/* Поле ввода в форме */
.form-group input {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 8px;
  font-size: 16px;
  box-sizing: border-box;
}

/* Блок с деталями выбранного тарифа в модальном окне */
.modal-tariff-details {
  background-color: #f4f7f9;
  padding: 15px;
  border-radius: 8px;
  margin-bottom: 25px;
  text-align: center;
  font-size: 16px;
  color: #333;
}

/* Убирает отступы у параграфа внутри блока деталей */
.modal-tariff-details p {
  margin: 0;
}

/* Стиль плашки "Акция" на раскрытой карточке */
.tariff-card.expanded .tariff-badge {
  /* Промежуточное положение для старта анимации сдвига.
        Значение ~200px = 290px (ширина карточки) - ширина бейджа - отступ. */
  left: 181px;
  right: auto;
}

/* Конечное положение плашки "Акция" после анимации */
.tariff-card.expanded.content-visible .tariff-badge {
  /* Позиционирование по левому краю контента второй колонки (290px ширина + 30px отступ) */
  left: 280px;
  right: auto;
  transform: none;
}

.close-column {
  position: relative;
}

.close-card-btn {
  display: none;
  /* Скрываем кнопку по умолчанию */
  position: absolute;
  top: 35%;
  right: 30px;
  transform: translateY(-50%);
  font-size: 40px;
  line-height: 1;
  color: white;
  opacity: 0.8;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: opacity 0.2s ease;
  z-index: 5;
  /* На случай перекрытия другими элементами */
}

.close-card-btn:hover {
  opacity: 1;
}

/* Отображаем кнопку, ТОЛЬКО когда карточка раскрыта */
.tariff-card.expanded .close-card-btn {
  display: block;
}

/* --- Стили для акционной опции в шапке раскрытой карточки --- */
.header-promo-option {
  width: 100%;
  display: flex;
  align-items: center;
  color: white;
  cursor: pointer;
  font-size: 16px;
  justify-content: flex-start;
  margin-top: 50px;
}

/* Показываем акционную опцию в шапке при раскрытии */
.tariff-card.expanded .header-promo-option {
  display: flex;
}

/* Кастомная радио-кнопка для акции в шапке */
.header-promo-option .radio-lookalike {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.7);
  /* Полупрозрачная рамка */
  margin-right: 12px;
  transition: all 0.2s ease;
  flex-shrink: 0;
  /* Чтобы кружок не сжимался */
}

/* Стиль для выбранной акционной опции */
.header-promo-option.selected .radio-lookalike {
  border-color: #fff;
  background-color: #fff;
  box-shadow: inset 0 0 0 3px #0d47a1;
  /* "Точка" внутри */
}

/* Цена в акционной опции */
.header-promo-option .promo-price {
  margin-left: auto;
  /* Прижимает к правому краю */
  font-weight: bold;
  opacity: 0.9;
  padding-left: 16px;
}

/* --- Стили для трехколоночного текста опций --- */
/* Левая часть текста (напр., "1 мес.") */
.option-text-left {
  flex-shrink: 0;
  padding-right: 10px;
}

/* Центральная часть текста (напр., "1800 Р") */
.option-text-center {
  flex-grow: 1;
  text-align: center;
}

/* Центральная часть текста в акционной опции в шапке */
.header-promo-option .option-text-center {
  color: white;
  opacity: 0.8;
}

/* Правая часть текста (напр., "600 Р/мес.") */
.option-text-right {
  flex-shrink: 0;
  font-weight: bold;
  padding-left: 10px;
}

/* Анимация появления контента в раскрытой карточке */
.tariff-card.expanded .expanded-content,
.tariff-card.expanded .header-promo-option {
  opacity: 0;
  /* Начальная прозрачность */
  transform: translateX(15px);
  /* Начальное положение (сдвинуто вправо) */
  transition: opacity 0.3s ease-out, transform 0.3s ease-out;
}

/* Конечное состояние контента после анимации */
.tariff-card.expanded.content-visible .expanded-content,
.tariff-card.expanded.content-visible .header-promo-option {
  opacity: 1;
  transform: translateX(0);
}

/* --- Стили для блока с ценой --- */
/* Контейнер цены (иконка + текст) */
.feature-item.price-container {
  /* Выравнивание по верху для многострочного текста */
  align-items: flex-start;
}

/* Блок с ежемесячной ценой */
.monthly-price {
  margin-right: 8px;
}

/* Блок с единоразовым платежом */
.one-time-payment {
  font-weight: bold;
  color: #333;
  font-size: 16px;
}

/* Обертка для строк с ценами (ежемесячная + единоразовая) */
.price-details-wrapper {
  display: flex;
  align-items: baseline;
  /* Выравнивание по базовой линии текста */
}

/* --- Стили для итогового блока в модальном окне --- */
/* Список выбранных опций */
.modal-tariff-details ul {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: left;
}

/* Элемент списка */
.modal-tariff-details li {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
  font-size: 16px;
}

/* Блок "Итого к оплате" */
.modal-summary {
  margin-top: 15px;
  padding-top: 15px;
  border-top: 1px solid #e0e0e0;
}

/* Заголовок "Итого к оплате" */
.modal-summary h4 {
  margin: 0 0 12px 0;
  color: #333;
  text-align: left;
  font-size: 18px;
}

/* Строка в итоговом блоке (напр., "Ежемесячно: ...") */
.modal-summary .summary-line {
  display: flex;
  justify-content: space-between;
  font-size: 16px;
  margin: 8px 0;
}

/* Заголовок "Вы выбрали" */
.modal-tariff-details > h4 {
  margin-top: 0;
  margin-bottom: 12px;
}

@media (min-width: 961px) {
  /* Применяем 100% ширину для колонки только в свернутой карточке,
        чтобы кнопка "Подключить" была по центру */
  .tariff-card:not(.expanded) .tariff-column {
    width: 100%;
  }
}

/* Центрируем оверлей по вертикали, когда в нем есть сообщение */
.modal-overlay:has(.result-message) {
  align-items: center;
  padding-top: 0;
}

/* Увеличиваем ширину самого окна */
.modal-window:has(.result-message) {
  max-width: 600px;
}

/* --- Стили для поля ввода с кнопкой очистки --- */
.input-with-clear {
  position: relative;
}

#address-input {
  padding-right: 35px;
  /* Место для крестика */
}

.clear-input-btn {
  position: absolute;
  top: 50%;
  right: 1px;
  transform: translateY(-50%);
  width: 38px;
  height: 38px;
  border: none;
  background: transparent;
  font-size: 24px;
  line-height: 1;
  color: #888;
  cursor: pointer;
  transition: color 0.2s ease;
}

.clear-input-btn:hover {
  color: #333;
}

/* --- Стили для результатов проверки адреса --- */
#data2 h3 {
  margin-top: 15px;
  margin-bottom: 10px;
  font-size: 16px;
  font-weight: normal;
  color: #333;
}

.service-links-container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.service-link-btn {
  display: inline-block;
  padding: 8px 16px;
  background-color: #337ab7;
  color: #fff;
  border-radius: 8px;
  font-size: 14px;
  font-weight: bold;
  text-decoration: none;
  transition: background-color 0.2s ease;
  border: 2px solid #337ab7;
}

.service-link-btn:hover {
  background-color: #286090;
  border-color: #286090;
  color: #fff;
}

/* --- Фикс для отображения подсказок DaData поверх всех элементов --- */
.suggestions-wrapper {
  z-index: 9999 !important;
}

/* --- Курсор "рука" при наведении на плашку "Акция" --- */
.tariff-badge {
  cursor: pointer;
}

.tariff-column.expanded-content.services-column {
  margin-right: -10px !important; /* убираем избыточный правый отступ, если он есть */
  margin-left: 0px !important; /* сдвигаем левее — подбери точное значение по вкусу */
}

@media (min-width: 961px) {
  /* --- Стили для 2-колоночного макета на десктопе --- */

  .tariffs-container {
    gap: 0;
    justify-content: space-between;
    /* ВАЖНО: выравниваем по верхнему краю вместо центрирования */
    align-items: flex-start;
    max-height: 350px;
  }

  /* Колонка 1 (Карусель): гибкая, занимает все оставшееся место */
  .carousel {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    /* Убираем жёсткую фиксированную высоту —
       пусть высота подстраивается под содержимое */
    height: auto;
    /* если нужно чтобы карусель была не меньше, можно задать min-height */
    /* min-height: 320px; */
  }

  /* Внутренние элементы карусели растягиваются на всю высоту родителя */
  .carousel-wrapper,
  .carousel-track,
  .tariff-card {
    height: 100%;
  }

  /* Колонка 2 (Проверка адреса): фиксированная ширина */
  .address-card {
    width: 290px;
    flex-shrink: 0;
    /* Запрещаем этой колонке сжиматься */
    margin-left: 10px;
    height: 320px;
    /* Фиксированная высота */
  }

  #tariff-component-wrapper .address-card {
    margin-bottom: 44px;
    /* подгон вниз, можно варьировать от -5 до -15 */
  }
  /* фиксируем высоту карточек в карусели */
  .carousel-track .tariff-card {
    height: 320px !important;
    /* базовая высота */
    box-sizing: border-box;
    overflow: hidden;
  }

  /* если карточка раскрыта — высота управляется скриптом */
  .carousel-track .tariff-card.expanded {
    height: auto !important;
  }

  /* --- Сдвигаем цену (option-text-right) чуть левее, чтобы не упиралась в край --- */
  .option-text-right {
    padding-right: 12px; /* отступ от правой границы */
    box-sizing: border-box;
  }
}

/* --- Адаптация для мобильных устройств (ширина экрана до 960px) --- */
@media (max-width: 960px) {
  body,
  html {
    overflow-x: hidden;
  }

  /* Контейнер тарифов теперь вертикальный блочный элемент */
  .tariffs-container {
    display: block;
    width: 100%;
    box-sizing: border-box;
  }

  /* Карусель идет первой */
  .carousel {
    order: 1;
    padding: 0;
    margin-bottom: 20px;
    /* ВОЗВРАЩАЕМ к нормальным значениям, без отступов */
    margin-left: 0;
    margin-right: 0;
    overflow: visible;
  }

  #tariff-component-wrapper {
    overflow-x: hidden;
  }

  .carousel-wrapper {
    /* Можно убрать overflow отсюда, так как он теперь на .carousel */
    overflow: visible;
  }

  /* Карточка адреса идет второй */
  .address-card {
    order: 2;
    border-radius: 16px;
    box-shadow: 0 10px 25px rgba(0, 30, 84, 0.1);
    padding: 24px;
    margin-bottom: 30px;
  }

  /* Компоненты растягиваются на всю ширину */
  .carousel,
  .address-card {
    width: 100%;
    box-sizing: border-box;
  }

  /* Карточка тарифа в карусели */
  .carousel-track .tariff-card {
    /* ВОЗВРАЩАЕМ ширину к 100% */
    width: 98.5%;
    /* Отступ нужен только для разделения, если карточек несколько */
    margin-right: 15px;
    flex-shrink: 0;
    border-radius: 16px;
  }

  /* Уменьшение боковых отступов внутри карточки тарифа */
  .tariff-header,
  .tariff-column {
    padding-left: 15px;
    padding-right: 15px;
    width: 100%;
  }

  /* Позиционирование кнопок карусели */
  .carousel-btn {
    top: 125px;
    transform: translateY(-50%);
    background-color: rgba(255, 255, 255, 0.8);
    z-index: 20;
  }

  .carousel-btn--prev {
    left: 0;
  }

  .carousel-btn--next {
    right: 0;
  }

  /* Анимация раскрытия на мобильных */
  .tariff-card.expanded {
    position: static;
    box-shadow: 0 10px 25px rgba(0, 30, 84, 0.15);
    transition: height 0.4s ease-in-out;
  }

  /* Тело карточки становится вертикальным */
  .tariff-card.expanded .tariff-body {
    flex-direction: column;
  }

  /* Разделитель теперь сверху, а не слева */
  .tariff-card.expanded .expanded-content {
    border-left: none;
    border-top: 1px solid #e0e0e0;
  }

  /* Плавное появление контента на мобильных */
  .tariff-card.expanded .expanded-content,
  .tariff-card.expanded .header-promo-option {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.3s ease-out 0.1s, transform 0.3s ease-out 0.1s;
  }

  .tariff-card.expanded.content-visible .expanded-content,
  .tariff-card.expanded.content-visible .header-promo-option {
    opacity: 1;
    transform: translateY(0);
  }

  /* Центрирование кнопки "Подключить" */
  .tariff-button {
    display: block;
  }

  /* --- Стили для акции в списке тарифов на мобильных --- */
  .promo-list-item {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: 16px;
    width: 100%;
    justify-content: space-between;
    padding-bottom: 12px;
    margin-bottom: 12px;
    border-bottom: 1px solid #e0e0e0;
  }

  /* Кастомная радио-кнопка для акции в списке */
  .promo-list-item .radio-lookalike {
    width: 18px;
    height: 18px;
    border: 2px solid #ccc;
    margin-right: 12px;
    transition: border-color 0.2s ease;
    flex-shrink: 0;
    box-sizing: border-box;
    border-radius: 50%;
  }

  /* Выбранное состояние радио-кнопки */
  .promo-list-item.selected .radio-lookalike {
    border-color: #0d47a1;
    background-color: #0d47a1;
    box-shadow: inset 0 0 0 3px #fff;
  }

  /* Скрываем старый блок акции в шапке на мобильных */
  .tariff-card.expanded .header-promo-option {
    display: none;
  }

  /* Фиксация плашки "Акция" на мобильных */
  .tariff-card.expanded .tariff-badge,
  .tariff-card.expanded.content-visible .tariff-badge {
    left: auto;
    right: 2000px;
  }

  /* При раскрытии на мобильных плавно уводим плашку вправо */
  .tariff-card.expanded .tariff-badge {
    opacity: 0;
  }

  /* Контейнер для новой анимированной плашки */
  .promo-badge-list-item {
    margin-bottom: -8px;
    padding-left: 0;
    overflow: hidden;
  }

  /* Стили и начальное состояние для анимации самой плашки */
  .promo-item-badge {
    display: inline-block;
    background-color: #e53935;
    color: white;
    padding: 4px 8px;
    font-size: 12px;
    font-weight: bold;
    border-radius: 4px;
    opacity: 0;
    transform: translateX(-100%);
    transition: transform 0.4s ease-out 0.2s, opacity 0.3s ease-out 0.2s;
  }

  /* Конечное состояние плашки, когда контент видим */
  .tariff-card.expanded.content-visible .promo-item-badge {
    opacity: 1;
    transform: translateX(0);
  }

  .modal-window {
    padding: 30px 15px;
  }

  .clickable-icon-container {
    right: 25%;
  }

  /* --- Стили для крестика (закрытия) на мобильных --- */
  .tariff-card.expanded .close-card-btn {
    /* Позиционируем относительно шапки */

    right: 20%;
  }

  /* 1️⃣ Отменяем позиционирование внутри .carousel */
  .carousel {
    position: static !important;
  }

  /* 2️⃣ Делаем родителем для позиционирования общий контейнер */
  #tariff-component-wrapper {
    position: relative;
  }

  /* 3️⃣ Кнопки позиционируются относительно wrapper'а */
  .carousel-btn {
    position: absolute;
    top: 25%;
    /* потом можно скорректировать */
    transform: translateY(-50%);
    z-index: 20;
  }

  /* 4️⃣ Левая и правая кнопки */
  .carousel-btn--prev {
    left: 5px;
  }

  .carousel-btn--next {
    right: 5px;
  }
}

/* --- Поверх других блоков сайта (например, .mainpage_news) --- */
.suggestions-wrapper,
.suggestions-suggestions,
.suggestions {
  position: relative !important;
  z-index: 9999 !important;
}

/* === Настройки размеров и скорости === */
:root {
  --action-height: 48px;
  /* высота кнопки и шестерёнки */
  --spin-duration: 1.2s;
  /* скорость вращения (меньше = быстрее) */
}

/* Контейнер двух кнопок */
.tariff-buttons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
  margin-top: 16px;
}

/* Кнопка "Подключить" в карточке — задаём явную высоту для синхронизации с шестерёнкой */
.tariff-card .tariff-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--action-height);
  padding: 0 20px;
  transition: all 0.3s ease;
}

/* Шестерёнка — без фона и рамки, одинаковая высота с кнопкой */
.tariff-gear {
  width: var(--action-height);
  height: var(--action-height);
  background: none;
  border: none;
  /* убрали чёрную линию с рамок */
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-sizing: border-box;
  transition: width 0.35s ease, opacity 0.3s ease, transform 0.3s ease;
  opacity: 1;
}

/* Сам значок шестерёнки: серый с тонкой чёрной обводкой, крупнее */
.tariff-gear svg {
  width: var(--action-height);
  height: var(--action-height);
  fill: #1f68a7;
  /* Цвет совпадает с твоей иконкой */
  transition: transform 0.3s ease;
}

/* Анимация вращения */
@keyframes spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

/* Вращение при hover */
.tariff-gear:hover svg {
  animation: spin var(--spin-duration) linear infinite;
}

/* Вращение по классу (запускается JS при клике и при сворачивании/раскрытии) */
.tariff-gear svg.spinning {
  animation: spin var(--spin-duration) linear infinite;
}

/* Скрытие шестерёнки с плавным сдвигом кнопки в центр */
.tariff-gear.hidden {
  opacity: 0;
  width: 0;
  /* сужаем ширину → кнопка «Подключить» плавно занимает центр */
  margin: 0;
  pointer-events: none;
}

/* При появлении обратно (сворачивание) — шестерёнка расширяется плавно */
.tariff-gear:not(.hidden) {
  opacity: 1;
  width: var(--action-height);
  transform: none;
}
/* --- Убираем синий фон (tap highlight) на всех интерактивных элементах --- */
* {
  -webkit-tap-highlight-color: transparent !important; /* для Android/iOS */
  -webkit-touch-callout: none; /* убирает всплывающее меню при удержании */
}

button,
a,
svg,
.tariff-button,
.tariff-gear {
  outline: none !important;
  -webkit-tap-highlight-color: transparent !important;
  -webkit-touch-callout: none !important;
}

/* Дополнительно — убираем “мигание” выделения текста */
*:focus {
  outline: none !important;
  box-shadow: none !important;
}