/* --- Глобальные переменные --- */
:root {
    /* Цвета */
    --telegram-blue: #085277; /* ДОБАВЬТЕ ЭТУ СТРОКУ */
    --primary-blue: #007bff; /* Основной синий цвет */
    --secondary-gray: #6c757d; /* Вторичный серый цвет */
    --whatsapp-green: #14853e; /* Зеленый цвет WhatsApp */
    --viber-purple: #433c79; /* Фиолетовый цвет Viber */
    --text-white: #ffffff; /* Белый цвет текста */
    --overlay-color: rgb(0 0 0 / 80%); /* Цвет оверлея (полупрозрачный черный) */
    --diagonal-color-left: rgba(35, 60, 95, 0.5); /* Цвет для диагонального градиента (левый) */
    --diagonal-color-right: rgba(150, 120, 90, 0.5); /* Цвет для диагонального градиента (правый) */
    --expert-gold: #FFD700; /* Золотой цвет */
    --text-blue: #3498db; /* Синий цвет текста */
    --dark-blue-header: #2c3e50; /* Темно-синий цвет для фона заголовка */
    --light-gray-background: #f4f4f4; /* Светло-серый цвет для фона тела страницы */
    --dark-text: #333; /* Общий темно-серый цвет текста */
    --medium-gray-text: #666; /* Общий средне-серый цвет текста */
    --light-gray-border: #e0e0e0; /* Общий светло-серый цвет границ */

    /* Шрифты */
    --font-lato: "Times New Roman", Times, serif; /* Шрифт Lato (и запасной Times New Roman) */
    --font-source-sans: "Times New Roman", Times, serif; /* Шрифт Source Sans (и запасной Times New Roman) */

    /* Отступы/Размеры */
    --spacing-xs: 1px;
    --spacing-sm: 3px;
    --spacing-md: 8px;
    --spacing-lg: 30px;
    --spacing-xl: 50px;
}

/* --- Базовые стили --- */
body {
    font-family: var(--font-source-sans); /* Применяем основной шрифт */
    font-weight: 200; /* Легкое начертание шрифта */
    margin: 0; /* Убираем стандартные отступы */
    background-color: var(--light-gray-background); /* Цвет фона страницы */
    color: var(--dark-text); /* Цвет текста по умолчанию */
}

/* --- Общий контейнер --- */
.container {
    width: 90%; /* Ширина контейнера */
    max-width: 1200px; /* Максимальная ширина */
    margin: 0 auto; /* Центрирование по горизонтали */
    padding: 0 15px; /* Внутренние отступы по бокам */
    box-sizing: border-box; /* Учитываем padding в общей ширине */
}

/* --- Секция Заголовка (Header) --- */
header {
    background-color: var(--dark-blue-header); /* Цвет фона заголовка */
    color: #ecf0f1; /* Цвет текста в заголовке */
    padding: 20px 0; /* Внутренние отступы сверху/снизу */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Тень */
    border-bottom: 3px solid var(--text-blue); /* Нижняя граница */
}

.header-container {
    display: flex; /* Используем Flexbox */
    flex-wrap: wrap; /* Разрешаем перенос элементов */
    justify-content: space-between; /* Распределяем элементы по краям */
    align-items: center; /* Выравниваем по центру по вертикали */
    gap: 15px; /* Отступ между элементами */
}

header h1 {
    margin: 0; /* Убираем стандартные отступы */
    font-size: 1.4em; /* Размер шрифта заголовка */
    font-weight: bold; /* Жирное начертание */
    color: #ecf0f1; /* Цвет заголовка */
    white-space: nowrap; /* Запрещаем перенос строки */
}

header nav ul {
    list-style: none; /* Убираем маркеры списка */
    margin: 0; /* Убираем стандартные отступы */
    padding: 0; /* Убираем стандартные отступы */
    display: flex; /* Используем Flexbox */
    flex-wrap: wrap; /* Разрешаем перенос элементов */
    justify-content: center; /* Центрируем пункты меню */
    gap: 25px; /* Отступ между пунктами меню */
}

header nav a {
    color: #ecf0f1; /* Цвет ссылок */
    text-decoration: none; /* Убираем подчеркивание */
    font-size: 1.1em; /* Размер шрифта */
    font-weight: 600; /* Полужирное начертание */
    padding: 5px 0; /* Внутренние отступы */
    position: relative; /* Для псевдоэлемента */
    transition: color 0.3s ease; /* Плавный переход цвета */
}

header nav a:hover {
    color: var(--text-blue); /* Цвет при наведении */
}

header nav a::after {
    content: ''; /* Создаем псевдоэлемент */
    position: absolute; /* Абсолютное позиционирование */
    width: 0; /* Начальная ширина 0 */
    height: 2px; /* Высота подчеркивания */
    background-color: var(--text-blue); /* Цвет подчеркивания */
    bottom: 0; /* Внизу элемента */
    left: 0; /* Слева элемента */
    transition: width 0.3s ease-in-out; /* Плавный переход ширины */
}

header nav a:hover::after {
    width: 100%; /* Расширяем подчеркивание при наведении */
}

