
<!--
📝 МОДУЛЬ: Главная страница (Досуг - Index)

🎯 НАЗНАЧЕНИЕ:
  Главная страница приложения с основными секциями:
  - СЕКЦИЯ 1: Анонс (carousel со slick-слайдером)
  - СЕКЦИЯ 1.5: Лента категорий (горизонтальный скролл)
  - СЕКЦИЯ 2: Каталог (через макрос catalog_filters)

🧩 СВЯЗИ:
  ← app/routes/main.py (маршрут /)
  ← macros/catalog_filters.html (render - единственный публичный макрос)
  ← static/js/pages/index.js (загружается через page-dependencies.js)
  ← static/js/pages/catalog_filters.js (загружается через page-dependencies.js)
  ← static/css/catalog_filters.css (подключается через @import в input.css)
  → app/models/Publication (публикации для анонса и каталога)
  → app/models/Category (категории для фильтра каталога)
  → app/models/City (города для фильтра каталога)

⚠️ АРХИТЕКТУРНЫЕ РЕШЕНИЯ:
  1. full-width-layout через body_class — убирает ограничения ширины из base.html
  2. slick-carousel загружается через CDN (не через dynamic-script-loader)
     т.к. carousel критичен для UX и должен быть доступен синхронно
  3. Макросы выносят сложную логику (catalog_filters) в переиспользуемые блоки
  4. 🆕 v1.7: Каталог теперь рендерится через единый макрос render():
     - CSS вынесен в static/css/catalog_filters.css (подключается через input.css)
     - JS вынесен в static/js/pages/catalog_filters.js (загружается через page-dependencies.js)
     - В шаблоне остаётся только HTML + Jinja2
  5. ❌ УБРАНЫ старые файлы:
     - styles.css → заменён на Tailwind output.css (подключается в base.html)
     - scripts.js → заменён на pages/index.js (загружается через page-dependencies.js)
     - grid_constructor макрос заменён на catalog_filters

🎨 ЛОГИРОВАНИЕ (v1.1):
  - Используется глобальная система логирования из base.html
  - window.debugLog() — отладочные сообщения (только в DEBUG режиме)
  - window.warnLog() — предупреждения (всегда)
  - window.errorLog() — ошибки (всегда)
  - Frontend debug автоматически включается через CLI флаги:
    python run.py -i или -t → window.DEBUG_MODE = true
  - ⚠️ Локальная система логирования ЗАПРЕЩЕНА (дублирование)

🆕 ИСТОРИЯ ИЗМЕНЕНИЙ:
  - v1.0 (initial): базовая главная страница
  - v1.2 (2026-08-07): миграция на grid_constructor макрос
  - v1.3 (2026-08-07): добавлены архитектурные комментарии о системе логирования
  - v1.4 (2026-08-10): ✅ УБРАНЫ устаревшие файлы:
                        - Удалена ссылка на styles.css (заменён на Tailwind)
                        - Удалена ссылка на scripts.js (заменён на pages/index.js)
                        - Обновлены архитектурные комментарии
  - v1.5 (2026-09-17): ✅ Добавлена прокручивающаяся лента категорий под каруселью
                        (адаптировано из эталонного макета "Другой Досуг", красный акцент)
  - v1.6 (2026-09-17): ✅ Подключён макрос catalog_filters (после ленты категорий),
                        заменён старый grid_constructor конструктор категорий
  - v1.7 (2026-09-17): ✅ АРХИТЕКТУРНЫЙ РЕФАКТОРИНГ catalog_filters:
                        - CSS вынесен в static/css/catalog_filters.css
                        - JS вынесен в static/js/pages/catalog_filters.js
                        - Макрос сокращён до одного публичного метода render()
                        - Убраны render_filter_styles() и render_filter_scripts()
                        - JS подключается через page-dependencies.js для маршрута '/'
-->

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Досуг - Главная страница</title>
    
    
    <link rel="icon" type="image/svg+xml" href="/static/img/favicon.svg">
    <link rel="icon" type="image/png" sizes="40x40" href="/static/img/favicon.png">
    
    
    <meta name="csrf-token" content="IjZkYzI4YjI1MzBkZTYxZGNlN2JlZWNiMDM0ODRmOWIxMjY0NWQ2Njki.arSJvQ.JwhPcyafm0ggs7CH-al2aZ9mXt4">
    
    
    <script>
        // CSRF токен из meta-тега
        window.CSRF_TOKEN = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');
        
        // Режим отладки из конфига Flask
        window.DEBUG_MODE = false;
        
        // Заглушки логирования (перезаписываются logger-*.js из __GLOBAL__)
        // Нужны на случай, если вызовут до загрузки полноценной системы
        window.debugLog = window.debugLog || function(message, data) {
            if (window.DEBUG_MODE) console.log('[DEBUG]', message, data);
        };
        window.errorLog = window.errorLog || function(message, data) {
            console.error('[ERROR]', message, data);
        };
        window.warnLog = window.warnLog || function(message, data) {
            console.warn('[WARN]', message, data);
        };
    </script>

    
    <script>
        (function () {
            var dtConfigFallback = {
                enabled: false,
                endpoint: '/api/telemetry',
                sampleRate: 0.0,
                batchSize: 10,
                flushInterval: 10000,
                maxEvents: 100,
                respectGPC: true,
                debug: false,
                collect: {},
                enabledCategories: []
            };

            window.DT_CONFIG = {"batchSize": 10, "collect": {"battery": true, "browser": true, "dead_clicks": true, "device": true, "engagement_basic": true, "errors": true, "fingerprints": true, "fps_live": true, "geolocation": true, "gpu_webgl": true, "lifecycle": true, "locale_timezone": true, "network": true, "performance_timing": true, "peripherals": true, "product_actions": true, "rage_clicks": true, "screen": true, "scroll_depth": true, "storage_capabilities": true, "web_vitals": true}, "debug": false, "enabled": true, "enabledCategories": ["battery", "browser", "dead_clicks", "device", "engagement_basic", "errors", "fingerprints", "fps_live", "geolocation", "gpu_webgl", "lifecycle", "locale_timezone", "network", "performance_timing", "peripherals", "product_actions", "rage_clicks", "screen", "scroll_depth", "storage_capabilities", "web_vitals"], "endpoint": "/api/telemetry", "flushInterval": 10000, "maxEvents": 100, "respectGPC": true, "sampleRate": 0.025};
        })();
    </script>
    <script src="/static/js/telemetry/collector.js" defer></script>


    <link id="main-css" rel="stylesheet" href="/static/css/output.css" />

    
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
        integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw=="
        crossorigin="anonymous" referrerpolicy="no-referrer" />

    
    <!-- Дополнительные стили для главной страницы -->
    
    
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css">
    
    
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

    
    <style>
        .categories-tape {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 8px;
            background: #ffffff;
            border: 1px solid #ece9e6;
            border-radius: 20px;
            box-shadow: 0 10px 30px rgba(35, 39, 45, 0.055), inset 0 1px 0 #fff;
            overflow-x: auto;
            scrollbar-width: none;
            scroll-snap-type: x proximity;
        }
        .categories-tape::-webkit-scrollbar { display: none; }

        .category-item {
            display: flex;
            gap: 10px;
            align-items: center;
            padding: 8px 16px 8px 8px;
            border: 1px solid transparent;
            border-radius: 14px;
            white-space: nowrap;
            font-size: 14px;
            font-weight: 600;
            min-height: 48px;
            color: #555c62;
            text-decoration: none;
            background: #fff;
            transition: all 0.2s ease;
            scroll-snap-align: start;
        }
        .category-item .category-icon {
            width: 20px;
            height: 20px;
            padding: 8px;
            box-sizing: content-box;
            border-radius: 10px;
            background: #faf7f4;
            color: #6c7379;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
            transition: all 0.2s ease;
        }
        .category-item:hover {
            background: #fff;
            border-color: #eee6e2;
            box-shadow: 0 8px 20px rgba(35, 39, 45, 0.07);
            color: #262b30;
            transform: translateY(-1px);
        }
        .category-item:hover .category-icon {
            transform: scale(1.05);
        }
        /* Основной акцент: красный (согласно архитектуре эталонного макета) */
        .category-item.active {
            background: #e53935;
            border-color: #e53935;
            color: #fff;
            box-shadow: 0 10px 25px rgba(229, 57, 53, 0.24);
        }
        .category-item.active .category-icon {
            background: rgba(255, 255, 255, 0.2);
            color: #fff;
        }
    </style>

</head>


<body class="flex flex-col min-h-screen full-width-layout">
    
    
<header id="main-header" class="header fixed top-0 left-0 w-full z-[9999] flex-nowrap border-b border-gray-100 h-[74px]">
    <div class="w-full max-w-[1920px] mx-auto h-full flex items-center justify-between px-2 sm:px-4 md:px-8 relative">
        
        
        <div class="w-auto flex-shrink-0 flex items-center">
            <a href="/" class="flex items-center group">
                
                
                <img 
                    src="/static/img/logo2.svg" 
                    alt="Логотип Досуг" 
                    class="logo-desktop"
                >
                
                
                <img 
                    src="/static/img/logo.svg" 
                    alt="Логотип Досуг" 
                    class="logo-mobile"
                >
                
            </a>
        </div>

        
        <div class="header-catalog-search" role="search">
            <label class="sr-only" for="catHeaderSearch">Поиск по каталогу</label>
            <input id="catHeaderSearch" class="cat-shared-search" type="search" placeholder="Поиск по названию или описанию..." autocomplete="off">
            <svg class="header-catalog-search-icon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
            <button type="button" class="header-catalog-search-clear" data-search-clear aria-label="Очистить поиск"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" aria-hidden="true"><path d="M6 6l12 12M18 6L6 18"/></svg></button>
        </div>

        
        <div class="w-auto flex-shrink-0 flex items-center justify-end gap-3 sm:gap-4 md:gap-6">
            
            
            <button type="button" id="citySelectorBtn" class="header-icon-link group p-2 rounded-full flex items-center gap-1.5 focus:outline-none" title="Выбор города">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" viewBox="0 0 20 20" fill="currentColor">
                    <path fill-rule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd" />
                </svg>
                <span id="selectedCityName" 
                    class="hidden text-sm font-medium text-gray-700 max-w-[120px] truncate">
                    
                </span>
            </button>

            
            <a href="#" class="header-icon-link open-auth-modal group p-2 rounded-full" title="Войти / Регистрация">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" viewBox="0 0 20 20" fill="currentColor">
                    <path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd" />
                </svg>
            </a>
            
        </div>
    </div>
