/* =============================================
   Online Ustaz — публичная карта /map/
   Все правила под .ou-map. Токены — как у .ou-pages
   (local/pages/styles.css), плюс цвета самой карты.
   ============================================= */

.ou-map {
    --m-text: #111827;
    --m-text-sec: #374151;
    --m-dim: #6b7280;
    --m-border: rgba(17, 24, 39, 0.08);
    --m-surface: #ffffff;
    --m-blue: #2563eb;
    --m-blue-hover: #1d4ed8;
    --m-blue-soft: #eff6ff;
    --m-map-bg: #f4f6fa;
    --m-region-stroke: #ffffff;
    --m-region-fill: 37, 99, 235;
    --m-pin: #2563eb;
    --m-pin-ring: #ffffff;
    --m-shadow: 0 1px 2px rgba(17, 24, 39, 0.06), 0 8px 24px -12px rgba(17, 24, 39, 0.18);
    --m-live: #16a34a;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 16px 64px;
    color: var(--m-text);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

body.theme-dark .ou-map {
    --m-text: #f3f4f6;
    --m-text-sec: #d1d5db;
    --m-dim: #9ca3af;
    --m-border: rgba(255, 255, 255, 0.1);
    --m-surface: #1e2530;
    --m-blue: #60a5fa;
    --m-blue-hover: #93c5fd;
    --m-blue-soft: rgba(37, 99, 235, 0.14);
    --m-map-bg: #121a27;
    --m-region-stroke: #0f1419;
    --m-region-fill: 96, 165, 250;
    --m-pin: #3b82f6;
    --m-pin-ring: #0f1419;
    --m-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px -12px rgba(0, 0, 0, 0.5);
    --m-live: #4ade80;
}

/* Frontpage-макет резервирует 80px вокруг пустых блок-регионов — на этой странице их нет. */
body.ou-map-page #fpblocktop .block-region,
body.ou-map-page #fpblockbottom .block-region { margin: 0; }
body.ou-map-page #fpmaincontent.rui-fp-margin-bottom { margin-bottom: 0; }

/* --- Шапка --- */
.ou-map__head {
    padding: 40px 0 8px;
    max-width: 760px;
}

.ou-map__eyebrow {
    margin: 0 0 12px;
    font-size: 13px;
    font-weight: 600;
    color: var(--m-blue);
}

.ou-map__title {
    margin: 0;
    font-size: 36px;
    line-height: 1.15;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--m-text);
}

.ou-map__title-num {
    color: var(--m-blue);
    font-variant-numeric: tabular-nums;
}

.ou-map__lead {
    margin: 12px 0 0;
    font-size: 16px;
    color: var(--m-text-sec);
    max-width: 620px;
}

.ou-map__stats {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 40px;
    margin: 28px 0 0;
    padding: 0;
}

.ou-map__stat {
    position: relative;
    display: flex;
    flex-direction: column-reverse;
    gap: 4px;
    margin: 0;
}

.ou-map__stat + .ou-map__stat::before {
    content: '';
    position: absolute;
    left: -20px;
    top: 6px;
    bottom: 6px;
    width: 1px;
    background: var(--m-border);
}

.ou-map__stat dd {
    margin: 0;
    font-size: 26px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.ou-map__stat dt {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 400;
    color: var(--m-dim);
    white-space: nowrap;
}

.ou-map__live {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--m-live);
    box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.5);
    animation: ou-map-live 2s ease-out infinite;
}

/* --- Карта --- */
.ou-map__card {
    position: relative;
    margin-top: 32px;
    border: 1px solid var(--m-border);
    border-radius: 20px;
    background: var(--m-map-bg);
    overflow: hidden;
    box-shadow: var(--m-shadow);
}

.ou-map__canvas {
    height: clamp(360px, 60vh, 640px);
    width: 100%;
    background: var(--m-map-bg);
    outline: none;
    cursor: grab;
}

.ou-map__canvas:active { cursor: grabbing; }

.ou-map__canvas .leaflet-container { background: transparent; font: inherit; }
.ou-map__canvas .leaflet-interactive:focus { outline: none; }

/* Кнопки зума — свои, Leaflet-овские отключены. */
.ou-map__controls {
    position: absolute;
    top: 16px;
    right: 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    z-index: 800;
}

.ou-map__ctl {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    border: 1px solid var(--m-border);
    background: var(--m-surface);
    color: var(--m-text);
    box-shadow: var(--m-shadow);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    transition: background-color 150ms ease, color 150ms ease, transform 150ms ease;
}

.ou-map__ctl svg { width: 18px; height: 18px; }

@media (hover: hover) {
    .ou-map__ctl:hover { background: var(--m-blue-soft); color: var(--m-blue); }
}

