/* ============================================
   WA Blast Icons Redesign
   ============================================ */

/* WA UNOFFICIAL (Gateway/Blast Biasa) */
.bc-wa-unofficial {
    position: relative;
    background: linear-gradient(135deg, #128C7E 0%, #075E54 100%) !important;
    border: 2px solid #075E54 !important;
    transition: all 0.3s ease;
}

.bc-wa-unofficial:hover {
    background: linear-gradient(135deg, #0d6e62 0%, #054a43 100%) !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(7, 94, 84, 0.3);
}

.bc-wa-unofficial i {
    color: #fff !important;
}

/* Badge untuk unofficial - orange dot indicator */
.bc-wa-unofficial::after {
    content: '';
    position: absolute;
    top: 2px;
    right: 2px;
    width: 6px;
    height: 6px;
    background: #FFA500;
    border-radius: 50%;
    border: 1px solid #fff;
    box-shadow: 0 0 4px rgba(255, 165, 0, 0.5);
}

/* WA OFFICIAL */
.bc-wa-official {
    position: relative;
    background: linear-gradient(135deg, #25D366 0%, #20BA5A 100%) !important;
    border: 2px solid #20BA5A !important;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(37, 211, 102, 0.2);
}

.bc-wa-official:hover {
    background: linear-gradient(135deg, #20BA5A 0%, #1DA851 100%) !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(37, 211, 102, 0.4);
}

.bc-wa-official i {
    color: #fff !important;
}

/* Badge Verified untuk Official */
.bc-wa-badge-official {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 16px;
    height: 16px;
    background: #007bff;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: bold;
    line-height: 16px;
    text-align: center;
    border: 2px solid #fff;
    box-shadow: 0 2px 6px rgba(0, 123, 255, 0.4);
    z-index: 10;
    animation: pulse-badge 2s ease-in-out infinite;
}

@keyframes pulse-badge {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 2px 6px rgba(0, 123, 255, 0.4);
    }
    50% {
        transform: scale(1.1);
        box-shadow: 0 2px 10px rgba(0, 123, 255, 0.6);
    }
}

/* Tooltip Enhancement */
.bc-wa-unofficial[data-bc-tooltip]::before {
    background: #075E54 !important;
}

.bc-wa-official[data-bc-tooltip]::before {
    background: #25D366 !important;
}

/* Additional visual distinction for menu icons */
.bc-menu-mobile .bc-wa-unofficial,
.bc-top-bar .bc-wa-unofficial {
    border-left: 3px solid #FFA500 !important;
}

.bc-menu-mobile .bc-wa-official,
.bc-top-bar .bc-wa-official {
    border-left: 3px solid #007bff !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .bc-wa-badge-official {
        width: 14px;
        height: 14px;
        font-size: 9px;
        line-height: 14px;
        top: -1px;
        right: -1px;
    }
}

/* ============================================
   EMAIL BLAST Icon Redesign
   ============================================ */

/* EMAIL BLAST */
.bc-email-blast {
    position: relative;
    background: linear-gradient(135deg, #EA4335 0%, #D33B2C 100%) !important;
    border: 2px solid #D33B2C !important;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(234, 67, 53, 0.2);
}

.bc-email-blast:hover {
    background: linear-gradient(135deg, #D33B2C 0%, #B8332A 100%) !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(234, 67, 53, 0.4);
}

.bc-email-blast i {
    color: #fff !important;
}

/* Badge @ untuk Email */
.bc-email-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 16px;
    height: 16px;
    background: #fff;
    color: #EA4335;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: bold;
    line-height: 16px;
    text-align: center;
    border: 2px solid #EA4335;
    box-shadow: 0 2px 6px rgba(234, 67, 53, 0.4);
    z-index: 10;
    animation: rotate-badge 3s linear infinite;
}

@keyframes rotate-badge {
    0%, 100% {
        transform: rotate(0deg) scale(1);
    }
    50% {
        transform: rotate(15deg) scale(1.05);
    }
}

/* Tooltip Enhancement untuk Email */
.bc-email-blast[data-bc-tooltip]::before {
    background: #EA4335 !important;
}

/* Additional visual distinction for Email */
.bc-menu-mobile .bc-email-blast,
.bc-top-bar .bc-email-blast {
    border-left: 3px solid #fff !important;
}


/* ============================================
   TELEGRAM BLAST Icon Redesign
   ============================================ */

/* TELEGRAM BLAST */
.bc-telegram-blast {
    position: relative;
    background: linear-gradient(135deg, #0088cc 0%, #006699 100%) !important;
    border: 2px solid #006699 !important;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 136, 204, 0.2);
}

.bc-telegram-blast:hover {
    background: linear-gradient(135deg, #006699 0%, #005580 100%) !important;
    transform: translateY(-2px) rotate(2deg);
    box-shadow: 0 4px 16px rgba(0, 136, 204, 0.4);
}

.bc-telegram-blast i {
    color: #fff !important;
}

/* Badge ✈ (Paper Plane) untuk Telegram */
.bc-telegram-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 16px;
    height: 16px;
    background: #fff;
    color: #0088cc;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: bold;
    line-height: 16px;
    text-align: center;
    border: 2px solid #0088cc;
    box-shadow: 0 2px 6px rgba(0, 136, 204, 0.4);
    z-index: 10;
    animation: fly-badge 2s ease-in-out infinite;
}

@keyframes fly-badge {
    0%, 100% {
        transform: translate(0, 0) rotate(0deg);
    }
    50% {
        transform: translate(2px, -2px) rotate(-10deg);
    }
}

/* Tooltip Enhancement untuk Telegram */
.bc-telegram-blast[data-bc-tooltip]::before {
    background: #0088cc !important;
}

/* Additional visual distinction for Telegram */
.bc-menu-mobile .bc-telegram-blast,
.bc-top-bar .bc-telegram-blast {
    border-left: 3px solid #54a9eb !important;
}

/* Responsive adjustments for Email & Telegram */
@media (max-width: 768px) {
    .bc-email-badge,
    .bc-telegram-badge {
        width: 14px;
        height: 14px;
        font-size: 9px;
        line-height: 14px;
        top: -1px;
        right: -1px;
    }
}