/**
 * CDSWerx JetEngine Listing Grid Enhancement Styles
 * 
 * Fraction pagination styling for JetEngine Listing Grid widget
 * Matches JetElements Advanced Carousel fraction pagination design
 * 
 * @package CDSWerx_Widget_Library
 * @since 2.4.0
 */

/* Fraction Navigation Container */
.cdswerx-fraction-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    box-sizing: border-box;
}

/* All spans in fraction nav */
.cdswerx-fraction-nav span {
    display: inline-block;
}

/* Current Value */
.cdswerx-fraction-nav .current {
    /* Styles applied via Elementor controls */
}

/* Separator */
.cdswerx-fraction-nav .separator {
    /* Styles applied via Elementor controls */
}

/* Total Value */
.cdswerx-fraction-nav .total {
    /* Styles applied via Elementor controls */
}

/* Custom Arrow Icons.
 *
 * Positioning, sizing, color, background, and z-index are all provided by
 * JetEngine's own .jet-listing-grid__slider-icon.swiper-arrow / .slick-arrow
 * rules (in jet-engine/assets/css/frontend.css). Native "Slider Arrows"
 * Elementor controls override those at higher specificity. We deliberately
 * do not redeclare any of that here — competing same-specificity rules in
 * a separate stylesheet make positioning brittle and order-dependent.
 *
 * The one thing we DO override: JetEngine hard-codes transform: scaleX(-1)
 * on the next-arrow, assuming the same icon is used for both directions and
 * one needs flipping. Our icon picker lets the user choose distinct prev
 * and next icons, so the flip mirrors the chosen icon and also drops the
 * vertical-centering transform. Undo it. */
.jet-listing-grid__slider-icon.swiper-arrow.next-arrow.cdswerx-custom-arrow,
.jet-listing-grid__slider-icon.slick-arrow.next-arrow.cdswerx-custom-arrow {
    transform: none;
}