/**
 * Mix & Match Bundle Builder with Tiered Discounts for WooCommerce
 * Frontend styles — scoped BEM, no global overrides.
 *
 * Colour palette uses CSS custom properties so store owners can override
 * via their theme's Additional CSS without specificity battles.
 */

/* ─── Custom Properties ──────────────────────────────────────────────── */
.cbb-wrapper {
    --cbb-accent:        #e07930;
    --cbb-accent-dark:   #c0601a;
    --cbb-green:         #2e7d4f;
    --cbb-green-light:   #d4edda;
    --cbb-card-selected: #f8fdf9;
    --cbb-text:          #1a1a1a;
    --cbb-muted:         #6b7280;
    --cbb-border:        #e5e7eb;
    --cbb-bg:            #f9f6f2;
    --cbb-card-bg:       #ffffff;
    --cbb-panel-bg:      #ffffff;
    --cbb-btn-bg:        #3a3a4c;
    --cbb-btn-bg-hover:  #1a1a2e;
    --cbb-radius:        12px;
    --cbb-radius-sm:     8px;
    --cbb-shadow:        0 2px 8px rgba(0,0,0,0.07);
    --cbb-shadow-hover:  0 6px 20px rgba(0,0,0,0.12);
    --cbb-transition:    0.2s ease;
    --cbb-font-sans:     -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* ─── Wrapper ─────────────────────────────────────────────────────────── */
.cbb-wrapper {
    font-family: var(--cbb-font-sans);
    color: var(--cbb-text);
    background: var(--cbb-bg);
    box-sizing: border-box;
    width: 100%;
    padding-top: 48px;
    padding-bottom: 64px;
    container-type: inline-size;
    container-name: cbb-bundle;

    /* Breakout for block themes: cancels root padding using WordPress's own
     * CSS variables — the same values used by alignfull core blocks.
     * --wp--style--root--padding-left/right are set by themes using
     * useRootPaddingAwareAlignments. Falls back to --wp--style--global--
     * content-size for themes that use content-size constraints instead. */
    margin-left:  calc(-1 * var(--wp--style--root--padding-left,  var(--wp--style--global--content-size, 0px))) !important;
    margin-right: calc(-1 * var(--wp--style--root--padding-right, var(--wp--style--global--content-size, 0px))) !important;
    width:     calc(100% + var(--wp--style--root--padding-left,  0px) + var(--wp--style--root--padding-right, 0px));
    max-width: none;
}

/* Cancel the breakout when inside a WordPress block wrapper — the outer
 * alignfull block div already handles full-width, so the inner cbb-wrapper
 * just needs to fill it naturally. */
.wp-block-wpc-bundle-builder-bundle-builder .cbb-wrapper,
.wp-block-cbb-woo-bundle-builder .cbb-wrapper {
    margin-left: 0;
    margin-right: 0;
    width: 100%;
    max-width: none;
}

.cbb-wrapper *,
.cbb-wrapper *::before,
.cbb-wrapper *::after {
    box-sizing: border-box;
}

/* ─── Inner containers — centred with side padding ────────────────────── */
.cbb-header,
.cbb-layout {
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
    padding-left: clamp(20px, 4vw, 60px);
    padding-right: clamp(20px, 4vw, 60px);
}


.cbb-header {
    text-align: center;
    margin-bottom: 40px;
}

.cbb-eyebrow {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--cbb-accent);
    margin: 0 0 10px;
}

.cbb-heading {
    font-size: clamp(28px, 5vw, 48px);
    font-weight: 800;
    line-height: 1.1;
    margin: 0 0 12px;
    color: var(--cbb-text);
}

.cbb-subheading {
    font-size: 16px;
    color: var(--cbb-muted);
    max-width: 520px;
    margin: 0 auto;
    line-height: 1.6;
}

/* ─── Layout ─────────────────────────────────────────────────────────── */
.cbb-layout {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 32px;
    align-items: start;
}

/* ─── Product Grid ───────────────────────────────────────────────────── */
.cbb-product-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

/* ─── Product Card ───────────────────────────────────────────────────── */
.cbb-product-card {
    background: var(--cbb-card-bg);
    border-radius: var(--cbb-radius);
    overflow: hidden;
    position: relative;
    transition: box-shadow var(--cbb-transition), transform var(--cbb-transition);
    cursor: default;
    border: 2px solid transparent;
}