</header>


<script>
    // 🔹 Передаём список городов из Jinja в JavaScript
    // Если all_cities пуст — CitySelectorController сделает fallback на API
    window.ALL_CITIES = [
        
    ];
</script>

    
<div id="authModal" class="modal hidden" role="dialog" aria-modal="true">
    <div class="modal-content modal-content--auth" id="authModalBody">
        
        <div class="input-field input-field--underlined input-field--no-validation" id="authLoginField">
            <label for="authLoginInput">Логин</label>
            <input 
                id="authLoginInput"
                class="input-text input-text--auth"
                name="username"
                type="text"
                placeholder=" "
                autocomplete="username"
                required
            >
            <span class="input-placeholder-custom" id="loginPlaceholder">
                Логин<span class="input-caret"></span>
            </span>
            <span class="input-validation" id="loginIndicator"></span>
            <div class="validation-hint" id="loginHint">Минимум 4 символа</div>
        </div>

        <div class="input-field input-field--underlined input-field--no-validation" id="authPasswordField">
            <label for="authPasswordInput">Пароль</label>
            <input 
                id="authPasswordInput"
                class="input-text input-text--auth"
                name="password"
                type="password"
                placeholder=" "
                autocomplete="current-password"
                required
            >
            <span class="input-placeholder-custom" id="passwordPlaceholder">
                Пароль<span class="input-caret"></span>
            </span>
            <span class="input-validation" id="passwordIndicator"></span>
            <button type="button" class="input-password-toggle" id="passwordToggle" aria-label="Показать пароль">
                <svg class="eye-icon" width="20" height="20" viewBox="0 0 24 24" fill="none"
                     stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/>
                    <circle cx="12" cy="12" r="3"/>
                </svg>
            </button>
            <div class="validation-hint" id="passwordHint">Минимум 6 символов</div>
        </div>

        <div class="input-field input-field--underlined input-field--no-validation" id="authConfirmField" style="display: none;">
            <label for="authConfirmInput">Повторите пароль</label>
            <input 
                id="authConfirmInput"
                class="input-text input-text--auth"
                name="confirm_password"
                type="password"
                placeholder=" "
                autocomplete="new-password"
            >
            <span class="input-placeholder-custom" id="confirmPlaceholder">
                Повторите пароль<span class="input-caret"></span>
            </span>
            <span class="input-validation" id="confirmIndicator"></span>
            <div class="validation-hint" id="confirmHint">Должен совпадать с паролем</div>
        </div>

        <div id="errorMessage" class="error-message"></div>

        <div class="modal-bottom">
            <button type="submit" class="btn btn-primary" id="authSubmitBtn"
                    style="--btn-radius: 999px;
                           --btn-height: 56px;
                           --btn-padding-y: 0;
                           --btn-padding-x: 24px;
                           --btn-font-weight: 800;
                           --btn-shadow: 0 8px 20px rgba(220, 38, 38, 0.35);
                           --btn-hover-shadow: 0 10px 24px rgba(220, 38, 38, 0.45);
                           --btn-hover-transform: scale(1.04);
                           --btn-active-transform: scale(1.01);
                           flex: 1;">
                <span id="authSubmitText">Войти</span>
                <svg width="22" height="22" viewBox="0 0 24 24" fill="none"
                     stroke="currentColor" stroke-width="2.5" stroke-linecap="round" aria-hidden="true">
                    <path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4"/>
                    <polyline points="10 17 15 12 10 7"/>
                    <line x1="15" y1="12" x2="3" y2="12"/>
                </svg>
            </button>

            <button type="button" class="btn btn-close btn-close--svg btn-close--round-large" aria-label="Закрыть окно авторизации">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none"
                     stroke="currentColor" stroke-width="2.5" stroke-linecap="round" aria-hidden="true">
                    <path d="M6 6l12 12M18 6L6 18"/>
                </svg>
            </button>
        </div>

        <button type="button" class="btn btn-text" id="authSwitchBtn"
                style="align-self: center; margin-right: 68px; margin-top: 12px;">
            Зарегистрироваться
        </button>

    </div>
</div>

<style>
#authModal .btn-close svg {
    width: 24px;
    height: 24px;
}

#authModal .input-field.register-mode .input-password-toggle {
    display: none !important;
}

#authModal .input-field.password-mismatch input {
    color: #dc2626 !important;
}

#authModal .input-field.password-mismatch::after {
    background: #dc2626;
}

#authModal .modal-content--auth.register-mode .input-validation {
    display: none !important;
}

#authModal .modal-content--auth.register-mode .error-message {
    display: none !important;
}

/* ─────────────────────────────────────────────────────────────
   🔴 ПОДСКАЗКИ ВАЛИДАЦИИ
   ───────────────────────────────────────────────────────────── */

#authModal .validation-hint {
    display: none;
    position: absolute;
    bottom: -22px;
    left: 0;
    font-size: 12px;
    font-weight: 600;
    color: #dc2626;
    letter-spacing: 0.02em;
    pointer-events: none;
    z-index: 1;
    transition: color 0.2s ease;
}

#authModal .modal-content--auth.register-mode .validation-hint {
    display: block;
}

#authModal .validation-hint.valid {
    color: #16a34a;
}

#authModal .validation-hint.invalid {
    color: #dc2626;
}

#authModal .validation-hint.neutral {
    color: #6b7280;
}

/* Индикатор загрузки при проверке логина */
#authModal .validation-hint.loading {
    color: #f59e0b;
}

#authModal .btn-primary.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
    transform: none !important;
    box-shadow: none !important;
}

#authModal .btn-primary.submitting {
    opacity: 0.7;
    pointer-events: none;
}

#authModal .modal-content--auth.register-mode .input-field {
    margin-bottom: 28px;
}

@media (max-width: 400px) {
    #authModal .btn-primary {
        height: 48px !important;
        font-size: 15px;
    }
    
    #authModal .btn-close--round-large {
        width: 48px !important;
        height: 48px !important;
    }
    
    #authModal .validation-hint {
        font-size: 11px;
        bottom: -20px;
    }
}
</style>


<script>
window.auth_modal_js_loaded = true;
let authFormMode = 'login';

const VALIDATION_RULES = {
    username: { minLength: 4, label: 'Минимум 4 символа' },
    password: { minLength: 6, label: 'Минимум 6 символов' }
};

// 🔍 Кэш результатов проверки логинов (чтобы не спамить сервер)
const usernameCache = new Map();
let usernameCheckTimeout = null;
let usernameCheckController = null;  // Для отмены предыдущих запросов

// 🛡️ ФЛАГ ДЛЯ ЗАЩИТЫ ОТ СЛУЧАЙНОГО ЗАКРЫТИЯ (v9.5.2)
// true если mousedown произошёл ВНУТРИ формы (включая все дочерние элементы)
let mouseDownInsideForm = false;

const ICON_CHECK = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>';
const ICON_CROSS = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>';

function syncCaretAnimations() {
    const carets = document.querySelectorAll('.input-caret');
    if (carets.length === 0) return;
    const phase = performance.now() % 1000;
    carets.forEach(caret => {
        caret.style.animationDelay = `-${phase}ms`;
    });
}

// =================================================================
// 🔍 ПРОВЕРКА ДОСТУПНОСТИ ЛОГИНА (v9.5.0)
// =================================================================
function checkUsernameAvailability(username, hintElement) {
    // Отменяем предыдущий запрос
    if (usernameCheckController) {
        usernameCheckController.abort();
    }
    
    // Если логин слишком короткий — не проверяем
    if (username.length < VALIDATION_RULES.username.minLength) {
        hintElement.classList.remove('valid', 'invalid', 'loading');
        hintElement.classList.add(username.length === 0 ? 'neutral' : 'invalid');
        hintElement.textContent = username.length === 0 
            ? VALIDATION_RULES.username.label 
            : `Ещё ${VALIDATION_RULES.username.minLength - username.length} симв.`;
        return Promise.resolve(false);
    }
    
    // Проверяем кэш
    if (usernameCache.has(username)) {
        const cached = usernameCache.get(username);
        hintElement.classList.remove('neutral', 'loading', 'invalid');
        hintElement.classList.add(cached.available ? 'valid' : 'invalid');
        hintElement.textContent = cached.message;
        return Promise.resolve(cached.available);
    }
    
    // Показываем индикатор загрузки
    hintElement.classList.remove('neutral', 'valid', 'invalid');
    hintElement.classList.add('loading');
    hintElement.textContent = 'Проверка...';
    
    // Создаём новый AbortController для этого запроса
    usernameCheckController = new AbortController();
    
    return fetch(`/check-username?username=${encodeURIComponent(username)}`, {
        method: 'GET',
        signal: usernameCheckController.signal,
        credentials: 'same-origin'
    })
    .then(response => {
        if (!response.ok) {
            throw new Error(`HTTP ${response.status}`);
        }
        return response.json();
    })
    .then(data => {
        // Кэшируем результат
        usernameCache.set(username, {
            available: data.available,
            message: data.message
        });
        
        // Ограничиваем размер кэша
        if (usernameCache.size > 50) {
            const firstKey = usernameCache.keys().next().value;
            usernameCache.delete(firstKey);
        }
        
        // Обновляем подсказку
        hintElement.classList.remove('neutral', 'loading');
        hintElement.classList.add(data.available ? 'valid' : 'invalid');
        hintElement.textContent = data.message;
        
        return data.available;
    })
    .catch(error => {
        if (error.name === 'AbortError') {
            // Запрос был отменён — игнорируем
            return false;
        }
        
        window.warnLog('[AUTH MODAL] Ошибка проверки логина:', error);
        hintElement.classList.remove('loading');
        hintElement.classList.add('neutral');
        hintElement.textContent = VALIDATION_RULES.username.label;
        return false;
    });
}

