/**
 * Haru Variations Pro - Styles
 *
 * Modern, beautiful variation selector design with smooth animations.
 * Combines progressive UI aesthetics with high performance.
 *
 * @package HaruVariationsPro
 * @version 1.0.0
 */

/* ==========================================================================
   CSS Variables - Easy theming
   ========================================================================== */

:root {
    /* Primary colors */
    --hvp-primary: #6366f1;
    --hvp-primary-light: #818cf8;
    --hvp-primary-dark: #4f46e5;

    /* Status colors */
    --hvp-success: #22c55e;
    --hvp-warning: #f59e0b;
    --hvp-error: #ef4444;
    --hvp-info: #3b82f6;

    /* Neutral colors */
    --hvp-gray-50: #f9fafb;
    --hvp-gray-100: #f3f4f6;
    --hvp-gray-200: #e5e7eb;
    --hvp-gray-300: #d1d5db;
    --hvp-gray-400: #9ca3af;
    --hvp-gray-500: #6b7280;
    --hvp-gray-600: #4b5563;
    --hvp-gray-700: #374151;
    --hvp-gray-800: #1f2937;
    --hvp-gray-900: #111827;

    /* Shadows */
    --hvp-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --hvp-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    --hvp-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --hvp-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);

    /* Focus ring */
    --hvp-focus-ring: 0 0 0 3px rgba(99, 102, 241, 0.3);

    /* Transitions */
    --hvp-transition-fast: 150ms ease;
    --hvp-transition: 200ms ease;
    --hvp-transition-slow: 300ms ease;

    /* Border radius */
    --hvp-radius-sm: 4px;
    --hvp-radius: 6px;
    --hvp-radius-lg: 8px;
    --hvp-radius-xl: 12px;
}

/* ==========================================================================
   Form Container
   ========================================================================== */

.variations_form.hvp-enabled {
    position: relative;
}

.variations_form.hvp-enabled .variations {
    margin-bottom: 1.5rem;
}

/* ==========================================================================
   Variation Rows
   ========================================================================== */

/* Selectors carry form/table/cell ELEMENTS on purpose: the theme styles the
   same cells at (0,3,3) (.single-product-top form.cart table.variations td
   { padding: 5px 0 10px }) and .label at (0,4,2), which used to leak 15px of
   cell padding between each label and its field. These rules sit at (0,4,3)
   so they win regardless of stylesheet load order. */
form.variations_form.hvp-enabled table.variations tr {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-bottom: 1.125rem;
    padding-bottom: 0;
    border-bottom: none;
}

form.variations_form.hvp-enabled table.variations tr:last-child {
    margin-bottom: 0;
}

form.variations_form.hvp-enabled table.variations th.label,
form.variations_form.hvp-enabled table.variations td.value {
    display: block;
    width: 100%;
    padding: 0;
    border: none;
}

form.variations_form.hvp-enabled table.variations .label label {
    display: block;
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--hvp-gray-700);
    margin: 0 0 0.375rem;
    text-transform: capitalize;
}

form.variations_form.hvp-enabled table.variations td.value {
    position: relative;
}

/* ==========================================================================
   Select Dropdowns - Main Styling
   ========================================================================== */

.variations_form.hvp-enabled select {
    width: 100%;
    padding: 0.75rem 2.5rem 0.75rem 1rem;
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--hvp-gray-800);
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 0.75rem center;
    background-repeat: no-repeat;
    background-size: 1.25rem 1.25rem;
    border: 2px solid var(--hvp-gray-200);
    border-radius: var(--hvp-radius-lg);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    transition:
        border-color var(--hvp-transition),
        box-shadow var(--hvp-transition),
        background-color var(--hvp-transition);
}

.variations_form.hvp-enabled select:hover:not(:disabled) {
    border-color: var(--hvp-gray-300);
}

.variations_form.hvp-enabled select:focus {
    outline: none;
    border-color: var(--hvp-primary);
    box-shadow: var(--hvp-focus-ring);
}