/* =============================================
   0. Custom Fonts
   ============================================= */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;600;700&display=swap');

@font-face {
    font-family: 'ManropeLocal';
    src: url('/pwa/images/Manrope-Light.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}
/* =============================================
   1. CSS Variables & Theme
   ============================================= */
:root {
    --bg-color: #EAEBF0;
    --card-bg: #EEEFF3;
    --text-color: #212529;
    --input-bg: #F8F9FA;
    --input-border: #C6C6C6;
    --theme-primary: #5BBBDD;
    
    /* Статусы в шапке (в сети/не в сети) */
    --status-online: #22995e;
    --status-offline: #DD7682;
    --btn-close-filter: none;
    
    /* Цвета Главной Кнопки */
    --btn-inner-bg: #ffffff;
    --main-text-color: #4A5768;      /* Цвет надписи УДЕРЖИВАЙТЕ */
    --status-text-color: #A3A5C4;    /* Цвет надписи статуса шлагбаума */
    
    /* Цвета бегущего кольца */
    --ring-normal: #6EC4EC;          /* Синий - обычный режим */
    --ring-success: #7CCE8B;         /* Зеленый - открыто */
    --ring-error: #DD7682;           /* Красный - ошибка */
    --ring-waiting: #B5BAC6;         /* Серый - ожидание/заблокировано */
}

/* Обновляем цвета бейджей статуса в индексе */
.bg-success { background-color: var(--status-online) !important; }
.bg-danger { background-color: var(--status-offline) !important; }

/* Форма инпутов */
.form-control-custom {
    background-color: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: 50px; /* Полное скругление как на макете */
    color: var(--text-color);
    box-shadow: none !important;
}
.form-control-custom::placeholder {
    color: #A0A5AA; /* Легкий цвет плейсхолдера */
}
.form-control-custom:focus {
    border-color: var(--theme-primary);
    outline: none;
}

/* Форма кнопок (заливка) */
.btn-theme-primary {
    background-color: var(--theme-primary);
    color: #ffffff;
    border: 1px solid var(--theme-primary);
    border-radius: 50px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08); /* Мягкая нейтрально-серая тень */
    transition: all 0.2s ease;
    transform: translateZ(0);
}
.btn-theme-primary:hover, .btn-theme-primary:active {
    background-color: #4AAACD;
    color: #ffffff;
    transform: scale(0.98) translateZ(0);
}

/* Форма кнопок (контур) */
.btn-theme-outline {
    background-color: #ffffff;
    color: #4A5568;
    border: none !important; /* Убрали синюю рамку */
    border-radius: 50px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); /* Чуть усилили тень для объема */
    transition: all 0.2s ease;
}
.btn-theme-outline:hover, .btn-theme-outline:active, .btn-theme-outline:focus {
    background-color: #f8f9fa;
    border: none !important; /* Убрали синюю рамку */
    transform: scale(0.98) translateZ(0);
    outline: none;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
}

/* Анимация исчезновения и появления блока выбора въезда */
#point-btn-wrapper {
    transition: opacity 0.2s ease, transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    opacity: 1;
    transform: translateY(0);
}
#point-btn-wrapper.hidden-point-selector {
    opacity: 0;
    transform: translateY(20px); /* Уезжает вниз */
    pointer-events: none; /* Перестает быть кликабельным */
    transition: opacity 0.15s ease, transform 0.15s ease; /* Быстрое растворение */
}

/* Новая полоса-разделитель */
.auth-divider {
    height: 1px;
    background-color: var(--input-border); /* Цвет рамки инпута */
    margin: 1.5rem 1.1rem; /* Отступы сверху/снизу и по бокам (не доходит до краев) */
    opacity: 0.4; /* Делаем еле заметной */
}

/* Кнопки-иконки мессенджеров */
.btn-bot-icon {
    background-color: var(--theme-primary);
    width: 90px;
    height: 75px; 
    border-radius: 40px; 
    border: none;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08); 
    transition: transform 0.2s ease;
}
.btn-bot-icon img {
    width: 45px;
    height: auto;
}
.btn-bot-icon:active {
    transform: scale(0.95) translateZ(0);
}

/* =============================================
   2. Global Reset & Base Styles
   ============================================= */

