.city-map {
    font-family: Verdana, Arial, sans-serif;
    width: 100%;
    margin: 0 auto;
}

.city-map-full {
    width: 100%;
}

.city-map-home-ico {
    display: inline-block;
    width: 16px;
    height: 16px;
    vertical-align: middle;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='%23007fff' d='M8 1l-7 6h2v7h3v-4h4v4h3V7h2z'/></svg>") center no-repeat;
}

.city-map-top {
    background: #d7eef8;
    border: 1px solid #1385ff;
    border-top: 2px solid #1385ff;
    box-sizing: border-box;
    padding: 10px 14px;
    margin: 0 0 12px;
    width: 100%;
}

.city-map-breadcrumbs {
    margin: 0;
    color: #07f;
    font: bold 17px Verdana, Arial, sans-serif;
    line-height: 1.35;
}

.city-map-breadcrumbs span {
    color: #d00;
}

.city-map-breadcrumbs a {
    color: #07f;
    text-decoration: none;
}

.city-map-route {
    border-top: 1px solid #7dcc2d;
    border-left: 5px solid #7dcc2d;
    border-bottom: 1px solid #7dcc2d;
    border-right: 5px solid #7dcc2d;
    box-sizing: border-box;
    background: #ffe0a0;
    padding: 7px 10px;
    margin: 0 0 20px;
    color: #000;
    font-family: Verdana, Arial, sans-serif;
    font-size: 12px;
    min-height: 32px;
    text-align: left;
    vertical-align: middle;
    width: 100%;
}

.city-map-route img {
    vertical-align: middle;
}

.city-map-mode {
    display: flex;
    gap: 6px;
    margin: 0 auto 8px;
    justify-content: flex-start;
    max-width: 1166px;
}

.city-map-mode-btn {
    border: 1px solid #7dcc2d;
    background: #fff6b8;
    color: #0050ff;
    cursor: pointer;
    font: 12px Verdana, Arial, sans-serif;
    padding: 4px 10px;
}

.city-map-mode-btn.is-active {
    background: #7dcc2d;
    color: #fff;
}

.city-map-scene {
    position: relative;
    display: block;
    width: 894px;
    max-width: 100%;
    margin: 0 0 10px;
    border: 2px solid #eee;
    box-shadow: 0 0 3px #000;
    background: #d9f2ff;
    height: 597px;
    min-height: 597px;
    overflow: visible;
    vertical-align: top;
    z-index: 1;
}

.city-map-shell {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
    max-width: 1246px;
    margin: 0 auto;
}

.city-map-location-menu {
    width: 330px;
    min-height: 597px;
    max-height: 597px;
    overflow-x: hidden;
    overflow-y: auto;
    border-top: 1px solid #7dcc2d;
    border-left: 5px solid #7dcc2d;
    border-bottom: 1px solid #7dcc2d;
    border-right: 5px solid #7dcc2d;
    background: #ffe0a0;
    box-sizing: border-box;
    padding: 8px 10px;
    font: 12px Verdana, Arial, sans-serif;
}

.city-map-location-menu-title {
    color: #000;
    font-weight: bold;
    margin: 0 0 8px;
    border-bottom: 1px solid #d8cc7a;
    padding-bottom: 6px;
}

.city-map-location-object {
    display: block;
    width: 100%;
    border: 0;
    background: transparent;
    color: #0050ff;
    cursor: pointer;
    font: 12px Verdana, Arial, sans-serif;
    padding: 2px 0;
    text-align: left;
    text-decoration: none;
    white-space: normal;
    word-break: break-word;
}

.city-map-location-object {
    padding-left: 2px;
}

.city-map-location-object::before {
    content: "› ";
    color: #d00000;
}

.city-map-location-object.is-static {
    color: #333;
    cursor: default;
}

.city-map-location-empty {
    color: #555;
    font: 12px Verdana, Arial, sans-serif;
    padding: 4px 0;
}

.city-map-location-object:hover,
.city-map-location-object:focus-visible {
    text-decoration: underline;
}

/* --- Выпадающий список объектов локации ------------------------------ */
.city-map-objects-dropdown-wrap {
    margin: 4px 0 6px;
    position: relative;
}

.city-map-objects-dropdown-wrap::after {
    content: "";
    position: absolute;
    right: 10px;
    top: 50%;
    width: 0;
    height: 0;
    margin-top: -2px;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid #8f0000;
    pointer-events: none;
}

