/* =====================================================
   SAGA DOORS — Комплексная мобильная адаптация
   Подключается последним во всех страницах
   ===================================================== */

/* ─── Глобальные базовые правила ─── */
* { -webkit-tap-highlight-color: transparent; }
html, body { overflow-x: hidden; max-width: 100vw; }

/* Минимальный размер touch-целей */
@media (max-width: 900px) {
    button, .btn, [role="button"] { min-height: 40px; }
    input, select, textarea { font-size: 16px !important; } /* предотвращаем zoom на iOS */
}

/* =====================================================
   СТРАНИЦЫ ВХОДА / ВОССТАНОВЛЕНИЯ ПАРОЛЯ
   ===================================================== */
@media (max-width: 480px) {
    .login-container {
        margin: 0 !important;
        border-radius: 0 !important;
        min-height: 100vh;
        box-shadow: none !important;
    }
    .login-header {
        padding: 24px 20px !important;
    }
    .login-body {
        padding: 24px 20px !important;
    }
    .btn-login {
        padding: 14px !important;
        font-size: 15px !important;
    }
    .back-home {
        padding: 16px 0 !important;
    }
    /* Убираем фиолетовый — используем антрацит */
    .login-header {
        background: #2c2d28 !important;
    }
    .btn-login {
        background: #2c2d28 !important;
    }
    .forgot-password { color: #2c2d28 !important; }
    .form-group input:focus {
        border-color: #2c2d28 !important;
        box-shadow: 0 0 0 3px rgba(44,45,40,0.12) !important;
    }
}

/* =====================================================
   ГЛАВНАЯ СТРАНИЦА (index.html / Style.css)
   ===================================================== */
@media (max-width: 768px) {
    nav ul.nav-links[style*="margin-left"] {
        margin-left: 0 !important;
    }
}

/* =====================================================
   КАЛЬКУЛЯТОР HOME + PROM — мелкие экраны
   ===================================================== */
@media (max-width: 480px) {
    .calc-sidebar {
        padding: 12px !important;
    }
    .calc-brand {
        padding: 14px 12px !important;
    }
    .calc-brand-title {
        font-size: 20px !important;
    }
    .acc-body {
        padding: 8px 2px !important;
    }
    .param-group {
        margin-bottom: 12px !important;
    }
    /* Правая панель цены */
    .price-display {
        padding: 16px 12px !important;
    }
    .main-price, .price-value {
        font-size: 34px !important;
    }
    .btn-order {
        padding: 14px 12px !important;
        font-size: 14px !important;
        width: 100% !important;
    }
    /* Таблица разбивки цены */
    .price-params-table td {
        font-size: 12px !important;
        padding: 4px 6px !important;
    }
    /* Скетч-карточка */
    .sketch-card {
        padding: 12px !important;
    }
}

/* =====================================================
   ЛИЧНЫЙ КАБИНЕТ ДИЛЕРА — Карточки заказов
   ===================================================== */

/* Карточка заказа cabinet.js: flex-wrap уже есть, но нужны fixes */
@media (max-width: 540px) {
    /* Правая часть карточки — выравниваем влево при переносе */
    .order-card > div[style*="display:flex"] > div[style*="min-width:220px"],
    .order-card > div[style*="display:flex"] > div[style*="min-width: 220px"] {
        min-width: unset !important;
        text-align: left !important;
        width: 100% !important;
    }
    /* Цены дилерская/розничная — стакуем вертикально */
    .order-card div[style*="display:flex"][style*="gap:18px"] {
        flex-direction: column !important;
        gap: 6px !important;
        align-items: flex-start !important;
    }
    /* Кнопки действий — влево */
    .order-card div[style*="justify-content:flex-end"][style*="display:flex"] {
        justify-content: flex-start !important;
        flex-wrap: wrap !important;
    }
    /* Размер заголовка заказа */
    .order-card h3[style*="font-size:22px"] {
        font-size: 17px !important;
    }
    /* Padding карточки */
    .order-card {
        padding: 14px 12px !important;
        margin: 8px 0 !important;
    }
    /* Размер цены */
    .order-card div[style*="font-size:18px"] {
        font-size: 15px !important;
    }
}

/* =====================================================
   АДМИН-ПАНЕЛЬ — Карточки заказов
   ===================================================== */
@media (max-width: 640px) {
    /* Превращаем grid-карточку в колонку */
    .order-card > div[style*="grid-template-columns"] {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
    }
    /* Убираем min-width правой колонки */
    .order-card div[style*="min-width:200px"],
    .order-card div[style*="min-width: 200px"] {
        min-width: unset !important;
        text-align: left !important;
        width: 100% !important;
    }
    /* Цена заказа — меньше */
    .order-card div[style*="font-size:28px"] {
        font-size: 22px !important;
        margin-bottom: 10px !important;
    }
    /* Кнопка действий — full width */
    .order-card button[style*="width:100%"] {
        width: 100% !important;
    }
    /* Кнопка Действия — full width */
    .order-card > div > div[style*="position:relative"][style*="display:inline-block"] {
        width: 100% !important;
    }
    /* Padding */
    .order-card[style*="padding-left:40px"] {
        padding: 14px 14px 14px 38px !important;
        margin: 8px 0 !important;
    }
}

/* =====================================================
   АДМИН-ПАНЕЛЬ — Панель массовых действий (bulk ops)
   ===================================================== */
@media (max-width: 640px) {
    #bulkActionBar {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 8px !important;
    }
    #bulkActionBar select,
    #bulkActionBar button {
        width: 100% !important;
        text-align: center !important;
    }
    #bulkActionBar label {
        margin-left: 0 !important;
        justify-content: flex-start !important;
    }
}

