<!-- templates/search.html -->
<!--
📝 МОДУЛЬ: Страница поиска публикаций (Search)

🎯 НАЗНАЧЕНИЕ:
  Продвинутая страница поиска с множеством фильтров:
  - Текстовый поиск по названию и описанию (с debounce 300ms)
  - Фильтр по категориям (динамический из БД, кастомный аккордеон)
  - Фильтр по цене (min/max + слайдер + "только бесплатные")
  - Фильтр по городу (минималистичный селектор с inline-поиском)
  - Фильтр по датам (от/до)
  - Сортировка (дата, цена, название)
  - Переключение вида результатов (grid/list)
  - Мобильная версия с drawer (шторка) фильтров

🧩 СВЯЗИ:
  ← app/routes/search.py (маршрут /search, передает categories, max_price)
  ← templates/base.html (базовый шаблон)
  → API /search/cities (загрузка списка городов)
  → API /search/publications (поиск с фильтрами)
  → app/models/Publication (поиск публикаций, MAX(price))
  → app/models/Category (фильтр по категориям)
  → app/models/City (фильтр по городам)

⚠️ АРХИТЕКТУРНЫЕ РЕШЕНИЯ:
  1. Двойная система фильтров: desktop (боковая панель) + mobile (drawer).
     Мобильная версия клонирует desktop-фильтры через JavaScript шаблон,
     чтобы избежать дублирования HTML и обеспечить консистентность.
  
  2. Debounce для живого поиска: 300ms задержка перед отправкой запроса.
     Предотвращает spam-запросы при быстром вводе.
  
  3. Динамическая загрузка городов: города загружаются через /search/cities
     при первой загрузке страницы, кэшируются в citiesData[].
  
  4. Минималистичный селектор города (v2.3.0): только нижняя линия,
     поиск встроен прямо в заголовок (inline input). Нет отдельного
     поля поиска внутри dropdown — это решает проблему обрезки.
  
  5. Мобильная шторка (drawer): на мобильных (< lg breakpoint) фильтры
     скрыты и открываются через FAB кнопку (floating action button).
     Drawer дублирует все desktop-фильтры с суффиксом "Mobile" в ID.
  
  6. URL-параметры: при загрузке страницы проверяется ?city_id= в URL
     для автоматического выбора города (интеграция с другими страницами).

  7. Динамический максимум цены: MAX(price) из БД передаётся через Jinja2.
     Fallback = 0 при отсутствии публикаций. (v2.0.0)

  8. Unified-аккордеоны (v2.2.0): все карточки фильтров используют единую
     структуру .custom-accordion-filter (белый блок, скругления, без рамок).
     Тело аккордеона анимируется через max-height.

  9. Переименование ID селектора города (v2.3.2): все ID с префиксом "search"
     для устранения конфликта с модалкой города (#cityList в macros/city_modal.html).

🎨 ЛОГИРОВАНИЕ (v1.1):
  - Используется глобальная система логирования из base.html
  - window.debugLog('[SEARCH]', ...) — отладка (только в DEBUG режиме)
  - window.warnLog('[SEARCH]', ...) — предупреждения (всегда)
  - window.errorLog('[SEARCH]', ...) — ошибки (всегда)
  - Префикс [SEARCH] для группировки логов этой страницы
  - Frontend debug автоматически включается через: python run.py -i или -t

🆕 ИСТОРИЯ ИЗМЕНЕНИЙ:
  - v1.0 (initial): базовая страница поиска
  - v1.1 (2026-08-07): добавлена мобильная версия с drawer
  - v1.2 (2026-08-07): динамическая загрузка городов из БД
  - v1.3 (2026-08-07): debounce для живого поиска
  - v1.4 (2026-08-07): миграция на глобальную систему логирования
  - v1.5 (2026-09-11): категории отображаются вертикальным списком
  - v1.6 (2026-09-11): категории как раскрывающийся аккордеон (<details>)
  - v1.7 (2026-09-11): динамические категории из БД (Jinja2 + JS)
  - v1.8 (2026-09-11): упрощение мобильных фильтров (убран поиск и free_only)
  - v1.9 (2026-09-11): автозакрытие drawer при ресайзе, убрана лупа из title
  - v2.0.0 (2026-09-14): динамический максимум цены из БД (MAX(price), fallback=0)
  - v2.1.0 (2026-09-14): замена <details> на кастомный JS-аккордеон без рамок/теней
  - v2.2.0 (2026-09-14): ВСЕ фильтры приведены к единому стилю аккордеона
  - v2.3.0 (2026-09-14): минималистичный селектор города (Material-style)
                         с inline-поиском прямо в заголовке
  - v2.3.1 (2026-09-14): убрана подпись "Город" из селектора —
                         в строке остаётся только название города
  - v2.3.2 (2026-09-15): переименование ID селектора города (cityList → searchCityList)
                         для устранения конфликта с модалкой города
-->

<!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="IjY1ZjE4ZjczNDUwYjlhZGE5NmQ0YTlkYTljYjEwMmY1Y2RiZjdkYzEi.aq7SqA.22sxirWCFlLA2X5t_Cwr7qetTgY">
    
    
    <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": false, "browser": true, "dead_clicks": false, "device": true, "engagement_basic": false, "errors": true, "fingerprints": false, "fps_live": false, "geolocation": false, "gpu_webgl": false, "lifecycle": true, "locale_timezone": true, "network": true, "performance_timing": true, "peripherals": false, "product_actions": false, "rage_clicks": false, "screen": true, "scroll_depth": true, "storage_capabilities": false, "web_vitals": true}, "debug": false, "enabled": false, "enabledCategories": ["browser", "device", "errors", "lifecycle", "locale_timezone", "network", "performance_timing", "screen", "scroll_depth", "web_vitals"], "endpoint": "/api/telemetry", "flushInterval": 10000, "maxEvents": 100, "respectGPC": true, "sampleRate": 0.0};
        })();
    </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" />

    
