/* Progressive Variations Styling - Modern 2024 Design */

/* ============ FIX PLUGIN CONFLICTS ============ */

/* Override green styling from other plugins/themes */
.variations_form select[name^="attribute_"] {
    background-color: #ffffff !important;
    border-color: #ddd !important;
    color: #333 !important;
}

/* Ensure our plugin's styling takes priority */
.variations_form select[name^="attribute_"]:not(.haru-single-option):not(.haru-highlight-needed) {
    background: #ffffff !important;
    border: 1px solid #ddd !important;
    color: #333333 !important;
    box-shadow: none !important;
}

/* Remove any green/unwanted styling from other sources */
.variations_form select[name^="attribute_"]:focus:not(.haru-highlight-needed) {
    border-color: #0073aa !important;
    box-shadow: 0 0 0 1px #0073aa !important;
    outline: none !important;
}

/* Modern blue glow highlighting for dropdowns that need selection */
.variations_form select[name^="attribute_"].haru-highlight-needed {
    animation: modernGlowPulse 2s infinite ease-in-out;
    transition: all 0.3s ease;
}

@keyframes modernGlowPulse {
    0% {
        box-shadow:
            0 0 0 0 rgba(59, 130, 246, 0.5),
            0 2px 8px rgba(59, 130, 246, 0.1);
        border-color: #3b82f6;
    }
    50% {
        box-shadow:
            0 0 0 8px rgba(59, 130, 246, 0.1),
            0 4px 20px rgba(59, 130, 246, 0.2);
        border-color: #2563eb;
    }
    100% {
        box-shadow:
            0 0 0 0 rgba(59, 130, 246, 0),
            0 2px 8px rgba(59, 130, 246, 0.1);
        border-color: #3b82f6;
    }
}

/* Respect user's motion preferences */
@media (prefers-reduced-motion: reduce) {
    .variations_form select[name^="attribute_"].haru-highlight-needed {
        animation: none !important;
        box-shadow: 0 0 0 2px #3b82f6 !important;
        border-color: #3b82f6 !important;
    }
}

/* Modern Read-Only Dropdown Styling - 2024 Design Pattern */
.variations_form select[name^="attribute_"].haru-single-option {
    /* Modern disabled state styling */
    position: relative !important;
    cursor: not-allowed !important;

    /* Modern visual feedback */
    filter: grayscale(30%) brightness(0.95) !important;
    opacity: 0.8 !important;

    /* Subtle visual cues */
    border-style: dashed !important;
    background-image: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 2px,
        rgba(0,0,0,0.03) 2px,
        rgba(0,0,0,0.03) 4px
    ) !important;

    /* Modern shadow for depth */
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.06) !important;

    /* Smooth transitions */
    transition: all 0.2s ease !important;
}

/* Modern Lock Badge - 2024 Style */
.variations_form select[name^="attribute_"].haru-single-option::before {
    content: "";
    position: absolute;
    top: -8px;
    right: -8px;
    width: 20px;
    height: 20px;
    background: linear-gradient(135deg, #64748b 0%, #475569 100%);
    border: 2px solid #ffffff;
    border-radius: 50%;
    z-index: 10;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    pointer-events: none;
}

/* Lock Icon Inside Badge - ENHANCED */
.variations_form select[name^="attribute_"].haru-single-option::after {
    content: "🔒";
    position: absolute;
    top: -6px;
    right: -6px;
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px; /* Increased for better visibility */
    color: white;
    z-index: 11;
    pointer-events: none;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3));
}

/* Alternative lock icon positioning for better compatibility */
@media (max-width: 768px) {
    .variations_form select[name^="attribute_"].haru-single-option::after {
        font-size: 8px;
        top: -4px;
        right: -4px;
        width: 14px;
        height: 14px;
    }
}

/* Modern Tooltip on Hover */
.variations_form select[name^="attribute_"].haru-single-option:hover::before {
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

/* Add modern data attribute styling for better semantics */
.variations_form select[name^="attribute_"].haru-single-option {
    --disabled-bg: rgba(248, 250, 252, 0.8);
    --disabled-border: #cbd5e1;
    --disabled-text: #64748b;
}

/* Enhanced visual state for modern browsers */
@supports (backdrop-filter: blur(2px)) {
    .variations_form select[name^="attribute_"].haru-single-option {
        backdrop-filter: blur(1px) !important;
    }
}

/* Modern focus-visible support for accessibility */
.variations_form select[name^="attribute_"].haru-single-option:focus-visible {
    outline: 2px solid #64748b !important;
    outline-offset: 2px !important;
}