/* =====================================================
   АДМИН-ПАНЕЛЬ — Строка фильтров заказов
   ===================================================== */
@media (max-width: 640px) {
    /* Фильтры */
    .filter-bar,
    div[style*="display:flex"][style*="flex-wrap:wrap"],
    div[style*="display:flex"][style*="flex-wrap: wrap"] {
        flex-wrap: wrap !important;
    }
    /* Поля фильтра */
    #orders input[type="number"],
    #orders input[type="date"],
    #orders input[type="text"],
    #orders select,
    #orders-section input,
    #orders-section select {
        width: 100% !important;
        min-width: unset !important;
    }
    /* Кнопки "Найти" / "Сбросить" */
    #searchOrderBtn {
        width: 100% !important;
    }
}

/* =====================================================
   МОДАЛЬНЫЕ ОКНА (JS-generated и статические)
   ===================================================== */
@media (max-width: 768px) {
    /* Все JS-генерируемые модалы с position:fixed */
    div[style*="position:fixed"][style*="z-index:9999"] > div,
    div[style*="position:fixed"][style*="z-index: 9999"] > div {
        max-height: 95vh !important;
        overflow-y: auto !important;
        margin: 8px !important;
        width: calc(100% - 16px) !important;
        max-width: calc(100% - 16px) !important;
        border-radius: 12px !important;
    }
    /* Статические .modal-content */
    .modal-content {
        margin: 8px !important;
        width: calc(100% - 16px) !important;
        max-width: calc(100% - 16px) !important;
        max-height: 95vh !important;
        overflow-y: auto !important;
    }
    /* Ограничиваем ширину inline-modal окон в кабинете */
    div[style*="max-width:900px"],
    div[style*="max-width: 900px"],
    div[style*="max-width:1100px"],
    div[style*="max-width: 1100px"] {
        max-width: calc(100vw - 16px) !important;
        width: calc(100% - 16px) !important;
        margin: 8px !important;
    }
}

@media (max-width: 480px) {
    /* Дополнительная шапка модалов */
    div[style*="background:#2c2d28"][style*="padding:20px"] {
        padding: 14px 16px !important;
    }
    div[style*="background:#2c2d28"][style*="padding:25px"] {
        padding: 14px 16px !important;
    }
}

