/**
 * Frontend styles for MLW2 component groups with apply_mode = 'direct'.
 *
 * Loaded only on single-product pages that have at least one direct-mode
 * component group via wp_enqueue_style() in MLW2_Components::enqueue_frontend_scripts().
 */

.mlw2-component-options {
    margin-bottom: 1.5em;
}

.mlw2-component-options .mlw2-component-field {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 1em;
}

.mlw2-component-options .mlw2-component-field > label {
    flex: 0 0 auto;
    margin: 0;
}

/* Some themes append a colon to every product-form label via ::after. */
.mlw2-component-options .mlw2-component-field > label::after {
    content: none !important;
}

.mlw2-component-options .mlw2-component-field > select {
    flex: 0 1 280px;
    width: min(100%, 280px) !important;
    max-width: 280px !important;
    box-sizing: border-box;
    padding: 8px;
}

@media (max-width: 480px) {
    .mlw2-component-options .mlw2-component-field {
        align-items: flex-start;
        flex-direction: column;
        gap: 4px;
    }
}

/* ── Component availability notices (product_config mode) ── */
.mlw2-component-availability {
    margin: 8px 0;
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 0.9em;
    line-height: 1.4;
}
.mlw2-component-availability.out-of-stock {
    background: #fff0f0;
    border: 1px solid #dc3232;
    color: #8a1f1f;
}
p.stock.mlw2-component-availability:not(.out-of-stock) {
    background: #fef9e7;
    border: 1px solid #dba617;
    color: #6d4a00;
}

/*
 * Some quantity-button scripts inject minus/input/plus controls and add the
 * `buttons-added` class after page load. Keep them horizontal inside the
 * variation add-to-cart wrapper so they cannot form a tall column beside the
 * add-to-cart button.
 */
.single-product .variations_button {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.single-product .variations_button .quantity {
    float: none;
    width: auto;
    margin: 0;
}

.single-product .variations_button .quantity.buttons-added {
    display: flex;
    align-items: center;
}

.single-product .variations_button .single_add_to_cart_button {
    float: none;
    width: auto;
    min-height: 0;
    margin: 0;
}

@media (max-width: 480px) {
    .single-product .variations_button .single_add_to_cart_button {
        flex: 1 1 auto;
    }
}