/* ==========================================================
   Francherry Manager Portal
   Notification Center
==========================================================*/

/* Overlay */

.fb-notification-overlay{

    position:fixed;

    inset:0;

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

    opacity:0;

    visibility:hidden;

    transition:.3s;

    z-index:9998;

}

/* Panel */

.fb-notification-panel{

    position:fixed;

    top:0;

    right:-430px;

    width:420px;

    max-width:100%;

    height:100vh;

    background:#fff;

    display:flex;

    flex-direction:column;

    transition:.35s ease;

    box-shadow:-10px 0 40px rgba(0,0,0,.15);

    z-index:9999;

}

/* Open */

.fb-notification-overlay.active{

    opacity:1;

    visibility:visible;

}

.fb-notification-panel.active{

    right:0;

}

/* Header */

.fb-panel-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:24px;

    border-bottom:1px solid #ECECEC;

}

.fb-panel-title{

    font-size:20px;

    font-weight:700;

    color:#222;

}

.fb-close{

    cursor:pointer;

    font-size:22px;

    color:#888;

}

.fb-close:hover{

    color:#111;

}

/* Body */

.fb-panel-body{

    flex:1;

    overflow-y:auto;

    padding:20px;

}

/* Notification */

.fb-notification-item{

    display:flex;

    gap:14px;

    padding:18px 0;

    border-bottom:1px solid #F1F1F1;

}

.fb-notification-item:last-child{

    border-bottom:none;

}

/* Icon */

.fb-notification-icon{

    width:42px;

    height:42px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    flex-shrink:0;

    font-size:16px;

}

/* Colours */

.fb-notification-item.approved .fb-notification-icon{

    background:#EAF8EF;

    color:#2E7D32;

}

.fb-notification-item.pending .fb-notification-icon{

    background:#FFF8D8;

    color:#B8860B;

}

.fb-notification-item.cancelled .fb-notification-icon{

    background:#FDECEC;

    color:#D32F2F;

}

.fb-notification-item.rejected .fb-notification-icon{

    background:#ECECEC;

    color:#666;

}

/* Text */

.fb-notification-title{

    font-weight:700;

    font-size:15px;

    color:#222;

    margin-bottom:6px;

}

.fb-notification-message{

    font-size:14px;

    color:#666;

    line-height:1.6;

    margin-bottom:6px;

}

.fb-notification-time{

    font-size:12px;

    color:#999;

}

/* Bell */

.fb-bell{

    position:relative;

    display:inline-flex;

    cursor:pointer;

}

.fb-bell i{

    font-size:22px;

}

.fb-bell-count{

    position:absolute;

    top:-8px;

    right:-8px;

    width:20px;

    height:20px;

    border-radius:50%;

    background:#C89B3C;

    color:#fff;

    font-size:11px;

    font-weight:700;

    display:flex;

    justify-content:center;

    align-items:center;

}

/* Mobile */

@media(max-width:768px){

.fb-notification-panel{

    width:100%;

}

}

/*
|--------------------------------------------------------------------------
| Unread Notification
|--------------------------------------------------------------------------
*/

.fb-notification-item.is-unread{

    position:relative;

    background:#FFF9FC;

    border-left:3px solid #e91e63;

    padding-left:15px;

}

/*
|--------------------------------------------------------------------------
| Read Notification
|--------------------------------------------------------------------------
*/

.fb-notification-item.is-read{

    opacity:.78;

}

/*
|--------------------------------------------------------------------------
| Unread Title
|--------------------------------------------------------------------------
*/

.fb-notification-item.is-unread
.fb-notification-title{

    font-weight:700;

}

/*
|--------------------------------------------------------------------------
| Read Title
|--------------------------------------------------------------------------
*/

.fb-notification-item.is-read
.fb-notification-title{

    font-weight:600;

}

/*
|--------------------------------------------------------------------------
| Unread Indicator
|--------------------------------------------------------------------------
*/

.fb-notification-unread-dot{

    width:8px;

    height:8px;

    border-radius:50%;

    background:#e91e63;

    flex-shrink:0;

    margin-top:7px;

}

/*
|--------------------------------------------------------------------------
| Notification Hover
|--------------------------------------------------------------------------
*/

.fb-notification-item{

    cursor:pointer;

    transition:

        background .2s ease,

        opacity .2s ease;

}

.fb-notification-item:hover{

    background:#FAFAFA;

}

/*
|--------------------------------------------------------------------------
| View All Notifications
|--------------------------------------------------------------------------
*/

.fb-notification-panel-footer {

    border-top: 1px solid #eeeeee;

    padding: 14px 18px;

    background: #ffffff;

}

.fb-view-all-notifications {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    width: 100%;

    padding: 10px 14px;

    border-radius: 8px;

    color: #e91e63;

    font-size: 14px;

    font-weight: 600;

    text-decoration: none;

    transition:

        background .2s ease,

        color .2s ease;

}

.fb-view-all-notifications:hover {

    background: #fff1f6;

    color: #d81b60;

    text-decoration: none;

}

.fb-view-all-notifications i {

    font-size: 12px;

    transition: transform .2s ease;

}

.fb-view-all-notifications:hover i {

    transform: translateX(3px);

}