/* MrX Support Icons – CSS */

/* Vị trí chung */
.mrx-support-icons {
    position: fixed;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    pointer-events: none;
}

.mrx-support-icons.mrx-side-right {
    right: 15px;
    bottom: 70px;
}

.mrx-support-icons.mrx-side-left {
    left: 15px;
    bottom: 16px;
}

.mrx-support-icons * {
    box-sizing: border-box;
}

.mrx-support-icons .mrx-support-icons-list,
.mrx-support-icons .mrx-toggle-main {
    pointer-events: auto;
}

/* Icon cơ bản */
.mrx-icon,
.mrx-toggle-main {
    width: 48px;
    height: 48px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
    background: #0b9ed9;
    color: #fff;
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(0,0,0,.25);
    transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease;
    position: relative;
    font-size: 22px;
}


.mrx-icon-img,
.mrx-toggle-main-img {
    width: 100%;
    height: 100%;
    padding: var(--mrx-icon-padding, 2px);
    object-fit: contain;
    border-radius: 999px;
    display: block;
}

/* Ẩn ảnh nếu chưa có src để tránh khoảng trắng */
.mrx-toggle-main-img:not([src]) {
    display: none;
}

/* Khi icon dùng ảnh custom cho từng icon, ẩn icon mặc định ::before */
.mrx-icon-img-loaded::before {
    display: none !important;
}
/* Màu từng loại icon – sau này có thể thay bằng SVG */
.mrx-icon-hotline { background: #e53935; }
.mrx-icon-zalo { background: #0068ff; }
.mrx-icon-messenger { background: #0084ff; }
.mrx-icon-email { background: #ff9800; }
.mrx-icon-map { background: #4caf50; }
.mrx-icon-whatsapp { background: #25D366; }
.mrx-icon-custom { background: #9C27B0; }

.mrx-icon:hover,
.mrx-toggle-main:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0,0,0,.3);
}

/* Hàng dọc mặc định */
.mrx-mode-vertical .mrx-support-icons-list {
    display: flex;
    flex-direction: column;
}

/* Thu gọn 1 icon */
.mrx-mode-collapsed .mrx-support-icons-list {
    display: none;
}
.mrx-mode-collapsed .mrx-toggle-main {
    display: flex;
}

/* Khi mở (click vào icon thu gọn) */
.mrx-mode-collapsed.mrx-open .mrx-support-icons-list {
    display: flex;
    flex-direction: column;
    margin-bottom: 10px;
    animation: mrx-fade-in .2s ease-out;
}

.mrx-mode-collapsed.mrx-open .mrx-toggle-main {
    transform: none;
}

.mrx-mode-collapsed.mrx-open .mrx-toggle-main::before {
    content: "\00D7"; /* X */
}

/* Icon thu gọn – hiệu ứng lan truyền */
.mrx-toggle-main {
    background: #ff5722;
    cursor: pointer;
    border: none;
    outline: none;
}

.mrx-toggle-main::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 999px;
    border: 2px solid rgba(255,87,34,0.6);
    animation: mrx-pulse 1.8s infinite;
    opacity: 0;
}

@keyframes mrx-pulse {
    0%   { transform: scale(1);   opacity: .7; }
    100% { transform: scale(1.8); opacity: 0; }
}

.mrx-toggle-main::before {
    content: "\260E";
}

.mrx-toggle-main[data-type="hotline"]::before   { content: "\260E"; }
.mrx-toggle-main[data-type="zalo"]::before      { content: "Z"; }
.mrx-toggle-main[data-type="messenger"]::before { content: "f"; }
.mrx-toggle-main[data-type="email"]::before     { content: "\2709"; }
.mrx-toggle-main[data-type="map"]::before       { content: "\1F4CD"; }

.mrx-toggle-main[data-type="whatsapp"]::before  { content: "W"; }
.mrx-toggle-main[data-type="custom"]::before    { content: "+"; }

/* Icon mặc định cho từng loại khi KHÔNG dùng ảnh custom */
.mrx-icon-hotline::before   { content: "\260E"; }
.mrx-icon-email::before     { content: "\2709"; }
.mrx-icon-zalo::before      { content: "Z"; }
.mrx-icon-messenger::before { content: "f"; }
.mrx-icon-map::before       { content: "\1F4CD"; }
.mrx-icon-whatsapp::before  { content: "W"; }
.mrx-icon-custom::before    { content: "+"; }

@keyframes mrx-fade-in {
    from { opacity: 0; transform: translateY(5px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* MOBILE */
@media (max-width: 768px) {
    .mrx-mobile-bottom-bar {
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        justify-content: flex-end;
    }

    .mrx-mobile-bottom-bar .mrx-support-icons-list {
        flex-direction: row;
        background: #ffffff;
        padding: 5px;
        box-shadow: 0 -4px 14px rgba(0,0,0,.15);
        width: 100%;
        justify-content: space-around;
    }

    .mrx-mobile-bottom-bar .mrx-icon,
    .mrx-mobile-bottom-bar .mrx-toggle-main {
        margin-bottom: 0;
        width: 44px;
        height: 44px;
    }

    .mrx-mobile-bottom-bar.mrx-mode-collapsed .mrx-toggle-main {
        display: none;
    }

    .mrx-mobile-bottom-bar.mrx-mode-collapsed .mrx-support-icons-list {
        display: flex;
    }

    .mrx-mobile-vertical {
        bottom: 80px;
    }
}