/* ===== КОНТЕЙНЕР СТРАНИЦЫ ===== */
.about-page-container {
    max-width: 1200px; /* Ограничиваем ширину текстового блока для удобства чтения */
    margin: 0 auto;
    padding: 80px 20px 10px 20px;
    box-sizing: border-box;
}

.no-break {
    white-space: nowrap;
}

/* ===== ЗАГОЛОВОК СТРАНИЦЫ ===== */
.about-page-title {
    font-family: 'AeroMaticsStencil-Regular', sans-serif;
    font-weight: 400;
    color: #cecac3;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    text-align: center;
    
    /* Адаптивный размер: плавно уменьшается от 155px, занимая максимум ширины */
    font-size: clamp(38px, 15.5vw, 155px);
    
    /* Запрещаем перенос на две строки на мобильных */
    white-space: nowrap; 
    width: 100%;
    
    /* Динамический отступ вниз до блока статистики */
    margin-bottom: clamp(30px, 5vw, 50px);
}

/* ===== БЛОК СТАТИСТИКИ ===== */
.about-stats-grid {
    display: flex;
    justify-content: center; /* Центрируем плашки по горизонтали */
    flex-wrap: nowrap; /* ЗАПРЕЩАЕМ перенос блоков на новые строки */
    gap: clamp(5px, 2vw, 25px); /* Динамический зазор между квадратами */
    margin-bottom: clamp(20px, 6vw, 50px);
    width: 100%;
    max-width: 600px; /* Чтобы на десктопе они не разъезжались слишком широко */
    margin-left: auto;
    margin-right: auto;
}

/* Компактные прямоугольники статистики */
.about-stat-box {
    background-color: #394650;
    width: clamp(96px, 14vw, 160px); /* Аккуратная ширина: чуть шире текста, одинаковая для всех */
    height: clamp(72px, 10.5vw, 120px); /* Делаем их соразмерными по высоте */
    border-radius: clamp(7px, 1.3vw, 16px);     /* Скругление углов */
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    padding: 5px;
}

/* Цифры */
.about-stat-box .stat-number {
    font-family: 'AeroMaticsStencil-Regular', sans-serif;
    color: #cecac3;
    font-size: clamp(38px, 6.8vw, 75px);
    line-height: 1;
    margin-bottom: 2px;
}

/* Подписи (жетонов/городов/стран) */
.about-stat-box .stat-label {
    font-family: 'AeroMaticsStencil-Regular', sans-serif;
    color: #cecac3;
    font-size: clamp(16px, 2.6vw, 28px);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1.1;
}

/* ===== БЛОК ОСНОВНОГО ТЕКСТА ===== */
.about-text-content {
    background: rgba(0, 0, 0, 0.338); /* Твоя фирменная подложка */
    padding: clamp(25px, 4vw, 45px);
    color: #a1b7ca;
    font-family: 'mossansregular', sans-serif;
    font-size: clamp(22px, 2.4vw, 27px);
    line-height: 1.8;
    text-align: justify;       /* Выравнивание основного массива текста по ширине */
    text-align-last: left;     /* Последняя строка каждого абзаца прижимается влево */

}

.about-text-content p {
    margin-top: 0;
    margin-bottom: 1.5em;
}

.about-text-content p:last-child {
    margin-bottom: 0;
}

/* Ссылка на Условия использования */
.about-text-content a.open-terms-popup-link {
    color: #a1b7ca !important;         /* Удерживаем правильный цвет */
    font-family: inherit !important;   /* Наследуем mossansregular из родительского абзаца */
    font-size: inherit !important;     /* Наследуем размер шрифта из родительского абзаца */
    font-weight: inherit !important;   /* Наследуем толщину текста */
    text-decoration: underline;
    transition: color 0.2s ease;
}

.about-text-content a.open-terms-popup-link:hover {
    color: #cecac3 !important;
}

.about-text-content a.open-terms-popup-link:focus:not(:focus-visible) {
    color: #a1b7ca !important;
    outline: none;
}

/* Mobile Chrome can keep :hover after a touch swipe. This state is applied
   after closing the terms dialog to restore the normal link color. */
.about-text-content a.open-terms-popup-link.terms-link-reset-color,
.about-text-content a.open-terms-popup-link.terms-link-reset-color:hover {
    color: #a1b7ca !important;
}

