/* Mintiwo Notification System */
.mintiwo-notification-center{
    position:relative;
    display:flex;
    align-items:center;
    flex:0 0 auto;
}
.mintiwo-notification-bell{
    position:relative;
    width:42px;
    height:42px;
    display:grid;
    place-items:center;
    padding:0;
    border:1px solid #dfe6e0;
    border-radius:13px;
    background:#fff;
    color:#263238;
    cursor:pointer;
    transition:.18s ease;
}
.mintiwo-notification-bell:hover,
.mintiwo-notification-center.is-open .mintiwo-notification-bell{
    border-color:#a7dca0;
    background:#f5fbf3;
    color:#3d9639;
}
.mintiwo-notification-bell svg{
    width:21px;
    height:21px;
}
.mintiwo-notification-badge{
    position:absolute;
    top:-7px;
    right:-7px;
    min-width:20px;
    height:20px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0 5px;
    border:2px solid #fff;
    border-radius:999px;
    background:#e53935;
    color:#fff;
    font-size:10px;
    font-weight:900;
    line-height:1;
}
.mintiwo-notification-badge.is-hidden{
    display:none;
}
.mintiwo-notification-dropdown{
    position:absolute;
    top:calc(100% + 14px);
    right:0;
    z-index:9999;
    width:min(390px,calc(100vw - 28px));
    overflow:hidden;
    border:1px solid #e0e7e1;
    border-radius:20px;
    background:#fff;
    box-shadow:0 28px 75px rgba(15,23,42,.18);
}
.mintiwo-notification-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    padding:18px 18px 14px;
    border-bottom:1px solid #edf1ed;
}
.mintiwo-notification-head>div{
    min-width:0;
}
.mintiwo-notification-head strong{
    display:block;
    color:#17202a;
    font:800 17px/1.2 Manrope,Inter,Arial,sans-serif;
}
.mintiwo-notification-head span{
    display:block;
    margin-top:4px;
    color:#7b858d;
    font-size:11px;
}
.mintiwo-mark-all{
    flex:0 0 auto;
    padding:0;
    border:0;
    background:transparent;
    color:#3d9639;
    font:800 11px Inter,Arial,sans-serif;
    cursor:pointer;
}
.mintiwo-notification-list{
    max-height:420px;
    overflow:auto;
}
.mintiwo-notification-item{
    position:relative;
    display:grid!important;
    grid-template-columns:42px minmax(0,1fr) auto;
    gap:12px;
    align-items:start;
    padding:15px 16px!important;
    border-bottom:1px solid #f0f3f0;
    color:#17202a!important;
    text-decoration:none!important;
    transition:.16s ease;
}
.mintiwo-notification-item:hover{
    background:#f8fbf8;
}
.mintiwo-notification-item.is-unread{
    background:#f3faf1;
}
.mintiwo-notification-item-icon{
    width:40px;
    height:40px;
    display:grid;
    place-items:center;
    border-radius:13px;
    background:#eaf6e7;
    color:#3d9639;
    font-size:17px;
    font-weight:900;
}
.mintiwo-notification-item-copy{
    min-width:0;
}
.mintiwo-notification-item-copy strong,
.mintiwo-notification-item-copy span,
.mintiwo-notification-item-copy small{
    display:block;
}
.mintiwo-notification-item-copy strong{
    overflow:hidden;
    color:#17202a;
    font-size:13px;
    font-weight:800;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.mintiwo-notification-item-copy span{
    display:-webkit-box;
    overflow:hidden;
    margin-top:4px;
    color:#68737a;
    font-size:12px;
    line-height:1.45;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
}
.mintiwo-notification-item-copy small{
    margin-top:6px;
    color:#98a1a7;
    font-size:10px;
}
.mintiwo-notification-item-dot{
    width:8px;
    height:8px;
    margin-top:7px;
    border-radius:50%;
    background:#57b447;
    box-shadow:0 0 0 4px rgba(87,180,71,.12);
}
.mintiwo-notification-view-all{
    display:block!important;
    padding:14px 18px!important;
    background:#fff;
    color:#3d9639!important;
    font-size:12px!important;
    font-weight:900!important;
    text-align:center;
    text-decoration:none!important;
}
.mintiwo-notification-loading,
.mintiwo-notification-error{
    padding:28px 18px;
    color:#7b858d;
    font-size:12px;
    text-align:center;
}
.mintiwo-notification-empty{
    display:grid;
    place-items:center;
    gap:6px;
    padding:34px 18px;
    color:#7b858d;
    text-align:center;
}
.mintiwo-notification-empty>span{
    font-size:24px;
}
.mintiwo-notification-empty strong{
    color:#2b343a;
    font-size:13px;
}
.mintiwo-notification-empty small{
    font-size:11px;
}

/* Full notifications page */
.mintiwo-notifications-page{
    min-height:65vh;
    padding:55px 0 90px;
}
.mintiwo-notifications-page-head{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:24px;
    margin-bottom:24px;
}
.mintiwo-notifications-page-head h1{
    margin:5px 0 8px;
    color:#17202a;
    font:800 clamp(36px,5vw,54px)/1.06 Manrope,Inter,Arial,sans-serif;
}
.mintiwo-notifications-page-head p{
    margin:0;
    color:#68737a;
}
.mintiwo-notifications-page-list{
    overflow:hidden;
    border:1px solid #e1e7e2;
    border-radius:24px;
    background:#fff;
    box-shadow:0 20px 55px rgba(15,23,42,.06);
}
.mintiwo-page-notification{
    position:relative;
    display:grid;
    grid-template-columns:52px minmax(0,1fr) auto;
    gap:16px;
    align-items:center;
    padding:20px 22px;
    border-bottom:1px solid #edf1ed;
    color:#17202a;
    text-decoration:none;
    transition:.16s ease;
}
.mintiwo-page-notification:last-child{
    border-bottom:0;
}
.mintiwo-page-notification:hover{
    background:#fafcfa;
}
.mintiwo-page-notification.is-unread{
    background:#f3faf1;
}
.mintiwo-page-notification-icon{
    width:50px;
    height:50px;
    display:grid;
    place-items:center;
    border-radius:16px;
    background:#e8f5e5;
    color:#338e37;
    font-size:20px;
    font-weight:900;
}
.mintiwo-page-notification-copy{
    min-width:0;
}
.mintiwo-page-notification-copy strong,
.mintiwo-page-notification-copy span,
.mintiwo-page-notification-copy small{
    display:block;
}
.mintiwo-page-notification-copy strong{
    color:#17202a;
    font-size:15px;
    font-weight:800;
}
.mintiwo-page-notification-copy span{
    margin-top:5px;
    color:#5f6b73;
    font-size:13px;
    line-height:1.5;
}
.mintiwo-page-notification-copy small{
    margin-top:7px;
    color:#96a0a6;
    font-size:11px;
}
.mintiwo-page-unread-dot{
    width:10px;
    height:10px;
    border-radius:50%;
    background:#57b447;
    box-shadow:0 0 0 5px rgba(87,180,71,.12);
}
.mintiwo-notifications-empty{
    padding:65px 24px;
    color:#68737a;
    text-align:center;
}
.mintiwo-notifications-empty>div{
    margin-bottom:10px;
    font-size:30px;
}
.mintiwo-notifications-empty h3{
    margin:0 0 7px;
    color:#17202a;
}
.mintiwo-notifications-empty p{
    max-width:430px;
    margin:0 auto;
    line-height:1.6;
}

@media(max-width:900px){
    .mintiwo-notification-center{
        width:fit-content;
    }
    .mintiwo-notification-dropdown{
        position:fixed;
        top:92px;
        right:14px;
        left:14px;
        width:auto;
        max-height:calc(100vh - 110px);
    }
}
@media(max-width:620px){
    .mintiwo-notifications-page{
        padding:35px 0 65px;
    }
    .mintiwo-notifications-page-head{
        align-items:flex-start;
        flex-direction:column;
    }
    .mintiwo-page-notification{
        grid-template-columns:44px minmax(0,1fr) auto;
        gap:12px;
        padding:17px 15px;
    }
    .mintiwo-page-notification-icon{
        width:42px;
        height:42px;
        border-radius:13px;
    }
}