/* Тотальный запрет выделения и нативный мобильный UX */
* {
    /* Запрет выделения текста во всем приложении */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    
    /* Отключение вызова системного меню (копировать/поделиться) на iOS */
    -webkit-touch-callout: none;
    
    /* Удаление синей/серой рамки-вспышки при нажатии на элементы в Chrome/Safari */
    -webkit-tap-highlight-color: transparent;
    
    /* Стандартный бокс-сайзинг для всех элементов */
    box-sizing: border-box;
}

/* Разрешаем выделение только там, где оно необходимо (инпуты) */
input, textarea, [contenteditable="true"] {
    -webkit-user-select: text;
    user-select: text;
}

html, body {
    /* Блокируем системные откаты и скролл всей страницы */
    overscroll-behavior-y: none;
    overflow: hidden;
    height: 100vh;
    width: 100vw;
    
    background-color: var(--bg-color); 
    color: var(--text-color);
    
    /* Используем Manrope (Light по умолчанию) */
    font-family: 'Manrope', 'ManropeLocal', system-ui, sans-serif;
    font-weight: 300; 
    margin: 0;
    padding: 0;
    
    /* Плавная смена темы, если она реализована через классы на body */
    transition: background 0.3s, color 0.3s; 
}

/* Кастомные веса для Manrope (Light 300 -> SemiBold 600) */
.fw-bold { font-weight: 600 !important; }
.fw-normal { font-weight: 400 !important; }

/* Utility Classes (Вспомогательные классы) */
.d-none { display: none !important; }
.v-hidden { visibility: hidden !important; }

/* Состояние заблокированного интерфейса */
.disabled-ui { 
    opacity: 0.4; 
    pointer-events: none; 
    filter: grayscale(1); 
}

/* Удаление фокуса и теней с кнопок (для кастомных элементов) */
.btn-no-focus:focus, .btn-no-focus:active { 
    box-shadow: none !important; 
    outline: none !important; 
}

/* Работа с текстом */
.text-xs { font-size: 0.7rem; }
.text-xxs { font-size: 0.65rem; }
.pre-wrap { white-space: pre-wrap; }
.pre-line { white-space: pre-line; }

/* Убираем синий цвет и подчеркивание у ссылок, делая их похожими на элементы приложения */
a {
    text-decoration: none;
    color: inherit;
    /* Убиваем системный предпросмотр ссылок (лупу) и перетаскивание на iOS */
    -webkit-touch-callout: none !important;
    -webkit-user-drag: none !important;
    user-drag: none !important;
}


/* =============================================
   Микроанимации переходов
   ============================================= */
