/* Общие стили для всего тела страницы и основных заголовков */
        body {
            font-family: 'Inter', sans-serif; /* Применяем шрифт Inter */
            background-color: #f8fafc; /* Очень светлый фон страницы */
            color: #1f2937; /* Темно-серый цвет текста */
        }
        /* Стили для всех заголовков H1, H2, H3, H4 */
        h1, h2, h3, h4 {
            color: #0D4766; /* Глубокий синий цвет для всех заголовков */
        }
        /* Стили для главного заголовка страницы H1 */
        h1 {
            font-size: 2.5rem; /* Крупный размер шрифта */
            font-weight: 700; /* Жирный шрифт */
            margin-bottom: 1.5rem; /* Отступ снизу */
            text-align: center; /* Выравнивание по центру */
        }
        /* Стили для подзаголовков секций H2 */
        h2 {
            font-size: 2rem; /* Большой размер шрифта */
            font-weight: 600; /* Полужирный шрифт */
            margin-top: 2rem; /* Отступ сверху */
            margin-bottom: 1rem; /* Отступ снизу */
            text-align: center; /* Выравнивание по центру */
        }
        /* Стили для заголовков третьего уровня H3 */
        h3 {
            font-size: 1.5rem; /* Средний размер шрифта */
            font-weight: 500; /* Нормальный шрифт */
            margin-top: 1.5rem; /* Отступ сверху */
            margin-bottom: 0.75rem; /* Отступ снизу */
        }
        /* Стили для заголовков четвертого уровня H4 */
        h4 {
            font-size: 1.25rem; /* Меньший размер шрифта */
            font-weight: 500; /* Нормальный шрифт */
            margin-top: 1rem; /* Отступ сверху */
            margin-bottom: 0.5rem; /* Отступ снизу */
        }
        /* Стили для всех секций контента на странице */
        section {
            background-color: #ffffff; /* Белый фон */
            padding: 2rem; /* Внутренние отступы со всех сторон */
            border-radius: 0.75rem; /* Скругленные углы */
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Легкая тень */
            margin-bottom: 2rem; /* Отступ снизу */
        }
        /* Стили для стандартных списков (если используются вне спойлеров) */
        ul, ol {
            list-style-position: inside; /* Маркеры внутри блока текста */
            margin-left: 1rem; /* Отступ слева */
            margin-bottom: 1rem; /* Отступ снизу */
        }
        /* Стиль для выделенного текста */
        strong {
            font-weight: 600; /* Полужирный шрифт */
        }
        /* Стили для элементов FAQ (вопрос-ответ), использующих теги <details> и <summary> */
        details {
            background-color: #e0f2f7; /* Светло-синий фон */
            border-radius: 0.5rem; /* Скругленные углы */
            margin-bottom: 0.75rem; /* Отступ снизу */
            overflow: hidden; /* Скрываем содержимое, выходящее за границы */
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); /* Легкая тень */
        }
        summary {
            padding: 1rem 1.5rem; /* Внутренние отступы */
            font-weight: 600; /* Полужирный шрифт */
            color: #0D4766; /* Темно-синий текст */
            cursor: pointer; /* Курсор-указатель при наведении */
            display: flex; /* Используем flexbox для выравнивания текста и стрелки */
            justify-content: space-between; /* Распределяем пространство между текстом и стрелкой */
            align-items: center; /* Выравниваем элементы по центру по вертикали */
            position: relative; /* Для позиционирования стрелки */
        }
        details[open] summary {
            background-color: #d1ecf1; /* Чуть темнее фон при открытии */
        }
        details p {
            padding: 0.5rem 1.5rem 1rem; /* Внутренние отступы для текста ответа */
            color: #4b5563; /* Темно-серый текст */
        }

        /* НОВЫЙ ДИЗАЙН ТАБЛИЦЫ/КАРТОЧКИ ВИЗЫ (.visa-card) */
        /* Этот блок отвечает за внешний вид карточки с основной информацией о визе */
        .visa-card {
            margin-top: 20px; /* Отступ сверху */
            margin-bottom: 10px; /* Отступ снизу */
            background-color: #F7F7F7; /* Светло-серый фон */
            box-shadow: 0 4px 6px rgba(0,0,0,0.1), 0 1px 3px rgba(0,0,0,0.08); /* Улучшенная тень */
            padding: 25px; /* Внутренние отступы */
            width: 100%; /* Занимает всю доступную ширину */
            border-radius: 1rem; /* Более закругленные углы */
            display: flex; /* Использование Flexbox для выравнивания содержимого */
            flex-direction: column; /* Элементы располагаются вертикально */
            align-items: center; /* Выравнивание по центру по горизонтали */
            text-align: center; /* Выравнивание текста по центру */
        }

        .visa-card-header {
            font-size: 1.8rem; /* Большой размер шрифта для заголовка карточки */
            font-weight: 700; /* Жирный шрифт */
            color: #0D4766; /* Темно-синий заголовок */
            margin-bottom: 20px; /* Отступ снизу */
            padding-bottom: 10px; /* Отступ снизу для линии */
            border-bottom: 2px solid #e2e8f0; /* Линия под заголовком */
            width: 100%; /* Занимает всю ширину */
        }

        .visa-info-item {
            display: flex; /* Использование Flexbox для элементов информации */
            align-items: center; /* Выравнивание по центру по вертикали */
            justify-content: center; /* Центрируем содержимое по горизонтали */
            margin-bottom: 15px; /* Отступ между элементами информации */
            width: 100%; /* Занимает всю ширину */
            font-size: 1.1rem; /* Размер шрифта */
            color: #374151; /* Темнее текст информации */
        }

        .visa-info-item i {
            margin-right: 10px; /* Отступ справа от иконки */
            color: #4a5568; /* Цвет иконок */
            font-size: 1.3em; /* Размер иконок */
        }

        /* Стили для нового блока действий (с кнопками WhatsApp и Документы) */
        .visa-actions-card {
            background-color: #ffffff; /* Белый фон */
            box-shadow: 0 4px 6px rgba(0,0,0,0.1), 0 1px 3px rgba(0,0,0,0.08); /* Тень */
            border-radius: 1rem; /* Скругленные углы */
            padding: 25px; /* Внутренние отступы */
            width: 100%; /* Занимает всю доступную ширину */
            text-align: center; /* Выравнивание текста по центру */
            margin-top: 20px; /* Отступ сверху для мобильных */
        }
        @media (min-width: 768px) {
            .visa-actions-card {
                margin-top: 0; /* Убираем верхний отступ на десктопе, так как будет flex-gap */
                width: 100%; /* Занимает всю доступную ширину */
            }
        }

        /* ОБНОВЛЕННЫЕ СТИЛИ ДЛЯ КНОПОК (.button-whatsapp, .previewLink) */
        /* Стили для кнопки WhatsApp */
        .button-whatsapp {
            background: linear-gradient(to right, #1ebea5, #008069); /* Градиентный фон */
            border: none; /* Убираем рамку */
            border-radius: 10px; /* Скругленные углы */
            cursor: pointer; /* Курсор-указатель */
            outline: none; /* Убираем обводку при фокусе */
            padding: 12px 20px; /* Увеличенные внутренние отступы */
            font-family: 'Inter', sans-serif; /* Шрифт */
            font-size: 18px !important; /* Увеличенный размер шрифта */
            font-weight: 700 !important; /* Жирный шрифт */
            letter-spacing: .02em; /* Межбуквенный интервал */
            width: 100%; /* Занимает всю доступную ширину */
            box-sizing: border-box; /* Учитываем padding и border в ширине */
            transition: all 0.3s ease; /* Плавный переход всех свойств */
            margin-bottom: 10px; /* Отступ между кнопками */
            box-shadow: 0 4px 6px rgba(0, 128, 105, 0.3); /* Тень для кнопки */
        }

        .button-whatsapp a {
            color: #ffffff !important; /* Белый цвет текста ссылки - добавлено !important */
            text-decoration: none; /* Без подчеркивания */
            display: flex; /* Flexbox для содержимого ссылки */
            justify-content: center; /* Центрирование по горизонтали */
            align-items: center; /* Центрирование по вертикали */
            white-space: nowrap; /* Запрет переноса текста */
        }
        /* Убираем стили для img внутри button-whatsapp, так как иконка удалена */
        .button-whatsapp img {
            display: none; /* Скрываем изображение */
        }
        .button-whatsapp:hover {
            transform: translateY(-2px); /* Небольшой подъем при наведении */
            box-shadow: 0 6px 10px rgba(0, 128, 105, 0.4); /* Увеличенная тень при наведении */
            opacity: 0.9; /* Небольшая прозрачность */
        }

        /* Стили для кнопки "Список документов" */
        .previewLink {
            display: flex; /* Flexbox для содержимого */
            align-items: center; /* Выравнивание по центру по вертикали */
            justify-content: center; /* Центрирование по горизонтали */
            padding: 10px 15px; /* Внутренние отступы */
            height: 48px; /* Фиксированная высота для единообразия */
            border: 1px solid rgba(6,52,91,.8); /* Рамка */
            text-transform: uppercase; /* Текст в верхнем регистре */
            text-align: center; /* Выравнивание текста по центру */
            font-size: 16px !important; /* Размер шрифта */
            color: rgba(6,52,91,.8) !important; /* Цвет текста */
            text-decoration: none !important; /* Без подчеркивания */
            font-weight: 700 !important; /* Жирный шрифт */
            width: 100%; /* Занимает всю доступную ширину */
            box-sizing: border-box; /* Учитываем padding и border в ширине */
            border-radius: 10px; /* Скругленные углы */
            transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; /* Плавный переход */
        }
        .previewLink:hover {
            color: #007bff !important; /* Цвет текста при наведении */
            background-color: #f0f8ff; /* Фон при наведении */
            border-color: #007bff; /* Цвет рамки при наведении */
            text-decoration: none !important; /* Без подчеркивания при наведении */
        }
        .fa-angle-down{
            padding-left: 12px; /* Отступ слева для иконки стрелки */
        }

        /* Стили для модального окна со списком документов */
        .visa-modal.modal{
            padding-right: 16px !important; /* Отступ справа */
        }

        .visa-modal .modal-dialog {
            max-width: 1000px; /* Максимальная ширина модального окна */
        }

        /* ОБНОВЛЕННЫЕ СТИЛИ ДЛЯ СПИСКА ДОКУМЕНТОВ В МОДАЛЬНОМ ОКНЕ */
        .modal-body ol.listDocs {
            list-style-type: decimal; /* Четкая нумерация */
            list-style-position: outside; /* Маркеры снаружи элемента списка */
            padding-left: 30px; /* Достаточный отступ для номеров */
            margin: 0;
        }

        .modal-body ul.listDocs {
            list-style-type: disc; /* Четкие маркеры */
            list-style-position: outside; /* Маркеры снаружи элемента списка */
            padding-left: 30px; /* Достаточный отступ для маркеров */
            margin: 0;
        }

        .modal-body ol.listDocs li,
        .modal-body ul.listDocs li {
            margin-bottom: 0.2rem; /* Ещё меньше отступ между строками */
            line-height: 1.2; /* Более плотный межстрочный интервал */
            text-align: left;
            /* Убрали display: flex с самого li, чтобы не ломать нумерацию/маркеры */
        }

        .modal-body .list-item-content-wrapper {
            display: flex; /* Flexbox для содержимого внутри li */
            justify-content: space-between; /* Распределение элементов по ширине */
            align-items: flex-start; /* Выравнивание элементов по верху */
            flex-grow: 1; /* Разрешаем содержимому растягиваться */
            width: 100%; /* Занимаем всю доступную ширину */
        }
        
        /* Скрываем иконки из предыдущих итераций, если они попали во вложенные списки (убрана, т.к. может конфликтовать) */
        /* .modal-body ul.listDocs li i {
            display: none; 
        } */

        /* Стили для заголовков в модальном окне для компактности */
        .modal-body h3, .modal-body h4 {
            border-bottom: none; /* Убрал полоску */
            padding-bottom: 0;
            margin-bottom: 0.5rem; /* Уменьшенный отступ снизу */
            margin-top: 1rem; /* Уменьшенный отступ сверху */
        }
        /* Убираем верхний отступ для самого первого h3 в теле модального окна, чтобы он не был слишком прижат */
        .modal-body h3:first-of-type {
            margin-top: 0; 
        }

        .modal-body p {
            line-height: 1.3; /* Уменьшил межстрочный интервал для абзацев */
            margin-bottom: 0.3rem; /* Уменьшил отступ снизу для абзацев */
            text-align: justify; /* Выравнивание текста по краям */
        }

        /* Custom Spoiler Styles for mobile-only collapse */
        .spoiler-header-custom {
            display: flex;
            justify-content: space-between;
            align-items: center;
            cursor: pointer;
            padding: 1rem 1.5rem;
            background-color: #e0f2f7;
            border-radius: 0.5rem;
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
            margin-bottom: 0.75rem;
            color: #0D4766;
            font-weight: 600;
        }
        .spoiler-header-custom:hover {
            background-color: #d1ecf1;
        }

        .spoiler-arrow-custom {
            transition: transform 0.3s ease;
        }

        .spoiler-header-custom.open .spoiler-arrow-custom {
            transform: rotate(180deg);
        }

        .spoiler-content-custom {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.5s ease-out;
            padding: 0 1rem;
        }

        .spoiler-content-custom.open {
            max-height: 1000px;
            padding-bottom: 1rem;
        }

        /* Адаптивные стили: на десктопе контент спойлеров всегда виден, стрелка скрыта */
        @media (min-width: 768px) {
            .spoiler-content-custom {
                max-height: none !important;
                overflow: visible !important;
                padding: 0 !important;
            }
            .spoiler-arrow-custom {
                display: none;
            }
            .spoiler-header-custom {
                cursor: default;
                background-color: transparent;
                box-shadow: none;
                padding: 0;
                margin-bottom: 1rem;
                display: block;
            }
            .spoiler-header-custom h2 {
                margin-top: 2rem !important;
                margin-bottom: 1rem !important;
                text-align: center !important;
                font-size: 2rem !important; /* Default large size for desktop */
                font-weight: 600 !important;
                color: #0D4766 !important;
            }
            /* Hide the short H2 on desktop */
            .spoiler-header-custom .md\:hidden {
                display: none !important;
            }
            /* Show the long H2 on desktop */
            .spoiler-header-custom .hidden.md\:block {
                display: block !important;
            }
        }

        /* Styles for mobile H2 inside spoiler header */
        .spoiler-header-custom h2.md\:hidden {
            font-size: 1.25rem !important; /* Smaller size for mobile to prevent overflow */
            text-align: left !important; /* Align left for better mobile fit */
            white-space: normal; /* Ensure text wraps naturally */
            word-break: break-word; /* Break long words if necessary */
        }


        /* Styles for lists with icons inside spoiler sections */
        .spoiler-icon-list {
            list-style-type: none !important; /* Remove default list bullets/numbers */
            padding-left: 0; /* Remove default padding */
            margin-left: 0; /* Remove default margin */
        }

        .spoiler-icon-list li {
            display: flex; /* Use flexbox to align icon, text, and info icon */
            align-items: flex-start; /* Align items to the top */
            margin-bottom: 0.8rem; /* Vertical spacing between list items */
            text-align: left; /* Ensure text aligns to the left */
        }

        .spoiler-icon-list li > .fa { /* Target the primary icon (e.g., fa-user-secret) directly inside li */
            margin-right: 15px; /* Space between icon and text content */
            flex-shrink: 0; /* Prevent this icon from shrinking */
            font-size: 20px; /* Consistent size for primary icons */
            color: #065F46 !important; /* Consistent color for primary icons */
            margin-top: 2px; /* Adjust vertical alignment to text baseline */
        }

        .spoiler-icon-list li .text-content { /* Container for the bold text and popover icon */
            display: flex;
            align-items: flex-start; /* Align contents to the top */
            flex-grow: 1; /* Allow this container to take up remaining space */
            justify-content: space-between; /* Push the info icon to the right */
            line-height: 1.4; /* Consistent line height for text */
        }

        .spoiler-icon-list li strong { /* Styling for the brief bold phrase */
            font-weight: 600; /* Ensure bold */
            margin-right: 5px; /* Space between bold text and info icon */
            line-height: 1.4; /* Consistent line height */
        }

        .spoiler-icon-list li .more-details-icon { /* Styling for the info circle icon */
            margin-left: 10px; /* Space between text and info icon */
            flex-shrink: 0; /* Prevent info icon from shrinking */
            margin-top: 2px; /* Adjust vertical alignment if needed */
        }


        /* Styles for the floating contact widget */
        .floating-contact-widget {
            position: fixed;
            bottom: 20px;
            right: 20px;
            z-index: 1000;
            background-color: #ffffff;
            border-radius: 15px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
            overflow: hidden;
            transition: all 0.3s ease-in-out;
            width: 60px;
            height: 60px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
        }

        .floating-contact-widget.expanded {
            width: 280px;
            height: auto;
            padding: 20px;
            align-items: flex-start;
            flex-direction: column;
        }

        .floating-contact-widget .collapsed-icon {
            font-size: 28px;
            color: #008069;
            transition: opacity 0.3s ease;
        }

        .floating-contact-widget.expanded .collapsed-icon {
            opacity: 0;
            pointer-events: none;
        }

        .floating-contact-widget .expanded-content {
            display: none;
            flex-direction: column;
            align-items: center;
            width: 100%;
            text-align: center;
        }

        .floating-contact-widget.expanded .expanded-content {
            display: flex;
        }

        .floating-contact-widget .manager-photo {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            object-fit: cover;
            margin-bottom: 15px;
            border: 3px solid #e0f2f7;
        }

        .floating-contact-widget .manager-name {
            font-size: 1.25rem;
            font-weight: 600;
            color: #0D4766;
            margin-bottom: 5px;
        }

        .floating-contact-widget .manager-title {
            font-size: 0.9rem;
            color: #4b5563;
            margin-bottom: 20px;
        }

        .floating-contact-widget .contact-buttons {
            display: flex;
            flex-direction: column;
            gap: 10px;
            width: 100%;
        }

        .floating-contact-widget .contact-buttons .button {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 10px 15px;
            border-radius: 8px;
            font-weight: 600;
            text-decoration: none;
            color: #ffffff;
            transition: background-color 0.3s ease, transform 0.2s ease;
        }

        .floating-contact-widget .contact-buttons .button i {
            margin-right: 8px;
            font-size: 1.2em;
        }

        .floating-contact-widget .contact-buttons .whatsapp-button {
            background: linear-gradient(to right, #1ebea5, #008069);
            box-shadow: 0 4px 8px rgba(0, 128, 105, 0.3);
        }

        .floating-contact-widget .contact-buttons .whatsapp-button:hover {
            opacity: 0.9;
            transform: translateY(-2px);
        }

        .floating-contact-widget .contact-buttons .instagram-button {
            background: linear-gradient(to right, #C13584, #833AB4); /* Instagram gradient */
            box-shadow: 0 4px 8px rgba(131, 58, 180, 0.3);
        }

        .floating-contact-widget .contact-buttons .instagram-button:hover {
            opacity: 0.9;
            transform: translateY(-2px);
        }

        /* Custom styles for popovers */
        .popover {
            max-width: 300px; /* Ограничиваем ширину всплывающей подсказки */
            border: 1px solid #e0f2f7; /* Легкая рамка */
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); /* Мягкая тень */
            border-radius: 0.5rem;
            opacity: 1 !important; /* Убедимся, что всплывающая подсказка всегда видна */
        }
        .popover-body {
            color: #1f2937; /* Черный цвет текста */
            font-size: 12px; /* Размер шрифта 12px */
            padding: 1rem; /* Внутренние отступы */
            text-align: justify; /* Выравнивание текста по краям */
            line-height: 1.4;
        }
        /* Force font size and text alignment for content inside popover-body */
        .popover-body p,
        .popover-body ul,
        .popover-body ol,
        .popover-body li,
        .popover-body strong {
            font-size: 12px !important; /* Принудительно устанавливаем размер шрифта */
            text-align: justify !important; /* Принудительно устанавливаем выравнивание по краям */
            line-height: inherit; /* Наследуем межстрочный интервал */
            margin: 0; /* Убираем лишние отступы, которые могут быть у p и li */
            padding: 0; /* Убираем лишние отступы */
        }
        .popover-body ul,
        .popover-body ol {
            list-style-position: outside; /* Маркеры/нумерация снаружи */
            padding-left: 20px; /* Отступ для маркеров/номеров */
        }
        /* Style for lists within popovers to ensure correct markers */
        .popover-body ul.list-disc {
            list-style-type: disc !important;
        }
        .popover-body ol.list-decimal {
            list-style-type: decimal !important;
        }
        
        .popover-header {
            display: none; /* Скрываем заголовок всплывающей подсказки */
        }
        /* Стрелка всплывающей подсказки */
        .popover.bs-popover-right > .arrow::before {
            border-right-color: #e0f2f7; /* Цвет рамки стрелки */
        }
        .popover.bs-popover-right > .arrow::after {
            border-right-color: #fff; /* Цвет тела стрелки */
        }
        /* New styles for left-aligned popovers */
        .popover.bs-popover-left > .arrow::before {
            border-left-color: #e0f2f7; /* Цвет рамки стрелки для левой стороны */
        }
        .popover.bs-popover-left > .arrow::after {
            border-left-color: #fff; /* Цвет тела стрелки для левой стороны */
        }
        /* Стили для ссылки "подробнее >" - теперь это иконка */
        .more-details-icon {
            margin-left: 10px; /* Отступ слева от текста пункта */
            color: #007bff; /* Синий цвет иконки */
            font-size: 1.1em; /* Размер иконки */
            cursor: pointer; /* Курсор-указатель */
            transition: color 0.2s ease;
            text-decoration: none !important; /* Убираем подчеркивание, если вдруг Bootstrap добавит */
        }
        .more-details-icon:hover {
            color: #0056b3; /* Темнее синий при наведении */
        }

        /* Styles for details summary arrow */
        .modal-body details summary::-webkit-details-marker {
            display: none; /* Hide default marker for Webkit */
        }

        .modal-body details summary {
            list-style: none; /* Hide default marker for other browsers */
            position: relative; /* For custom arrow positioning */
        }

        .modal-body details summary .summary-arrow {
            transition: transform 0.3s ease;
            margin-left: auto; /* Push to the right */
            font-size: 1.2em; /* Make it visible */
            color: #0D4766; /* Match header color */
        }

        .modal-body details[open] summary .summary-arrow {
            transform: rotate(180deg);
        }