/**** ====================================================================== ****/
/**** =================== WIZARD CARD CONFIGURATOR ======================= ****/
/**** ====================================================================== ****/

/* -------------------------------------------------------------------------
   1. CONFIGURATOR CONTAINER
   ------------------------------------------------------------------------- */
.wpb-woocommerce-configurator { background-color: #fff; min-height: 100dvh;
    .btn { min-height: 4rem; --font-size: 1.6rem; --padding-x: 2.4rem; --padding-y: .5rem; }
}

.wpb-woocommerce-configurator .container { max-width: 80rem; padding-left: 2rem; padding-right: 2rem; display: block; height: auto; flex-direction: unset; }

/* -------------------------------------------------------------------------
   1a. HEADER (back link + logo)
   ------------------------------------------------------------------------- */
.wpb-config__header { min-height: 9rem; display: flex; align-items: center; justify-content: center; position: relative; padding: 2rem 0;
    .btn.btn-back { position: absolute; left: 0; top: 2rem; }  
    .logo { width: 14rem; display: flex; align-items: center; justify-content: center; 
        img { width: 100%; height: auto; }
    }
}

.wpb-config__page-title { text-align: left; 
    h1 { font-size: clamp(2.4rem, 4vw, 3.2rem); font-weight: 700; color: var(--clr-text); margin: 0 0 0.4rem 0; line-height: 1.2; }
    p { font-size: clamp(1.6rem, 4vw, 2rem); color: var(--clr-text); margin: 0; line-height: 1.5; }
}

@media (max-width: 575.98px) {
    .wpb-config__header { 
        .btn.btn-back { min-width: 4rem; padding-inline: 0;
            .btn__text { display: none; }
        }
    }
}

@media (min-width: 992px) {
    .wpb-config__header { padding-top: 3.2rem; padding-bottom: 6.4rem;
        .btn.btn-back { top: 3.2rem; }
    }
}

/* -------------------------------------------------------------------------
   1c. TWO-COLUMN LAYOUT (steps + sidebar)
   ------------------------------------------------------------------------- */
.wpb-config__layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }

.wpb-woocommerce-configurator {
    .wpb-config__steps { display: flex; flex-direction: column; gap: 0; padding-bottom: 4rem; }

    .wpb-config__step { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); border-radius: 0; padding: 3.2rem 0; border: none; border-bottom: 1px solid rgba(var(--clr-light-purple-rgb), .5); background-color: transparent; transition: opacity var(--ts-25) ease;
        .wpb-config__step-header { margin-bottom: 2rem;
            h2 { display: flex; align-items: center; gap: 1.2rem; font-size: clamp(1.8rem, 4vw, 2.4rem); margin-bottom: 1rem;
                .step-number { display: inline-flex; align-items: center; justify-content: center; width: 2.9rem; height: 2.9rem; min-width: 2.9rem; border-radius: 50%; background: var(--clr-secondary); color: #fff; font-size: 0; font-weight: 700; line-height: 1;
                    &::after { content: attr(data-step-number); font-size: 1.6rem; color: #fff; }
                }
            }
            p { color: rgba(var(--clr-text-rgb), .8); }
        }
        .wpb-config__step-body {

            .wpb-subscription-skip { display: flex; justify-content: center; margin-top: 2rem; }
        }


        /* Variations */
        &.is-disabled {
            .wpb-config__step-body > *:not(.wpb-subscription-skip) { pointer-events: none; opacity: .35; }
        }
        
        &.is-valid { }
    }
}

@media (min-width: 992px) {
    .wpb-woocommerce-configurator {
        .wpb-config__step {  padding: 4.8rem 0;
            .wpb-config__step-header { margin-bottom: 3.2rem; }
        }
    }
}

/* =========================================================================
   STEP 1: QUANTITY SELECTOR
   ========================================================================= */
.wpb-quantity-selector { background-color: var(--clr-faded-purple); display: inline-flex; align-items: center; background-color: var(--clr-faded-purple); border-radius: 5rem; overflow: hidden; height: 5.2rem;
    .wpb-quantity-btn { padding: 0; cursor: pointer; border: none; background: transparent; display: inline-grid; place-items: center; width: 4.2rem; min-width: 4.2rem; height: 100%; }
    .wpb-quantity-input[type="number"] { padding: 0; font-size: 1.8rem; font-weight: 700; --border-radius: 0; --border: none; --focus-border: none; outline: none; border-radius: 0; background: transparent; text-align: center; width: 7.9rem; border-left: 1px solid rgba(var(--clr-text-rgb), .15)!important; border-right: 1px solid rgba(var(--clr-text-rgb), .15)!important; min-height: 3.6rem; 
        &::-webkit-outer-spin-button, &::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
    }

    /* Variations */
    &.wpb-quantity-selector--small { height: 4rem; background-color: #fff; border: 1px solid var(--clr-light-purple);
        .wpb-quantity-btn { min-width: 3rem; width: 3rem; 
            &.wpb-quantity-btn--minus { justify-content: end; }
            &.wpb-quantity-btn--plus { justify-content: start; }
        }
        .wpb-quantity-input[type="number"] { border: none!important; width: 4.5rem; font-size: 1.6rem; }
    }
}