.city-map-objects-dropdown {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 6px 28px 6px 10px;
    background: #fff8e3;
    background-image: linear-gradient(180deg, #fff8e3 0%, #fbeec4 100%);
    color: #000;
    border: 1px solid #8f0000;
    border-radius: 4px;
    font: bold 12px Verdana, Arial, sans-serif;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(0,0,0,0.08), inset 0 1px 0 rgba(255,255,255,0.5);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.city-map-objects-dropdown:hover {
    border-color: #d26720;
    box-shadow: 0 2px 6px rgba(143,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.5);
}

.city-map-objects-dropdown:focus,
.city-map-objects-dropdown:focus-visible {
    outline: none;
    border-color: #d26720;
    box-shadow: 0 0 0 2px rgba(210,103,32,0.35), inset 0 1px 0 rgba(255,255,255,0.5);
}

.city-map-objects-dropdown option {
    background: #fff;
    color: #000;
    font-weight: normal;
    padding: 4px 8px;
}

.city-map-objects-dropdown option:disabled {
    color: #999;
    font-style: italic;
}

/* --- Список всех локаций города (нижняя секция боковой панели) ------- */
.city-map-locations-divider {
    height: 1px;
    margin: 12px -10px 10px;
    background: linear-gradient(to right, transparent, #b89752 30%, #b89752 70%, transparent);
    opacity: 0.55;
}

.city-map-locations-title {
    color: #8f0000;
    font: bold 12px Verdana, "trebuchet ms", Arial, sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-align: center;
    margin: 0 0 8px;
    padding-bottom: 5px;
    border-bottom: 1px solid #d8cc7a;
}

.city-map-locations-list {
    display: block;
}

.city-map-locations-item {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 3px 6px 3px 14px;
    margin: 1px 0;
    color: #0050ff;
    font: 12px Verdana, Arial, sans-serif;
    line-height: 1.4;
    text-decoration: none;
    border-radius: 3px;
    position: relative;
    transition: background 0.12s ease;
}

.city-map-locations-item::before {
    content: "›";
    position: absolute;
    left: 4px;
    top: 50%;
    transform: translateY(-50%);
    color: #d26720;
    font-weight: bold;
}

.city-map-locations-item:hover,
.city-map-locations-item:focus-visible {
    background: #fff3c8;
    text-decoration: underline;
}

.city-map-locations-item.is-current {
    color: #8f0000;
    background: #fff3c8;
    font-weight: bold;
    cursor: default;
    text-decoration: none;
}

.city-map-locations-item.is-current::before {
    content: "★";
    color: #d26720;
    font-size: 11px;
}

.city-map-locations-item.is-current:hover {
    text-decoration: none;
}

.city-map-locations-item.is-start::after {
    content: "(старт)";
    margin-left: 6px;
    color: #888;
    font-size: 10px;
    font-weight: normal;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.city-map-links-wrap {
    margin: 8px auto 0;
    max-width: 1166px;
}

.city-map-links {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 8px;
}

.city-map-link {
    border: 1px solid #77c42d;
    background: #fff6b8;
    color: #0050ff;
    cursor: pointer;
    display: inline-block;
    font: 12px Verdana, Arial, sans-serif;
    padding: 4px 10px;
    text-decoration: none;
}

.city-map-link:hover,
.city-map-link:focus-visible {
    background: #7dcc2d;
    color: #fff;
}

.city-map-bg {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: contain;
}

.city-map-object {
    position: absolute;
    transform: translate(-50%, -50%);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border: 0;
    background: transparent;
    cursor: pointer;
    padding: 0;
    z-index: 2;
    overflow: visible;
    transition: filter .12s ease;
}

.city-map-object img {
    display: block;
    width: auto;
    height: auto;
    max-width: none;
    max-height: none;
    transition: none;
}

.city-map-dot {
    display: block;
    width: 22px;
    height: 22px;
    border: 1px solid #f8f8f8;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #ffffff 0, #ffe88a 35%, #2085ff 70%, #0d3d8f 100%);
    box-shadow: 0 1px 4px rgba(0, 0, 0, .55);
    transition: filter .12s ease, transform .12s ease, box-shadow .12s ease;
}

.city-map-tooltip {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: #f8f8f8;
    border: 1px solid #5f5f5f;
    border-radius: 0;
    color: #111;
    font: 12px Verdana, Arial, sans-serif;
    padding: 2px 5px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    pointer-events: auto;
    cursor: pointer;
    z-index: 20;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .25);
    text-shadow: none;
    transition: opacity .12s ease, visibility .12s ease;
}

.city-map-tooltip::after {
    display: none;
}

.city-map-object:hover,
.city-map-object:focus-visible,
.city-map-object.is-menu-hover {
    z-index: 30;
}

.city-map-object:hover img,
.city-map-object:focus-visible img,
.city-map-object.is-menu-hover img {
    filter: none;
    transform: none;
}

.city-map-object:hover .city-map-dot,
.city-map-object:focus-visible .city-map-dot,
.city-map-object.is-menu-hover .city-map-dot {
    filter: none;
    transform: none;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .55);
}

.city-map-scene:has(.city-map-object:hover) .city-map-object,
.city-map-scene:has(.city-map-object:focus-visible) .city-map-object,
.city-map-scene:has(.city-map-object.is-menu-hover) .city-map-object {
    filter: brightness(55%);
}

.city-map-scene:has(.city-map-object:hover) .city-map-object:hover,
.city-map-scene:has(.city-map-object:focus-visible) .city-map-object:focus-visible,
.city-map-scene:has(.city-map-object.is-menu-hover) .city-map-object.is-menu-hover {
    filter: brightness(118%);
}

.city-map-object:hover .city-map-tooltip,
.city-map-object:focus-visible .city-map-tooltip,
.city-map-object.is-menu-hover .city-map-tooltip {
    opacity: 1;
    visibility: visible;
}

.city-map-object.is-current .city-map-tooltip {
    border-color: #007fff;
    color: #0050ff;
}

.city-map-object.is-disabled {
    opacity: .85;
    cursor: default;
}

.city-map-object.is-disabled .city-map-tooltip {
    cursor: default;
}

@media (max-width: 900px) {
    .city-map-shell {
        flex-direction: column;
        align-items: center;
    }

    .city-map-location-menu {
        width: 100%;
        min-height: 0;
        max-height: 260px;
        overflow-x: hidden;
    }

}