/* ==========================
   J-Tech Notification Center
========================== */

.jtn-wrapper{
    position:relative;
    display:inline-block;
}

.jtn-bell:hover{
    color:#e63946;
}

.jtn-count{
    position:absolute;
    top:-8px;
    right:-10px;
    min-width:18px;
    height:18px;
    border-radius:50%;
    background:#ff3b30;
    color:#fff;
    font-size:11px;
    font-weight:700;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:2px;
    box-shadow:0 3px 10px rgba(0,0,0,.25);
}

.jtn-popup{

    position:absolute;
    top:50px;
    right:0;

    width:350px;
    max-width:calc(100vw - 20px);

    background:#fff;
    border-radius:15px;
    overflow:hidden;

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

    display:none;

    z-index:999999;

}

/*==============================
    Header
===============================*/

.jtn-header{

    display:flex;
    justify-content:space-between;
    align-items:center;

    padding:18px 20px;

    background:#ffffff;

    border-bottom:1px solid #efefef;

}

/* Title */

.jtn-header h3{

    margin:0;

    font-size:20px;

    font-weight:700;

    color:#222;

    letter-spacing:.2px;

    flex:1;

    white-space:nowrap;

    overflow:hidden;

    text-overflow:ellipsis;

}

/* Right Buttons */

.jtn-actions{

    display:flex;

    align-items:center;

    gap:6px;

    flex-shrink:0;

}

/* Button */

.jtn-actions button{

    border:none;

    background:#f7f7f7;

    color:#444;

    font-size:11px;

    font-weight:600;

    padding:6px 10px;

    border-radius:8px;

    cursor:pointer;

    transition:.25s;

}

/* Hover */

.jtn-actions button:hover{

    background:#e30613;

    color:#fff;

    transform:translateY(-2px);

}

.jtn-body{

    max-height:450px;

    overflow-y:auto;

    overflow-x:hidden;

    padding:8px 0;

    background:#ffffff;

}

/* Scrollbar */

.jtn-body::-webkit-scrollbar{

    width:6px;

}

.jtn-body::-webkit-scrollbar-track{

    background:#f5f5f5;

}

.jtn-body::-webkit-scrollbar-thumb{

    background:#d8d8d8;

    border-radius:20px;

}

.jtn-body::-webkit-scrollbar-thumb:hover{

    background:#c0c0c0;

}

.jtn-item{

    display:flex;

    align-items:flex-start;

    gap:14px;

    padding:18px;

    border-bottom:1px solid #f2f2f2;

    transition:.25s;

    cursor:pointer;

}

.jtn-item:hover{

    background:#fff5f5;

}


.jtn-item.unread{

    background:#fff7f7;

}

.jtn-icon{

    width:44px;

    height:44px;

    border-radius:50%;

    background:#ffe9e9;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:18px;

    box-shadow:0 5px 15px rgba(227,6,19,.12);

}

.jtn-content strong{

    display:block;

    margin-bottom:6px;

    font-size:15px;

    font-weight:700;

    color:#222;

}

.jtn-content p{

    margin:0;

    color:#666;

    font-size:14px;

    line-height:1.6;

}

.jtn-content small{

    display:block;

    margin-top:10px;

    color:#999;

    font-size:12px;

}

.jtn-empty{

    padding:50px 20px;

    text-align:center;

    color:#999;

    font-size:15px;
}

@media (max-width:768px){

    .jtn-popup{

        width:330px;
        max-width:calc(100vw - 20px);

        right:10px;

    }

}

/* Bell Container */
.jtn-bell{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    cursor: pointer;
    transition: .25s ease;
}

/* Bell Icon */
.jtn-bell .dashicons{
    font-size: 26px;
    width: 26px;
    height: 26px;
    line-height: 26px;
    color:#222;
    transition:.25s;
}

/* Hover */
.jtn-bell:hover .dashicons{
    color:#e30613;
    transform:scale(1.08);
}

/*==================================
    Notification Buttons
===================================*/

.jtn-btn{

    border:none;

    border-radius:8px;

    padding:6px 10px;

    font-size:11px;

    font-weight:600;

    cursor:pointer;

    transition:.25s;

}

.jtn-read{

    background:#e30613;

    color:#fff;

}

.jtn-read:hover{

    background:#be0000;

}

.jtn-delete{

    background:#f5f5f5;

    color:#444;

}

.jtn-delete:hover{

    background:#ececec;

}

.jtn-content{
    flex:1;
    min-width:0;
}