/*
 * Pricing SaaS V109
 * Destaque recomendado, renovação e correções mobile.
 */

.subscription-options{
    padding-top:20px;
}

.subscription-card{
    position:relative;
    overflow:visible;
}

.subscription-card.is-recommended{
    border-color:#35c978;
    box-shadow:
        0 0 0 1px rgba(53,201,120,.10),
        0 12px 32px rgba(53,201,120,.08);
}

.subscription-recommended-badge{
    position:absolute;
    top:0;
    left:50%;
    z-index:4;
    transform:translate(-50%,-52%);
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:27px;
    padding:5px 12px;
    border-radius:999px;
    background:#35c978;
    color:#fff;
    font-size:11px;
    line-height:1;
    font-weight:900;
    white-space:nowrap;
    box-shadow:0 7px 18px rgba(53,201,120,.20);
}

.subscription-renewal{
    display:flex;
    align-items:baseline;
    flex-wrap:wrap;
    gap:4px;
    margin-top:10px;
    color:var(--sub-muted,#7890aa);
    font-size:11px;
    line-height:1.35;
}

.subscription-renewal strong{
    color:var(--sub-price,var(--sub-accent,#6aa8d0));
    font-weight:900;
}

html,
body,
.subscription-page{
    max-width:100%;
    overflow-x:hidden;
}

.subscription-page *,
.subscription-page *::before,
.subscription-page *::after{
    box-sizing:border-box;
}

.subscription-topbar,
.subscription-added-bar,
.subscription-main{
    max-width:100%;
}

.subscription-topbar-inner,
.subscription-main,
.subscription-options,
.subscription-card,
.subscription-card-body,
.subscription-action-panel{
    min-width:0;
}

@media(max-width:700px){
    html,
    body,
    .subscription-page{
        width:100%;
        max-width:100vw;
        overflow-x:hidden !important;
    }

    .subscription-topbar{
        width:100%;
        max-width:100vw;
    }

    .subscription-topbar-inner{
        width:100%;
        max-width:100%;
        margin:0 auto;
        padding-left:14px !important;
        padding-right:14px !important;
        display:grid !important;
        grid-template-columns:minmax(0,1fr) auto;
        align-items:center;
        gap:10px;
    }

    .subscription-brand{
        min-width:0;
        max-width:100%;
        gap:9px;
    }

    .subscription-brand-logo{
        flex:0 0 auto;
        width:120px !important;
        max-width:38vw;
        height:auto !important;
    }

    .subscription-brand-context{
        min-width:0;
        max-width:100%;
        overflow:hidden;
    }

    .subscription-brand-context strong,
    .subscription-brand-context span{
        display:block;
        max-width:100%;
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
    }

    .subscription-back{
        min-width:0;
        max-width:104px;
        padding:8px 9px !important;
        font-size:10px !important;
        line-height:1.15;
        text-align:center;
        white-space:normal !important;
        overflow-wrap:anywhere;
    }

    .subscription-added-bar{
        width:100%;
        max-width:100%;
        padding-left:14px !important;
        padding-right:14px !important;
        text-align:center;
    }

    .subscription-main{
        width:100% !important;
        max-width:100vw !important;
        margin:0 auto !important;
        padding-left:14px !important;
        padding-right:14px !important;
    }

    .subscription-heading{
        width:100%;
        max-width:100%;
        padding-left:0 !important;
        padding-right:0 !important;
        overflow:hidden;
    }

    .subscription-heading h1{
        width:100%;
        max-width:100%;
        margin-left:auto;
        margin-right:auto;
        font-size:clamp(26px,8vw,34px) !important;
        line-height:1.08 !important;
        overflow-wrap:anywhere;
    }

    .subscription-heading p{
        width:100%;
        max-width:100%;
        padding:0;
        font-size:13px !important;
        line-height:1.45;
        overflow-wrap:anywhere;
    }

    .subscription-options{
        width:100% !important;
        max-width:100% !important;
        padding-top:22px;
        display:flex !important;
        flex-direction:column !important;
        gap:16px !important;
        overflow:visible !important;
    }

    .subscription-card{
        width:100% !important;
        max-width:100% !important;
        min-width:0 !important;
        margin:0 !important;
        flex:0 0 auto !important;
    }

    .subscription-card-select,
    .subscription-card-body,
    .subscription-saving,
    .subscription-tip,
    .subscription-renewal,
    .subscription-benefit{
        width:100%;
        max-width:100%;
        min-width:0;
    }

    .subscription-current-price{
        max-width:100%;
        flex-wrap:wrap;
    }

    .subscription-conditions{
        width:100%;
        max-width:100%;
        margin-left:0 !important;
        margin-right:0 !important;
        padding-left:0 !important;
        padding-right:0 !important;
        overflow-wrap:anywhere;
    }

    .subscription-action-panel{
        left:0 !important;
        right:0 !important;
        width:auto !important;
        max-width:100vw !important;
        margin-left:0 !important;
        margin-right:0 !important;
        padding-left:14px !important;
        padding-right:14px !important;
    }

    .subscription-action-summary,
    .subscription-checkout{
        min-width:0;
        max-width:100%;
    }

    .subscription-recommended-badge{
        min-height:25px;
        padding:5px 10px;
        font-size:10px;
    }

    .subscription-renewal{
        margin-top:9px;
        font-size:12px;
    }
}