/* =====================================================
   МЕССЕНДЖЕР — Кнопка "Назад" и мобильный layout
   ===================================================== */
.mobile-back-btn {
    display: none;
    align-items: center;
    gap: 8px;
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    padding: 4px 8px 4px 0;
    font-size: 15px;
    font-weight: 600;
    opacity: 0.85;
    min-height: 36px;
    flex-shrink: 0;
}
.mobile-back-btn:hover { opacity: 1; }

@media (max-width: 768px) {
    .mobile-back-btn {
        display: flex !important;
    }
    /* chat-area показывается только когда active */
    .chat-area:not(.active) {
        display: none !important;
    }
    .chat-area.active {
        display: flex !important;
        position: absolute !important;
        top: 0; left: 0; right: 0; bottom: 0;
        z-index: 20;
        width: 100% !important;
    }
    /* Контейнер мессенджера должен быть relative */
    .messenger-wrapper,
    .chat-wrapper {
        position: relative !important;
        height: calc(100vh - 60px) !important;
        overflow: hidden !important;
    }
    /* Список контактов занимает всю ширину */
    .conversations-list {
        width: 100% !important;
        position: relative !important;
    }
    /* Поле ввода */
    #message-input {
        font-size: 15px !important;
    }
}

/* =====================================================
   ТАБЛИЦЫ — горизонтальный скролл
   ===================================================== */