.ou-map__ctl:active { transform: scale(0.96); }
.ou-map__ctl:focus-visible { outline: 2px solid var(--m-blue); outline-offset: 2px; }

.ou-map__legend {
    position: absolute;
    left: 16px;
    bottom: 16px;
    z-index: 800;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 12px;
    border: 1px solid var(--m-border);
    background: var(--m-surface);
    box-shadow: var(--m-shadow);
    font-size: 12px;
    color: var(--m-dim);
}

.ou-map__legend-dots { display: inline-flex; align-items: center; gap: 4px; }
.ou-map__legend-dots i {
    display: inline-block;
    border-radius: 999px;
    background: var(--m-pin);
    border: 2px solid var(--m-pin-ring);
    box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.25);
}
.ou-map__legend-dots i:nth-child(1) { width: 10px; height: 10px; }
.ou-map__legend-dots i:nth-child(2) { width: 16px; height: 16px; }
.ou-map__legend-dots i:nth-child(3) { width: 22px; height: 22px; }

.ou-map__attr {
    position: absolute;
    right: 12px;
    bottom: 8px;
    z-index: 800;
    margin: 0;
    font-size: 11px;
    color: var(--m-dim);
    opacity: 0.8;
    pointer-events: none;
}

.ou-map__empty {
    position: absolute;
    inset: 0;
    z-index: 700;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-align: center;
    padding: 24px;
    color: var(--m-dim);
    pointer-events: none;
}

.ou-map__empty strong { color: var(--m-text); font-size: 18px; }

/* Пины — divIcon, размер через --s (px), число внутри. */
.ou-map__pin-wrap { background: transparent; border: 0; }

.ou-map__pin {
    --s: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--s);
    height: var(--s);
    border-radius: 999px;
    background: var(--m-pin);
    border: 2px solid var(--m-pin-ring);
    box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.2), 0 6px 16px -6px rgba(37, 99, 235, 0.55);
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    transition: transform 150ms ease, box-shadow 150ms ease;
    will-change: transform;
}

.ou-map__pin--lg { font-size: 12px; }
.ou-map__pin--xl { font-size: 13px; }

/* Телефон: кружки 18–36px, кольцо и тень тоньше, чтобы не спорили с картой. */
.ou-map__pin--sm {
    font-size: 9.5px;
    letter-spacing: -0.02em;
    border-width: 1.5px;
    box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.18), 0 3px 8px -3px rgba(37, 99, 235, 0.5);
}

.ou-map__pin--sm.ou-map__pin--lg { font-size: 10.5px; }
.ou-map__pin--sm.ou-map__pin--cluster { box-shadow: 0 0 0 3px rgba(var(--m-region-fill), 0.14), 0 3px 8px -3px rgba(37, 99, 235, 0.4); }

.ou-map__pin--cluster {
    background: var(--m-surface);
    color: var(--m-blue);
    border-color: var(--m-blue);
    box-shadow: 0 0 0 4px rgba(var(--m-region-fill), 0.16), 0 6px 16px -6px rgba(37, 99, 235, 0.4);
}

@media (hover: hover) {
    .leaflet-marker-icon:hover .ou-map__pin { transform: scale(1.08); }
}

.leaflet-marker-icon:focus-visible .ou-map__pin { outline: 2px solid var(--m-blue); outline-offset: 3px; }

/* Тултип */
.ou-map__tip.leaflet-tooltip {
    padding: 8px 12px;
    border: 1px solid var(--m-border);
    border-radius: 10px;
    background: var(--m-surface);
    color: var(--m-text);
    box-shadow: var(--m-shadow);
    font-size: 13px;
    line-height: 1.35;
    white-space: nowrap;
}

.ou-map__tip.leaflet-tooltip::before { display: none; }
.ou-map__tip b { display: block; font-weight: 600; }
.ou-map__tip span { color: var(--m-dim); }
.ou-map__tip em { color: var(--m-dim); font-style: normal; font-size: 12px; }

/* --- Приватность --- */
.ou-map__privacy {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 16px 0 0;
    padding: 14px 16px;
    border-radius: 12px;
    background: var(--m-blue-soft);
    color: var(--m-text-sec);
    font-size: 14px;
    line-height: 1.5;
}

.ou-map__privacy svg { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 2px; color: var(--m-blue); }

/* --- Списки --- */
.ou-map__lists {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    margin-top: 40px;
}

.ou-map__list h2 {
    margin: 0 0 12px;
    font-size: 18px;
    font-weight: 600;
    color: var(--m-text);
}

.ou-map__rows {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ou-map__row.is-extra { display: none; }
.ou-map__rows.is-open .ou-map__row.is-extra { display: block; }

.ou-map__rowbtn {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    min-height: 44px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--m-text);
    text-align: left;
    font: inherit;
    cursor: pointer;
    transition: background-color 150ms ease;
}

