/* Matchy Quantity Discounts - Frontend Styles */

/* Hide default WooCommerce quantity input when our selector is active */
.mqd-quantity-selector ~ .quantity,
.mqd-quantity-selector + .quantity,
form.cart .mqd-quantity-selector ~ .quantity {
    display: none;
}

/* Main container - transparent background */
.mqd-quantity-selector {
    margin-bottom: 20px;
}

/* Options container */
.mqd-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Individual option */
.mqd-option {
    display: flex;
    align-items: center;
    padding: 8px;
    /* LOW FIX: Add fallback values for CSS custom properties */
    background: #f9f7f5;
    background: var(--ivory, #f9f7f5);
    border: 2px solid #ccc;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    margin: 0;
}

.mqd-option:hover {
    border-color: #d97098;
    border-color: var(--ppink, #d97098);
}

.mqd-option.mqd-option-selected {
    border-color: #d97098;
    border-color: var(--ppink, #d97098);
}

/* Hide radio button */
.mqd-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

/* Custom radio indicator */
.mqd-option::before {
    content: '';
    width: 22px;
    height: 22px;
    min-width: 22px;
    border: 2px solid #ccc;
    border-radius: 50%;
    margin-right: 20px;
    margin-top: 2px;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.mqd-option:hover::before {
    border-color: #d97098;
    border-color: var(--ppink, #d97098);
}

.mqd-option.mqd-option-selected::before {
    border-color: #d97098;
    border-color: var(--ppink, #d97098);
    background: #d97098;
    background: var(--ppink, #d97098);
    box-shadow: inset 0 0 0 4px #fff;
}

/* Option content - MUST be vertical/column layout */
.mqd-option-content {
    display: flex;
    flex-direction: column;
    gap: 0;
    flex: 1;
}

/* Title row with quantity, product name, and servings */
.mqd-option-title {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.mqd-option-qty {
    font-size: 16px;
    font-weight: 700;
    color: #5c3a41;
    color: var(--oburgundy, #5c3a41);
}

.mqd-option-product-name {
    font-size: 16px;
    font-weight: 600;
    color: #5c3a41;
    color: var(--oburgundy, #5c3a41);
}

.mqd-option-servings {
    font-size: 14px;
    color: #5c3a41;
    color: var(--oburgundy, #5c3a41);
    font-weight: 400;
}

/* Price row - MUST be on its own line (below title) */
.mqd-option-price-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Original price with strikethrough */
.mqd-option-original-price {
    font-size: 15px;
    color: #999;
    text-decoration: line-through;
}

/* Discounted price */
.mqd-option-price {
    font-size: 17px;
    font-weight: 700;
    color: #2d7f5e;
    color: var(--fgreen, #2d7f5e);
}

.mqd-option-price.mqd-no-discount {
    color: #5c3a41;
    color: var(--oburgundy, #5c3a41);
}

/* Discount badge - compact */
.mqd-option-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    background: #8db38b;
    background: var(--ygreen, #8db38b);
    padding: 4px 10px;
    border-radius: 20px;
}

.mqd-option.mqd-option-selected.mqd-option-badge {
    background: #d97098;
    background: var(--ppink, #d97098);
}

/* Responsive */
@media (max-width: 480px) {
    .mqd-option-servings {
        font-size: 12px;
    }
    
    .mqd-option-price {
        font-size: 15px;
    }
    
    .mqd-option-original-price {
        font-size: 13px;
    }
    
    .mqd-option-badge {
        font-size: 12px;
        padding: 3px 8px;
    }
}

/* Bricks Builder compatibility */
.brxe-product-add-to-cart .mqd-quantity-selector {
    width: 100%;
}

/* Ensure proper spacing with Bricks elements */
.bricks-element .mqd-quantity-selector {
    margin-top: 15px;
}