@keyframes fadeSlideUp {
    0% {
        opacity: 0;
        transform: translateY(15px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}
@keyframes blurReveal {
    0% {
        opacity: 0;
        filter: blur(8px);
        transform: scale(0.98);
    }
    100% {
        opacity: 1;
        filter: blur(0);
        transform: scale(1);
    }
}
@keyframes scaleFadeIn {
    0% {
        opacity: 0;
        transform: scale(0.92);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}
@keyframes springIn {
    0% {
        opacity: 0;
        transform: scale(0.8) translateY(15px);
    }
    60% {
        opacity: 1;
        transform: scale(1.02) translateY(-2px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}


.animate-step {
    /* Используем ease-in-out для мягкого отскока */
    animation: springIn 0.35s ease-in-out forwards;
}
/* =============================================
   3. INDEX BLOCK (Общая структура)
   ============================================= */
.pwa-header {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-top: env(safe-area-inset-top, 45px);
    padding-bottom: 20px;
    background: transparent;
}
.pwa-logo-img { height: 60px; width: auto; }
.pwa-logo-img:active { transform: scale(0.95); }

.slider-container { 
    display: flex;
    overflow-x: auto; 
    scroll-snap-type: x mandatory; 
    height: calc(100vh - 75px); 
    scrollbar-width: none; 
}
.slider-container::-webkit-scrollbar { display: none; }
.slide { 
    min-width: 100vw; 
    scroll-snap-align: start; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    padding: 1.5rem 0;
    box-sizing: border-box; 
    position: relative;
    justify-content: flex-start;
}

/* Исправленные индикаторы слайдов */
.pagination {
    position: fixed;
    bottom: 15px; /* Чуть приподняли, чтобы не перекрывалось системной полосой iOS */
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 9999;
    pointer-events: none;
}

.dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background-color: var(--input-border);
    opacity: 0.5;
    /* Магия пружинного отскока кроется здесь */
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.3s, opacity 0.3s;
}

.dot.active {
    background-color: var(--theme-primary);
    opacity: 1;
    transform: scale(1.6); /* Пропорциональное увеличение */
}
.modal-backdrop.show { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); background-color: rgba(0, 0, 0, 0.4); }
.card-custom { background: var(--card-bg); }

/* =============================================
   4. LOGON BLOCK (Авторизация)
   ============================================= */
.auth-container { display: flex; flex-direction: column; align-items: center; }
.bot-auth-icon { width: 60%; max-width: 60px; height: auto; }
.letter-spacing-2 { letter-spacing: 2px; }

/* =============================================
   5. MAIN BLOCK (Главный экран)
   ============================================= */

/* Лицевой счет */
.account-header-card { 
    background-color: #F8F9FA; /* Сделали немного светлее для контраста с фоном */
    border: 1px solid rgba(0, 0, 0, 0.08); /* Добавили аккуратную выразительную рамку */
    border-radius: 18px; 
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04); /* Чуть усилили тень */
    transition: transform 0.1s ease, background-color 0.1s ease;
    /* Плавный отклик */
    user-select: none; /* Чтобы текст не выделялся при случайном долгом нажатии */
}

.account-header-card:active { 
    transform: scale(0.97); 
    background-color: #e2e4e9; 
}

.account-icon-wrapper { 
    width: 40px; 
    height: 40px; 
    background-color: var(--input-bg); 
    border-radius: 50%; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    pointer-events: none; /* Чтобы клик пролетал сквозь иконку на саму карточку */
}

/* Эффект при нажатии на иконку */
.account-icon-wrapper:active { 
    transform: scale(0.9); 
    background-color: #e2e4e9; /* Чуть темнее при клике */
}

.account-icon-wrapper img { 
    width: 20px; 
    height: 20px; 
}
/* Кнопка и Кольцо */
.btn-wrapper { 
    margin-top: 10px; position: relative; width: 280px; height: 280px; /* УВЕЛИЧИЛИ */
    display: flex; justify-content: center; align-items: center; 
    --current-ring-color: var(--ring-normal); 
}

.btn-wrapper.state-waiting { --current-ring-color: var(--ring-waiting); }
.btn-wrapper.state-opened { --current-ring-color: var(--ring-success); }
.btn-wrapper.state-error { --current-ring-color: var(--ring-error); }
.btn-wrapper.state-denied { --current-ring-color: var(--ring-waiting); }

/* ПУЛЬСАЦИЯ ВСЕЙ ОБЕРТКИ (Кнопка + Кольцо дышат вместе) */
.btn-wrapper.state-waiting {
    animation: wrapper-pulse-only-scale 2s infinite ease-in-out;
}

@keyframes wrapper-pulse-only-scale {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

/* ПУЛЬСАЦИЯ КОЛЬЦА (Кольцо дышит и бледнеет) */
.ring-waiting-svg {
    /* Добавляем scale прямо сюда, чтобы оно расширялось вместе с кнопкой */
    animation: ring-pulse-full 2s infinite ease-in-out;
}

@keyframes ring-pulse-full {
    0% { transform: scale(1); opacity: 0.4; }
    50% { transform: scale(1.05); opacity: 1; }
    100% { transform: scale(1); opacity: 0.4; }
}

/* ЭФФЕКТ ОТКАТА ПОЛОСЫ */
.progress-ring-circle.run-back {
    /* Важно: используем transition, чтобы JS просто задал цель, а браузер плавно откатил */
    transition: stroke-dashoffset 1.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    stroke-dashoffset: 760.3 !important; /* Возвращаем к полной длине (пустоте) */
}

/* ТРЯСКА ПРИ ОШИБКЕ (Вся обертка трясется как монолит) */
.btn-wrapper.state-error { 
    animation: wrapper-shake 0.5s cubic-bezier(.36,.07,.19,.97) both; 
}
@keyframes wrapper-shake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-8px); }
    40%, 80% { transform: translateX(8px); }
}

