/* Wrapper */
.mc-wrapper {
    position: fixed;
    right: 20px;
    bottom: 90px;
    z-index: 999999;
}

/* Items */
.mc-items {
    display: none;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 12px;
}

/* Buttons */
.mc-btn {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 20px rgba(0,0,0,0.25);
    position: relative;
    cursor: pointer;
    transition: 0.3s ease;
}

.mc-btn:hover {
    transform: translateY(-4px) scale(1.05);
}

/* Main Toggle */
.mc-toggle {
    width: 65px;
    height: 65px;
    border-radius: 50%;
    background: linear-gradient(135deg,#28a745,#1e7e34);
    box-shadow: 0 10px 28px rgba(40,167,69,.45);
    cursor: pointer;
    position: relative;
}

/* Toggle icon */
.mc-toggle::after {
    content: "";
    width: 28px;
    height: 28px;
    background: white;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M4 3h16c1.1 0 2 .9 2 2v11c0 1.1-.9 2-2 2H8l-4 4V5c0-1.1.9-2 2-2z'/%3E%3C/svg%3E") no-repeat center;
    -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M4 3h16c1.1 0 2 .9 2 2v11c0 1.1-.9 2-2 2H8l-4 4V5c0-1.1.9-2 2-2z'/%3E%3C/svg%3E") no-repeat center;
    mask-size: contain;
    -webkit-mask-size: contain;
}

/* Phone */
.phone { background:#00c853; }
.phone::after {
    content:"☎";
    font-size:22px;
    color:white;
}

.whatsapp::after {
    content: "";
    width: 24px;
    height: 24px;
    background: green;
    mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M20 3H4C2.9 3 2 3.9 2 5v14l4-4h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z'/%3E%3C/svg%3E") no-repeat center;
    -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M20 3H4C2.9 3 2 3.9 2 5v14l4-4h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z'/%3E%3C/svg%3E") no-repeat center;
    mask-size: contain;
    -webkit-mask-size: contain;
}

.messenger::after {
    content: "";
    width: 24px;
    height: 24px;
    background: white;
    mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M12 2C6.48 2 2 6.03 2 10.99c0 2.54 1.15 4.82 3 6.39V22l3.29-1.81c1.11.31 2.29.48 3.51.48 5.52 0 10-4.03 10-8.99S17.52 2 12 2z'/%3E%3C/svg%3E") no-repeat center;
    -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M12 2C6.48 2 2 6.03 2 10.99c0 2.54 1.15 4.82 3 6.39V22l3.29-1.81c1.11.31 2.29.48 3.51.48 5.52 0 10-4.03 10-8.99S17.52 2 12 2z'/%3E%3C/svg%3E") no-repeat center;
    mask-size: contain;
    -webkit-mask-size: contain;
}

/* Tawk */
.tawk-btn { background:#4CAF50; }
.tawk-btn::after {
    content:"💬";
    font-size:22px;
}