/* Carousel Container (Mobile Focused) */
.plans-carousel {
    display: flex !important;
    gap: 1.5rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 2rem 0.5rem;
    /* Padding for shadow/scale space */
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* Firefox */
    flex-wrap: nowrap !important;
    width: 100%;
}

.plans-carousel::-webkit-scrollbar {
    display: none;
    /* Chrome/Safari */
}

/* Individual Plan Column */
.plan-col {
    flex: 0 0 85%;
    /* Show part of next card on mobile */
    max-width: 400px;
    scroll-snap-align: center;
}

/* Featured Plan Styling */
.pricing-card {
    height: 100%;
    border: 1px solid transparent;
    /* Prevent layout shift on hover if we added border */
    transition: all 0.3s ease;
    position: relative;
    background: #fff;
    overflow: hidden;
    /* For badges */
}

.pricing-card.featured {
    border: 2px solid #7c3aed;
    /* Primary Purple */
    transform: scale(1.05);
    z-index: 2;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

/* Recommended Badge */
.featured-badge {
    background: #7c3aed;
    color: white;
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    padding: 0.5rem 2rem;
    position: absolute;
    top: 1.5rem;
    right: -2rem;
    transform: rotate(45deg);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    z-index: 10;
}

/* Desktop override (Adjust sizing but keep carousel) */
@media (min-width: 992px) {
    .plans-carousel {
        /* Keep nowrap for carousel effect */
        justify-content: center;
        /* Center if they fit, otherwise scroll */
        padding-top: 3rem;
        padding-bottom: 3rem;

        /* Show scrollbar on desktop for usability if user has mouse */
        scrollbar-width: thin;
    }

    .plans-carousel::-webkit-scrollbar {
        display: block;
        height: 8px;
    }

    .plans-carousel::-webkit-scrollbar-track {
        background: transparent;
    }

    .plans-carousel::-webkit-scrollbar-thumb {
        background-color: rgba(0, 0, 0, 0.2);
        border-radius: 20px;
    }

    .plan-col {
        flex: 0 0 auto;
        width: 350px;
        /* Fixed width for consistent carousel look */
    }
}