.about-text-content a.open-terms-popup-link:active,
.about-text-content a.open-terms-popup-link.terms-link-reset-color:active {
    color: #cecac3 !important;
}

/* ===== ОБЩИЙ КОНТЕЙНЕР ДЛЯ ВСЕЙ ИНСТАЛЛЯЦИИ ===== */
.intercom-installation {
    max-width: 800px; /* Растягиваем общую инсталляцию до ширины твоего устройства */
    margin: clamp(70px, 9vw, 80px) auto !important;
    display: flex;
    flex-direction: column;
    align-items: center; /* Центрирует и табличку, и аппарат строго по горизонтальной оси */
    width: 100%;
    padding: 0 10px;
}

/* Табличка вагона */
.intercom-vagon-plate {
    width: 60%; /* Делаем её чуть уже самого аппарата, чтобы смотрелось пропорционально */
    margin-bottom: clamp(30px, 8vw, 90px) !important; /* Отступ между номером вагона и аппаратом */
}

.intercom-vagon-plate img {
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto; /* Центрируем саму картинку внутри её блока */
}

/* Переговорное устройство */
.intercom-wrapper {
    position: relative;
    width: 100%; /* Теперь оно занимает всю ширину контейнера .intercom-installation (800px) */
    margin: 0 auto; 
    display: block;
}

.intercom-base {
    width: 100%;
    height: auto;
    display: block;
}

/* Скрытая картинка (нажатие) */
.intercom-hover {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none; /* Запрещаем кликать по этой картинке, клик ловит только кнопка */
    z-index: 1;
}

/* Невидимая триггер-зона над самой кнопкой */
.intercom-btn {
    position: absolute;
    /* ЭТИ КООРДИНАТЫ НУЖНО БУДЕТ ПОДОГНАТЬ ПОД РЕАЛЬНОЕ РАСПОЛОЖЕНИЕ КНОПКИ НА КАРТИНКЕ */
    top: 65%;   
    left: 72.3%;
    width: 8%;
    height: 14.3%;
    background: transparent;
    border: none;
    cursor: pointer;
    z-index: 5;
    outline: none;
    -webkit-tap-highlight-color: transparent;
    /* 1. Запрещаем браузеру запускать скролл страницы, если движение пальца началось с кнопки */
    touch-action: none !important; 
    
    /* 2. Запрещаем вызов контекстного меню (копировать, сохранить картинку и т.д.) */
    -webkit-touch-callout: none !important; 
    
    /* 3. Полностью отключаем системное выделение элементов */
    -webkit-user-select: none !important;
    user-select: none !important;
}

/* Подсвечиваем по наведению ТОЛЬКО на устройствах с мышкой (ПК) */
@media (hover: hover) and (pointer: fine) {
    .intercom-btn:hover ~ .intercom-hover {
        opacity: 1;
    }
}

/* Это правило для JS оставляем без изменений */
.intercom-wrapper.is-pressed .intercom-hover {
    opacity: 1 !important;
}

/* Когда кнопка зажата через JS — плавно зажигаем лампочку */
.intercom-wrapper.is-pressed .intercom-hover {
    opacity: 1 !important;
}

/* ===== ПОПАП С ТАБЛИЧКОЙ ===== */
.intercom-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6); 
    z-index: 9999;
    display: none; /* Скрыто по умолчанию */
    
    /* ФИКС КЛАВИАТУРЫ: центрируем, но позволяем контенту нормально скроллиться, если высота экрана упала */
    justify-content: center;
    align-items: center;
    
    /* Уменьшили боковые отступы по краям всего попапа с 20px до 8px, освобождая место */
    padding: 10px 8px;
    box-sizing: border-box;
    -webkit-backdrop-filter: blur(8px); 
    backdrop-filter: blur(8px);         
    opacity: 0;
    transition: opacity 0.3s ease;
    
    /* Включаем вертикальный скролл на случай, если клавиатура съест всю высоту */
    overflow-y: auto; 
}

/* Класс включения попапа для плавной анимации */
.intercom-popup-overlay.is-active {
    opacity: 1;
}