@media (max-width: 768px) {
    .data-table-wrap {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    .data-table {
        min-width: 500px;
    }
    /* Таблица прайс-листа */
    table.price-table,
    #priceListTable {
        display: block !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
}

/* =====================================================
   ПАГИНАЦИЯ — мобильный вид
   ===================================================== */
@media (max-width: 480px) {
    .pagination,
    div[style*="display:flex"][id*="Pagination"],
    div[id*="Pagination"] {
        flex-wrap: wrap !important;
        gap: 4px !important;
    }
    .pagination button,
    div[id*="Pagination"] button {
        padding: 6px 10px !important;
        font-size: 12px !important;
        min-height: 34px !important;
    }
}

/* =====================================================
   ФОРМА РЕГИСТРАЦИИ (registration-form.css)
   ===================================================== */
@media (max-width: 480px) {
    .registration-form-grid,
    .reg-grid {
        grid-template-columns: 1fr !important;
    }
    .form-row {
        flex-direction: column !important;
    }
}

/* =====================================================
   ДАШБОРД / СТАТИСТИКА — карточки KPI
   ===================================================== */
@media (max-width: 480px) {
    /* Stat карточки 2-в-ряд → 1 на очень маленьких */
    .stats-grid,
    div[style*="grid-template-columns: repeat(4"],
    div[style*="grid-template-columns:repeat(4"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    /* Маленькие экраны — по одному */
    @media (max-width: 360px) {
        .stats-grid {
            grid-template-columns: 1fr !important;
        }
    }
}

/* =====================================================
   УВЕДОМЛЕНИЯ TOAST — позиционирование
   ===================================================== */
@media (max-width: 480px) {
    .toast-container,
    #toast-container {
        left: 8px !important;
        right: 8px !important;
        bottom: 16px !important;
        top: auto !important;
        width: auto !important;
        max-width: 100% !important;
    }
    .toast {
        font-size: 13px !important;
        padding: 10px 14px !important;
    }
}

/* =====================================================
   ПРОЧИЕ МЕЛКИЕ ПРАВКИ
   ===================================================== */
@media (max-width: 480px) {
    /* Заголовки секций */
    .section-header h1,
    .section-header h2 {
        font-size: 18px !important;
    }
    /* Отступы main-content на телефоне */
    .main-content {
        padding: 12px 10px !important;
    }
    /* Кнопки full-width в секции header */
    .section-header {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 8px !important;
    }
    .section-header button,
    .section-header .btn-primary {
        width: 100% !important;
        text-align: center !important;
    }
}

/* Горизонтальный скролл для переполняющихся flex-контейнеров в фильтрах */
@media (max-width: 640px) {
    .filter-bar {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }
    .filter-bar input,
    .filter-bar select,
    .filter-bar button {
        flex: 1 1 calc(50% - 8px) !important;
        min-width: 120px !important;
        max-width: 100% !important;
    }
}

/* =====================================================
   ГЛАВНАЯ — Hero заголовок: перенос на малых экранах
   ===================================================== */
@media (max-width: 640px) {
    .hero-title {
        white-space: normal !important;
        font-size: clamp(1.5rem, 7vw, 2.2rem) !important;
    }
}

/* =====================================================
   ГЛАВНАЯ — Комплексная адаптация секций
   ===================================================== */

/* Планшеты: немного сжимаем hero */
@media (max-width: 768px) {
    .hero {
        padding: 90px 0 55px !important;
    }
}

/* Крупные телефоны и малые планшеты */
@media (max-width: 640px) {
    .stat-number {
        font-size: 2rem !important;
    }
    .features-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* Телефоны (≤ 480px) */
@media (max-width: 480px) {
    .products-grid {
        grid-template-columns: 1fr !important;
    }
    .hero {
        padding: 75px 0 40px !important;
    }
    .section-title {
        font-size: 1.55rem !important;
    }
    .stat-number {
        font-size: 1.75rem !important;
    }
    .stat-label {
        font-size: 0.85rem !important;
    }
    .product-card {
        padding: 1.25rem !important;
    }
    .product-card h3 {
        font-size: 1.3rem !important;
    }
    .features-grid {
        grid-template-columns: 1fr !important;
    }
    .feature-card {
        padding: 1.25rem !important;
    }
    .feature-card h3 {
        font-size: 1.2rem !important;
    }
    .process-step p {
        font-size: 0.9rem !important;
    }
    .float-contact {
        bottom: 16px !important;
        right: 16px !important;
    }
}

/* Маленькие телефоны (≤ 375px) */
@media (max-width: 375px) {
    .stat-number {
        font-size: 1.5rem !important;
    }
    .float-item {
        font-size: 0.82rem !important;
        padding: 8px 12px !important;
    }
    .product-card h3 {
        font-size: 1.15rem !important;
    }
}

/* =====================================================
   ПАТЧ v2 — дополнительные мобильные правки
   ===================================================== */

/* ─── Поля дат в фильтрах — видимость ─── */
@media (max-width: 768px) {
    input[type="date"] {
        color: #2c2d28 !important;
        background: #fff !important;
        -webkit-text-fill-color: #2c2d28 !important;
        min-width: 130px !important;
    }
}

/* ─── Шапка кабинета дилера — компактность ─── */
@media (max-width: 540px) {
    .header-container {
        padding: 0 10px !important;
        min-height: 56px !important;
        gap: 6px !important;
    }
    .user-name {
        display: none !important;
    }
    .logo-link img {
        width: 90px !important;
    }
}

/* ─── Лендинг: прячем телефон, кабинет и соцсети из шапки (они в бургер-меню) ─── */
@media (max-width: 768px) {
    nav .cabinet-btn,
    nav a[href^="tel:"],
    nav .header-icons {
        display: none !important;
    }
    /* "Стать дилером" — по центру через flex */
    nav {
        position: relative !important;
        /* логотип + кнопка + бургер = три flex-элемента */
    }
    .registration-container {
        display: block !important;
        position: absolute !important;
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
        width: auto !important;
        z-index: 10 !important;
    }
    .toggle-btn {
        display: inline-flex !important;
        align-items: center !important;
        padding: 8px 16px !important;
        font-size: 13px !important;
        white-space: nowrap !important;
    }
    /* Форма — фиксированная к экрану, явная ширина чтобы transform из registration-form.css не мешал */
    .dropdown-form {
        position: fixed !important;
        left: 8px !important;
        right: 8px !important;
        top: 70px !important;
        width: calc(100vw - 16px) !important;
        max-height: 80vh !important;
        overflow-y: auto !important;
        border-radius: 16px !important;
        z-index: 9999 !important;
        box-shadow: 0 8px 32px rgba(0,0,0,0.25) !important;
    }
    /* Перекрываем translateX(-50%) из registration-form.css .dropdown-form.active */
    .dropdown-form.active {
        transform: translateY(0) !important;
    }
}

/* ─── Бургер-меню лендинга: соцсети ─── */
.mobile-nav-socials {
    display: flex;
    gap: 12px;
    padding: 12px 20px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}
.mobile-nav-social-link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: rgba(255,255,255,0.08);
    border-radius: 8px;
    text-decoration: none;
    color: rgba(255,255,255,0.85);
    font-size: 13px;
    font-weight: 500;
    flex: 1;
    justify-content: center;
}
.mobile-nav-social-link img { width: 22px; height: 22px; }

/* ─── Бургер-меню лендинга: кнопка "Стать дилером" ─── */
.mobile-nav-dealer {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 13px;
    background: #2c2d28;
    color: white;
    border: 2px solid rgba(255,255,255,0.3);
    border-radius: 8px;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
}

/* ─── Админ-панель: сайдбар — nav скроллится, user-info всегда виден ─── */
@media (max-width: 900px) {
    .sidebar {
        overflow-y: hidden !important;
        display: flex !important;
        flex-direction: column !important;
    }
    .sidebar nav {
        flex: 1 !important;
        overflow-y: auto !important;
        min-height: 0 !important;
    }
    .sidebar .user-info {
        flex-shrink: 0 !important;
        border-top: 1px solid rgba(255,255,255,0.1);
    }
}

/* ─── Личный кабинет: "Получить код" не вылезает за рамки ─── */
@media (max-width: 540px) {
    #tgStep1 > div {
        flex-wrap: wrap !important;
    }
    #tgStep1 > div input {
        width: 100% !important;
    }
    #tgStep1 > div button {
        width: 100% !important;
    }
}

