/* CreditBroker widget: installment and credit (product card, cart, order page).
   The widget card itself is capped at 375px inside its shadow DOM, so wide blocks
   put the widget in a fixed right column and the details on the left. */

/* Product card button */
.product__credit-btn {
    width: 100%;
    height: auto;
    min-height: 44px;
    margin-top: 4px;
    padding: 5px 16px;
    flex-direction: column;
    row-gap: 0;
    white-space: normal;
    border: none;
    color: #fff;
    /* Тот же градиент, что у стикера «Акция» (.sale-sticker) */
    background: linear-gradient(270deg, #ff0909eb 37.98%, #2400ff);
}

.product__credit-btn:hover,
.product__credit-btn:focus,
.product__credit-btn:active {
    color: #fff;
    background: linear-gradient(270deg, #ff0909eb 37.98%, #2400ff);
    filter: brightness(1.1);
}

.product__credit-btn-title {
    font-weight: 600;
    line-height: 18px;
}

.product__credit-btn-text {
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
    color: rgba(255, 255, 255, .85);
}

/* Order page: numbered steps */
.credit-order__steps {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: credit-step;
}

.credit-order__steps li {
    position: relative;
    padding-left: 32px;
    font-size: 13px;
    line-height: 18px;
    counter-increment: credit-step;
}

.credit-order__steps li + li {
    margin-top: 10px;
}

.credit-order__steps li:before {
    content: counter(credit-step);
    position: absolute;
    left: 0;
    top: -2px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--accent-color);
    font-size: 12px;
    font-weight: 600;
    line-height: 22px;
    text-align: center;
}

/* Popup in product card and cart: one column, product, prices, widget */
/* Высота модалки ограничена экраном и прокручивается только её содержимое:
   список продуктов меняется по сроку, и модалка не должна прыгать вместе со страницей */
.fancybox-slide.fancybox-slide--credit {
    padding: 24px 16px;
}

/* fancybox ставит контенту инлайновый display: inline-block */
.fancybox-slide--credit .popup-window_credit.fancybox-content {
    display: inline-flex !important;
    flex-direction: column;
    vertical-align: top;
}

.popup-window.popup-window_credit {
    width: 520px;
    max-width: calc(100vw - 32px);
    max-height: calc(100vh - 48px);
    max-height: calc(100dvh - 48px);
    padding: 0;
    overflow: hidden;
}

.credit-sheet__title {
    flex-shrink: 0;
    padding: 24px 56px 16px 24px;
    font-size: 22px;
    font-weight: 700;
    line-height: 28px;
}

.credit-sheet__body {
    flex: 1 1 auto;
    min-height: 0;
    padding: 0 24px 24px;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

.credit-sheet__product {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 4px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border-color);
}

.credit-sheet__image {
    flex-shrink: 0;
    width: 72px;
    height: 72px;
    object-fit: contain;
}

.credit-sheet__name {
    font-size: 15px;
    font-weight: 500;
    line-height: 20px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.credit-sheet__count {
    margin-top: 4px;
    font-size: 13px;
    line-height: 18px;
    color: var(--secondary-color);
}

.credit-sheet__prices {
    margin: 16px 0;
}

.credit-sheet__row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 5px 0;
    font-size: 14px;
    line-height: 20px;
    color: var(--secondary-color);
}

.credit-sheet__row span:last-child {
    color: var(--main-color);
    white-space: nowrap;
}

.credit-sheet__row_today span:last-child {
    font-weight: 600;
}

.credit-sheet__row_total {
    margin-top: 6px;
    padding-top: 11px;
    border-top: 1px solid var(--border-color);
    font-size: 16px;
    font-weight: 600;
    color: var(--main-color);
}

.credit-sheet__widget {
    min-height: 120px;
}

.credit-sheet__note {
    margin-top: 12px;
    font-size: 12px;
    line-height: 16px;
    text-align: center;
    color: var(--secondary-color);
}

.credit-sheet__cart-btn {
    margin-top: 12px;
}

/* Cart: calculator under payment methods (the cart form is 530px wide, one column) */
.cart-credit {
    margin-top: 20px;
    padding: 16px;
    background: #fff;
    border: 1px solid var(--accent-color);
    border-radius: 8px;
}

.cart-credit__info {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 4px 16px;
    margin-bottom: 16px;
}

.cart-credit__title {
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
}

.cart-credit__sum {
    font-size: 20px;
    font-weight: 600;
    line-height: 26px;
    white-space: nowrap;
}

.cart-credit__note {
    flex-basis: 100%;
    font-size: 12px;
    line-height: 16px;
    color: var(--secondary-color);
}

.basket-footer__credit {
    margin-top: 12px;
    padding: 10px 12px;
    border: 1px solid var(--accent-color);
    border-radius: 8px;
    font-size: 12px;
    line-height: 16px;
    color: var(--secondary-color);
}

.basket-footer__credit span,
.basket-footer__credit strong {
    display: block;
}

.basket-footer__credit strong {
    margin: 2px 0;
    font-size: 18px;
    font-weight: 600;
    line-height: 24px;
    color: var(--main-color);
}

/* Order page */
.credit-order {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 460px);
    gap: 24px;
    align-items: start;
    max-width: 1000px;
    margin: 30px 0;
    padding: 24px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 2px 0 #445c821f, -1px 4px 10px 0 #445c821a, 0 -2px 10px 0 #445c820d;
}

.credit-order__title {
    font-size: 20px;
    font-weight: 600;
    line-height: 26px;
}

.credit-order__summary {
    margin: 16px 0 20px;
    padding: 12px 16px;
    background: var(--light-grey-bg);
    border-radius: 8px;
}

.credit-order__row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    font-size: 13px;
    line-height: 20px;
    color: var(--secondary-color);
}

.credit-order__row + .credit-order__row {
    margin-top: 6px;
}

.credit-order__row_total {
    font-size: 14px;
    color: var(--main-color);
}

.credit-order__row span:last-child {
    white-space: nowrap;
}

.credit-order__row_total span:last-child {
    font-size: 16px;
    font-weight: 600;
}

@media (max-width: 1024.98px) {
    .credit-order {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 767.98px) {
    .credit-order {
        padding: 16px;
    }

    .fancybox-slide.fancybox-slide--credit {
        padding: 8px;
    }

    .popup-window.popup-window_credit {
        max-width: calc(100vw - 16px);
        max-height: calc(100vh - 16px);
        max-height: calc(100dvh - 16px);
    }

    .credit-sheet__title {
        padding: 16px 48px 12px 16px;
        font-size: 20px;
        line-height: 26px;
    }

    .credit-sheet__body {
        padding: 0 16px 16px;
    }

    .credit-sheet__image {
        width: 56px;
        height: 56px;
    }

    /* all.css задаёт описанию доставки min-width: 650px: корзина на телефоне шире экрана и модалка уезжает вправо */
    .form-check__subtext {
        min-width: 0;
    }
}