/* --- Переключатель языка/валюты --- */
.language-currency-switcher label {
    display: none; /* Скрываем метки (labels) */
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --- Элементы управления сверху (для выпадающих списков) --- */
.top-controls select {
    padding: 8px 25px; /* Внутренние отступы */
    border-radius: 5px; /* Скругление углов */
    border: 1px solid rgba(255, 255, 255, .5); /* Граница */
    font-size: 1em; /* Размер шрифта */
    cursor: pointer; /* Курсор-указатель */
    background-color: rgba(255, 255, 255, .2); /* Полупрозрачный белый фон */
    color: var(--text-white); /* Цвет текста */
    -webkit-appearance: none; /* Убираем стандартные стили для select (для WebKit) */
    -moz-appearance: none; /* Убираем стандартные стили для select (для Mozilla) */
    appearance: none; /* Убираем стандартные стили для select */
}

.top-controls select option {
    background-color: rgba(0, 0, 0, .8); /* Цвет фона опций в выпадающем списке */
    color: var(--text-white); /* Цвет текста опций */
}

/* --- Кнопка с иконкой "Домой" (если используется на index.html) --- */
.home-icon-button {
    background-color: transparent; /* Прозрачный фон */
    color: var(--primary-blue); /* Цвет текста/иконки */
    font-size: 1.1em; /* Размер шрифта */
    padding: 10px 20px; /* Внутренние отступы */
    text-decoration: none; /* Убираем подчеркивание */
    border: 2px solid var(--primary-blue); /* Граница */
    border-radius: 7px; /* Скругление углов */
    cursor: pointer; /* Курсор-указатель */
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease, box-shadow 0.4s ease; /* Плавные переходы */
    box-shadow: 0 6px 9px rgba(0, 0, 0, 0.6); /* Тень */
    transform: translateY(0); /* Начальное положение */
}

.home-icon-button:hover {
    background-color: var(--primary-blue); /* Цвет фона при наведении */
    color: var(--text-white); /* Цвет текста при наведении */
    transform: translateY(-6px); /* Приподнимаем кнопку */
    box-shadow: 0 9px 12px rgba(0, 0, 0, 0.4); /* Усиливаем тень */
}

.home-icon-button::before {
    content: "\2302 "; /* Символ иконки "домой" */
    margin-right: 5px; /* Отступ справа от иконки */
}

/* --- Группа навигационных кнопок (например, на index.html) --- */
.nav-buttons-group {
    display: flex; /* Используем Flexbox */
    justify-content: center; /* Центрируем кнопки */
    gap: 20px; /* Отступ между кнопками */
    flex-wrap: wrap; /* Разрешаем перенос элементов */
}

.nav-button {
    display: inline-block; /* Отображаем как строчно-блочный элемент */
    padding: 10px 20px; /* Внутренние отступы */
    background-color: var(--primary-blue); /* Цвет фона */
    color: var(--text-white); /* Цвет текста */
    text-decoration: none; /* Убираем подчеркивание */
    border-radius: 5px; /* Скругление углов */
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.2s ease; /* Плавные переходы */
    box-shadow: 0 6px 9px rgba(0, 0, 0, 0.3); /* Тень */
    transform: translateY(0); /* Начальное положение */
    font-size: 0.95em; /* Размер шрифта */
    border-bottom: 4px solid #0056b3; /* Нижняя граница */
    white-space: nowrap; /* Запрещаем перенос строки */
}

.nav-button:hover {
    background-color: #0056b3; /* Цвет фона при наведении */
    transform: translateY(-3px); /* Приподнимаем кнопку */
    box-shadow: 0 9px 12px rgba(0, 0, 0, 0.4); /* Усиливаем тень */
    border-bottom: 4px solid #003d7a; /* Цвет нижней границы при наведении */
}

.nav-button:active {
    transform: translateY(1px); /* Прижимаем кнопку при клике */
    box-shadow: 0 3px 4px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.08); /* Мягкая тень при клике */
    border-bottom: 4px solid var(--primary-blue); /* Цвет нижней границы при клике */
}

/* --- Общие разделители контента и заголовки --- */
hr {
    margin: 25px 0; /* Отступы для горизонтальной линии */
    border: 0; /* Убираем границу */
    border-top: 1px solid #eee; /* Верхняя граница (линия) */
}

h2 {
    text-align: center; /* Выравнивание по центру */
    color: #444; /* Цвет заголовка */
    margin-bottom: 25px; /* Отступ снизу */
}

/* --- Макеты основных секций (Магазин/Прокат) --- */
.shop-main,
.rent-main {
    width: 90%; /* Ширина */
    max-width: 1200px; /* Максимальная ширина */
    margin: 20px auto; /* Отступы сверху/снизу и центрирование */
    padding: 20px; /* Внутренние отступы */
    box-sizing: border-box; /* Учитываем padding в общей ширине */
    background-color: var(--text-white); /* Цвет фона */
    border-radius: 8px; /* Скругление углов */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Тень */
}

/* --- Отступы между секциями (применяются к страницам магазина и проката) --- */
.categories-section,
.products-section,
.how-it-works,
.our-suits-for-rent,
.rent-terms,
.contact-info {
    margin-bottom: 50px; /* Отступ снизу */
}

/* --- Сетка категорий с изображениями (Страница магазина) --- */
.category-grid {
    display: grid; /* Используем CSS Grid */
    grid-template-columns: repeat(auto-fit, minmax(90px, 120px)); /* Адаптивные колонки */
    gap: 5px; /* Отступ между элементами сетки */
    margin-bottom: 30px; /* Отступ снизу */
    justify-content: center; /* Центрируем элементы по горизонтали */
}

.category-item {
    display: flex; /* Используем Flexbox */
    flex-direction: column; /* Элементы в колонку */
    justify-content: flex-end; /* Выравниваем содержимое по низу */
    align-items: center; /* Выравниваем по центру по горизонтали */
    text-align: center; /* Выравнивание текста по центру */
    padding: 1px; /* Внутренние отступы */
    border: 1px solid var(--light-gray-border); /* Граница */
    border-radius: 8px; /* Скругление углов */
    text-decoration: none; /* Убираем подчеркивание */
    color: var(--dark-text); /* Цвет текста */
    transition: transform 0.2s ease, box-shadow 0.2s ease; /* Плавные переходы */
    cursor: pointer; /* Курсор-указатель */
    background-color: var(--text-white); /* Цвет фона */
    box-shadow: 0 2px 5px rgba(0,0,0,0.05); /* Тень */
    width: 120px; /* Фиксированная ширина */
    height: 170px; /* Фиксированная высота */
    touch-action: manipulation; /* Для улучшения взаимодействия на тач-устройствах */
}

.category-item:hover {
    transform: translateY(-5px); /* Приподнимаем элемент */
    box-shadow: 0 5px 15px rgba(0,0,0,0.1); /* Усиливаем тень */
}

.category-item img {
    width: 100%; /* Ширина изображения */
    height:94%; /* Высота изображения */
    object-fit: cover; /* Заполнение области с обрезкой */
    margin-bottom: 1px; /* Отступ снизу */
    display: block; /* Отображаем как блочный элемент */
}

.category-item h3 {
    margin: 0 0 5px; /* Отступы заголовка */
    font-size: 0.82rem; /* Размер шрифта */
    font-weight: 600; /* Полужирное начертание */
    white-space: normal; /* Разрешаем перенос строки */
    overflow: visible; /* Видимое переполнение */
    text-overflow: clip; /* Обрезка текста */
    max-width: 100%; /* Максимальная ширина */
    line-height: 1.2; /* Межстрочный интервал */
    word-break: break-word; /* Разрешаем перенос слов */
}

.category-item.active {
    border-color: var(--primary-blue); /* Цвет границы активного элемента */
    background-color: #e7f4ff; /* Цвет фона активного элемента */
    box-shadow: 0 3px 8px rgba(0, 123, 255, 0.2); /* Тень активного элемента */
}