/* =========================================================================
   STEP 2: SUBSCRIPTION CARDS
   ========================================================================= */
.wpb-subscription-grid { display: grid; grid-template-columns: repeat(var(--gc, 1), minmax(0, 1fr)); gap: 1.6rem;
    .wpb-subscription-card { outline: 3px solid transparent; outline-offset: -3px; display: flex; flex-direction: column; background-color: var(--clr-faded-purple); border-radius: 1.6rem; cursor: pointer; position: relative; transition: outline 0.2s ease;
        .wpb-subscription-card__header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--clr-light-purple); padding: 2.4rem;
            .wpb-subscription-card__name { line-height: 1.3; font-size: 1.6rem; color: rgba(var(--clr-text-rgb), .75);
                strong { font-size: 2.2rem; display: block; width: 100%; color: var(--clr-text); }
                .badge-group { margin-top: .5rem; }
            }
    
            .wpb-subscription-card__price { line-height: 1.3; text-align: right; white-space: nowrap; flex-shrink: 0; font-size: 1.6rem; color: rgba(var(--clr-text-rgb), .75);
                span { display: block; } 
                .price-amount { font-weight: 700; font-size: 2.2rem; display: block; width: 100%; color: var(--clr-text); }
            }
        }        

        .wpb-subscription-card__body { padding: 2.4rem; flex-grow: 1; 
            .wpb-subscription-card__includes { font-size: 1.3rem; font-weight: 500; color: rgba(var(--wpb-text), .65); margin: 0 0 0.6rem 0; line-height: 1.4; }
            .wpb-subscription-card__features { list-style: none; padding: 0; font-size: 1.5rem;
                i { color: var(--clr-secondary); margin-right: .4rem; }
                li + li { margin-top: .2em; }  
            }   
        }

        .wpb-subscription-card__footer { padding: 0 2.4rem 2.4rem 2.4rem; 
            .wpb-select-btn { display: grid; grid-template-columns: minmax(0,1fr); }
        } 
    }
}

.wpb-configurator-cta-card { display: flex; flex-direction: column; justify-content: center; padding: 2rem; background-color: var(--clr-faded-purple); border-radius: 1.6rem; text-align: center; gap: 1.4rem;
    .wpb-configurator-cta-card__title { font-size: clamp(1.8rem, 4vw, 2.4rem); }
}

@media (min-width: 576px) {
    .wpb-subscription-grid { --gc: 2; }
}

/* Selected state */
.btn-check:checked + .wpb-subscription-card { border-color: var(--clr-secondary); outline: 3px solid var(--clr-secondary); }

/* =========================================================================
   STEP 3: DESIGN OPTIONS
   ========================================================================= */
.wpb-design-options { display: flex; flex-direction: column; gap: 1rem; }

