/**
 * Custom Product Add-ons Frontend Styles
 *
 * Minimal, semantic base styles.
 * Theme-specific styles should be added in the child theme stylesheet.
 *
 * @package CustomProductAddons
 */

/* ==========================================================================
   Base Container
   ========================================================================== */

.cpa-product-addons {
    margin: 1em 0;
}

/* ==========================================================================
   Addon Group
   ========================================================================== */

.cpa-addon-group {
    margin-bottom: 1em;
}

.cpa-addon-group:last-child {
    margin-bottom: 0;
}

.cpa-addon-group__label {
    display: block;
    margin-bottom: 0.5em;
    font-weight: 600;
}

.cpa-required {
    color: #c00;
}

/* ==========================================================================
   Options Container
   ========================================================================== */

.cpa-addon-group__options {
    margin: 0;
    padding: 0;
}

/* ==========================================================================
   Radio & Checkbox Options
   ========================================================================== */

.cpa-addon-option {
    display: flex;
    align-items: center;
    margin-bottom: 0.5em;
}

.cpa-addon-option:last-child {
    margin-bottom: 0;
}

.cpa-addon-option input[type="radio"],
.cpa-addon-option input[type="checkbox"] {
    margin-right: 0.5em;
    flex-shrink: 0;
}

.cpa-addon-option label {
    cursor: pointer;
    margin: 0;
}

.cpa-addon-price {
    margin-left: 0.25em;
}

/* ==========================================================================
   Select Dropdown
   ========================================================================== */

.cpa-addon-select {
    width: 100%;
    max-width: 100%;
}

/* ==========================================================================
   Validation Error State
   ========================================================================== */

.cpa-addon-group.cpa-error {
    /* Theme should define error styling */
}

.cpa-error-message {
    display: block;
    margin-top: 0.5em;
    color: #c00;
    font-size: 0.875em;
}

/* ==========================================================================
   Print Styles
   ========================================================================== */

@media print {
    .cpa-product-addons {
        page-break-inside: avoid;
    }
}