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

.profile-photo-card{
background:#fff;
padding:30px;
border-radius:24px;
box-shadow:0 10px 30px rgba(0,0,0,.06);
display:flex;
align-items:center;
gap:25px;
margin-bottom:25px;
}

.profile-photo-preview{
flex-shrink:0;
}

.profile-photo-preview img{
width:120px;
height:120px;
border-radius:50%;
object-fit:cover;
border:4px solid #eef2ff;
}

.profile-default-avatar{
width:120px;
height:120px;
border-radius:50%;
background:#eef2ff;
display:flex;
align-items:center;
justify-content:center;
font-size:42px;
color:#6366f1;
}

.profile-photo-content h3{
font-size:24px;
font-weight:700;
margin-bottom:8px;
color:#111827;
}

.profile-photo-content p{
font-size:14px;
color:#6b7280;
margin-bottom:18px;
}

.profile-photo-actions{
display:flex;
gap:12px;
flex-wrap:wrap;
}

.profile-upload-btn{
background:linear-gradient(
135deg,
#4f46e5,
#7c3aed
);
border:none;
color:#fff;
padding:10px 18px;
border-radius:12px;
font-weight:600;
}

.profile-upload-btn:hover{
color:#fff;
}

.profile-remove-btn{
background:#fee2e2;
color:#991b1b;
padding:10px 18px;
border-radius:12px;
font-weight:600;
}

@media(max-width:768px){

.profile-photo-card{
flex-direction:column;
text-align:center;
}

.profile-photo-actions{
justify-content:center;
}

}

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

.profile-info-card{
background:#fff;
padding:30px;
border-radius:24px;
box-shadow:0 10px 30px rgba(0,0,0,.06);
margin-bottom:25px;
}

.profile-section-header{
margin-bottom:25px;
}

.profile-section-header h3{
font-size:22px;
font-weight:700;
margin-bottom:6px;
color:#111827;
}

.profile-section-header p{
font-size:14px;
color:#6b7280;
margin:0;
}

.profile-info-card .form-control{
height:48px;
border-radius:12px;
border:1px solid #d1d5db;
}

.profile-info-card .form-control:focus{
box-shadow:none;
border-color:#6366f1;
}

.profile-save-section{
margin-top:25px;
}

.profile-save-btn{
background:linear-gradient(
135deg,
#4f46e5,
#7c3aed
);
border:none;
color:#fff;
padding:12px 22px;
border-radius:12px;
font-weight:600;
}

.profile-save-btn:hover{
color:#fff;
}


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

.change-password-card{
background:#fff;
padding:30px;
border-radius:24px;
box-shadow:0 10px 30px rgba(0,0,0,.06);
margin-bottom:25px;
}

.change-password-card .form-control{
height:48px;
border-radius:12px;
border:1px solid #d1d5db;
}

.change-password-card .form-control:focus{
box-shadow:none;
border-color:#6366f1;
}


/* =====================================================
PROFILE DISPLAY CARD
===================================================== */

.profile-card-header{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:25px;
}

.profile-card-header h3{
font-size:22px;
font-weight:700;
margin-bottom:6px;
color:#111827;
}

.profile-card-header p{
margin:0;
font-size:14px;
color:#6b7280;
}

.profile-edit-btn{
background:#eef2ff;
color:#4f46e5;
border:none;
padding:10px 18px;
border-radius:12px;
font-weight:600;
}

.profile-info-list{
border-top:1px solid #f1f5f9;
}

.profile-info-item{
display:flex;
justify-content:space-between;
align-items:center;
padding:18px 0;
border-bottom:1px solid #f1f5f9;
}

.profile-info-label{
font-size:14px;
color:#6b7280;
}

.profile-info-value{
font-size:15px;
font-weight:600;
color:#111827;
}

.profile-status-badge{
padding:6px 12px;
border-radius:50px;
background:#dcfce7;
color:#166534;
font-size:12px;
font-weight:700;
}

/* =====================================================
SECURITY CARD
===================================================== */

.security-card{
background:#fff;
padding:30px;
border-radius:24px;
box-shadow:0 10px 30px rgba(0,0,0,.06);
margin-bottom:25px;
}

.security-item{
display:flex;
justify-content:space-between;
align-items:center;
gap:20px;
}

.security-item h5{
font-size:18px;
font-weight:700;
margin-bottom:6px;
color:#111827;
}

.security-item p{
margin:0;
font-size:14px;
color:#6b7280;
}

@media(max-width:768px){

.profile-card-header,
.security-item,
.profile-info-item{
flex-direction:column;
align-items:flex-start;
gap:12px;
}

}