/**
 * Compact notification prompt, using the site's editorial typography.
 */
#supanot-notification-popup {
    box-sizing: border-box;
    position: fixed;
    bottom: 100px;
    right: 10px;
    z-index: 100000;
    display: block;
    width: 220px;
    max-width: calc(100% - 20px);
    padding: 12px 14px 8px;
    border: 0;
    border-radius: 12px;
    background: #fff;
    color: #172536;
    box-shadow: 0 4px 18px rgba(0, 0, 0, .15);
    font: 400 12px/1.4 'Open Sans', sans-serif;
    text-align: left;
    text-transform: none;
}

#supanot-notification-popup .popup-title {
    display: block;
    margin: 0;
    color: #172536;
    font: 700 16px/1.3 'Lora', serif;
}

#supanot-notification-popup .popup-description {
    display: block;
    margin: 6px 0 0;
    color: #272a2d;
    font: 400 14px / 1.4 'Open Sans', sans-serif;
}

#supanot-notification-popup .popup-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
}

#supanot-notification-popup .popup-actions button {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    margin: 0;
    padding: 6px 10px;
    border: 0;
    border-radius: 6px;
    box-shadow: none;
    font: 600 12px/1.4 'Open Sans', sans-serif;
    text-transform: none;
    cursor: pointer;
}

#supanot-notification-popup .popup-actions button:focus-visible {
    outline: 2px solid #065fb8;
    outline-offset: 3px;
}

#supanot-notification-popup #supanot-accept-notifications {
    flex: 1;
    background: #065fb8;
    color: #fff;
}

#supanot-notification-popup #supanot-accept-notifications:hover {
    background: #044b93;
}

#supanot-notification-popup #supanot-decline-notifications {
    background: transparent;
    color: #51606e;
}

#supanot-notification-popup #supanot-decline-notifications:hover {
    background: #ebf2ff;
    color: #172536;
}

#supanot-notification-popup ::selection {
    background: #065fb8;
    color: #fff;
}