/* --- Сетка товаров (Страница магазина) --- */
.product-grid { /* #products-container */
    display: grid; /* Используем CSS Grid */
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); /* Адаптивные колонки */
    gap: 25px; /* Отступ между элементами сетки */
    padding: 20px 0; /* Внутренние отступы */
}

/* --- Карточки товаров (Страница магазина) --- */
.product-card {
    background-color: var(--text-white); /* Цвет фона */
    border: 1px solid var(--light-gray-border); /* Граница */
    border-radius: 10px; /* Скругление углов */
    padding: 20px; /* Внутренние отступы */
    text-align: center; /* Выравнивание текста по центру */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08); /* Тень */
    transition: transform 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease; /* Плавные переходы */
    overflow: hidden; /* Скрываем содержимое, выходящее за границы */
}

.product-card.hidden {
    opacity: 0; /* Скрываем элемент */
    transform: scale(0.9); /* Уменьшаем размер */
    height: 0; /* Устанавливаем высоту 0 */
    padding: 0; /* Убираем отступы */
    margin: 0; /* Убираем отступы */
    border: none; /* Убираем границу */
    visibility: hidden; /* Скрываем элемент */
    display: none !important; /* Полностью скрываем элемент */
}

.product-card img {
    width: 100%; /* Ширина 100% */
    aspect-ratio: 3 / 4; /* Соотношение сторон */
    object-fit: cover; /* Заполнение области с обрезкой */
    border-radius: 5px; /* Скругление углов */
    margin: 0 auto 10px; /* Отступы и центрирование */
    display: block; /* Отображаем как блочный элемент */
}

.product-card h3 {
    margin: 0 0 5px; /* Отступы заголовка */
    color: #555; /* Цвет заголовка */
    font-size: 0.9em; /* Размер шрифта */
}

.product-card p {
    font-size: 0.9em; /* Размер шрифта */
    color: var(--medium-gray-text); /* Цвет текста */
    margin-bottom: 10px; /* Отступ снизу */
}

.product-card .price {
    font-size: 1.1em; /* Размер шрифта */
    font-weight: bold; /* Жирное начертание */
    color: var(--dark-blue-header); /* Цвет цены */
    margin-bottom: 10px; /* Отступ снизу */
}

.product-card .btn {
    background-color: #28a745; /* Цвет фона кнопки */
    color: var(--text-white); /* Цвет текста кнопки */
    border: none; /* Убираем границу */
    padding: 10px 15px; /* Внутренние отступы */
    border-radius: 5px; /* Скругление углов */
    cursor: pointer; /* Курсор-указатель */
    transition: background-color 0.3s ease; /* Плавный переход цвета фона */
    font-size: 0.9em; /* Размер шрифта */
}

.product-card .btn:hover {
    background-color: #218838; /* Цвет фона кнопки при наведении */
}

/* --- Стили, специфичные для страницы проката (rent.html) --- */

h1[data-key="rent_main_title"] {
    font-size: 1.3rem; /* Размер шрифта */
    color: var(--text-white); /* Цвет текста */
    line-height: 1; /* Межстрочный интервал */
}

.rent-main h2 {
    font-size: 2em; /* Размер шрифта */
    color: #34495e; /* Цвет заголовка */
    margin-bottom: 20px; /* Отступ снизу */
    text-align: center; /* Выравнивание по центру */
    position: relative; /* Для псевдоэлемента */
    padding-bottom: 10px; /* Внутренний отступ снизу */
    font-weight: 700; /* Жирное начертание */
}

.rent-main h2::after {
    content: ''; /* Создаем псевдоэлемент */
    position: absolute; /* Абсолютное позиционирование */
    left: 50%; /* Слева на 50% */
    transform: translateX(-50%); /* Центрирование по горизонтали */
    bottom: 0; /* Внизу элемента */
    width: 80px; /* Ширина линии */
    height: 3px; /* Высота линии */
    background-color: var(--text-blue); /* Цвет линии */
    border-radius: 2px; /* Скругление углов */
}

/* --- Секция "Как это работает" (Страница проката) --- */
.how-it-works .steps-list {
    display: flex; /* Используем Flexbox */
    flex-wrap: wrap; /* Разрешаем перенос элементов */
    justify-content: center; /* Центрируем элементы */
    gap: 30px; /* Отступ между элементами */
    padding: 30px; /* Внутренние отступы */
    background-color: #fcfcfc; /* Цвет фона */
    border-radius: 12px; /* Скругление углов */
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1); /* Тень */
}

.rent-step {
    flex: 1 1 280px; /* Гибкость и базовая ширина элемента */
    max-width: 320px; /* Максимальная ширина */
    text-align: center; /* Выравнивание текста по центру */
    background-color: var(--text-white); /* Цвет фона */
    border: 1px solid var(--light-gray-border); /* Граница */
    border-radius: 10px; /* Скругление углов */
    padding: 25px; /* Внутренние отступы */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08); /* Тень */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Плавные переходы */
    display: flex; /* Используем Flexbox */
    flex-direction: column; /* Элементы в колонку */
    align-items: center; /* Выравниваем по центру по горизонтали */
}

.rent-step:hover {
    transform: translateY(-8px); /* Приподнимаем элемент */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15); /* Усиливаем тень */
}

.rent-step img {
    width: 150px; /* Ширина изображения */
    height: 150px; /* Высота изображения */
    object-fit: contain; /* Вписываем изображение без обрезки */
    margin-bottom: 20px; /* Отступ снизу */
    filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.2)); /* Тень для изображения */
}

.rent-step h3 {
    color: var(--primary-blue); /* Цвет заголовка */
    font-size: 1.4em; /* Размер шрифта */
    margin-bottom: 10px; /* Отступ снизу */
    font-weight: bold; /* Жирное начертание */
}

.rent-step p {
    font-size: 1em; /* Размер шрифта */
    color: #555; /* Цвет текста */
    line-height: 1.6; /* Межстрочный интервал */
}

/* --- Секция "Наши костюмы в аренду" --- */
.rent-suits-list {
    display: grid; /* Используем CSS Grid */
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); /* Адаптивные колонки */
    gap: 30px; /* Отступ между элементами сетки */
    padding: 30px; /* Внутренние отступы */
    background-color: #fcfcfc; /* Цвет фона */
    border-radius: 12px; /* Скругление углов */
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1); /* Тень */
}