/* Аппаратно ускоренное SVG-кольцо */
.progress-ring {
    position: absolute; top: 0; left: 0;
    transform: rotate(-90deg); 
    transform-origin: center;
    z-index: 1; pointer-events: none;
}

.progress-ring-circle {
    stroke: var(--current-ring-color);
    stroke-dasharray: 760.3;
    stroke-dashoffset: 760.3; 
    stroke-linecap: round; /* <--- МАГИЯ ЗДЕСЬ: закругление концов */
    transform-origin: center;
    transform: scale(1.08); 
    transition: stroke 0.4s ease, transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
    will-change: stroke-dashoffset, transform; 
}

/* СХЛОПЫВАНИЕ: Когда кольцо замыкается, оно прилипает к кнопке (scale: 1) */
.btn-wrapper.state-waiting .progress-ring-circle,
.btn-wrapper.state-opened .progress-ring-circle,
.btn-wrapper.state-error .progress-ring-circle,
.btn-wrapper.state-denied .progress-ring-circle {
    transform: scale(1);
}

.btn-inner { 
    position: absolute; width: 230px; height: 230px; /* УВЕЛИЧИЛИ */
    background: var(--btn-inner-bg); border-radius: 50%; 
    display: flex; flex-direction: column; justify-content: center; align-items: center; 
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05); user-select: none; 
    transition: transform 0.1s, box-shadow 0.3s; 
    z-index: 3; cursor: pointer; border: none !important; outline: none !important;
}
.btn-inner:active { transform: scale(0.96); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.03); }

/* --- ДОБАВИТЬ ЭТОТ БЛОК --- */
/* Жестко выбиваем сжатие кнопки и блокируем нажатия во всех режимах кроме стартового */
.btn-wrapper.state-waiting .btn-inner,
.btn-wrapper.state-opened .btn-inner,
.btn-wrapper.state-error .btn-inner,
.btn-wrapper.state-denied .btn-inner {
    pointer-events: none !important;
    transform: scale(1) !important; /* Принудительно возвращаем 100% размер, выбивая палец */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05) !important;
}

/* Тексты и иконки */
.main-btn-text { color: var(--main-text-color); letter-spacing: 0.5px; font-weight: 600; }
.main-btn-status-text { color: var(--status-text-color); }

/* =============================================
   ИКОНКА НА ГЛАВНОЙ КНОПКЕ
   ============================================= */
.btn-ring-icon-img {
    width: 48px !important;           /* было 60px — слишком жирно */
    height: 48px !important;
    max-width: 48px !important;
    max-height: 48px !important;
    flex-shrink: 0 !important;
    object-fit: contain !important;
    display: block;
    margin: 0 auto 8px auto;          /* небольшой отступ до текста */
}

/* Маленький замочек под статусом */
.btn-status-icon-img {
    width: 14px !important;
    height: 14px !important;
    flex-shrink: 0 !important;
    object-fit: contain !important;
    margin-right: 5px;
    opacity: 0.85;
}

/* Выбор точки */
.point-dropdown-container { width: 120px; }
.point-dropdown-btn { height: 45px; font-weight: 600; }
.point-item { border-radius: 8px; transition: 0.2s; cursor: pointer; }
.point-item:hover { background: var(--bg-color); }
.point-item.active-point { background: #e0f2fe; color: #0284c7; font-weight: bold; }
.action-bottom-container { padding-bottom: 4rem; }

/* Кнопка Диспетчера */
.btn-dispatcher {
    background-color: #22995e !important; /* Принудительно держим зеленый */
    color: #ffffff !important;
    border-radius: 50px;
    box-shadow: 0 8px 24px rgba(25, 135, 84, 0.25);
    transition: all 0.2s ease;
    border: none !important;
    
    /* Полная блокировка системных эффектов iOS */
    -webkit-user-select: none !important;
    user-select: none !important;
    -webkit-tap-highlight-color: rgba(0,0,0,0) !important;
    -webkit-touch-callout: none !important;
}

/* Убираем "отбеливание" Bootstrap и Safari, но оставляем нормальный размер при залипании фокуса */
.btn-dispatcher:focus, 
.btn-dispatcher:hover {
    background-color: #22995e !important;
    color: #ffffff !important;
    outline: none !important;
}

/* Анимация вжатия работает ТОЛЬКО в момент физического касания экрана */
.btn-dispatcher:active {
    background-color: #22995e !important;
    color: #ffffff !important;
    box-shadow: none !important; 
    transform: scale(0.96) translateZ(0) !important; 
    outline: none !important;
}

/* =============================================
   INLINE ВЫБОР ВЪЕЗДА (В стиле Лицевого счета)
   ============================================= */
.transition-base {
    transition: all 0.4s cubic-bezier(0.3, 0, 0.2, 1);
}

/* Вытаскиваем шапку поверх центрального блока, чтобы она кликалась */
#main-header-block {
    position: relative;
    z-index: 105; 
}

