/* Theme-aware installment labels. Variables are namespaced and populated by
 * theme-colors.js, with common WordPress theme variables as no-JS fallbacks. */
.product-label.kh-pgr-installment-label,
.kh-pgr-single-installment-label {
    border-radius: 12px !important;
    background-color: var(
        --kh-pgr-site-primary,
        var(
            --wd-primary-color,
            var(
                --e-global-color-primary,
                var(
                    --ast-global-color-0,
                    var(--theme-palette-color-1, var(--global-palette1, #0f6b5b))
                )
            )
        )
    ) !important;
    color: var(--kh-pgr-site-primary-contrast, #fff) !important;
    box-shadow: 0 7px 18px var(--kh-pgr-site-primary-shadow, rgba(15, 107, 91, .2));
}

.product-label.kh-pgr-installment-label[hidden],
.kh-pgr-installment-badge[hidden],
.kh-pgr-single-installment-label[hidden] {
    display: none !important;
}

/* When a theme does not provide its own gallery label container, front.js
 * creates this namespaced one without changing the gallery markup itself. */
.single-product .woocommerce-product-gallery.kh-pgr-installment-gallery {
    position: relative;
}

.single-product .product-labels.kh-pgr-single-installment-labels-created {
    position: absolute;
    z-index: 7;
    inset-block-start: 12px;
    inset-inline-end: 12px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    pointer-events: none;
}

/* Generic WooCommerce fallback. WoodMart receives a native .product-label
 * instead, so its own label placement and active shape remain intact. */
.kh-pgr-installment-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    max-width: calc(100% - 24px);
    padding: 7px 11px;
    border: 1px solid var(--kh-pgr-site-primary-border, rgba(15, 107, 91, .22));
    border-radius: 12px;
    background-color: var(
        --kh-pgr-site-primary,
        var(
            --wd-primary-color,
            var(
                --e-global-color-primary,
                var(
                    --ast-global-color-0,
                    var(--theme-palette-color-1, var(--global-palette1, #0f6b5b))
                )
            )
        )
    );
    color: var(--kh-pgr-site-primary-contrast, #fff);
    box-shadow: 0 7px 18px var(--kh-pgr-site-primary-shadow, rgba(15, 107, 91, .2));
    font-family: inherit;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.35;
    white-space: nowrap;
    isolation: isolate;
}

.kh-pgr-installment-badge svg {
    width: 15px;
    height: 15px;
    flex: 0 0 15px;
    fill: currentColor;
}

.kh-pgr-installment-badge__text {
    color: inherit;
    font: inherit;
}

/* The reference fast-shipping badge occupies the first row. Keeping this
 * fallback one row lower lets both labels coexist in non-WoodMart themes. */
.kh-pgr-installment-badge--loop {
    position: absolute;
    z-index: 11;
    inset-block-start: 50px;
    inset-inline-end: 12px;
    pointer-events: none;
}

@media (max-width: 480px) {
    .kh-pgr-installment-badge--loop {
        inset-block-start: 44px;
        inset-inline-end: 8px;
        max-width: calc(100% - 16px);
        padding: 6px 9px;
        font-size: 11px;
    }

    .kh-pgr-installment-badge svg {
        width: 13px;
        height: 13px;
        flex-basis: 13px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .kh-pgr-installment-badge,
    .kh-pgr-installment-label,
    .kh-pgr-single-installment-label {
        animation: none !important;
        transition: none !important;
    }
}

@media (forced-colors: active) {
    .kh-pgr-installment-badge,
    .product-label.kh-pgr-installment-label,
    .kh-pgr-single-installment-label {
        border: 1px solid ButtonText !important;
        background: ButtonFace !important;
        color: ButtonText !important;
        box-shadow: none !important;
        forced-color-adjust: auto;
    }
}