/* Design card */
.wpb-design-card { display: block; background-color: var(--clr-faded-purple); border-radius: 1.6rem; padding: 2.4rem; cursor: pointer;  outline: 3px solid transparent; outline-offset: -3px; transition: outline 0.2s ease; text-decoration: none;
    .wpb-design-card__name { display: block; font-size: 1.8rem; font-weight: 700; line-height: 1.3; margin-bottom: .75rem; }
    .wpb-design-card__content { display: flex; flex-direction: column; justify-content: space-between; gap: 1.4rem; }
    .wpb-design-card__description { font-size: 1.6rem; line-height: 1.4; color: rgba(var(--clr-text-rgb), .75); margin-bottom: .75rem; }
    
    .wpb-design-card__badge { display: inline-flex; align-items: center; min-height: 2.6rem; font-size: 1.3rem; font-weight: 700; padding: 0.4rem 1rem .2rem 1rem; border-radius: 2rem; line-height: 1;
        &.wpb-design-card__badge--free { background-color: var(--clr-secondary); color: #fff; text-transform: uppercase; }
        &.wpb-design-card__badge--price { background-color: var(--clr-light-purple); }
    }
}

.btn-check:checked + .wpb-design-card { outline: 3px solid var(--clr-secondary); }

@media (min-width: 768px) {
    .wpb-design-card .wpb-design-card__content { flex-direction: row; align-items: center; }
}


/* =========================================================================
   SHARED: "KIEZEN +" / "GESELECTEERD" BUTTON
   ========================================================================= */
.wpb-select-btn { display: grid; position: relative; grid-template-areas: "buttons";
    > * { grid-area: buttons; }
}

.wpb-select-btn__default, .wpb-select-btn__selected { display: inline-flex; align-items: center; justify-content: center; gap: .8rem; font-size: 1.6rem; font-weight: 700; padding: 0.5rem 2rem; min-height: 4rem; border-radius: 3rem; white-space: nowrap; transition: opacity 0.15s ease, transform 0.15s ease; line-height: 1.5;
    i { font-size: .9em; } 
}

.wpb-select-btn__default { background-color: #fff; border: 1px solid var(--clr-light-purple); color: var(--clr-text); }
.wpb-select-btn__selected { background-color: var(--clr-secondary); color: #fff; border: 1px solid var(--clr-secondary); opacity: 0; pointer-events: none; }

/* Show "Geselecteerd" when checked */
.btn-check:checked + .wpb-subscription-card .wpb-select-btn__default, .btn-check:checked + .wpb-design-card .wpb-select-btn__default { opacity: 0; pointer-events: none; }
.btn-check:checked + .wpb-subscription-card .wpb-select-btn__selected, .btn-check:checked + .wpb-design-card .wpb-select-btn__selected { opacity: 1; pointer-events: all; }


/* =========================================================================
   CONFIGURATOR STEP (from BaseStep render)
   ========================================================================= */
.wpb-configurator-step {
    padding: 3.2rem 0;
    border-bottom: 1px solid rgba(var(--wpb-light-purple), .6);
}

.wpb-configurator-step__header {
    display: flex;
    align-items: flex-start;
    gap: 1.4rem;
    margin-bottom: 2rem;
}

.wpb-configurator-step__number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.2rem;
    height: 3.2rem;
    min-width: 3.2rem;
    border-radius: 50%;
    background: rgb(var(--wpb-secondary));
    color: #fff;
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1;
    flex-shrink: 0;
}

.wpb-configurator-step__text {
    flex-grow: 1;
    padding-top: 0.3rem;
}

.wpb-configurator-step__title {
    font-size: clamp(1.8rem, 3vw, 2.4rem);
    font-weight: 700;
    color: rgb(var(--wpb-text));
    margin: 0;
    line-height: 1.3;
}

.wpb-configurator-step__description {
    font-size: 1.4rem;
    line-height: 1.5;
    color: rgba(var(--wpb-text), .55);
    margin: 0.3rem 0 0 0;
}

.wpb-configurator-step__content {
    padding-left: 4.6rem;
}

/* =========================================================================
   STEP: DISPLAYS TABLE
   ========================================================================= */
.wpb-displays-table { background-color: #fff; border-radius: .8rem; border: 1px solid rgba(var(--clr-light-purple-rgb), .35); overflow: hidden; 
    .wpb-displays-table__header { display: grid; grid-template-columns: 1fr 13.5rem; align-items: center; padding: 2rem 2.4rem; border-bottom: 1px solid rgba(var(--clr-light-purple-rgb), .35); background-color: var(--clr-faded-purple);
        .wpb-displays-table__col-label { font-size: 1.2rem; font-weight: 700; text-transform: uppercase; letter-spacing: 5%; }
    }

    .wpb-displays-table__row { display: flex; justify-content: space-between; align-items: center; padding: 1.4rem 2.4rem; border-bottom: 1px solid rgba(var(--clr-light-purple-rgb), .2); transition: background-color 0.15s ease;
        .wpb-displays-table__product-name { font-size: 1.6rem; font-weight: 700; }
        .wpb-displays-table__quantity .wpb-quantity-input[type="number"] { width: 7.3rem; }

        &:last-child { border-bottom: none; }
        &:hover { background-color: rgba(var(--clr-light-purple-rgb), .06); }
    }
}








/* =========================================================================
   STEP 4: ACCESSORIES GRID (upsells)
   ========================================================================= */
.wpb-accessories-grid {
    .wpb-accessory-card { padding: 2.4rem; display: flex; flex-direction: column; background-color: var(--clr-faded-purple); border-radius: 1.6rem; 
        .wpb-accessory-card__image { position: relative; overflow: hidden; border-radius: 1rem; margin-bottom: 2.4rem;
            img { mix-blend-mode: multiply; position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; object-fit: contain; }
            &::before { content: ''; display: block; padding-top: 75%; }
        } 
        .wpb-accessory-card__info { margin-bottom: 1.4rem; flex-grow: 1;
            .wpb-accessory-card__name { display: block; font-size: 1.6rem; font-weight: 700; }
            .wpb-accessory-card__price { display: block; font-size: 1.4rem; color: rgba(var(--clr-text-rgb), .75); font-weight: 400; }
        }
        .wpb-accessory-card__colors { display: flex; gap: 0.8rem; margin-bottom: 1.4rem; flex-wrap: wrap; align-items: center; }
        .wpb-color-swatch { width: 3.6rem; height: 3.6rem; border-radius: 50%; border: 3px solid transparent; cursor: pointer; transition: all 0.2s ease; padding: 0; margin: 0; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            &:hover { transform: scale(1.1); box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15); }
            &.is-selected { border-color: #E91E63; box-shadow: 0 0 0 1px #E91E63, 0 3px 8px rgba(233, 30, 99, 0.3); transform: scale(1.05); }
            &:focus { outline: 2px solid #E91E63; outline-offset: 2px; }
        }
    }

    .wpb-swiper-wrapper {
        .swiper-buttons { margin-top: 0; padding-top: 3.2rem; padding-bottom: 0; }
    }
}

/* =========================================================================
   SIDEBAR: "JE SAMENSTELLING" SUMMARY
   ========================================================================= */
.wpb-config__sidebar {
    display: none; /* hidden on mobile, shown on desktop */
}

.wpb-config__summary { position: sticky; top: 3.2rem;
    .wpb-config__summary-title { font-size: 2.4rem; font-weight: 700; color: var(--clr-text); margin: 0 0 1.8rem 0; line-height: 1.3; }

    .wpb-config__summary-items { display: flex; flex-direction: column; gap: 1.4rem; padding-bottom: 1.8rem; border-bottom: 1px solid rgba(var(--clr-light-purple), .35); margin-bottom: 1.4rem;
        

        .wpb-summary__item { display: grid; grid-template-columns: 6.6rem 1fr auto; gap: 1.6rem; align-items: center;
            .wpb-summary__item-image { position: relative; width: 6.6rem; height: 6.6rem; border-radius: 1.2rem; overflow: visible; flex-shrink: 0; 
                img { width: 100%; height: 100%; object-fit: cover; border-radius: 0.8rem; background-color: rgba(var(--clr-light-purple-rgb), .12); }
            }
            .wpb-summary__item-info { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
            .wpb-summary__item-name { font-size: 1.8rem; font-weight: 700; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
            .wpb-summary__item-price-label { font-size: 1.4rem; color: rgba(var(--clr-text-rgb), .75); font-weight: 400; line-height: 1.4; }
            .wpb-summary__item-total { font-size: 1.6rem; font-weight: 700; white-space: nowrap; text-align: right; }
            .wpb-summary__item-badge { position: absolute; top: -0.4rem; right: -0.4rem; display: inline-flex; align-items: center; justify-content: center; min-width: 1.8rem; height: 1.8rem; padding: 0 0.4rem; border-radius: 2rem; background: var(--clr-secondary); color: #fff; font-size: 1rem; font-weight: 700; line-height: 1; }
        }
    }

    .wpb-config__summary-totals { padding-top: 2.8rem; margin-top: 2.8rem; border-top: 1px solid rgba(var(--clr-light-purple-rgb), .5); 
        .wpb-summary__total-row { display: flex; justify-content: space-between; align-items: center;
            .wpb-summary__total-label { font-size: 1.6rem; font-weight: 400; }
            .wpb-summary__total-value { font-size: 1.6rem; font-weight: 800; }
        }
    }
}

.wpb-summary__empty { font-size: 1.3rem; color: rgba(var(--clr-text-rgb), .45); text-align: center; padding: 2rem 0; }


/* =========================================================================
   SUBMIT SECTION (sticky bottom bar)
   ========================================================================= */
.wpb-config__submit-section { display: flex; flex-direction: column; align-items: start; padding-bottom: 3.2rem;
    .btn { --padding-x: 4rem; min-height: 6.5rem; border-radius: 6rem;
        &:disabled { pointer-events: none; box-shadow: none; } 
    }
    .wpb-usps { margin-top: 3.7rem;
        li { color: var(--clr-text);
            i { --color: var(--clr-secondary-rgb); }
        }
    }
}

/* =========================================================================
   ERROR STATES
   ========================================================================= */
.wpb-woocommerce-configurator .wpb-config__errors { margin-top: 1.4rem; padding: 1rem 1.4rem; background-color: #fef2f2; border: 1px solid #fecaca; border-radius: 0.8rem; font-size: 1.3rem; color: #b91c1c; }
.wpb-woocommerce-configurator .wpb-error-list { margin: 0; padding-left: 1.6rem; }

/* =========================================================================
   CONFIG NOTICE
   ========================================================================= */
.wpb-config-notice { padding: 1.4rem 1.8rem; background-color: #fffbeb; border: 1px solid #fde68a; color: #92400e; border-radius: 0.8rem; font-size: 1.4rem; }

/* =========================================================================
   HIDDEN RADIO INPUTS
   ========================================================================= */
.btn-check { position: absolute; clip: rect(0, 0, 0, 0); pointer-events: none; }

/* =========================================================================
   RESPONSIVE: MOBILE
   ========================================================================= */

@media (max-width: 575.98px) {
    .wpb-configurator-step__content { padding-left: 0; }
}

@media (min-width: 992px) {
    .wpb-woocommerce-configurator .container { max-width: 100rem; }
    .wpb-config__layout { grid-template-columns: minmax(0, 1fr) minmax(0, 28rem); gap: 3.6rem; }
    .wpb-config__sidebar { display: block; border-left: 1px solid rgba(var(--clr-light-purple-rgb), .5); padding-left: 3.6rem; }
}

@media (min-width: 1200px) {
    .wpb-woocommerce-configurator .container { max-width: 110rem; }
    .wpb-config__layout { grid-template-columns: minmax(0, 1fr) minmax(0, 38.6rem); gap: 6.4rem; }
}

/* =========================================================================
   Succes pagina
   ========================================================================= */
.wpb-woocommerce-configurator--success {
    .wpb-config__body { text-align: center; max-width: 57rem; margin: auto; padding-bottom: 6.4rem;
        > * + * { margin-top: 1em; }
        h1 { font-size: clamp(1.6rem, 5vw, 2rem); }
        .btn-group { justify-content: center; }
    }
    .wpb-config__upsells { padding-bottom: 6.4rem;
        .wpb-config__upsells-text { padding-right: 11.6rem;
            h2 { font-size: clamp(2rem, 4vw, 2.4rem); }
        }
    }
}

/* =========================================================================
   SUBSCRIPTION: UNAVAILABLE STATE (max cards exceeded)
   ========================================================================= */
.wpb-subscription-card.is-unavailable { pointer-events: none; position: relative;
    .wpb-subscription-card__header,
    .wpb-subscription-card__body,
    .wpb-subscription-card__footer { opacity: 0.4; }
}

.wpb-subscription-card > .badge-group { display: flex; justify-content: center; padding: 0; margin: 0; background-color: #fef2f2; border-top: 1px solid #fecaca; border-bottom: 1px solid #fecaca; }
.badge.badge-unavailable { --bg-color: transparent; --color: #b91c1c; --font-size: 1.2rem; --padding: 0.6rem 1.6rem; --border-radius: 0; font-weight: 700; letter-spacing: 0.01em; width: 100%; text-align: center; }

/* =========================================================================
   SIDEBAR: BULK DISCOUNT BADGE
   ========================================================================= */
.wpb-summary__discount-badge { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 1.1rem; font-weight: 700; color: #15803d; background-color: #f0fdf4; border: 1px solid #bbf7d0; padding: 0.2rem 0.7rem; border-radius: 0.4rem; margin-top: 0.3rem; line-height: 1.4; }

/* Strikethrough original price in sidebar */
.wpb-summary__item-price-label s { color: rgba(var(--clr-text-rgb), .4); font-weight: 400; text-decoration: line-through; margin-right: 0.3rem; }

/* =========================================================================
   DESIGN: BADGE TRANSITION
   ========================================================================= */
.wpb-design-card__badge { transition: background-color 0.25s ease, color 0.25s ease; }


.wpb-woocommerce-configurator--login form.login { max-width: 40rem; margin: auto; 
    .form-row:has([name="username"]), .form-row:has([name="password"]), .form-row:has([type="submit"]) { display: grid; grid-template-columns: minmax(0, 1fr); grid-column: span 2; width: 100%; gap: .8rem;
        label { padding: 0; }
        .woocommerce-form-login__rememberme { padding-left: 2rem; }
    }
    .clear { display: none!important; } 
}

@media (min-width: 1200px) {
    .wpb-woocommerce-configurator--login {  }
}