/* =============================================================
   kz-filial-map.css  v1.0.5
   Карта филиалов КазВодХоз

   Цвета:
     Заливка областей: #1396EE (сплошная)
     Hover область:    #2D53A4
     Active область:   #2F4090
     Кнопка:           #2F4090
     Цифры:            #2D53A4
     map_text:         #2B2A29
   ============================================================= */

/* ── переменные ──────────────────────────────────────────────── */
.kvh-map-wrap {
    --kvh-fill      : #b6d4d9;
    --kvh-hover     : #00bed8;
    --kvh-active    : #00bed8;
    --kvh-active-dk : #002B32;
    --kvh-num-color : #00BEDB;
    --kvh-maptext   : #2B2A29;
    --kvh-navy      : #002B32;
    --kvh-text      : #002B32;
    --kvh-muted     : #666;
    --kvh-hover-bg  : transparent;
    --kvh-active-bg : transparent;
    --kvh-border    : #ccc;

    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
                 'Helvetica Neue', Arial, sans-serif;
    width: 100%;
}

/* ════════════════════════════════════════════════════════════════
   СЕТКА  20% панель | 80% карта
════════════════════════════════════════════════════════════════ */
.kvh-map-wrap {
    display: grid;
    grid-template-areas:
        "panel   map"
        "filials filials";
    grid-template-columns: 30% 70%;
    grid-template-rows: auto auto;
    border-top: 1px solid #ccc;
}

.kvh-mobile-select-wrap {
    display: none;
    grid-area: select;
    padding: 15px;
}

/* ════════════════════════════════════════════════════════════════
   ИНФОРМАЦИОННАЯ ПАНЕЛЬ (левая)
════════════════════════════════════════════════════════════════ */
.kvh-panel {
    grid-area: panel;
    padding: 36px 24px 36px 5%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 440px;
    margin-left: auto;
}

/* блок одного филиала внутри панели */
.kvh-filial-block {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* разделитель между филиалами */
.kvh-panel-divider {
    height: 30px;
}

.kvh-panel-data {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.kvh-panel-data.kvh-panel-animate {
    animation: kvhFadeIn 0.3s ease;
}

.kvh-panel-data.kvh-panel-animate.kvh-panel-multi {
    padding-top: 40px;
}

/* уплотнение при нескольких филиалах */
.kvh-panel-multi .kvh-filial-block {
    gap: 2px;
}

.kvh-panel-multi .kvh-panel-title {
    font-size: 18px;
    margin-bottom: 0;
}

.kvh-panel-multi .kvh-panel-maptext {
    margin-bottom: 4px;
}

.kvh-panel-multi .kvh-stats {
    gap: 0;
    margin-bottom: 8px;
}

.kvh-panel-multi .kvh-stat-num {
    font-size: 22px;
    min-width: 56px;
}

.kvh-panel-multi .kvh-stat-lbl {
    font-size: 13px;
}

.kvh-panel-multi .kvh-stat-sep {
    font-size: 14px;
}

.kvh-panel-multi .kvh-btn-details {
    padding: 5px 18px;
    font-size: 11px;
    margin-top: 2px;
}

.kvh-panel-multi .kvh-panel-divider {
    height: 16px;
}

@keyframes kvhFadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0);    }
}

.kvh-panel-title {
    font-size: 22px;
    font-weight: 400;
    color: #00A4BD;
    line-height: 1.25;
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.kvh-panel-maptext {
    font-size: 13px;
    color: var(--kvh-maptext);
    line-height: 1.6;
    margin-bottom: 10px;
}

/* ── статистика ──────────────────────────────────────────────── */
.kvh-stats {
    display: flex;
    flex-direction: column;
    gap: 1px;
    margin-bottom: 0;
}

.kvh-stat-row {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.kvh-stat-num {
    font-size: 30px;
    font-weight: 700;
    color: var(--kvh-num-color);
    min-width: 72px;
    text-align: right;
    line-height: 1.1;
    letter-spacing: -0.5px;
}

.kvh-stat-sep {
    font-size: 18px;
    color: #aaa;
    font-weight: 300;
    flex-shrink: 0;
}

.kvh-stat-lbl {
    font-size: 15px;
    color: #002B32;
    font-weight: 400;
}

/* ── кнопка ПОДРОБНЕЕ ────────────────────────────────────────── */
.kvh-btn-details {
    display: inline-block;
    background: #00bed8;
    color: #fff;
    text-decoration: none;
    padding: 8px 30px;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    align-self: flex-start;
    transition: background 0.22s ease, transform 0.18s ease;
    margin-top: 4px;
}

.kvh-btn-details:hover {
    background: #002B32;
    color: #fff;
    transform: translateY(-2px);
}

.kvh-btn-details:active {
    transform: translateY(0);
}

/* ════════════════════════════════════════════════════════════════
   КАРТА (правая)
════════════════════════════════════════════════════════════════ */
.kvh-map-right {
    grid-area: map;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

#kvh-map-svg-container {
    width: 100%;
}

#kvh-map-svg-container svg {
    width: 100%;
    height: auto;
    max-height: 550px;
    display: block;
}

#kvh-map-svg-container #features path,
#kvh-map-svg-container #features circle {
    fill: var(--kvh-fill);
    stroke: #fff;
    stroke-width: 1.2;
    cursor: pointer;
    transition: fill 0.2s ease;
}

