/**
 * Header Social Buttons - WhatsApp, Viber, Messenger
 */

/* Container */
.header-social-buttons {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-left: 15px;
    vertical-align: middle;
    margin-right: 15px;
    margin-top: -5px;
}

/* Shared button style */
.header-social-buttons .header-social-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    text-decoration: none !important;
    color: #fff !important;
    font-size: 20px;
    transition: transform 0.2s, box-shadow 0.2s;
    position: relative;
    padding: 0;
    border: none;
    line-height: 1;
}

.header-social-buttons .header-social-btn:hover {
    transform: translateY(-2px);
    color: #fff !important;
}

.header-social-buttons .header-social-btn:active {
    transform: translateY(0);
}

.header-social-buttons .header-social-btn i {
    color: #fff !important;
    font-size: 20px !important;
    line-height: 1;
    margin: 0 !important;
    padding: 0 !important;
    animation: none !important;
    transform: none !important;
    background: none !important;
}

/* WhatsApp */
.header-social-buttons .btn-whatsapp {
    background: #25D366 !important;
    box-shadow: 0 2px 8px rgba(37, 211, 102, 0.35);
}

.header-social-buttons .btn-whatsapp:hover {
    background: #1ebe5a !important;
    box-shadow: 0 4px 14px rgba(37, 211, 102, 0.45);
}

.header-social-buttons .btn-whatsapp i {
    color: #fff !important;
}

/* Viber */
.header-social-buttons .btn-viber {
    background: #7360F2 !important;
    box-shadow: 0 2px 8px rgba(115, 96, 242, 0.35);
}

.header-social-buttons .btn-viber:hover {
    background: #5e4bd4 !important;
    box-shadow: 0 4px 14px rgba(115, 96, 242, 0.45);
}

/* Messenger */
.header-social-buttons .btn-messenger {
    background: linear-gradient(135deg, #00B2FF, #006AFF) !important;
    box-shadow: 0 2px 8px rgba(0, 106, 255, 0.35);
}

.header-social-buttons .btn-messenger:hover {
    background: linear-gradient(135deg, #009de6, #0058d6) !important;
    box-shadow: 0 4px 14px rgba(0, 106, 255, 0.45);
}

/* Tablet */
@media (max-width: 992px) {
    .header-social-buttons {
        gap: 8px;
        margin-left: 10px;
    }

    .header-social-buttons .header-social-btn {
        width: 36px;
        height: 36px;
        font-size: 18px;
    }

    .header-social-buttons .header-social-btn i {
        font-size: 18px !important;
    }
}

/* Mobile */
@media (max-width: 768px) {
    .header-social-buttons {
        gap: 6px;
        margin-left: 6px;
    }

    .header-social-buttons .header-social-btn {
        width: 32px;
        height: 32px;
        font-size: 16px;
    }

    .header-social-buttons .header-social-btn i {
        font-size: 16px !important;
    }
}

@media (max-width: 480px) {
    .header-social-buttons {
        gap: 5px;
        margin-left: 4px;
    }

    .header-social-buttons .header-social-btn {
        width: 30px;
        height: 30px;
        font-size: 15px;
    }

    .header-social-buttons .header-social-btn i {
        font-size: 15px !important;
    }
}

 

.transparent-header #header:not(.cloned) .header-social-buttons .header-social-btn:hover {
    background: rgba(255, 255, 255, 0.3) !important;
}

.transparent-header #header:not(.cloned) .header-social-buttons .header-social-btn i {
    color: #fff !important;
}

/* Dark mode */
#dark-mode .header-social-buttons .btn-whatsapp {
    box-shadow: 0 2px 8px rgba(37, 211, 102, 0.2);
}
#dark-mode .header-social-buttons .btn-viber {
    box-shadow: 0 2px 8px rgba(115, 96, 242, 0.2);
}
#dark-mode .header-social-buttons .btn-messenger {
    box-shadow: 0 2px 8px rgba(0, 106, 255, 0.2);
}