/* ==========================================================================
   Add to Cart Button States
   ========================================================================== */

.variations_form.hvp-enabled .single_add_to_cart_button {
    transition:
        background-color var(--hvp-transition),
        border-color var(--hvp-transition),
        opacity var(--hvp-transition),
        transform var(--hvp-transition);
}

.variations_form.hvp-enabled .single_add_to_cart_button.disabled,
.variations_form.hvp-enabled .single_add_to_cart_button.wc-variation-selection-needed {
    opacity: 0.5;
    cursor: not-allowed;
}

.variations_form.hvp-enabled .single_add_to_cart_button.hvp-ready {
    opacity: 1;
    background-color: var(--hvp-success);
    border-color: var(--hvp-success);
}

.variations_form.hvp-enabled .single_add_to_cart_button.hvp-ready:hover {
    background-color: #16a34a;
    transform: translateY(-1px);
}

/* ==========================================================================
   Variation Display
   ========================================================================== */

.variations_form.hvp-enabled .woocommerce-variation {
    padding: 1rem;
    margin-top: 1rem;
    background: var(--hvp-gray-50);
    border-radius: var(--hvp-radius-lg);
    border: 1px solid var(--hvp-gray-100);
}

.variations_form.hvp-enabled .woocommerce-variation-price {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--hvp-gray-900);
    margin-bottom: 0.5rem;
}

.variations_form.hvp-enabled .woocommerce-variation-availability {
    font-size: 0.875rem;
}

.variations_form.hvp-enabled .woocommerce-variation-availability .stock {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.75rem;
    border-radius: var(--hvp-radius);
    font-weight: 500;
}

.variations_form.hvp-enabled .woocommerce-variation-availability .in-stock {
    background-color: rgba(34, 197, 94, 0.1);
    color: #15803d;
}

.variations_form.hvp-enabled .woocommerce-variation-availability .in-stock::before {
    content: '';
    width: 8px;
    height: 8px;
    background-color: var(--hvp-success);
    border-radius: 50%;
}

.variations_form.hvp-enabled .woocommerce-variation-availability .out-of-stock {
    background-color: rgba(239, 68, 68, 0.1);
    color: #b91c1c;
}

.variations_form.hvp-enabled .woocommerce-variation-availability .out-of-stock::before {
    content: '';
    width: 8px;
    height: 8px;
    background-color: var(--hvp-error);
    border-radius: 50%;
}

/* ==========================================================================
   Reset Link
   ========================================================================== */

.variations_form.hvp-enabled .reset_variations {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 1rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--hvp-gray-500);
    background: var(--hvp-gray-100);
    border-radius: var(--hvp-radius);
    text-decoration: none;
    transition:
        background-color var(--hvp-transition),
        color var(--hvp-transition);
    margin-top: 0.75rem;
}

.variations_form.hvp-enabled .reset_variations:hover {
    background: var(--hvp-gray-200);
    color: var(--hvp-gray-700);
}

.variations_form.hvp-enabled .reset_variations::before {
    content: '↺';
    font-size: 1rem;
}

/* ==========================================================================
   Error Message
   ========================================================================== */

.variations_form.hvp-enabled .hvp-error {
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    background-color: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.2);
    border-radius: var(--hvp-radius);
    color: var(--hvp-error);
    font-size: 0.875rem;
    font-weight: 500;
}

/* ==========================================================================
   Reduced Motion - Accessibility (respects user motion preferences)
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .variations_form.hvp-enabled select,
    .variations_form.hvp-enabled .single_add_to_cart_button {
        transition: none;
    }

    /* Replace pulsing animations with static visual indicators */
    .variations_form.hvp-enabled select.hvp-highlight-needed,
    .variations_form select[name^="attribute_"].haru-highlight-needed {
        animation: none !important;
        box-shadow: 0 0 0 2px #3b82f6 !important;
        border-color: #3b82f6 !important;
    }

    .variations_form.hvp-enabled select.hvp-updated {
        animation: none;
    }

    /* Lock animation - static instead of animated */
    .variations_form.hvp-enabled select.hvp-single-option.just-locked,
    .variations_form select[name^="attribute_"].haru-single-option.just-locked {
        animation: none !important;
    }

    .variations_form.hvp-enabled.hvp-loading::before {
        animation: none;
        border-color: var(--hvp-primary);
    }
}

/* ==========================================================================
   Dark Mode Support (if theme supports)
   ========================================================================== */

@media (prefers-color-scheme: dark) {
    .dark .variations_form.hvp-enabled select,
    [data-theme="dark"] .variations_form.hvp-enabled select {
        background-color: var(--hvp-gray-800);
        border-color: var(--hvp-gray-600);
        color: var(--hvp-gray-100);
    }

    .dark .variations_form.hvp-enabled .variations .label label,
    [data-theme="dark"] .variations_form.hvp-enabled .variations .label label {
        color: var(--hvp-gray-200);
    }

    .dark .variations_form.hvp-enabled .woocommerce-variation,
    [data-theme="dark"] .variations_form.hvp-enabled .woocommerce-variation {
        background-color: var(--hvp-gray-800);
        border-color: var(--hvp-gray-700);
    }
}

/* ==========================================================================
   Responsive Adjustments
   ========================================================================== */

@media (max-width: 768px) {
    .variations_form.hvp-enabled select {
        padding: 0.875rem 2.5rem 0.875rem 1rem;
        font-size: 1rem;
    }
}

/* The old (min-width: 768px) label-beside-field layout was removed: the theme
   always out-specified it (it never rendered), and the accepted product-page
   design stacks the label ABOVE the field at every width. */