/**
 * Custom Variation Swatches Frontend CSS
 * For minor adjustments or styles not easily achievable with Tailwind utilities alone.
 */

/* Define primary color variable to be used throughout the plugin */
:root {
    --primary-color: #4F46E5; /* Indigo-600 by default - matches the existing indigo theme */
}

/* Ensure hidden select doesn't take up space or become focusable if accidentally shown */
.variations_form select[style*="display:none"] {
    visibility: hidden;
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Example: Style for disabled swatches (you'd add .cvs-disabled-swatch class via JS) */
.cvs-swatch-item.cvs-disabled-swatch,
.cvs-button-swatch.cvs-disabled-swatch,
.cvs-radio-label.cvs-disabled-swatch {
    opacity: 0.5;
    cursor: not-allowed;
    position: relative;
    pointer-events: none;
}

.cvs-swatch-item.cvs-disabled-swatch::after,
.cvs-button-swatch.cvs-disabled-swatch::after,
.cvs-radio-label.cvs-disabled-swatch::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 1px; /* Line thickness */
 
    transform: translateY(-50%) rotate(-45deg);
}


.cvs-radio-input:focus + .cvs-radio-label {
    /* 
     * Focus ring styling handled by Tailwind classes
     * Uncomment these if additional styling is needed:
     * box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.5);
     * border-color: #6366f1;
     */
}

/* Ensure color swatches maintain aspect ratio if only width or height is set by Tailwind */
.cvs-color-swatch {
    /*
     * Tailwind w-X h-X classes handle size
     * Uncomment if needed:
     * aspect-ratio: 1 / 1;
     */
    position: relative;
}

/* Style for selected color swatch - this will be customized inline via PHP */
.cvs-color-swatch.ring-2.ring-offset-1.ring-indigo-600 {
    /* Default fallback style using primary color if inline style fails */
    border-color: var(--primary-color);
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
    /* Box shadow for additional emphasis */
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
}

.cvs-swatch-label {
    /* Tailwind classes applied in PHP, this is a fallback or for overrides */
    display: block;
}

.cvs-swatches-container {
    /* Container styling */
    margin-bottom: 1rem;
}