/* 
 * Override Divi Product Variations Display
 * Transform select dropdown into title + tags format
 */

/* Hide the original Divi variations table on desktop */
@media (min-width: 769px) {
    .variations_form .variations {
        display: none !important;
    }
    
    /* Create custom variations container */
    .jwell-custom-variations {
        margin: 20px 0;
        padding: 0;
    }
    
    /* Variation group styling */
    .jwell-variation-group {
        margin-bottom: 25px;
    }
    
    /* Variation title styling */
    .jwell-variation-title {
        font-size: 16px;
        font-weight: 600;
        color: #000;
        margin-bottom: 12px;
        text-transform: capitalize;
        letter-spacing: 0.5px;
    }
    
    /* Tags container */
    .jwell-variation-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        align-items: center;
    }
    
    /* Individual tag styling */
    .jwell-variation-tag {
        display: inline-flex;
        align-items: center;
        padding: 8px 16px;
        background: #f8f9fa;
        border: 2px solid #e9ecef;
        border-radius: 10px;
        cursor: pointer;
        font-size: 14px;
        font-weight: 500;
        color: #000;
        transition: all 0.3s ease;
        text-decoration: none;
        user-select: none;
        min-height: 38px;
    }
    
    /* Tag hover effect */
    .jwell-variation-tag:hover {
        background: #E0A000;
        border-color: #E0A000;
        transform: translateY(-1px);
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }
    
    /* Selected tag styling */
    .jwell-variation-tag.selected {
        background: #E0A000;
        border-color: #E0A000;
        color: #ffffff;
        font-weight: 600;
    }
    
    /* Selected tag hover */
    .jwell-variation-tag.selected:hover {
        background: rgba(224, 160, 0, 0.71) !important;
        border-color: rgba(224, 160, 0, 0.71) !important;
        transform: translateY(-1px);
    }
    
    /* Disabled/unavailable tag styling */
    .jwell-variation-tag.disabled {
        background: #f8f9fa;
        border-color: #dee2e6;
        color: #adb5bd;
        cursor: not-allowed;
        opacity: 0.6;
    }
    
    .jwell-variation-tag.disabled:hover {
        background: #f8f9fa;
        border-color: #dee2e6;
        transform: none;
        box-shadow: none;
    }
    
    /* Out of stock indicator */
    .jwell-variation-tag.out-of-stock {
        position: relative;
        background: #f8d7da;
        border-color: #f5c2c7;
        color: #842029;
    }
    
    .jwell-variation-tag.out-of-stock::after {
        content: "Rupture";
        position: absolute;
        top: -8px;
        right: -8px;
        background: #dc3545;
        color: white;
        font-size: 10px;
        padding: 2px 6px;
        border-radius: 8px;
        font-weight: 600;
        line-height: 1;
    }
    
    /* Clear selection link styling */
    .jwell-variation-clear {
        color: #6c757d;
        font-size: 13px;
        text-decoration: underline;
        cursor: pointer;
        margin-left: 10px;
        padding: 4px 8px;
        border-radius: 4px;
        transition: all 0.2s ease;
    }
    
    .jwell-variation-clear:hover {
        color: #495057;
        background: #f8f9fa;
        text-decoration: none;
    }
    
    /* Animation for tag selection */
    @keyframes tagSelect {
        0% { transform: scale(1); }
        50% { transform: scale(1.05); }
        100% { transform: scale(1); }
    }
    
    .jwell-variation-tag.just-selected {
        animation: tagSelect 0.3s ease;
    }
    
    /* Responsive adjustments for tablets */
    @media (max-width: 1024px) and (min-width: 769px) {
        .jwell-variation-tag {
            padding: 6px 12px;
            font-size: 13px;
            min-height: 34px;
        }
        
        .jwell-variation-tags {
            gap: 6px;
        }
    }
}

/* Keep mobile display unchanged (show original select) */
@media (max-width: 768px) {
    .jwell-custom-variations {
        display: none !important;
    }
    
    .variations_form .variations {
        display: table !important;
    }
}

/* Additional styling for better integration with Divi theme */
.et_pb_module .jwell-custom-variations {
    font-family: inherit;
}

.et_pb_wc_add_to_cart .jwell-variation-group {
    margin-bottom: 20px;
}

/* Dark theme support */
.et_divi_theme_dark .jwell-variation-tag {
    background: #2d3748;
    border-color: #4a5568;
    color: #e2e8f0;
}

.et_divi_theme_dark .jwell-variation-tag:hover {
    background: #4a5568;
    border-color: #718096;
}

.et_divi_theme_dark .jwell-variation-title {
    color: #e2e8f0;
}