#map {
    position: relative;
    width: 100%;
    max-width: 460px;
    margin: 0 auto;
    border: 2px solid #ccc;
}

.map-image {
    width: 100%;
    height: auto;
    display: block;
}

.sector {
    fill: transparent;
    stroke: transparent;
    stroke-width: 4;
    transition: fill 0.2s ease, stroke 0.2s ease;
    cursor: pointer;
}

.sector.highlighted {
    fill: rgba(64, 64, 64, 0.4);
    stroke: red;
}

@media (min-width: 1920px) {
    #map {
        max-width: 598px;
    }
}

.block-categories {
    background: transparent;
}

@media (min-width: 769px) {
    .block-categories {
        margin-top: 16vh;
    }
}

.category-sub-menu>li>a {
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    box-sizing: border-box;
    margin: 0;
    border: 0;
    background: none;
    float: none;
    display: block;
    color: #ffffff;
    font-size: 1em;
    line-height: 1;
    font-style: normal;
    text-align: center;
    text-decoration: none;
    border-radius: 4px;
}

.category-sub-menu:not(.smaller)>li>a {
    padding: 2vh !important;
    font-size: 1em;
    min-height: 4em;
}

.category-sub-menu.smaller>li>a {
    padding-top: 0.68vh !important;
    padding-bottom: 0.68vh !important;
    padding-left: 1.4vh !important;
    padding-right: 1.4vh !important;
    font-size: 0.84em;
    font-weight: normal !important;
}

.category-sub-menu:not(.smaller)>li:first-child>a {
    margin-top: 4vh !important;
}

.category-sub-menu>li>a.sectorA {
    background-color: #fcea50;
    opacity: 0.85;
}

.category-sub-menu>li>a.sectorB {
    background-color: brown;
    opacity: 0.75;
}

.category-sub-menu>li>a.sectorC {
    opacity: 0.9;
    background: linear-gradient(to right, rgba(100, 126, 187, 1) 0%, rgba(129, 150, 198, 1) 100%);
}

.category-sub-menu>li>a.sectorD {
    opacity: 0.55;
    background-color: darkgreen;
}

.category-sub-menu>li>a.sectorAll {
    opacity: 0.9;
    background: linear-gradient(217deg, rgb(165, 42, 42, 0.75), rgb(70, 105, 187), rgb(0, 100, 0, 0.55))
}

@media (max-width: 768px) {
    .category-sub-menu.smaller>li>a {
        padding-top: 1.4vh !important;
        padding-bottom: 1.4vh !important;
        padding-left: 1.4vh !important;
        padding-right: 1.4vh !important;
        font-size: 1.2em;
    }
}

.highlighted { background: rgba(255,235,59,.25); }
#eg-suggest{
    position:absolute; top:100%; left:0; right:0; z-index:1000;
    background:#fff; border:1px solid #ddd; border-top:none;
    max-height:280px; overflow:auto;
    border-radius:0 0 .5rem .5rem;
    box-shadow:0 8px 24px rgba(0,0,0,.08)
}
.eg-s-item{padding:.5rem .75rem; cursor:pointer; line-height:1.2}
.eg-s-item small{color:#6b7280}
.eg-s-item:hover,.eg-s-item.active{background:#f5f7fb}
.eg-s-empty{padding:.75rem; color:#999}

/* kontener pozycji */
.eg-s-item{
  display:flex; align-items:center; gap:.5rem;
  padding:.5rem .75rem; cursor:pointer; line-height:1.2
}
.eg-s-item:hover,.eg-s-item.active{ background:#f5f7fb }

/* pigułka z kodem */
.zonepill{
  flex:0 0 auto;
  min-width: 2.25rem; text-align:center;
  padding:.25rem .5rem; border-radius:.5rem;
  font-weight:700; color:#fff; font-size:.9rem;
}

/* kolory klas A/B/C/D */
.zone-A{ background:rgba(255, 193, 7, 0.65); color:#111 }   /* złota */
.zone-B{ background:rgba(244, 67, 54, 0.85) }               /* czerwona */
.zone-C{ background:rgba(25, 118, 210, 0.7) }               /* niebieska */
.zone-D{ background:rgba(156, 163, 175, 0.6) }               /* szara */

/* tekst ulicy */
.eg-s-text{ flex:1 1 auto; }
.eg-s-text small{ color:#6b7280; margin-left:.25rem }