/**
 * Free Shipping Progress Component Styles
 *
 * Version: 1.0.2
 *
 * Design Requirements:
 * - Minimalist design (doesn't compete with Add to Cart CTA)
 * - Horizontal progress bar (6px height)
 * - Green gradient for all progress states (subtle)
 * - Always visible, non-sticky
 * - Responsive (desktop/mobile)
 * - Layout: Separate row below quantity/add-to-cart
 *
 * Changelog:
 * 1.0.2 - Spacing Fix: Removed margin-top/bottom (desktop and mobile)
 *       - Components now flush with each other (no gaps)
 *       - Keeps internal padding for content spacing
 * 1.0.1 - Layout Fix: Added width:100%, clear:both to force separate row display
 *       - Prevents inline display with quantity/add-to-cart form
 * 1.0.0 - Initial release
 *       - Horizontal progress bar with package icon
 *       - Green gradient progress fill
 *       - Design system integration (CSS variables)
 *       - Mobile optimized
 *
 * @package eride
 */

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

.free-shipping-progress {
    /* CRITICAL: Force block display on separate row */
    display: flex;
    flex-direction: column;
    width: 100%;
    clear: both; /* Clear any floats from Add to Cart form */

    /* Spacing - separation from Add to Cart and Key Ingredients */
    padding: var(--space-md, 16px);

    /* Minimalist background */
    background: var(--color-tw-gray-50, #F9FAFB);
    border-radius: 8px;

    /* Subtle border */
    border: 1px solid var(--color-tw-gray-200, #E5E7EB);

    /* Layout */
    gap: var(--space-xs, 8px);
}

/* ============================================
   Header (Icon + Title)
   ============================================ */

.free-shipping-progress__header {
    display: flex;
    align-items: center;
    gap: var(--space-xs, 8px);
}

.free-shipping-progress__icon {
    font-size: 18px;
    line-height: 1;
    flex-shrink: 0;
}

.free-shipping-progress__title {
    font-size: var(--text-sm, 14px);
    font-weight: var(--font-semibold, 600);
    line-height: var(--leading-normal, 1.5);
    color: var(--color-tw-gray-700, #374151);
}

/* ============================================
   Progress Bar
   ============================================ */

.free-shipping-progress__bar-container {
    width: 100%;
}

.free-shipping-progress__bar {
    height: 6px;
    width: 100%;
    background: var(--color-tw-gray-200, #E5E7EB);
    border-radius: 8px;
    overflow: hidden;
    position: relative;
}

.free-shipping-progress__fill {
    height: 100%;
    background: linear-gradient(90deg, #10B981, #14B8A6); /* Green gradient (subtle) */
    border-radius: 8px;

    /* Smooth animation on cart updates */
    transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1);

    /* Ensure fill starts from left */
    position: absolute;
    left: 0;
    top: 0;
}

/* 100% achieved state - same green, just full width */
.free-shipping-progress__fill[data-percentage="100"] {
    background: linear-gradient(90deg, #10B981, #14B8A6); /* Same green, remains subtle */
}

/* ============================================
   Message Text
   ============================================ */

.free-shipping-progress__message {
    display: flex;
    align-items: center;
}

.free-shipping-progress__message-text {
    font-size: var(--text-xs, 13px);
    font-weight: var(--font-normal, 400);
    line-height: var(--leading-normal, 1.5);
    color: var(--color-tw-gray-600, #6B7280);
}

/* Achieved state - slightly bolder but still subtle */
.free-shipping-progress__message-text--achieved {
    color: var(--color-tw-green-700, #047857);
    font-weight: var(--font-medium, 500);
}

/* Ensure WooCommerce price formatting matches text style */
.free-shipping-progress__message-text .woocommerce-Price-amount {
    font-size: inherit;
    font-weight: var(--font-semibold, 600);
    color: var(--color-tw-gray-700, #374151);
}

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

@media screen and (max-width: 768px) {
    .free-shipping-progress {
        /* Reduced padding on mobile */
        padding: var(--space-sm, 12px);
    }

    .free-shipping-progress__icon {
        font-size: 16px;
    }

    .free-shipping-progress__title {
        font-size: 12px;
    }

    .free-shipping-progress__message-text {
        font-size: 12px;
    }

    /* Bar height remains 6px (already touch-friendly) */
}

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

/* Ensure progress bar is keyboard accessible */
.free-shipping-progress__bar:focus-visible {
    outline: 2px solid var(--color-tw-green-500, #10B981);
    outline-offset: 2px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .free-shipping-progress {
        border-width: 2px;
    }

    .free-shipping-progress__bar {
        border: 1px solid currentColor;
    }
}

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