/**
 * MockupStudio Frontend Variations CSS
 * Styling for the product variation dropdowns
 */

/* Enhance variation select appearance */
.variations_form .variations select {
    transition: border-color 0.2s, box-shadow 0.2s;
}

.variations_form .variations select:focus {
    border-color: #2271b1;
    box-shadow: 0 0 0 1px #2271b1;
    outline: none;
}

/* Style for disabled/unavailable options */
.variations_form .variations select option:disabled {
    color: #999;
    background: #f5f5f5;
}

/* Loading state for size dropdown when filtering */
.variations_form .variations select.mockupstudio-loading {
    opacity: 0.6;
    pointer-events: none;
}

/* Image transition effect
 * NOTE: We deliberately do NOT apply a global opacity transition to the
 * main gallery image, as it can interfere with WooCommerce/theme zoom
 * behaviour and cause flicker. Only the explicit .mockupstudio-updating
 * state adjusts opacity.
 */
.woocommerce-product-gallery__image img.mockupstudio-updating {
    opacity: 0.7;
}

/* Helper text for style selection */
.mockupstudio-style-hint {
    font-size: 12px;
    color: #666;
    margin-top: 4px;
    font-style: italic;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .variations_form .variations select {
        width: 100%;
        padding: 12px;
        font-size: 16px; /* Prevents iOS zoom */
    }
}