/*==========================================================
Section : Pricing
Version : 2.0
Author  : Erwin Echon
==========================================================*/
.mbi-pricing {
    padding: 8rem 0;
    background: #ffffff;
}

/*==========================================================
Pricing Table
==========================================================*/
.mbi-pricing-table {
    margin-top: 4rem;
    overflow: hidden;
    border-radius: 32px;
    background: rgba(255, 255, 255, .90);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid rgba(255, 255, 255, .60);
    box-shadow:
        0 28px 70px rgba(15, 23, 42, .08);
}

/*----------------------------------------------------------
Rows
----------------------------------------------------------*/
.mbi-pricing-row {
    display: grid;
    grid-template-columns: 2.5fr 1fr 1fr 1fr;
    align-items: stretch;
}

.mbi-pricing-row:not(:last-child) {
    border-bottom: 1px solid rgba(0, 45, 172, .08);
}

.mbi-pricing-row:nth-child(even):not(.mbi-pricing-header) {
    background: #f8fbff;
}

/*----------------------------------------------------------
Header
----------------------------------------------------------*/
.mbi-pricing-header {
    background:
        linear-gradient(180deg,
            #ffffff,
            #f8fbff);
}

.mbi-pricing-plan,
.mbi-pricing-feature-title {
    padding: 40px 25px;
    text-align: center;

}

.mbi-pricing-plan {
    position: relative;
    padding: 3rem 2rem;
    text-align: center;
    border-left: 1px solid rgba(0, 45, 172, .08);
    transition: .35s ease;
}

.mbi-pricing-plan:hover {
    background: rgba(0, 45, 172, .02);
}

.mbi-pricing-plan h3 {
    margin: 1rem 0 .75rem;
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--mbi-heading);
}

.mbi-pricing-plan p {

    margin: 0;
    font-size: .95rem;
    color: var(--mbi-body);

}

/*----------------------------------------------------------
Most Popular
----------------------------------------------------------*/
.mbi-pricing-plan.popular {
    background:
        linear-gradient(180deg,
            rgba(0, 45, 172, .05),
            rgba(255, 255, 255, .95));
    border: 2px solid var(--mbi-primary);
    border-radius: 24px;
    margin: 10px;
    box-shadow:
        0 18px 40px rgba(0, 45, 172, .12);
}

.mbi-pricing-plan.popular::before {
    content: "MOST POPULAR";
    position: absolute;
    top: -16px;
    left: 50%;
    transform: translateX(-50%);
    padding: .55rem 1.25rem;
    border-radius: 999px;
    background: var(--mbi-primary);
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: 1px;
}

/*----------------------------------------------------------
Plan Label
----------------------------------------------------------*/
.plan-label {
    display: inline-flex;
    align-items: center;
    padding: .65rem 1.2rem;
    border-radius: 999px;
    background: rgba(4, 120, 99, .10);
    color: var(--mbi-secondary);
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .04em;
}

/*----------------------------------------------------------
Feature
----------------------------------------------------------*/

.mbi-pricing-feature,
.mbi-pricing-value {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 82px;
    padding: 20px 25px;
}

.mbi-pricing-feature {
    justify-content: flex-start;
    gap: 18px;
    font-weight: 600;
}

.feature-icon {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    background:
        linear-gradient(135deg,
            rgba(0, 45, 172, .08),
            rgba(4, 120, 99, .10));
}

.feature-icon i {
    font-size: 1.3rem;
    color: var(--mbi-primary);
}

.mbi-pricing-value {
    border-left: 1px solid rgba(0, 45, 172, .08);
    font-weight: 500;
    text-align: center;
}

.mbi-pricing-value i {
    color: var(--mbi-secondary);
    font-size: 1.3rem;
}

/*----------------------------------------------------------
Badges
----------------------------------------------------------*/
.pricing-badge {
    display: inline-flex;
    align-items: center;
    padding: .45rem .9rem;
    border-radius: 999px;
    font-size: .76rem;
    font-weight: 700;
}

.pricing-badge.included {
    color: #fff;
    background: var(--mbi-secondary);
}

.pricing-badge.optional {
    color: var(--mbi-primary);
    background: rgba(0, 45, 172, .10);
}

.pricing-badge.neutral {
    background: #eef2f7;
    color: #5f6b7a;
}

/*----------------------------------------------------------
Implementation
----------------------------------------------------------*/
.implementation-row {
    background: rgba(4, 120, 99, .06);
}

.implementation-feature {
    align-items: flex-start;
}

.implementation-content small {
    display: block;
    margin-top: 6px;
    color: var(--mbi-body);
}

.implementation-list {
    margin: 15px 0 0;
    padding-left: 20px;
}

.implementation-list li {
    margin-bottom: 8px;
}

.implementation-price-all {
    grid-column: 2 / 5;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-left: 1px solid rgba(0, 45, 172, .08);
}

.price-label {
    font-size: 2.25rem;
    font-weight: 800;
    color: var(--mbi-secondary);
}

/*----------------------------------------------------------
Pricing Note
----------------------------------------------------------*/
.mbi-pricing-note {
    display: flex;
    gap: 2rem;
    margin-top: 3rem;
    padding: 2rem;
    border-radius: 28px;
    background: rgba(255, 255, 255, .88);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, .60);
    box-shadow:
        0 18px 50px rgba(15, 23, 42, .05);
}

.note-icon {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(0, 45, 172, .10);
}

.note-icon i {
    color: var(--mbi-primary);
    font-size: 1.5rem;
}

.note-content p:last-child {
    margin-bottom: 0;
}

.mbi-pricing-scroll-hint {
    display: none;
}