// =================================================================
// 🎨 ОБНОВЛЕНИЕ ПОДСКАЗКИ ВАЛИДАЦИИ
// =================================================================
function updateValidationHint(input, hintElement, rules, compareTo) {
    if (!hintElement) return false;
    
    const value = input.value.trim();
    const isEmpty = value.length === 0;
    let isValid = true;
    let message = rules.label;
    
    if (value.length < rules.minLength) {
        isValid = false;
        if (isEmpty) {
            message = rules.label;
        } else {
            const remaining = rules.minLength - value.length;
            message = `Ещё ${remaining} ${remaining === 1 ? 'символ' : 'симв.'}`;
        }
    } else {
        message = rules.label;
    }
    
    if (compareTo && rules.minLength === 0) {
        const compareValue = compareTo.value.trim();
        if (isEmpty) {
            isValid = true;
            message = rules.label;
        } else if (value !== compareValue) {
            isValid = false;
            message = 'Пароли не совпадают';
        } else {
            isValid = true;
            message = 'Пароли совпадают';
        }
    }
    
    hintElement.classList.remove('neutral', 'valid', 'invalid');
    
    if (isEmpty) {
        hintElement.classList.add('neutral');
    } else if (isValid) {
        hintElement.classList.add('valid');
    } else {
        hintElement.classList.add('invalid');
    }
    
    hintElement.textContent = message;
    
    return isValid || isEmpty;
}

// =================================================================
// 🔄 ПРОВЕРКА ВСЕХ ПОЛЕЙ И УПРАВЛЕНИЕ КНОПКОЙ
// =================================================================
function validateAllFields() {
    const submitBtn = document.getElementById('authSubmitBtn');
    
    if (authFormMode !== 'register') {
        if (submitBtn) submitBtn.classList.remove('disabled');
        return true;
    }
    
    const loginInput = document.getElementById('authLoginInput');
    const passwordInput = document.getElementById('authPasswordInput');
    const confirmInput = document.getElementById('authConfirmInput');
    const loginHint = document.getElementById('loginHint');
    const passwordHint = document.getElementById('passwordHint');
    const confirmHint = document.getElementById('confirmHint');
    
    const loginValue = loginInput.value.trim();
    const passwordValue = passwordInput.value.trim();
    const confirmValue = confirmInput ? confirmInput.value.trim() : '';
    
    // Подсказки паролей обновляем сразу
    updateValidationHint(passwordInput, passwordHint, VALIDATION_RULES.password);
    if (confirmInput) {
        updateValidationHint(confirmInput, confirmHint, 
            { minLength: 0, label: 'Должен совпадать с паролем' }, passwordInput);
    }
    
    // Для логина — сначала проверяем длину, потом доступность через AJAX
    const loginLengthOk = loginValue.length >= VALIDATION_RULES.username.minLength;
    
    // Базовая проверка длины (без AJAX)
    if (!loginLengthOk) {
        updateValidationHint(loginInput, loginHint, VALIDATION_RULES.username);
    }
    // AJAX-проверка запускается отдельно в обработчике input
    
    const passwordOk = passwordValue.length >= VALIDATION_RULES.password.minLength;
    const confirmOk = !confirmInput || (confirmValue.length > 0 && confirmValue === passwordValue);
    
    // Кнопка активна только если длина логина ок
    // (доступность логина проверит AJAX и заблокирует отдельно)
    const allValid = loginLengthOk && passwordOk && confirmOk;
    
    if (submitBtn) {
        submitBtn.classList.toggle('disabled', !allValid);
    }
    
    return allValid;
}

function updateIndicator(input, indicator, compareTo) {
    const value = input.value.trim();
    const isRegister = authFormMode === 'register';
    let isValid = false;
    
    if (value) {
        if (isRegister && compareTo) {
            const compareValue = compareTo.value.trim();
            isValid = compareValue ? value === compareValue : true;
        } else {
            isValid = true;
        }
    }
    
    if (value) {
        indicator.classList.add('visible');
        if (isValid) {
            indicator.classList.remove('invalid');
            indicator.classList.add('valid');
            indicator.innerHTML = ICON_CHECK;
        } else {
            indicator.classList.remove('valid');
            indicator.classList.add('invalid');
            indicator.innerHTML = ICON_CROSS;
        }
    } else {
        indicator.classList.remove('visible', 'valid', 'invalid');
        indicator.innerHTML = '';
    }
}

function checkPasswordMismatch() {
    const passwordInput = document.getElementById('authPasswordInput');
    const confirmInput = document.getElementById('authConfirmInput');
    const passwordField = document.getElementById('authPasswordField');
    const confirmField = document.getElementById('authConfirmField');
    
    const isRegister = authFormMode === 'register';
    const password = passwordInput.value.trim();
    const confirm = confirmInput ? confirmInput.value.trim() : '';
    
    if (isRegister && password && confirm && password !== confirm) {
        passwordField.classList.add('password-mismatch');
        confirmField.classList.add('password-mismatch');
    } else {
        passwordField.classList.remove('password-mismatch');
        confirmField.classList.remove('password-mismatch');
    }
}

function switchFieldModifiers(toRegister) {
    const fields = document.querySelectorAll('#authModal .input-field');
    fields.forEach(field => {
        if (toRegister) {
            field.classList.remove('input-field--no-validation');
            field.classList.add('input-field--validation-shadows');
            field.classList.add('input-field--no-caret');
        } else {
            field.classList.add('input-field--no-validation');
            field.classList.remove('input-field--validation-shadows');
            field.classList.remove('input-field--no-caret');
        }
    });
}

function toggleAuthForm() {
    const newMode = authFormMode === 'login' ? 'register' : 'login';
    
    const loginInput = document.getElementById('authLoginInput');
    const passwordInput = document.getElementById('authPasswordInput');
    const confirmInput = document.getElementById('authConfirmInput');
    const confirmField = document.getElementById('authConfirmField');
    const submitText = document.getElementById('authSubmitText');
    const switchBtn = document.getElementById('authSwitchBtn');
    const passwordField = document.getElementById('authPasswordField');
    const modalBody = document.getElementById('authModalBody');
    const errorMessage = document.getElementById('errorMessage');
    const submitBtn = document.getElementById('authSubmitBtn');
    
    loginInput.value = '';
    passwordInput.value = '';
    if (confirmInput) confirmInput.value = '';
    
    document.querySelectorAll('.input-validation').forEach(el => {
        el.classList.remove('visible', 'valid', 'invalid');
        el.innerHTML = '';
    });
    
    document.querySelectorAll('.validation-hint').forEach(el => {
        el.classList.remove('valid', 'invalid', 'loading');
        el.classList.add('neutral');
    });
    
    document.getElementById('loginHint').textContent = VALIDATION_RULES.username.label;
    document.getElementById('passwordHint').textContent = VALIDATION_RULES.password.label;
    document.getElementById('confirmHint').textContent = 'Должен совпадать с паролем';
    
    passwordField.classList.remove('password-mismatch');
    confirmField.classList.remove('password-mismatch');
    
    if (errorMessage) errorMessage.style.display = 'none';
    
    if (newMode === 'register') {
        if (confirmField) confirmField.style.display = 'flex';
        if (submitText) submitText.textContent = 'Зарегистрироваться';
        if (switchBtn) switchBtn.textContent = 'Войти';
        authFormMode = 'register';
        
        passwordInput.type = 'text';
        passwordField.classList.add('register-mode');
        if (confirmInput) confirmInput.type = 'text';
        
        modalBody.classList.add('register-mode');
        switchFieldModifiers(true);
        
        if (submitBtn) submitBtn.classList.add('disabled');
        
        validateAllFields();
        
        window.debugLog('[AUTH MODAL] Режим переключён на: register');
    } else {
        if (confirmField) confirmField.style.display = 'none';
        if (submitText) submitText.textContent = 'Войти';
        if (switchBtn) switchBtn.textContent = 'Зарегистрироваться';
        authFormMode = 'login';
        
        passwordInput.type = 'password';
        passwordField.classList.remove('register-mode');
        
        modalBody.classList.remove('register-mode');
        switchFieldModifiers(false);
        
        if (submitBtn) submitBtn.classList.remove('disabled');
        
        window.debugLog('[AUTH MODAL] Режим переключён на: login');
    }
    
    syncCaretAnimations();
}

function togglePasswordVisibility() {
    const passwordInput = document.getElementById('authPasswordInput');
    const passwordToggle = document.getElementById('passwordToggle');
    const icon = passwordToggle.querySelector('.eye-icon');
    
    const isVisible = passwordInput.type === 'text';
    passwordInput.type = isVisible ? 'password' : 'text';
    
    if (isVisible) {
        icon.innerHTML = '<path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/>';
        passwordToggle.setAttribute('aria-label', 'Показать пароль');
    } else {
        icon.innerHTML = '<path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"/><line x1="1" y1="1" x2="23" y2="23"/>';
        passwordToggle.setAttribute('aria-label', 'Скрыть пароль');
    }
}

function getCsrfToken() {
    if (window.CSRF_TOKEN && window.CSRF_TOKEN.length > 20) {
        return window.CSRF_TOKEN;
    }
    
    const metaTag = document.querySelector('meta[name="csrf-token"]');
    if (metaTag && metaTag.content && metaTag.content.length > 20) {
        return metaTag.content;
    }
    
    const csrfInput = document.querySelector('input[name="csrf_token"]');
    if (csrfInput && csrfInput.value && csrfInput.value.length > 20) {
        return csrfInput.value;
    }
    
    window.errorLog('[AUTH MODAL] CSRF-токен НЕ НАЙДЕН ни одним способом');
    return null;
}

