/**
 * AWCF USPs Carousel Styles
 * Modern nested CSS with responsive design
 * 
 * @package AWCF
 * @since 1.0.0
 */

.awcf-usps-carousel-wrapper {
    /* Default fallback values - will be overridden by inline styles from options page */
    --awcf-usps-padding: 10px 0;

    position: relative;
    width: 100%;
    overflow: hidden;
    background-color: var(--awcf-usps-bg-color);
    padding: var(--awcf-usps-padding);

    .awcf-usps-carousel {
        position: relative;
        width: 100%;
        overflow: hidden;
        cursor: grab;

        &:active {
            cursor: grabbing;
        }

        .awcf-usps-track {
            display: flex;
            gap: var(--awcf-usps-gap);
            will-change: transform;

            .awcf-usp-item {
                display: flex;
                align-items: center;
                gap: 12px;
                flex-shrink: 0;
                color: var(--awcf-usps-text-color);
                transition: opacity 0.3s ease;

                .awcf-usp-icon {
                    flex-shrink: 0;
                    width: var(--awcf-usps-icon-size);
                    height: var(--awcf-usps-icon-size);
                    display: flex;
                    align-items: center;
                    justify-content: center;

                    svg {
                        max-width: 100%;
                        max-height: 100%;
                        height: auto;
                        width: auto;
                        fill: currentColor;
                    }

                    img {
                        max-width: 100%;
                        max-height: 100%;
                        height: auto;
                        width: auto;
                        object-fit: contain;
                    }
                }

                .awcf-usp-text {
                    font-size: 14px;
                    line-height: 1.4;
                    white-space: nowrap;
                    font-family: var(--awcf-usps-font-family, inherit);
                    font-size: var(--awcf-usps-font-size, 16px);
                    font-weight: var(--awcf-usps-font-weight, 500);
                    color: var(--awcf-usps-text-color);

                    /* Exclusief Axelishes styling */
                    text-transform: uppercase;
                    /* font-family: 'Poppins' !important; */
                    /* font-weight: 600; */
                }
            }
        }
    }

    /* Responsive adjustments */
    @media (max-width: 768px) {
        --awcf-usps-padding: 4px 0;

        .awcf-usps-carousel {
            .awcf-usps-track {
                .awcf-usp-item {
                    padding: 8px 12px;
                    gap: 12px;

                    .awcf-usp-text {
                        font-size: 14px;
                    }
                }
            }
        }
    }

    @media (max-width: 480px) {
        .awcf-usps-carousel {
            .awcf-usps-track {
                .awcf-usp-item {
                    padding: 6px 10px;
                    gap: 10px;

                    .awcf-usp-text {
                        font-size: 13px;
                    }
                }
            }
        }
    }
}

/* Accessibility improvements */
@media (prefers-reduced-motion: reduce) {
    .awcf-usps-carousel-wrapper {
        .awcf-usps-carousel {
            .awcf-usps-track {
                animation: none !important;
                transform: none !important;
            }
        }
    }
}