/* ProductBoost — Concept 21: Gradient Badge (canonical admin + frontend stylesheet). */
.productboost-bundle-gradientbadge,
.productboost-bundle-gradientbadge * {
    box-sizing: border-box;
}

.productboost-bundle-gradientbadge {
    --pb-c21-ink: #1A1A1A;
    --pb-c21-ink-soft: #5C5C5C;
    --pb-c21-line: #EAEAEA;
    --pb-c21-surface: #FFFFFF;
    --pb-c21-badge-bg: #F1F1F3;
    --pb-c21-inactive-pct: #B8B8B8;
    --pb-c21-grad-start: #FF3D6E;
    --pb-c21-grad-end: #FF6B35;
    --pb-c21-active-shadow: #FF3D6E;
    --pb-c21-card-height: 118px;
    --pb-c21-card-radius: 16px;
    --pb-c21-card-gap: 10px;
    --pb-c21-pad-y: 14px;
    --pb-c21-pad-x: 6px;
    --pb-c21-badge-width: 58px;
    --pb-c21-badge-height: 46px;
    --pb-c21-badge-radius: 10px;
    --pb-c21-percent-size: 20px;
    --pb-c21-qty-size: 11px;
    --pb-c21-price-size: 10px;
    --pb-c21-total-size: 14px;
    --pb-c21-shadow-opacity: .22;
    color: var(--pb-c21-ink) !important;
    font-family: Inter, "Manrope", "Plus Jakarta Sans", "Segoe UI", Roboto, -apple-system, BlinkMacSystemFont, Arial, sans-serif !important;
    margin: 14px 0 !important;
    width: 100% !important;
}

.productboost-bundle-gradientbadge input[type="hidden"] {
    display: none !important;
}

.productboost-bundle-gradientbadge .pb-c21-grid {
    display: flex !important;
    gap: var(--pb-c21-card-gap) !important;
    width: 100% !important;
}

.productboost-bundle-gradientbadge .pb-c21-card {
    align-items: center !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    background: var(--pb-c21-surface) !important;
    border: 1.5px solid var(--pb-c21-line) !important;
    border-radius: var(--pb-c21-card-radius) !important;
    box-shadow: none !important;
    color: var(--pb-c21-ink) !important;
    cursor: pointer !important;
    display: flex !important;
    flex: 1 1 0 !important;
    flex-direction: row !important;
    font: inherit !important;
    gap: 10px !important;
    justify-content: flex-start !important;
    line-height: 1.2 !important;
    min-height: max(var(--pb-c21-card-height), 86px) !important;
    min-width: 0 !important;
    padding: var(--pb-c21-pad-y) var(--pb-c21-pad-x) !important;
    text-align: left !important;
    text-transform: none !important;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease, background .15s ease !important;
}

.productboost-bundle-gradientbadge .pb-c21-card:hover {
    transform: translateY(-1px) !important;
}

.productboost-bundle-gradientbadge .pb-c21-card.active,
.productboost-bundle-gradientbadge .pb-c21-card.is-active {
    border-color: transparent !important;
    box-shadow: 0 6px 18px color-mix(in srgb, var(--pb-c21-active-shadow) calc(var(--pb-c21-shadow-opacity) * 100%), transparent) !important;
    transform: translateY(-1px) !important;
}

.productboost-bundle-gradientbadge .pb-c21-badge {
    align-items: center !important;
    background: var(--pb-c21-badge-bg) !important;
    border-radius: var(--pb-c21-badge-radius) !important;
    display: inline-flex !important;
    flex: 0 0 auto !important;
    justify-content: center !important;
    margin: 0 !important;
    min-height: var(--pb-c21-badge-height) !important;
    min-width: var(--pb-c21-badge-width) !important;
    padding: 6px 10px !important;
    transition: background .15s ease, box-shadow .15s ease !important;
}

.productboost-bundle-gradientbadge .pb-c21-card.active .pb-c21-badge,
.productboost-bundle-gradientbadge .pb-c21-card.is-active .pb-c21-badge {
    background: linear-gradient(135deg, var(--pb-c21-grad-start), var(--pb-c21-grad-end)) !important;
    box-shadow: 0 4px 10px color-mix(in srgb, var(--pb-c21-active-shadow) 35%, transparent) !important;
}

.productboost-bundle-gradientbadge .pb-c21-pct {
    color: var(--pb-c21-inactive-pct) !important;
    display: block !important;
    font-size: var(--pb-c21-percent-size) !important;
    font-weight: 950 !important;
    letter-spacing: -.055em !important;
    line-height: 1 !important;
    white-space: nowrap !important;
}

