#modal-consultas {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, .7);
    backdrop-filter: blur(4px);
    padding: 1rem;
    overflow-y: auto;

    &.active { display: flex; }

    .close-modal {
        position: fixed;
        top: 1rem;
        right: 1rem;
        padding: .6rem;
        border-radius: 50%;
        background-color: rgba(0, 0, 0, .5);
        cursor: pointer;

        svg {
            width: 18px;
            height: 18px;
            fill: var(--white);
            display: flex;
        }
    }

    .content {
        margin: auto;
        
        .title-heading {
            background: linear-gradient(45deg, var(--black), var(--secondary));
            padding: 1.5rem;
            border-radius: 16px 16px 0 0;

            .title .h2 { font-size: 24px; }

            .car-plate {
                padding: .6rem 1rem;
                background-color: var(--primary);
                border-radius: 8px;

                &, .value {
                    color: var(--white);
                    font-family: var(--font-space-grotesk);
                    font-size: 15px;
                }

                .value { font-weight: 600; }
            }
        }

        .plans {
            background-color: var(--white);
            padding: 1.5rem;

            .plan {
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                gap: 2rem;
                height: auto;
                width: calc((100% - 1.5rem) / 2);
                border-radius: 16px;
                border: 2px solid rgba(0, 0, 0, .3);
                padding: 1.2rem;
                position: relative;

                &.complete {
                    background: linear-gradient(-45deg, var(--primary), var(--tertiary));
                    border: none;
                    padding-top: 1.5rem;

                    .infos {
                        .top {
                            .about {
                                h3 {
                                    color: var(--white);

                                    svg { fill: var(--white); }
                                }

                                p { color: var(--clr-light-paragraph); }
                            }

                            .payment {
                                .prices {
                                    .current { color: var(--white); }
                                    .old {
                                        color: var(--clr-light-paragraph);
                                        text-decoration: line-through;
                                    }
                                }

                                p { color: var(--clr-light-paragraph); }
                            }
                        }

                        .bottom ul li { color: var(--white); }
                    }

                    .cta {
                        .btn-cta {
                            background-color: var(--white);
                            color: var(--primary);
                        }

                        p { color: var(--clr-light-paragraph); }
                    }
                }

                .flag {
                    position: absolute;
                    top: -11px;
                    left: 50%;
                    transform: translateX(-50%);
                    font-size: 12px;
                    font-weight: 600;
                    font-family: var(--font-space-grotesk);
                    text-transform: uppercase;
                    background-color: var(--primary);
                    border-radius: 20px;
                    background-color: var(--yellow-star);
                    display: flex;
                    align-items: center;
                    gap: .4rem;
                    padding: .2rem 1rem;

                    svg {
                        width: 12px;
                        height: 12px;
                    }
                }

                .infos {
                    display: flex;
                    flex-direction: column;
                    gap: 2rem;

                    .top {
                        display: flex;
                        flex-direction: column;
                        gap: .5rem;

                        .about {
                            display: flex;
                            flex-direction: column;
                            gap: .3rem;

                            h3 {
                                font-size: 16px;
                                font-family: var(--font-space-grotesk);
                                display: flex;
                                gap: .5rem;
                                align-items: center;

                                svg {
                                    width: 20px;
                                    height: 20px;
                                }
                            }

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

                        .payment {
                            display: flex;
                            flex-direction: column;

                            .prices {
                                display: flex;
                                align-items: end;
                                gap: .6rem;

                                .current, .old {
                                    font-family: var(--font-space-grotesk);
                                    font-weight: 600;
                                }

                                .current { font-size: 28px; }
                                .old { font-size: 15px; }
                            }

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

                    .bottom ul {
                        display: flex;
                        flex-direction: column;

                        li {
                            display: flex;
                            align-items: center;
                            gap: .6rem;
                            font-size: 14px;
                            color: var(--clr-dark-paragraph);
                            padding: .4rem 0;

                            &.green svg { fill: var(--clr-success); }
                            &.red svg { fill: var(--primary); }
                            &.white svg { fill: var(--white); }
                            &.yellow svg { fill: var(--yellow-star); }
                            &.line { border-bottom: 1px solid rgba(255, 255, 255, .3); }
                        }
                    }
                }

                .cta {
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    gap: .3rem;

                    .btn-cta {
                        display: block;
                        width: 100%;
                        text-align: center;
                    }

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

        .points {
            background-color: var(--light-grey);
            border-top: 1px solid rgba(0, 0, 0, .1);
            padding: 1rem;
            border-radius: 0 0 16px 16px;

            .point {
                display: flex;
                align-items: center;
                gap: .6rem;
                font-size: 12px;
                color: var(--clr--dark-paragraph);

                svg {
                    fill: var(--primary);
                }
            }
        }
    }
}

@media (max-width: 768px) {
    #modal-consultas .content .plans {
        flex-direction: column;

        .plan { width: 100%; }
    }
}