/* ===== КАРТА РОССИИ ===== */
.rf-map, .rf-map * { box-sizing: border-box; }
.rf-map { position: relative; max-width: 1540px; margin: 0 auto; padding: 20px; }
.rf-map .district b { position: absolute; z-index: 5; width: 18px; height: 18px; background: var(--primary-red); border-radius: 50%; left: 6px; top: 18px; transition: all 0.3s; }
.rf-map .district span { position: absolute; z-index: 5; top: 20px; left: 30px; font-size: 13px; font-weight: bold; font-family: 'Inter', sans-serif; line-height: 1; color: var(--primary-red); }
.rf-map .district { display: none; position: absolute; top: 0; left: 0;  background: rgba(0,0,0,0.0); border-radius: var(--border-radius); z-index: 10; }
.rf-map.open .district b { top: 0; left: 0; border-radius: 0; width: 100%; height: 100%; box-shadow: 0 4px 12px rgba(0,0,0,0.2), 0 16px 20px rgba(0,0,0,0.2); background: rgba(0,0,0,0.9); }
.rf-map.open .district span { color: #FFF; }
.rf-map svg { width: 100%; height: auto; filter: drop-shadow(0 5px 12px rgba(0, 0, 0, 0.2)); }
.rf-map path { stroke: var(--secondary-blue-light); stroke-width: 1; stroke-linejoin: round; transition: fill 0.2s; cursor: pointer; }
.rf-map [data-code] { fill: var(--blue-bg); transition: fill 0.2s; }
.rf-map [data-code]:hover { fill: var(--secondary-blue-light); }
.rf-map .district-text { display: none; position: absolute; z-index: 11; left: 20px; top: 80px;  padding: 0 20px; overflow: auto; color: #FFF; font-size: 14px; font-family: 'Inter', sans-serif; }
.rf-map .close-district { opacity: 0; z-index: 12; position: absolute; top: 10px; right: 10px; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; line-height: 1; font-size: 40px; color: #fff; cursor: pointer; transition: opacity 0.3s; pointer-events: none; }
.rf-map.open .close-district { opacity: 1; pointer-events: auto; }
.rf-map .district-links { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.rf-map .district-links div { font-size: 1.1rem; font-family: 'Inter', sans-serif; padding: 4px 12px; background: var(--gray-bg); border-radius: 20px; cursor: pointer; transition: all 0.2s; }
.rf-map .district-links div:hover { background: var(--primary-red); color: var(--white); }
.dropfill { fill: var(--secondary-blue-light) !important; }
.mainfill { fill: var(--primary-red) !important; }

@media (min-width: 768px) {
    .rf-map .district b { width: 28px; height: 28px; left: 6px; top: 28px; }
    .rf-map .district span { top: 30px; left: 46px; font-size: 20px; }
    .rf-map .district-text { left: 30px; top: 80px; width: calc(100% - 60px); height: calc(100% - 130px); font-size: 16px; }
    .rf-map .close-district { width: 60px; height: 60px; font-size: 60px; }
}


.district { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.0); border-radius: var(--border-radius); z-index: 10; display: none; pointer-events: none; }

.district b { position: absolute; z-index: 5; width: 28px; height: 28px; background: var(--primary-red); border-radius: 50%; left: 6px; top: 28px; transition: all 0.3s; pointer-events: none; }

.district span { position: absolute; z-index: 5; top: 30px; left: 46px; font-size: 20px; font-weight: bold; font-family: 'Inter', sans-serif; line-height: 1; color: var(--white); pointer-events: none; }


/* Красные регионы (постоянно) */
.rf-map [data-code="RU-MOW"], .rf-map [data-code="RU-MOS"],
.rf-map [data-code="RU-SPE"], .rf-map [data-code="RU-LEN"],
.rf-map [data-code="RU-NVS"] {
    fill: var(--primary-red);
}

/* Ховер для всех регионов */
.rf-map [data-code]:hover { fill: var(--secondary-blue-light); }

/* Ховер для красных регионов — темнеют, а не синеют */
.rf-map [data-code="RU-MOW"]:hover,
.rf-map [data-code="RU-MOS"]:hover,
.rf-map [data-code="RU-SPE"]:hover,
.rf-map [data-code="RU-LEN"]:hover,
.rf-map [data-code="RU-NVS"]:hover {
    fill: var(--red-dark) !important;
}

/* Выбранный регион (через JS) */
.rf-map [data-code].mainfill { fill: var(--red-dark) !important; }

/* Остальные стили */
.dropfill { fill: var(--secondary-blue-light) !important; }

.region-info {
    background: var(--white);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    border-left: 4px solid var(--primary-red);
    overflow: hidden;
    max-width: 600px;
    margin: 30px auto 0 auto;
}

.region-info-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    background: var(--gray-bg);
    border-bottom: 1px solid var(--gray-border);
}

.region-info-title {
    font-family: 'Unbounded', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--secondary-blue);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.close-region-info {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--text-light);
    transition: color 0.2s;
}

.close-region-info:hover {
    color: var(--primary-red);
}

.region-info-content {
    padding: 20px;
    
}

.region-info-content h4 {
    font-family: 'Unbounded', sans-serif;
    font-size: 1.1rem;
    margin-bottom: 12px;
    color: var(--primary-red);
}

.region-info-content p {
    margin-bottom: 8px;
    color: var(--text-dark);
}

.region-info-content strong {
    color: var(--primary-red);
}