/* Responsive stage markers. The original white dots are part of the photo,
   so recreate them in a responsive overlay at their real image coordinates.
   This produces one visible disk at every size instead of putting a second
   peach disk beside the printed one. */
html body .otdelka-top-2 .photo .sel {
        z-index: 3;
        display: block !important;
        box-sizing: border-box;
        width: 7.6% !important;
        height: auto !important;
        aspect-ratio: 1;
        border: 0 !important;
        border-radius: 50%;
        background: transparent !important;
        box-shadow: none !important;
        transform: translate(-50%, -50%);
}

/* Exact centres of the numbered disks in the source balcony photo. */
html body .otdelka-top-2 .photo .sel.n-1 { top: 25.8% !important; left: 32.8% !important; bottom: auto !important; }
html body .otdelka-top-2 .photo .sel.n-2 { top: 25.8% !important; left: 46.4% !important; bottom: auto !important; }
html body .otdelka-top-2 .photo .sel.n-3 { top: 25.8% !important; left: 60% !important; bottom: auto !important; }
html body .otdelka-top-2 .photo .sel.n-4 { top: 25.8% !important; left: 73% !important; bottom: auto !important; }
html body .otdelka-top-2 .photo .sel.n-5 { top: 94.1% !important; left: 23.8% !important; bottom: auto !important; }
html body .otdelka-top-2 .photo .sel.n-6 { top: 94.1% !important; left: 35.6% !important; bottom: auto !important; }
html body .otdelka-top-2 .photo .sel.n-7 { top: 94.1% !important; left: 47.8% !important; bottom: auto !important; }

html body .otdelka-top-2 .photo .sel::after {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: #fff;
        color: #162b29;
        box-shadow: 0 2px 6px rgba(22, 43, 41, .22);
        content: attr(data-vo-stage-number);
        font-family: "MullerBold", Arial, sans-serif;
        font-size: clamp(11px, 3.8vw, 19px);
        font-weight: 700;
        line-height: 1;
        pointer-events: none;
        transform: scale(1);
        transform-origin: center;
        transition: transform 1.3s cubic-bezier(.22, 1, .36, 1),
            background-color 1.3s cubic-bezier(.22, 1, .36, 1),
            color 1.3s cubic-bezier(.22, 1, .36, 1),
            box-shadow 1.3s cubic-bezier(.22, 1, .36, 1);
}

/* Same active-marker treatment as the working glazing diagram. */
html body .otdelka-top-2 .photo .sel.vo-otdelka-mobile-active {
        z-index: 4;
}

html body .otdelka-top-2 .photo .sel.vo-otdelka-mobile-active::after {
        background: #ffaa83;
        color: #fff;
        box-shadow: 0 0 0 7px rgba(255, 170, 131, .30),
            0 10px 23px rgba(22, 43, 41, .30);
        transform: scale(1.22);
}

@media (max-width: 767px), (hover: none) and (pointer: coarse) {
    /* The glazing diagram already has real DOM circles and numbers. */
    html body .ostekleneie_primer .vo-osteklenie-hotspot {
        transition: transform 1.3s cubic-bezier(.22, 1, .36, 1),
            background-color 1.3s cubic-bezier(.22, 1, .36, 1),
            box-shadow 1.3s cubic-bezier(.22, 1, .36, 1) !important;
    }

    html body .ostekleneie_primer .vo-osteklenie-hotspot.vo-osteklenie-active {
        background: #ffaa83 !important;
        color: #fff !important;
        box-shadow: 0 0 0 7px rgba(255, 170, 131, .30),
            0 10px 23px rgba(22, 43, 41, .30) !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    html body .otdelka-top-2 .photo .sel::after,
    html body .ostekleneie_primer .vo-osteklenie-hotspot {
        transition: none !important;
    }
}