.notificationsPage{
max-width:1100px;
margin:30px auto;
padding:20px;
}

.notificationsHeader{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:25px;
gap:20px;
}

.notificationsHeader h1{
font-size:34px;
}

#markAllRead{
padding:14px 25px;
background:var(--primary);
color:#fff;
border:none;
border-radius:12px;
font-size:15px;
font-weight:600;
cursor:pointer;
transition:.3s;
}

#markAllRead:hover{
background:var(--primary-dark);
}



#notificationsList{
display:flex;
flex-direction:column;
gap:18px;
}

.notificationCard{
display:flex;
align-items:flex-start;
gap:18px;
padding:20px;
background:#fff;
border-radius:18px;
box-shadow:var(--shadow);
transition:.3s;
cursor:pointer;
}

.notificationCard:hover{
transform:translateY(-3px);
}



.notificationAvatar{
width:60px;
height:60px;
border-radius:50%;
object-fit:cover;
flex-shrink:0;
}

.notificationContent{
flex:1;
}

.notificationContent h3{
font-size:18px;
margin-bottom:8px;
}

.notificationContent p{
color:#666;
line-height:1.6;
margin-bottom:10px;
}

.notificationTime{
font-size:13px;
color:#999;
}



.unread{
border-left:6px solid var(--primary);
background:#f7f9ff;
}

.read{
opacity:.85;
}

.notificationType{
padding:6px 12px;
background:#eef2ff;
color:var(--primary);
border-radius:30px;
font-size:13px;
font-weight:600;
}




@media(max-width:768px){

.notificationsHeader{
flex-direction:column;
align-items:flex-start;
}

#markAllRead{
width:100%;
}

.notificationCard{
padding:15px;
}

.notificationAvatar{
width:50px;
height:50px;
}

.notificationsHeader h1{
font-size:28px;
}

}

@media(max-width:480px){

.notificationsPage{
padding:15px;
}

.notificationContent h3{
font-size:16px;
}

.notificationContent p{
font-size:14px;
}

}




.topAvatar{
width:45px;
height:45px;
border-radius:50%;
object-fit:cover;
border:2px solid var(--primary);
flex-shrink:0;
}