/* Kostroma coverage map — layout & interaction (based on aksioma-kos.ru) */

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    color: #3d3d3d;
    background: #f0f0f0;
}

.page {
    max-width: 920px;
    margin: 0 auto;
    padding: 2rem 1rem 4rem;
}

.center {
    text-align: center;
}

.map-centered {
    margin-left: auto;
    margin-right: auto;
}

.uppercase {
    text-transform: uppercase;
}

.bold {
    font-weight: bold;
}

#map {
    background-color: rgba(255, 255, 255, 0.5);
    padding: 1rem 0 3rem;
}

.map-section {
    max-width: 820px;
    margin: 0 auto;
    overflow-x: auto;
}

.map-title {
    font-size: 30px;
    color: #3d3d3d;
    font-weight: bold;
    margin-top: 50px;
    margin-bottom: 0.25rem;
}

.map-subtitle {
    font-size: 18px;
    color: #3d3d3d;
    margin-top: 0;
    margin-bottom: 1.5rem;
}

.grow {
    transition-duration: 0.3s;
    transition-property: transform;
    transform: translateZ(0);
    display: block;
    transform-origin: center center;
}

.grow.map-element:hover {
    transform: scale(1.015);
    white-space: normal;
}

.scaleMap {
    transform: scale(1.015);
    white-space: normal;
}

.towns,
.join {
    top: 0;
    right: 0;
    position: absolute;
    padding: 12px;
    background-color: rgba(255, 255, 255, 0.92);
    display: none;
    max-width: 420px;
    max-height: 100%;
    overflow-y: auto;
    z-index: 20;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
}

.towns.is-visible,
.join.is-visible {
    display: block;
}

.map-list {
    float: left;
    padding: 10px;
    font-size: 13px;
    line-height: 1.5;
}

.map-list-title {
    padding: 10px;
    font-weight: bold;
    font-size: 14px;
}

#towns-wrapper::after {
    content: "";
    display: table;
    clear: both;
}

.map-wrapper {
    width: 781px;
    height: 550px;
    position: relative;
}

.map-element {
    cursor: pointer;
}

.map-wrapper p.map-text,
.map-wrapper img {
    position: absolute;
}

.legend-title.small-title {
    font-size: 9px;
}

.legend-title {
    display: inline-block;
    color: #3d3d3d;
    font-size: 12px;
    text-align: left;
    margin-bottom: 0;
}

.phone-legend {
    margin-top: 20px;
}

.map-text {
    color: #3d3d3d;
    font-weight: bold;
    font-size: 11px;
    text-align: center;
    width: 100px;
    word-spacing: 100px; 
    z-index: 1;
    pointer-events: none;
}

#map-legend {
    position: absolute;
    width: 210px;
    top: 390px;
    right: 0;
    z-index: 5;
    pointer-events: none;
}

#available-zones {
    margin-bottom: -2px;
    display: inline-block;
    border: 1px solid #f27bae;
    background: linear-gradient(to bottom, #f9d664, rgba(242, 123, 174, 0.49));
    height: 12px;
    width: 12px;
    box-shadow: 0 0 8px rgba(249, 214, 37, 0.5);
}

#unavailable-zones {
    margin-bottom: -2px;
    display: inline-block;
    border: 1px solid #858585;
    background: linear-gradient(to bottom, #49cced, rgba(133, 133, 133, 0.49));
    height: 12px;
    width: 12px;
}

.map-element a {
    position: absolute;
    display: block;
}

.map-element img[alt=""] {
    user-select: none;
}

.nerehta-text {
    top: 394px;
    left: -13px;
}

.nerehta-img {
    top: 377px;
    left: 3px;
}

.kostroma-text {
    top: 305px;
    left: 12px;
}

.kostroma-img {
    top: 249px;
    left: 23px;
}

.krasnoe-text {
    top: 363px;
    left: 29px;
}

.krasnoe-img {
    top: 358px;
    left: 72px;
}

.bui-text {
    top: 191px;
    left: 76px;
}

.bui-img {
    top: 126px;
    left: 75px;
}

.susanino-text {
    top: 269px;
    left: 78px;
}

.susanino-img {
    top: 260px;
    left: 90px;
}

.sudislavl-text {
    top: 318px;
    left: 89px;
}

.sudislavl-img {
   top: 282px;
    left: 94px;
}

.soligalich-text {
    top: 114px;
    left: 152px;
}

.soligalich-img {
    top: 41px;
    left: 119px;
}

.galich-text {
    top: 228px;
    left: 162px;
}

.galich-img {
    top: 182px;
    left: 158px;
}

.ostrovo-text {
    top: 338px;
    left: 154px;
}

.ostrovo-img {
    top: 292px;
    left: 152px;
}

.chuhloma-text {
    top: 137px;
    left: 244px;
}

.chuhloma-img {
    top: 74px;
    left: 212px;
}

.antropovo-text {
    top: 271px;
    left: 237px;
}

.antropovo-img {
    top: 213px;
    left: 240px;
}

.kadyi-text {
    top: 349px;
    left: 249px;
}

.kadyi-img {
    top: 318px;
    left: 258px;
}

.parfenyevo-text {
    top: 205px;
    left: 297px;
}

.parfenyevo-img {
    top: 162px;
    left: 299px;
}

.neya-text {
    top: 259px;
    left: 345px;
}

.neya-img {
    top: 186px;
    left: 334px;
}

.makaryevo-text {
    top: 347px;
    left: 360px;
}

.makaryevo-img {
    top: 297px;
    left: 304px;
}

.kologriv-text {
    top: 134px;
    left: 365px;
}

.kologriv-img {
    top: 83px;
    left: 329px;
}

.mej-text {
    top: 149px;
    left: 457px;
}

.mej-img {
    top: 79px;
    left: 459px;
}

.manturovo-text {
    top: 263px;
    left: 429px;
}

.manturovo-img {
    top: 213px;
    left: 421px;
}

.pishug-text {
    top: 161px;
    left: 527px;
}

.pishug-img {
    top: 99px;
    left: 539px;
}

.sharya-text {
    top: 257px;
    left: 519px;
}

.sharya-img {
    top: 174px;
    left: 499px;
}

.pavinskiy-text {
    top: 95px;
    left: 567px;
}

.pavinskiy-img {
    top: 70px;
    left: 585px;
}

.vohma-text {
    top: 44px;
    left: 631px;
}

.vohma-img {
    top: 12px;
    left: 632px;
}

.ponasyrevo-text {
    top: 239px;
    left: 606px;
}

.ponasyrevo-img {
    top: 183px;
    left: 598px;
}

.oktybr-text {
    top: 136px;
    left: 687px;
}

.oktybr-img {
    top: 70px;
    left: 681px;
}

@media screen and (max-width: 820px) {
    .map-section {
        padding-bottom: 1rem;
    }

    .map-title {
        font-size: 22px;
        margin-top: 24px;
    }

    .map-subtitle {
        font-size: 16px;
    }
}