﻿.ly-inner-layout-sections-wrapper.ly-my-profile {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 20px;
    width: clamp(280px,100%,480px);
    padding-block: clamp(20px,2vw,40px);
}

.ly-my-profile-title{
    width:100%;
    text-align:center;
    font-size:clamp(22px,1.6vw,30px);
}

.ly-my-profile-image {
    --profile-pic-size: clamp(80px,7vw,120px);
    position: relative;
    width: var(--profile-pic-size);
    height: var(--profile-pic-size);
    border-radius: 50%;
}

    .ly-my-profile-image > img {
        width: 100%;
        height:100%;
        object-fit:cover;
        border-radius: 50%;
    }

.ly-change-profile-image-btn {
    --profile-pic-edit-size:clamp(30px,3vw,40px);
    position:absolute;
    bottom: 0;
    left: 0;
    display:flex;
    justify-content:center;
    align-items:center;
    width:var(--profile-pic-edit-size);
    height:var(--profile-pic-edit-size);
    background-color: var(--ly-dark-red);
    border-radius: 50%;
    overflow: hidden;
}

    .ly-change-profile-image-btn > img{
        width:50%;
    }

    .ly-my-profile-form {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        gap: 20px;
    }

.ly-my-profile-info-wrapper {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.ly-my-profile-form input {
    -webkit-appearance: none;
    border-radius: 15px;
    width: 100%;
    height: clamp(45px,4vw,55px);
    border: 1px solid var(--ly-dark-red);
    color: var(--ly-dark-red);
    font-size: clamp(20px,1.4vw,25px);
    background-color: transparent;
    padding: 10px 15px;
}

.ly-my-profile-phone-input-group {
    display: flex;
    gap: clamp(10px,1vw,20px);
}

input.ly-my-profile-phone-code-input {
    width: clamp(90px,8vw,120px);
}

@media screen and (max-width:820px){
    .ly-my-profile .ly-personalization-logo{
        display:none;
    }
}

@media screen and (max-width:480px) {

    .ly-inner-layout-sections-wrapper.ly-my-profile {
        padding-block: 60px;
    }

    .ly-my-profile .ly-personalization-logo {
        display: none;
    }

    .ly-my-profile-form {
        flex:1;
        justify-content:space-evenly;
    }
}