/**
 * Voltride Checkout Steps
 * 
 * Custom checkout progress indicator based on Figma design.
 * Displays horizontal progress bar with Cart > Details & Delivery > Pay steps.
 * 
 * @package Voltride
 * @since 1.0.0
 */

/* ============================================================================
   CHECKOUT STEPS WRAPPER
   ========================================================================= */

.voltride-checkout-steps-wrapper {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    margin: 0 auto;
    /* Full width, outside container */
}

/* ============================================================================
   PROGRESS BAR BACKGROUND
   ========================================================================= */

.voltride-checkout-steps {
    position: relative;
    display: inline-flex; /* Inline flex to not take full width */
    align-items: center;
    justify-content: center;
    gap: 48px;
    list-style: none;
    width: 100%;
    padding: 20px 64px;
    /* Intense gradient with darker edges and vibrant center transition */
    background: linear-gradient(
        270deg, 
        #0A2F28 0%,           /* Darker green at left edge */
        var(--new-green) 15%, /* Standard dark green */
        #1A6A50 35%,          /* Medium transition */
        #7FDB3C 65%,          /* Bright lime transition */
        var(--power-lime) 85%, /* Standard lime green */
        #C4FF8A 100%          /* Lighter lime at right edge */
    );
}

/* Reset default list item styling */
.voltride-checkout-steps li {
    margin: 0;
    padding: 0;
    line-height: 1;
}

/* ============================================================================
   STEP ITEMS
   ========================================================================= */

.voltride-step {
    position: relative;
    z-index: 2;
}

.voltride-step a,
.voltride-step > span {
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-block;
}

.voltride-step-text {
    font-family: 'Biryani', sans-serif;
    font-size: 15px;
    line-height: 1.6;
    letter-spacing: 0.28px;
    color: var(--new-green, #0F3F36);
    white-space: nowrap;
    transition: opacity 0.3s ease, transform 0.2s ease;
    /* Prevent layout shift when changing font-weight */
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    position: relative;
}

/* Prevent layout shift trick: use text-shadow to simulate bold without changing width */
.voltride-step-inactive .voltride-step-text {
    /* Pre-allocate space by using slightly wider letter-spacing */
    letter-spacing: 0.32px;
}

.voltride-step-active .voltride-step-text {
    /* Compensate by reducing letter-spacing when bold */
    letter-spacing: 0.28px;
}

/* Active Step Styling */
.voltride-step-active .voltride-step-text {
    font-weight: 700;
    opacity: 1;
}

/* Inactive Step Styling */
.voltride-step-inactive .voltride-step-text {
    font-weight: 300;
    opacity: 0.5;
}

/* Pay Step - Special Color (Power Lime when inactive) */
.voltride-step-pay.voltride-step-inactive .voltride-step-text {
    color: var(--power-lime, #ADFF60);
    opacity: 0.8;
}

/* Hover Effect for Clickable Steps */
.voltride-step-inactive a:hover .voltride-step-text {
    opacity: 0.8;
    transform: translateY(-1px);
}

/* Active step should not have hover transform */
.voltride-step-active a:hover .voltride-step-text {
    transform: none;
}

/* ============================================================================
   SEPARATOR (Chevron Icons)
   ========================================================================= */

.voltride-step-separator {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    position: relative;
    z-index: 2;
}

.voltride-step-separator svg {
    display: block;
    width: 16px;
    height: 16px;
    color: var(--new-green, #0F3F36);
}

.voltride-separator-inactive svg {
    opacity: 0.5;
}

.voltride-separator-active svg {
    opacity: 1;
}

/* ============================================================================
   ACTIVE INDICATOR (Triangle)
   ========================================================================= */

/* Triangle indicator completely removed as per design requirements */
.voltride-step-indicator {
    display: none !important;
}

/* ============================================================================
   RESPONSIVE DESIGN
   ========================================================================= */

/* Tablet (768px - 991px) */
@media (max-width: 991px) {
    .voltride-checkout-steps {
        gap: 32px;
        padding: 20px 32px;
    }

    .voltride-step-text {
        font-size: 13px;
    }
}

/* Mobile (max 767px) */
@media (max-width: 767px) {
    .voltride-checkout-steps {
        gap: 16px;
        padding: 16px 24px;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: visible;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none; /* IE/Edge */
    }
    .voltride-step-text {
        font-family: 'Biryani', sans-serif;
        font-size: 13px;
    }
    /* Hide scrollbar for Chrome, Safari, and Opera */
    .voltride-checkout-steps::-webkit-scrollbar {
        display: none;
    }

    .voltride-step-text {
        font-size: 12px;
        letter-spacing: 0.24px;
    }

    .voltride-step-separator {
        width: 12px;
        height: 12px;
    }

    .voltride-step-separator svg {
        width: 12px;
        height: 12px;
    }
}

/* Very small mobile (max 480px) */
@media (max-width: 480px) {
    .voltride-checkout-steps {
        gap: 12px;
        padding: 14px 20px;
    }

    .voltride-step-text {
        font-size: 11px;
    }
}

/* ============================================================================
   HIDE DEFAULT WOODMART CHECKOUT STEPS
   ========================================================================= */

/* Hide the default Woodmart checkout steps completely */
.wd-checkout-steps {
    display: none !important;
}

/* Also hide any default page title on checkout pages */
.woocommerce-cart .wd-page-title,
.woocommerce-checkout .wd-page-title,
.woocommerce-order-received .wd-page-title {
    display: none !important;
}

/* ============================================================================
   ACCESSIBILITY
   ========================================================================= */

/* Focus states for keyboard navigation */
.voltride-step a:focus-visible {
    outline: 2px solid var(--new-green, #0F3F36);
    outline-offset: 4px;
    border-radius: 4px;
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    .voltride-step a,
    .voltride-step > span {
        transition: none;
    }
}

/* ============================================================================
   PRINT STYLES
   ========================================================================= */

@media print {
    .voltride-checkout-steps-wrapper {
        display: none;
    }
}