/* ==========================================================================
   Membership / affiliation plan picker — carousel of tier cards plus the
   selected tier's benefits as a vertical list. Shared by the member and club
   registration wizards.
   ========================================================================== */

.sb-plan-carousel {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
}

.sb-plan-track {
    /* flex:1 + min-width:0 so the track fills the row and can actually shrink —
       otherwise it sizes to its content and never scrolls. */
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    /* Vertical padding only — horizontal padding would leave the track resting
       at scrollLeft 4, so "at the start" never reads as true. */
    padding: 4px 0;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.sb-plan-track::-webkit-scrollbar { display: none; }

.sb-plan-track .sb-plan-card {
    flex: 0 0 calc((100% - 32px) / 3);
    scroll-snap-align: start;
    margin: 0;
    min-width: 0;
}

/* Three to a row leaves less width, so the price scales to fit and the "/year"
   suffix drops onto its own line instead of running off. */
.sb-plan-track .sb-plan-price { font-size: clamp(22px, 3.2vw, 30px); white-space: nowrap; }
.sb-plan-track .sb-plan-price > span:last-child { display: block; font-size: 13px; }

.sb-plan-nav {
    flex: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #E4E4E4;
    background: #fff;
    color: #131413;
    cursor: pointer;
    transition: all .15s;
}

.sb-plan-nav:hover { background: #EEF6E8; border-color: #3F7818; color: #3F7818; }
.sb-plan-nav[disabled] { opacity: .35; cursor: default; }

.sb-plan-dots { display: flex; justify-content: center; gap: 7px; margin: 14px 0 4px; }

.sb-plan-dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #D8DDD6;
    cursor: pointer;
    transition: all .15s;
}

.sb-plan-dot.is-active { background: #3F7818; width: 22px; border-radius: 999px; }

/* Benefits of the chosen tier, one per line. */
.sb-plan-features-title { display: block; margin-bottom: 10px; color: #131413; }
.sb-plan-feature-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }

.sb-plan-feature-list li {
    position: relative;
    padding-left: 26px;
    font-size: 14px;
    line-height: 1.5;
    color: #424342;
}

.sb-plan-feature-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #E7F4DC no-repeat center;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M1.5 6.5 4.5 9.5 10.5 2.5' stroke='%233F7818' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

@media (max-width: 900px) { .sb-plan-track .sb-plan-card { flex-basis: calc((100% - 16px) / 2); } }
@media (max-width: 600px) { .sb-plan-track .sb-plan-card { flex-basis: 100%; } }