.rent-suit-item {
    background-color: var(--text-white); /* Цвет фона */
    border: 1px solid var(--light-gray-border); /* Граница */
    border-radius: 10px; /* Скругление углов */
    padding: 20px; /* Внутренние отступы */
    text-align: center; /* Выравнивание текста по центру */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08); /* Тень */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Плавные переходы */
    overflow: hidden; /* Скрываем содержимое, выходящее за границы */
    display: flex; /* Используем Flexbox */
    flex-direction: column; /* Элементы в колонку */
    justify-content: space-between; /* Распределяем содержимое */
}

.rent-suit-item:hover {
    transform: translateY(-8px); /* Приподнимаем элемент */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15); /* Усиливаем тень */
}

.rent-suit-item img {
    width: 100%; /* Ширина 100% */
    height: 430px; /* Высота изображения */
    object-fit: cover; /* Заполнение области с обрезкой */
    border-radius: 8px; /* Скругление углов */
    margin: 0 auto 15px; /* Отступы и центрирование */
    border: 1px solid #f0f0f0; /* Граница изображения */
    display: block; /* Отображаем как блочный элемент */
}

.rent-suit-item h3 {
    margin: 0 0 8px; /* Отступы заголовка */
    color: var(--dark-text); /* Цвет заголовка */
    font-size: 1.3em; /* Размер шрифта */
    font-weight: bold; /* Жирное начертание */
}

.rent-suit-item p {
    font-size: 0.95em; /* Размер шрифта */
    color: var(--medium-gray-text); /* Цвет текста */
    margin-bottom: 15px; /* Отступ снизу */
    flex-grow: 1; /* Растягиваем элемент */
}

.rent-suit-item .rent-price {
    font-size: 1.2em; /* Размер шрифта */
    font-weight: bold; /* Жирное начертание */
    color: #28a745; /* Цвет цены */
    margin-top: auto; /* Прижимаем к низу */
}

.rent-suit-item .currency-suffix {
    font-weight: bold; /* Обычное начертание */
    font-size: 1.1em; /* Размер шрифта */
    color: #1f1717; /* Цвет суффикса валюты */
}

/* --- Секция "Условия аренды" --- */
.rent-terms ul {
    list-style: none; /* Убираем маркеры списка */
    padding: 30px 40px; /* Внутренние отступы */
    background-color: #fcfcfc; /* Цвет фона */
    border-radius: 12px; /* Скругление углов */
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1); /* Тень */
}

.rent-terms li {
    background-color: #e8f5ff; /* Цвет фона элемента списка */
    margin-bottom: 12px; /* Отступ снизу */
    padding: 15px 20px; /* Внутренние отступы */
    border-left: 6px solid var(--primary-blue); /* Левая граница */
    border-radius: 8px; /* Скругление углов */
    font-size: 1em; /* Размер шрифта */
    color: var(--dark-text); /* Цвет текста */
    line-height: 1.5; /* Межстрочный интервал */
    position: relative; /* Для псевдоэлемента */
}

.rent-terms li::before {
    content: '✓'; /* Символ галочки */
    color: #28a745; /* Цвет галочки */
    font-weight: bold; /* Жирное начертание */
    margin-right: 10px; /* Отступ справа */
    font-size: 1.2em; /* Размер шрифта галочки */
}

.rent-terms li:last-child {
    margin-bottom: 0; /* Убираем отступ у последнего элемента */
}

/* --- Секция "Контактная информация" --- */
.contact-info {
    background-color: #cfc9c9; /* Цвет фона */
    border-radius: 12px; /* Скругление углов */
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1); /* Тень */
    padding: 30px; /* Внутренние отступы */
    text-align: center; /* Выравнивание текста по центру */
    border: 1px solid var(--light-gray-border); /* Граница */
}

.contact-info p {
    margin-bottom: 10px; /* Отступ снизу */
    font-size: 1.05em; /* Размер шрифта */
    color: #444; /* Цвет текста */
}

.contact-info strong {
    color: var(--dark-text); /* Цвет жирного текста */
}

.contact-info address {
    font-style: normal; /* Обычный стиль шрифта (не курсив) */
    margin-bottom: 25px; /* Отступ снизу */
}

.contact-info address p a {
    color: #000000; /* Цвет ссылок */
    text-decoration: none; /* Убираем подчеркивание */
    transition: color 0.3s ease; /* Плавный переход цвета */
}

.contact-info address p a:hover {
    color: var(--text-white); /* Цвет ссылок при наведении */
    text-decoration: underline; /* Подчеркивание при наведении */
}

.contact-info address p a:active {
    color: #1c8c23  /* Цвет ссылок при активном состоянии */
}

.contact-info .social-links {
    display: flex; /* Используем Flexbox */
    justify-content: center; /* Центрируем элементы */
    gap: 20px; /* Отступ между элементами */
    margin-top: 30px; /* Отступ сверху */
    flex-wrap: wrap; /* Разрешаем перенос элементов */
}

/* --- Кнопки социальных сетей (WhatsApp, Viber) в контактной информации --- */
.contact-info .social-links .btn {
    display: inline-flex; /* Отображаем как строчно-блочный Flexbox-контейнер */
    align-items: center; /* Выравниваем по центру по вертикали */
    justify-content: center; /* Выравниваем по центру по горизонтали */
    padding: 12px; /* Внутренние отступы */
    border-radius: 7px; /* Скругление углов */
    font-size: 1em; /* Размер шрифта */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Тень */
    transform: translateY(0); /* Начальное положение */
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease; /* Плавные переходы */
    font-weight: 700; /* Жирное начертание */
    color: var(--text-white); /* Белый цвет текста */
    text-decoration: none; /* Убираем подчеркивание */
    width: 50px; /* Фиксированная ширина кнопки (если только иконка) */
    height: 50px; /* Фиксированная высота кнопки (если только иконка) */
}
.contact-info .social-links .btn i {
    font-size: 28px; /* Размер иконки */
    /* margin-right: 0; */ /* Убрано, так как текста нет */
    color: inherit; /* Иконка наследует цвет от родителя (.btn) */
}





/* --- Футер --- */
footer {
    text-align: center; /* Выравнивание текста по центру */
    padding: 8px; /* Внутренние отступы */
    margin-top: 40px; /* Отступ сверху */
    background-color: #333; /* Цвет фона */
    color: var(--text-white); /* Цвет текста */
    font-size: 1em; /* Размер шрифта */
    box-shadow: 0 -4px 8px rgba(0, 0, 0, 0.1); /* Тень сверху */
    font-family: var(--font-lato); /* Применяем шрифт */ 
}

