/* OnlyPets layout chrome — extracted from layouts/app.blade.php; cached by browser */
/* Современные кнопки */
        .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 0.5rem 1rem;
            border-radius: var(--radius-md);
            font-weight: 500;
            font-size: 0.875rem;
            transition: all 0.2s ease-in-out;
            border: none;
            cursor: pointer;
            text-decoration: none;
        }
        
        .btn-primary { 
            background-color: var(--primary-color); 
            color: var(--primary-text); 
        }
        .btn-primary:hover { 
            background-color: var(--primary-hover); 
            color: var(--primary-hover-text);
            transform: translateY(-1px);
            box-shadow: var(--shadow-md);
        }
        .btn-primary:active { 
            background-color: var(--primary-active); 
            color: var(--primary-active-text);
        }
        
        .btn-success { 
            background-color: var(--success-color); 
            color: var(--success-text); 
        }
        .btn-success:hover { 
            background-color: var(--success-hover); 
            color: var(--success-hover-text);
            transform: translateY(-1px);
            box-shadow: var(--shadow-md);
        }
        .btn-success:active { 
            background-color: var(--success-active); 
            color: var(--success-active-text);
        }
        
        .btn-warning { 
            background-color: var(--warning-color); 
            color: var(--warning-text); 
        }
        .btn-warning:hover { 
            background-color: var(--warning-hover); 
            color: var(--warning-hover-text);
            transform: translateY(-1px);
            box-shadow: var(--shadow-md);
        }
        .btn-warning:active { 
            background-color: var(--warning-active); 
            color: var(--warning-active-text);
        }
        
        .btn-danger { 
            background-color: var(--danger-color); 
            color: var(--danger-text); 
        }
        .btn-danger:hover { 
            background-color: var(--danger-hover); 
            color: var(--danger-hover-text);
            transform: translateY(-1px);
            box-shadow: var(--shadow-md);
        }
        .btn-danger:active { 
            background-color: var(--danger-active); 
            color: var(--danger-active-text);
        }
        
        .btn-info { 
            background-color: var(--info-color); 
            color: var(--info-text); 
        }
        .btn-info:hover { 
            background-color: var(--info-hover); 
            color: var(--info-hover-text);
            transform: translateY(-1px);
            box-shadow: var(--shadow-md);
        }
        .btn-info:active { 
            background-color: var(--info-active); 
            color: var(--info-active-text);
        }
        
        /* Размеры кнопок */
        .btn-sm {
            padding: 0.375rem 0.75rem;
            font-size: 0.75rem;
        }
        
        .btn-lg {
            padding: 0.75rem 1.5rem;
            font-size: 1rem;
        }
        
        .btn-secondary {
            background-color: var(--secondary-color);
            color: white;
        }
        .btn-secondary:hover {
            background-color: #475569;
            transform: translateY(-1px);
            box-shadow: var(--shadow-md);
        }
        
        /* Современные карточки */
        .card {
            background: var(--surface);
            border-radius: var(--radius-lg);
            box-shadow: var(--shadow-sm);
            border: 1px solid var(--border-color);
            transition: all 0.2s ease-in-out;
        }
        
        .card:hover {
            box-shadow: var(--shadow-md);
            transform: translateY(-2px);
        }
        
        .card-compact {
            padding: 1rem;
        }
        
        .card-body {
            padding: 1.5rem;
        }
        
        .card-header {
            padding: 1rem 1.5rem;
            border-bottom: 1px solid var(--border-color);
            background: var(--background);
            border-radius: var(--radius-lg) var(--radius-lg) 0 0;
        }
        
        .card-footer {
            padding: 1rem 1.5rem;
            border-top: 1px solid var(--border-color);
            background: var(--background);
            border-radius: 0 0 var(--radius-lg) var(--radius-lg);
        }
        /* Верхняя панель сайта (только op-app-header, не hero/topbar внутри контента) */
        header.op-app-header {
            position: static !important;
            top: auto !important;
            left: auto !important;
            right: auto !important;
            z-index: 1 !important;
            overflow: visible !important;
            background: transparent !important;
            backdrop-filter: none !important;
            border-bottom: none !important;
            box-shadow: none !important;
            pointer-events: auto !important;
        }

        header.op-app-header .op-app-header__inner {
            background: transparent !important;
            backdrop-filter: none !important;
            border-bottom: none !important;
            box-shadow: none !important;
            max-width: none !important;
        }
        
        /* Темная тема для header */
        @media (prefers-color-scheme: dark) {
            header.op-app-header .op-app-header__inner {
                background: {{ \App\Helpers\ThemeHelper::headerFooterColor('header.background', 'rgba(15, 23, 42, 0.95)') }} !important;
                border-bottom: 1px solid #334155 !important;
            }
        }
        
        /* Обеспечиваем кликабельность всех элементов header */
        header.op-app-header * {
            pointer-events: auto !important;
        }
        
        /* Специально для кнопок и ссылок в header */
        header.op-app-header button,
        header.op-app-header a,
        header.op-app-header .header-btn {
            pointer-events: auto !important;
            z-index: 10000 !important;
            position: relative !important;
        }
        
        /* Специально для кнопки профиля */
        #profile-btn {
            pointer-events: auto !important;
            z-index: 10000 !important;
            position: relative !important;
            cursor: pointer !important;
        }
        
        /* Специально для dropdown меню профиля */
        #profile-dropdown {
            pointer-events: auto !important;
            z-index: 10001 !important;
            position: absolute !important;
            top: 100% !important;
            right: 0 !important;
            margin-top: 0.5rem !important;
            background-color: white !important;
            border: 1px solid #d1d5db !important;
            border-radius: var(--radius-md) !important;
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
            min-width: 12rem !important;
        }
        
        /* Стили для элементов внутри dropdown меню */
        #profile-dropdown a,
        #profile-dropdown button {
            pointer-events: auto !important;
            cursor: pointer !important;
        }
        
        /* Стили для dropdown переключателя языков */
        #language-dropdown {
            z-index: 10001 !important;
            pointer-events: auto !important;
        }
        
        /* Современный контент (не app-tab / auth — у них свой layout) */
        main:not(.op-app-tab-main):not(.op-auth-main):not(.op-error-main) {
            /* Отступ вниз, чтобы контент не заходил под фиксированный header */
            margin-top: 80px !important;
            /* Высоту страницы и прижатый к низу футер обеспечивает flex-верстка body + main.flex-1 */
            position: relative !important;
            z-index: 1 !important;
            background: var(--op-bg, #F9F9F9) !important;
        }
        
        /* Контейнер с максимальной шириной (настраивается в админке: Настройка темы → Контейнер) */
        .container {
            max-width: var(--container-max-width) !important;
            margin: 0 auto !important;
            padding: 0 !important;
        }
        
        /* Контейнер контенту та футера мають відступи як хедер (px-4 = 1rem) */
        main .container,
        footer .container {
            padding-left: 1rem !important;
            padding-right: 1rem !important;
        }
        
        /* Хедер має p-3 (0.75rem) на мобільних, p-4 (1rem) на десктопі */
        /* Футер має px-4 (1rem) */
        /* Контент також має 1rem для узгодження */
        
        /* Адаптивные стили для мобильных устройств */

        @media (max-width: 639px) {
            #mega-panel .container {
                padding-left: 0.5rem !important;
                padding-right: 0.5rem !important;
            }
        }

        @media (max-width: 768px) {
            .card-body {
                padding: 1rem;
            }
            
            .card-header {
                padding: 0.75rem 1rem;
            }
            
            .card-footer {
                padding: 0.75rem 1rem;
            }
            
            .btn {
                padding: 0.5rem 0.75rem;
                font-size: 0.875rem;
            }
            
            .btn-sm {
                padding: 0.375rem 0.5rem;
                font-size: 0.75rem;
            }
            
            /* Адаптивная сетка для карточек */
            .grid-responsive {
                grid-template-columns: 1fr;
                gap: 1rem;
            }
            
            /* Адаптивные отступы */
            .container {
                padding: 0 0.75rem !important;
            }
            
            /* Адаптивная типографика (не app-tab — у них свои topbar/catalog заголовки) */
            main:not(.op-app-tab-main) h1:not(.op-info-page__title):not(.op-catalog-header__title):not(.op-catalog-page-head__title):not(.op-service-list-topbar__title) {
                font-size: 2rem !important;
            }

            main:not(.op-app-tab-main) h2 {
                font-size: 1.5rem !important;
            }

            main:not(.op-app-tab-main) h3 {
                font-size: 1.25rem !important;
            }
        }
        

        
        /* На больших экранах (>= 1440px) мега-меню строго 1440px и центрировано */

        
        /* Плавная анимация появления мега-меню (широкий экран: центрированная панель) */
        @keyframes megaMenuFadeIn {
            from {
                opacity: 0;
                transform: translateX(-50%) translateY(-20px);
            }
            to {
                opacity: 1;
                transform: translateX(-50%) translateY(0);
            }
        }
        /* На узких экранах панель на всю ширину — без translateX(-50%), иначе съезжает */
        @keyframes megaMenuFadeInFullwidth {
            from {
                opacity: 0;
                transform: translateY(-20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        @media (min-width: 1440px) {
            #mega-panel:not(.hidden) {
                animation: megaMenuFadeIn 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
            }
        }
        @media (max-width: 1439px) {
            #mega-panel:not(.hidden) {
                animation: megaMenuFadeInFullwidth 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
            }
        }
        
        /* Улучшенная тень при hover на мега-меню */
        #mega-panel:hover {
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 4px 16px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.05) !important;
        }
        
        /* Улучшенные отступы в списках */
        #mega-panel ul {
            padding-left: 0 !important;
        }
        
        #mega-panel li {
            margin-bottom: 2px !important;
        }


        /* УЛУЧШЕНИЯ ДЛЯ ЗАМЕТНОСТИ - переопределяем Tailwind классы */
        #mega-panel a.group.hover\:bg-gray-50 {
            background: transparent !important;
        }
        
        #mega-panel a.group.hover\:bg-gray-50:hover {
            background: linear-gradient(to right, rgba(59, 130, 246, 0.15), rgba(239, 246, 255, 0.95)) !important;
            transform: translateX(8px) !important;
        }
        
        /* Улучшенные заголовки колонок */
        #mega-panel .text-\[10px\] {
            font-size: 11px !important;
            font-weight: 700 !important;
            letter-spacing: 0.1em !important;
            color: #374151 !important;
            text-transform: uppercase !important;
            padding-bottom: 8px !important;
            border-bottom: 2px solid rgba(59, 130, 246, 0.1) !important;
            margin-bottom: 16px !important;
        }
        
        /* Улучшенные маркеры */
        #mega-panel .w-1.h-1.rounded-full {
            width: 8px !important;
            height: 8px !important;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2) !important;
            margin-right: 8px !important;
        }
        
        /* Улучшенные отступы в ссылках */
        #mega-panel a.p-2 {
            padding: 10px 14px !important;
            margin: 2px 0 !important;
        }
        
        /* Улучшенная кнопка закрытия */
        #mega-close-btn {
            background: linear-gradient(135deg, #1f2937 0%, #111827 100%) !important;
            border: none !important;
            font-weight: 600 !important;
            letter-spacing: 0.5px !important;
            text-transform: uppercase !important;
            font-size: 13px !important;
            padding: 14px 24px !important;
            margin-top: 24px !important;
            border-radius: var(--radius-md) !important;
        }
        
        #mega-close-btn:hover {
            background: linear-gradient(135deg, #111827 0%, #030712 100%) !important;
            transform: translateY(-3px) scale(1.02) !important;
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25) !important;
        }
        
        /* Улучшенные списки */
        #mega-panel ul.space-y-1 {
            gap: 4px !important;
        }
        
        /* Улучшенная тень мега-меню */
        #mega-panel {
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 4px 16px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.04) !important;
        }
        
        /* Улучшенный контейнер */
        #mega-panel .container {
            padding-top: 24px !important;
            padding-bottom: 24px !important;
        }
        @media (min-width: 1440px) {
            #mega-panel {
                left: 50% !important;
                right: auto !important;
                transform: translateX(-50%) !important;
                max-width: var(--container-max-width) !important;
                width: var(--container-max-width) !important;
                padding: 0 !important;
                box-sizing: border-box !important;
            }
        }
        @media (max-width: 640px) {
            .container {
                padding: 0 0.5rem !important;
            }
            
            .card-body {
                padding: 0.75rem;
            }
            
            .btn {
                padding: 0.375rem 0.5rem;
                font-size: 0.75rem;
            }
            
            /* Компактные таблицы */
            .table-responsive {
                font-size: 0.75rem;
            }
            
            .table-responsive th,
            .table-responsive td {
                padding: 0.5rem 0.25rem;
            }
        }
        
        /* Обеспечиваем, что контент не перекрывает header */
        .container {
            position: relative !important;
            z-index: 1 !important;
        }
        
        /* Стили для логотипа с настройками из админ-панели */
        .header-logo {
            display: flex !important;
            align-items: center !important;
            font-weight: 700 !important;
            font-size: 1.5rem !important;
            color: {{ \App\Helpers\ThemeHelper::headerFooterColor('header.text', '#FFFFFF') }} !important;
            text-decoration: none !important;
        }
        
        .header-logo:hover {
            color: {{ \App\Helpers\ThemeHelper::headerFooterColor('header.text_hover', '#E5E7EB') }} !important;
        }
        
        /* Стили для кнопок в header с настройками из админ-панели */
        .header-btn {
            color: {{ \App\Helpers\ThemeHelper::headerFooterColor('header.text', '#E5E7EB') }} !important;
            transition: all 0.2s ease-in-out !important;
            padding: 0.5rem !important;
            border-radius: var(--radius-md) !important;
            text-decoration: none !important;
            cursor: pointer !important;
        }
        
        .header-btn:hover {
            color: {{ \App\Helpers\ThemeHelper::headerFooterColor('header.text_hover', '#FFFFFF') }} !important;
            background-color: {{ \App\Helpers\ThemeHelper::headerFooterColor('header.button_hover', '#374151') }} !important;
        }
        
        /* Стили для dropdown меню */
        #language-dropdown {
            z-index: 10001 !important;
            pointer-events: auto !important;
        }
        
        /* Обеспечиваем, что никакие другие элементы не перекрывают header.
           Исключения: оверлеи/модалки, которые вешаются на body (иначе sticky-header с z-index:50
           перекрывает их при z-index:auto). */
        body > *:not(header):not(#op-global-action-menu-overlay):not(.op-topbar-action-menu__sheet):not(#op-feedback-fab):not(#op-feedback-modal):not(#global-image-crop-modal):not(.op-bottom-nav):not(.op-vet-modal):not(#op-pwa-install):not(.op-pwa-qr-panel) {
            z-index: auto !important;
        }

        body > .op-vet-modal {
            position: fixed !important;
            inset: 0 !important;
            z-index: 10050 !important;
        }

        body.op-vet-modal-open .op-app-page-header,
        body.op-vet-modal-open .op-pet-profile-tabs {
            z-index: 1 !important;
        }

        .op-bottom-nav {
            position: fixed !important;
            inset-inline: 0 !important;
            bottom: 0 !important;
            z-index: 2147483646 !important;
            pointer-events: none !important;
        }

        .op-bottom-nav-inner {
            position: relative !important;
            z-index: 2147483647 !important;
            pointer-events: auto !important;
        }

        #op-global-action-menu-overlay {
            position: fixed !important;
            inset: 0 !important;
            z-index: 2147483644 !important;
        }

        body > .op-topbar-action-menu__sheet {
            z-index: 2147483645 !important;
        }

        #op-feedback-fab {
            z-index: 2147483647 !important;
        }

        #op-feedback-modal {
            z-index: 2147483648 !important;
        }

        #global-image-crop-modal {
            z-index: 2147483649 !important;
        }
        
        /* Специально для sidebar, чтобы он не перекрывал header */
        #sidebar {
        
        /* Анимации для поиска */

        /* Мега-меню: фон, тень, нижнее скругление. Ширину/позицию не трогаем — заданы в header (1440px по центру). */
        #mega-panel {
            box-sizing: border-box !important;
            background: white !important;
            background-color: white !important;
            background-image: none !important;
            backdrop-filter: none !important;
            -webkit-backdrop-filter: none !important;
            opacity: 1 !important;
            border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15), 0 2px 8px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.05) !important;
            border-radius: 0 0 2rem 2rem !important;
            -webkit-border-radius: 0 0 2rem 2rem !important;
            overflow: hidden !important;
        }
        
        /* Внутренний блок мега-меню — нижнее скругление, чтобы углы точно отображались */
        #mega-panel .mega-panel-inner {
            border-radius: 0 0 2rem 2rem !important;
            -webkit-border-radius: 0 0 2rem 2rem !important;
            overflow: hidden !important;
        }
        
        /* Контейнер внутри мега-меню должен соответствовать header/footer */
        #mega-panel .container {
            max-width: var(--container-max-width) !important;
            margin: 0 auto !important;
            padding-left: 1rem !important;
            padding-right: 1rem !important;
            padding-top: 1rem !important;
            padding-bottom: 1rem !important;
            box-sizing: border-box !important;
        }
        

        

        /* На всех экранах мега-меню занимает всю ширину, контейнер внутри ограничен */
        @media (min-width: 640px) {
            #mega-panel .container {
                padding-left: 1.5rem !important;
                padding-right: 1.5rem !important;
            }
        }
        
        @media (min-width: 1024px) {
            #mega-panel .container {
                padding-left: 2rem !important;
                padding-right: 2rem !important;
            }
        }
        

        
        /* Все состояния мега-меню - белый фон */
        #mega-panel.opacity-0,
        #mega-panel:not(.hidden),
        #mega-panel.hidden,
        #mega-panel[class*="opacity"] {
            opacity: 1 !important;
            background: white !important;
            background-color: white !important;
            background-image: none !important;
            backdrop-filter: none !important;
            -webkit-backdrop-filter: none !important;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15), 0 2px 8px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.05) !important;
            border-radius: 0 0 2rem 2rem !important;
            overflow: hidden !important;
        }
        
        /* Центрирование для открытого мега-меню */
        #mega-panel:not(.hidden) {
            transform: translateX(-50%) translateY(0) !important;
        }
        
        /* Центрирование для закрытого мега-меню с opacity-0 */
        #mega-panel.opacity-0 {
            transform: translateX(-50%) translateY(-10px) !important;
        }
        
        @media (max-width: 1439px) {
            #mega-panel:not(.hidden) {
                transform: translateY(0) !important;
            }
            
            #mega-panel.opacity-0 {
                transform: translateY(-10px) !important;
            }
        }
        

        
        /* Строгий белый фон для мега-меню - переопределяет все, сохраняя позиционирование */
        #mega-panel,
        #mega-panel[style],
        #mega-panel.fixed,
        #mega-panel.transform {
            background: white !important;
            background-color: white !important;
            background-image: none !important;
            backdrop-filter: none !important;
            -webkit-backdrop-filter: none !important;
            opacity: 1 !important;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15), 0 2px 8px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.05) !important;
            border-radius: 0 0 2rem 2rem !important;
            /* Позиционирование уже задано в основном блоке #mega-panel */
        }
        
        /* Переопределяем все возможные inline стили через более специфичный селектор */
        div#mega-panel {
            background: white !important;
            background-color: white !important;
        }

        /* ОЧЕНЬ СПЕЦИФИЧНЫЙ селектор: нижнее скругление и обрезка по нему */
        div#mega-panel,
        div#mega-panel[style],
        div#mega-panel.fixed,
        div#mega-panel.hidden,
        div#mega-panel.opacity-0,
        div#mega-panel.transform {
            border-radius: 0 0 2rem 2rem !important;
            -webkit-border-radius: 0 0 2rem 2rem !important;
            -moz-border-radius: 0 0 2rem 2rem !important;
            overflow: hidden !important;
        }
        
        /* Ширина панели: не на весь экран, max 1440px по центру — тогда скругление видно по краям панели */
        div#mega-panel.fixed {
            width: calc(100vw - 2rem) !important;
            max-width: var(--container-max-width, 1280px) !important;
            padding: 0 !important;
            box-sizing: border-box !important;
        }
        
        @media (min-width: 1440px) {
            div#mega-panel.fixed {
                width: var(--container-max-width, 1280px) !important;
                max-width: var(--container-max-width, 1280px) !important;
                padding: 0 !important;
                box-sizing: border-box !important;
            }
        }

        /* Убираем прозрачность у всех внутренних элементов */
        #mega-panel .container,
        #mega-panel .grid,
        #mega-panel > div,
        #mega-panel .p-2,
        #mega-panel .p-3 {
            background: transparent !important;
        }

        
        /* Современные стили для мега-меню */
        #mega-panel {
            border-radius: 0 0 2rem 2rem !important;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
        }
        
        /* Заголовки колонок - современный стиль */
        #mega-panel .text-\[10px\] {
            font-size: 11px !important;
            font-weight: 600 !important;
            letter-spacing: 0.05em !important;
            color: #6b7280 !important;
            margin-bottom: 12px !important;
            padding: 4px 0 !important;
        }
        
        /* Улучшенные ссылки в мега-меню */
        #mega-panel a {
            border-radius: var(--radius-lg) !important;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
            position: relative !important;
            overflow: hidden !important;
        }
        
        #mega-panel a::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            width: 4px;
            height: 100%;
            background: linear-gradient(to bottom, #3b82f6, #8b5cf6);
            transform: scaleY(0);
            transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
            z-index: 1;
        }
        
        #mega-panel a:hover::before {
            transform: scaleY(1);
        }
        
        #mega-panel a:hover,
        #mega-panel a.hover\:bg-gray-50:hover {
            background: linear-gradient(to right, rgba(59, 130, 246, 0.12), rgba(239, 246, 255, 0.9)) !important;
            transform: translateX(6px) !important;
            box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15) !important;
            border-left: 4px solid #3b82f6 !important;
            padding-left: 12px !important;
        }
        
        /* Иконки в ссылках - анимация */
        #mega-panel a span.text-base {
            transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
            display: inline-block !important;
        }
        
        #mega-panel a:hover span.text-base {
            transform: scale(1.2) rotate(8deg) !important;
            filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
        }
        
        /* Стрелки - улучшенная анимация */
        #mega-panel a i.fa-chevron-right {
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        }
        
        #mega-panel a:hover i.fa-chevron-right {
            transform: translateX(4px) !important;
            color: #3b82f6 !important;
        }
        
        /* Текст в ссылках - улучшенная типографика */
        #mega-panel a span.font-medium {
            font-weight: 500 !important;
            letter-spacing: -0.01em !important;
        }
        
        /* Колонки - улучшенные отступы */
        #mega-panel > div > div.p-2 {
            padding: 16px !important;
            border-radius: 1rem !important;
            transition: background 0.3s ease !important;
        }
        
        #mega-panel > div > div.p-2:hover {
            background: rgba(239, 246, 255, 0.6) !important;
            transform: translateY(-2px) !important;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
        }
        
        /* Разделитель между колонками - улучшенный стиль */
        #mega-panel .grid > div:not(:last-child)::after {
            content: '';
            position: absolute;
            right: 0;
            top: 10%;
            bottom: 10%;
            width: 2px;
            background: linear-gradient(to bottom, transparent, rgba(59, 130, 246, 0.15), transparent);
            opacity: 1;
        }
        
        #mega-panel .grid > div {
            position: relative !important;
        }
        
        @media (max-width: 767px) {
            #mega-panel .grid > div::after {
                display: none !important;
            }
        }
        
        /* Кнопка закрытия - современный стиль */
        #mega-close-btn {
            border-radius: 1rem !important;
            font-weight: 500 !important;
            letter-spacing: 0.02em !important;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
        }
        
        #mega-close-btn:hover {
            transform: translateY(-2px) !important;
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15) !important;
        }
        
        /* Маркеры заголовков - улучшенный стиль */
        #mega-panel .w-1.h-1.rounded-full {
            width: 6px !important;
            height: 6px !important;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) !important;
        }
        /* Уменьшаем отступы контейнера мега-меню */
        /* Контейнер внутри мега-меню - строго по ширине header/footer */
        #mega-panel .container {
            max-width: 100% !important;
            width: 100% !important;
            margin: 0 auto !important;
            padding-left: 1rem !important;
            padding-right: 1rem !important;
            padding-top: 24px !important;
            padding-bottom: 24px !important;
            box-sizing: border-box !important;
        }
        


        /* Контейнер внутри мега-меню - строго по ширине header/footer */
        #mega-panel > .container {
            width: 100% !important;
            max-width: 100% !important;
            box-sizing: border-box !important;
        }
        
        /* Убираем лишние отступы у контейнера на больших экранах */
        @media (min-width: 1440px) {
            #mega-panel {
                width: var(--container-max-width) !important;
                max-width: var(--container-max-width) !important;
            }
            
            #mega-panel > .container {
                width: 100% !important;
                max-width: 100% !important;
                padding-left: 1rem !important;
                padding-right: 1rem !important;
            }
        }
        @media (min-width: 640px) {
            #mega-panel .container {
                padding-left: 1.5rem !important;
                padding-right: 1.5rem !important;
            }
        }
        
        @media (min-width: 1024px) {
            #mega-panel .container {
                padding-left: 2rem !important;
                padding-right: 2rem !important;
            }
        }
        

        
        #search-form {
        
        @keyframes searchSlideIn {
            from {
                opacity: 0;
                transform: translate(-50%, -20px) scale(0.95);
            }
            to {
                opacity: 1;
                transform: translate(-50%, 0) scale(1);
            }
        }
        
        #search-overlay {
            animation: overlayFadeIn 0.3s ease-out;
        }
        
        @keyframes overlayFadeIn {
            from {
                opacity: 0;
            }
            to {
                opacity: 1;
            }
        }
        
        /* Стили для фильтров поиска */
        .search-filter-btn.active {
            background-color: #3b82f6;
            color: white;
        }
        
        /* Стили для предложений */
        .suggestion-btn:hover {
            transform: translateY(-1px);
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }
        
        /* Адаптивные стили для поиска */
        @media (max-width: 768px) {
            #search-form {
                width: calc(100% - 2rem);
                left: 1rem;
                transform: none;
                top: 16px;
            }
            
            #search-form .flex {
                flex-direction: column;
                gap: 1rem;
            }
            
            #search-form .flex-1 {
                width: 100%;
            }
        }

        /* Public web app look: override legacy header defaults after theme CSS. */
        body.op-page header.op-app-header {
            background: rgba(255, 255, 255, 0.92) !important;
            border-bottom: 1px solid rgba(231, 229, 228, 0.86) !important;
            box-shadow: 0 10px 35px rgba(28, 25, 23, 0.05) !important;
            backdrop-filter: saturate(180%) blur(18px) !important;
        }

        body.op-app-tab-page .op-app-page-header,
        body.op-page .op-app-page-header--global {
            background: #fff !important;
            border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
        }

        body.op-app-tab-page .op-app-page-header header.op-home-hero,
        body.op-app-tab-page .op-app-page-header header.op-catalog-header,
        body.op-app-tab-page .op-app-page-header header.op-service-list-topbar,
        body.op-app-tab-page .op-app-page-header header.op-service-detail-topbar,
        body.op-app-tab-page .op-app-page-header header.op-profile-subheader,
        body.op-page .op-app-page-header header.op-home-topbar {
            background: transparent !important;
            border: none !important;
            box-shadow: none !important;
            backdrop-filter: none !important;
        }

        body.op-page .header-logo {
            color: var(--op-text, #1C1917) !important;
        }

        body.op-page .header-btn {
            color: var(--op-text-secondary, #6B6560) !important;
            border-radius: 9999px !important;
        }

        body.op-page .header-btn:hover,
        body.op-page .header-btn.bg-white\/15 {
            background: rgba(224, 124, 36, 0.1) !important;
            color: var(--op-primary, #E07C24) !important;
        }

        body.op-page #mega-btn {
            background: var(--op-primary, #E07C24) !important;
            color: #fff !important;
            box-shadow: 0 8px 18px rgba(224, 124, 36, 0.18) !important;
        }

        body.op-page main:not(.op-app-tab-main):not(.op-auth-main):not(.op-error-main) {
            margin-top: 88px !important;
            background: var(--op-bg, #F9F9F9) !important;
        }

        body.op-page .site-container {
            max-width: var(--container-max-width, 1280px) !important;
        }

        body.op-app-tab-page main.op-app-tab-main {
            margin-top: 0 !important;
            padding-top: 0 !important;
            background: var(--op-bg, #F9F9F9) !important;
        }

        @media (min-width: 1024px) {
            body.op-app-tab-page .op-app-page-header {
                width: 100% !important;
                background: #fff !important;
                border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
                box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
                margin-bottom: 36px !important;
            }

            body.op-app-tab-page .op-app-page-header__inner {
                box-sizing: border-box !important;
                width: 100% !important;
                margin-inline: auto !important;
                padding-inline: var(--container-padding-x, 16px) !important;
            }

            body.op-app-tab-page .op-app-shell__body {
                background: transparent !important;
                border: none !important;
                box-shadow: none !important;
                border-radius: 0 !important;
            }
        }

        body.op-page:not(.op-app-tab-page) main {
            margin-top: 1rem !important;
        }

        .op-site-shell {
            box-sizing: border-box !important;
            width: 100% !important;
            max-width: {{ (int) config('app_parity.content_max_width', 1280) }}px !important;
            margin-inline: auto !important;
            padding: 12px var(--container-padding-x, 16px) 0 !important;
        }

        .op-site-shell__header {
            background: #fff !important;
            border-radius: 12px !important;
            border: 1px solid rgba(0, 0, 0, 0.08) !important;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06) !important;
            position: sticky !important;
            top: 12px !important;
            z-index: 9999 !important;
            overflow: hidden !important;
        }

        .op-site-shell .op-app-header {
            position: static !important;
            left: auto !important;
            right: auto !important;
        }

        .op-site-shell .op-app-header__inner {
            max-width: none !important;
            border: none !important;
            box-shadow: none !important;
            border-radius: 0 !important;
        }
}
}

/* Critical responsive visibility — do not rely on Tailwind CDN */
.hidden {
  display: none !important;
}
.op-app-page-header__main {
  display: none !important;
}
.op-app-page-header__mobile {
  display: block;
}
.lg\:hidden {
  display: block;
}
.lg\:block {
  display: none !important;
}
@media (min-width: 1024px) {
  .op-app-page-header__main {
    display: block !important;
  }
  .op-app-page-header__mobile,
  .lg\:hidden {
    display: none !important;
  }
  .lg\:block {
    display: block !important;
  }
}
.op-home-only-mobile {
  display: block;
}
@media (min-width: 1024px) {
  .op-home-only-mobile {
    display: none !important;
  }
}

/* Form controls — pill radius (match search / CTA) */
.op-input:not(textarea):not([type="time"]):not([type="date"]),
.op-select,
.op-form-select,
select.op-input,
.op-service-form select:not(.op-locale-time__select),
.op-service-form .location-filters select,
[data-shared-walk-form] .op-input:not(textarea):not([type="time"]):not([type="date"]),
[data-shared-walk-form] select:not(.op-locale-time__select) {
    border-radius: 999px !important;
}

textarea.op-input,
.op-textarea,
.op-service-form textarea,
[data-shared-walk-form] textarea {
    border-radius: 16px !important;
}

input[type="time"].op-input,
input[type="date"].op-input,
.op-locale-time__select {
    border-radius: 999px !important;
    pointer-events: auto !important;
    -webkit-appearance: auto;
    appearance: auto;
}

.op-locale-time__select {
    -webkit-appearance: none !important;
    appearance: none !important;
    cursor: pointer !important;
}

input[type="time"]::-webkit-calendar-picker-indicator,
input[type="date"]::-webkit-calendar-picker-indicator {
    cursor: pointer !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}