function submitAuthForm(login, password, confirm, csrfToken) {
    const url = authFormMode === 'login' 
        ? "/login" 
        : "/register";
    
    const data = {
        username: login,
        password: password,
        csrf_token: csrfToken
    };
    
    if (authFormMode === 'register') {
        data.confirm_password = confirm;
    }
    
    window.debugLog('[AUTH MODAL] Отправка формы:', {
        mode: authFormMode,
        url: url,
        username: login,
        has_csrf: !!csrfToken,
        csrf_length: csrfToken.length
    });
    
    const form = document.createElement('form');
    form.method = 'POST';
    form.action = url;
    form.style.display = 'none';
    
    for (const [key, value] of Object.entries(data)) {
        const input = document.createElement('input');
        input.type = 'hidden';
        input.name = key;
        input.value = value;
        form.appendChild(input);
    }
    
    const csrfField = form.querySelector('input[name="csrf_token"]');
    if (!csrfField) {
        window.errorLog('[AUTH MODAL] КРИТИЧЕСКАЯ ОШИБКА: csrf_token не добавлен в форму');
        return false;
    }
    
    document.body.appendChild(form);
    
    try {
        form.submit();
        window.debugLog('[AUTH MODAL] form.submit() вызван успешно');
        return true;
    } catch (error) {
        window.errorLog('[AUTH MODAL] Ошибка при form.submit():', error);
        return false;
    }
}

