/**
 * Product Size Variants - Pill-Style Button Styling
 *
 * Version: 1.1.5
 *
 * Changelog:
 * 1.1.2 - Reduced spacing to 8px between all elements (price → size → pills → form)
 * 1.1.1 - Updated pill styling: smaller size, lighter selected state
 * 1.1.0 - Fixed variation price spacing - removed margin-top to prevent visual displacement
 *       - Added spacing rule for variation price after hidden block price
 *       - Ensures proper visual order: Price → "Size:" → Pills → Form
 *
 * Features:
 * - Pill-style buttons with rounded borders (24px)
 * - Clear selected/unselected visual states
 * - WCAG AA compliant contrast ratios
 * - Mobile-optimized touch targets (44x44px minimum)
 * - Responsive: stacks on mobile (< 768px)
 * - Hover effects for desktop
 * - Smooth transitions
 * - Hides WooCommerce block price, shows variation price
 * - Variation price physically moved OUTSIDE form in DOM
 * - Variation price updates dynamically on size selection
 * - FSE (Full Site Editing) and legacy template support
 * - "Size:" label with proper accessibility
 * - Pills positioned OUTSIDE form
 * - Layout: Variation Price → "Size:" Label → Pills → Form (Qty/Add to Cart)
 *
 * @package eride
 */

/* ============================================
   WooCommerce Price Display Strategy
   ============================================ */

/* STRATEGY (Variation Price Repositioned in DOM):
 * - Block price (.wp-block-woocommerce-product-price) is HIDDEN (static minimum from PHP)
 * - Variation price (.woocommerce-variation-price) is MOVED outside form via JavaScript
 * - Variation price is now physically BEFORE pills in the DOM
 * - Variation price updates dynamically when user selects different sizes (₪240 → ₪312)
 * - WooCommerce handles all price updates automatically via found_variation event
 * - Pills change the selected variation AND the displayed price updates to match
 * - DOM Order: Block Price (hidden) → Variation Price → Size Label → Pills → Form
 */

/* Hide block price when pills are present (JavaScript also hides it) */
.has-size-pills ~ .wp-block-woocommerce-product-price,
.wp-block-woocommerce-product-price:has(~ .has-size-pills) {
    display: none !important;
}

/* Ensure hidden block price still provides spacing context for variation price */
.wp-block-woocommerce-product-price[style*="display: none"] + .woocommerce-variation-price {
    margin-top: var(--wp--preset--spacing--xl, 40px) !important; /* Inherit block price's intended spacing */
}

/* Style variation price when repositioned outside form */
.woocommerce-variation-price {
    display: block !important;
    margin-top: 0 !important; /* No top margin - spacing comes from block price above */
    margin-bottom: 0 !important;
    font-size: var(--wp--preset--font-size--x-large, 2rem) !important;
    line-height: 1.2 !important;
    font-weight: 400 !important;
}

/* Ensure variation price price tag styling matches block price */
.woocommerce-variation-price .price {
    font-size: inherit;
    color: inherit;
}

.woocommerce-variation-price .woocommerce-Price-amount {
    font-size: inherit;
    font-weight: inherit;
}

/* ============================================
   Size Variant Label "Size:"
   ============================================ */

.size-variant-label {
    /* Typography */
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;
    color: #374151;
    text-transform: uppercase;
    letter-spacing: 0.5px;

    /* Spacing - positioned after variation price */
    margin-top: 8px;
    margin-bottom: 8px;

    /* Display */
    display: block;
    width: 100%;
}

/* ============================================
   Size Variant Pills Container
   ============================================ */

.size-variant-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 0 0 8px 0; /* 8px bottom margin before form */
    align-items: center;
    justify-content: flex-start; /* Left align pills */
    width: 100%; /* Ensure full width for consistent alignment */
}

/* ============================================
   Size Pill Button Base Styles
   ============================================ */