.cbb-product-card:hover {
    box-shadow: var(--cbb-shadow-hover);
    transform: translateY(-2px);
}

/* Selected state */
.cbb-product-card.is-selected {
    border-color: var(--cbb-green);
    background: var(--cbb-card-selected);
}

/* Disabled state */
.cbb-product-card.is-disabled {
    opacity: 0.5;
    pointer-events: none;
}

/* Out-of-stock state */
.cbb-product-card.is-out-of-stock {
    opacity: 0.75;
}

.cbb-product-card.is-out-of-stock .cbb-product-image img {
    filter: grayscale(60%);
}

.cbb-product-card.is-out-of-stock .cbb-add-btn {
    background: #f3f4f6;
    border-color: #d1d5db;
    color: #9ca3af;
    cursor: not-allowed;
}

.cbb-product-card.is-out-of-stock .cbb-product-name,
.cbb-product-card.is-out-of-stock .cbb-price-original {
    color: #9ca3af;
}

/* Out-of-stock badge variant */
.cbb-badge--oos {
    background: #6b7280;
}

/* ─── Discount Badge ─────────────────────────────────────────────────── */
.cbb-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
    background: var(--cbb-green);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 99px;
    letter-spacing: 0.02em;
    white-space: nowrap;
    display: none; /* shown via JS when discount > 0 */
}

.cbb-badge.is-visible {
    display: inline-block;
}

/* ─── Add / Remove Button ────────────────────────────────────────────── */
.cbb-add-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid var(--cbb-border);
    background: var(--cbb-card-bg);
    color: var(--cbb-text);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background var(--cbb-transition), border-color var(--cbb-transition), color var(--cbb-transition);
}

.cbb-add-btn svg {
    width: 16px;
    height: 16px;
    pointer-events: none;
    transition: transform var(--cbb-transition);
}

.cbb-add-btn:hover {
    background: var(--cbb-text);
    border-color: var(--cbb-text);
    color: #fff;
}

/* Remove state (orange minus) */
.cbb-add-btn.is-remove {
    background: var(--cbb-accent);
    border-color: var(--cbb-accent);
    color: #fff;
}

.cbb-add-btn.is-remove:hover {
    background: var(--cbb-accent-dark);
    border-color: var(--cbb-accent-dark);
}

/* ─── Product Image ──────────────────────────────────────────────────── */
.cbb-product-image {
    aspect-ratio: 1;
    overflow: hidden;
    background: #f3f4f6;
}

.cbb-product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.cbb-product-card:hover .cbb-product-image img {
    transform: scale(1.04);
}

/* ─── Product Info ───────────────────────────────────────────────────── */
.cbb-product-info {
    padding: 14px 16px 16px;
}

.cbb-product-name {
    font-size: 15px;
    font-weight: 700;
    margin: 0 0 4px;
    line-height: 1.3;
    color: var(--cbb-text);
}

.cbb-product-link {
    color: inherit;
    text-decoration: none;
}
.cbb-product-link:hover {
    text-decoration: none;
    color: rgba(0, 0, 0, 0.9);
}

.cbb-product-desc {
    font-size: 13px;
    color: var(--cbb-muted);
    margin: 0 0 10px;
    line-height: 1.4;
}