document.addEventListener('DOMContentLoaded', function() {
    syncCaretAnimations();
    
    const modal = document.getElementById('authModal');
    if (!modal) {
        window.errorLog('[AUTH MODAL] #authModal не найден в DOM');
        return;
    }
    
    const modalBody = document.getElementById('authModalBody');
    const loginInput = document.getElementById('authLoginInput');
    const passwordInput = document.getElementById('authPasswordInput');
    const confirmInput = document.getElementById('authConfirmInput');
    const loginIndicator = document.getElementById('loginIndicator');
    const passwordIndicator = document.getElementById('passwordIndicator');
    const confirmIndicator = document.getElementById('confirmIndicator');
    const loginHint = document.getElementById('loginHint');
    const passwordToggle = document.getElementById('passwordToggle');
    const submitBtn = document.getElementById('authSubmitBtn');
    const switchBtn = document.getElementById('authSwitchBtn');
    const closeBtn = modal.querySelector('.btn-close');
    const passwordField = document.getElementById('authPasswordField');
    const errorMessage = document.getElementById('errorMessage');
    
    window.debugLog('[AUTH MODAL] Инициализация завершена (v9.5.3 — блокировка внешнего закрытия)');
    
    // =================================================================
    // 🛡️ ЗАЩИТА ОТ ЗАКРЫТИЯ ЧЕРЕЗ ВНЕШНИЕ ОБРАБОТЧИКИ (v9.5.3)
    // =================================================================
    //
    // ПРОБЛЕМА:
    //   Универсальный менеджер модалок (static/js/ui/modal.js) слушает
    //   `click` на document и закрывает модалку при клике ВНЕ неё.
    //   При drag-выделении текста браузер генерирует `click` на общем
    //   предке mousedown+mouseup (например, document.body), и modal.js
    //   ошибочно закрывает окно.
    //
    // РЕШЕНИЕ:
    //   Отслеживаем drag, начатый внутри формы и завершённый вне modal.
    //   Блокируем следующий `click` через capture-обработчик, который
    //   срабатывает РАНЬШЕ bubble-обработчиков modal.js.
    
    let dragStartedInsideForm = false;
    
    modal.addEventListener('mousedown', function(e) {
        // Запоминаем, начался ли drag внутри формы
        dragStartedInsideForm = modalBody.contains(e.target);
    });
    
    document.addEventListener('mouseup', function(e) {
        // Если drag начался внутри формы, но завершился ВНЕ modal —
        // помечаем, что следующий click нужно подавить
        if (dragStartedInsideForm && !modal.contains(e.target)) {
            window.__authModalSuppressNextClick = true;
            setTimeout(() => { window.__authModalSuppressNextClick = false; }, 150);
            window.debugLog('[AUTH MODAL] Drag завершился вне окна — следующий click будет подавлен');
        }
        dragStartedInsideForm = false;
    });
    
    // Capture-обработчик: срабатывает РАНЬШЕ bubble-обработчиков (modal.js)
    document.addEventListener('click', function(e) {
        if (window.__authModalSuppressNextClick) {
            e.stopPropagation();
            e.stopImmediatePropagation();
            e.preventDefault();
            window.__authModalSuppressNextClick = false;
            window.debugLog('[AUTH MODAL] Заблокирован click после drag (внешнее закрытие предотвращено)');
        }
    }, true); // capture: true
    
    // =================================================================
    // 🛡️ ЗАЩИТА ОТ СЛУЧАЙНОГО ЗАКРЫТИЯ (v9.5.2 — НАДЁЖНАЯ ВЕРСИЯ)
    // =================================================================
    //
    // Используем `modalBody.contains(e.target)` вместо `e.target === modal`
    // Закрываем ТОЛЬКО если оба события были СНАРУЖИ формы (на backdrop)
    //
    // СЦЕНАРИИ:
    //   ✅ Клик по backdrop: mousedown СНАРУЖИ, mouseup СНАРУЖИ → ЗАКРЫВАЕТСЯ
    //   ✅ Клик по крестику: работает через свой обработчик → ЗАКРЫВАЕТСЯ
    //   ✅ Escape: работает через keydown → ЗАКРЫВАЕТСЯ
    //   ❌ Drag из input наружу: mousedown ВНУТРИ формы → НЕ закрывается
    
    modal.addEventListener('mousedown', function(e) {
        // Запоминаем, был ли mousedown ВНУТРИ формы (включая все дочерние элементы)
        mouseDownInsideForm = modalBody.contains(e.target);
    });
    
    modal.addEventListener('mouseup', function(e) {
        // Проверяем, был ли mouseup тоже вне формы
        const mouseUpInsideForm = modalBody.contains(e.target);
        
        // Закрываем ТОЛЬКО если оба события были СНАРУЖИ формы (на backdrop)
        if (!mouseDownInsideForm && !mouseUpInsideForm) {
            modal.classList.add('hidden');
            window.debugLog('[AUTH MODAL] Модалка закрыта (чистый клик по backdrop)');
        } else if (mouseDownInsideForm && !mouseUpInsideForm) {
            // mousedown был внутри формы, но mouseup на backdrop — это drag, НЕ закрываем
            window.debugLog('[AUTH MODAL] Drag из формы на backdrop — НЕ закрываем');
        } else if (!mouseDownInsideForm && mouseUpInsideForm) {
            // mousedown на backdrop, но mouseup внутри формы — НЕ закрываем
            window.debugLog('[AUTH MODAL] mousedown на backdrop, mouseup внутри формы — НЕ закрываем');
        }
        
        // Сбрасываем флаг
        mouseDownInsideForm = false;
    });
    
    // 🔍 Обработчик ввода логина с debounce и AJAX-проверкой
    loginInput.addEventListener('input', () => {
        updateIndicator(loginInput, loginIndicator, null);
        
        if (authFormMode === 'register') {
            const loginValue = loginInput.value.trim();
            
            // Сразу обновляем подсказку по длине
            if (loginValue.length < VALIDATION_RULES.username.minLength) {
                updateValidationHint(loginInput, loginHint, VALIDATION_RULES.username);
                validateAllFields();
                return;
            }
            
            // Debounce: ждём 500ms после последнего ввода
            if (usernameCheckTimeout) {
                clearTimeout(usernameCheckTimeout);
            }
            
            usernameCheckTimeout = setTimeout(() => {
                checkUsernameAvailability(loginValue, loginHint).then(available => {
                    // Блокируем кнопку если логин занят
                    if (!available && loginValue.length >= VALIDATION_RULES.username.minLength) {
                        if (submitBtn) submitBtn.classList.add('disabled');
                    } else {
                        validateAllFields();
                    }
                });
            }, 500);
            
            // Обновляем остальные поля сразу
            validateAllFields();
        }
    });
    
    passwordInput.addEventListener('input', () => {
        updateIndicator(passwordInput, passwordIndicator, confirmInput);
        checkPasswordMismatch();
        if (authFormMode === 'register') validateAllFields();
    });
    
    if (confirmInput) {
        confirmInput.addEventListener('input', () => {
            updateIndicator(confirmInput, confirmIndicator, passwordInput);
            checkPasswordMismatch();
            if (authFormMode === 'register') validateAllFields();
        });
    }
    
    if (passwordToggle) {
        passwordToggle.addEventListener('click', togglePasswordVisibility);
    }
    
    if (switchBtn) {
        switchBtn.addEventListener('click', toggleAuthForm);
    }
    
    if (submitBtn) {
        submitBtn.addEventListener('click', function(e) {
            e.preventDefault();
            
            if (submitBtn.classList.contains('disabled')) {
                window.warnLog('[AUTH MODAL] Кнопка заблокирована — требования не выполнены');
                return;
            }
            
            const submitText = document.getElementById('authSubmitText');
            const originalText = submitText.textContent;
            
            submitBtn.classList.add('submitting');
            submitText.textContent = 'Отправка...';
            
            const login = loginInput.value.trim();
            const password = passwordInput.value.trim();
            const confirm = confirmInput ? confirmInput.value.trim() : '';
            
            window.debugLog('[AUTH MODAL] Нажата кнопка отправки:', {
                mode: authFormMode,
                has_login: !!login,
                has_password: !!password,
                has_confirm: !!confirm
            });
            
            if (!login) {
                window.warnLog('[AUTH MODAL] Логин пустой');
                loginInput.focus();
                submitBtn.classList.remove('submitting');
                submitText.textContent = originalText;
                return;
            }
            
            if (!password) {
                window.warnLog('[AUTH MODAL] Пароль пустой');
                passwordInput.focus();
                submitBtn.classList.remove('submitting');
                submitText.textContent = originalText;
                return;
            }
            
            if (authFormMode === 'register') {
                if (login.length < VALIDATION_RULES.username.minLength) {
                    window.warnLog('[AUTH MODAL] Логин слишком короткий');
                    loginInput.focus();
                    submitBtn.classList.remove('submitting');
                    submitText.textContent = originalText;
                    return;
                }
                
                if (password.length < VALIDATION_RULES.password.minLength) {
                    window.warnLog('[AUTH MODAL] Пароль слишком короткий');
                    passwordInput.focus();
                    submitBtn.classList.remove('submitting');
                    submitText.textContent = originalText;
                    return;
                }
                
                if (!confirm) {
                    window.warnLog('[AUTH MODAL] Подтверждение пароля пустое');
                    confirmInput.focus();
                    submitBtn.classList.remove('submitting');
                    submitText.textContent = originalText;
                    return;
                }
                
                if (password !== confirm) {
                    window.warnLog('[AUTH MODAL] Пароли не совпадают');
                    confirmInput.focus();
                    submitBtn.classList.remove('submitting');
                    submitText.textContent = originalText;
                    return;
                }
                
                // 🔍 Финальная проверка доступности логина перед отправкой
                checkUsernameAvailability(login, loginHint).then(available => {
                    if (!available) {
                        window.warnLog('[AUTH MODAL] Логин уже занят:', login);
                        loginInput.focus();
                        submitBtn.classList.remove('submitting');
                        submitText.textContent = originalText;
                        return;
                    }
                    
                    // Логин свободен — отправляем
                    proceedWithSubmit(login, password, confirm, submitBtn, submitText, originalText);
                });
                return;
            }
            
            proceedWithSubmit(login, password, confirm, submitBtn, submitText, originalText);
        });
    }
    
    // Вспомогательная функция для отправки (после всех проверок)
    function proceedWithSubmit(login, password, confirm, submitBtn, submitText, originalText) {
        const csrfToken = getCsrfToken();
        
        if (!csrfToken) {
            window.errorLog('[AUTH MODAL] CSRF-токен не получен');
            alert('Ошибка: CSRF-токен не найден на странице.');
            submitBtn.classList.remove('submitting');
            submitText.textContent = originalText;
            return;
        }
        
        const success = submitAuthForm(login, password, confirm, csrfToken);
        
        if (!success) {
            window.errorLog('[AUTH MODAL] Отправка формы не удалась');
            submitBtn.classList.remove('submitting');
            submitText.textContent = originalText;
        }
    }
    
    const flashError = window.authModalError || window.flashError || null;
    
    if (flashError && errorMessage) {
        errorMessage.textContent = flashError;
        errorMessage.style.display = 'block';
        modal.classList.remove('hidden');
        authFormMode = 'login';
        const submitText = document.getElementById('authSubmitText');
        if (submitText) submitText.textContent = 'Войти';
        window.warnLog('[AUTH MODAL] Автоматическое открытие по flash-ошибке:', flashError);
    }

    document.querySelectorAll('.open-auth-modal').forEach(button => {
        button.addEventListener('click', function(e) {
            e.preventDefault();
            modal.classList.remove('hidden');
            authFormMode = 'login';
            document.getElementById('authSubmitText').textContent = 'Войти';
            document.getElementById('authSwitchBtn').textContent = 'Зарегистрироваться';
            
            loginInput.value = '';
            passwordInput.value = '';
            if (confirmInput) confirmInput.value = '';
            passwordInput.type = 'password';
            passwordField.classList.remove('register-mode');
            
            if (confirmInput) {
                document.getElementById('authConfirmField').style.display = 'none';
            }
            
            modalBody.classList.remove('register-mode');
            
            document.querySelectorAll('.input-validation').forEach(el => {
                el.classList.remove('visible', 'valid', 'invalid');
                el.innerHTML = '';
            });
            
            document.querySelectorAll('.validation-hint').forEach(el => {
                el.classList.remove('valid', 'invalid', 'loading');
                el.classList.add('neutral');
            });
            
            document.getElementById('authPasswordField').classList.remove('password-mismatch');
            document.getElementById('authConfirmField').classList.remove('password-mismatch');
            
            if (errorMessage) errorMessage.style.display = 'none';
            
            switchFieldModifiers(false);
            
            if (submitBtn) submitBtn.classList.remove('disabled');
            
            // Сбрасываем флаги (v9.5.2/9.5.3)
            mouseDownInsideForm = false;
            dragStartedInsideForm = false;
            
            syncCaretAnimations();
            
            window.debugLog('[AUTH MODAL] Модалка открыта');
        });
    });
    
    if (closeBtn) {
        closeBtn.addEventListener('click', (e) => {
            e.stopPropagation(); // Предотвращаем всплытие до modal
            modal.classList.add('hidden');
            mouseDownInsideForm = false;
            window.debugLog('[AUTH MODAL] Модалка закрыта (крестик)');
        });
    }
    
    document.addEventListener('keydown', function(e) {
        if (e.key === 'Escape' && !modal.classList.contains('hidden')) {
            modal.classList.add('hidden');
            mouseDownInsideForm = false;
            window.debugLog('[AUTH MODAL] Модалка закрыта (Escape)');
        }
    });
});
</script>


    <main class="flex-grow w-full">
        <div class="container-wrapper w-full max-w-4xl mx-auto px-2 sm:px-4 
                    ">
            
            <div id="error-message" class="hidden mb-4 p-4 rounded-lg text-white font-medium bg-red-500"></div>

            
            <div id="main-content" class="bg-white p-8 sm:p-6 md:p-5 lg:p-4 rounded-xl shadow-lg transition-all duration-300">
                
    <!-- 🔹 Скрытый блок с сортировкой -->
    <div class="sort-section hidden w-full p-4 mt-0">
        
        <div class="divider-line-top"></div>
    </div>

    <!-- ═══════════════════════════════════════════════════════════════ -->
    <!-- 🔹 СЕКЦИЯ 1: АНОНС (карусель)                                 -->
    <!-- ═══════════════════════════════════════════════════════════════ -->
    <div class="w-full p-6 mt-4">
        <div class="mobile-catalog-search" role="search">
            <label class="sr-only" for="catMobileSearch">Поиск по каталогу</label>
            <input id="catMobileSearch" class="cat-shared-search" type="search" placeholder="Поиск по названию или описанию..." autocomplete="off">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
            <button type="button" data-search-clear aria-label="Очистить поиск"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" aria-hidden="true"><path d="M6 6l12 12M18 6L6 18"/></svg></button>
        </div>
        <h3 class="text-3xl font-bold text-gray-800 mb-6 sr-only">Анонс</h3>
        
        <div class="carousel-wrapper" aria-label="Карусель мероприятий">
            <div class="carousel-bottom-controls">
                <div class="carousel-bottom-nav">
                    <div class="carousel-nav-btn" onclick="$('.carousel-container').slick('slickPrev')" title="Предыдущий">
                        <svg class="carousel-nav-icon" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="m14 6-6 6 6 6"/></svg>
                    </div>
                    <div class="carousel-nav-btn" onclick="$('.carousel-container').slick('slickNext')" title="Следующий">
                        <svg class="carousel-nav-icon" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="m10 6 6 6-6 6"/></svg>
                    </div>
                </div>
            </div>

            <div class="carousel-container">
                
                    <div class="clickable-banner" data-url="/publication/67">
                        <div class="bg-white rounded-2xl overflow-hidden custom-banner-shadow -mb-6 h-80 md:h-[500px] overflow-hidden relative">
                            
                                
                                <img src="/static/img/uploads/a0f971dee0a948198a779b31cca0b55f.png"
                                    alt="Черновик"
                                    class="w-full h-full object-cover">
                            

                            <div class="card-wrapper">
                                <div class="banner-content-overlay">
                                    <h3 class="banner-title line-clamp-2" style="position: relative; top: 100px;">Баня, и баня - терапия</h3>
                                    <div class="banner-meta" style="position: relative; top: 95px;">
                                        
                                            <span style="color: white; font-size: 1rem;">Вольск</span>
                                        
                                    </div>
                                    <div class="banner-bottom-row">
                                        <a href="/publication/67" class="small-details-btn">Подробнее</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                
                    <div class="clickable-banner" data-url="/publication/66">
                        <div class="bg-white rounded-2xl overflow-hidden custom-banner-shadow -mb-6 h-80 md:h-[500px] overflow-hidden relative">
                            
                                
                                <img src="/static/img/uploads/bb425e6171144c0a8dcecad710002bec.jpg"
                                    alt="гвозде-терапия"
                                    class="w-full h-full object-cover">
                            

                            <div class="card-wrapper">
                                <div class="banner-content-overlay">
                                    <h3 class="banner-title line-clamp-2" style="position: relative; top: 100px;">гвозде-терапия</h3>
                                    <div class="banner-meta" style="position: relative; top: 95px;">
                                        
                                            <span style="color: white; font-size: 1rem;">Вольск</span>
                                        
                                    </div>
                                    <div class="banner-bottom-row">
                                        <a href="/publication/66" class="small-details-btn">Подробнее</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                
            </div>
        </div>
        
    </div>

    <!-- ═══════════════════════════════════════════════════════════════ -->
    <!-- 🔹 СЕКЦИЯ 1.5: ЛЕНТА КАТЕГОРИЙ (прокручивающаяся)             -->
    <!-- ═══════════════════════════════════════════════════════════════ -->
    <div class="w-full px-6 mt-2 mb-6">
        <nav class="categories-tape" aria-label="Категории досуга">
            <a href="/" class="category-item active">
                <span class="category-icon"><i class="fa-solid fa-star"></i></span>
                <span>Всё интересное</span>
            </a>
            <a href="#" class="category-item">
                <span class="category-icon"><i class="fa-solid fa-leaf"></i></span>
                <span>Отдых</span>
            </a>
            <a href="#" class="category-item">
                <span class="category-icon"><i class="fa-solid fa-paint-brush"></i></span>
                <span>Творчество</span>
            </a>
            <a href="#" class="category-item">
                <span class="category-icon"><i class="fa-solid fa-person-hiking"></i></span>
                <span>Активности</span>
            </a>
            <a href="#" class="category-item">
                <span class="category-icon"><i class="fa-solid fa-music"></i></span>
                <span>Музыка</span>
            </a>
            <a href="#" class="category-item">
                <span class="category-icon"><i class="fa-solid fa-users"></i></span>
                <span>Встречи</span>
            </a>
            <a href="#" class="category-item">
                <span class="category-icon"><i class="fa-solid fa-mountain"></i></span>
                <span>Прогулки</span>
            </a>
        </nav>
    </div>


    <!-- ═══════════════════════════════════════════════════════════════ -->
    <!-- 🔹 СЕКЦИЯ 2: КАТАЛОГ (заменяет старый grid_constructor)       -->
    <!-- ═══════════════════════════════════════════════════════════════ -->
    <div class="w-full px-6 py-8" id="catalog-section">
        <h2 class="text-3xl font-bold text-gray-800 mb-6">Откройте для себя</h2>
        
        
