.my-map-favorites-grid {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
     gap: 24px;
     padding-top: 20px;
 }


 @media (max-width: 1024px) {
     .sidebar-user-info {
         display: flex;
         align-items: center;
         gap: 20px;
         text-align: left;
         flex-direction: column;
     }
 }

 @media(max-width:768px) {
     .my-map-favorites-grid {
         display: grid;
         grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
         gap: 24px;
         padding-top: 20px;
     }
 }

 .favorite-card-wrapper {
     /* background-color: #fff; */
     border-radius: 16px;
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
     overflow: hidden;
     display: flex;
     flex-direction: column;
     transition: all 0.3s ease-in-out;

 }

 .favorite-card-wrapper:hover {
     transform: translateY(-5px);
     box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
 }

 .favorites-empty-message {
     color: #fff;
 }

 /* --- Верхний блок с картинкой --- */
 .fav-card__image-container {
     position: relative;
     height: 180px;
     /* background-color: #f0f0f0; */
 }

 .fav-card__image {
     width: 100%;
     height: 100%;
     object-fit: cover;
 }

 .fav-card__top-actions {
     position: absolute;
     top: 12px;
     right: 12px;
     display: flex;
     gap: 8px;
     z-index: 9;
 }

 .fav-card__icon-btn {
     background-color: rgba(255, 255, 255, 0.8);
     border: none;
     border-radius: 50%;
     width: 36px;
     height: 36px;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 18px;
     color: #ff4d4d;
     cursor: pointer;
     backdrop-filter: blur(4px);
     transition: all 0.2s ease;
 }

 .fav-card__icon-btn:hover {
     background-color: #fff;
     transform: scale(1.1);
 }

 .fav-card__meta {
     color: white;
 }

 /* --- Нижний блок с контентом --- */
 .fav-card__content {
     background-color: rgba(25, 38, 64, 1);
     padding: 20px;
     display: flex;
     flex-direction: column;
     gap: 10px;
     flex-grow: 1;
 }

 .fav-card__subtitle {
     font-size: 13px;
     font-weight: 500;
     color: rgba(255, 255, 255, 1);
 }

 .fav-card__title {
     font-size: 20px;
     font-weight: 700;
     color: rgba(255, 255, 255, 1);
     margin: 0;
     line-height: 1.3;
 }

 .fav-card__rating {
     display: flex;
     align-items: center;
     gap: 8px;
     font-size: 14px;
     color: rgba(255, 255, 255, 1);
 }

 .fav-card__rating-stars {
     color: rgba(255, 255, 255, 1);
 }

 .fav-card__address {
     font-size: 14px;
     color: rgba(255, 255, 255, 1);
     margin: 0;
 }

 .fav-card__buttons {
     margin-top: auto;
     padding-top: 10px;
     display: flex;
     flex-wrap: wrap;
     gap: 8px;
     background-color: rgba(25, 38, 64, 1);
 }

 .fav-card__button {
     flex-grow: 1;
     text-align: center;
     padding: 10px 12px;
     border-radius: 8px;
     text-decoration: none;
     font-size: 14px;
     font-weight: 600;
     transition: all 0.2s ease;
     border: 1px solid rgba(255, 255, 255, 1);
     background-color: transparent;
     color: white;
 }

 .fav-card__button:hover {
     background-color: transparent;
     border-color: rgba(255, 255, 255, 1);
 }

 /* Стили для второстепенных кнопок */
 .fav-card__button.fav-card__button--secondary {
     background-color: transparent;
     border: 1px solid white;
     border-radius: 10px;
 }

 .fav-card__button.fav-card__button--secondary:hover {
     background-color: transparent;
 }

 .favorite-card-wrapper {
     transition: opacity 0.5s ease, transform 0.5s ease, max-height 0.5s ease;
     overflow: hidden;
     max-height: max-content;
 }

 .fav-card__image-container img {
     width: 100%;
 }

 .favorite-card-wrapper.removing {
     opacity: 0;
     transform: scale(0.9);
     max-height: 0;
     margin-top: 0;
     margin-bottom: 0;
     padding-top: 0;
     padding-bottom: 0;
     border-width: 0;
 }

 /* =================================================================
   СТИЛИ ДЛЯ ФИЛЬТРОВ НА КАРТЕ И В ЛИЧНОМ КАБИНЕТЕ
   ================================================================= */

 .filter-section {
     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
     padding: 10px 0;
 }

 .filter-list {
     display: flex;
     flex-wrap: wrap;
     gap: 8px 10px;
     margin-bottom: 5px;
 }

 /* Обертка для каждой группы фильтров */
 .filter-group-wrapper {
     padding: 16px;
     border-radius: 12px;
     margin-bottom: 10px;
 }

 /*  Стили для ВЕРХНЕЙ секции (Организации/Группы) */
 .filter-group--organizations {
     background-color: #dde3e9;
 }

 .filter-group--organizations .filter-item {
     background-color: #f1f3f4;
     color: #3c4043;
     border: 1px solid transparent;
     border-radius: 999px;
     padding: 8px 18px;
     font-size: 14px;
     font-weight: 500;
     cursor: pointer;
     transition: all 0.2s ease-in-out;
     user-select: none;
 }

 .filter-group--organizations .filter-item:hover {
     background-color: #e8eaed;
 }

 .filter-group--organizations .filter-item.active {
     background-color: #3c4d61;
     color: #ffffff;
     border-color: #3c4d61;
 }


 /*  Стили для НИЖНЕЙ секции (Категории с иконками) */
 .filter-group--categories {
     background-color: #ffffff;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
 }

 .filter-group--categories .filter-item {
     display: flex;
     align-items: center;
     background-color: #f8f9fa;
     color: #3c4043;
     border: 1px solid #e0e0e0;
     border-radius: 8px;
     padding: 8px 14px;
     font-size: 14px;
     font-weight: 500;
     cursor: pointer;
     transition: all 0.2s ease-in-out;
     user-select: none;
 }

 /* Стили для иконок */
 .filter-group--categories .filter-item .filter-icon {
     width: 20px;
     height: 20px;
     margin-right: 8px;
 }

 .filter-group--categories .filter-item:hover {
     background-color: transparent;
     border-color: #c0c0c0;
 }

 .filter-group--categories .filter-item.active {
     background-color: #3c4d61;
     color: #ffffff;
     border-color: #3c4d61;
 }

 .swiper-slide {
     img {
         width: 100%;
         height: 100%;
         object-fit: cover;
     }
 }

 .swiper {
     height: 100%;
 }

 /* ========================================
   USER DROPDOWN MODAL STYLES
   ======================================== */

 /* Main dropdown container */
 .user-dropdown {
     position: fixed;
     background: #ffffff;
     border-radius: 12px;
     box-shadow: 0 5px 25px rgba(0, 0, 0, 0.15);
     z-index: 10000;
     min-width: 220px;
     max-width: 280px;
     opacity: 0;
     transform: translateY(-10px);
     animation: dropdownFadeIn 0.3s ease forwards;
     border: 1px solid rgba(0, 0, 0, 0.08);
     display: none;
 }

 /* Dropdown arrow (triangle pointing up) */
 .dropdown-arrow {
     position: absolute;
     top: -9px;
     right: 15px;
     width: 0;
     height: 0;
     border-left: 9px solid transparent;
     border-right: 9px solid transparent;
     border-bottom: 9px solid #ffffff;
     filter: drop-shadow(0 -2px 2px rgba(0, 0, 0, 0.05));
 }

 /* Arrow border for better visibility */
 .dropdown-arrow::before {
     content: '';
     position: absolute;
     top: -1px;
     left: -10px;
     width: 0;
     height: 0;
     border-left: 10px solid transparent;
     border-right: 10px solid transparent;
     border-bottom: 10px solid rgba(0, 0, 0, 0.08);
     z-index: -1;
 }

 /* Dropdown content wrapper */
 .dropdown-content {
     padding: 8px 0;
     background: #ffffff;
     border-radius: 12px;
     overflow: hidden;
 }

 /* Individual dropdown items */
 .dropdown-item {
     display: flex;
     align-items: center;
     padding: 12px 20px;
     color: #333333;
     text-decoration: none;
     font-size: 14px;
     font-weight: 500;
     transition: all 0.2s ease;
     cursor: pointer;
     position: relative;
     overflow: hidden;
 }

 /* Hover effect for dropdown items */
 .dropdown-item:hover {
     background-color: #f8f9fa;
     color: #000000;
     padding-left: 24px;
 }

 /* Active/pressed state */
 .dropdown-item:active {
     background-color: #e9ecef;
     transform: scale(0.98);
 }

 /* Icons in dropdown items */
 .dropdown-item i,
 .dropdown-item svg {
     width: 18px;
     height: 18px;
     margin-right: 12px;
     color: #6c757d;
     transition: all 0.2s ease;
     flex-shrink: 0;
 }

 /* Icon color on hover */
 .dropdown-item:hover i,
 .dropdown-item:hover svg {
     color: #007bff;
     transform: scale(1.1);
 }

 /* Text in dropdown items */
 .dropdown-item span {
     flex: 1;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
 }

 /* Divider between menu items */
 .dropdown-divider {
     height: 1px;
     background: linear-gradient(90deg,
             transparent 0%,
             rgba(0, 0, 0, 0.1) 20%,
             rgba(0, 0, 0, 0.1) 80%,
             transparent 100%);
     margin: 4px 16px;
 }

 /* Logout button specific styling (red accent) */
 #logout-btn {
     color: #495057;
 }

 #logout-btn:hover {
     background-color: #fff5f5;
     color: #dc3545;
 }

 #logout-btn:hover i,
 #logout-btn:hover svg {
     color: #dc3545;
 }

 /* Profile button specific styling */
 #go-to-profile:hover {
     background-color: #f0f7ff;
     color: #007bff;
 }

 /* Animation for dropdown appearance */
 @keyframes dropdownFadeIn {
     from {
         opacity: 0;
         transform: translateY(-10px);
         pointer-events: none;
     }

     to {
         opacity: 1;
         transform: translateY(0);
         pointer-events: auto;
     }
 }

 /* Animation for dropdown disappearance (add class when closing) */
 .user-dropdown.closing {
     animation: dropdownFadeOut 0.2s ease forwards;
 }

 @keyframes dropdownFadeOut {
     from {
         opacity: 1;
         transform: translateY(0);
     }

     to {
         opacity: 0;
         transform: translateY(-10px);
     }
 }

 /* ========================================
   RESPONSIVE STYLES
   ======================================== */

 /* Mobile devices */
 @media (max-width: 576px) {
     .user-dropdown {
         position: fixed;
         top: auto !important;
         bottom: 0 !important;
         left: 0 !important;
         right: 0 !important;
         border-radius: 20px 20px 0 0;
         min-width: 100%;
         max-width: 100%;
         animation: slideUp 0.3s ease forwards;
     }

     .dropdown-arrow {
         display: none;
     }

     .dropdown-content {
         padding: 20px 0 env(safe-area-inset-bottom, 20px);
     }

     .dropdown-item {
         padding: 16px 24px;
         font-size: 16px;
     }

     @keyframes slideUp {
         from {
             transform: translateY(100%);
         }

         to {
             transform: translateY(0);
         }
     }
 }

 /* Tablet devices */
 @media (min-width: 577px) and (max-width: 768px) {
     .user-dropdown {
         min-width: 240px;
     }
 }

 /* ========================================
   DARK MODE SUPPORT +- 
   ======================================== */

 @media (prefers-color-scheme: dark) {
     .user-dropdown {
         background: #2b2b2b;
         border-color: rgba(255, 255, 255, 0.1);
         box-shadow: 0 5px 25px rgba(0, 0, 0, 0.5);
     }

     .dropdown-arrow {
         border-bottom-color: #2b2b2b;
     }

     .dropdown-arrow::before {
         border-bottom-color: rgba(255, 255, 255, 0.1);
     }

     .dropdown-content {
         background: #2b2b2b;
     }

     .dropdown-item {
         color: #e0e0e0;
     }

     .dropdown-item:hover {
         background-color: #3a3a3a;
         color: #ffffff;
     }

     .dropdown-item:active {
         background-color: #404040;
     }

     .dropdown-item i,
     .dropdown-item svg {
         color: #9e9e9e;
     }

     .dropdown-item:hover i,
     .dropdown-item:hover svg {
         color: #4dabf7;
     }

     .dropdown-divider {
         background: linear-gradient(90deg,
                 transparent 0%,
                 rgba(255, 255, 255, 0.1) 20%,
                 rgba(255, 255, 255, 0.1) 80%,
                 transparent 100%);
     }

     #logout-btn:hover {
         background-color: rgba(220, 53, 69, 0.1);
     }

     #go-to-profile:hover {
         background-color: rgba(0, 123, 255, 0.1);
     }
 }

 /* ========================================
   ICON STYLES 
   ======================================== */

 .icon-user::before {
     content: '\f007';
     font-family: 'Font Awesome 5 Free';
     font-weight: 900;
 }

 .icon-logout::before {
     content: '\f2f5';
     font-family: 'Font Awesome 5 Free';
     font-weight: 900;
 }

 .dropdown-item .emoji-icon {
     font-size: 18px;
     margin-right: 12px;
     display: inline-block;
     width: 20px;
     text-align: center;
 }

 /* ========================================
   LOADING STATE 
   ======================================== */

 .dropdown-item.loading {
     pointer-events: none;
     opacity: 0.6;
 }

 .dropdown-item.loading::after {
     content: '';
     position: absolute;
     right: 20px;
     top: 50%;
     transform: translateY(-50%);
     width: 16px;
     height: 16px;
     border: 2px solid #007bff;
     border-top-color: transparent;
     border-radius: 50%;
     animation: spin 0.6s linear infinite;
 }

 @keyframes spin {
     to {
         transform: translateY(-50%) rotate(360deg);
     }
 }

 /* ========================================
   ACCESSIBILITY
   ======================================== */

 .dropdown-item:focus {
     outline: none;
     background-color: #e7f3ff;
     box-shadow: inset 0 0 0 2px #007bff;
 }

 @media (prefers-contrast: high) {
     .user-dropdown {
         border: 2px solid currentColor;
     }

     .dropdown-item:hover {
         outline: 2px solid currentColor;
     }
 }

 @media (prefers-reduced-motion: reduce) {

     .user-dropdown,
     .dropdown-item,
     .dropdown-item i,
     .dropdown-item svg {
         animation: none !important;
         transition: none !important;
     }
 }


 /* Account Deletion Modal Styles */
 .account-deletion-modal {
     position: fixed;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background: rgba(0, 0, 0, 0);
     display: flex;
     align-items: center;
     justify-content: center;
     z-index: 10000;
     opacity: 0;
     visibility: hidden;
     transition: all 0.3s ease;
 }

 .account-deletion-modal.active {
     background: rgba(0, 0, 0, 0.7);
     opacity: 1;
     visibility: visible;
 }

 .deletion-modal-content {
     background: white;
     border-radius: 12px;
     max-width: 500px;
     width: 90%;
     max-height: 90vh;
     overflow-y: auto;
     position: relative;
     transform: scale(0.9);
     transition: transform 0.3s ease;
 }

 .account-deletion-modal.active .deletion-modal-content {
     transform: scale(1);
 }

 .close-deletion-modal {
     position: absolute;
     top: 15px;
     right: 15px;
     background: none;
     border: none;
     font-size: 24px;
     cursor: pointer;
     color: #999;
     width: 30px;
     height: 30px;
     display: flex;
     align-items: center;
     justify-content: center;
     border-radius: 50%;
     transition: all 0.3s ease;
 }

 .close-deletion-modal:hover {
     background: #f0f0f0;
     color: #333;
 }

 .deletion-step {
     padding: 30px;
     display: none;
 }

 .deletion-step.active {
     display: block;
 }

 .deletion-step h2 {
     margin: 0 0 20px 0;
     color: #333;
     font-size: 24px;
 }

 .warning-box {
     background: #fff3cd;
     border: 1px solid #ffc107;
     border-radius: 8px;
     padding: 15px;
     margin-bottom: 20px;
     display: flex;
     align-items: center;
     gap: 15px;
 }

 .warning-box i {
     font-size: 24px;
     color: #ff9800;
 }

 .deletion-consequences {
     list-style: none;
     padding: 0;
     margin: 0 0 20px 0;
 }

 .deletion-consequences li {
     padding: 10px 0;
     border-bottom: 1px solid #f0f0f0;
 }

 .deletion-reason {
     margin: 20px 0;
 }

 .deletion-reason label {
     display: block;
     margin-bottom: 10px;
     font-weight: 500;
     color: #666;
 }

 .deletion-reason select,
 .deletion-reason textarea {
     width: 100%;
     padding: 10px;
     border: 1px solid #ddd;
     border-radius: 6px;
     font-size: 14px;
     margin-bottom: 10px;
 }

 .deletion-buttons {
     display: flex;
     gap: 10px;
     margin-top: 20px;
 }

 .deletion-buttons button {
     flex: 1;
     padding: 12px 20px;
     border: none;
     border-radius: 8px;
     font-size: 16px;
     font-weight: 500;
     cursor: pointer;
     transition: all 0.3s ease;
 }

 .btn-cancel {
     background: #f0f0f0;
     color: #666;
 }

 .btn-cancel:hover {
     background: #e0e0e0;
 }

 .btn-continue {
     background: #ff9800;
     color: white;
 }

 .btn-continue:hover {
     background: #f57c00;
 }

 .btn-danger {
     background: #dc3545;
     color: white;
 }

 .btn-danger:hover {
     background: #c82333;
 }

 .btn-danger:disabled {
     background: #999;
     cursor: not-allowed;
 }

 .btn-primary {
     background: #007bff;
     color: white;
 }

 .btn-primary:hover {
     background: #0056b3;
 }

 .user-email {
     font-weight: bold;
     color: #333;
     background: #f8f9fa;
     padding: 10px;
     border-radius: 6px;
     margin: 10px 0;
 }

 .verification-form {
     margin: 20px 0;
 }

 .verification-form label {
     display: block;
     margin-bottom: 10px;
     font-weight: 500;
     color: #666;
 }

 .verification-form input {
     width: 100%;
     padding: 12px;
     border: 2px solid #ddd;
     border-radius: 6px;
     font-size: 18px;
     text-align: center;
     letter-spacing: 2px;
     font-weight: bold;
 }

 .verification-form input:focus {
     outline: none;
     border-color: #dc3545;
 }

 .code-hint {
     font-size: 12px;
     color: #999;
     margin-top: 5px;
 }

 .password-section {
     margin-top: 20px;
 }

 .resend-code {
     text-align: center;
     margin-top: 15px;
 }

 .resend-code a {
     color: #007bff;
     text-decoration: none;
     font-size: 14px;
 }

 .resend-code a:hover {
     text-decoration: underline;
 }

 .success-icon {
     width: 80px;
     height: 80px;
     background: #28a745;
     color: white;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 40px;
     margin: 0 auto 20px;
 }

 .step-3 {
     text-align: center;
 }

 .step-3 p {
     color: #666;
     margin: 10px 0;
 }



 #search-suggestions {
     padding-bottom: 5px;
     padding-top: 8px;

 }

 /* ===== PREMIUM MAP LOADER С ПАДАЮЩИМИ ЧАСТИЦАМИ ===== */

 .map-loader {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: #0a0e27;
     display: flex;
     align-items: center;
     justify-content: center;
     z-index: 99999;
     opacity: 1;
     transition: opacity 0.8s ease, visibility 0.8s ease;
     font-family: 'Onest', sans-serif;
     overflow: hidden;
 }

 /* Анимированный градиентный фон */
 .map-loader::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background:
         radial-gradient(ellipse at top left, rgba(118, 167, 153, 0.15), transparent 50%),
         radial-gradient(ellipse at bottom right, rgba(212, 175, 55, 0.15), transparent 50%),
         radial-gradient(ellipse at center, rgba(53, 84, 108, 0.1), transparent 60%);
     animation: gradientShift 8s ease-in-out infinite;
     pointer-events: none;
 }

 @keyframes gradientShift {

     0%,
     100% {
         opacity: 1;
         transform: scale(1);
     }

     50% {
         opacity: 0.8;
         transform: scale(1.05);
     }
 }

 .map-loader.hiding {
     opacity: 0;
     visibility: hidden;
 }

 .map-loader.hidden {
     display: none;
 }

 /* ============================================
   ПАДАЮЩИЕ ЧАСТИЦЫ 
   ============================================ */

 .particles-container {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     overflow: hidden;
     pointer-events: none;
     z-index: 1;
 }

 /* Базовые стили для частиц */
 .particle {
     position: absolute;
     width: 4px;
     height: 4px;
     background: var(--gold);
     border-radius: 50%;
     opacity: 0;
     box-shadow: 0 0 10px currentColor;
     animation: particleFall linear infinite;
 }

 /* Золотые частицы */
 .particle.gold {
     background: var(--gold);
     box-shadow:
         0 0 10px rgba(212, 175, 55, 0.8),
         0 0 20px rgba(212, 175, 55, 0.4);
 }

 /* Зеленые частицы */
 .particle.green {
     background: var(--accent);
     box-shadow:
         0 0 10px rgba(118, 167, 153, 0.8),
         0 0 20px rgba(118, 167, 153, 0.4);
 }

 /* Белые частицы */
 .particle.white {
     background: rgba(255, 255, 255, 0.9);
     box-shadow:
         0 0 8px rgba(255, 255, 255, 0.6),
         0 0 15px rgba(255, 255, 255, 0.3);
 }

 /* Анимация падения с покачиванием */
 @keyframes particleFall {
     0% {
         opacity: 0;
         transform: translateY(-10px) translateX(0) rotate(0deg);
     }

     10% {
         opacity: 1;
     }

     90% {
         opacity: 1;
     }

     100% {
         opacity: 0;
         transform: translateY(100vh) translateX(var(--drift)) rotate(360deg);
     }
 }

 /* Генерация частиц через CSS */
 .particle:nth-child(1) {
     left: 5%;
     width: 3px;
     height: 3px;
     animation-duration: 8s;
     animation-delay: 0s;
     --drift: 20px;
 }

 .particle:nth-child(2) {
     left: 15%;
     width: 5px;
     height: 5px;
     animation-duration: 12s;
     animation-delay: 2s;
     --drift: -30px;
 }

 .particle:nth-child(3) {
     left: 25%;
     width: 4px;
     height: 4px;
     animation-duration: 10s;
     animation-delay: 4s;
     --drift: 15px;
 }

 .particle:nth-child(4) {
     left: 35%;
     width: 6px;
     height: 6px;
     animation-duration: 14s;
     animation-delay: 1s;
     --drift: -20px;
 }

 .particle:nth-child(5) {
     left: 45%;
     width: 3px;
     height: 3px;
     animation-duration: 9s;
     animation-delay: 5s;
     --drift: 25px;
 }

 .particle:nth-child(6) {
     left: 55%;
     width: 5px;
     height: 5px;
     animation-duration: 11s;
     animation-delay: 3s;
     --drift: -15px;
 }

 .particle:nth-child(7) {
     left: 65%;
     width: 4px;
     height: 4px;
     animation-duration: 13s;
     animation-delay: 6s;
     --drift: 30px;
 }

 .particle:nth-child(8) {
     left: 75%;
     width: 6px;
     height: 6px;
     animation-duration: 10s;
     animation-delay: 2s;
     --drift: -25px;
 }

 .particle:nth-child(9) {
     left: 85%;
     width: 3px;
     height: 3px;
     animation-duration: 12s;
     animation-delay: 4s;
     --drift: 20px;
 }

 .particle:nth-child(10) {
     left: 95%;
     width: 5px;
     height: 5px;
     animation-duration: 11s;
     animation-delay: 1s;
     --drift: -30px;
 }

 .particle:nth-child(11) {
     left: 10%;
     width: 4px;
     height: 4px;
     animation-duration: 9s;
     animation-delay: 3s;
     --drift: 15px;
 }

 .particle:nth-child(12) {
     left: 20%;
     width: 6px;
     height: 6px;
     animation-duration: 13s;
     animation-delay: 5s;
     --drift: -20px;
 }

 .particle:nth-child(13) {
     left: 30%;
     width: 3px;
     height: 3px;
     animation-duration: 10s;
     animation-delay: 0s;
     --drift: 25px;
 }

 .particle:nth-child(14) {
     left: 40%;
     width: 5px;
     height: 5px;
     animation-duration: 14s;
     animation-delay: 6s;
     --drift: -15px;
 }

 .particle:nth-child(15) {
     left: 50%;
     width: 4px;
     height: 4px;
     animation-duration: 8s;
     animation-delay: 2s;
     --drift: 30px;
 }

 .particle:nth-child(16) {
     left: 60%;
     width: 6px;
     height: 6px;
     animation-duration: 12s;
     animation-delay: 4s;
     --drift: -25px;
 }

 .particle:nth-child(17) {
     left: 70%;
     width: 3px;
     height: 3px;
     animation-duration: 11s;
     animation-delay: 1s;
     --drift: 20px;
 }

 .particle:nth-child(18) {
     left: 80%;
     width: 5px;
     height: 5px;
     animation-duration: 9s;
     animation-delay: 5s;
     --drift: -30px;
 }

 .particle:nth-child(19) {
     left: 90%;
     width: 4px;
     height: 4px;
     animation-duration: 13s;
     animation-delay: 3s;
     --drift: 15px;
 }

 .particle:nth-child(20) {
     left: 8%;
     width: 6px;
     height: 6px;
     animation-duration: 10s;
     animation-delay: 6s;
     --drift: -20px;
 }

 /* Дополнительные частицы для более плотного эффекта */
 .particle:nth-child(n+21):nth-child(-n+30) {
     width: 2px;
     height: 2px;
     opacity: 0.6;
 }

 .particle:nth-child(21) {
     left: 12%;
     animation-duration: 15s;
     animation-delay: 0.5s;
     --drift: 10px;
 }

 .particle:nth-child(22) {
     left: 22%;
     animation-duration: 16s;
     animation-delay: 1.5s;
     --drift: -12px;
 }

 .particle:nth-child(23) {
     left: 32%;
     animation-duration: 14s;
     animation-delay: 2.5s;
     --drift: 18px;
 }

 .particle:nth-child(24) {
     left: 42%;
     animation-duration: 17s;
     animation-delay: 3.5s;
     --drift: -15px;
 }

 .particle:nth-child(25) {
     left: 52%;
     animation-duration: 13s;
     animation-delay: 4.5s;
     --drift: 22px;
 }

 .particle:nth-child(26) {
     left: 62%;
     animation-duration: 15s;
     animation-delay: 5.5s;
     --drift: -18px;
 }

 .particle:nth-child(27) {
     left: 72%;
     animation-duration: 16s;
     animation-delay: 0.8s;
     --drift: 12px;
 }

 .particle:nth-child(28) {
     left: 82%;
     animation-duration: 14s;
     animation-delay: 1.8s;
     --drift: -20px;
 }

 .particle:nth-child(29) {
     left: 92%;
     animation-duration: 17s;
     animation-delay: 2.8s;
     --drift: 15px;
 }

 .particle:nth-child(30) {
     left: 18%;
     animation-duration: 13s;
     animation-delay: 3.8s;
     --drift: -10px;
 }

 /* ============================================
   ОСНОВНОЙ КОНТЕНТ LOADER
   ============================================ */

 .loader-content {
     text-align: center;
     position: relative;
     z-index: 2;
     max-width: 500px;
     width: 90%;
     animation: fadeInScale 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
 }

 @keyframes fadeInScale {
     0% {
         opacity: 0;
         transform: scale(0.9) translateY(20px);
     }

     100% {
         opacity: 1;
         transform: scale(1) translateY(0);
     }
 }

 /* Иконка карты с маркером */
 .map-animation {
     position: relative;
     width: 160px;
     height: 160px;
     margin: 0 auto 60px;
 }

 .route-svg {
     display: none;
 }

 /* Круглая иконка карты */
 .map-animation::before {
     content: '';
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     width: 270px;
     height: 270px;
     background-image: url('/wp-content/uploads/2026/01/map-load.png');
     background-size: contain;
     background-repeat: no-repeat;
     background-position: center;
     opacity: 0.3;
     animation: mapRotate 20s linear infinite;
 }

 @keyframes mapRotate {
     0% {
         transform: translate(-50%, -50%) rotate(0deg);
     }

     100% {
         transform: translate(-50%, -50%) rotate(360deg);
     }
 }

 /* Пульсирующие кольца */
 .map-animation::after {
     content: '';
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     width: 100%;
     height: 100%;
     border: 3px solid var(--gold);
     border-radius: 50%;
     animation: pulse 2s ease-out infinite;
 }

 @keyframes pulse {
     0% {
         transform: translate(-50%, -50%) scale(0.8);
         opacity: 1;
     }

     100% {
         transform: translate(-50%, -50%) scale(1.3);
         opacity: 0;
     }
 }

 /* Движущийся маркер */
 .moving-marker {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     font-size: 48px;
     animation: markerBounce 2s ease-in-out infinite;
     filter: drop-shadow(0 10px 20px rgba(212, 175, 55, 0.6));
     z-index: 10;
 }

 @keyframes markerBounce {

     0%,
     100% {
         transform: translate(-50%, -50%) translateY(0) scale(1);
     }

     50% {
         transform: translate(-50%, -50%) translateY(-15px) scale(1.1);
     }
 }

 .route-point {
     display: none;
 }

 /* Заголовок */
 .loader-title {
     font-size: clamp(1.8rem, 5vw, 2.8rem);
     font-weight: 700;
     margin: 0 0 15px;
     letter-spacing: -0.5px;
     line-height: 1.2;

     background: linear-gradient(90deg,
             rgba(212, 175, 55, 1) 0%,
             rgba(168, 207, 183, 1) 50%,
             rgba(255, 255, 255, 1) 100%);

     -webkit-background-clip: text;
     background-clip: text;
     color: transparent !important;
     -webkit-text-fill-color: transparent;
 }

 /* Статус */
 .loader-status {
     font-size: clamp(1rem, 3vw, 1.2rem);
     margin: 0 0 35px;
     font-weight: 400;
     background: linear-gradient(90deg,
             rgba(212, 175, 55, 1) 0%,
             rgba(168, 207, 183, 1) 50%,
             rgba(255, 255, 255, 1) 100%);
     -webkit-background-clip: text;
     background-clip: text;
     -webkit-text-fill-color: transparent;
     color: transparent;
 }

 .dots::after {
     content: '';
     animation: dots 1.5s steps(4, end) infinite;
 }

 @keyframes dots {

     0%,
     20% {
         content: '';
     }

     40% {
         content: '.';
     }

     60% {
         content: '..';
     }

     80%,
     100% {
         content: '...';
     }
 }

 /* прогресс-бар */
 .progress-container {
     width: 100%;
     max-width: 280px;
     height: 8px;
     background: linear-gradient(90deg,
             rgba(212, 175, 55, 0.2),
             rgba(168, 207, 183, 0.2),
             rgba(255, 255, 255, 0.2));
     border-radius: 100px;
     margin: 0 auto 30px;
     overflow: hidden;
     position: relative;
     box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
 }

 .progress-bar {
     height: 100%;
     background: linear-gradient(90deg,
             var(--accent) 0%,
             var(--gold) 100%);
     border-radius: 100px;
     width: 0%;
     transition: width 0.3s ease;
     position: relative;
     box-shadow: 0 0 20px rgba(212, 175, 55, 0.5);
 }

 /* Блик на прогресс-баре */
 .progress-bar::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 50%;
     background: linear-gradient(to bottom,
             rgba(255, 255, 255, 0.4),
             transparent);
     border-radius: 100px 100px 0 0;
 }


 /* Анимация движения по прогресс-бару */
 .progress-bar::after {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     bottom: 0;
     width: 100px;
     background: linear-gradient(90deg,
             transparent,
             rgba(212, 175, 55, 0.6),
             rgba(168, 207, 183, 0.4),
             transparent);
     animation: shimmer 2s infinite;
 }

 @keyframes shimmer {
     0% {
         transform: translateX(-100px);
     }

     100% {
         transform: translateX(400px);
     }
 }

 /* Детали загрузки */
 .loader-details {
     font-size: clamp(0.95rem, 2.5vw, 1.1rem);
     color: rgba(255, 255, 255, 0.6);
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 10px;
 }

 .loader-icon {
     font-size: 1.3rem;
     color: var(--gold);
     animation: spin 3s linear infinite;
 }

 @keyframes spin {
     0% {
         transform: rotate(0deg);
     }

     100% {
         transform: rotate(360deg);
     }
 }

 .loader-count {
     font-weight: 600;
     color: var(--gold);
 }

 /* ============================================
   АДАПТИВНОСТЬ
   ============================================ */

 @media (max-width: 768px) {
     .loader-content {
         width: 85%;
     }

     .map-animation {
         width: 120px;
         height: 120px;
         margin-bottom: 35px;
     }

     .map-animation::before {
         font-size: 60px;
     }

     .moving-marker {
         font-size: 40px;
     }

     .loader-title {
         margin-bottom: 12px;
     }

     .loader-status {
         margin-bottom: 30px;
     }

     .progress-container {
         max-width: 240px;
         height: 6px;
         margin-bottom: 25px;
     }

     .particle:nth-child(n+16) {
         display: none;
     }
 }

 @media (max-width: 480px) {
     .loader-content {
         width: 90%;
     }

     .map-animation {
         width: 100px;
         height: 100px;
         margin-bottom: 30px;
     }

     .map-animation::before {
         font-size: 50px;
     }

     .moving-marker {
         font-size: 36px;
     }

     .loader-title {
         font-size: 1.6rem;
     }

     .loader-status {
         font-size: 1rem;
         margin-bottom: 25px;
     }

     .progress-container {
         max-width: 200px;
         margin-bottom: 20px;
     }

     .loader-details {
         font-size: 0.9rem;
     }

     .particle:nth-child(n+11) {
         display: none;
     }
 }

 /* Для устройств с уменьшенной анимацией */
 @media (prefers-reduced-motion: reduce) {

     .map-loader::before,
     .map-animation::before,
     .map-animation::after,
     .moving-marker,
     .loader-icon,
     .progress-bar::after,
     .particle {
         animation: none !important;
     }

     .particle {
         display: none;
     }
 }

 /* Ландшафтная ориентация */
 @media (max-height: 600px) and (orientation: landscape) {
     .map-animation {
         width: 80px;
         height: 80px;
         margin-bottom: 20px;
     }

     .map-animation::before {
         font-size: 40px;
     }

     .moving-marker {
         font-size: 30px;
     }

     .loader-title {
         font-size: 1.5rem;
         margin-bottom: 10px;
     }

     .loader-status {
         font-size: 0.95rem;
         margin-bottom: 20px;
     }

     .progress-container {
         margin-bottom: 15px;
     }

     .particle:nth-child(n+16) {
         display: none;
     }
 }

 /* ---------------------------------------------------------------- */
 #filtersection-filter-categories {
     background-color: rgba(255, 255, 255, 0.2);
     backdrop-filter: blur(200px);
     -webkit-backdrop-filter: blur(200px);
     padding: 15px 5px 15px 5px;
 }

 .filter-list {
     display: flex;
     flex-wrap: wrap;
     gap: 8px;
     opacity: 90%;
 }

 .filter-item {
     display: flex;
     align-items: center;
     gap: 5px;
     padding: 7px 18px;
     border: 1px solid #d1d5db;
     border-radius: 20px;
     cursor: pointer;
     transition: all 0.2s ease-in-out;
     font-size: 14px;
     background-color: #f9fafb;
     color: #ffffff;
     user-select: none;
 }

 .filter-item.active {
     background-color: #35546C;
     color: white;
     border-color: #35546C;
     font-weight: 500;
 }

 #filtersection-filter-sections {
     background-color: rgba(0, 0, 0, 0.1);
     backdrop-filter: blur(200px);
     -webkit-backdrop-filter: blur(200px);
     padding: 15px 5px 15px 5px;
 }

 .button-filter button {
     display: flex;
     flex-direction: row;
     justify-content: space-between;
     align-items: center;
 }

 .filter-section button {
     margin-right: 10px;
     padding: 8px 16px;
     border: none;
     border-radius: 5px;
     cursor: pointer;
     font-weight: 400;
     color: rgba(255, 255, 255, 1);
     background: transparent;
 }

 .button-filter {
     display: flex;
 }

 .button-filter {
     width: max-content;
     box-sizing: border-box;
     background-color: rgba(53, 84, 108, 0.2);
     backdrop-filter: blur(200px);
     -webkit-backdrop-filter: blur(200px);
     opacity: 0.9;
     padding: 5px 0 5px 0;
     border-radius: 0 0 8px 8px;
 }

 .relevanssi-live-search-results {
     top: 110px !important;
     left: 0px !important;
 }

 #filtersection-filter-organizations {
     background-color: rgba(53, 84, 108, 0.5);
     backdrop-filter: blur(200px);
     -webkit-backdrop-filter: blur(200px);
     padding: 15px 5px 15px 5px;
     border-radius: 8px 8px 0 0;
 }

 #filtersection-filter-tags {
     background-color: rgba(107, 114, 128, 0.5);
     backdrop-filter: blur(200px);
     -webkit-backdrop-filter: blur(200px);
     padding: 15px 5px 15px 5px;
     border-radius: 0 0 8px 8px;
 }


 /* Responsive */
 @media (max-width: 480px) {
     .deletion-modal-content {
         width: 95%;
         margin: 10px;
     }

     .deletion-step {
         padding: 20px;
     }

     .deletion-buttons {
         flex-direction: column;
     }
 }