/*
==========================================================
PROFILE
==========================================================
*/

.uet-profile{

    display:flex;
    flex-direction:column;
    gap:32px;

}

/*
==========================================================
HEADER
==========================================================
*/

.uet-profile-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:40px;

    border-radius:28px;

    background:linear-gradient(
        135deg,
        rgba(0,183,255,.10),
        rgba(255,45,186,.08)
    );

    border:1px solid rgba(255,255,255,.05);

}

.uet-profile-left{

    display:flex;

    align-items:center;

    gap:28px;

}

.uet-profile-avatar{

    width:180px;
    height:180px;

    border-radius:50%;

    overflow:hidden;

    border:4px solid rgba(255,255,255,.08);

    box-shadow:
        0 0 35px rgba(0,183,255,.18);

}

.uet-profile-avatar img{

    width:100%;
    height:100%;

    object-fit:cover;

}

.uet-profile-tag{

    display:inline-block;

    margin-bottom:10px;

    color:#8E8E93;

    font-size:13px;

    text-transform:uppercase;

    letter-spacing:2px;

}

.uet-profile-name{

    margin:0;

    font-size:42px;

    font-weight:700;

}

.uet-profile-meta{

    display:flex;

    gap:16px;

    margin-top:18px;

    color:#BDBDBD;

    font-size:15px;

}

.uet-profile-right{

    display:flex;

    align-items:center;

}

/*
==========================================================
CARDS
==========================================================
*/

.uet-profile-details{

    display:flex;

    flex-direction:column;

    gap:28px;

}

.uet-profile-card{

    background:#101010;

    border:1px solid rgba(255,255,255,.05);

    border-radius:26px;

    overflow:hidden;

}

.uet-profile-card-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:24px 30px;

    border-bottom:1px solid rgba(255,255,255,.05);

}

.uet-profile-card-header h2{

    margin:0;

    font-size:24px;

    color:#FFF;

}

.uet-profile-card-header span{

    color:#8E8E93;

    font-size:14px;

}

/*
==========================================================
GRID
==========================================================
*/

.uet-profile-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:24px;

    padding:30px;

}

.uet-profile-field{

    display:flex;

    flex-direction:column;

}

.uet-profile-field-full{

    grid-column:1 / -1;

}

/*
==========================================================
FIELDS
==========================================================
*/

.uet-profile-field label{

    margin-bottom:10px;

    color:#BDBDBD;

    font-size:13px;

    font-weight:600;

    letter-spacing:.8px;

    text-transform:uppercase;

}

.uet-profile-field input,
.uet-profile-field select,
.uet-profile-field textarea{

    width:100%;

    padding:16px 18px;

    border-radius:16px;

    border:1px solid #2A2A2A;

    background:#161616;

    color:#FFF;

    font-size:15px;

    box-sizing:border-box;

    transition:.25s;

}

.uet-profile-field textarea{

    resize:vertical;

    min-height:130px;

}

.uet-profile-field input:focus,
.uet-profile-field select:focus,
.uet-profile-field textarea:focus{

    outline:none;

    border-color:var(--uet-blue);

    box-shadow:

        0 0 0 2px rgba(0,183,255,.15),

        0 0 18px rgba(0,183,255,.20);

}

/*
==========================================================
SAVE
==========================================================
*/

.uet-profile-save{

    display:flex;

    justify-content:flex-end;

}

.uet-button-primary{

    padding:16px 36px;

    border:none;

    border-radius:18px;

    cursor:pointer;

    font-size:16px;

    font-weight:700;

    color:#FFF;

    background:linear-gradient(
        90deg,
        var(--uet-blue),
        var(--uet-pink)
    );

    transition:.25s;

}

.uet-button-primary:hover{

    transform:translateY(-2px);

    box-shadow:

        0 0 25px rgba(0,183,255,.25),

        0 0 35px rgba(255,45,186,.18);

}

/*
==========================================================
RESPONSIVE
==========================================================
*/

@media(max-width:1000px){

    .uet-profile-header{

        flex-direction:column;

        align-items:flex-start;

        gap:30px;

    }

    .uet-profile-grid{

        grid-template-columns:1fr;

    }

}