/* A dedicated asset avoids the cached auto-fit layout from older releases. */
#billing-page {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
}

#billing-page .oa-plan-scroll {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
}

#billing-page .oa-billing-plans {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: 1fr;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    align-items: stretch;
    gap: 16px;
    width: 100%;
    direction: rtl;
}

#billing-page .oa-billing-plans > .oa-plan {
    width: auto;
    min-width: 0;
    max-width: none;
    margin: 0;
    padding: 24px 20px;
    overflow-wrap: anywhere;
}

@media (min-width: 768px) and (max-width: 1100px) {
    #billing-page .oa-billing-plans {
        gap: 12px;
    }

    #billing-page .oa-billing-plans > .oa-plan {
        padding: 20px 12px;
    }

    #billing-page .oa-billing-plans .oa-price {
        font-size: clamp(1.1rem, 2.1vw, 1.45rem);
    }
}

/* Keep one row on phones; scroll the cards without widening the page. */
@media (max-width: 767px) {
    #billing-page .oa-billing-plans {
        grid-template-columns: repeat(4, minmax(265px, 1fr));
        grid-auto-columns: minmax(265px, 1fr);
    }
}