/* ============================================
   WRAPPER IKONY - bazowy kontener
   ============================================ */
.b2b-icon-wrapper {
    position: relative;      /* ✅ To jest klucz! */
    display: inline-block;   /* Wrapper dopasuje się do rozmiaru ikony */
    line-height: 0;          /* Usuń dodatkowy spacing */
}

/* ============================================
   KROPKA POWIADOMIENIA - relative do wrappera
   ============================================ */
.b2b-notification-dot-header {
    position: absolute;
    top: -3px;              /* Trochę wystaje ponad ikonę */
    right: -3px;            /* Trochę wystaje na prawo */
    width: 10px;            /* Zwiększyłem z 8px - lepiej widoczne */
    height: 10px;
    background: linear-gradient(135deg, #ff6b6b, #ee5a6f);
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 2px 8px rgba(255, 107, 107, 0.6);
    animation: pulse-header 2s ease-in-out infinite;
    z-index: 10;
}

@keyframes pulse-header {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 2px 8px rgba(255, 107, 107, 0.6);
    }
    50% {
        transform: scale(1.2);
        box-shadow: 0 3px 12px rgba(255, 107, 107, 0.8);
    }
}

/* Responsive - na mobile może być mniejsza */
@media (max-width: 768px) {
    .b2b-notification-dot-header {
        width: 8px;
        height: 8px;
        top: -2px;
        right: -2px;
    }
}