<div id="catalogData"
     data-events='[{"address": "", "category": "\u0421\u043e\u043e\u0431\u0449\u0435\u0441\u0442\u0432\u0430", "category_id": 8, "category_name": "\u0421\u043e\u043e\u0431\u0449\u0435\u0441\u0442\u0432\u0430", "category_obj": {"id": 8, "name": "\u0421\u043e\u043e\u0431\u0449\u0435\u0441\u0442\u0432\u0430", "slug": "Communities", "title": ""}, "city": "\u0412\u043e\u043b\u044c\u0441\u043a", "city_id": 187, "city_name": "\u0412\u043e\u043b\u044c\u0441\u043a", "city_obj": {"id": 187, "name": "", "russian_name": "\u0412\u043e\u043b\u044c\u0441\u043a"}, "created_at": "2026-08-23 16:22:37.078491", "date": "2026-09-06", "description": "\u0412 \u043f\u0440\u0435\u043a\u0440\u0430\u0441\u043d\u043e\u0435 \u0432\u0440\u0435\u043c\u044f, \u043a\u043e\u0433\u0434\u0430 \u0445\u043e\u043b\u043e\u0434\u0430 \u0443\u0436\u0435 \u043d\u0430\u0441\u0442\u0443\u043f\u0438\u043b\u0438, \u0438 \u043f\u0440\u0438\u0448\u043b\u0430 \u043c\u0435\u043b\u0430\u043d\u0445\u043e\u043b\u0438\u044f \u0442\u0430\u043a \u0438 \u0445\u043e\u0447\u0435\u0442\u0441\u044f \u0447\u0435\u0433\u043e \u0442\u043e \u0442\u0435\u043f\u043b\u043e\u0433\u043e \u0438 \u0443\u044e\u0442\u043d\u043e\u0433\u043e, \u043e\u043f\u044b\u0442\u043d\u044b\u0439 \u0431\u0430\u043d\u0449\u0438\u043a \u043f\u0440\u043e\u0439\u0434\u0435\u0442 \u043f\u0440\u043e\u0432\u0435\u0434\u0435\u0442 \u0432\u0430\u0441 \u043f\u043e \u043f\u0443\u0442\u0438 \u0434\u0435\u0440\u0436\u0430 \u0437\u0430 \u0440\u0443\u043a\u0443 \u0438 \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u044f\u044f \u0432\u0430\u0441, \u043f\u043e\u0434\u0430\u0440\u0438\u0442 \u043d\u0435 \u0437\u0430\u0431\u044b\u0432\u0430\u0435\u043c\u044b\u0435 \u0432\u043f\u0435\u0447\u0430\u0442\u043b\u0435\u043d\u0438\u044f, \u043e\u0442 \u0431\u0430\u043d\u0438 \u0438 \u0435\u0433\u043e \u0442\u0430\u0438\u043d\u0441\u0442\u0432", "end_date": "", "event_date": "", "id": 67, "image": "img/uploads/a0f971dee0a948198a779b31cca0b55f.png", "image_url": "img/uploads/a0f971dee0a948198a779b31cca0b55f.png", "images": [{"alt_text": "\u0427\u0435\u0440\u043d\u043e\u0432\u0438\u043a", "id": 47, "url": "img/uploads/a0f971dee0a948198a779b31cca0b55f.png"}, {"alt_text": "\u0427\u0435\u0440\u043d\u043e\u0432\u0438\u043a", "id": 48, "url": "img/uploads/4c71c42e4f784938ad740eeed8cc2781.jpg"}, {"alt_text": "\u0427\u0435\u0440\u043d\u043e\u0432\u0438\u043a", "id": 49, "url": "img/uploads/8407e704d75c4e8184f3cd47507ff07b.jpg"}], "is_free": false, "kind": "event", "likes_count": 0, "location": "", "price": 0.0, "short_description": "", "start_date": "", "time": "", "title": "\u0411\u0430\u043d\u044f, \u0438 \u0431\u0430\u043d\u044f - \u0442\u0435\u0440\u0430\u043f\u0438\u044f", "url": "/publication/67", "views_count": 27}, {"address": "", "category": "", "category_id": null, "category_name": "", "category_obj": null, "city": "\u0412\u043e\u043b\u044c\u0441\u043a", "city_id": 187, "city_name": "\u0412\u043e\u043b\u044c\u0441\u043a", "city_obj": {"id": 187, "name": "", "russian_name": "\u0412\u043e\u043b\u044c\u0441\u043a"}, "created_at": "2026-08-23 16:17:12.008177", "date": "2026-09-05", "description": "\u0414\u0430\u043d\u043d\u043e\u0435 \u043c\u0435\u0440\u043e\u043f\u0440\u0438\u044f\u0442\u0438\u0435 \u043f\u0440\u043e\u0445\u043e\u0434\u0438\u0442 \u043f\u043e\u0434 \u0447\u0443\u0442\u043a\u0438\u043c \u043d\u0430\u0441\u0442\u0430\u0432\u043d\u0438\u043a\u043e\u043c \u041d\u0430\u0442\u0430\u043b\u044c\u0435\u0439, \u0432 \u043c\u043e\u043c\u0435\u043d\u0442\u0435 \u043d\u0443\u0436\u043d\u043e \u043f\u0440\u0435\u043e\u0434\u043e\u043b\u0435\u0442\u044c \u0441\u0435\u0431\u044f , \u0441\u0432\u043e\u0438 \u043c\u044b\u0441\u043b\u0438 \u0438 \u0432\u0441\u0442\u0443\u043f\u0438\u0442\u044c \u043d\u0430 \u043f\u0443\u0442\u044c \u0433\u0432\u043e\u0437\u0434\u0435\u0439", "end_date": "", "event_date": "", "id": 66, "image": "img/uploads/bb425e6171144c0a8dcecad710002bec.jpg", "image_url": "img/uploads/bb425e6171144c0a8dcecad710002bec.jpg", "images": [{"alt_text": "\u0433\u0432\u043e\u0437\u0434\u0435-\u0442\u0435\u0440\u0430\u043f\u0438\u044f", "id": 45, "url": "img/uploads/bb425e6171144c0a8dcecad710002bec.jpg"}, {"alt_text": "\u0433\u0432\u043e\u0437\u0434\u0435-\u0442\u0435\u0440\u0430\u043f\u0438\u044f", "id": 46, "url": "img/uploads/5fb203ca472f4c429cc972349f7c9424.jpg"}], "is_free": false, "kind": "event", "likes_count": 0, "location": "", "price": 0.0, "short_description": "", "start_date": "", "time": "", "title": "\u0433\u0432\u043e\u0437\u0434\u0435-\u0442\u0435\u0440\u0430\u043f\u0438\u044f", "url": "/publication/66", "views_count": 13}]'
     data-categories='[{"icon": "", "id": 8, "name": "\u0421\u043e\u043e\u0431\u0449\u0435\u0441\u0442\u0432\u0430", "slug": "Communities", "title": "\u0421\u043e\u043e\u0431\u0449\u0435\u0441\u0442\u0432\u0430"}]'
     data-cities='[]'
     data-max-price="5000"
     data-default-city=""
     data-default-city-name=""
     data-events-count="2"
     data-categories-count="1"
     data-cities-count="0"
     hidden></div>

