/* ===================================
   VARIATION SELECTOR STYLES
   Semantic CSS for product variations
   =================================== */

/* Variation Selector Container */
.variation-selector {
    margin-bottom: 0.5rem;
}

/* Variation Option Base Styles */
.variation-option {
    cursor: pointer;
    display: inline-block;
    margin-right: 0.25rem;
    margin-bottom: 0.25rem;
}

/* Hidden Radio Inputs */
.variation-input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

/* Variation Label Styles (for temperature and type) */
.variation-label {
    display: inline-block;
    padding: 0.1rem 0.25rem;
    font-size: 0.7rem;
    border: 1px solid #d1d5db;
    border-radius: 12px;
    background-color: #ffffff;
    color: #374151;
    transition: all 0.2s ease;
    cursor: pointer;
}

.variation-label:hover {
    border-color: var(--color-primary-500);
    background-color: var(--color-primary-50);
}

/* Color Dot Styles */
.color-dot {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 1px solid #d1d5db;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Named color helpers for inline dots (fallbacks for non-hex values) */
.color-red { background-color: #ff0040; }
.color-blue { background-color: #00bfff; }
.color-green { background-color: #39ff14; }
.color-yellow { background-color: #ffff00; }
.color-purple { background-color: #bf00ff; }
.color-pink { background-color: #ff1493; }
.color-orange { background-color: #ff4500; }
.color-white { background-color: #ffffff; }
.color-black { background-color: #000000; }
.color-cyan { background-color: #00ffff; }
.color-lime { background-color: #32cd32; }

.color-white-border { border-color: #666; }

.color-dot:hover {
    border-color: var(--color-primary-500);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transform: scale(1.05);
}

/* Selected State Styles */
.variation-input:checked + .variation-label {
    border-color: var(--color-primary-500);
    background-color: var(--color-primary-50);
    color: var(--color-primary-700);
}

.variation-input:checked + .color-dot {
    border-color: var(--color-primary-500);
    box-shadow: 0 0 0 1px var(--color-primary-200);
}

/* JS toggles 'selected' class as a non-inline alternative */
.variation-label.selected {
    border-color: var(--color-primary-500);
    background-color: var(--color-primary-50);
    color: var(--color-primary-700);
}
.color-dot.selected {
    border-color: var(--color-primary-500);
    box-shadow: 0 0 0 1px var(--color-primary-200);
}

/* Focus Styles for Accessibility */
.variation-input:focus + .variation-label,
.variation-input:focus + .color-dot {
    outline: 2px solid var(--color-primary-500);
    outline-offset: 2px;
}

/* Responsive Design */
@media (max-width: 640px) {
    .variation-label {
        padding: 0.375rem 0.75rem;
        font-size: 0.8rem;
    }
    
    .color-dot {
        width: 1.75rem;
        height: 1.75rem;
    }
}