/* 1. Лицевой счет уезжает наверх и мягко растворяется */
body.point-panel-open #main-header-block {
    transform: translateY(-80px);
    opacity: 0;
    pointer-events: none;
}

/* 2. Центральная кнопка вместе с меню поднимается на освободившееся место */
body.point-panel-open #main-center-block {
    transform: translateY(-170px); 
}

/* Единый компактный размер для кнопки и выпадающего меню */
.compact-point-selector {
    width: 170px; /* Идеальная узкая ширина, как у лицевого счета */
}

/* 3. Кнопка вызова списка проваливается вниз и прячется */
body.point-panel-open #point-dropdown-btn {
    opacity: 0;
    pointer-events: none;
    transform: scale(0.95); /* Флексбокс сам удержит ее по центру */
}

/* 4. Дизайн выпадающей карточки */
.point-list-card {
    position: absolute; 
    top: 0; 
    /* МАГИЯ ЦЕНТРИРОВАНИЯ: смещаем на 50% и выравниваем через transform */
    left: 50%; 
    
    background-color: var(--card-bg); 
    border-radius: 18px; 
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    
    opacity: 0; 
    pointer-events: none; 
    /* Обрати внимание на translateX(-50%) — он возвращает карточку ровно в центр */
    transform: translate(-50%, 10px) scale(0.95); 
    max-height: 360px; /* Увеличили высоту, чтобы идеально влезало 6 пунктов */
    overflow-y: auto;
    z-index: 100;
    scrollbar-width: none; 
}
.point-list-card::-webkit-scrollbar { display: none; }

/* Анимация появления карточки */
body.point-panel-open .point-list-card {
    opacity: 1; 
    pointer-events: auto;
    /* Разворачиваем карточку, сохраняя центрирование */
    transform: translate(-50%, 0) scale(1);
}
/* Вытягиваем центральный блок, чтобы он всегда был кликабельным поверх всего */
#main-center-block {
    margin-top: -90px;
    position: relative;
    z-index: 100;
}

/* Дизайн внутренних элементов меню (Белые раздельные "пилюли") */
.point-item-custom {
    background-color: #ffffff; /* Чистый белый цвет */
    border-radius: 12px; 
    margin-bottom: 8px !important; /* Отступ между въездами */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04); /* Легкая тень */
    border: 1px solid rgba(0, 0, 0, 0.03); 
    transition: transform 0.1s ease, background 0.2s ease; 
    cursor: pointer;
}

/* Убираем лишний отступ у самого нижнего элемента */
.point-item-custom:last-child {
    margin-bottom: 0 !important; 
}

/* Анимация вдавливания при клике */
.point-item-custom:active { 
    background-color: #f8f9fa; 
    transform: scale(0.95); 
}

/* Спец-стиль для выбранного въезда */
.point-item-custom.active-point {
    background: #e0f2fe; 
    border-color: #bae6fd; 
}

/* Отступ между элементами списка въездов */
#point-dropdown-list li {
    margin-bottom: 4px; /* Можешь менять это значение (10px, 12px, 16px), чтобы сделать больше или меньше */
}

/* Убираем отступ у самого последнего въезда, чтобы не было дырки снизу */
#point-dropdown-list li:last-child {
    margin-bottom: 0;
}