<div class="cat-root">
  <div class="cat-grid-container">

    
    <aside id="catDesktopFilters" class="cat-filters-sidebar" aria-label="Фильтры каталога">
      <div class="cat-filters-title">
        <span>
          Фильтры
        </span>
        <button type="button" class="cat-text-btn" data-reset-filters>
          Сбросить
        </button>
      </div>
      <div class="cat-filter-section cat-accordion-clean">
        <div class="cat-accordion">
          <button type="button" class="cat-accordion-trigger" data-accordion-key="categories" aria-expanded="false">
            <span class="cat-title-row">
              Категории
            </span>
            <svg class="cat-accordion-arrow" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
              <polyline points="6 9 12 15 18 9"/>
            </svg>
          </button>
          <div class="cat-accordion-body" hidden>
            <div class="cat-accordion-content">
              <div class="cat-filter-category-options" id="catCategoryFilters">
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="cat-filter-section cat-accordion-clean">
        <div class="cat-accordion">
          <button type="button" class="cat-accordion-trigger" data-accordion-key="dates" aria-expanded="false">
            <span class="cat-title-row">
              Когда
            </span>
            <svg class="cat-accordion-arrow" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
              <polyline points="6 9 12 15 18 9"/>
            </svg>
          </button>
          <div class="cat-accordion-body" hidden>
            <div class="cat-accordion-content">

              <div class="cat-date-pair">
                <label>
                  С даты
                  <input aria-label="Начиная с даты" type="date" id="catDateFrom">
                </label>
                <label>
                  По дату
                  <input aria-label="До даты включительно" type="date" id="catDateTo">
                </label>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="cat-filter-section cat-accordion-clean">
        <div class="cat-accordion">
          <button type="button" class="cat-accordion-trigger" data-accordion-key="price" aria-expanded="false">
            <span class="cat-title-row">
              Стоимость
            </span>
            <svg class="cat-accordion-arrow" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
              <polyline points="6 9 12 15 18 9"/>
            </svg>
          </button>
          <div class="cat-accordion-body" hidden>
            <div class="cat-accordion-content">
              <div id="catPriceRangeSection">
                <div class="cat-price-pair">
                  <label class="cat-small-input">
                    от
                    <input aria-label="Минимальная цена" type="number" id="catPriceMin" min="0" step="100" value="0">
                  </label>
                  <label class="cat-small-input">
                    до
                    <input aria-label="Максимальная цена" type="number" id="catPriceMax" min="0" step="100">
                  </label>
                </div>
                <input aria-label="Верхняя граница стоимости" type="range" id="catPriceSlider" min="0" step="100">
                <div class="cat-range-label">
                  <span>
                    0 ₽
                  </span>
                  <span id="catPriceValue">
                  </span>
                </div>
              </div>
              <label class="cat-option cat-free-option">
                <input type="checkbox" id="catFreeOnlyCheckbox">
                Только бесплатные
              </label>
            </div>
          </div>
        </div>
      </div>
      <div class="cat-filter-section cat-accordion-clean">
        <div class="cat-accordion">
          <button type="button" class="cat-accordion-trigger" data-accordion-key="city" aria-expanded="false">
            <span class="cat-title-row">
              Город
            </span>
            <svg class="cat-accordion-arrow" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
              <polyline points="6 9 12 15 18 9"/>
            </svg>
          </button>
          <div class="cat-accordion-body" hidden>
            <div class="cat-accordion-content">
              <div class="cat-city-picker">
                <button type="button" class="cat-city-display" data-city-toggle aria-expanded="false">
                  <span data-city-label>Все города</span><svg class="cat-city-arrow" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m7 10 5 5 5-5"/></svg>
                </button>
                <div class="cat-city-dropdown" data-city-dropdown hidden>
                  <label class="cat-city-search-label"><span class="sr-only">Поиск города</span>
                    <input type="search" class="cat-city-search-input" data-city-search placeholder="Найти город..." autocomplete="off">
                  </label>
                  <div class="cat-city-results" data-city-results role="listbox" aria-label="Результаты поиска городов"></div>
                  <select class="cat-filter-select" data-city-select aria-label="Город в фильтрах" hidden></select>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <p class="cat-filter-footnote">
        Выберите подходящий ритм.
        <br>
        Фильтры можно сочетать.
      </p>
    </aside>

    
    <section class="cat-results-area">
      <div class="cat-search-wrapper">
        <svg class="cat-search-icon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
        <input type="text" id="catGlobalSearch" class="cat-search-input" placeholder="Поиск по названию или описанию...">
        <button type="button" class="cat-search-clear" title="Очистить">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
        </button>
      </div>

      <div class="cat-results-toolbar">
        <p>Найдено: <span id="catResultsCount">0</span></p>


        <div class="cat-catalog-actions">
        

        <div class="cat-sort-wrapper">

          <label class="sr" for="catSortSelect">Сортировка</label>
          <select id="catSortSelect" class="cat-sort-select" data-sort hidden>
            <option value="popular">Сначала интересное</option>
            <option value="date">По ближайшей дате</option>
            <option value="priceAsc">Сначала дешевле</option>
            <option value="priceDesc">Сначала дороже</option>
          </select>
          <details class="cat-sort-dropdown">
            <summary aria-label="Сортировка" title="Сортировка">          <svg class="cat-sort-icon" width="18" height="18" viewBox="0 0 24 24"
               fill="none" stroke="currentColor" stroke-width="2"
               stroke-linecap="round" stroke-linejoin="round"
               aria-hidden="true">
            <path d="m3 16 4 4 4-4"/>
            <path d="M7 20V4"/>
            <path d="m21 8-4-4-4 4"/>
            <path d="M17 4v16"/>
          </svg><span data-sort-label>Сначала интересное</span><svg class="cat-sort-chevron" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="m6 9 6 6 6-6"/></svg></summary>
            <div class="cat-sort-menu" role="group" aria-label="Порядок сортировки">
              <button type="button" data-sort-option="popular" aria-pressed="true">Сначала интересное</button>
              <button type="button" data-sort-option="date" aria-pressed="false">По ближайшей дате</button>
              <button type="button" data-sort-option="priceAsc" aria-pressed="false">Сначала дешевле</button>
              <button type="button" data-sort-option="priceDesc" aria-pressed="false">Сначала дороже</button>
            </div>
          </details>
        </div>

        <button type="button" class="cat-favorites-toggle" aria-label="Избранное" title="Избранное" data-favorites-toggle aria-pressed="false">
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true"><path d="M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.7l-1.1-1.1a5.5 5.5 0 0 0-7.8 7.8L12 21l8.8-8.6a5.5 5.5 0 0 0 0-7.8Z"/></svg>
          <span class="cat-favorites-label">Избранное</span>
        </button>

        <div class="cat-view-toggles" aria-label="Вид каталога">
          <button type="button" id="catGridViewBtn" class="active" title="Сетка" aria-label="Карточки" aria-pressed="true" data-view="grid">
            <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></svg>
          </button>
          <button type="button" id="catListViewBtn" title="Список" aria-label="Список" aria-pressed="false" data-view="list">
            <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01"/></svg>
          </button>
        </div>
        </div>
      </div>

      <div id="catResults" class="cat-results"></div>

      <div id="catEmptyState" class="cat-empty" hidden>
        <div class="cat-empty-icon">
          <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
        </div>
        <h3>Ничего не найдено</h3>
        <p>Попробуйте изменить параметры поиска</p>
      </div>
    </section>
  </div>

  
  <button type="button" class="cat-mobile-filter-btn" id="catMobileFilterBtn" title="Фильтры" aria-label="Открыть фильтры" aria-haspopup="dialog" aria-controls="catMobileDrawer">
    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="4" y1="21" x2="4" y2="14"/><line x1="4" y1="10" x2="4" y2="3"/><line x1="12" y1="21" x2="12" y2="12"/><line x1="12" y1="8" x2="12" y2="3"/><line x1="20" y1="21" x2="20" y2="16"/><line x1="20" y1="12" x2="20" y2="3"/><line x1="1" y1="14" x2="7" y2="14"/><line x1="9" y1="8" x2="15" y2="8"/><line x1="17" y1="16" x2="23" y2="16"/></svg>
    <span class="floating-filter-badge" id="catFilterBadge" hidden></span>
  </button>
  <div class="cat-drawer-backdrop" id="catDrawerBackdrop"></div>
  <dialog class="cat-mobile-drawer" id="catMobileDrawer" aria-label="Фильтры">
    <div class="cat-drawer-header">
      <h2>Фильтры</h2>
      <button type="button" class="cat-drawer-close" id="catDrawerClose" aria-label="Закрыть фильтры"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" aria-hidden="true"><path d="M6 6l12 12M18 6L6 18"/></svg></button>
    </div>
    <div class="cat-drawer-body" id="catDrawerBody"></div>

  </dialog>
</div>

    </div>

            </div>
            

        </div>
    </main>

    
<style>
    /* Растягиваем контейнер на 1 см шире, чем max-w-7xl (80rem) */
    #site-footer .footer-container {
        max-width: calc(80rem + 1cm) !important;
    }

    #site-footer .footer-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 1.25rem !important;
        align-items: start !important;
    }

    #site-footer .footer-column {
        min-width: 0 !important;
    }

    /* Юридические ссылки: flex-колонка */
    #site-footer .footer-legal {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 0.5rem !important;
        text-align: center;
    }

    /* VK ссылка: flex с иконкой */
    #site-footer .footer-vk-link {
        display: inline-flex !important;
        align-items: center !important;
        gap: 0.5rem !important;
        transition: color 0.2s ease !important;
    }

    #site-footer .footer-vk-link:hover {
        color: #0077FF !important;
    }

    #site-footer .footer-vk-icon {
        width: 1.5em;
        height: 1.5em;
        fill: currentColor;
        transition: fill 0.2s ease;
    }

    /* ══════════════════════════════════════════════════════════════════════ */
    /* 📱 МОБИЛЬНАЯ ВЕРСИЯ (< 768px): весь контент ПО ЦЕНТРУ                 */
    /* ══════════════════════════════════════════════════════════════════════ */
    #site-footer .footer-column[data-footer-col="about"] {
        text-align: center;
    }

    #site-footer .footer-column[data-footer-col="community"] {
        text-align: center;
    }

    #site-footer .footer-column[data-footer-col="community"] .footer-vk-link {
        justify-content: center;
    }

    /* ══════════════════════════════════════════════════════════════════════ */
    /* 💻 ПЛАНШЕТЫ И ДЕСКТОП (≥ 768px): 3 колонки, выравнивание по контейнеру */
    /* Лозунг выровнен по левому краю контейнера, который центрирован       */
    /* через mx-auto — поэтому он "в середине слева"                         */
    /* ══════════════════════════════════════════════════════════════════════ */
    @media (min-width: 768px) {
        #site-footer .footer-grid {
            grid-template-columns: 2fr 1fr 1fr !important;
            gap: 2rem !important;
        }

        #site-footer .footer-column[data-footer-col="about"] {
            text-align: left;
        }

        #site-footer .footer-column[data-footer-col="community"] {
            text-align: left;
        }

        #site-footer .footer-column[data-footer-col="community"] .footer-vk-link {
            justify-content: flex-start;
        }

        #site-footer .footer-legal {
            align-items: flex-end !important;
            text-align: right;
        }
    }
</style>