/* Стили для социальных иконок в футере */
footer .footer-social-links a {
    color: var(--text-white); /* Белые иконки */
    font-size: 24px; /* Размер иконок */
    margin: 0 10px; /* Отступ между иконками */
    transition: color 0.3s ease; /* Плавный переход цвета */
}
footer .footer-social-links {
    display: flex;          /* Включаем Flexbox */
    flex-wrap: wrap;        /* Позволяем иконкам переноситься на следующую строку */
    justify-content: center; /* Центрируем иконки по горизонтали в каждой строке */
    align-items: center;    /* Выравниваем по центру по вертикали */
    gap: 10px;              /* Расстояние между иконками (как по горизонтали, так и по вертикали) */

    /* КЛЮЧЕВОЕ СВОЙСТВО для двух рядов по 3 иконки: */
    /* Предположим, что каждая иконка имеет размер 24px (font-size) + возможно padding или border */
    /* Если иконки 24px, а между ними 10px gap: */
    /* (3 иконки * 24px) + (2 промежутка * 10px) = 72px + 20px = 92px */
    width: 170px; /* Устанавливаем такую ширину контейнера, чтобы поместилось 3 иконки и 2 gap */
    /* Возможно, понадобится немного подкорректировать это значение (например, 95px),
       в зависимости от фактического размера иконок после учета box-sizing и других стилей. */

    margin: 20px auto 0 auto; /* Центрируем контейнер на странице и добавляем отступ сверху */
}

footer .footer-social-links a:hover {
    color: var(--expert-gold); /* Цвет при наведении (золотой) */
}

/* Стили для номера телефона в футере */
footer .footer-contact-info a {
    color: var(--text-white); /* Белый цвет */
    text-decoration: none; /* Без подчеркивания */
    transition: color 0.3s ease; /* Плавный переход цвета */
}

footer .footer-contact-info a:hover {
    color: var(--expert-gold); /* Цвет при наведении (золотой) */
}

/* --- Кнопка "Наверх" --- */
#scrollToTopBtn {

    position: fixed; /* Фиксированное позиционирование */
    bottom: 20px; /* Отступ снизу */
    right: 20px; /* Отступ справа */
    background-color: var(--primary-blue); /* Цвет фона */
    color: var(--text-white); /* Цвет текста/иконки */
    border: none; /* Убираем границу */
    border-radius: 50%; /* Круглая форма */
    width: 35px; /* Ширина */
    height: 70px; /* Высота */
    font-size: 1.8em; /* Размер шрифта/иконки */
    display: flex; /* Используем Flexbox */
    justify-content: center; /* Центрируем по горизонтали */
    align-items: center; /* Центрируем по вертикали */
    cursor: pointer; /* Курсор-указатель */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.6); /* Тень */
    transition: background-color 0.3s ease, transform 0.3s ease, opacity 0.3s ease; /* Плавные переходы */
    z-index: 1000; /* Высокий z-index */
    opacity: 0; /* Изначально скрыта */
    pointer-events: none; /* Игнорировать клики, когда скрыта */
}

#scrollToTopBtn.show {
    opacity: 1; /* Показываем кнопку */
    pointer-events: auto; /* Включаем клики */
}

#scrollToTopBtn:hover {
    background-color: #0056b3; /* Цвет фона при наведении */
    transform: translateY(-3px); /* Приподнимаем кнопку */
}

/* --- Видеофон --- */
.video-bg-container {
    position: absolute; /* Абсолютное позиционирование */
    top: 0; /* Отступ сверху */
    left: 0; /* Отступ слева */
    width: 100%; /* Ширина 100% */
    height: 100%; /* Высота 100% */
    overflow: hidden; /* Скрываем содержимое, выходящее за границы */
    z-index: -2; /* Находится под другим контентом */
    background: url('img/main_background.webp') no-repeat center center / cover; /* Запасное фоновое изображение */
}

.video-bg {
    min-width: 100%; /* Минимальная ширина */
    min-height: 100%; /* Минимальная высота */
    width: auto; /* Автоматическая ширина */
    height: auto; /* Автоматическая высота */
    position: absolute; /* Абсолютное позиционирование */
    top: 50%; /* Отступ сверху на 50% */
    left: 50%; /* Отступ слева на 50% */
    transform: translate(-50%, -50%); /* Центрирование */
    object-fit: cover; /* Заполнение области с обрезкой */
    z-index: -1; /* Находится под оверлеем */
}

.overlay {
    position: absolute; /* Абсолютное позиционирование */
    top: 0; /* Отступ сверху */
    left: 0; /* Отступ слева */
    width: 100%; /* Ширина 100% */
    height: 100%; /* Высота 100% */
    background-color: rgba(0, 0, 0, 0.5); /* Полупрозрачный черный оверлей */
    z-index: -1; /* Находится над видео, но под текстом */
}

/* --- Masthead (заголовок на index.html) --- */
.masthead {
    height: 100vh; /* Высота равна высоте вьюпорта */
    min-height: 650px; /* Минимальная высота */
    padding-top: 0; /* Убираем отступ сверху */
    padding-bottom: 0; /* Убираем отступ снизу */
    display: flex; /* Используем Flexbox */
    align-items: center; /* Выравниваем по центру по вертикали */
    position: relative; /* Для контекста z-index */
    z-index: 0; /* Контент masthead поверх оверлея */
}

.masthead .masthead-subheading {
    font-size: 1.7em !important; /* Размер шрифта */
    font-weight: 800 !important; /* Жирное начертание */
    color: #ecf0f1; /* Цвет текста */
    letter-spacing: 0.05em; /* Межбуквенный интервал */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Тень текста */
    margin-top: 10px; /* Отступ сверху */
    margin-bottom: 20px; /* Отступ снизу */
}

/* --- Стили предупреждения "Без скриптов" --- */
.noscript-warning {
    background-color: #ffe0b2; /* Светло-оранжевый фон */
    color: #e65100; /* Темно-оранжевый текст */
    padding: 15px; /* Внутренние отступы */
    font-size: 1.1em; /* Размер шрифта */
    font-weight: bold; /* Жирное начертание */
    text-align: center; /* Выравнивание по центру */
    border-bottom: 3px solid #ff9800; /* Оранжевая нижняя граница */
}

.noscript-warning a {
    color: #e65100; /* Цвет ссылок */
    text-decoration: underline; /* Подчеркивание */
}