.size-pill {
    /* Layout */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 38px;
    padding: 4px 12px;

    /* Visual */
    background: #ffffff;
    border: 2px solid #d1d5db;
    border-radius: 24px;

    /* Typography */
    font-size: 12px;
    font-weight: 500;
    line-height: 1.2;
    color: #374151;
    text-align: center;

    /* Interaction */
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;

    /* Animation */
    transition: all 0.2s ease-in-out;

    /* Reset button styles */
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    outline: none;
    text-decoration: none;
}

/* ============================================
   Hover State (Desktop)
   ============================================ */

@media (hover: hover) and (pointer: fine) {
    .size-pill:hover {
        border-color: #9ca3af;
        background: #f9fafb;
        transform: translateY(-1px);
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    }
}

/* ============================================
   Active/Focus States
   ============================================ */

.size-pill:active {
    transform: translateY(0);
}

.size-pill:focus {
    outline: none; /* Remove default focus outline */
}

/* Show focus state only for keyboard navigation */
.size-pill:focus-visible {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
}

/* ============================================
   Selected State
   ============================================ */

.size-pill.selected {
    background: #ffffff !important;
    border-color: hsl(160, 45%, 70%) !important;
    border-width: 2px !important;
    color: #374151 !important;
    font-weight: 500 !important;
}

@media (hover: hover) and (pointer: fine) {
    .size-pill.selected:hover {
        background: #ffffff;
        border-color: hsl(160, 45%, 60%);
        transform: translateY(-1px);
    }
}

/* ============================================
   Disabled State
   ============================================ */

.size-pill:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

/* ============================================
   Mobile Responsive (< 768px)
   ============================================ */

@media screen and (max-width: 767px) {
    .size-variant-pills {
        gap: 10px;
        margin: 0;
    }

    .size-pill {
        /* Ensure touch targets meet accessibility standards */
        min-width: 48px;
        min-height: 48px;
        padding: 14px 20px;
        font-size: 15px;
    }
}

/* ============================================
   Small Mobile (< 480px)
   ============================================ */

@media screen and (max-width: 479px) {
    .size-variant-pills {
        /* Stack pills more tightly on very small screens */
        gap: 8px;
    }

    .size-pill {
        /* Allow pills to be more compact but still touch-friendly */
        padding: 12px 16px;
        font-size: 14px;
    }
}

/* ============================================
   Theme Color Variants (Optional)
   Uncomment and customize to match theme colors
   ============================================ */

/*
.size-pill.selected {
    background: var(--wp--preset--color--primary, #1f2937);
    border-color: var(--wp--preset--color--primary, #1f2937);
}

@media (hover: hover) and (pointer: fine) {
    .size-pill.selected:hover {
        background: var(--wp--preset--color--primary-dark, #111827);
        border-color: var(--wp--preset--color--primary-dark, #111827);
    }
}
*/

/* ============================================
   Integration with WooCommerce
   Layout: Variation Price → "Size:" Label → Pills → Form (Qty/Add to Cart)
   ============================================ */

/* DOM structure (created by JavaScript):
 * 1. Block price (hidden)
 * 2. Variation price (moved from inside form, shown)
 * 3. Size label
 * 4. Size pills
 * 5. Form (quantity + add to cart)
 */

/* Spacing between variation price and size label */
.woocommerce-variation-price + .size-variant-label {
    margin-top: 8px;
    margin-bottom: 8px;
}

/* Spacing between size pills and form */
.size-variant-pills + .variations_form,
.size-variant-pills + .wp-block-add-to-cart-form {
    margin-top: 8px;
}

/* Hide the size variation row in table */
.variations_form tr:has(select[name*="attribute_pa_size"]),
.variations_form tr:has(select[name*="attribute_size"]) {
    display: none !important;
}

/* Fallback for browsers without :has() support */
.variations_form select[name*="attribute_pa_size"],
.variations_form select[name*="attribute_size"] {
    display: none !important;
}

/* Remove margin from variations table when using size pills */
.variations_form.has-size-pills .variations {
    margin-bottom: 0 !important;
}

/* ============================================
   Accessibility Enhancements
   ============================================ */

/* Screen reader only text */
.size-variant-pills .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .size-pill {
        border-width: 3px;
    }

    .size-pill.selected {
        background: #000000;
        border-color: #000000;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .size-pill {
        transition: none;
    }
}