/**
 * Free Shipping Bar Performance Optimizations
 *
 * Fixes for:
 * - CLS (Cumulative Layout Shift)
 * - Forced reflows
 * - Layout jumps on page load
 *
 * @package Blocksy-Child
 */

/* Reserve space for shipping progress bar to prevent CLS */
.ct-shipping-progress-mini-cart,
.ct-shipping-progress-cart-page,
.ct-shipping-progress-checkout-page {
    /* Reserve minimum height even when empty */
    min-height: 65px;

    /* Use CSS containment to isolate layout calculations */
    contain: layout style paint;

    /* Improve rendering performance */
    content-visibility: auto;

    /* Smooth transitions */
    transition: opacity 0.2s ease-in-out;
}

/* Reserve space for message */
.ct-shipping-progress-mini-cart .ct-message,
.ct-shipping-progress-cart-page .ct-message,
.ct-shipping-progress-checkout-page .ct-message {
    /* Reserve line height to prevent shift */
    min-height: 1.5em;
    font-size: 14px;
    line-height: 1.5;
}

/* Fixed height for progress bar */
.ct-shipping-progress-mini-cart .ct-progress-bar,
.ct-shipping-progress-cart-page .ct-progress-bar,
.ct-shipping-progress-checkout-page .ct-progress-bar {
    /* Match Blocksy's fixed height */
    height: var(--product-progress-bar-height, 5px);

    /* Prevent layout shift during animation */
    will-change: contents;
}

/* Skeleton loader for better perceived performance */
.ct-shipping-progress-mini-cart:empty,
.ct-shipping-progress-cart-page:empty,
.ct-shipping-progress-checkout-page:empty {
    /* Placeholder while loading */
    background: linear-gradient(
        90deg,
        rgba(0, 0, 0, 0.03) 25%,
        rgba(0, 0, 0, 0.05) 50%,
        rgba(0, 0, 0, 0.03) 75%
    );
    background-size: 200% 100%;
    animation: blocksy-shipping-loading 1.5s ease-in-out infinite;
}

@keyframes blocksy-shipping-loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Optimize progress bar animation */
.ct-progress-bar span {
    /* Use transform for smoother animations */
    transform: translateZ(0);
    backface-visibility: hidden;

    /* GPU acceleration */
    will-change: width;
}

/* Reduce layout calculations on mobile */
@media (max-width: 768px) {
    .ct-shipping-progress-mini-cart,
    .ct-shipping-progress-cart-page,
    .ct-shipping-progress-checkout-page {
        /* Smaller reserved space on mobile */
        min-height: 55px;
    }
}