<style>
    /* ============================================ */
    /* 🔹 ПОЛЕ ПОИСКА: ЕДИНЫЙ СТИЛЬ С ПОЛЯМИ ЦЕНЫ   */
    /* ============================================ */
    
    .search-input-wrapper,
    .search-input-wrapper::before,
    .search-input-wrapper::after,
    .search-input-wrapper .search-input,
    .search-input-wrapper .search-icon,
    .search-input-wrapper .search-clear-btn {
        transition: none !important;
        animation: none !important;
    }
    
    .search-input-wrapper::after { display: none !important; }
    
    .search-input-wrapper {
        border: 1px solid #d1d5db !important;
        border-radius: 0.5rem !important;
        background: white !important;
        padding: 0.75rem 1rem !important;
        border-bottom: 1px solid #d1d5db !important;
    }
    
    .search-input-wrapper:hover,
    .search-input-wrapper:focus-within {
        border-color: #dc2626 !important;
        border-bottom: 1px solid #dc2626 !important;
        box-shadow: none !important;
        outline: none !important;
    }
    
    .search-input-wrapper .search-input {
        border: none !important; background: transparent !important;
        outline: none !important; box-shadow: none !important; padding: 0 !important;
    }
    
    .search-input-wrapper .search-icon { color: #9ca3af !important; }
    .search-input-wrapper:focus-within .search-icon { color: #dc2626 !important; }
    .search-input-wrapper .search-clear-btn { color: #9ca3af !important; }
    .search-input-wrapper .search-clear-btn:hover { color: #dc2626 !important; }

    /* ============================================ */
    /* 🔹 ЕДИНЫЙ АККОРДЕОН ДЛЯ ВСЕХ ФИЛЬТРОВ        */
    /* ============================================ */
    
    .accordion-wrapper-clean {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
        margin-bottom: 0.75rem;
    }

    .custom-accordion-filter {
        background: white;
        border-radius: 0.75rem;
    }

    .accordion-trigger {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0.75rem 1rem;
        cursor: pointer;
        user-select: none;
        background: transparent;
        transition: background-color 0.2s;
        border-radius: 0.75rem;
    }

    .accordion-trigger.active {
        border-radius: 0.75rem 0.75rem 0 0;
    }

    .accordion-trigger:hover { background-color: #f9fafb; }

    .accordion-arrow {
        transition: transform 0.3s ease;
        color: #9ca3af;
        font-size: 0.875rem;
    }

    .accordion-trigger.active .accordion-arrow {
        transform: rotate(180deg);
        color: #dc2626;
    }

    .accordion-body {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease-out;
    }
    
    .accordion-content-padding {
        padding: 0.25rem 1rem 1rem 1rem;
    }

    /* ============================================ */
    /* 🔹 v2.3.0: МИНИМАЛИСТИЧНЫЙ СЕЛЕКТОР ГОРОДА   */
    /* ✅ v2.3.1: подпись "Город" убрана — в строке */
    /*    остаётся только название города           */
    /* ============================================ */
    
    .city-minimal-wrapper {
        position: relative;
        width: 100%;
    }

    .city-minimal-display {
        border-bottom: 2px solid #d1d5db;
        padding: 10px 4px;
        background: transparent;
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 10px;
        transition: border-color 0.2s;
        position: relative;
    }

    .city-minimal-display:hover {
        border-color: #9ca3af;
    }

    .city-minimal-wrapper.active .city-minimal-display {
        border-color: #dc2626;
    }

    .city-text-container {
        flex: 1;
        position: relative;
        min-height: 20px;
    }

    .city-display-text {
        font-size: 14px;
        color: #1f2937;
        font-weight: 500;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .city-search-inline {
        width: 100%;
        border: none;
        outline: none;
        background: transparent;
        font-size: 14px;
        font-weight: 500;
        color: #1f2937;
        padding: 0;
        display: none;
    }

    .city-search-inline::placeholder {
        color: #9ca3af;
        font-weight: 400;
    }

    .city-arrow {
        color: #9ca3af;
        font-size: 11px;
        transition: transform 0.2s, color 0.2s;
        flex-shrink: 0;
    }

    .city-minimal-wrapper.active .city-arrow {
        transform: rotate(180deg);
        color: #dc2626;
    }

    .city-minimal-options {
        position: absolute;
        top: calc(100% + 6px);
        left: 0;
        right: 0;
        background: white;
        border-radius: 8px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        transition: max-height 0.25s ease, opacity 0.2s ease;
        z-index: 60;
    }

    .city-minimal-wrapper.active .city-minimal-options {
        max-height: 260px;
        opacity: 1;
        overflow-y: auto;
        padding: 6px 0;
    }

    .city-minimal-option {
        padding: 10px 14px;
        cursor: pointer;
        font-size: 14px;
        color: #374151;
        transition: background 0.1s;
    }

    .city-minimal-option:hover {
        background: #f3f4f6;
    }

    .city-minimal-option.selected {
        color: #dc2626;
        font-weight: 600;
        background: #fef2f2;
    }

    .city-minimal-empty {
        padding: 16px;
        text-align: center;
        color: #9ca3af;
        font-size: 13px;
        font-style: italic;
    }

    /* ============================================ */
    /* 🔹 Z-INDEX ДЛЯ DROPDOWN ПОВЕРХ СОСЕДЕЙ       */
    /* ============================================ */
    
    .custom-accordion-filter .custom-select-wrapper.active,
    .custom-accordion-filter .city-minimal-wrapper.active {
        z-index: 60;
    }

    /* ============================================ */
    /* 🔹 УВЕЛИЧЕННЫЕ ЧЕКБОКСЫ КАТЕГОРИЙ            */
    /* ============================================ */
    
    #categoryFilters .custom-checkbox,
    #categoryFiltersMobile .custom-checkbox {
        width: 1.25rem !important;
        height: 1.25rem !important;
        min-width: 1.25rem !important;
    }
</style>

</head>


<body class="flex flex-col min-h-screen search-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">
            <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>
            <label class="sr-only" for="catHeaderSearch">Поиск по каталогу</label>
            <input id="catHeaderSearch" class="cat-shared-search" type="search" placeholder="Поиск по названию или описанию..." autocomplete="off">
            <button type="button" class="header-catalog-search-clear" data-search-clear aria-label="Очистить поиск">×</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 
                    search-container-override">
            
            <div id="error-message" class="hidden mb-4 p-4 rounded-lg text-white font-medium bg-red-500"></div>

            
<div id="main-content">
    <div class="search-grid-container max-w-7xl mx-auto">
        
        
        <div id="desktopFilters" class="search-filters-sidebar space-y-4">
            
            <!-- 1. Категории -->
            <div class="filter-card accordion-wrapper-clean">
                <div class="custom-accordion-filter">
                    <div class="accordion-trigger" onclick="toggleFilterAccordion(this)">
                        <span class="flex items-center gap-2 text-base font-semibold text-gray-800">
                            <i class="fas fa-folder text-red-600"></i>Категории
                        </span>
                        <i class="fas fa-chevron-down accordion-arrow"></i>
                    </div>
                    <div class="accordion-body" style="max-height: 500px;">
                        <div class="accordion-content-padding flex flex-col space-y-1" id="categoryFilters">
                            <label class="flex items-center gap-3 cursor-pointer py-3 px-3 rounded-lg hover:bg-gray-50 w-full">
                                <div class="custom-checkbox checked" data-category="all" onclick="toggleCategory(this)"></div>
                                <span class="text-base">Все</span>
                            </label>
                            
                            <label class="flex items-center gap-3 cursor-pointer py-3 px-3 rounded-lg hover:bg-gray-50 w-full">
                                <div class="custom-checkbox" data-category="Communities" onclick="toggleCategory(this)"></div>
                                <span class="text-base">Сообщества</span>
                            </label>
                            
                        </div>
                    </div>
                </div>
            </div>

            <!-- 2. Стоимость -->
            <div class="filter-card accordion-wrapper-clean">
                <div class="custom-accordion-filter">
                    <div class="accordion-trigger" onclick="toggleFilterAccordion(this)">
                        <span class="flex items-center gap-2 text-base font-semibold text-gray-800">
                            <i class="fas fa-ruble-sign text-red-600"></i>Стоимость
                        </span>
                        <i class="fas fa-chevron-down accordion-arrow"></i>
                    </div>
                    <div class="accordion-body" style="max-height: 300px;">
                        <div class="accordion-content-padding">
                            <label class="flex items-center gap-2 cursor-pointer p-2 rounded-lg hover:bg-gray-50 mb-3">
                                <div class="custom-checkbox" id="freeOnlyCheckbox" onclick="toggleFreeOnly(this)"></div>
                                <span class="text-sm font-medium">Только бесплатные</span>
                            </label>
                            <div id="priceRangeSection">
                                <div class="flex gap-2 mb-3">
                                    <input type="number" id="priceMin" placeholder="От" class="custom-input" value="0" onchange="updatePriceRange()">
                                    <input type="number" id="priceMax" placeholder="До" class="custom-input" value="0" onchange="updatePriceRange()">
                                </div>
                                <input type="range" class="range-slider" id="priceSlider" min="0" max="0" value="0" oninput="updatePriceFromSlider()">
                                <div class="flex justify-between mt-1 text-xs text-gray-500">
                                    <span>0 ₽</span><span id="priceValue">0 ₽</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 3. Город (v2.3.2: ID с префиксом "search" для избежания конфликта с модалкой) -->
            <div class="filter-card accordion-wrapper-clean">
                <div class="custom-accordion-filter">
                    <div class="accordion-trigger" onclick="toggleFilterAccordion(this)">
                        <span class="flex items-center gap-2 text-base font-semibold text-gray-800">
                            <i class="fas fa-map-marker-alt text-red-600"></i>Город
                        </span>
                        <i class="fas fa-chevron-down accordion-arrow"></i>
                    </div>
                    <div class="accordion-body" style="max-height: 400px;">
                        <div class="accordion-content-padding">
                            <div class="city-minimal-wrapper" id="searchCityWrapper">
                                <select id="searchCitySelect" class="hidden">
                                    <option value="">Все города</option>
                                </select>
                                <div class="city-minimal-display" onclick="activateCitySearch('searchCityWrapper')">
                                    <!-- ✅ v2.3.1: подпись "Город" убрана -->
                                    <div class="city-text-container">
                                        <span class="city-display-text" id="searchCityText">Все города</span>
                                        <input type="text" 
                                               class="city-search-inline" 
                                               id="searchCitySearchInput"
                                               placeholder="Найти город..."
                                               oninput="onCityInlineInput(this.value, 'searchCityWrapper')"
                                               onkeydown="handleCityInputKey(event, 'searchCityWrapper')"
                                               onclick="event.stopPropagation()"
                                               onfocus="event.stopPropagation()">
                                    </div>
                                    <i class="fas fa-chevron-down city-arrow"></i>
                                </div>
                                <div class="city-minimal-options" id="searchCityOptions">
                                    <div class="city-list" id="searchCityList">
                                        <div class="city-minimal-option selected" data-value="" onclick="selectCity(this)">Все города</div>
                                    </div>
                                    <div class="city-minimal-empty hidden" id="searchCityNotFound">Города не найдены</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 4. Дата -->
            <div class="filter-card accordion-wrapper-clean">
                <div class="custom-accordion-filter">
                    <div class="accordion-trigger" onclick="toggleFilterAccordion(this)">
                        <span class="flex items-center gap-2 text-base font-semibold text-gray-800">
                            <i class="fas fa-calendar text-red-600"></i>Дата
                        </span>
                        <i class="fas fa-chevron-down accordion-arrow"></i>
                    </div>
                    <div class="accordion-body" style="max-height: 200px;">
                        <div class="accordion-content-padding">
                            <div class="grid grid-cols-2 gap-3">
                                <div>
                                    <label class="text-xs text-gray-500 mb-1 block">С</label>
                                    <input type="date" id="dateFrom" class="custom-input" onchange="applyFilters()">
                                </div>
                                <div>
                                    <label class="text-xs text-gray-500 mb-1 block">По</label>
                                    <input type="date" id="dateTo" class="custom-input" onchange="applyFilters()">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 5. Сортировка -->
            <div class="filter-card accordion-wrapper-clean">
                <div class="custom-accordion-filter">
                    <div class="accordion-trigger" onclick="toggleFilterAccordion(this)">
                        <span class="flex items-center gap-2 text-base font-semibold text-gray-800">
                            <i class="fas fa-sort text-red-600"></i>Сортировка
                        </span>
                        <i class="fas fa-chevron-down accordion-arrow"></i>
                    </div>
                    <div class="accordion-body" style="max-height: 300px;">
                        <div class="accordion-content-padding">
                            <div class="custom-select-wrapper select-wrapper" id="sortWrapper">
                                <select id="sortSelect" class="hidden">
                                    <option value="date_desc">По дате ↓</option>
                                    <option value="date_asc">По дате ↑</option>
                                    <option value="price_asc">Цена ↑</option>
                                    <option value="price_desc">Цена ↓</option>
                                    <option value="title">По названию</option>
                                </select>
                                <div class="custom-select-display dropdown-trigger" onclick="toggleSortSelect()">
                                    <span class="custom-select-text" id="sortText">По дате ↓</span>
                                    <i class="fas fa-chevron-down custom-select-arrow select-arrow"></i>
                                </div>
                                <div class="custom-options" id="sortOptions">
                                    <div class="custom-option dropdown-item selected" data-value="date_desc" onclick="selectSort(this)">По дате ↓</div>
                                    <div class="custom-option dropdown-item" data-value="date_asc" onclick="selectSort(this)">По дате ↑</div>
                                    <div class="custom-option dropdown-item" data-value="price_asc" onclick="selectSort(this)">Цена ↑</div>
                                    <div class="custom-option dropdown-item" data-value="price_desc" onclick="selectSort(this)">Цена ↓</div>
                                    <div class="custom-option dropdown-item" data-value="title" onclick="selectSort(this)">По названию</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Кнопки действий -->
            <div class="space-y-2 pt-2">
                <button onclick="applyFilters()" class="btn-primary">
                    <i class="fas fa-search"></i> Применить
                </button>
                <button onclick="resetFilters()" class="btn-secondary">
                    <i class="fas fa-undo"></i> Сбросить
                </button>
            </div>
        </div>

        
        <button id="mobileFilterBtn" class="fixed bottom-6 right-6 z-40 bg-red-600 text-white w-14 h-14 rounded-full shadow-lg flex items-center justify-center text-xl lg:hidden hover:bg-red-700 active:scale-95 transition-all">
            <i class="fas fa-sliders-h"></i>
        </button>

        
        <div id="drawerBackdrop"></div>
        <div id="mobileDrawer" class="lg:hidden">
            <div class="bg-white px-4 py-4 flex items-center justify-between border-b sticky top-0 z-10">
                <h2 class="text-lg font-bold text-gray-800">Фильтры поиска</h2>
                <button id="mobileDrawerClose" class="w-10 h-10 flex items-center justify-center rounded-full hover:bg-gray-100">
                    <i class="fas fa-times text-gray-500"></i>
                </button>
            </div>
            <div class="flex-1 overflow-y-auto px-4 py-4" id="filterContentMobile"></div>
            <div class="bg-white px-4 py-4 border-t space-y-3">
                <button onclick="resetFilters()" class="w-full py-3 border border-gray-300 rounded-xl text-gray-700 font-medium hover:bg-gray-50 active:bg-gray-100 transition">
                    Сбросить все
                </button>
                <button onclick="applyFilters(); closeMobileDrawer()" class="w-full py-3 bg-red-600 text-white rounded-xl font-medium hover:bg-red-700 active:bg-red-800 transition shadow-md">
                    <i class="fas fa-search mr-2"></i>Применить
                </button>
            </div>
        </div>

        
        <div class="search-results-area">
            <div class="search-input-wrapper" id="searchInputWrapper">
                <input type="text" 
                       id="globalSearchInput" 
                       class="search-input" 
                       placeholder="Поиск по названию или описанию..." 
                       value=""
                       oninput="handleSearchInput(this.value)"
                       onkeydown="if(event.key==='Enter'){applyFilters(); this.blur();}">
                <i class="fas fa-search search-icon"></i>
                <button type="button" class="search-clear-btn" onclick="clearSearch()" title="Очистить поиск">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            
            <div class="mb-4 flex items-center justify-between">
                <p class="text-sm text-gray-600">Найдено: <span class="font-semibold text-gray-800" id="resultsCount">0</span></p>
                <div class="flex gap-2 bg-white p-1 rounded-lg border border-gray-200">
                    <button onclick="setView('grid')" class="p-2 rounded-md hover:bg-gray-100 text-red-600 bg-gray-50" id="gridViewBtn"><i class="fas fa-th-large"></i></button>
                    <button onclick="setView('list')" class="p-2 rounded-md hover:bg-gray-100 text-gray-500" id="listViewBtn"><i class="fas fa-list"></i></button>
                </div>
            </div>

            <div id="searchResults" class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4"></div>

            <div id="emptyState" class="hidden text-center py-16 bg-white rounded-xl border border-gray-200 mt-4">
                <div class="w-20 h-20 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-4">
                    <i class="fas fa-search text-3xl text-gray-400"></i>
                </div>
                <p class="text-gray-700 font-medium text-lg">Ничего не найдено</p>
                <p class="text-gray-500 text-sm mt-1">Попробуйте изменить параметры поиска</p>
            </div>
        </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>
    // =====================================================================
    // 🔹 ГЛОБАЛЬНЫЕ ПЕРЕМЕННЫЕ
    // =====================================================================
    
    const CATEGORIES_DATA = [{"id": 8, "name": "\u0421\u043e\u043e\u0431\u0449\u0435\u0441\u0442\u0432\u0430", "slug": "Communities"}];
    const MAX_PRICE = 0;

    let filters = { 
        query: '', categories: ['all'], priceMin: 0, priceMax: MAX_PRICE, 
        freeOnly: false, city: '', dateFrom: '', dateTo: '', sortBy: 'date_desc' 
    };
    let citiesData = [];

    // =====================================================================
    // 🆕 v2.2.0: УНИВЕРСАЛЬНОЕ УПРАВЛЕНИЕ АККОРДЕОНОМ
    // =====================================================================
    function toggleFilterAccordion(trigger) {
        const body = trigger.nextElementSibling;
        const isActive = trigger.classList.contains('active');
        
        if (isActive) {
            body.style.overflow = 'hidden';
            trigger.classList.remove('active');
            body.style.maxHeight = null;
        } else {
            body.style.overflow = 'hidden';
            trigger.classList.add('active');
            body.style.maxHeight = body.scrollHeight + "px";
        }
    }

    function setupAccordionOverflow() {
        document.querySelectorAll('.custom-accordion-filter .accordion-body').forEach(body => {
            body.addEventListener('transitionend', (e) => {
                if (e.propertyName !== 'max-height') return;
                const trigger = body.previousElementSibling;
                if (trigger && trigger.classList.contains('active')) {
                    body.style.overflow = 'visible';
                }
            });
        });
    }

    function initAccordions() {
        const triggers = document.querySelectorAll('.custom-accordion-filter .accordion-trigger');
        triggers.forEach(trigger => {
            trigger.classList.add('active');
            const body = trigger.nextElementSibling;
            if (body) body.style.maxHeight = body.scrollHeight + "px";
        });
    }

    // =====================================================================
    // 🆕 v2.3.0: МИНИМАЛИСТИЧНЫЙ СЕЛЕКТОР ГОРОДА
    // ✅ v2.3.1: без подписи "Город" — только название города
    // ✅ v2.3.2: ID с префиксом "search" для избежания конфликта с модалкой
    // =====================================================================
    
    /**
     * Открыть dropdown и превратить заголовок в поле поиска
     */
    function activateCitySearch(wrapperId) {
        const wrapper = document.getElementById(wrapperId);
        if (!wrapper) return;
        
        const isActive = wrapper.classList.contains('active');
        
        // Закрыть все другие открытые селекторы города
        document.querySelectorAll('.city-minimal-wrapper.active').forEach(w => {
            if (w.id !== wrapperId) closeCityMinimal(w.id);
        });
        
        if (isActive) return;
        
        wrapper.classList.add('active');
        
        const input = wrapper.querySelector('.city-search-inline');
        const text = wrapper.querySelector('.city-display-text');
        const selectedOption = wrapper.querySelector('.city-minimal-option.selected');
        
        // Сохраняем предыдущее состояние для возможного отката
        input.dataset.prevText = text.textContent;
        input.dataset.prevValue = selectedOption ? selectedOption.dataset.value : '';
        
        // Переключаем: скрываем текст, показываем input
        text.style.display = 'none';
        input.style.display = 'block';
        input.value = '';
        
        setTimeout(() => {
            input.focus();
            renderCityList(citiesData, wrapperId);
        }, 50);
    }

    /**
     * Фильтрация списка при вводе текста
     */
    function onCityInlineInput(value, wrapperId) {
        const lower = value.toLowerCase().trim();
        if (!lower) {
            renderCityList(citiesData, wrapperId);
        } else {
            const filtered = citiesData.filter(c => 
                c.name.toLowerCase().includes(lower)
            );
            renderCityList(filtered, wrapperId);
        }
    }

    /**
     * Обработка клавиш в inline-инпуте
     */
    function handleCityInputKey(event, wrapperId) {
        if (event.key === 'Escape') {
            event.preventDefault();
            closeCityMinimal(wrapperId);
        } else if (event.key === 'Enter') {
            event.preventDefault();
            const wrapper = document.getElementById(wrapperId);
            if (!wrapper) return;
            const firstOption = wrapper.querySelector('.city-minimal-option');
            if (firstOption) selectCity(firstOption);
        }
    }

    /**
     * Закрыть dropdown и восстановить предыдущее значение (без выбора)
     */
    function closeCityMinimal(wrapperId) {
        const wrapper = document.getElementById(wrapperId);
        if (!wrapper) return;
        
        wrapper.classList.remove('active');
        
        const input = wrapper.querySelector('.city-search-inline');
        const text = wrapper.querySelector('.city-display-text');
        
        // Восстанавливаем предыдущий текст (если выбор не был сделан)
        if (input.dataset.prevText) {
            text.textContent = input.dataset.prevText;
        }
        
        text.style.display = '';
        input.style.display = 'none';
        input.value = '';
    }

    /**
     * Выбор города (универсальная для desktop и mobile)
     */
    function selectCity(option) {
        const wrapper = option.closest('.city-minimal-wrapper');
        if (!wrapper) return;
        
        const value = option.dataset.value;
        const name = option.textContent.trim();
        
        // Обновляем фильтры
        filters.city = value;
        
        // Снимаем выделение со всех опций
        wrapper.querySelectorAll('.city-minimal-option').forEach(o => o.classList.remove('selected'));
        option.classList.add('selected');
        
        // Обновляем отображение
        const text = wrapper.querySelector('.city-display-text');
        const input = wrapper.querySelector('.city-search-inline');
        text.textContent = name;
        text.style.display = '';
        input.style.display = 'none';
        input.value = '';
        
        // Обновляем скрытый select
        const select = wrapper.querySelector('select');
        if (select) select.value = value;
        
        // Закрываем dropdown
        wrapper.classList.remove('active');
        
        // Применяем фильтры
        applyFilters();
        
        window.debugLog('[SEARCH] 🏙️ Выбран город:', { id: value, name: name });
    }

    /**
     * Отрисовка списка городов (desktop и mobile)
     */
    function renderCityList(cities, wrapperId) {
        const wrapper = document.getElementById(wrapperId);
        if (!wrapper) return;
        
        const list = wrapper.querySelector('.city-list');
        const notFound = wrapper.querySelector('.city-minimal-empty');
        if (!list) return;
        
        if (!cities || cities.length === 0) {
            list.innerHTML = '';
            if (notFound) notFound.classList.remove('hidden');
            return;
        }
        
        if (notFound) notFound.classList.add('hidden');
        
        list.innerHTML = cities.map(city => `
            <div class="city-minimal-option ${city.id === filters.city ? 'selected' : ''}" 
                 data-value="${city.id}" 
                 onclick="selectCity(this)"
                 title="${city.name}">${city.name}</div>
        `).join('');
    }

    /**
     * Обработчик клика вне селектора города
     */
    function attachCityListeners() {
        document.addEventListener('click', (e) => {
            document.querySelectorAll('.city-minimal-wrapper').forEach(wrapper => {
                if (!wrapper.contains(e.target)) {
                    closeCityMinimal(wrapper.id);
                }
            });
        });
    }

    // =====================================================================
    // 🔍 ЖИВОЙ ПОИСК С DEBOUNCE (300ms)
    // =====================================================================
    let searchTimeout = null;
    function handleSearchInput(value) {
        const wrapper = document.getElementById('searchInputWrapper');
        if (value.trim()) wrapper.classList.add('has-value');
        else wrapper.classList.remove('has-value');
        
        clearTimeout(searchTimeout);
        searchTimeout = setTimeout(() => {
            filters.query = value.trim();
            fetchPublications(filters);
        }, 300);
    }
    
    function clearSearch() {
        const input = document.getElementById('globalSearchInput');
        input.value = '';
        document.getElementById('searchInputWrapper').classList.remove('has-value');
        filters.query = '';
        fetchPublications(filters);
        input.focus();
    }

    // =====================================================================
    // 🏙️ ЗАГРУЗКА ГОРОДОВ С БЭКЕНДА
    // =====================================================================
    async function loadCities() {
        try {
            const response = await fetch('/search/cities?q=');
            if (!response.ok) throw new Error(`HTTP ${response.status}`);
            const data = await response.json();
            const formattedCities = (data || []).map(c => ({ 
                id: String(c.id), 
                name: c.name || c.russian_name 
            }));
            citiesData = [{ id: '', name: 'Все города' }, ...formattedCities];
            
            // Рендерим для обоих селекторов (v2.3.2: ID с префиксом "search")
            renderCityList(citiesData, 'searchCityWrapper');
            renderCityList(citiesData, 'searchCityWrapperMobile');
            
            // Проверяем URL параметр
            const urlParams = new URLSearchParams(window.location.search);
            const cityFromUrl = urlParams.get('city_id') || urlParams.get('city');
            if (cityFromUrl) {
                const option = document.querySelector(`#searchCityWrapper .city-minimal-option[data-value="${cityFromUrl}"]`);
                if (option) selectCity(option);
                window.debugLog('[SEARCH] 🏙️ Город выбран из URL:', cityFromUrl);
            }
            window.debugLog('[SEARCH] ✅ Города загружены:', citiesData.length - 1);
        } catch (error) {
            window.errorLog('[SEARCH] ❌ Ошибка загрузки городов:', error);
            citiesData = [{ id: '', name: 'Все города' }];
            renderCityList(citiesData, 'searchCityWrapper');
            renderCityList(citiesData, 'searchCityWrapperMobile');
        }
    }

    // =====================================================================
    // 📱 ШАБЛОН ФИЛЬТРОВ ДЛЯ МОБИЛЬНОЙ ШТОРКИ
    // ✅ v2.3.1: селектор города без подписи "Город"
    // ✅ v2.3.2: ID с префиксом "search" для избежания конфликта с модалкой
    // =====================================================================
    const mobileCategoriesHtml = CATEGORIES_DATA.map(cat => `
        <label class="flex items-center gap-2 cursor-pointer p-2 rounded-lg hover:bg-gray-50 w-full">
            <div class="custom-checkbox" data-category="${cat.slug}" onclick="toggleCategoryMobile(this)"></div>
            <span class="text-sm">${cat.name}</span>
        </label>
    `).join('');
    
    const filterTemplate = `
        <!-- Mobile: Категории -->
        <div class="filter-card accordion-wrapper-clean">
            <div class="custom-accordion-filter">
                <div class="accordion-trigger active" onclick="toggleFilterAccordion(this)">
                    <span class="flex items-center gap-2 font-semibold text-gray-800"><i class="fas fa-folder text-red-600"></i>Категории</span>
                    <i class="fas fa-chevron-down accordion-arrow"></i>
                </div>
                <div class="accordion-body" style="max-height: 500px;">
                    <div class="accordion-content-padding flex flex-col space-y-1" id="categoryFiltersMobile">
                        <label class="flex items-center gap-2 cursor-pointer p-2 rounded-lg hover:bg-gray-50 w-full">
                            <div class="custom-checkbox checked" data-category="all" onclick="toggleCategoryMobile(this)"></div>
                            <span class="text-sm">Все</span>
                        </label>
                        ${mobileCategoriesHtml}
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Mobile: Стоимость -->
        <div class="filter-card accordion-wrapper-clean">
            <div class="custom-accordion-filter">
                <div class="accordion-trigger active" onclick="toggleFilterAccordion(this)">
                    <span class="flex items-center gap-2 font-semibold text-gray-800"><i class="fas fa-ruble-sign text-red-600"></i>Стоимость</span>
                    <i class="fas fa-chevron-down accordion-arrow"></i>
                </div>
                <div class="accordion-body" style="max-height: 300px;">
                    <div class="accordion-content-padding">
                        <div id="priceRangeSectionMobile">
                            <div class="flex gap-2 mb-3">
                                <input type="number" id="priceMinMobile" placeholder="От" class="custom-input" value="0" onchange="updatePriceRangeMobile()">
                                <input type="number" id="priceMaxMobile" placeholder="До" class="custom-input" value="${MAX_PRICE}" onchange="updatePriceRangeMobile()">
                            </div>
                            <input type="range" class="range-slider" id="priceSliderMobile" min="0" max="${MAX_PRICE}" value="${MAX_PRICE}" oninput="updatePriceFromSliderMobile()">
                            <div class="flex justify-between mt-1 text-xs text-gray-500"><span>0 ₽</span><span id="priceValueMobile">${MAX_PRICE} ₽</span></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Mobile: Город (v2.3.2: ID с префиксом "search") -->
        <div class="filter-card accordion-wrapper-clean">
            <div class="custom-accordion-filter">
                <div class="accordion-trigger active" onclick="toggleFilterAccordion(this)">
                    <span class="flex items-center gap-2 font-semibold text-gray-800"><i class="fas fa-map-marker-alt text-red-600"></i>Город</span>
                    <i class="fas fa-chevron-down accordion-arrow"></i>
                </div>
                <div class="accordion-body" style="max-height: 400px;">
                    <div class="accordion-content-padding">
                        <div class="city-minimal-wrapper" id="searchCityWrapperMobile">
                            <select id="searchCitySelectMobile" class="hidden"><option value="">Все города</option></select>
                            <div class="city-minimal-display" onclick="activateCitySearch('searchCityWrapperMobile')">
                                <div class="city-text-container">
                                    <span class="city-display-text" id="searchCityTextMobile">Все города</span>
                                    <input type="text" 
                                           class="city-search-inline" 
                                           id="searchCitySearchInputMobile"
                                           placeholder="Найти город..."
                                           oninput="onCityInlineInput(this.value, 'searchCityWrapperMobile')"
                                           onkeydown="handleCityInputKey(event, 'searchCityWrapperMobile')"
                                           onclick="event.stopPropagation()"
                                           onfocus="event.stopPropagation()">
                                </div>
                                <i class="fas fa-chevron-down city-arrow"></i>
                            </div>
                            <div class="city-minimal-options" id="searchCityOptionsMobile">
                                <div class="city-list" id="searchCityListMobile">
                                    <div class="city-minimal-option selected" data-value="" onclick="selectCity(this)">Все города</div>
                                </div>
                                <div class="city-minimal-empty hidden" id="searchCityNotFoundMobile">Города не найдены</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Mobile: Дата -->
        <div class="filter-card accordion-wrapper-clean">
            <div class="custom-accordion-filter">
                <div class="accordion-trigger active" onclick="toggleFilterAccordion(this)">
                    <span class="flex items-center gap-2 font-semibold text-gray-800"><i class="fas fa-calendar text-red-600"></i>Дата</span>
                    <i class="fas fa-chevron-down accordion-arrow"></i>
                </div>
                <div class="accordion-body" style="max-height: 200px;">
                    <div class="accordion-content-padding">
                        <div class="grid grid-cols-2 gap-3">
                            <div><label class="text-xs text-gray-500 mb-1 block">С</label><input type="date" id="dateFromMobile" class="custom-input" onchange="applyFilters()"></div>
                            <div><label class="text-xs text-gray-500 mb-1 block">По</label><input type="date" id="dateToMobile" class="custom-input" onchange="applyFilters()"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Mobile: Сортировка -->
        <div class="filter-card accordion-wrapper-clean">
            <div class="custom-accordion-filter">
                <div class="accordion-trigger active" onclick="toggleFilterAccordion(this)">
                    <span class="flex items-center gap-2 font-semibold text-gray-800"><i class="fas fa-sort text-red-600"></i>Сортировка</span>
                    <i class="fas fa-chevron-down accordion-arrow"></i>
                </div>
                <div class="accordion-body" style="max-height: 300px;">
                    <div class="accordion-content-padding">
                        <div class="custom-select-wrapper select-wrapper">
                            <select id="sortSelectMobile" class="hidden">
                                <option value="date_desc">По дате ↓</option><option value="date_asc">По дате ↑</option>
                                <option value="price_asc">Цена ↑</option><option value="price_desc">Цена ↓</option><option value="title">По названию</option>
                            </select>
                            <div class="custom-select-display dropdown-trigger" onclick="toggleSortSelectMobile()">
                                <span class="custom-select-text" id="sortTextMobile">По дате ↓</span>
                                <i class="fas fa-chevron-down custom-select-arrow select-arrow"></i>
                            </div>
                            <div class="custom-options">
                                <div class="custom-option dropdown-item selected" data-value="date_desc" onclick="selectSortMobile(this)">По дате ↓</div>
                                <div class="custom-option dropdown-item" data-value="date_asc" onclick="selectSortMobile(this)">По дате ↑</div>
                                <div class="custom-option dropdown-item" data-value="price_asc" onclick="selectSortMobile(this)">Цена ↑</div>
                                <div class="custom-option dropdown-item" data-value="price_desc" onclick="selectSortMobile(this)">Цена ↓</div>
                                <div class="custom-option dropdown-item" data-value="title" onclick="selectSortMobile(this)">По названию</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    `;

    // =====================================================================
    // 📡 ФУНКЦИИ РАБОТЫ С API ПУБЛИКАЦИЙ
    // =====================================================================
    async function fetchPublications(filters) {
        const params = new URLSearchParams();
        if (filters.query) params.append('q', filters.query);
        if (filters.categories && !filters.categories.includes('all')) filters.categories.forEach(cat => params.append('categories', cat));
        if (filters.priceMin !== undefined && filters.priceMax !== undefined) { params.append('price_min', filters.priceMin); params.append('price_max', filters.priceMax); }
        if (filters.city) params.append('city', filters.city);
        if (filters.dateFrom) params.append('date_from', filters.dateFrom);
        if (filters.dateTo) params.append('date_to', filters.dateTo);
        if (filters.freeOnly) params.append('free_only', '1');
        if (filters.sortBy) params.append('sort', filters.sortBy);
        
        try {
            const response = await fetch(`/search/publications?${params}`);
            if (!response.ok) throw new Error(`HTTP ${response.status}`);
            const data = await response.json();
            if (data.success) {
                displayResults(data.results);
                document.getElementById('resultsCount').textContent = data.total;
                window.debugLog('[SEARCH] 📊 Результаты поиска:', { total: data.total, filters: filters });
            } else displayResults([]);
        } catch (error) {
            window.errorLog('[SEARCH] ❌ Ошибка запроса публикаций:', error);
            document.getElementById('searchResults').innerHTML = '';
            document.getElementById('emptyState').classList.remove('hidden');
            document.getElementById('resultsCount').textContent = '0';
        }
    }

    // =====================================================================
    // 🎛️ УПРАВЛЕНИЕ ФИЛЬТРАМИ И ОТОБРАЖЕНИЕМ
    // =====================================================================
    function applyFilters() {
        filters.dateFrom = document.getElementById('dateFrom')?.value || '';
        filters.dateTo = document.getElementById('dateTo')?.value || '';
        fetchPublications(filters);
    }

    function resetFilters() {
        document.getElementById('globalSearchInput').value = '';
        document.getElementById('searchInputWrapper').classList.remove('has-value');
        filters = { query: '', categories: ['all'], priceMin: 0, priceMax: MAX_PRICE, freeOnly: false, city: '', dateFrom: '', dateTo: '', sortBy: 'date_desc' };
        
        // Desktop: категории
        document.querySelectorAll('#categoryFilters .custom-checkbox').forEach(cb => cb.classList.remove('checked'));
        document.querySelector('#categoryFilters [data-category="all"]')?.classList.add('checked');
        
        // Desktop: цена
        document.getElementById('priceMin').value = '0';
        document.getElementById('priceMax').value = String(MAX_PRICE);
        document.getElementById('priceSlider').value = String(MAX_PRICE);
        document.getElementById('priceValue').textContent = MAX_PRICE + ' ₽';
        document.getElementById('freeOnlyCheckbox')?.classList.remove('checked');
        document.getElementById('priceRangeSection').style.opacity = '1';
        document.getElementById('priceRangeSection').style.pointerEvents = 'auto';
        
        // Desktop: город (v2.3.2: ID с префиксом "search")
        const cityText = document.getElementById('searchCityText');
        if (cityText) cityText.textContent = 'Все города';
        closeCityMinimal('searchCityWrapper');
        document.querySelector('#searchCityWrapper .city-minimal-option')?.classList.add('selected');
        document.querySelectorAll('#searchCityWrapper .city-minimal-option:not([data-value=""])').forEach(o => o.classList.remove('selected'));
        const citySelect = document.getElementById('searchCitySelect');
        if (citySelect) citySelect.value = '';
        
        // Desktop: даты и сортировка
        document.getElementById('dateFrom').value = '';
        document.getElementById('dateTo').value = '';
        document.getElementById('sortText').textContent = 'По дате ↓';
        document.getElementById('sortWrapper')?.classList.remove('active');
        document.querySelector('#sortOptions .custom-option[data-value="date_desc"]')?.classList.add('selected');
        document.querySelectorAll('#sortOptions .custom-option:not([data-value="date_desc"])').forEach(o => o.classList.remove('selected'));
        
        // Mobile: цена
        const pMinM = document.getElementById('priceMinMobile'); if(pMinM) pMinM.value = '0';
        const pMaxM = document.getElementById('priceMaxMobile'); if(pMaxM) pMaxM.value = String(MAX_PRICE);
        const pSlM = document.getElementById('priceSliderMobile'); if(pSlM) pSlM.value = String(MAX_PRICE);
        const pValM = document.getElementById('priceValueMobile'); if(pValM) pValM.textContent = MAX_PRICE + ' ₽';
        
        // Mobile: категории
        document.querySelectorAll('#categoryFiltersMobile .custom-checkbox').forEach(cb => cb.classList.remove('checked'));
        document.querySelector('#categoryFiltersMobile [data-category="all"]')?.classList.add('checked');
        
        // Mobile: город (v2.3.2: ID с префиксом "search")
        const cityTextM = document.getElementById('searchCityTextMobile');
        if (cityTextM) cityTextM.textContent = 'Все города';
        closeCityMinimal('searchCityWrapperMobile');
        document.querySelector('#searchCityWrapperMobile .city-minimal-option')?.classList.add('selected');
        document.querySelectorAll('#searchCityWrapperMobile .city-minimal-option:not([data-value=""])').forEach(o => o.classList.remove('selected'));
        const citySelectM = document.getElementById('searchCitySelectMobile');
        if (citySelectM) citySelectM.value = '';
        
        applyFilters();
        window.debugLog('[SEARCH] 🔄 Фильтры сброшены');
    }

    function displayResults(pubs) {
        const cont = document.getElementById('searchResults');
        const empty = document.getElementById('emptyState');
        if (!pubs || !pubs.length) { cont.innerHTML = ''; empty.classList.remove('hidden'); return; }
        empty.classList.add('hidden');
        cont.innerHTML = pubs.map(p => `
            <div class="publication-card">
                <img src="${p.image_url || 'https://via.placeholder.com/400x300?text=No+Image'}" class="publication-image" alt="${p.title}" onerror="this.src='https://via.placeholder.com/400x300?text=Image+Error'">
                <div class="p-4">
                    <div class="flex justify-between items-start mb-2">
                        <h3 class="font-semibold text-gray-800 line-clamp-1">${p.title}</h3>
                        <span class="publication-badge ${p.is_free ? 'badge-free' : 'badge-paid'}">${p.is_free ? '<i class="fas fa-gift"></i>Бесплатно' : p.price + ' ₽'}</span>
                    </div>
                    <p class="text-xs text-gray-500 mb-2">${p.category_name} • ${p.city_name}</p>
                    <p class="text-sm text-gray-600 line-clamp-2 mb-3">${p.description}</p>
                    <div class="flex justify-between items-center text-xs text-gray-500 border-t pt-3">
                        <span><i class="far fa-calendar mr-1"></i>${p.date ? new Date(p.date).toLocaleDateString('ru-RU', {day:'numeric', month:'short'}) : '—'}</span>
                        <a href="${p.url}" class="text-red-600 font-medium hover:underline">Подробнее →</a>
                    </div>
                </div>
            </div>
        `).join('');
    }

    function setView(view) {
        const cont = document.getElementById('searchResults');
        cont.className = view === 'list' ? 'space-y-4' : 'grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4';
        document.getElementById('gridViewBtn').className = view === 'grid' ? 'p-2 rounded-md bg-gray-50 text-red-600' : 'p-2 rounded-md text-gray-500 hover:bg-gray-100';
        document.getElementById('listViewBtn').className = view === 'list' ? 'p-2 rounded-md bg-gray-50 text-red-600' : 'p-2 rounded-md text-gray-500 hover:bg-gray-100';
    }

    function toggleCategory(checkbox) {
        const cat = checkbox.dataset.category;
        const container = checkbox.closest('#categoryFilters') || checkbox.closest('#categoryFiltersMobile');
        if (cat === 'all') {
            container.querySelectorAll('.custom-checkbox').forEach(cb => cb.classList.remove('checked'));
            checkbox.classList.add('checked');
            filters.categories = ['all'];
        } else {
            container.querySelector('[data-category="all"]')?.classList.remove('checked');
            checkbox.classList.toggle('checked');
            const selected = [...container.querySelectorAll('.custom-checkbox.checked')].map(cb => cb.dataset.category).filter(c => c !== 'all');
            filters.categories = selected.length ? selected : ['all'];
            if (filters.categories.length === 0) { filters.categories = ['all']; container.querySelector('[data-category="all"]')?.classList.add('checked'); }
        }
        applyFilters();
    }

    function updatePriceFromSlider() {
        const val = document.getElementById('priceSlider').value;
        document.getElementById('priceValue').textContent = val + ' ₽';
        document.getElementById('priceMax').value = val;
        filters.priceMax = parseInt(val);
        applyFilters();
    }
    function updatePriceRange() {
        const min = parseInt(document.getElementById('priceMin').value) || 0;
        const max = parseInt(document.getElementById('priceMax').value) || MAX_PRICE;
        filters.priceMin = min; filters.priceMax = max;
        document.getElementById('priceSlider').value = max;
        document.getElementById('priceValue').textContent = max + ' ₽';
        applyFilters();
    }
    function toggleFreeOnly(checkbox) {
        checkbox.closest('.accordion-content-padding').querySelectorAll('.custom-checkbox').forEach(cb => cb.classList.remove('checked'));
        checkbox.classList.add('checked');
        filters.freeOnly = true; filters.priceMin = 0; filters.priceMax = 0;
        const sec = checkbox.closest('.accordion-content-padding').querySelector('#priceRangeSection');
        sec.style.opacity = '0.5'; sec.style.pointerEvents = 'none';
        document.getElementById('priceMin').value = '0'; document.getElementById('priceMax').value = '0';
        document.getElementById('priceSlider').value = 0; document.getElementById('priceValue').textContent = '0 ₽';
        applyFilters();
    }

    function toggleSortSelect() { document.getElementById('sortWrapper')?.classList.toggle('active'); }
    function selectSort(opt) {
        const wrap = opt.closest('.custom-select-wrapper');
        wrap.querySelectorAll('.custom-option').forEach(o => o.classList.remove('selected'));
        opt.classList.add('selected');
        wrap.querySelector('.custom-select-text').textContent = opt.textContent;
        wrap.querySelector('select').value = opt.dataset.value;
        wrap.classList.remove('active');
        filters.sortBy = opt.dataset.value; applyFilters();
    }

    function attachSelectListeners() {
        document.addEventListener('click', e => {
            if (!e.target.closest('.custom-select-wrapper')) document.querySelectorAll('.custom-select-wrapper').forEach(w => w.classList.remove('active'));
        });
    }

    // =====================================================================
    // 📱 МОБИЛЬНАЯ ЛОГИКА
    // =====================================================================
    function toggleCategoryMobile(cb) { toggleCategory(cb); }
    function updatePriceFromSliderMobile() {
        const v = document.getElementById('priceSliderMobile')?.value; if(v===undefined) return;
        document.getElementById('priceValueMobile').textContent = v+' ₽';
        document.getElementById('priceMaxMobile').value = v;
        filters.priceMax = parseInt(v); applyFilters();
    }
    function updatePriceRangeMobile() {
        const minE=document.getElementById('priceMinMobile'), maxE=document.getElementById('priceMaxMobile');
        if(!minE||!maxE) return;
        const min=parseInt(minE.value)||0, max=parseInt(maxE.value)||MAX_PRICE;
        filters.priceMin=min; filters.priceMax=max;
        const s=document.getElementById('priceSliderMobile'); if(s) s.value=max;
        document.getElementById('priceValueMobile').textContent=max+' ₽'; applyFilters();
    }
    function toggleSortSelectMobile() { toggleSortSelect(); }
    function selectSortMobile(opt) { selectSort(opt); }

    // =====================================================================
    // 📱 МОБИЛЬНЫЙ DRAWER
    // =====================================================================
    function closeMobileDrawer() {
        const d=document.getElementById('mobileDrawer'), b=document.getElementById('drawerBackdrop');
        if(!d||!b) return; d.classList.remove('open'); b.classList.remove('open'); document.body.style.overflow='';
    }
    function toggleMobileDrawer() {
        const d=document.getElementById('mobileDrawer'), b=document.getElementById('drawerBackdrop');
        if(!d||!b) return;
        if(!d.classList.contains('open')){d.classList.add('open');b.classList.add('open');document.body.style.overflow='hidden';}
        else closeMobileDrawer();
    }
    let resizeTimeout=null;
    window.addEventListener('resize',()=>{clearTimeout(resizeTimeout);resizeTimeout=setTimeout(()=>{const d=document.getElementById('mobileDrawer');if(d&&d.classList.contains('open')&&window.innerWidth>=1024)closeMobileDrawer();},150);});

    // =====================================================================
    // 🚀 ИНИЦИАЛИЗАЦИЯ
    // =====================================================================
    document.addEventListener('DOMContentLoaded', () => {
        const mc = document.getElementById('filterContentMobile');
        if(mc) mc.innerHTML = filterTemplate;
        
        document.getElementById('mobileFilterBtn')?.addEventListener('click', (e)=>{e.preventDefault();toggleMobileDrawer();});
        document.getElementById('mobileDrawerClose')?.addEventListener('click', (e)=>{e.preventDefault();closeMobileDrawer();});
        document.getElementById('drawerBackdrop')?.addEventListener('click', (e)=>{e.preventDefault();closeMobileDrawer();});
        
        setupAccordionOverflow();
        initAccordions();
        
        attachCityListeners();
        attachSelectListeners();
        
        loadCities();
        applyFilters();
        
        window.debugLog('[SEARCH] ✅ Инициализация страницы поиска завершена (MAX_PRICE=' + MAX_PRICE + ', city selector v2.3.2)');
    });
</script>


</body>
</html>