/* ================================================================
   Mixpack Bundles — Frontend CSS
   Uses WooCommerce / theme colors where possible.
   ================================================================ */

/* Accent colour falls back to a neutral green if no theme var exists */
:root {
    --mb-accent: var(--ast-global-color-0, var(--wp--preset--color--primary, #0073aa));
    --mb-selected-bg: color-mix(in srgb, var(--mb-accent) 8%, transparent);
}

/* ----------------------------------------------------------------
   Flexible mixpack wrapper
   ---------------------------------------------------------------- */
.mb-flex-form { margin: 16px 0; }

/* Progress bar */
.mb-progress-wrap { margin-bottom: 20px; }
.mb-progress-label {
    display: flex; justify-content: space-between; align-items: baseline;
    margin-bottom: 8px; font-size: .85em; color: #64748b;
}
.mb-progress-label strong { font-size: 1em; color: inherit; }
.mb-progress-bar-track {
    height: 6px; background: #e2e8f0;
    border-radius: 99px; overflow: hidden;
}
.mb-progress-bar-fill {
    height: 100%;
    background: var(--mb-accent);
    border-radius: 99px;
    transition: width .25s ease;
}
.mb-progress-bar-fill.mb-full { background: #27ae60; }

/* Variant grid */
.mb-variants-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 10px;
    margin-bottom: 20px;
}
.mb-variant-card {
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    padding: 12px 8px;
    text-align: center;
    cursor: pointer;
    transition: border-color .15s, background .15s;
    position: relative;
    background: #fff;
    user-select: none;
}
.mb-variant-card:hover:not(.mb-oos):not(.mb-locked) {
    border-color: var(--mb-accent);
}
.mb-variant-card.mb-selected {
    border-color: var(--mb-accent);
    background: var(--mb-selected-bg, #f0f8ff);
}
.mb-variant-card.mb-oos  { opacity: .45; cursor: not-allowed; }
.mb-variant-card.mb-locked { cursor: not-allowed; opacity: .6; }

.mb-variant-img {
    width: 90px; height: 90px;
    object-fit: cover; border-radius: 6px;
    margin: 0 auto 8px; display: block;
}
.mb-variant-name  { font-size: .8em; font-weight: 500; line-height: 1.3; margin-bottom: 4px; }
.mb-variant-attrs { font-size: .75em; color: #64748b; margin-bottom: 4px; }
.mb-variant-price { font-size: .8em; font-weight: 600; }
.mb-variant-oos-label { font-size: .75em; color: #e74c3c; }

.mb-variant-count {
    position: absolute; top: 6px; right: 6px;
    width: 22px; height: 22px;
    background: var(--mb-accent); color: #fff;
    border-radius: 50%; font-size: 12px; font-weight: 700;
    display: flex; align-items: center; justify-content: center; line-height: 1;
}

/* Selection summary */
.mb-selection-summary {
    background: #f0fdf4; border: 1px solid #bbf7d0;
    border-radius: 8px; padding: 14px 16px;
    margin-bottom: 16px; display: none;
}
.mb-selection-summary.mb-visible { display: block; }
.mb-selection-summary h4 { margin: 0 0 10px; font-size: .85em; font-weight: 600; color: #166534; }
.mb-selected-list {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-direction: column; gap: 6px;
}
.mb-selected-item {
    display: flex; align-items: center; justify-content: space-between;
    font-size: .85em;
}
.mb-selected-item-name { flex: 1; }
.mb-selected-remove {
    background: none; border: none; cursor: pointer;
    color: #94a3b8; font-size: 16px; padding: 0 0 0 8px;
    line-height: 1; transition: color .1s;
}
.mb-selected-remove:hover { color: #e74c3c; }

/* Add to cart button — inherit theme colours via .button.alt */
.mb-atc-btn {
    display: block !important;
    width: 100% !important;
    text-align: center;
    box-sizing: border-box;
}
.mb-atc-btn:disabled,
.mb-atc-btn[disabled] {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
    pointer-events: none;
}

.mb-atc-message {
    text-align: center; font-size: .85em;
    margin-top: 10px; min-height: 20px;
}
.mb-atc-message.mb-error { color: #e74c3c; }
.mb-atc-message.mb-ok    { color: #27ae60; }

@media (max-width: 600px) {
    .mb-variants-grid { grid-template-columns: repeat(2, 1fr); }
}