/*=========================================
NOTIFICATIONS PAGE
PART 1
=========================================*/

.notifications-page{

    padding:100px 0;

    background:#f7f9fc;

}

.notifications-page .container{

    max-width:1450px;

    margin:auto;

}


/*=========================================
LAYOUT
=========================================*/

.notifications-wrapper{

    display:grid;

    grid-template-columns:300px 1fr;

    gap:35px;

    align-items:start;

}


/*=========================================
SIDEBAR
=========================================*/

.notifications-sidebar{

    background:#fff;
    
    border-radius:24px;
    
    overflow:hidden;
    
    box-shadow:0 18px 45px rgba(0,0,0,.08);
    
    position:sticky;
    
    top:120px;
    
    height:auto;
    
    max-height:700px;
    
    display:flex;
    
    flex-direction:column;
    
    }
    
    .notifications-sidebar-header{
    
    background:linear-gradient(135deg,#17365D,#285899);
    
    padding:28px;
    
    flex-shrink:0;
    
    }
    
    .notifications-sidebar-header h2{
    
    margin:0;
    
    font-size:30px;
    
    font-weight:800;
    
    color:#fff;
    
    }
    
    .notifications-sidebar-body{

        padding:20px;
        
        overflow-y:auto;
        
        max-height:520px;
        
        }
    
    .notifications-sidebar-body::-webkit-scrollbar{
    
    width:6px;
    
    }
    
    .notifications-sidebar-body::-webkit-scrollbar-thumb{
    
    background:#C89B3C;
    
    border-radius:20px;
    
    }

.notification-category-list{

    margin:0;

    padding:0;

    list-style:none;

}

.notification-category-list li{

    margin-bottom:12px;

}

.notification-filter{

    width:100%;

    border:none;

    background:#f5f7fb;

    color:#17365D;

    padding:15px 20px;

    border-radius:14px;

    text-align:left;

    cursor:pointer;

    font-size:15px;

    font-weight:600;

    transition:.3s;

}

.notification-filter:hover{

    background:#17365D;

    color:#fff;

}

.notification-filter.active{

    background:linear-gradient(135deg,#17365D,#285899);

    color:#fff;

}


/*=========================================
RIGHT CONTENT
=========================================*/

.notifications-content{

    display:flex;
    
    flex-direction:column;
    
    gap:18px;
    
    max-height:700px;
    
    overflow-y:auto;
    
    padding-right:8px;
    
    }

.notifications-content::-webkit-scrollbar{

    width:7px;
    
    }
    
    .notifications-content::-webkit-scrollbar-thumb{
    
    background:#C89B3C;
    
    border-radius:20px;
    
    }

/*=========================================
NOTIFICATION CARDS
PART 2
=========================================*/

.notification-card{

    display:flex;

    align-items:center;

    gap:20px;

    background:#fff;

    border-radius:20px;

    padding:18px;

    box-shadow:0 12px 35px rgba(0,0,0,.07);

    cursor:pointer;

    transition:.35s;

    border-left:5px solid transparent;

}

.notification-card:hover{

    transform:translateY(-4px);

    border-left-color:#C89B3C;

    box-shadow:0 18px 45px rgba(0,0,0,.12);

}


/*=========================================
THUMBNAIL
=========================================*/

.notification-card-image{

    width:90px;

    height:90px;

    flex-shrink:0;

    border-radius:18px;

    overflow:hidden;

    background:#eef3fa;

    display:flex;

    justify-content:center;

    align-items:center;

}

.notification-card-image img{

    width:100%;

    height:100%;

    object-fit:cover;

}


/*=========================================
CONTENT
=========================================*/

.notification-card-content{

    flex:1;

    min-width:0;

}

.notification-card-content h3{

    margin:0 0 8px;

    font-size:24px;

    font-weight:700;

    color:#17365D;

    line-height:1.35;

}

.notification-date{

    display:inline-block;

    margin-bottom:12px;

    padding:5px 12px;

    border-radius:30px;

    background:#F3F7FC;

    color:#C89B3C;

    font-size:13px;

    font-weight:700;

}

.notification-card-content p{

    margin:0;

    color:#6B7280;

    line-height:1.8;

    font-size:15px;

}


/*=========================================
EMPTY STATE
=========================================*/

.notifications-empty{

    background:#fff;

    padding:60px;

    text-align:center;

    border-radius:20px;

    color:#6B7280;

    font-size:18px;

    box-shadow:0 15px 35px rgba(0,0,0,.08);

}

/*=========================================
NOTIFICATION POPUP
PART 3
=========================================*/

.notification-popup{

    position:fixed;
    inset:0;

    display:none;

    justify-content:center;
    align-items:center;

    z-index:9999;

}

.notification-popup.active{

    display:flex;

}

/*=========================================
OVERLAY
=========================================*/

.notification-popup-overlay{

    position:absolute;
    inset:0;

    background:rgba(0,0,0,.55);

    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);

}

/*=========================================
POPUP CONTAINER
=========================================*/

.notification-popup-container{

    position:relative;

    width:92%;
    max-width:1050px;

    max-height:90vh;

    overflow-y:auto;

    background:#fff;

    border-radius:26px;

    padding:35px;

    z-index:2;

    box-shadow:0 35px 80px rgba(0,0,0,.30);

    animation:notificationPopup .35s ease;

}

@keyframes notificationPopup{

    from{

        opacity:0;

        transform:translateY(35px) scale(.95);

    }

    to{

        opacity:1;

        transform:translateY(0) scale(1);

    }

}

/*=========================================
LAYOUT
=========================================*/

.notification-popup-layout{

    display:grid;

    grid-template-columns:320px 1fr;

    gap:35px;

    align-items:start;

}

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

.notification-popup-image img{

    width:100%;

    height:420px;

    object-fit:cover;

    border-radius:20px;

    display:block;

}

/*=========================================
DETAILS
=========================================*/

.notification-popup-category{

    display:inline-block;

    padding:8px 18px;

    border-radius:30px;

    background:linear-gradient(135deg,#C89B3C,#D9AB47);

    color:#fff;

    font-size:13px;

    font-weight:700;

    margin-bottom:18px;

}

.notification-popup-details h2{

    margin:0 0 18px;

    color:#17365D;

    font-size:34px;

    font-weight:800;

}

.notification-popup-date{

    margin-bottom:22px;

    color:#6B7280;

    font-size:15px;

}

.notification-popup-description{

    background:#F8FAFC;

    padding:24px;

    border-radius:18px;

}

.notification-popup-description h4{

    margin:0 0 15px;

    color:#17365D;

    font-size:22px;

}

#popup-notification-description{

    line-height:1.9;

    color:#555;

    text-align:justify;

}

/*=========================================
POPUP BUTTONS
PART 4
=========================================*/

.notification-popup-close{

    position:absolute;

    top:20px;
    right:20px;

    width:48px;
    height:48px;

    border:none;
    outline:none;

    border-radius:50%;

    background:#17365D;

    color:#fff;

    font-size:28px;

    cursor:pointer;

    transition:.3s;

    z-index:5;

}

.notification-popup-close:hover{

    background:#C89B3C;

    transform:rotate(90deg);

}


/*=========================================
PREVIOUS / NEXT
=========================================*/

.notification-popup-prev,
.notification-popup-next{

    position:absolute;

    top:50%;

    z-index: 9999;

    transform:translateY(-50%);

    width:56px;
    height:56px;

    border:none;

    border-radius:50%;

    background:#17365D;

    color:#fff;

    font-size:24px;

    cursor:pointer;

    transition:.3s;



    box-shadow:0 10px 25px rgba(0,0,0,.18);

}

.notification-popup-prev{

    left:20px;

}

.notification-popup-next{

    right:20px;

}

.notification-popup-prev:hover,
.notification-popup-next:hover{

    background:#C89B3C;

    transform:translateY(-50%) scale(1.08);

}


/*=========================================
DISABLED BUTTON
=========================================*/

.notification-popup-prev.disabled,
.notification-popup-next.disabled,

.notification-popup-prev:disabled,
.notification-popup-next:disabled{

    opacity:.35;

    cursor:not-allowed;

    pointer-events:none;

}


/*=========================================
SCROLLBAR
=========================================*/

.notification-popup-container::-webkit-scrollbar{

    width:8px;

}

.notification-popup-container::-webkit-scrollbar-thumb{

    background:#C89B3C;

    border-radius:20px;

}


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

@media(max-width:992px){

.notification-popup-layout{

grid-template-columns:1fr;

}

.notification-popup-image img{

height:320px;

}

.notification-popup-prev{

left:15px;

}

.notification-popup-next{

right:15px;

}

}


@media(max-width:768px){

.notifications-wrapper{

grid-template-columns:1fr;

}

.notifications-sidebar{

position:relative;

top:0;

}

.notification-card{

flex-direction:column;

align-items:flex-start;

}

.notification-card-image{

width:100%;

height:220px;

}

.notification-card-image img{

width:100%;

height:100%;

object-fit:cover;

}

.notification-popup-container{

padding:22px;

width:95%;

}

.notification-popup-details h2{

font-size:28px;

}

.notification-popup-prev,
.notification-popup-next{

width:46px;

height:46px;

font-size:20px;

}

}


@media(max-width:576px){

.notifications-page{

padding:70px 0;

}

.notifications-sidebar h2{

font-size:24px;

}

.notification-card-content h3{

font-size:20px;

}

.notification-popup-image img{

height:250px;

}

.notification-popup-description{

padding:18px;

}

.notification-popup-description h4{

font-size:20px;

}

}