.st1 {fill:#00b0f0;
    fill-opacity:0.45;
    stroke:#000000;
    stroke-linecap:round;
    stroke-linejoin:round;
    stroke-width:0.75}
.st2 {fill:none;
    fill-rule:evenodd;
    font-size:12px;
    overflow:visible;
    stroke-linecap:square;
    stroke-miterlimit:3}






 body {
     margin: 0;
}
 .map-container {
     max-width:960px;
     position: relative;
     width: 100%;
     margin: auto;
}
 .background-img {
     width: 100%;
     display: block;
}
 .zone {
     position: absolute;
/*     pointer-events: none;*/
    /* So background remains clickable */
}
 .zone svg {
     width: 100%;
     height: 100%;
     pointer-events: auto;
    /* Allow SVG to capture hover/click */
}
 .zone .st1 {
     fill-opacity: 0.4;
     stroke: black;
     stroke-width: 1;
     cursor: pointer;
     transition: fill-opacity 0.3s;
}

.zone_number,
.zone_watering {
    pointer-events: none;
}
 .zone1 {
    width: 19%;
    top: 25%;
    left: 64%;
}
.zone2 {
    z-index: 3;
    top: 63%;
    left: 47.5%;
    width: 16.1%;
}
 .zone3 {
    top: 56.3%;
    left: 41%;
    width: 19%;
}
 .zone4 {
    z-index: 4;
    top: 34.8%;
    left: 41%;
    width: 21.3%;
}
 .zone7 {
    z-index: 4;
    top: 51%;
    left: 20.8%;
    width: 18%;
}
.zone8 {
    top: 50.9%;
    left: 15.5%;
    width: 17.2%;
}
.zone9 {
    width: 18%;
    top: 61.3%;
    left: 21.1%;
}
 .zone10 {
    width: 14.5%;
    top: 13.8%;
    left: 68.5%;
}
.zone11 {
    position: absolute;
    top: 19%;
    left: 52%;
    width: 7%;
    aspect-ratio: 1;
      pointer-events: auto;
      cursor:pointer;
}
.zone11 .st1 {
    stroke-width:0.5;}

/* Центрований SVG */
.zone11 .zone11-shape {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    transform: translate(-50%, -50%);
/*    pointer-events: none;*/
}

 .zone12{
     top: 14%;
     left: 21%;
     width: 33%;
}
 .zone13{
    top: 11%;
    left: 7.8%;
    width: 3.8%;
}
 .zone14{
    z-index: 3;
    top: 57.5%;
    left: 67%;
    width: 15%;
}
 .zone15{
    top: 57%;
    left: 67%;
    width: 26%;
}
 .zone16{
width: 22%;
    top: 36.8%;
    left: 61.8%;
}



.zone_number{
    position:absolute;
    z-index: 10;
    width: 20%;
    max-width:35px;
    min-width: 30px;
    aspect-ratio:1/1;
       display:flex;
   justify-content: center;
   align-items: center;
background:white;
border-radius: 50%;
top:50%;
left:50%;
transform: translate(-50%, -50%);
transform-origin: center center;
}
.zone1 .zone_number{
top:30%;
left:60%;
}
.zone2 .zone_number{
top:45%;
left:70%;
}
.zone3 .zone_number{
top: 24%;
    left: 24%;
}

.zone8 .zone_number{
top:40%;
left:15%;
}
.zone11 .zone_number{
        position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-weight: bold;
    font-size: 0.8em; /* Можна змінити для кращого вигляду */
    pointer-events: none; /* Щоб кліки проходили крізь */
}
.zone12 .zone_number{
    top: 35%;
    left: 15%;
}
.zone15 .zone_number{
    top: 45%;
    left: 75%;
}

/*.zone_watering.wateringON {
    display:flex;
    justify-content:center;
    align-items:center;
    position: absolute;
    width: 90%;
    height: 90%;
    top: 0%;
    z-index: 5;
    background: url("water.gif") center;
    background-size: 25px;
    pointer-events: none;
}*/
@keyframes watering_active {
  0%,100% {
     transform: translate(-50%, -50%) scale(1);
  }
  50% {
    transform: translate(-50%, -50%) scale(1.2);

  }
}

@keyframes pulse-stroke {
  0%, 100% {
    stroke-width: 2px;
    fill-opacity:initial;
  }
  50% {
    stroke-width: 4px;
    fill-opacity:0.9;
  }
}

.wateringON .zone_number {
    font-weight: 800;
    font-size: 22px;
    background: #0066ff;
    color: white;
    animation: watering_active 1s ease-in-out infinite;
    transition: transform 2s;
}
.wateringON .st1{
    stroke:white;
/*  animation:pulse-stroke 1s infinite ease-in-out;*/
}


.zone_selected .st1 {
    stroke:#4d94ff;
fill-opacity:0.8!important;
stroke-width:2px;
}

@media(max-width:600px){
    .zone7 .zone_number{
        top:    40%;
    }
}