/* 
    PRICING MOBILE CAROUSEL
    Converts pricing cards to a swipeable carousel on mobile devices with navigation buttons
*/

/* Mobile Carousel Container - Only on mobile */
@media (max-width: 991px) {

    /* Wrapper for carousel and buttons */
    .pricing-page .container-fluid.container-md {
        position: relative !important;
    }

    /* Pricing row becomes a carousel */
    .pricing-page .row.justify-content-center {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        /* Firefox */
        gap: 1rem !important;
        padding: 1rem 0.5rem !important;
        margin: 0 -1rem !important;
        position: relative !important;
    }

    /* Hide scrollbar for Chrome, Safari and Opera */
    .pricing-page .row.justify-content-center::-webkit-scrollbar {
        display: none !important;
    }

    /* Pricing columns become carousel items */
    .pricing-page .row.justify-content-center>[class*="col-"] {
        flex: 0 0 85% !important;
        max-width: 85% !important;
        scroll-snap-align: center !important;
        scroll-snap-stop: always !important;
    }

    /* Ensure cards maintain their height */
    .pricing-page .pos-pricing-card {
        height: 100% !important;
        margin: 0 !important;
    }

    /* Navigation Buttons */
    .pricing-carousel-nav {
        position: absolute !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        z-index: 10 !important;
        background: #ffffff !important;
        border: 2px solid #e2e8f0 !important;
        border-radius: 50% !important;
        width: 40px !important;
        height: 40px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
        transition: all 0.3s ease !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
    }

    .pricing-carousel-nav:hover {
        background: #1E5CAA !important;
        border-color: #1E5CAA !important;
        box-shadow: 0 6px 16px rgba(30, 92, 170, 0.3) !important;
    }

    .pricing-carousel-nav:hover svg {
        stroke: #ffffff !important;
    }

    .pricing-carousel-nav svg {
        width: 20px !important;
        height: 20px !important;
        stroke: #1E5CAA !important;
        stroke-width: 2.5 !important;
        transition: stroke 0.3s ease !important;
    }

    .pricing-carousel-nav.prev {
        left: -10px !important;
    }

    .pricing-carousel-nav.next {
        right: -10px !important;
    }

    /* Hide buttons when at start/end */
    .pricing-carousel-nav.disabled {
        opacity: 0.3 !important;
        pointer-events: none !important;
    }

    /* Add padding to pricing section for buttons */
    .pricing-page {
        padding-bottom: 5rem !important;
    }

    /* Carousel dots indicator */
    .pricing-carousel-dots {
        display: flex !important;
        justify-content: center !important;
        gap: 0.5rem !important;
        margin-top: 2rem !important;
        padding: 0 !important;
        list-style: none !important;
    }

    .pricing-carousel-dot {
        width: 8px !important;
        height: 8px !important;
        border-radius: 50% !important;
        background: #cbd5e1 !important;
        cursor: pointer !important;
        transition: all 0.3s ease !important;
        border: none !important;
        padding: 0 !important;
    }

    .pricing-carousel-dot.active {
        background: #1E5CAA !important;
        width: 24px !important;
        border-radius: 4px !important;
    }
}

/* Tablet view - 2 cards visible */
@media (min-width: 768px) and (max-width: 991px) {
    .pricing-page .row.justify-content-center>[class*="col-"] {
        flex: 0 0 48% !important;
        max-width: 48% !important;
    }

    .pricing-carousel-nav.prev {
        left: 0 !important;
    }

    .pricing-carousel-nav.next {
        right: 0 !important;
    }
}

/* Small mobile - 1 card at a time */
@media (max-width: 767px) {
    .pricing-page .row.justify-content-center>[class*="col-"] {
        flex: 0 0 90% !important;
        max-width: 90% !important;
    }
}

/* Add smooth scroll behavior */
.pricing-page .row.justify-content-center {
    scroll-behavior: smooth !important;
}

/* Ensure proper spacing on mobile */
@media (max-width: 991px) {
    .pricing-page .container-fluid.container-md {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
}

/* Desktop - hide carousel elements */
@media (min-width: 992px) {

    .pricing-carousel-nav,
    .pricing-carousel-dots {
        display: none !important;
    }
}