/**
 * Блок «оплата не завершена» в корзине /onestep/.
 *
 * Покупатель ушёл на платёжную ссылку MAIB MIA QR и вернулся, не оплатив.
 * Подложка намеренно совпадает с предупреждением об остатках (stockcheck.css):
 * обе читаются как предупреждение, а не как ошибка ввода. Переменные с
 * фолбэками — витрина может переопределить оттенок у себя в main.css,
 * не трогая этот файл.
 *
 * Раскладка в две строки: иконка с текстом сверху, кнопка отдельным рядом.
 * Кнопка не должна отступать слева на ширину иконки — по макету она
 * симметрична внутренним полям блока.
 */

.cart__pending-payment {
    display: flex;
    flex-direction: column;
    margin-bottom: 12px;
    padding: 16px;
    border-radius: 12px;
    background-color: var(--stock-out-bg, #FFF1F2);
    box-shadow: inset 0 0 0 1px var(--stock-out-border, #F9CED3);
}

.cart__pending-payment-head {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.cart__pending-payment-icon {
    width: 28px;
    height: 28px;
    min-width: 28px;
    color: var(--stock-danger, #E4322B);
    fill: currentColor;
}

.cart__pending-payment-body {
    flex: 1;
}

/* Заголовок тёмный, а не красный: цветом выделена только иконка. */
.cart__pending-payment-title {
    font-weight: 700;
    line-height: 1.3;
    color: var(--clr-body-text, #0A0909);
}

.cart__pending-payment-text {
    margin-top: 4px;
    line-height: 1.3;
    color: var(--pending-payment-text, #5F5F5F);
}

/* Ниже штатной btn--medium (64px) и со стрелкой у правого края, по макету.
   Текст при этом остаётся отцентрованным, поэтому стрелка позиционируется
   абсолютно, а не участвует в потоке. */
.cart__pending-payment-btn {
    position: relative;
    margin-top: 16px;
    height: 52px;
    padding: 0 20px;
}

.cart__pending-payment-btn .svg-icon {
    position: absolute;
    right: 20px;
}