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

#profile{
    width:100%;
    padding:14px;
    padding-bottom:100px;
    box-sizing:border-box;
}

@media(min-width:1024px){

    #profile{
        max-width:70%;
        margin:0 auto;
    }

}

.profileCard{
    background:#fff;
    border-radius:14px;
    padding:14px;
    margin-bottom:10px;
    box-shadow:0 2px 8px rgba(0,0,0,.06);
}

.profileCard h2,
.profileCard h3{
    margin-bottom:10px;
    font-size:16px;
    color:#009500;
}

/*==============================
INPUTS
==============================*/

.inputGroup{
    margin-bottom:10px;
}

.inputGroup label{
    display:block;
    margin-bottom:4px;
    font-size:13px;
    color:#666;
    font-weight:600;
}

.inputGroup input{
    width:100%;
    padding:11px 12px;
    border:1px solid #ddd;
    border-radius:10px;
    outline:none;
    font-size:14px;
    transition:.2s;
    box-sizing:border-box;
}

.inputGroup textarea{
    width:100%;
    min-height:80px;
    padding:11px 12px;
    border:1px solid #ddd;
    border-radius:10px;
    outline:none;
    font-size:14px;
    resize:vertical;
    transition:.2s;
    font-family:inherit;
    box-sizing:border-box;
}

.inputGroup textarea:focus{
    border-color:#009500;
}

.inputGroup input:focus{
    border-color:#009500;
}

.inputGroup input:disabled{
    background:#f3f3f3;
    cursor:not-allowed;
}

/*==============================
BUTTONS
==============================*/

.profileCard button{
    width:100%;
    padding:12px;
    border:none;
    border-radius:10px;
    background:#009500;
    color:#fff;
    font-size:14px;
    font-weight:600;
    cursor:pointer;
    transition:.2s;
}

.profileCard button:hover{
    opacity:.9;
}

.profileCard button:disabled{
    opacity:.45;
    cursor:not-allowed;
}

/*==============================
LOGIN / REGISTER
==============================*/

.switchText{
    margin-top:14px;
    text-align:center;
    font-size:13px;
}

.switchText a{
    color:#009500;
    text-decoration:none;
    font-weight:bold;
}

.switchText a:hover{
    text-decoration:underline;
}

.errorText{
    color:#d80000;
    font-size:13px;
    margin-top:6px;
    min-height:16px;
}

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

.profileTop{
    display:flex;
    align-items:center;
    gap:14px;
}

/*==============================
EDITABLE INPUTS
==============================*/

.editableInput{
    width:100%;
    padding:10px 0;
    border:1px solid transparent;
    border-radius:8px;
    font-size:14px;
    background:transparent;
    transition:.2s;
    cursor:pointer;
    box-sizing:border-box;
}

.editableInput[readonly]{
    background:transparent;
    border-color:transparent;
    padding-left:0;
}

.editableInput:not([readonly]){
    background:#fff;
    border:1px solid #009500;
    padding-left:10px;
    cursor:text;
}

.editableInput:focus{
    outline:none;
}

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

.profileImageContainer{
    position:relative;
    width:126px;
    height:126px;
    flex-shrink:0;
}

#profileImage{
    width:126px;
    height:126px;
    border-radius:50%;
    object-fit:cover;
    border:2px solid #009500;
    display:none;
}

#profilePlus{
    width:126px;
    height:126px;
    border-radius:50%;
    background:#f5fff5;
    border:2px dashed #009500;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:48px;
    color:#009500;
    cursor:pointer;
}

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

.profileInfo{
    flex:1;
    min-width:0;
}

.profileInfo label{
    display:block;
    font-size:11px;
    color:#888;
    margin-bottom:2px;
    text-transform:uppercase;
    letter-spacing:.3px;
}

.profileInfo .inputGroup{
    margin-bottom:5px;
}

.editableField,
.readonlyField{
    margin-bottom:3px;
}

.editable{
    display:inline-block;
    max-width:100%;
    overflow-wrap:break-word;
    cursor:pointer;
    border-bottom:1px dashed transparent;
    transition:.2s;
    font-size:14px;
}

.editable:hover{
    border-color:#009500;
    color:#009500;
}

.coordinateRow{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
}

.coordinateRow span{
    word-break:break-word;
    font-size:13px;
}

/*==============================
ICON BUTTON
==============================*/

.iconButton{
    width:32px !important;
    height:32px;
    border-radius:50% !important;
    display:flex;
    justify-content:center;
    align-items:center;
    background:#009500;
    color:#fff;
    cursor:pointer;
    padding:0 !important;
    flex-shrink:0;
    font-size:13px;
}

/*==============================
ADDRESSES
==============================*/

.addressHeader{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:10px;
    gap:8px;
}

#addressContainer{
    display:flex;
    flex-direction:column;
    gap:8px;
}

.addressCard{
    position:relative;
    border:1px solid #eee;
    border-radius:12px;
    padding:10px 34px 10px 12px;
    background:#fafafa;
}

.addressTitle{
    font-weight:bold;
    margin-bottom:3px;
    cursor:pointer;
    color:#009500;
    font-size:14px;
}

.addressText{
    color:#555;
    white-space:pre-wrap;
    cursor:pointer;
    font-size:13px;
}

.deleteAddress{
    position:absolute;
    right:10px;
    top:10px;
    color:#d80000;
    cursor:pointer;
    font-size:16px;
}

.addressText{

    width:100%;
    min-height:56px;
    line-height:1.35;
    resize:vertical;

    padding:8px 11px;

    border:1px solid #ccc;

    border-radius:10px;

    font-size:14px;

    outline:none;

    font-family:inherit;

    box-sizing:border-box;

}

.addressTitle{

    width:100%;

    padding:10px 11px;

    border:1px solid #ccc;

    border-radius:10px;

    font-size:14px;

    outline:none;

    box-sizing:border-box;

}

/*==============================
PASSWORD
==============================*/

#passwordValidation{
    display:block;
    margin-top:5px;
    font-size:12px;
    min-height:16px;
}

/*==============================
LOGOUT
==============================*/

.logoutButton{
    background:#d80000 !important;
}

/*==============================
SMALL PHONES
==============================*/

@media(max-width:340px){

.profileImageContainer{
    width:96px;
    height:96px;
}

#profileImage,
#profilePlus{
    width:96px;
    height:96px;
}

#profilePlus{
    font-size:36px;
}

.addressHeader{
    flex-wrap:wrap;
}

}

/*==============================
NOTE
==============================*/

/*
    #profile fills the screen on mobile, and on
    desktop (min-width:1024px) is capped at 70%
    width and centered - consistent with every
    other section in the app. #loginSection,
    #registerSection and #customerProfile inherit
    100% of that same column at every screen size.
*/

#loginSection,
#registerSection,
#customerProfile{

    width:100%;

}