/* ─── Все фильтр-поля: явный цвет текста (select, input) ─── */
@media (max-width: 900px) {
    select,
    select option {
        color: #2c2d28 !important;
        background-color: #fff !important;
        -webkit-text-fill-color: #2c2d28 !important;
    }
    input[type="date"],
    input[type="text"],
    input[type="number"],
    input[type="email"],
    input[type="search"],
    input[type="tel"],
    input[type="password"] {
        color: #2c2d28 !important;
        -webkit-text-fill-color: #2c2d28 !important;
        background-color: #fff !important;
    }
}

/* ─── Сайдбар admin-панели: скролл чтобы user-info не скрывался ─── */
@media (max-width: 900px) {
    .sidebar {
        overflow-y: auto !important;
    }
}

/* ─── KP-шаблон: одна колонка + кнопка на всю ширину ─── */
@media (max-width: 640px) {
    #pdfTemplateGroup div[style*="grid-template-columns:1fr 1fr"],
    #pdfTemplateGroup div[style*="grid-template-columns: 1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }
    #pdfTemplateGroup button.btn-primary {
        width: 100% !important;
        margin-top: 16px !important;
    }
    /* 2FA: кнопка под инпутом */
    #twoFASetupBlock > div > div[style*="display:flex"],
    #twoFADisableBlock > div > div[style*="display:flex"] {
        flex-direction: column !important;
    }
    #twoFASetupBlock button,
    #twoFADisableBlock button {
        width: 100% !important;
    }
}

/* ─── Модальное окно заказа в админ-панели ─── */
@media (max-width: 640px) {
    /* 4-колонный grid → 2 */
    div[style*="grid-template-columns:repeat(4, 1fr)"],
    div[style*="grid-template-columns: repeat(4, 1fr)"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    /* flex+space-between внутри шапки модала */
    #orderModalAdmin div[style*="justify-content:space-between"],
    #orderModalAdmin div[style*="justify-content: space-between"] {
        flex-direction: column !important;
        gap: 10px !important;
        align-items: flex-start !important;
    }
    #orderModalAdmin div[style*="gap:30px"],
    #orderModalAdmin div[style*="gap: 30px"] {
        gap: 8px !important;
        flex-wrap: wrap !important;
    }
    /* Итого к оплате — вертикально */
    #orderModalAdmin div[style*="font-size:24px"] {
        font-size: 18px !important;
    }
}