.intercom-popup-container {
    position: relative;
    max-width: 700px; 
    
    /* Заставляем попап на мобилках занимать максимум места, оставляя только микро-зазоры */
    width: 100%;
    display: flex;
    flex-direction: column;
    filter: drop-shadow(0 15px 30px rgba(0,0,0,0.6));
    
    /* Предотвращаем схлопывание при открытии клавиатуры */
    margin: auto 0;
}

.intercom-popup-close {
    position: absolute;
    top: -15px;
    right: -40px;
    background: none;
    border: none;
    color: #cecac3;
    font-size: 40px;
    cursor: pointer;
    z-index: 10;
    transition: color 0.2s;
}

.intercom-popup-close:hover {
    color: #ffffff;
}

.intercom-popup-top img,
.intercom-popup-bottom img {
    width: 100%;
    display: block;
    position: relative;
}

.intercom-popup-top {
    z-index: 2; 
}

.intercom-popup-bottom {
    z-index: 2; 
}

.intercom-popup-middle {
    background-image: url('/wp-content/uploads/2025/09/mytischinsk_02.png');
    background-size: 100% 100%; 
    background-repeat: no-repeat;
    margin-top: -3px;  
    margin-bottom: -3px; 
    
    /* 
       Уменьшаем боковые внутренние отступы самой таблички с 40px до 25px на десктопе, 
       чтобы текстовым инпутам внутри было просторнее по ширине 
    */
    padding: 20px 40px 0 40px; 
    position: relative;
    z-index: 1;
}

/* ==========================================================================
   СТИЛИЗАЦИЯ ФОРМЫ FLUENT FORMS ВНУТРИ ТАБЛИЧКИ
   ========================================================================== */

/* 1. Названия полей (например: "Имя", "Email", "Сообщение") */
.intercom-form-wrapper .ff-el-form-label,
.intercom-form-wrapper .ff-el-is-required label {
    font-family: 'mossansregular', sans-serif !important; /* Твой шрифт */
    font-size: 18px !important;                          /* Размер шрифта названий */
    color: #1e252b !important;                           /* Темный цвет под стиль старых табличек */
    font-weight: bold !important;
    margin-bottom: 6px !important;
}

/* 2. Текст, который пользователь вводит внутри полей (Инпуты и Текстовое поле) */
.intercom-form-wrapper .ff-el-form-control {
    font-family: 'mossansregular', sans-serif !important; /* Шрифт внутри полей ввода */
    font-weight: 400 !important;
    font-size: 16px !important;                          /* Размер вводимого текста */
    color: #1e252b !important;                           /* Цвет вводимого текста */
    
    /* Дополнительно: делаем сами плашки полей аккуратными */
    background: rgba(255, 255, 255, 0.75) !important;    /* Полупрозрачный фон */
    border: 2px solid #394650 !important;                /* Цвет рамки */
    border-radius: 6px !important;                       /* Скругление углов */
    padding: 5px 7px 3px 7px !important;                       /* Внутренние отступы */
    /* ========================================================== */
    /* ЖЕСТКОЕ ВКЛЮЧЕНИЕ СГЛАЖИВАНИЯ БУКВ (УБИРАЕМ "ПОГРЫЗЕННОСТЬ") */
    /* ========================================================== */
    -webkit-font-smoothing: antialiased !important;  /* Для Safari и Chrome */
    -moz-osx-font-smoothing: grayscale !important;   /* Для Firefox на Mac */
    text-rendering: optimizeLegibility !important;   /* Улучшенный рендеринг текста */
    
    /* Трюк: переносим рендеринг инпута на видеокарту. */
    /* Это заставляет браузер пересчитать субпиксели и сгладить края */
    transform: translateZ(0);
}

/* 3. Текст подсказок (Placeholder — например, "Введите ваше имя") */
.intercom-form-wrapper .ff-el-form-control::placeholder {
    font-family: 'mossansregular', sans-serif !important;
    font-size: 19px !important;
    color: #62727e !important;                           /* Блеклый цвет для подсказки */
}

/* Настройка шрифта и размера для кнопок-переключателей "Жду ответ / Нет" */
.intercom-form-wrapper .ff-el-form-check-label span {
    font-family: 'mossansregular', sans-serif !important;
    font-size: 19px !important;                           
    color: #1e252b !important;                            
    font-weight: 500 !important;
    padding: 7px 10px 5px 10px !important;

    /* Тоже включаем сглаживание здесь */
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    text-rendering: optimizeLegibility !important;
}