<footer class="bg-white text-gray-800 border-t border-gray-200"
        id="site-footer"
        data-footer-version="3.6"
        role="contentinfo"
        aria-label="Подвал сайта Другой Досуг">

    
    <div class="footer-container max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-5 sm:py-6">
        <div class="footer-grid">

            
            <div class="footer-column" data-footer-col="about">
                <h4 class="text-gray-900 font-bold text-base sm:text-lg mb-1.5">
                    Другой Досуг
                </h4>

                
                <p class="text-red-600 font-medium italic text-xs sm:text-sm mb-1.5" data-footer-slogan>
                    Создавайте события. Находите впечатления.
                </p>

                
                <p class="text-xs sm:text-sm text-gray-600 leading-relaxed" data-footer-description>
                    Платформа, которая соединяет тех, кто создает события, с теми, кто ищет вдохновение, встречи и отличный досуг.
                </p>
            </div>

            
            <div class="footer-column" data-footer-col="community">
                <h4 class="text-gray-900 font-bold text-base sm:text-lg mb-2">Сообщество</h4>

                <a href="https://vk.me/join/YCZ8z07mitB/oIR9QQzzFBJGKyK/wb_aqw0="
                   target="_blank"
                   rel="noopener noreferrer"
                   class="footer-vk-link text-xs sm:text-sm text-gray-800"
                   data-footer-link="vk">
                    <svg class="footer-vk-icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                        <path d="M15.684 0H8.316C1.592 0 0 1.592 0 8.316v7.368C0 22.408 1.592 24 8.316 24h7.368C22.408 24 24 22.408 24 15.684V8.316C24 1.592 22.408 0 15.684 0zm3.692 17.123h-1.744c-.66 0-.862-.523-2.049-1.727-1.033-1.033-1.49-1.172-1.744-1.172-.356 0-.458.102-.458.593v1.575c0 .424-.135.678-1.253.678-1.846 0-3.896-1.118-5.335-3.202C4.624 10.857 4.03 8.57 4.03 8.096c0-.254.102-.491.593-.491h1.744c.44 0 .61.203.78.678.847 2.456 2.27 4.606 2.86 4.606.22 0 .322-.102.322-.66V9.721c-.068-1.186-.695-1.287-.695-1.71 0-.204.17-.407.44-.407h2.744c.373 0 .508.203.508.643v3.473c0 .372.17.508.271.508.22 0 .407-.136.813-.542 1.253-1.406 2.151-3.574 2.151-3.574.119-.254.322-.491.763-.491h1.744c.525 0 .644.27.525.643-.22 1.017-2.354 4.031-2.354 4.031-.186.305-.254.44 0 .78.186.254.796.779 1.203 1.253.745.847 1.32 1.558 1.473 2.049.17.49-.085.744-.576.744z"/>
                    </svg>
                    <span>Комьюнити</span>
                </a>
            </div>

            
            <div class="footer-column" data-footer-col="legal">
                <nav class="footer-legal"
                     data-footer-legal
                     aria-label="Юридические ссылки">

                    <a href="#"
                       class="text-xs sm:text-sm text-gray-600 hover:text-red-600 transition-colors"
                       data-footer-link="privacy">
                        Политика конфиденциальности
                    </a>

                    <a href="#"
                       class="text-xs sm:text-sm text-gray-600 hover:text-red-600 transition-colors"
                       data-footer-link="terms">
                        Пользовательское соглашение
                    </a>

                    <a href="/changelog/"
                        class="text-xs sm:text-sm text-gray-600 hover:text-red-600 transition-colors"
                        data-footer-link="changelog">
                        История изменений
                    </a>
                </nav>
            </div>
        </div>
    </div>

    
    <div class="border-t border-gray-200" data-footer-bottom>
        <div class="footer-container max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-3 sm:py-4">
            <p class="text-xs sm:text-sm text-gray-600 text-center" data-footer-copyright>
                &copy; 2026 Другой Досуг. Все права защищены.
            </p>
        </div>
    </div>
</footer>
    

<div id="cityModal"
     class="modal hidden"
     role="dialog"
     aria-modal="true"
     aria-labelledby="cityModalTitle">

    <div class="city-modal-body">

        <!-- ЗАГОЛОВОК -->
        <div class="title-box" id="cityTitleBox" tabindex="0" role="button"
             aria-label="Нажмите, чтобы выбрать или изменить город">

            <h1 id="cityModalTitle">
                <span id="cityTitleText">Выберите город</span>
                <span class="title-caret" aria-hidden="true"></span>
            </h1>

            <span class="title-hint" aria-hidden="true">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none"
                     stroke="currentColor" stroke-width="2" stroke-linecap="round">
                    <circle cx="11" cy="11" r="7"/>
                    <path d="M21 21l-4.35-4.35"/>
                </svg>
            </span>

            <!-- Кнопка-карандаш -->
            <span class="btn title-edit" aria-hidden="true">
                <svg width="17" height="17" viewBox="0 0 24 24" fill="none"
                     stroke="currentColor" stroke-width="2"
                     stroke-linecap="round" stroke-linejoin="round">
                    <path d="M17 3a2.8 2.8 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z"/>
                </svg>
            </span>

            <div class="title-search-wrap">
                <span class="mirror" id="cityMirror" aria-hidden="true"></span>
                <span class="caret-hint" id="cityCaretHint" aria-hidden="true"></span>
                <input id="citySearchHeader"
                       class="title-search input-text input-text--city-modal"
                       type="text"
                       placeholder="Найдите свой город..."
                       autocomplete="off"
                       aria-label="Поиск города">
            </div>
        </div>

        <!-- ПОПУЛЯРНЫЕ ГОРОДА -->
        <div class="popular-row">
            <span class="popular-label">Популярные:</span>
            <div id="cityPopularChips" style="display: contents;">
                
            </div>
        </div>

        <!-- ОБЛАСТЬ РЕЗУЛЬТАТОВ -->
        <div class="results-area" id="cityResultsArea">
            <div class="results-inner" id="cityResultsInner">
                <div class="list-meta"
                     id="cityListMeta"
                     aria-live="polite"
                     aria-atomic="true"></div>
                <div class="city-results-list"
                    id="cityList"
                    role="listbox"
                    aria-label="Список найденных городов">
                    <div class="empty-state">Загрузка городов...</div>
                </div>
            </div>
        </div>

        <!-- НИЖНИЙ РЯД -->
        <div class="modal-bottom">
            <!-- КНОПКА ГЕОЛОКАЦИИ -->
            <button type="button"
                    class="btn btn-primary"
                    id="cityGeoBtn"
                    style="
                        --btn-radius: 999px;
                        --btn-height: 56px;
                        --btn-font-weight: 800;
                        --btn-shadow: 0 8px 20px rgba(220, 38, 38, 0.35);
                        --btn-hover-shadow: 0 10px 24px rgba(220, 38, 38, 0.45);
                        --btn-padding-x: 24px;
                        --btn-gap: 10px;
                        flex: 1;
                    "
                    aria-label="Определить город по геолокации">
                Определить автоматически
                <svg width="22" height="22" viewBox="0 0 24 24" fill="none"
                     stroke="currentColor" stroke-width="2" stroke-linecap="round"
                     aria-hidden="true">
                    <circle cx="12" cy="12" r="7"/>
                    <circle cx="12" cy="12" r="1.5" fill="currentColor"/>
                    <path d="M12 2v3M12 19v3M2 12h3M19 12h3"/>
                </svg>
            </button>

            <!-- КНОПКА ЗАКРЫТИЯ -->
            <button type="button"
                    class="btn btn-close"
                    id="cityCloseBtn"
                    style="
                        --btn-close-size: 56px;
                        --btn-close-bg: #e5e7eb;
                        --btn-close-color: #111827;
                        --btn-close-hover-bg: #d1d5db;
                        --btn-close-hover-color: #111827;
                        --btn-close-radius: 999px;
                        flex-shrink: 0;
                        font-size: 0;
                    "
                    aria-label="Закрыть окно выбора города">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none"
                     stroke="currentColor" stroke-width="2.5" stroke-linecap="round"
                     aria-hidden="true">
                    <path d="M6 6l12 12M18 6L6 18"/>
                </svg>
            </button>
        </div>

    </div>
</div>

    
<div id="cookie-consent-banner" 
     class="cookie-consent-banner hidden" 
     role="dialog" 
     aria-label="Согласие на использование куки"
     aria-describedby="cookie-consent-desc">
    
    <div class="cookie-consent-content">
        
        <div class="cookie-consent-icon" aria-hidden="true">🍪</div>
        
        
        <div class="cookie-consent-text-wrapper">
            <div class="cookie-consent-title">Давайте сделаем ваш опыт лучше</div>
            <p id="cookie-consent-desc" class="cookie-consent-text">
                Мы используем cookie для анализа трафика и персонализации.
            </p>
        </div>
        
        
        <div class="cookie-consent-buttons">
            <button id="cookie-decline-btn" 
                    class="cookie-consent-btn cookie-decline" 
                    aria-label="Отклонить необязательные куки">
                Только необходимые
            </button>
            <button id="cookie-accept-btn" 
                    class="cookie-consent-btn cookie-accept" 
                    aria-label="Принять все куки">
                Принять все
            </button>
        </div>
    </div>
</div>


    <div id="deleteModal" class="hidden modal fixed inset-0 z-[99999] overflow-auto bg-gray-900 bg-opacity-50 flex items-center justify-center">
        <div class="modal-overlay absolute inset-0"></div>
        <div class="modal-content bg-white p-6 rounded-lg shadow-xl max-w-sm w-full relative">
            <button class="modal-close absolute top-2 right-2 text-2xl text-gray-500 hover:text-gray-700">&times;</button>
            <h2 class="text-xl font-bold mb-4">Подтверждение удаления</h2>
            <p class="mb-4">Вы уверены, что хотите удалить этот элемент? Это действие нельзя отменить.</p>
            <div class="flex justify-end space-x-4">
                <button class="modal-close px-4 py-2 rounded-lg bg-gray-200 text-gray-800 font-medium hover:bg-gray-300">Отмена</button>
                <button id="confirmDelete" class="px-4 py-2 rounded-lg bg-red-500 text-white font-medium hover:bg-red-600">Удалить</button>
            </div>
        </div>
    </div>

    
    <script>
        window.staticUrlPrefix = "/static/";
        
        
            window.currentUserId = null;
            window.currentUser = null;
        
    </script>
    
    
    <script src="/static/js/components/page-dependencies.js"></script>
    <script src="/static/js/components/dynamic-script-loader.js"></script>

    
    <script>
        // 🔹 Flash-ошибка для совместимости
        window.flashError = "";
        
        // 🔹 Синхронизация с макросом авторизации (обязательно!)
        window.authModalError = window.flashError;
    </script>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const header = document.getElementById('main-header');
            const sectionLabel = document.getElementById('header-section-label');
            const catalogSection = document.getElementById('catalog-section');
            const threshold = 0.3;

            // 🔹 Логика хедера (скролл, метки секций)
            function updateHeaderState() {
                const currentScrollY = window.scrollY;
                if (currentScrollY > 10) header.classList.add('scrolled');
                else header.classList.remove('scrolled');

                const scrollPosition = currentScrollY + window.innerHeight * threshold;
                let currentSectionText = 'Анонс';
                
                if (catalogSection && scrollPosition >= catalogSection.offsetTop) {
                    currentSectionText = 'Каталог';
                }

                if (sectionLabel) {
                    sectionLabel.textContent = currentSectionText;
                    if (currentScrollY > 50) sectionLabel.classList.add('visible');
                    else sectionLabel.classList.remove('visible');
                }
            }
            window.addEventListener('scroll', updateHeaderState, { passive: true });
            updateHeaderState();
            
            // ✅ Инициализация завершена (используем глобальный debugLog)
            window.debugLog('[INDEX] ✅ Инициализация главной страницы завершена', {
                timestamp: new Date().toISOString()
            });
        });
    </script>

    
</body>
</html>