/* ==========================================================================
   WC Bundle & Composite — Frontend v3
   ========================================================================== */

/* ---- Shared ---- */
.mwc-wcbc-product-wrapper {
    margin: 24px 0; padding: 24px;
    border: 2px solid #e8e8e8; border-radius: 10px; background: #fafafa;
}
.mwc-wcbc-section-title {
    font-size: 1.15em; margin: 0 0 16px;
    padding-bottom: 12px; border-bottom: 1px solid #e0e0e0;
}
.mwc-wcbc-cart-form .mwc-wcbc-cart-row {
    display: flex; align-items: center; gap: 12px; margin-top: 16px;
}
.mwc-wcbc-cart-form .quantity { margin: 0; }

/* ---- Bundle component cards ---- */
.mwc-wcbc-component-list { margin-bottom: 16px; }

.mwc-wcbc-component-card {
    display: flex; align-items: center; gap: 14px;
    padding: 10px 14px; margin-bottom: 6px;
    background: #fff; border: 1px solid #eee; border-radius: 8px;
    transition: border-color .2s;
}
.mwc-wcbc-component-card:hover { border-color: #bbb; }
.mwc-wcbc-component-card.mwc-wcbc-oos {
    opacity: .6; border-color: #e53935;
}

.mwc-wcbc-component-thumb { flex-shrink: 0; width: 50px; height: 50px; }
.mwc-wcbc-component-thumb img { width: 50px; height: 50px; object-fit: cover; border-radius: 6px; }

.mwc-wcbc-component-details {
    flex: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
}
.mwc-wcbc-component-name { font-weight: 600; color: inherit; text-decoration: none; }
.mwc-wcbc-component-name:hover { text-decoration: underline; }
.mwc-wcbc-component-meta { font-size: .9em; color: #666; margin-left: auto; }

.mwc-wcbc-oos-label {
    font-size: .8em; color: #e53935; font-weight: 600;
    background: #ffebee; padding: 2px 8px; border-radius: 3px;
}

/* ---- Badges ---- */
.mwc-wcbc-savings-badge, .mwc-wcbc-discount-badge {
    display: inline-block; padding: 6px 16px; border-radius: 20px;
    font-weight: 700; font-size: .9em; margin-bottom: 16px;
}
.mwc-wcbc-savings-badge { background: #e8f5e9; color: #2e7d32; }
.mwc-wcbc-discount-badge { background: #ff5722; color: #fff; }

/* ---- Composite steps ---- */
.mwc-wcbc-step {
    margin-bottom: 16px; background: #fff;
    border: 1px solid #e0e0e0; border-radius: 8px; overflow: hidden;
}

.mwc-wcbc-step-header {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 16px; background: #f5f5f5; border-bottom: 1px solid #eee;
}
.mwc-wcbc-step-number {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; border-radius: 50%;
    background: #333; color: #fff; font-weight: 700; font-size: .85em; flex-shrink: 0;
}
.mwc-wcbc-step-title { font-weight: 600; font-size: 1em; }
.mwc-wcbc-required { color: #e53935; margin-left: 2px; }
.mwc-wcbc-step-hint { font-size: .8em; color: #888; margin-left: auto; }

.mwc-wcbc-step-body { padding: 14px 16px; }

/* ---- Unit selects (1 dropdown per unit of choice) ---- */
.mwc-wcbc-unit-select { margin-bottom: 10px; }
.mwc-wcbc-unit-select:last-child { margin-bottom: 0; }

.mwc-wcbc-unit-label {
    display: block; font-size: .85em; font-weight: 600;
    color: #555; margin-bottom: 4px;
}

.mwc-wcbc-select {
    width: 100%; padding: 10px 12px;
    border: 1px solid #ccc; border-radius: 6px;
    font-size: .95em; background: #fff; appearance: auto;
    -webkit-appearance: auto;
}
.mwc-wcbc-select:focus { border-color: #0073aa; outline: none; box-shadow: 0 0 0 1px #0073aa; }
.mwc-wcbc-select option:disabled { color: #bbb; }

.mwc-wcbc-no-products { color: #999; font-style: italic; margin: 0; }

/* ---- Composite summary ---- */
.mwc-wcbc-composite-summary {
    margin-top: 20px; padding: 16px 20px;
    background: #f0f0f0; border: 2px solid #ddd; border-radius: 10px;
}

.mwc-wcbc-summary-recap { margin-bottom: 12px; font-size: .9em; line-height: 1.6; }
.mwc-wcbc-summary-recap:empty { display: none; }

.mwc-wcbc-recap-line { padding: 4px 0; border-bottom: 1px dotted #ccc; }
.mwc-wcbc-recap-line:last-child { border-bottom: none; }
.mwc-wcbc-recap-slot { font-weight: 600; }
.mwc-wcbc-recap-product { color: #444; }

/* Price rows */
.mwc-wcbc-summary-price { margin-bottom: 14px; }

.mwc-wcbc-price-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 2px 0; font-size: .95em;
}
.mwc-wcbc-price-row-total { font-size: 1.15em; padding-top: 6px; margin-top: 4px; border-top: 1px solid #ccc; }

.mwc-wcbc-price-label { color: #555; }
.mwc-wcbc-price-before { color: #999; text-decoration: line-through; }
.mwc-wcbc-price-discount-amount { color: #2e7d32; font-weight: 600; }
.mwc-wcbc-price-total { font-weight: 700; color: #e53935; }

.mwc-wcbc-summary-actions {
    display: flex; align-items: center; gap: 12px;
}
.mwc-wcbc-summary-actions .quantity { margin: 0; }

.mwc-wcbc-atc-btn:disabled { opacity: .5; cursor: not-allowed; }

/* ---- Order component label ---- */
.mwc-wcbc-component-label {
    font-size: .85em; color: #666; font-style: italic; margin-top: 4px;
}

/* ---- Bundle variation select ---- */
.mwc-wcbc-bundle-variation-select {
    width: 100%; margin-top: 8px;
}
.mwc-wcbc-bundle-variation-select .mwc-wcbc-select {
    font-size: .9em;
}

/* ---- Bundle summary (same structure as composite) ---- */
.mwc-wcbc-bundle-summary {
    margin-top: 20px; padding: 16px 20px;
    background: #f0f0f0; border: 2px solid #ddd; border-radius: 10px;
}
.mwc-wcbc-bundle-summary .mwc-wcbc-summary-price { margin-bottom: 14px; }
.mwc-wcbc-bundle-summary .mwc-wcbc-summary-actions {
    display: flex; align-items: center; gap: 12px;
}
.mwc-wcbc-bundle-summary .mwc-wcbc-summary-actions .quantity { margin: 0; }

.mwc-wcbc-price-note {
    font-size: .8em; color: #888; font-style: italic; margin: 6px 0 0;
}

.mwc-wcbc-bundle-discount-amount { color: #2e7d32; font-weight: 600; }
.mwc-wcbc-bundle-subtotal { color: #999; text-decoration: line-through; }

/* ---- Responsive ---- */
@media (max-width: 600px) {
    .mwc-wcbc-product-wrapper { padding: 16px; }
    .mwc-wcbc-step-header { flex-wrap: wrap; }
    .mwc-wcbc-step-hint { width: 100%; margin-left: 38px; }
    .mwc-wcbc-summary-actions { flex-direction: column; align-items: stretch; }
    .mwc-wcbc-component-meta { margin-left: 0; width: 100%; }
}

/* Embedded via shortcode (outside the product page) */
.mwc-wcbc-embed { margin: 24px 0; }
.mwc-wcbc-embed-title { margin: 0 0 12px; font-size: 1.3em; font-weight: 700; }
.mwc-wcbc-embed .mwc-wcbc-product-wrapper { margin: 0; }

/* =========================================================================
   CONTAINMENT — keeps the interface inside narrow containers
   (Flatsome/UX Builder columns, sidebars, any constrained wrapper).
   The existing @media rules test the viewport, which stays wide inside a
   1/3 column, so the layout never adapted. Container queries fix that.
   ========================================================================= */

/* Never exceed the parent, whatever the theme's box model */
.mwc-wcbc-product-wrapper,
.mwc-wcbc-product-wrapper * {
    box-sizing: border-box;
    max-width: 100%;
}

.mwc-wcbc-product-wrapper {
    width: 100%;
    overflow-wrap: break-word;
    word-break: break-word;
}

/* Flex children refuse to shrink below their content unless min-width is reset.
   Long product names in selects and recap lines are the usual overflow source. */
.mwc-wcbc-step-header,
.mwc-wcbc-component-row,
.mwc-wcbc-component-meta,
.mwc-wcbc-price-row,
.mwc-wcbc-summary-actions,
.mwc-wcbc-summary-recap {
    min-width: 0;
}
.mwc-wcbc-step-title,
.mwc-wcbc-component-name,
.mwc-wcbc-recap-line {
    min-width: 0;
    overflow-wrap: break-word;
}

/* Selects carry an intrinsic width from their longest option */
.mwc-wcbc-select {
    width: 100%;
    min-width: 0;
    max-width: 100%;
}

/* Quantity input + button: allow wrapping instead of pushing out */
.mwc-wcbc-summary-actions {
    flex-wrap: wrap;
}
.mwc-wcbc-summary-actions .quantity {
    flex: 0 0 auto;
}
.mwc-wcbc-atc-btn {
    flex: 1 1 auto;
    min-width: 0;
    white-space: normal;
}

/* Images stay fluid */
.mwc-wcbc-component-thumb img {
    max-width: 100%;
    height: auto;
}

/* Enable container queries on the embed and the wrapper itself */
.mwc-wcbc-embed,
.mwc-wcbc-product-wrapper {
    container-type: inline-size;
}

/* Narrow container (not narrow screen) */
@container (max-width: 600px) {
    .mwc-wcbc-product-wrapper { padding: 16px; }
    .mwc-wcbc-step-header { flex-wrap: wrap; }
    .mwc-wcbc-step-hint { width: 100%; margin-left: 0; }
    .mwc-wcbc-summary-actions { flex-direction: column; align-items: stretch; }
    .mwc-wcbc-component-meta { margin-left: 0; width: 100%; }
}

@container (max-width: 420px) {
    .mwc-wcbc-product-wrapper { padding: 12px; }
    .mwc-wcbc-step-body { padding: 10px 12px; }
    .mwc-wcbc-step-header { padding: 10px 12px; gap: 8px; }
    .mwc-wcbc-component-row { flex-wrap: wrap; gap: 8px; padding: 8px 10px; }
    .mwc-wcbc-component-thumb,
    .mwc-wcbc-component-thumb img { width: 40px; height: 40px; }
    .mwc-wcbc-price-row { font-size: .88em; }
    .mwc-wcbc-summary-recap,
    .mwc-wcbc-summary-price { font-size: .92em; }
}

/* Fallback for browsers without container query support */
@supports not (container-type: inline-size) {
    .mwc-wcbc-embed .mwc-wcbc-step-header { flex-wrap: wrap; }
    .mwc-wcbc-embed .mwc-wcbc-summary-actions { flex-direction: column; align-items: stretch; }
    .mwc-wcbc-embed .mwc-wcbc-component-meta { margin-left: 0; width: 100%; }
}