/**
 * Product Variations Styling
 * Modern dropdown design for product variations
 * 
 * @package VerdenoGarden
 * @version 1.0.0
 */

/* Variation Group Container */
.product-variation-group {
    margin-bottom: 25px;
    padding: 20px;
    background: #f8fafb;
    border-radius: 12px;
    border: 1px solid #e8f0e8;
    transition: all 0.3s ease;
}

.product-variation-group:hover {
    background: #ffffff;
    border-color: #4CAF50;
    box-shadow: 0 4px 12px rgba(76, 175, 80, 0.1);
}

/* Variation Label */
.variation-label {
    display: block;
    font-size: 15px;
    font-weight: 600;
    color: #2D7B2C;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Select Wrapper */
.variation-select-wrapper {
    position: relative;
    width: 100%;
}

/* Variation Select Dropdown */
.variation-select,
select.variation-select {
    width: 100%;
    padding: 12px 40px 12px 15px;
    font-size: 15px;
    font-weight: 500;
    color: #333;
    background: #ffffff;
    border: 2px solid #e0e0e0;
    border-radius: 10px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
    transition: all 0.3s ease;
    outline: none;
}

.variation-select:hover {
    border-color: #4CAF50;
    background: #fafafa;
}

.variation-select:focus {
    border-color: #4CAF50;
    box-shadow: 0 0 0 4px rgba(76, 175, 80, 0.1);
    background: #ffffff;
}

/* Custom Arrow */
.select-arrow {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #4CAF50;
    font-size: 14px;
    pointer-events: none;
    transition: transform 0.3s ease;
}

.variation-select:focus + .select-arrow {
    transform: translateY(-50%) rotate(180deg);
}

/* Selected Option */
.variation-select option {
    padding: 10px;
    font-weight: 500;
}

.variation-select option:checked {
    background: #e8f5e9;
    font-weight: 600;
}

/* Reset Variations Link */
.reset_variations {
    display: inline-block;
    margin-top: 10px;
    font-size: 13px;
    color: #999;
    text-decoration: none;
    transition: color 0.3s ease;
}

.reset_variations:hover {
    color: #4CAF50;
    text-decoration: underline;
}

/* Disabled State */
.variation-select:disabled {
    background: #f5f5f5;
    color: #999;
    cursor: not-allowed;
    opacity: 0.7;
}

/* Validation States */
.variation-select.error {
    border-color: #f44336;
}

.variation-select.error:focus {
    box-shadow: 0 0 0 4px rgba(244, 67, 54, 0.1);
}

.variation-select.valid {
    border-color: #4CAF50;
}

/* Price Update Animation */
.woocommerce-variation-price {
    margin-top: 15px;
    padding: 15px;
    background: #e8f5e9;
    border-radius: 8px;
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Stock Availability for Variations */
.woocommerce-variation-availability {
    margin-top: 10px;
    font-size: 14px;
}

.woocommerce-variation-availability .stock {
    display: inline-block;
    padding: 5px 12px;
    border-radius: 20px;
    font-weight: 600;
}

.woocommerce-variation-availability .in-stock {
    background: #e8f5e9;
    color: #2D7B2C;
}

.woocommerce-variation-availability .out-of-stock {
    background: #ffebee;
    color: #c62828;
}

/* Multiple Variations Layout */
.product-variation-group + .product-variation-group {
    margin-top: 15px;
}

/* Variation Description */
.woocommerce-variation-description {
    margin-top: 10px;
    padding: 10px;
    background: #f0f9ff;
    border-left: 3px solid #2196f3;
    border-radius: 4px;
    font-size: 14px;
    color: #555;
}

/* Loading State */
.variation-select.loading {
    background: #f5f5f5 url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><path fill="%234CAF50" d="M10 3v2a5 5 0 0 0 0 10v2a7 7 0 0 1 0-14z"><animateTransform attributeName="transform" type="rotate" from="0 10 10" to="360 10 10" dur="1s" repeatCount="indefinite"/></path></svg>') no-repeat right 15px center;
    background-size: 20px;
}

/* Responsive Design */
@media (max-width: 768px) {
    .product-variation-group {
        padding: 15px;
    }
    
    .variation-select {
        font-size: 14px;
        padding: 10px 35px 10px 12px;
    }
    
    .select-arrow {
        right: 12px;
        font-size: 12px;
    }
}

@media (max-width: 480px) {
    .variation-label {
        font-size: 14px;
    }
    
    .product-variation-group {
        padding: 12px;
        border-radius: 8px;
    }
}

/* Integration with Theme Colors */
.product-variation-group {
    background: linear-gradient(135deg, #f8fafb 0%, #ffffff 100%);
}

.variation-select:hover,
.variation-select:focus {
    border-color: var(--primary-color, #4CAF50);
}

/* Smooth Transitions */
* {
    transition-property: background-color, border-color, box-shadow, transform;
    transition-duration: 0.3s;
    transition-timing-function: ease;
}

/* Hide default WooCommerce variation display elements */
.single_variation_wrap .woocommerce-variation.single_variation {
    display: none !important;
}

.single_variation_wrap .woocommerce-variation-price {
    display: none !important;
}

.single_variation_wrap .woocommerce-variation-description {
    display: none !important;
}

.single_variation_wrap .woocommerce-variation-availability {
    display: none !important;
}

/* Hide the duplicate add to cart section */
.woocommerce-variation-add-to-cart.variations_button {
    display: none !important;
}

/* Hide reset variations link completely */
.reset_variations {
    display: none !important;
}