/* =============================================
   РЕЖИМ: ДОСТУП ЗАПРЕЩЕН (Финальная полировка с разделением)
   ============================================= */

/* 1. Убираем все лишнее, оставляем только "тело" кнопок */
/*body.access-denied-mode #btn-hint,*/
/*body.access-denied-mode .btn-inner .small,*/
/*body.access-denied-mode #btn-ring-svg {*/
    /*display: none !important;*/
/*}*/

/* 2. Стиль для МАЛЕНЬКИХ кнопок (Выбор точки, Заказ пропуска) - Оставляем как тебе нравится */
/*body.access-denied-mode #point-dropdown-btn,*/
/*body.access-denied-mode #main-order-btn:disabled {*/
    /*background-color: #E2E4E9 !important;*/
    /*border: 1px solid #C6CAD1 !important; */
    /*box-shadow: */
        /*inset 0px 8px 16px rgba(0, 0, 0, 0.08),*/
        /*0px 1px 0px rgba(255, 255, 255, 0.9) !important;*/
    /*color: #A0A5AA !important;*/
    /*opacity: 1 !important;*/
    /*pointer-events: none !important;*/
/*}*/

/* =============================================
   РЕЖИМ: ДОСТУП ЗАПРЕЩЕН (Унифицированный матовый стиль)
   ============================================= */

/* 1. Убираем лишние индикаторы */
body.access-denied-mode #btn-hint,
body.access-denied-mode .btn-inner .small,
body.access-denied-mode #btn-ring-svg {
    display: none !important;
}

/* 2. Единый стиль для всех заблокированных элементов (Абсолютно плоский дизайн без градиентов) */
body.access-denied-mode .btn-inner,
body.access-denied-mode #point-dropdown-btn,
body.access-denied-mode #main-order-btn:disabled {
    /* Используем background вместо background-color, чтобы полностью стереть любые градиенты из базовых классов */
    background: #E2E4E9 !important;
    
    border: 1px solid #C6CAD1 !important;
    
    /* Полностью отключаем любые тени и затемнения */
    box-shadow: none !important;
    
    color: #A0A5AA !important;
    opacity: 1 !important;
    pointer-events: none !important;
}

/* 3. Специфические правки для главной кнопки в этом режиме */
body.access-denied-mode .btn-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* 4. Очистка контейнера обертки */
body.access-denied-mode #main-btn-wrapper {
    box-shadow: none !important;
    background: transparent !important;
}

/* 5. Приглушаем иконку и текст, чтобы они "утонули" в кнопке */
body.access-denied-mode #btn-icon {
    filter: grayscale(1) contrast(0.5) opacity(0.3);
    margin-bottom: 12px;
}

body.access-denied-mode .main-btn-text {
    color: #A0A5AA !important;
    /* Убираем эффект гравировки, оставляем плоский приглушенный текст */
    text-shadow: none !important;
    font-weight: 400 !important;
}
/* =============================================
   6. PASS BLOCK (Пропуска)
   ============================================= */
.pass-list-container { 
    overflow-y: auto; 
    flex-grow: 1; 
    padding-bottom: 20px;
    -webkit-mask-image: linear-gradient(to bottom, black 85%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 85%, transparent 100%);
}

.pass-card-mock { 
    background: var(--card-bg) !important; border: none !important; 
    border-radius: 18px !important; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08) !important;
    width: 100%; margin-bottom: 8px;
}

.mock-plate {
    border: 1px solid #4A5768; border-radius: 4px;
    padding: 6px 0; font-size: 1.1rem;
    color: #4A5768; letter-spacing: 0.5px;
    background: transparent; width: 140px; flex-shrink: 0; text-align: center;
}

