/* ONYX SEO + VISUAL POLISH V1.5.3 */

/* Tariff glyphs stay inside a real glass tile instead of overflowing it. */
.onyx-tariff-icon.onyx-icon-slot-v2 {
    width: 54px !important;
    height: 54px !important;
    min-width: 54px !important;
    padding: 7px !important;
    box-sizing: border-box !important;
    display: grid !important;
    place-items: center !important;
    overflow: hidden !important;
    border: 1px solid rgba(255, 255, 255, .11) !important;
    border-radius: 16px !important;
    background:
        linear-gradient(145deg, rgba(255, 60, 183, .19), rgba(116, 48, 230, .16)),
        rgba(255, 255, 255, .035) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .08),
        0 9px 24px rgba(180, 40, 190, .16) !important;
}

.onyx-tariff-icon.onyx-icon-slot-v2 > .onyx-pack-icon-v1 {
    width: 40px !important;
    height: 40px !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    filter: saturate(1.2) brightness(1.12) drop-shadow(0 0 5px rgba(238, 47, 207, .34)) !important;
}

/* The active plan glyph also sits inside its existing framed holder. */
.onyx-active-plan-icon-v2 {
    width: 58px !important;
    height: 58px !important;
    min-width: 58px !important;
    padding: 7px !important;
    box-sizing: border-box !important;
    display: grid !important;
    place-items: center !important;
    overflow: hidden !important;
    border: 1px solid rgba(255, 255, 255, .11) !important;
    border-radius: 18px !important;
    background:
        linear-gradient(145deg, rgba(255, 60, 183, .14), rgba(116, 48, 230, .12)),
        rgba(255, 255, 255, .035) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .08),
        0 9px 24px rgba(180, 40, 190, .14) !important;
}

.onyx-active-plan-icon-v2 > .onyx-pack-icon-v1 {
    width: 43px !important;
    height: 43px !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
}

/* Home subscription header: title on the left, status top-right, balance below it. */
#subscription-display > div:first-child {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas:
        "title status"
        "title balance" !important;
    align-items: center !important;
    column-gap: 12px !important;
    row-gap: 8px !important;
    margin-bottom: 16px !important;
}

#subscription-display > div:first-child > .section-title {
    grid-area: title !important;
    align-self: start !important;
    min-width: 0 !important;
    margin: 2px 0 0 !important;
}

#subscription-display > div:first-child > #sub-status-badge {
    grid-area: status !important;
    justify-self: end !important;
    align-self: end !important;
    margin: 0 !important;
}

#subscription-display > div:first-child > #onyx-simple-balance-chip {
    grid-area: balance !important;
    justify-self: end !important;
    align-self: start !important;
    min-height: 32px !important;
    padding: 6px 11px !important;
    margin: 0 !important;
}

@media (max-width: 620px) {
    .onyx-tariff-icon.onyx-icon-slot-v2 {
        width: 48px !important;
        height: 48px !important;
        min-width: 48px !important;
        padding: 6px !important;
        border-radius: 15px !important;
    }

    .onyx-tariff-icon.onyx-icon-slot-v2 > .onyx-pack-icon-v1 {
        width: 35px !important;
        height: 35px !important;
    }

    .onyx-active-plan-icon-v2 {
        width: 54px !important;
        height: 54px !important;
        min-width: 54px !important;
        padding: 7px !important;
        border-radius: 17px !important;
    }

    .onyx-active-plan-icon-v2 > .onyx-pack-icon-v1 {
        width: 39px !important;
        height: 39px !important;
    }

    #subscription-display > div:first-child {
        grid-template-columns: minmax(0, 1fr) auto !important;
        grid-template-areas:
            "title status"
            "title balance" !important;
        column-gap: 10px !important;
        row-gap: 7px !important;
    }

    #subscription-display > div:first-child > #sub-status-badge,
    #subscription-display > div:first-child > #onyx-simple-balance-chip {
        justify-self: end !important;
    }

    #subscription-display > div:first-child > #onyx-simple-balance-chip {
        min-height: 30px !important;
        padding: 5px 10px !important;
        font-size: 10px !important;
    }

    #subscription-display > div:first-child > #onyx-simple-balance-chip strong {
        font-size: 12px !important;
    }
}