.cbb-product-pricing {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* Default state — both prices same size, current is muted until a discount applies */
.cbb-price-current {
    font-size: 14px;
    font-weight: 600;
    color: var(--cbb-muted);
    transition: font-size var(--cbb-transition), color var(--cbb-transition), font-weight var(--cbb-transition);
}

.cbb-price-original {
    font-size: 14px;
    color: var(--cbb-muted);
}

/* When a bundle discount is active, grow and colour the discounted price */
.cbb-price-current.has-discount {
    font-size: 17px;
    font-weight: 700;
    color: var(--cbb-green);
}

/* Cross out original price when product is already on sale */
.cbb-product-card.is-on-sale .cbb-price-original {
    text-decoration: line-through;
}

/* Cross out original price when a bundle discount price is showing */
.cbb-price-current:not(:empty) + .cbb-price-original {
    text-decoration: line-through;
}

/* ─── Bundle Panel ───────────────────────────────────────────────────── */
.cbb-panel {
    position: sticky;
    top: 24px;
}

.cbb-panel__inner {
    background: var(--cbb-panel-bg);
    border: 2px dashed var(--cbb-border);
    border-radius: var(--cbb-radius);
    padding: 24px 20px;
}

/* Counter pill */
.cbb-panel__counter {
    text-align: center;
    margin-bottom: 4px;
}

.cbb-counter {
    display: inline-block;
    background: #f0f0f0;
    border-radius: 99px;
    font-size: 12px;
    font-weight: 600;
    padding: 3px 12px;
    color: var(--cbb-muted);
}

.cbb-panel__title {
    font-size: 24px;
    font-weight: 800;
    text-align: center;
    margin: 6px 0 2px;
}

/* Total savings */
.cbb-panel__savings {
    font-size: 15px;
    font-weight: 700;
    text-align: center;
    color: var(--cbb-text);
    margin: 0 0 12px;
}

/* Discount label */
.cbb-panel__discount-label {
    font-size: 12px;
    color: var(--cbb-muted);
    text-align: center;
    margin: 0 0 8px;
}

/* ─── Tier Bar ───────────────────────────────────────────────────────── */
.cbb-tier-bar {
    display: flex;
    gap: 4px;
    margin-bottom: 10px;
}

.cbb-tier-bar__step {
    flex: 1;
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    padding: 5px 4px;
    border-radius: 6px;
    background: #f0f0f0;
    color: var(--cbb-muted);
    transition: background var(--cbb-transition), color var(--cbb-transition);
}

.cbb-tier-bar__step.is-active {
    background: var(--cbb-green-light);
    color: var(--cbb-green);
}

.cbb-tier-bar__step.is-current {
    background: var(--cbb-green);
    color: #fff;
}

/* ─── Nudge copy ─────────────────────────────────────────────────────── */
.cbb-panel__nudge {
    font-size: 13px;
    color: var(--cbb-muted);
    text-align: center;
    margin: 0 0 14px;
    min-height: 1.4em;
}

/* ─── Thumbnails ─────────────────────────────────────────────────────── */
.cbb-thumbnails {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-bottom: 20px;
}

.cbb-thumbnail {
    width: 56px;
    height: 56px;
    border-radius: var(--cbb-radius-sm);
    overflow: hidden;
    border: 2px solid var(--cbb-border);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: border-color var(--cbb-transition);
}

.cbb-thumbnail--empty svg {
    width: 22px;
    height: 22px;
    color: var(--cbb-border);
}

.cbb-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.cbb-thumbnail.has-item {
    border-color: var(--cbb-green);
}

/* ─── Pricing rows ───────────────────────────────────────────────────── */
.cbb-panel__pricing {
    border-top: 1px solid var(--cbb-border);
    padding-top: 14px;
    margin-bottom: 16px;
}

.cbb-panel__subtotal-row,
.cbb-panel__discount-row,
.cbb-panel__total-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    margin-bottom: 6px;
}

.cbb-panel__discount-row[hidden] {
    display: none;
}

.cbb-panel__total-row {
    font-size: 16px;
    font-weight: 700;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--cbb-border);
    margin-bottom: 0;
}

.cbb-panel__discount-amount {
    color: var(--cbb-green);
    font-weight: 600;
}

[data-discount-row] {
    color: var(--cbb-green);
}

/* ─── CTA Button ─────────────────────────────────────────────────────── */
.cbb-cta-btn {
    width: 100%;
    padding: 14px 20px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.01em;
    border-radius: var(--cbb-radius-sm);
    border: none;
    cursor: pointer;
    transition: background var(--cbb-transition), opacity var(--cbb-transition), transform var(--cbb-transition);
    background: var(--cbb-btn-bg);
    color: #fff;
    margin-bottom: 10px;
}

.cbb-cta-btn:not(:disabled):hover {
    background: var(--cbb-btn-bg-hover);
    transform: translateY(-1px);
}

.cbb-cta-btn:disabled {
    background: #9ca3af;
    cursor: not-allowed;
    transform: none;
}

.cbb-cta-btn.is-active {
    background: var(--cbb-btn-bg);
}

.cbb-cta-btn.is-loading {
    opacity: 0.7;
    cursor: wait;
}

.cbb-cta-btn.is-added {
    background: var(--cbb-green);
    cursor: default;
    transform: none;
}