#kvh-map-svg-container #features path:hover,
#kvh-map-svg-container #features circle:hover,
#kvh-map-svg-container #features path.kvh-region-hover,
#kvh-map-svg-container #features circle.kvh-region-hover {
    fill: var(--kvh-hover) !important;
}

#kvh-map-svg-container #features path.kvh-region-active,
#kvh-map-svg-container #features circle.kvh-region-active {
    fill: var(--kvh-active) !important;
    stroke: #fff;
    stroke-width: 2;
}

#kvh-map-svg-container text {
    fill: #002b32;
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    pointer-events: all;
    user-select: none;
    text-anchor: middle;
    paint-order: normal;
    text-shadow: none;
    stroke: none;
    filter: none;
}

#kvh-map-svg-container text.kvh-label-active {
    font-weight: 700;
}

/* ════════════════════════════════════════════════════════════════
   МОБИЛЬНЫЙ SELECT
════════════════════════════════════════════════════════════════ */
.kvh-mobile-select {
    width: 100%;
    font-size: 16px;
    color: var(--kvh-text);
    background: #fff;
    border: 2px solid var(--kvh-fill);
    border-radius: 10px;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%231B3A6C'><path d='M7 10l5 5 5-5z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 26px;
    transition: border-color 0.2s ease;
}

.kvh-mobile-select:focus {
    outline: none;
    border-color: var(--kvh-active);
    box-shadow: 0 0 0 3px rgba(47, 64, 144, 0.12);
}

/* ════════════════════════════════════════════════════════════════
   НИЖНИЙ СПИСОК
════════════════════════════════════════════════════════════════ */
.kvh-filials-list {
    grid-area: filials;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2px 12px;
    padding: 16px 24px 24px 5%;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
}

.kvh-filial-item {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 4px 6px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.18s ease;
}

.kvh-filial-item:hover,
.kvh-filial-item.kvh-item-hover {
    background: transparent;
}

.kvh-filial-item.kvh-item-active {
    background: transparent;
}

/* точка вместо иконки-стрелки */
.kvh-filial-icon {
    display: none;
}

.kvh-filial-item::before {
    content: '•';
    color: #00BEDB;
    font-size: 18px;
    line-height: 1;
    flex-shrink: 0;
}

.kvh-filial-name {
    font-size: 16px;
    color: #002B32;
    line-height: 1.35;
    transition: color 0.18s ease;
}

.kvh-filial-item:hover .kvh-filial-name,
.kvh-filial-item.kvh-item-hover  .kvh-filial-name {
    color: #00A4BD;
}

.kvh-filial-item.kvh-item-active .kvh-filial-name {
    color: #00A4BD;
    font-weight: 400;
}

/* ════════════════════════════════════════════════════════════════
   АДАПТИВНОСТЬ
════════════════════════════════════════════════════════════════ */
@media (max-width: 1280px) {
    .kvh-map-wrap       { grid-template-columns: 30% 70%; }
    .kvh-filials-list   { grid-template-columns: repeat(3, 1fr); }
    .kvh-stat-num       { font-size: 26px; min-width: 64px; }
    .kvh-panel-title    { font-size: 20px; }
}

@media (max-width: 1024px) {
    .kvh-map-wrap       { grid-template-columns: 30% 70%; }
    .kvh-filials-list   { grid-template-columns: repeat(3, 1fr); padding: 16px 20px; }
    .kvh-panel          { padding: 28px 20px; }
    .kvh-stat-num       { font-size: 24px; }
}

@media (max-width: 768px) {
    .kvh-map-wrap {
        grid-template-areas: "select" "map" "panel";
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
    }

    .kvh-mobile-select-wrap { display: block; }
    .kvh-filials-list       { display: none; }

    .kvh-panel {
        min-height: auto;
        padding: 18px 16px 24px;
        align-items: center;
        text-align: center;
    }

    .kvh-panel-data   { align-items: center; }
    .kvh-panel-title  { font-size: 18px; }
    .kvh-stats        { align-items: flex-start; max-width: 240px; }
    .kvh-stat-num     { font-size: 22px; min-width: 56px; }
    .kvh-stat-lbl     { font-size: 13px; }
    .kvh-btn-details  { align-self: center; }
    .kvh-map-right    { padding: 0; }

    #kvh-map-svg-container text { font-size: 9px; }
}

@media (max-width: 480px) {
    .kvh-stat-num    { font-size: 20px; min-width: 50px; }
    .kvh-panel-title { font-size: 16px; }
    #kvh-map-svg-container text { font-size: 8px; }
}