/* ========================================= */
/* 1. БАЗОВЫЕ СТИЛИ                          */
/* ========================================= */
body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background-color: #f0f2f5; color: #1f2937; }
.page-title { font-size: 22px; margin: 15px 15px 10px; font-weight: 800; color: #1f2937; line-height: 1.3;}
.section-title { font-size: 20px; margin: 0; font-weight: 800; color: #1f2937; line-height: 1.3; flex-grow: 1; }

/* ========================================= */
/* 2. ШАПКА И НАВИГАЦИЯ (МЕНЮ)               */
/* ========================================= */
.desktop-nav-links { display: none; }
.mobile-menu { display: none; position: absolute; top: 65px; right: 15px; width: 250px; background: white; border-radius: 12px; box-shadow: 0 10px 40px rgba(0,0,0,0.15); border: 1px solid #eee; z-index: 2000; flex-direction: column; padding: 10px 0; }
.mobile-menu.active { display: flex; }
.menu-link { display: block; padding: 12px 20px; color: #333; text-decoration: none; font-weight: 500; }
.menu-link:hover { background: #f8fafc; color: #10b981; }

@media (min-width: 900px) {
    .main-container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
    .category-nav { display: none !important; }
    .header-top { position: relative; } 
    .desktop-nav-links { display: flex !important; gap: 40px; font-size: 15px; font-weight: 600; position: absolute; left: 50%; transform: translateX(-50%); height: 100%; align-items: center; }
    .desktop-link { text-decoration: none; color: #4b5563; transition: color 0.2s; }
    .desktop-link:hover { color: #10b981; }
    .desktop-link.active { color: #10b981; }
    .mobile-menu { right: calc((100% - 1200px) / 2 + 15px); width: 300px; }
    #locations-grid { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 25px; align-items: start; }
}

/* ========================================= */
/* 3. КАРТА И ЭЛЕМЕНТЫ УПРАВЛЕНИЯ            */
/* ========================================= */
#map-container { position: relative; width: 100%; height: 50vh; min-height: 400px; z-index: 10; border-top: 1px solid #e2e8f0; border-bottom: 1px solid #e2e8f0; background: #e5e5e5; }
#map-container.fullscreen { position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100% !important; height: 100% !important; height: 100dvh !important; z-index: 9999; border: none; margin: 0; }
#map-container.fullscreen .map-controls { bottom: 30px; }
#map-container.fullscreen .map-bus-btn { bottom: 30px; }

.map-controls { position: absolute; bottom: 20px; right: 10px; z-index: 1000; display: flex; flex-direction: column; gap: 10px; }
.map-btn { background: white; border: 1px solid #e2e8f0; border-radius: 8px; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 20px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); }
#btn-fullscreen { font-size: 24px; font-weight: bold; }

.map-filter-btn { background: white; padding: 8px 14px; border-radius: 12px; font-size: 14px; font-weight: bold; color: #333; box-shadow: 0 2px 5px rgba(0,0,0,0.03); border: 1px solid #e2e8f0; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; height: 40px; transition: 0.2s; }

.map-bus-btn { position: absolute; bottom: 20px; left: 10px; z-index: 1000; background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); padding: 8px 14px; border-radius: 20px; font-size: 14px; font-weight: bold; color: #333; box-shadow: 0 4px 10px rgba(0,0,0,0.15); border: 1px solid rgba(226, 232, 240, 0.8); cursor: pointer; display: flex; align-items: center; gap: 6px; transition: 0.2s; }
.map-bus-btn.active { background: rgba(59, 130, 246, 0.9); color: white; border-color: #3b82f6; }

.map-disclaimer { font-size: 11px; color: #64748b; margin: 8px 15px 20px; line-height: 1.4; background: #fff; padding: 10px; border-radius: 8px; border: 1px solid #e2e8f0; }
.map-disclaimer a { color: #10b981; text-decoration: none; font-weight: 600; }

/* Маркеры на карте */
.custom-marker { color: white; border-radius: 50%; text-align: center; line-height: 34px; font-weight: bold; border: 2px solid white; box-shadow: 0 3px 6px rgba(0,0,0,0.3); font-size: 16px; background: #3b82f6; }
.marker-Храмы { background: #eab308; } .marker-Пляжи { background: #0ea5e9; } .marker-Природа { background: #22c55e; }
.marker-Смотровые { background: #8b5cf6; } .marker-Развлечения { background: #ec4899; } .marker-Еда { background: #f97316; }
.marker-Исторические-места { background: #84cc16; }
.marker-Музеи-и-Городские { background: #6366f1; }
.marker-Транспорт-и-Услуги { background: #64748b; }
.marker-Рынки-и-ТЦ { background: #f43f5e; }
.marker-Источники { background: #06b6d4; }
.marker-default { background: #94a3b8; }

/* === VIP-МАРКЕР (Sunset - Крутящиеся иконки) === */
.marker-vip-container { 
    border: 3px solid #10b981 !important;
    border-radius: 50%;
    background-color: white;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    animation: pulse-marker 2s infinite; 
    z-index: 9999 !important; 
    overflow: hidden;
}
.animated-services-inner {
    width: 100%;
    height: 100%;
    background-size: 65%;
    background-position: center;
    background-repeat: no-repeat;
    animation: rotate-icons 8s infinite;
}

/* === МАРКЕР ПАРТНЕРОВ (Наши - Обычный значок + Пульс) === */
.marker-partner {
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.8);
    animation: pulse-marker 2s infinite; 
    border: 2px solid #10b981 !important;
    z-index: 9000 !important;
}

@keyframes rotate-icons {
    0%, 22%   { background-image: url('/static/images/map-icon/house.png'); }
    25%, 47%  { background-image: url('/static/images/map-icon/bike.png'); }
    50%, 72%  { background-image: url('/static/images/map-icon/car.png'); }
    75%, 97%  { background-image: url('/static/images/map-icon/exchange.png'); }
    100%      { background-image: url('/static/images/map-icon/house.png'); }
}

@keyframes pulse-marker {
    0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.8); }
    70% { box-shadow: 0 0 0 15px rgba(16, 185, 129, 0); }
    100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

.leaflet-popup-close-button { width: 32px !important; height: 32px !important; font-size: 28px !important; line-height: 28px !important; color: #ef4444 !important; padding-top: 4px !important; padding-right: 4px !important; text-align: center; }

/* ========================================= */
/* 4. СПИСОК ЛОКАЦИЙ (КАРТОЧКИ)              */
/* ========================================= */
#locations-grid { display: flex; flex-direction: column; } 

.loc-card { display: flex; flex-direction: column; background: #fff; border-radius: 16px; padding: 15px; margin: 0 15px 20px; border: 1px solid #e5e7eb; box-shadow: 0 4px 12px rgba(0,0,0,0.05); text-decoration: none; color: inherit; cursor: pointer; transition: transform 0.2s, box-shadow 0.2s; }
.loc-card:hover { transform: translateY(-2px); box-shadow: 0 8px 16px rgba(0,0,0,0.1); border-color: #cbd5e1; }
.loc-badge { background: #f1f5f9; color: #475569; font-size: 11px; font-weight: bold; padding: 4px 8px; border-radius: 6px; border: 1px solid #e2e8f0; display: inline-block; }

/* Sunset Офис - Всегда наверху */
.loc-sunset { border: 2px solid #10b981 !important; background: #f0fdf4 !important; }
/* Наши Партнеры */
.loc-partner { border: 1px solid #10b981 !important; }

/* Бейджик расстояния */
.distance-badge { font-size: 12px; color: #10b981; font-weight: 800; background: #ecfdf5; padding: 4px 8px; border-radius: 6px; margin-bottom: 10px; display: inline-block; }

.loc-gallery { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 4px; border-radius: 12px; overflow: hidden; margin-bottom: 12px; background: #f1f5f9; }
.loc-gallery-main { grid-column: 1 / span 2; height: 160px; }
.loc-gallery-sub { height: 90px; position: relative; }
.loc-gallery img { width: 100%; height: 100%; object-fit: cover; display: block; }
.loc-photo-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 18px; }

/* ========================================= */
/* 5. МОДАЛЬНОЕ ОКНО ФИЛЬТРОВ И FAQ          */
/* ========================================= */
.filter-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 10000; display: none; align-items: flex-end; justify-content: center; opacity: 0; transition: opacity 0.3s; }
.filter-modal-overlay.active { display: flex; opacity: 1; }
.filter-modal { background: white; width: 100%; max-width: 500px; border-radius: 20px 20px 0 0; padding: 20px; box-sizing: border-box; transform: translateY(100%); transition: transform 0.3s; }
.filter-modal-overlay.active .filter-modal { transform: translateY(0); }

.chips-container { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.chip { background: #f1f5f9; border: 1px solid #e2e8f0; padding: 10px 16px; border-radius: 20px; font-size: 14px; font-weight: 500; color: #4b5563; cursor: pointer; transition: 0.2s; user-select: none; }
.chip.active { background: #10b981; color: white; border-color: #10b981; box-shadow: 0 2px 6px rgba(16, 185, 129, 0.3); }
.apply-filter-btn { background: #10b981; color: white; border: none; border-radius: 12px; width: 100%; padding: 14px; font-size: 16px; font-weight: bold; cursor: pointer; }

details > summary { list-style: none; }
details > summary::-webkit-details-marker { display: none; }
.faq-summary { font-size: 15px; font-weight: 600; color: #1f2937; cursor: pointer; padding: 12px 0; position: relative; padding-right: 30px; }
.faq-summary::after { content: '+'; position: absolute; right: 0; top: 50%; transform: translateY(-50%); font-size: 20px; color: #10b981; transition: 0.3s; }
details[open] .faq-summary::after { content: '−'; color: #ef4444; }
.faq-answer { padding-bottom: 12px; font-size: 14px; color: #475569; line-height: 1.6; }