/**
 * Модалка «Товар закончился».
 *
 * Каркас берёт стили темы (.modal + .confirm__modal), здесь только то, чего в теме нет:
 * список позиций и аварийный показ, если бутстрап не загрузился.
 */

/* В теме .confirm__modal .modal__text сужен до 320px - для списка товаров тесно. */
.rqsb-modal .modal__text {
    max-width: 440px;
}

.rqsb-modal__body {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.rqsb-oos__text {
    margin: 0;
}

/* Содержимое модалки выровнено по центру, а список читается только слева:
   держим его блоком по центру, но с левым выравниванием внутри. */
.rqsb-oos__list {
    margin: 0 auto;
    padding: 0;
    list-style: none;
    text-align: left;
    display: inline-block;
}

.rqsb-oos__item {
    position: relative;
    padding-left: 14px;
    color: var(--color-regular, rgba(37, 43, 43, 1));
}

.rqsb-oos__item + .rqsb-oos__item {
    margin-top: 4px;
}

.rqsb-oos__item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: var(--color-contrast2, rgba(241, 83, 82, 1));
}

/* Аварийный показ: бутстрапа нет, модалку открываем классом.
   Позиционирование дублируем на случай, если и css бутстрапа не доехал. */
.modal.rqsb-modal--fallback {
    display: block;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1070;
    overflow-y: auto;
    background-color: rgba(0, 0, 0, 0.5);
}

.modal.rqsb-modal--fallback .modal-dialog {
    margin: 40px auto;
}