/* --- Модальное окно (MESSENGER MODAL) --- */

/* Контейнер модального окна */
.modal {
    display: none; /* Скрыто по умолчанию */
    position: fixed; /* Фиксированное позиционирование (поверх всего) */
    z-index: 1050; /* Высокий z-index */
    left: 0; /* Слева */
    top: 0; /* Сверху */
    width: 100%; /* Ширина 100% */
    height: 100%; /* Высота 100% */
    overflow: auto; /* Включаем прокрутку, если контент большой */
    background-color: rgba(0, 0, 0, 0.7); /* Темный полупрозрачный фон */
    justify-content: center; /* Центрирование содержимого по горизонтали */
    align-items: center; /* Центрирование содержимого по вертикали */

    opacity: 0; /* Начальная прозрачность для плавного появления */
    transition: opacity 0.3s ease-out; /* Плавное появление по opacity */
    pointer-events: none; /* Игнорировать клики, пока не видно */
}

/* Состояние "показать" модальное окно */
.modal.show {
    display: flex; /* Показываем как flex-контейнер для центрирования */
    opacity: 1; /* Делаем полностью видимым */
    pointer-events: auto; /* Включаем клики */
}

/* Содержимое модального окна */
.modal-content {
    background-color: #fefefe; /* Цвет фона */
    margin: auto; /* Автоматические отступы для центрирования */
    padding: 30px; /* Внутренние отступы */
    border: 1px solid #888; /* Граница */
    border-radius: 10px; /* Скругление углов */
    width: 90%; /* Ширина на больших экранах */
    max-width: 500px; /* Максимальная ширина */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4); /* Мягкая тень */
    position: relative; /* Для позиционирования кнопки закрытия */

    transform: scale(0.9); /* Начинаем чуть меньше */
    transition: transform 0.3s ease-out, opacity 0.3s ease-out; /* Анимация масштаба и прозрачности */
    opacity: 0; /* Начальная прозрачность для содержимого */
}

/* Когда модальное окно показано, применяем анимацию к его содержимому */
.modal.show .modal-content {
    transform: scale(1); /* Возвращаем к нормальному размеру */
    opacity: 1; /* Делаем видимым */
}

/* Кнопка закрытия */
.close-button {
    color: #aaa; /* Цвет кнопки */
    position: absolute; /* Абсолютное позиционирование */
    top: 10px; /* Отступ сверху */
    right: 15px; /* Отступ справа */
    font-size: 28px; /* Размер шрифта */
    font-weight: bold; /* Жирное начертание */
    cursor: pointer; /* Курсор-указатель */
    transition: color 0.3s ease; /* Плавный переход цвета */
}

.close-button:hover,
.close-button:focus {
    color: #333; /* Цвет при наведении/фокусе */
    text-decoration: none; /* Убираем подчеркивание */
}

/* Заголовок модального окна */
.modal h2 {
    text-align: center; /* Выравнивание по центру */
    color: #333; /* Цвет заголовка */
    margin-top: 0; /* Убираем отступ сверху */
    margin-bottom: 20px; /* Отступ снизу */
    font-size: 1.8em; /* Размер шрифта */
}

/* Стили для названия продукта в модальном окне */
#modalProductName {
    font-weight: bold; /* Жирное начертание */
    color: #007bff; /* Цвет текста */
    display: block; /* Отображаем как блочный элемент */
    margin-bottom: 20px; /* Отступ снизу */
    text-align: center; /* Выравнивание по центру */
    font-size: 1.2em; /* Размер шрифта */
}

/* Группа кнопок мессенджеров */
.messenger-buttons {
    display: flex; /* Используем Flexbox */
    flex-direction: column; /* Кнопки в столбец */
    gap: 15px; /* Отступ между кнопками */
    margin-top: 25px; /* Отступ сверху */
}

.messenger-buttons a {
    display: flex; /* Используем Flexbox для выравнивания иконки и текста */
    align-items: center; /* Выравниваем по центру по вертикали */
    justify-content: center; /* Выравниваем по центру по горизонтали */
    padding: 12px 20px; /* Внутренние отступы */
    border-radius: 8px; /* Скругление углов */
    text-decoration: none; /* Убираем подчеркивание */
    font-size: 1.1em; /* Размер шрифта */
    font-weight: bold; /* Жирное начертание */
    color: var(--text-white); /* Белый текст для кнопок */
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease; /* Плавные переходы */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Тень */
}

.messenger-buttons a:hover {
    transform: translateY(-3px); /* Приподнимаем кнопку */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3); /* Усиливаем тень */
}

.messenger-buttons a img {
    width: 24px; /* Ширина изображения */
    height: 24px; /* Высота изображения */
    margin-right: 10px; /* Отступ между иконкой и текстом */
    vertical-align: middle; /* Вертикальное выравнивание */
    border-radius: 0; /* Без скругления */
    object-fit: contain; /* Вписываем изображение без обрезки */
    margin-bottom: 0; /* Убираем отступ снизу */
}
/* --- Секция "Контактная информация" --- */
.contact-info {
    background-color: #fcfcfc; /* Сделал фон светлее, чтобы соответствовал другим секциям .rent-main */
    border-radius: 12px;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
    padding: 30px;
    text-align: center;
    border: 1px solid var(--light-gray-border);
    margin-bottom: 50px; /* Сохраняем отступ снизу, как и у других секций */
}

.contact-info h2 {
    font-size: 2.2em; /* Размер заголовка */
    color: var(--dark-text); /* Цвет заголовка */
    margin-bottom: 20px;
    text-align: center;
    position: relative;
    padding-bottom: 10px;
    font-weight: 700;
}

/* Линия под заголовком, как у других h2 в .rent-main */
.contact-info h2::after {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
    width: 80px;
    height: 3px;
    background-color: var(--primary-blue); /* Используем --primary-blue для единообразия */
    border-radius: 2px;
}

.contact-info p {
    margin-bottom: 10px;
    font-size: 1.05em;
    color: var(--medium-gray-text); /* Используем --medium-gray-text для параграфов */
}

/* Стили для ссылок в блоке address */
.contact-info address {
    font-style: normal; /* Убираем курсив для адреса */
    margin-bottom: 25px;
}

.contact-info address p {
    margin-bottom: 5px; /* Отступ между строками адреса/телефона */
}

.contact-info address p a {
    color: var(--dark-text); /* Цвет ссылки: черный из --dark-text */
    text-decoration: none; /* Убираем подчеркивание */
    transition: color 0.3s ease;
}