.mock-info-col { flex-grow: 1; }
.mock-car-type { font-size: 0.85rem; color: #4A5768; margin-bottom: 4px; }
.mock-badge { font-size: 0.7rem; padding: 4px 14px; font-weight: 400; }

.btn-delete-mock {
    width: 42px; height: 42px; border-radius: 50%;
    border: 1px solid #DD7682; color: #DD7682;
    background: transparent; display: flex; 
    align-items: center; justify-content: center;
    transition: all 0.2s ease; flex-shrink: 0;
}
.btn-delete-mock:active { transform: scale(0.9); background: rgba(221, 118, 130, 0.1); }

.pass-card-temp-border { border: 2px solid var(--theme-primary) !important; }
.bg-status-online { background-color: #22995e !important; color: #ffffff; }
.bg-status-offline { background-color: #DD7682 !important; color: #ffffff; }
.bg-status-waiting { background-color: #B5BAC6 !important; color: #ffffff; }

/* Главная кнопка "Заказать пропуск" */
.btn-order-pass {
    background-color: var(--theme-primary) !important; color: #ffffff !important;
    border-radius: 50px; box-shadow: 0 8px 24px rgba(91, 187, 221, 0.35);
    border: none !important; -webkit-user-select: none !important;
    -webkit-tap-highlight-color: transparent !important;
    position: relative; z-index: 1060;
}
.btn-order-pass:active { transform: scale(0.96) translateZ(0) !important; box-shadow: none !important; }

.btn-order-pass.cancel-mode {
    background-color: #ffffff !important; color: #4A5768 !important;
    border: 1px solid var(--theme-primary) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05) !important;
}

/* --- АНИМАЦИИ ВЫЕЗДА ШТОРКИ --- */
body.pass-menu-open #passes-container, 
body.pass-menu-open #pass-header-block {
    transform: translateY(-70px); opacity: 0; pointer-events: none;
}

.pass-creation-menu {
    background: #F8F9FA; border-radius: 20px;
    padding: 20px 20px 24px 20px; position: absolute;
    bottom: calc(100% + 15px); left: 15px; right: 15px;
    transform-origin: bottom center;
    transform: scale(0.85); 
    opacity: 0; pointer-events: none;
    /* Уход шторки стал плавнее и медленнее (0.4s) */
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease-out;
    z-index: 1050;
    overflow: hidden; 
}
.pass-creation-menu.open {
    transform: scale(1);
    opacity: 1; pointer-events: auto;
    transition: transform 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.3s ease;
}

/* --- НОВАЯ АНИМАЦИЯ: ВЫТАЛКИВАНИЕ ФОРМОЙ --- */
.pass-form-wrapper {
    width: 100%;
    max-height: 0; 
    opacity: 0;
    transform: translateY(-30px); 
    overflow: hidden;
    pointer-events: none;
    /* Разворот формы сделан медленнее */
    transition: all 0.55s cubic-bezier(0.25, 1, 0.5, 1);
}

.pass-form-wrapper.active {
    max-height: 450px;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.pass-types-wrapper {
    width: 100%;
    max-height: 500px;
    opacity: 1;
    transform: translateY(0);
    /* Уход кнопок сделан в том же медленном темпе */
    transition: all 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Вдавленное состояние: кнопки съезжают вниз БЕЗ потери непрозрачности */
.pass-types-wrapper.crushed {
    max-height: 0;
    transform: translateY(60px); /* Сдвигаем вниз за пределы маски */
    pointer-events: none;
    overflow: hidden;
    margin: 0 !important;
    padding: 0 !important;
    /* opacity: 0; -- УДАЛЕНО, чтобы кнопки не бледнели */
}

/* --- БАЗОВЫЕ СТИЛИ ЭЛЕМЕНТОВ --- */
.btn-pass-type-mock {
    background-color: var(--theme-primary); color: #ffffff;
    border: none; border-radius: 50px; width: 100%;
    padding: 14px; font-size: 1rem; font-weight: 400; margin-bottom: 4px;
    display: flex; justify-content: center; align-items: center;
}
.btn-pass-type-mock:active { transform: scale(0.98); }

.pass-subtext {
    font-size: 0.75rem; color: #A0A5AA; text-align: center;
    margin-bottom: 12px; line-height: 1.1; 
}
.pass-divider {
    width: 100%; border-top: 1px solid #EAEBF0;
    margin: 0 0 16px 0; 
}

/* --- АВТОПОДСТАНОВКА --- */
.autocomplete-items {
    position: absolute; border-bottom: none; border-top: none;
    z-index: 1100; top: 100%;
    left: 0; right: 0;
    background-color: #ffffff; border: 1px solid #EAEBF0;
    border-radius: 12px; 
    max-height: 200px; 
    overflow-y: auto; 
    -webkit-overflow-scrolling: touch; /* Плавный скролл на iOS */
    overscroll-behavior: contain; /* Изолируем скролл от body */
    touch-action: pan-y; /* Явно разрешаем вертикальный скролл пальцем */
    pointer-events: auto; /* Железобетонно включаем перехват касаний */
    display: none; margin-top: 5px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}
.autocomplete-active { display: block; }
.autocomplete-item {
    padding: 12px 15px; cursor: pointer; border-bottom: 1px solid #EAEBF0;
    font-size: 0.95rem; text-align: left;
}
.autocomplete-item:last-child { border-bottom: none; }
.autocomplete-item:hover { background-color: #F8F9FA; }
/* =============================================
   Блок Уведомлений (Notification UI Extension)
   ============================================= */

/* Приводим карточки к единому стилю со списком точек на главном экране */
.card-minimal {
    background-color: var(--card-bg) !important;
    border-radius: 18px !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08) !important;
    border: none !important;
    transition: transform 0.2s ease;
    margin-bottom: 8px !important; 
}

.card-minimal:active {
    transform: scale(0.98);
}

/* Активное голосование: зеленая рамка по всему контуру */
.active-vote-card {
    border: 2px solid var(--status-online) !important;
    box-shadow: 0 4px 15px rgba(34, 153, 94, 0.1) !important;
}

/* Кнопки вариантов в активном голосовании */
.btn-vote-option {
    border-color: var(--theme-primary) !important;
    color: var(--theme-primary) !important;
    transition: all 0.2s ease;
}
.btn-vote-option:active {
    background-color: var(--theme-primary) !important;
    color: #fff !important;
}

/* Цвета прогресс-баров голосования */
.vote-progress-win { background-color: var(--theme-primary) !important; }
.vote-progress-lose { background-color: #C6CAD1 !important; }

/* Форматирование внутри сообщений */
.msg-content strong, 
.msg-content b { 
    font-weight: 700 !important;
    color: #212529;
}

.msg-content u {
    text-decoration: underline;
}

.msg-content i {
    font-style: italic;
}

.msg-content {
    width: 100%;
}

.msg-img-container img {
    max-height: 250px;
    object-fit: contain;
    background: #f8f9fa;
}

.btn-theme-primary {
    background-color: var(--theme-primary) !important;
    color: white !important;
    border: none;
}
/* =============================================
   МЕНЮ СОЗДАНИЯ ОБРАЩЕНИЯ (аналогично pass)
   ============================================= */
.ticket-creation-menu {
    background: #F8F9FA; border-radius: 20px;
    padding: 20px 20px 24px 20px; position: absolute;
    bottom: calc(100% + 15px); left: 15px; right: 15px;
    transform-origin: bottom center;
    transform: scale(0.85);
    opacity: 0; pointer-events: none;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease-out;
    z-index: 1050;
    overflow: hidden;
}
.ticket-creation-menu.open {
    transform: scale(1);
    opacity: 1; pointer-events: auto;
    transition: transform 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.3s ease;
}
.ticket-form-wrapper {
    width: 100%;
    max-height: 0;
    opacity: 0;
    transform: translateY(-30px);
    overflow: hidden;
    pointer-events: none;
    transition: all 0.55s cubic-bezier(0.25, 1, 0.5, 1);
}
.ticket-creation-menu.open .ticket-form-wrapper {
    max-height: 450px;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

body.ticket-menu-open #messages-container,
body.ticket-menu-open #notify-header-block {
    transform: translateY(-70px); opacity: 0; pointer-events: none;
}
/* =============================================
   8. INFO BLOCK (Профиль)
   ============================================= */
.profile-content-container { overflow-y: auto; flex-grow: 1; }

/* Режим браузера: скрываем шапку и центрируем карточку установки */
body.browser-mode .pwa-header {
    display: none !important;
}

body.browser-mode {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    padding: 20px;
}

body.browser-mode #install-screen {
    display: block !important;
    width: 100%;
}

.install-card {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08) !important;
}

/* Иконка трех точек в кружке */
.bi-three-dots.rounded-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border: 1px solid #000 !important;
    color: #000;
    line-height: 1;
}