/**
 * NBN Plans 3-Card Desktop Display Fix
 * 
 * Ensures only 3 cards are visible at a time on desktop
 */

/* Desktop screens - show exactly 3 cards */
@media (min-width: 1024px) {
    .nbn-plans-container {
        max-width: 1200px;
        margin: 0 auto;
        overflow: hidden;
    }

    .nbn-plans-grid {
        width: 100%;
        overflow-x: auto;
        display: flex;
        gap: 2rem;
        padding: 0 4rem;
    }

    /* Fixed width for exactly 3 cards */
    .nbn-plan-card {
        flex: 0 0 calc((1200px - 8rem - 4rem) / 3) !important;
        min-width: calc((1200px - 8rem - 4rem) / 3) !important;
        max-width: calc((1200px - 8rem - 4rem) / 3) !important;
        width: calc((1200px - 8rem - 4rem) / 3) !important;
    }

    /* Ensure hidden cards don't take up space */
    .nbn-plan-card.filter-hidden {
        display: none !important;
        flex: 0 0 0 !important;
        min-width: 0 !important;
        max-width: 0 !important;
        width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        opacity: 0 !important;
        pointer-events: none !important;
        position: absolute !important;
        left: -9999px !important;
    }
}

/* For filtering - ensure Standard and More classes work */
.nbn-plan-filter {
    cursor: pointer;
    transition: all 0.3s ease;
}

.nbn-plan-filter.active {
    background-color: var(--troppo-primary, #ff6b35);
    color: white;
}

/* Ensure plan category classes are properly hidden/shown */
.nbn-plan-standard,
.nbn-plan-more {
    transition: opacity 0.3s ease;
}

/* When Standard filter is active */
body:has(.nbn-plan-filter[data-filter='standard'].active) .nbn-plan-more {
    display: none !important;
}

/* When More filter is active */
body:has(.nbn-plan-filter[data-filter='more'].active) .nbn-plan-standard {
    display: none !important;
}

/* Fallback for browsers without :has() support */
.filter-active-standard .nbn-plan-more {
    display: none !important;
}

.filter-active-more .nbn-plan-standard {
    display: none !important;
}