@media (hover: hover) {
    .ou-map__rowbtn:hover { background: var(--m-blue-soft); }
}

.ou-map__rowbtn:focus-visible { outline: 2px solid var(--m-blue); outline-offset: -2px; }
.ou-map__rowbtn.is-active { background: var(--m-blue-soft); }

.ou-map__rowname {
    display: flex;
    flex-direction: column;
    min-width: 0;
    font-size: 14px;
    line-height: 1.3;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ou-map__rowname small { font-size: 12px; font-weight: 400; color: var(--m-dim); overflow: hidden; text-overflow: ellipsis; }

.ou-map__rowbar {
    height: 6px;
    border-radius: 999px;
    background: rgba(var(--m-region-fill), 0.12);
    overflow: hidden;
}

.ou-map__rowbar i {
    display: block;
    height: 100%;
    min-width: 2px;
    border-radius: inherit;
    background: var(--m-pin);
    transition: width 400ms ease;
}

.ou-map__rowcount {
    font-size: 14px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    min-width: 3ch;
    text-align: right;
}

.ou-map__more {
    margin-top: 8px;
    padding: 10px 12px;
    min-height: 44px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--m-blue);
    font: inherit;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
}

@media (hover: hover) {
    .ou-map__more:hover { background: var(--m-blue-soft); }
}

.ou-map__more:focus-visible { outline: 2px solid var(--m-blue); outline-offset: 2px; }

.ou-map__muted { margin: 12px 12px 0; font-size: 13px; color: var(--m-dim); }

/* --- Низ --- */
.ou-map__foot {
    margin-top: 40px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ou-map__cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
    padding: 16px 20px;
    min-height: 44px;
    border: 1px solid var(--m-border);
    border-radius: 14px;
    background: var(--m-surface);
    color: var(--m-text);
    text-decoration: none;
    box-shadow: var(--m-shadow);
    transition: border-color 150ms ease;
}

.ou-map__cta span { font-size: 15px; }
.ou-map__cta b { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--m-blue); white-space: nowrap; }
.ou-map__cta b svg { width: 16px; height: 16px; transition: transform 150ms ease; }

@media (hover: hover) {
    .ou-map__cta:hover { border-color: var(--m-blue); color: var(--m-text); text-decoration: none; }
    .ou-map__cta:hover b svg { transform: translateX(3px); }
}

.ou-map__cta:focus-visible { outline: 2px solid var(--m-blue); outline-offset: 2px; }

.ou-map__updated { margin: 0; font-size: 12px; color: var(--m-dim); }

@keyframes ou-map-live {
    0% { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.5); }
    70% { box-shadow: 0 0 0 6px rgba(22, 163, 74, 0); }
    100% { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0); }
}

/* --- Адаптив --- */
@media (min-width: 768px) {
    .ou-map__lists { grid-template-columns: 1fr 1fr; gap: 32px; }
    .ou-map__head { padding-top: 56px; }
}

@media (min-width: 1024px) {
    .ou-map__title { font-size: 44px; }
    .ou-map__stat dd { font-size: 30px; }
    .ou-map__canvas { height: clamp(480px, 62vh, 680px); }
}

@media (max-width: 767.98px) {
    .ou-map__head { padding-top: 24px; }
    .ou-map__title { font-size: 28px; }
    .ou-map__lead { font-size: 15px; }
    .ou-map__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 24px; }
    .ou-map__stat + .ou-map__stat::before { display: none; }
    .ou-map__stat:nth-child(even)::before { display: block; left: -12px; }
    .ou-map__stat dd { font-size: 24px; }
    .ou-map__card { margin-top: 24px; border-radius: 16px; }
    .ou-map__controls { top: 12px; right: 12px; }
    .ou-map__ctl { width: 44px; height: 44px; }
    .ou-map__legend { left: 12px; bottom: 12px; padding: 6px 10px; }
    .ou-map__legend span:last-child { display: none; }
    .ou-map__attr { right: 10px; bottom: 6px; font-size: 10px; }
    .ou-map__rowbtn { grid-template-columns: minmax(0, 1fr) 72px auto; gap: 10px; }
}

/* Телефон: карта по пропорциям страны (широкая и низкая), без пустых полей сверху и снизу. */
@media (max-width: 639.98px) {
    .ou-map__canvas { height: 320px; }
    .ou-map__legend { padding: 6px 8px; }
    .ou-map__legend-dots i:nth-child(1) { width: 8px; height: 8px; }
    .ou-map__legend-dots i:nth-child(2) { width: 13px; height: 13px; }
    .ou-map__legend-dots i:nth-child(3) { width: 18px; height: 18px; }
}

@media (prefers-reduced-motion: reduce) {
    .ou-map__live, .ou-map__pin, .ou-map__rowbar i, .ou-map__cta b svg { animation: none; transition: none; }
}