.card-user {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr auto;
    gap: 24px;
    border-radius: 16px;
    border: 1px solid var(--wp--preset--color--quinary);
    background: #03091599;
    padding: var(--wp--preset--spacing--xl);
    color: var(--wp--preset--color--text-primary);

    & header{
        display: grid;
        grid-template-columns: auto 1fr;
        grid-row: auto auto;
        align-items: center;
        gap: 10px;

        & img{
            width: 60px;
            height: 60px;
            border-radius: 50%;
            border: 1px solid var(--wp--preset--color--secondary);
            margin: 0 auto;
        }

        & .name{
            margin: 2px 0 0;
        }
    }

    & > div{

        & .text{
            margin: 0;
            
            & > button{
                background: transparent;
                color: var(--wp--preset--color--text-primary);
                text-transform: lowercase;
                border: none;
                padding: 0;
                transition: 0.3s;
                cursor: pointer;
    
                &:hover{
                    color: var(--wp--preset--color--secondary);
                }
            }
        }

        & dialog{
            padding: 20px;
            background: transparent;
            border: none;

            &[id^="alert-dialog"]::backdrop {
                background: linear-gradient(#000d, #000a);
            }

            & > div{
                display: grid;
                gap: 20px;
                background: var(--wp--preset--color--primary);
                border-radius: 16px;
                border: 1px solid var(--wp--preset--color--quinary);
                max-width: 900px;
                padding: 20px;

                & div{
                    display: grid;
                    grid-template-columns: 1fr auto;
                    align-items: center;

                    & .title2{
                        color: var(--wp--preset--color--text-primary);
                        margin: 0;
                    }
                    
                    & button{
                        display: flex;
                        align-items: center;
                        cursor: pointer;
                        overflow: hidden;
                        position: relative;
                        text-decoration: none !important;
                        transition: all 0.6s ease;
                        font-weight: 500;
                        outline: 0;
                        padding: 10px;
                        border-radius: 50%;
                        border: 1px solid var(--wp--preset--color--secondary);
                        background: var(--wp--preset--color--primary);
    
                        &:hover{
                            background: var(--wp--preset--color--secondary);
                        }

                        & svg{
                            stroke: var(--wp--preset--color--secondary);
                            border-radius: 50%;
                            width: 30px;
                            height: 30px;
                            display: grid;
                            transition: all 0.6s ease;
                            justify-content: center;
                            align-content: center;
                            background: var(--wp--preset--color--primary);
                        }
                    }
                }

                & .text2{
                    text-align: left;
                    color: var(--wp--preset--color--text-secondary);
                }
            }
        }
    }

    & footer{
        display: grid;
        grid-template-columns: 1fr auto;
        align-items: center;
        border-top: 1px solid var(--wp--preset--color--quinary);
        padding-top: 24px;

        & a{
            font-size: var(--wp--preset--font-size--large);
            color: var(--wp--preset--color--text);

            &:hover{
                color: var(--wp--preset--color--secondary);
            }
        }
    }
}