.contact-info address p a:hover {
    color: var(--primary-blue); /* Цвет при наведении */
    text-decoration: underline; /* Подчеркивание при наведении */
}

.contact-info address p a:active {
    color: #0056b3; /* Чуть темнее синий при активном состоянии */
}
.contact-info-block {
    margin-bottom: var(--spacing-sm);
}

.contact-address {
    font-style: normal; /* Убирает курсив для i/address тегов */
    font-size: 1.1rem;
    margin-bottom: var(--spacing-sm); /* Отступ снизу для адреса */
    /* Возможно, здесь вам тоже нужно явно указать font-family для текста адреса, если он отличается от основного */
}
.contact-address .fas {
    font-family: 'Font Awesome 7 Free', sans-serif; /* Попытка переопределить */
    font-weight: 900;
    /* Возможно, здесь потребуется !important, но пробуем без него */
}
.contact-address i,
.phone-number-line i {
    margin-right: 8px; /* Отступ справа для иконок */
    /* ОЧЕНЬ ВАЖНО: УКАЖИТЕ FONT-FAMILY И FONT-WEIGHT ДЛЯ ИКОНОК */

    font-weight: 900; /* Для solid иконок (fas) */
    /* Если вы используете Regular (far) или Brands (fab) иконки, для них будут другие font-weight. */
    /* Например, font-weight: 400; для Regular. */
}
.phone-icon {
  margin-right: 8px; /* можно 4px, 10px – на ваш вкус */
}

/* --- Контейнер для социальных кнопок --- */
.contact-info .social-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px; /* Отступ между кнопками */
    margin-top: 30px;
}

/* --- Общие стили для ВСЕХ социальных кнопок (<a> тегов) --- */
/* Так как у вас нет класса .btn в HTML для этих ссылок, используем селектор по тегу */
.contact-info .social-links a {
    display: flex; /* Чтобы иконка и текст были в ряд */
    align-items: center; /* Выравнивание по центру по вертикали */
    justify-content: center; /* Центрирование содержимого */
    padding: 10px 20px; /* Внутренние отступы, чтобы вместить текст и иконку */
    border-radius: 7px;
    text-decoration: none;
    color: var(--text-white); /* Белый цвет текста и иконки */
    font-size: 1em;
    font-weight: 600; /* Немного менее жирный, чем 700, но хорошо читается */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
    border: 1px solid transparent; /* Добавляем прозрачную рамку, чтобы избежать сдвига при :hover */
    white-space: nowrap; /* Не разрешать перенос текста на кнопках */
}

.contact-info .social-links a i {
    font-size: 24px; /* Размер иконки */
    margin-right: 8px; /* Отступ между иконкой и текстом */
    color: inherit; /* Иконка наследует цвет текста */
}

.contact-info .social-links a span {
    color: inherit; /* Текст наследует цвет от родительской ссылки */
    font-family: var(--font-source-sans); /* Используем шрифт из переменных */
    font-size: 14.4px; /* Размер шрифта, если нужно конкретно */
    font-weight: normal;
}

/* Специфические стили для иконки Telegram, чтобы быть уверенным в шрифте */
.contact-info .social-links a i.fab.fa-telegram-plane {
    /* Font Awesome 6 Regular - это 'far', но вы используете 'fab' для brand icons. */
    /* Если у вас подключен 'fa-brands', то 'fab' корректен. */
    /* Убедитесь, что 'fab' и 'far' оба доступны, если вы переключаете. */
    /* Если эта иконка должна быть 'far', измените класс в HTML. */
    /* Но для брендов обычно 'fab' */
    font-family: "Font Awesome 7 Brands"; /* Убедитесь, что используется шрифт для брендов */
    font-weight: 400 ; /* Может быть 400 или 900 для разных стилей FA */
}


/* --- Индивидуальные цвета кнопок и их hover-эффекты --- */

/* WhatsApp */
/* Используем атрибут href или aria-label для селекции, т.к. нет уникальных классов */
.contact-info .social-links a[href*="wa.me"] {
    background-color: var(--whatsapp-green);
    border-color: var(--whatsapp-green);
}
.contact-info .social-links a[href*="wa.me"]:hover {
    background-color: #1DA05C; /* Темнее зеленый */
    border-color: #1DA05C;
    transform: translateY(-3px); /* Общий эффект подъема */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}

