/**
 * Size Radio Button Swatch Style
 * Transforms standard radio buttons into visual swatches
 *
 * Features:
 * - Box style (default) and circle style (with .size-circle class)
 * - Mobile-optimized touch targets (WCAG compliant)
 * - Keyboard navigation support
 * - Screen reader compatible
 * - SimplexTheme color integration (#ea5648 accent)
 *
 * Status: Active
 * Last Updated: 2025-10-23
 */

/* ==========================================================================
   Base Radio Button Styling (Box Style - Default)
   ========================================================================== */

.attributes input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.attributes input[type="radio"] + label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 50px;
    min-height: 44px;
    padding: 10px 15px;
    margin: 0 10px 10px 0;

    /* Visual styling */
    background: #fff;
    border: 2px solid #ddd;
    border-radius: 4px;

    /* Typography */
    font-size: 14px;
    font-weight: 400;
    line-height: 1.2;
    text-align: center;
    color: #333;

    /* Interaction */
    cursor: pointer;
    user-select: none;
    transition: all 0.2s ease;

    /* Box sizing */
    box-sizing: border-box;
}

/* Hover State */
.attributes input[type="radio"]:not(:disabled) + label:hover {
    background: #f9f9f9;
    border-color: #999;
}

/* Selected State */
.attributes input[type="radio"]:checked + label {
    border-color: var(--grey-black, #333);
    font-weight: 600;
    background: #fff;
}

/* Disabled State */
.attributes input[type="radio"]:disabled + label {
    opacity: 0.4;
    background: #f5f5f5;
    cursor: not-allowed;
}

/* Focus State (Accessibility) */
.attributes input[type="radio"]:focus + label {
    outline: 2px solid #999;
    outline-offset: 2px;
}

/* ==========================================================================
   Circle Style Variant (Optional)
   Add .size-circle class to .attributes container
   ========================================================================== */

.attributes.size-circle input[type="radio"] + label {
    width: 50px;
    height: 50px;
    min-width: 50px;
    min-height: 50px;
    padding: 0;
    border-radius: 50%;
    font-size: 14px;
}

/* ==========================================================================
   Mobile Optimization (Touch Targets)
   ========================================================================== */

@media (max-width: 768px) {
    /* Box style - increased touch targets */
    .attributes input[type="radio"] + label {
        min-height: 48px;
        padding: 12px 16px;
        font-size: 15px;
    }

    /* Circle style - increased diameter */
    .attributes.size-circle input[type="radio"] + label {
        width: 54px;
        height: 54px;
        min-width: 54px;
        min-height: 54px;
        font-size: 15px;
    }
}

/* ==========================================================================
   Flexbox Layout for Radio Lists
   ========================================================================== */

.attributes .option-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.attributes .option-list li {
    margin: 0;
    padding: 0;
}

/* ==========================================================================
   SimplexTheme Color Integration (Optional)
   Uncomment to use SimplexTheme red accent (#ea5648) for selected state
   ========================================================================== */

/*
.attributes input[type="radio"]:checked + label {
    border-color: var(--red, #ea5648);
}
*/

/* ==========================================================================
   High Contrast Mode Support
   ========================================================================== */

@media (prefers-contrast: high) {
    .attributes input[type="radio"] + label {
        border-width: 3px;
    }

    .attributes input[type="radio"]:checked + label {
        border-width: 3px;
    }

    .attributes input[type="radio"]:focus + label {
        outline-width: 3px;
    }
}

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

@media print {
    .attributes input[type="radio"] + label {
        border: 1px solid #000;
    }

    .attributes input[type="radio"]:checked + label {
        background: #eee;
        font-weight: 700;
    }
}

/* ==========================================================================
   Customization Examples (Commented)
   ========================================================================== */

/* More rounded corners */
/*
.attributes input[type="radio"] + label {
    border-radius: 8px;
}
*/

/* Larger boxes */
/*
.attributes input[type="radio"] + label {
    min-width: 60px;
    min-height: 50px;
}
*/

/* Use SimplexTheme red for selected state */
/*
.attributes input[type="radio"]:checked + label {
    border-color: var(--red, #ea5648);
    color: var(--red, #ea5648);
}
*/

/* Add shadow on hover */
/*
.attributes input[type="radio"]:not(:disabled) + label:hover {
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
*/

/* ==========================================================================
   Browser Compatibility Notes
   ========================================================================== */

/*
 * Supported Browsers:
 * - Chrome/Edge (latest)
 * - Firefox (latest)
 * - Safari (latest)
 * - iOS Safari (iOS 12+)
 * - Chrome Mobile
 * - Samsung Internet
 *
 * CSS Features Used:
 * - Flexbox (IE11+)
 * - CSS Custom Properties with fallbacks
 * - Standard border/padding properties (universal)
 */