/* Mobile responsive media overrides for WooCommerce BundleCraft */

/* 1. Global / Base layout robustness for all screen sizes */
.wbc-frontend-wrapper,
.wbc-frontend-wrapper * {
    box-sizing: border-box !important;
}

.wbc-frontend-wrapper {
    width: 100%;
    max-width: var(--wbc-layout-section-width, 1200px);
    margin: var(--wbc-section-margin, 20px auto);
    overflow: hidden; /* Prevent parent-level overflow leaks */
}

.wbc-summary-container {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.wbc-validation-results-box {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.wbc-validation-list li {
    word-break: break-word;
    overflow-wrap: break-word;
}

/* Responsive progress header flex layout */
.wbc-progress-label {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.wbc-progress-label > span {
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wbc-progress-text-percent {
    flex: 0 0 auto;
    white-space: nowrap;
}

/* 2. Tablet Responsive Breakpoint */
@media (max-width: 992px) {
    .wbc-products-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 16px !important;
    }

    .wbc-summary-grid {
        flex-wrap: wrap !important;
        gap: 16px !important;
    }

    .wbc-progress-wrapper {
        flex: 1 1 100% !important;
        width: 100% !important;
        margin-bottom: 8px;
    }

    .wbc-summary-pricing {
        flex: 1 1 auto !important;
        text-align: left !important;
    }

    .wbc-checkout-controls {
        flex: 1 1 auto !important;
    }

    .wbc-add-to-cart-placeholder-btn {
        width: 100% !important;
    }
}

/* 3. Mobile Responsive Sticky Bar Breakpoint */
@media (max-width: 768px) {
    .wbc-filter-section {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
    }

    .wbc-search-input,
    .wbc-cat-filter {
        width: 100% !important;
    }

    .wbc-products-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
}

/* Dedicated Sticky Summary Bar */
.wbc-mobile-sticky-bar {
        display: none;
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        background: var(--wbc-sticky-bg-color, rgba(255, 255, 255, 0.95)) !important;
        backdrop-filter: blur(20px) !important;
        border-radius: var(--wbc-sticky-border-radius, 0px) !important;
        z-index: 99999 !important;
        box-sizing: border-box !important;
        padding: 0 !important;
        flex-direction: column !important;
    }

    .wbc-mobile-sticky-bar.wbc-sticky-bar-top {
        top: -200px;
        bottom: auto !important;
        border-bottom: 1px solid var(--wbc-border, rgba(226, 232, 240, 0.8)) !important;
        box-shadow: 0 5px 15px rgba(0,0,0,0.05) !important;
    }

    .wbc-mobile-sticky-bar.wbc-sticky-bar-bottom {
        bottom: -200px;
        top: auto !important;
        border-top: 1px solid var(--wbc-border, rgba(226, 232, 240, 0.8)) !important;
        box-shadow: var(--wbc-sticky-shadow, 0 -5px 15px rgba(0,0,0,0.05)) !important;
    }

    .wbc-mobile-sticky-bar.wbc-sticky-bar-top .wbc-sticky-bar-progress-wrapper {
        order: 2 !important;
    }

    .wbc-mobile-sticky-bar.wbc-sticky-bar-bottom .wbc-sticky-bar-progress-wrapper {
        order: -1 !important;
    }

    .wbc-sticky-bar-progress-wrapper {
        width: 100% !important;
        height: 4px !important;
    }

    .wbc-sticky-bar-progress-wrapper .wbc-progress-bar-container {
        height: 4px !important;
        background: rgba(0, 0, 0, 0.05) !important;
        border-radius: 0 !important;
        margin: 0 !important;
    }

    .wbc-sticky-bar-progress-wrapper .wbc-progress-bar-fill {
        height: 4px !important;
        border-radius: 0 !important;
        background: var(--wbc-progress-bar, var(--wbc-primary, #6366f1)) !important;
        transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }

    .wbc-sticky-bar-main-row {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 10px 16px !important;
        padding-bottom: calc(10px + env(safe-area-inset-bottom)) !important;
        height: auto !important;
        box-sizing: border-box !important;
    }

    .wbc-sticky-bar-left-side {
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        flex: 1 !important;
        min-width: 0 !important;
    }

    .wbc-sticky-bar-details-toggle {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
        color: var(--wbc-text-muted, #64748b) !important;
        font-size: 10px !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
        user-select: none !important;
        min-width: 44px !important;
    }

    .wbc-sticky-bar-toggle-chevron {
        font-size: 10px !important;
        line-height: 1 !important;
        margin-bottom: 2px !important;
        transition: transform 0.2s ease !important;
    }

    .wbc-sticky-bar-info {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        min-width: 0 !important;
        cursor: pointer !important;
    }

    .wbc-sticky-bar-count {
        font-size: 11px !important;
        font-weight: 600 !important;
        color: var(--wbc-text-muted, #64748b) !important;
        white-space: nowrap !important;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .wbc-sticky-bar-count .wbc-total-selected-count {
        color: var(--wbc-text, #1e293b) !important;
        font-weight: 700 !important;
    }

    .wbc-sticky-bar-remaining-wrap {
        font-size: 10px !important;
        font-weight: 500 !important;
    }

    .wbc-sticky-bar-main-row .wbc-summary-price {
        font-size: 16px !important;
        font-weight: 700 !important;
        color: var(--wbc-price-color, var(--wbc-primary, #6366f1)) !important;
        margin-top: 2px !important;
        line-height: 1.2 !important;
    }

    .wbc-sticky-bar-right-side {
        flex: 0 0 auto !important;
    }

    .wbc-sticky-bar-right-side .wbc-add-to-cart-placeholder-btn {
        width: auto !important;
        min-width: 120px !important;
        height: 40px !important;
        padding: 0 16px !important;
        font-size: 12px !important;
        font-weight: 600 !important;
        border-radius: 8px !important;
        white-space: nowrap !important;
        box-sizing: border-box !important;
    }

    .wbc-sticky-bar-details-panel {
        border-top: 1px solid var(--wbc-border, rgba(226, 232, 240, 0.8)) !important;
        background: rgba(0, 0, 0, 0.02) !important;
        max-height: 250px !important;
        overflow-y: auto !important;
        box-sizing: border-box !important;
    }

    .wbc-sticky-bar-details-content {
        padding: 16px !important;
    }

    .wbc-sticky-bar-details-content .wbc-validation-results-box {
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
    }

    .wbc-sticky-bar-details-content .wbc-validation-list {
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
    }

    .wbc-sticky-bar-details-content .wbc-validation-list li {
        font-size: 12px !important;
        margin-bottom: 8px !important;
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
    }

    .wbc-sticky-bar-details-content .wbc-validation-list li:last-child {
        margin-bottom: 0 !important;
    }

/* 4. Extreme Micro Screen Width Safety (320px and below) */
@media (max-width: 340px) {
    .wbc-frontend-wrapper {
        padding: 8px !important;
    }

    .wbc-summary-container {
        padding: 6px 8px 8px 8px !important;
        border-radius: 10px !important;
    }
    
    .wbc-summary-container:not(.wbc-summary-expanded) .wbc-add-to-cart-placeholder-btn {
        padding: 6px 12px !important;
        font-size: 10px !important;
        height: 32px !important;
    }
}