.cbb-cta-btn.is-added:not(:disabled):hover {
    background: var(--cbb-green);
    transform: none;
}

/* ─── Error message ──────────────────────────────────────────────────── */
.cbb-panel__error {
    font-size: 13px;
    color: #c0392b;
    background: #fdf0ef;
    border: 1px solid #f5c6c2;
    border-radius: var(--cbb-radius-sm);
    padding: 10px 12px;
    text-align: center;
    line-height: 1.5;
    margin: 0 0 10px;
    transition: opacity 0.4s ease;
}

.cbb-panel__error.cbb-notice--fading {
    opacity: 0;
}

/* ─── Panel footnotes ────────────────────────────────────────────────── */
.cbb-panel__shipping,
.cbb-panel__coupon-notice {
    font-size: 12px;
    color: var(--cbb-muted);
    text-align: center;
    margin: 4px 0 0;
    line-height: 1.5;
}

/* ─── alignfull / alignwide support (Gutenberg block) ───────────────────
 *
 * Matches the exact pattern from the working version:
 * negative margins cancel the theme's root padding, with --wp--style--global
 * --content-size as a nested fallback for block themes that use content-size
 * constraints rather than explicit root padding variables.
 * Both block name selectors for backwards compatibility.
 * ─────────────────────────────────────────────────────────────────────── */
.wp-block-wpc-bundle-builder-bundle-builder.alignfull,
.wp-block-cbb-woo-bundle-builder.alignfull {
    margin-left:  calc(-1 * var(--wp--style--root--padding-left,  var(--wp--style--global--content-size, 0px)));
    margin-right: calc(-1 * var(--wp--style--root--padding-right, var(--wp--style--global--content-size, 0px)));
    width:     calc(100% + var(--wp--style--root--padding-left,  0px) + var(--wp--style--root--padding-right,  0px));
    max-width: calc(100% + var(--wp--style--root--padding-left,  0px) + var(--wp--style--root--padding-right,  0px));
}

.wp-block-wpc-bundle-builder-bundle-builder.alignwide,
.wp-block-cbb-woo-bundle-builder.alignwide {
    width: 100%;
    max-width: 100%;
}

/* ─── Viewport fallback for browsers without container query support ─────
 * Targets Safari < 16, older Chromium. @supports not(container-type) means
 * "only apply if container queries are NOT supported."
 * ─────────────────────────────────────────────────────────────────────────── */
@supports not (container-type: inline-size) {
    @media (max-width: 900px) {
        .cbb-layout            { grid-template-columns: 1fr; }
        .cbb-panel             { position: static; order: -1; }
        .cbb-product-grid      { grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 540px) {
        .cbb-wrapper           { padding-top: 32px; padding-bottom: 48px; }
        .cbb-header,
        .cbb-layout            { padding-left: 16px; padding-right: 16px; }
        .cbb-product-grid      { grid-template-columns: 1fr; }
        .cbb-thumbnails        { flex-wrap: wrap; }
    }
}

.cbb-cart-label {
    display: inline-block;
    background: var(--cbb-green-light);
    color: var(--cbb-green);
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 99px;
    margin-left: 6px;
    vertical-align: middle;
}

/* ─── Notice ─────────────────────────────────────────────────────────── */
.cbb-notice {
    color: var(--cbb-muted);
    padding: 16px;
    text-align: center;
}

/* ─── Responsive — container queries (fire on wrapper width, not viewport) ─
 *
 * This is why the shortcode works inside a narrow content column on a wide
 * viewport: @container fires when .cbb-wrapper itself is ≤ 900px, regardless
 * of what the viewport is doing. @media would never fire in that scenario.
 * ─────────────────────────────────────────────────────────────────────────── */
@container cbb-bundle (max-width: 900px) {
    .cbb-layout {
        grid-template-columns: 1fr;
    }

    .cbb-panel {
        position: static;
        order: -1;
    }

    .cbb-product-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@container cbb-bundle (max-width: 540px) {
    .cbb-wrapper {
        padding-top: 32px;
        padding-bottom: 48px;
    }

    .cbb-header,
    .cbb-layout {
        padding-left: 16px;
        padding-right: 16px;
    }

    .cbb-product-grid {
        grid-template-columns: 1fr;
    }

    .cbb-thumbnails {
        flex-wrap: wrap;
    }
}