/* Если плагин использует стандартные радио-кнопки в виде сетки плашек */
.intercom-form-wrapper .ff-el-form-check {
    font-family: 'mossansregular', sans-serif !important;
    font-size: 23px !important;                           /* Управляй размером тут */
    color: #1e252b !important;                            /* Цвет текста */
    font-weight: 500 !important;
}

/* 4. Шрифт и размер текста на кнопке отправки */
.intercom-form-wrapper .ff-btn-submit {
    font-family: 'AeroMaticsStencil-Regular', sans-serif !important; /* Твой трафаретный шрифт */
    font-size: 26px !important;                                    /* Размер текста на кнопке */
    text-transform: uppercase !important;                          /* Все буквы заглавные */
    letter-spacing: 0.05em !important;
    
    /* Делаем саму кнопку брутальной под дизайн сайта */
    background-color: #394650 !important;
    color: #cecac3 !important;
    padding: 6px 20px 4px 20px !important;
    border: none !important;
    border-radius: 6px !important;
    cursor: pointer;
    transition: all 0.2s ease;
}

/* Эффект при наведении на кнопку отправки */
.intercom-form-wrapper .ff-btn-submit:hover {
    background-color: #2e3840 !important;
    color: #ffffff !important;
}


/* ===== АДАПТИВНОСТЬ ДЛЯ МОБИЛЬНЫХ ТЕЛЕФОНОВ ===== */
@media (max-width: 768px) {

    .about-page-container {
        /* Уменьшили боковые отступы с 10px до 4px, чтобы заголовок занял всё свободное место */
        padding: clamp(25px, 5vw, 60px) 10px 10px 10px;
    }

    .about-stat-box {
        width: clamp(82px, 23vw, 110px); /* Аккуратная ширина: чуть шире текста, одинаковая для всех */
        height: clamp(61px, 17.3vw, 83px); /* Делаем их соразмерными по высоте */
        border-radius: clamp(7px, 1.3vw, 16px);
    }

    /* Цифры */
    .about-stat-box .stat-number {
        font-size: clamp(38px, 10.8vw, 55px);
        margin-bottom: -2px;
    }

    /* Подписи (жетонов/городов/стран) */
    .about-stat-box .stat-label {
        font-size: clamp(16px, 4.7vw, 22px);
    }

    .about-text-content {
        padding: clamp(15px, 3vw, 25px);
        font-size: clamp(17px, 2.4vw, 22px);
    }
}

/* Адаптив для крестика на мобилках */
@media (max-width: 600px) {
    .intercom-popup-close {
        right: 0;
        top: -40px;
    }

    .intercom-popup-middle {
        /* 
        Уменьшаем боковые внутренние отступы самой таблички с 40px до 25px на десктопе, 
        чтобы текстовым инпутам внутри было просторнее по ширине 
        */
        padding: 20px 25px 0 25px; 

    }

    /* Уменьшаем размер текста подсказок (Placeholder) на мобильных */
    .intercom-form-wrapper .ff-el-form-control::placeholder {
        font-size: 14px !important; /* Уменьшили с 19px, чтобы текст влезал полностью */
    }

    /* Уменьшаем размер текста на кнопке отправки на мобильных */
    .intercom-form-wrapper .ff-btn-submit {
        font-size: 19px !important; /* Уменьшили с 26px, чтобы кнопка стала аккуратной */
        padding: 6px 15px 4px 15px !important;
    }
    
    /* Дополнительно уменьшаем шрифт радио-кнопок на мобильных, чтобы не ломали форму */
    .intercom-form-wrapper .ff-el-form-check-label span,
    .intercom-form-wrapper .ff-el-form-check {
        font-size: 15px !important;
    }
}


/* Дополнительно: немного аккуратно ужмем внутренние поля формы на маленьких экранах */
@media (max-width: 480px) {
    .intercom-popup-middle {
        padding: 15px 20px 0 20px !important; /* Чуть меньше отступы внутри самой таблички, чтобы тексту было просторнее */
    }
}