.plan-item {
    justify-content: space-between;
    gap: 2rem;
    background-color: var(--white);
    border: 1px solid rgba(0, 0, 0, .3);
    border-radius: 16px;
    padding: 1.5rem 1.2rem 1.2rem;

    &.upsell {
        .about, .title {align-items: center;}

        .title {
            .name, .sub {text-align: center;}
        }
        .description {text-align: center;}

        .top {gap: 1.5rem;}

        .items {
            display: flex;
            flex-direction: column;
            gap: .8rem;

            .includes, .benefits {
                display: flex;
                flex-direction: column;
                gap: .4rem;

                span, .contains li {font-size: 13px;}
            }

            .includes {
                padding: 1rem .8rem;
                border-radius: 8px;
                background-color: var(--ice);
            }
        }
    }

    &.best-selling {
        border-color: var(--primary);
        border-width: 2px;
        position: relative;

        .flag-best-selling {
            position: absolute;
            display: flex;
            align-items: center;
            gap: .4rem;
            font-size: 13px;
            color: var(--white);
            background-color: var(--primary);
            padding: .2rem .6rem;
            border-radius: 8px;
            left: 50%;
            top: 0;
            transform: translate(-50%, -50%);
            
            svg {
                width: 12px;
                height: 12px;
                fill: var(--white);
            }
        }

        .buttons a {
            color: var(--white);
            background-color: var(--black);
        }
    }

    &, .main-content {
        display: flex;
        flex-direction: column;
    }

    .main-content {gap: 1rem;}

    .top, .bottom, .title, .economy, .price, .tags, .values, .new-value, .contains, .about {
        display: flex;
        flex-direction: column;
    }

    .icon {
        padding: 1.2rem;
        background-color: #dbeafe;
        border-radius: 50%;
        width: fit-content;

        svg {
            width: 32px;
            height: 32px;
            fill: var(--primary);
            display: flex;
        }
    }

    .top {gap: 1rem;}

    .title, .economy {gap: .2rem;}

    .title {
        .name {
            font-size: 15px;
            font-weight: 500;
        }

        .sub {
            font-size: 13px;
            color: var(--clr-dark-paragraph);
        }
    }

    .about {gap: 1rem;}

    .description {
        font-size: 14px;
        color: var(--clr-dark-paragraph);
    }

    .economy {
        align-items: center;
        background-color: #f0fdf4;
        border: 1px solid #b9f8cf;
        border-radius: 8px;
        padding: .7rem;

        .text {
            font-size: 13px;
            color: var(--clr-dark-paragraph);
        }

        .value {
            font-size: 18px;
            font-weight: 500;
            color: var(--clr-success);
        }
    }

    .includes {
        display: flex;
        flex-direction: column;
        gap: .4rem;
        padding: 1rem .8rem;
        border-radius: 8px;
        background-color: var(--ice);

        span, .contains li {font-size: 13px;}
    }

    .bottom {
        padding-top: 1rem;
        border-top: 1px solid rgba(0, 0, 0, .3);
        gap: 1.5rem;
    }

    .price {
        gap: .9rem;

        .tags {
            gap: .4rem .6rem;
            flex-wrap: wrap;

            .tag {
                font-size: 11px;
                color: var(--white);
                background-color: var(--primary);
                padding: .2rem .5rem;
                border-radius: 8px;
                width: fit-content;
            }
        }

        .values {
            gap: .4rem;

            .old-value {
                font-size: 15px;
                color: var(--clr-dark-paragraph);
                text-decoration: line-through;
            }

            .new-value {
                gap: .1rem;

                .main {
                    font-size: 18px;
                    font-weight: 600;
                    color: var(--primary);
                }

                .secondary {font-size: 13px;}
            }

            .obs {
                font-size: 13px;
                color: var(--clr-dark-paragraph);
            }
        }
    }

    .buttons a {
        font-size: 14px;
        font-weight: 500;
        text-align: center;
        border: 2px solid var(--black);
        border-radius: 8px;
        display: block;
        padding: .3rem .8rem;
        transition: all .3s;
        background-color: var(--white);
        color: var(--black);

        &:hover {transform: scale(1.04);}
    }

    .contains {
        gap: .4rem;

        li {
            display: flex;
            align-items: center;
            gap: .4rem;
            font-size: 14px;

            svg {
                width: 16px;
                height: 16px;
                fill: var(--clr-success);
            }
        }
    }
}