/* ─── Канбан-доска: горизонтальный скролл ─── */
@media (max-width: 768px) {
    .kanban-board,
    #kanban-section > .main-content > div,
    div[id="kanban-section"] > * > div[style*="display:flex"][style*="gap"] {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding-bottom: 12px !important;
    }
    .kanban-col {
        flex-shrink: 0 !important;
        width: 195px !important;
        min-width: 195px !important;
    }
}

/* ─── Таблица АВС-анализа: горизонтальный скролл ─── */
@media (max-width: 768px) {
    #abcTableWrap,
    #abcAnalysisResult {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        display: block !important;
        max-width: 100% !important;
    }
    #abcAnalysisResult table,
    #abcTable {
        min-width: 480px !important;
    }
}

/* ─── Кнопка отправки в мессенджере ─── */
@media (max-width: 480px) {
    .message-form {
        align-items: center !important;
        gap: 6px !important;
    }
    .btn-send {
        width: 42px !important;
        height: 42px !important;
        flex-shrink: 0 !important;
        min-height: 42px !important;
        min-width: 42px !important;
    }
    #message-input {
        min-width: 0 !important;
        padding: 10px 12px !important;
    }
}

/* ─── Dropdown «Действия» в личном кабинете дилера ─── */
@media (max-width: 600px) {
    .actions-dropdown-menu {
        right: 0 !important;
        left: auto !important;
        min-width: 180px !important;
        max-width: calc(100vw - 16px) !important;
    }
}

/* ─── Лендинг: бургер-кнопка ─── */
@media (max-width: 768px) {
    .mobile-menu {
        width: 42px !important;
        height: 42px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: rgba(255,255,255,0.18) !important;
        border-radius: 8px !important;
        font-size: 1.4rem !important;
        cursor: pointer !important;
        color: white !important;
        border: 1px solid rgba(255,255,255,0.35) !important;
        flex-shrink: 0;
        position: relative;
        z-index: 200;
    }
}

/* ─── Мобильный nav-drawer на лендинге ─── */
.mobile-nav-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.55);
    z-index: 9800;
}
.mobile-nav-overlay.open { display: block; }

.mobile-nav-drawer {
    position: fixed;
    top: 0;
    right: -100%;
    width: min(300px, 85vw);
    height: 100vh;
    background: #2c2d28;
    z-index: 9900;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    transition: right 0.28s cubic-bezier(.4,0,.2,1);
}
.mobile-nav-drawer.open { right: 0; }

.mobile-nav-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255,255,255,0.12);
    flex-shrink: 0;
}
.mobile-nav-head img { height: 30px; }
.mobile-nav-close {
    background: none;
    border: none;
    color: rgba(255,255,255,0.8);
    font-size: 26px;
    cursor: pointer;
    padding: 2px 6px;
    line-height: 1;
}

.mobile-nav-links { flex: 1; padding: 8px 0; }
.mobile-nav-links a {
    display: block;
    padding: 15px 20px;
    color: rgba(255,255,255,0.85);
    text-decoration: none;
    font-size: 15px;
    font-weight: 500;
    border-bottom: 1px solid rgba(255,255,255,0.07);
    transition: background 0.15s;
}
.mobile-nav-links a:hover { background: rgba(255,255,255,0.09); }

.mobile-nav-footer {
    padding: 16px 20px;
    border-top: 1px solid rgba(255,255,255,0.12);
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex-shrink: 0;
}
.mobile-nav-phone {
    color: rgba(255,255,255,0.9);
    text-decoration: none;
    font-size: 16px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}
.mobile-nav-cabinet {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px;
    background: white;
    color: #2c2d28;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 700;
    font-size: 14px;
}