/* Метки рядов и занятые места на схеме. */
#myModal .workspace {
    position: relative;
}

#myModal .hall-map {
    overflow: visible;
}

#myModal .hall-map-frame {
    position: relative;
    display: table;
    padding-right: 40px;
    padding-left: 40px;
    overflow: visible;
}

#myModal .hall-row-label {
    position: absolute;
    z-index: 2;
    width: 20px;
    color: #343a40;
    font-size: 14px;
    font-weight: 700;
    line-height: 18px;
    pointer-events: none;
    transform: translateY(-50%);
}

#myModal .hall-row-label--left {
    text-align: right;
}

#myModal .hall-row-label--right {
    text-align: left;
}

/* У занятого места остаётся его контур для расчёта схемы, но видна только точка. */
#myModal .seat_0.seat_busy {
    background: transparent !important;
    border-color: transparent !important;
    color: transparent !important;
}

#myModal .seat_0.seat_busy .seat_num,
#myModal .seat_0.seat_busy .row_num {
    visibility: hidden;
}

#myModal .seat_0.seat_busy::after {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #73777d;
    content: '';
    pointer-events: none;
    transform: translate(-50%, -50%);
}

/* Улучшенная схема выбора мест на телефонах. Не влияет на планшеты и компьютеры. */
@media (max-width: 767.98px) {
    /* Прежний коэффициент уменьшал всю схему до 1–100 %. В окне просмотра
       используется постоянный комфортный начальный масштаб и прокрутка. */
    #myModal .modal-body[class*="zoom_mobile_"] {
        zoom: 100% !important;
        padding: 0 8px 8px;
    }

    #myModal .workspace {
        position: relative;
        width: 100%;
        min-height: 280px;
        height: min(52dvh, 480px);
        overflow: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-x pan-y;
        border: 1px solid rgba(0, 0, 0, 0.16);
        background: #cdd0d5;
    }

    #myModal .target-element {
        display: table;
        min-width: max-content;
        padding: 50px 42px 14px;
        overflow: visible;
        cursor: default;
        transition: zoom 0.15s ease;
    }

    #myModal .controls {
        position: sticky;
        top: 8px;
        left: max(8px, calc(100% - 146px));
        z-index: 10;
        display: flex;
        gap: 6px;
        width: max-content;
        margin: 8px 8px -42px auto;
    }

    #myModal .controls button {
        display: block;
        width: 42px;
        height: 42px;
        padding: 0;
        border: 0;
        border-radius: 9px;
        background: rgba(0, 0, 0, 0.82);
        color: #fff;
        font-size: 28px;
        font-weight: 700;
        line-height: 42px;
        text-align: center;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.28);
    }

    #myModal .controls #zoom-reset {
        font-size: 23px;
    }

    #myModal .controls button:active {
        background: #f3a000;
    }

    #myModal .hall-row-label {
        color: #202428;
        font-size: 16px;
    }

    #myModal .seat_0.seat_busy::after {
        width: 10px;
        height: 10px;
    }
}