/* Viber */
.contact-info .social-links a[href*="viber://chat"] {
    background-color: var(--viber-purple);
    border-color: var(--viber-purple);
}
.contact-info .social-links a[href*="viber://chat"]:hover {
    background-color: #584F97; /* Темнее фиолетовый */
    border-color: #584F97;
    transform: translateY(-3px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}

/* Telegram */
.contact-info .social-links a[href*="t.me"] {
    background-color: var(--telegram-blue, #0088CC); /* Использование переменной или запасного цвета */
    border-color: var(--telegram-blue, #0088CC);
}
.contact-info .social-links a[href*="t.me"]:hover {
    background-color: #0077B3; /* Темнее синий */
    border-color: #0077B3;
    transform: translateY(-3px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}

/* --- Медиа-запросы для адаптивности (если кнопки становятся слишком большими на маленьких экранах) --- */
@media (max-width: 768px) {
    .contact-info .social-links {
        flex-direction: column; /* Кнопки в столбик на узких экранах */
        align-items: center; /* Центрируем по горизонтали */
    }
    .contact-info .social-links a {
        width: 100%; /* Занимают всю доступную ширину */
        max-width: 280px; /* Но не шире, чем этот размер */
    }
}


/* --- Медиа-запросы для адаптивности (ОЧЕНЬ ВАЖНО для мобильных) --- */
@media (max-width: 768px) {
    /* Общие корректировки для контейнеров страниц на мобильных */
    .shop-main, .rent-main {
        width: 95%; /* Большая ширина на мобильных */
        margin: 10px auto; /* Отступы и центрирование */
        padding: 15px; /* Внутренние отступы */
    }

    /* !!! Корректировки для Хедера на мобильных !!! */
    header {
        padding: 15px 0; /* Уменьшаем вертикальные отступы для хедера */
    }

    .header-container {
        flex-direction: column-reverse; /* Элементы хедера располагаются в колонку, меняем порядок */
        text-align: center; /* Выравнивание по центру */
        gap: 5px; /* Уменьшим отступы между элементами в хедере */
    }

    header h1 {
        font-size: 1.6em; /* Еще немного уменьшим размер заголовка на мобильных */
        white-space: normal; /* Позволим заголовку переноситься на новую строку */
        line-height: 1.2; /* Улучшим межстрочный интервал для многострочных заголовков */
    }

    header nav ul {
        flex-direction: column; /* Пункты меню тоже в колонку */
        gap: 8px; /* Уменьшим отступы между пунктами меню */
        width: 100%; /* Занимают всю доступную ширину */
    }

    header nav a {
        padding: 6px 0; /* Уменьшим отступы для ссылок меню */
        font-size: 1em; /* Немного уменьшим размер шрифта навигации */
        border-bottom: 1px solid rgba(236, 240, 241, 0.1); /* Легкий разделитель для мобильного меню */
    }

    header nav li:last-child a {
        border-bottom: none; /* Убираем нижнюю границу у последнего элемента меню */
    }

    .language-currency-switcher {
        flex-direction: column; /* Селекты также в колонку */
        gap: 8px; /* Уменьшим отступы между селекторами */
        width: 100%; /* Занимают всю доступную ширину */
    }

    .language-currency-switcher select {
        padding: 6px 8px; /* Уменьшим отступы для селектов */
        font-size: 0.9em; /* Уменьшим размер шрифта селектов */
    }

    /* Остальные адаптивные стили */
    h1 { /* Этот h1 будет переопределен h1[data-key="rent_main_title"] на странице rent.html */
        font-size: 1.8em;
    }

    .nav-buttons-group {
        flex-direction: column; /* Кнопки в колонку */
        gap: 10px; /* Отступ между кнопками */
    }

    .nav-button {
        width: 80%; /* Ширина кнопки */
        max-width: 250px; /* Максимальная ширина */
        text-align: center; /* Выравнивание по центру */
        box-sizing: border-box; /* Учитываем padding в общей ширине */
    }

    /* АДАПТИВНЫЕ СТИЛИ ДЛЯ НОВЫХ КАТЕГОРИЙ С ИЗОБРАЖЕНИЯМИ */
    .category-grid {
        gap: 10px; /* Отступ между элементами */
        padding: 0; /* Убираем внутренний отступ */
        grid-template-columns: repeat(2, 1fr); /* 2 столбца на мобильных */
    }

    .category-item {
        flex-shrink: 0; /* Не сжимаем элемент */
        min-width: 100px; /* Минимальная ширина */
        padding: 10px 5px; /* Внутренние отступы */
    }
    /* Стили для контейнера кнопки Telegram (как a.custom-messenger-button) */
.custom-messenger-button.telegram-button {
    background-color: #0088CC; /* Фирменный синий цвет Telegram */
    border: 1px solid #0088CC;
    color: #FFFFFF; /* Цвет текста и иконки по умолчанию */
    padding: 6px 12px; /* Ваш текущий отступ */
    min-width: 100px; /* Ваш текущий min-width */
    display: flex; /* Для выравнивания иконки и текста */
    align-items: center; /* Выравнивание по центру по вертикали */
    justify-content: center; /* Выравнивание по центру по горизонтали */
    border-radius: 4px; /* Если у вас есть скругление углов */
    text-decoration: none; /* Убрать подчеркивание ссылки */
    transition: background-color 0.3s ease; /* Плавный переход для ховера */
}

/* Эффект при наведении на кнопку Telegram */
.custom-messenger-button.telegram-button:hover {
    background-color: #0077B3; /* Немного темнее при наведении */
    border-color: #0077B3;
}

/* Стиль для иконки Font Awesome внутри кнопки Telegram */
.custom-messenger-button.telegram-button i.far.fa-telegram-plane {
    font-family: "Font Awesome 6 Regular" !important; /* Убеждаемся, что используется Font Awesome Regular */
    font-weight: 400 !important; /* Font Awesome Regular обычно 400 */
    color: #FFFFFF !important; /* Цвет иконки белый */
    margin-right: 8px; /* Отступ справа от иконки до текста, как на ваших скриншотах */
    /* Убедимся, что иконка не скрыта */
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Стиль для текста (<span>) внутри кнопки Telegram */
.telegram-button span {
    color: #FFFFFF !important; /* Цвет текста белый */
    font-family: 'Arial', sans-serif !important; /* Шрифт Arial, как вы хотели */
    font-size: 14.4px !important; /* Размер шрифта, как на ваших скриншотах */
    font-weight: normal !important; /* Обычное начертание */
    /* Убедимся, что текст не скрыт */
    display: inline !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Медиа-запрос, если у вас есть специфичные стили для мобильных */
@media (max-width: 768px) {
    .custom-messenger-button.telegram-button {
        /* Если нужно изменить размер шрифта или отступы на мобильных */
        /* font-size: 0.8em; */
        /* padding: 8px 10px; */
    }
}

    /* Корректировки для заголовка "Прокат Мужских Костюмов" на мобильных */
    h1[data-key="rent_main_title"] {
        text-align: center; /* Центрируем текст на мобильных */
        margin: 0 auto 10px auto; /* Центрируем сам блок h1 по горизонтали, 10px снизу */
        font-size: 1.2rem; /* Уменьшаем шрифт для мобильных */
    }
}

/* Медиа-запрос для десктопов (шире 768px) */
@media (min-width: 769px) {
    .category-grid {
        grid-template-columns: repeat(auto-fit, auto); /* Адаптивное количество столбцов на десктопе */
        /* Или, если вы хотите жестко 6 столбцов: */
        /* grid-template-columns: repeat(6, 1fr); */
    }
}
/* --- Медиа-запросы для адаптивности --- */
@media (max-width: 768px) {
    /* Для всех мобильных устройств и планшетов (до 768px) */
    .contact-info .social-links {
        flex-direction: column; /* Кнопки в столбик */
        align-items: center; /* Центрируем столбик кнопок по горизонтали */
    }

    .contact-info .social-links a {
        max-width: 100px; /* Устанавливаем максимальную ширину 100px */
        padding: 8px 10px; /* Немного уменьшаем padding, чтобы текст лучше помещался */
        font-size: 0.85em; /* Уменьшаем размер шрифта текста кнопки */
    }

    .contact-info .social-links a i {
        font-size: 18px; /* Уменьшаем размер иконки */
        margin-right: 5px; /* Уменьшаем отступ справа от иконки */
    }
}
.footer-contact-info .fa-square-phone-flip {
  margin-right: 15px;
  font-size: 24px;
  vertical-align: middle;
}