/* Default: show buttons, hide dropdown */
.desktop-only { display: flex; }
.mobile-only { display: none; }

/* On small screens: hide buttons, show dropdown */
@media (max-width: 768px) {
    .desktop-only { display: none !important; }
    .mobile-only { display: block !important; }
}
.pricing-filter-buttons {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.filter-btn {
    background-color: #eaeaea;
    border: 1px solid #ccc;
    border-radius: 20px;
    padding: 8px 16px;
    cursor: pointer;
    font-weight: bold;
    transition: background-color 0.3s ease;
}

.filter-btn:hover,
.filter-btn.active {
    background-color: #1275B1;
    color: #fff;
    border-color: #1275B1;
}

@media (max-width: 768px) {
    .pricing-filter-buttons {
        flex-direction: column;
        align-items: center;
    }

    .filter-btn {
        width: 100%;
        max-width: 300px;
    }
}
.pricing-feature-row .plan-col {
    text-align: center;
    display: flex;
    align-items: center;      /* vertical centering */
    justify-content: center;  /* horizontal centering */
}

.plan-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
}
.pricing-header-row .plan-col:not(:last-child),
.pricing-feature-row .plan-col:not(:last-child) {
    margin-right: 10px; /* or whatever spacing you prefer */
}
.pricing-header-row .plan-col
{font-weight: 900;}


.pricing-slider-wrapper { overflow-x: none; }
.pricing-table { list-style: none; padding: 0; margin: 0; 
    line-height: 18px !important;
}
.pricing-header-row, .pricing-feature-row { display: flex; }
.pricing-header-row .plan-col {
    border: 2px solid #1275B1;
}
.feature-col, .plan-col {
    flex: 1;
    padding: 10px;
  border-right: 2px solid #1275B1;
  border-left: 2px solid #1275B1;
}
.plan-col {  
    text-align: center;
    }
.fixed-col { font-weight: bold; background: #f5f5f5; min-width: 200px; }
.join-button {
    display: inline-block;
    margin-top: 10px;
    padding: 5px 5px;
    background-color: #1275B1;
    color: #fff;
    text-decoration: none;
    border-radius: 4px;
    font-weight: 900;
}
.pricing-filter {
    margin-bottom: 20px;
}

.pricing-table {
    list-style: none;
    padding: 0;
    margin: 0;
}


/* Make first column fixed */
.feature-col.fixed-col {
    position: sticky;
    left: 0;
    background: #1275B1;
    z-index: 2;
    min-width: 130px;
    max-width: 130px;
    flex-shrink: 0;
}

/* Allow plans to slide horizontally */
.pricing-header-row,
.pricing-feature-row {
    display: flex;
    overflow-x: auto;
 /*  border-bottom: 0.25px solid;*/ 
}

.plan-col {
    min-width: 130px;
}

.slider-container {
    overflow-x: auto;
    display: block;
}

@media (max-width: 768px) {
    .pricing-header-row,
    .pricing-feature-row {
        overflow-x: scroll;
    }

    .plan-col {
        min-width: 200px;
        
    }
}


/* Wrap all sliding plan columns together */
.pricing-scroll-area {
    display: flex;
    flex-direction: column;
    overflow-x: auto;
    width: 100%;
}

/* Prevent individual row scrolling */
.pricing-header-row,
.pricing-feature-row {
    flex: 1 0 auto;
    min-width: max-content;
    width: fit-content;
}

/* Fixed feature column */
.feature-col.fixed-col {
    position: sticky;
    left: 0;
    background: #fff;
    z-index: 2;
    min-width: 160px;
    max-width: 160px;
    flex-shrink: 0;
}

/* Plan columns */
.plan-col {
    min-width: 130px;
    padding: 10px;
text-align: center; /* horizontal */
    vertical-align: middle; /* vertical for table-cell elements */
}

/* Row styling */
.pricing-feature-row {
    display: flex;
}

.slider-container {
    list-style: none;
    padding: 0;
    margin: 0;
}

@media (max-width: 768px) {
    .pricing-scroll-area {
display: flex;
    overflow-x: auto;
    width: 100%;
    }

    .plan-col {
        min-width: 130px;
    }
}


/* Ensure left column is frozen during horizontal scroll */
.feature-col.fixed-col {
    position: sticky;
    left: 0;
    background: #fff;
    z-index: 5;
    box-shadow: 2px 0 5px rgba(0,0,0,0.1);
    border-right: 0px solid #fff;
  border-left: 0px solid #fff;
}
.pricing-header-row .feature-col.fixed-col {background: #1275B1;  color: #fff;}
.bottom-row .plan-col {background: #1275B1;}