.productboost-bundle-gradientbadge .pb-c21-card.active .pb-c21-pct,
.productboost-bundle-gradientbadge .pb-c21-card.is-active .pb-c21-pct {
    color: #fff !important;
}

.productboost-bundle-gradientbadge .pb-c21-pct sup {
    font-size: calc(var(--pb-c21-percent-size) * .55) !important;
    font-weight: 850 !important;
    line-height: 1 !important;
    position: static !important;
    vertical-align: super !important;
}

.productboost-bundle-gradientbadge .pb-c21-copy {
    align-items: flex-start !important;
    display: flex !important;
    flex: 1 1 auto !important;
    flex-direction: column !important;
    justify-content: center !important;
    min-width: 0 !important;
}

.productboost-bundle-gradientbadge .pb-c21-qty {
    color: var(--pb-c21-ink-soft) !important;
    display: block !important;
    font-size: var(--pb-c21-qty-size) !important;
    font-weight: 750 !important;
    line-height: 1.25 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-align: left !important;
    text-overflow: ellipsis !important;
    text-transform: none !important;
    white-space: nowrap !important;
}

.productboost-bundle-gradientbadge .pb-c21-card.active .pb-c21-qty,
.productboost-bundle-gradientbadge .pb-c21-card.is-active .pb-c21-qty {
    color: var(--pb-c21-ink) !important;
}

.productboost-bundle-gradientbadge .pb-c21-price,
.productboost-bundle-gradientbadge .pb-c21-per {
    color: var(--pb-c21-inactive-pct) !important;
    display: block !important;
    font-family: "DM Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
    font-size: var(--pb-c21-price-size) !important;
    font-weight: 650 !important;
    line-height: 1.25 !important;
    margin-top: 2px !important;
    text-align: left !important;
    white-space: nowrap !important;
}

.productboost-bundle-gradientbadge .pb-c21-per {
    color: var(--pb-c21-ink-soft) !important;
}

.productboost-bundle-gradientbadge .pb-c21-price .amount,
.productboost-bundle-gradientbadge .pb-c21-per .amount {
    color: inherit !important;
    font: inherit !important;
}

.productboost-bundle-gradientbadge .pb-c21-total {
    color: var(--pb-c21-ink-soft) !important;
    font-size: calc(var(--pb-c21-total-size) * .86) !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
    margin-top: 14px !important;
    text-align: center !important;
}

.productboost-bundle-gradientbadge .pb-c21-total b {
    color: var(--pb-c21-ink) !important;
    font-family: "DM Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
    font-size: var(--pb-c21-total-size) !important;
    font-weight: 800 !important;
}

.productboost-bundle-gradientbadge .pb-c21-total b .amount {
    color: inherit !important;
    font: inherit !important;
}

/* The admin sidebar is narrow even on desktop, so force the uploaded compact card preview. */
.productboost-bundle-gradientbadge.pb-preview-mobile {
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 360px !important;
}

.productboost-bundle-gradientbadge.pb-preview-mobile .pb-c21-card {
    flex-direction: column !important;
    justify-content: center !important;
    min-height: var(--pb-c21-card-height) !important;
    text-align: center !important;
}

.productboost-bundle-gradientbadge.pb-preview-mobile .pb-c21-badge {
    margin-bottom: 8px !important;
}

.productboost-bundle-gradientbadge.pb-preview-mobile .pb-c21-copy {
    align-items: center !important;
}

.productboost-bundle-gradientbadge.pb-preview-mobile .pb-c21-qty,
.productboost-bundle-gradientbadge.pb-preview-mobile .pb-c21-price,
.productboost-bundle-gradientbadge.pb-preview-mobile .pb-c21-per {
    text-align: center !important;
}

@media (max-width: 480px) {
    .productboost-bundle-gradientbadge:not(.pb-preview-mobile) .pb-c21-card {
        flex-direction: column !important;
        justify-content: center !important;
        min-height: var(--pb-c21-card-height) !important;
        text-align: center !important;
    }

    .productboost-bundle-gradientbadge:not(.pb-preview-mobile) .pb-c21-badge {
        margin-bottom: 8px !important;
    }

    .productboost-bundle-gradientbadge:not(.pb-preview-mobile) .pb-c21-copy {
        align-items: center !important;
    }

    .productboost-bundle-gradientbadge:not(.pb-preview-mobile) .pb-c21-qty,
    .productboost-bundle-gradientbadge:not(.pb-preview-mobile) .pb-c21-price,
    .productboost-bundle-gradientbadge:not(.pb-preview-mobile) .pb-c21-per {
        text-align: center !important;
    }
}