.network-notification {

    position: fixed;

    top: 20px;
    right: 20px;

    display: flex;
    align-items: center;
    gap: 12px;

    padding: 14px 18px;

    border-radius: 14px;

    font-family: Inter, sans-serif;
    font-size: 14px;
    font-weight: 600;

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

    opacity: 0;

    transform: translateY(-20px);

    transition: .3s ease;

    pointer-events: auto;

    z-index: 9999;

}


/* Show animation */

.network-notification.show {

    opacity: 1;

    transform: translateY(0);

}


/* Online */

.network-notification.online {

    background: #ecfdf5;

    border-left: 5px solid #22c55e;

    color: #166534;

}


/* Offline */

.network-notification.offline {

    background: #fff1f2;

    border-left: 5px solid #ef4444;

    color: #991b1b;

}



/* Icon */

#networkIcon svg {

    width: 22px;
    height: 22px;

}


.network-notification.online svg {

    color: #22c55e;

}


.network-notification.offline svg {

    color: #ef4444;

}



/* Separate WiFi Button Notification */

.wifi-box {

    top: 85px;

    background: white;

    border: 1px solid #e5e7eb;

}



/* WiFi Button */

#wifi-btn {

    padding: 10px 16px;

    border: none;

    border-radius: 10px;

    background: #ef4444;

    color: white;

    font-size: 13px;

    font-weight: 600;

    cursor: pointer;

    transition: .2s;

}


#wifi-btn:hover {

    background: #dc2626;

}