/**
 * Saola Floating Buttons Widget - Style v1.0.3
 *
 * CSS custom properties từ PHP render():
 *   --sfm-plate-bg : màu nền đĩa xám ngoài (default #e8e8e8)
 *   --sfm-bg       : màu nền icon tròn bên trong
 *   --sfm-ring     : màu vòng sonar
 *   --sfm-size     : kích thước tổng (đĩa ngoài, px)
 *   --sfm-ic       : kích thước ảnh bên trong icon (%)
 */

/* ── Container wrapper (không chiếm layout Elementor) ── */
.sfm-floating-buttons {
    position: static;
    pointer-events: none;
}

/* ================================================================
   ITEM GỐC = GRAY PLATE (đĩa xám ngoài)
================================================================ */
.sfm-floating-buttons .sfm-fb-item {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    border-radius: 50%;
    z-index: 10000;
    cursor: pointer;
    pointer-events: auto;

    /* Đĩa xám với bóng đổ neumorphic */
    background: var(--sfm-plate-bg, #e8e8e8);
    box-shadow:
        inset 0 2px 5px rgba(255, 255, 255, 0.85),   /* viền sáng trên */
        inset 0 -2px 5px rgba(0, 0, 0, 0.12),        /* bóng đổ dưới */
        0 5px 15px rgba(0, 0, 0, 0.15);              /* bóng ngoài */
}

a.sfm-fb-item { text-decoration: none; }

/* ================================================================
   ICON CIRCLE = Vòng màu bên trong (72% kích thước plate)
================================================================ */
.sfm-floating-buttons .sfm-fb-item > i,
.sfm-floating-buttons .sfm-fb-custom > a > i {
    /* Tự động = 72% của plate */
    width: 72%;
    height: 72%;
    flex-shrink: 0;

    border-radius: 50%;
    background: var(--sfm-bg, #117552);
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;

    /* Bóng đổ tạo chiều sâu cho icon */
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.22),
        0 1px 4px rgba(0, 0, 0, 0.15);

    transition: box-shadow 0.25s ease, transform 0.2s ease;
}

/* Hover: icon nổi lên */
.sfm-floating-buttons .sfm-fb-item:hover > i,
.sfm-floating-buttons .sfm-fb-custom:hover > a > i {
    box-shadow:
        0 8px 20px rgba(0, 0, 0, 0.28),
        0 2px 6px rgba(0, 0, 0, 0.18);
    transform: translateY(-2px) scale(1.04);
}

/* Ảnh bên trong icon */
.sfm-floating-buttons .sfm-fb-item > i img,
.sfm-floating-buttons .sfm-fb-custom > a > i img {
    width: var(--sfm-ic, 65%);
    height: auto;
    display: block;
    object-fit: contain;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.2));
}

/* ── Custom button inner <a> ── */
.sfm-floating-buttons .sfm-fb-custom {
    display: flex;
    align-items: center;
    justify-content: center;
}

.sfm-floating-buttons .sfm-fb-custom > a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    text-decoration: none;
    position: relative;
}

/* ================================================================
   VÒNG SONAR / RIPPLE (mở rộng từ plate ra ngoài)
================================================================ */
.sfm-floating-buttons .sfm-circle-outer {
    position: absolute;
    border-radius: 50%;
    border: 2px solid var(--sfm-ring, #117552);
    background: transparent;
    z-index: 0;
    pointer-events: none;

    /* Bắt đầu đúng kích thước plate rồi mở rộng */
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;

    animation: sfm-sonar 2.2s ease-out infinite;
    opacity: 0;
}

/* Vòng thứ 2: delay để tạo double-ripple */
.sfm-floating-buttons .sfm-circle-outer:nth-child(2) {
    animation-delay: 0.8s;
}

.sfm-floating-buttons .sfm-circle-fill {
    position: absolute;
    border-radius: 50%;
    background: var(--sfm-ring, #117552);
    z-index: 0;
    pointer-events: none;

    width: 100%;
    height: 100%;
    top: 0;
    left: 0;

    animation: sfm-pulse-fill 2.2s ease-in-out infinite;
    animation-delay: 0.4s;
    opacity: 0;
}

/* Sonar: plate → mở rộng 1.7× + fade */
@keyframes sfm-sonar {
    0%   { transform: scale(1);   opacity: 0.55; }
    65%  { transform: scale(1.7); opacity: 0;    }
    100% { transform: scale(1.7); opacity: 0;    }
}

/* Pulse fill: phồng nhẹ ra rồi fade */
@keyframes sfm-pulse-fill {
    0%   { transform: scale(1);    opacity: 0.2; }
    55%  { transform: scale(1.4);  opacity: 0;   }
    100% { transform: scale(1.4);  opacity: 0;   }
}

/* ================================================================
   HIỆU ỨNG ICON (animation selector — class trên <i>)
================================================================ */
.sfm-floating-buttons i.sfm-fx {
    animation-duration: 1.6s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    transform-origin: center center;
}

/* Shake */
.sfm-floating-buttons i.sfm-fx.sfm-shake {
    animation-name: sfm-fx-shake;
    animation-duration: 0.9s;
}
@keyframes sfm-fx-shake {
    0%, 100% { transform: rotate(0deg); }
    15%  { transform: rotate(-14deg); }
    45%  { transform: rotate(14deg); }
    75%  { transform: rotate(-10deg); }
    90%  { transform: rotate(6deg); }
}

/* Bounce */
.sfm-floating-buttons i.sfm-fx.sfm-bounce {
    animation-name: sfm-fx-bounce;
    animation-duration: 1.2s;
}
@keyframes sfm-fx-bounce {
    0%, 100% { transform: translateY(0);    }
    35%       { transform: translateY(-14px); }
    60%       { transform: translateY(-5px);  }
    80%       { transform: translateY(-2px);  }
}

/* Swing */
.sfm-floating-buttons i.sfm-fx.sfm-swing {
    animation-name: sfm-fx-swing;
    animation-duration: 1.4s;
    transform-origin: top center;
}
@keyframes sfm-fx-swing {
    0%, 100% { transform: rotate(0deg); }
    20%  { transform: rotate(12deg); }
    40%  { transform: rotate(-9deg); }
    60%  { transform: rotate(7deg); }
    80%  { transform: rotate(-4deg); }
}

/* Heartbeat */
.sfm-floating-buttons i.sfm-fx.sfm-heartbeat {
    animation-name: sfm-fx-heartbeat;
    animation-duration: 1.0s;
}
@keyframes sfm-fx-heartbeat {
    0%, 100% { transform: scale(1); }
    16%  { transform: scale(1.2); }
    30%  { transform: scale(1); }
    46%  { transform: scale(1.16); }
    64%  { transform: scale(1); }
}

/* Rubber Band */
.sfm-floating-buttons i.sfm-fx.sfm-rubber {
    animation-name: sfm-fx-rubber;
    animation-duration: 1.2s;
}
@keyframes sfm-fx-rubber {
    0%   { transform: scaleX(1) scaleY(1); }
    28%  { transform: scaleX(1.25) scaleY(0.75); }
    42%  { transform: scaleX(0.75) scaleY(1.25); }
    58%  { transform: scaleX(1.15) scaleY(0.85); }
    78%  { transform: scaleX(0.97) scaleY(1.03); }
    92%  { transform: scaleX(1.03) scaleY(0.97); }
    100% { transform: scaleX(1) scaleY(1); }
}

/* Tada */
.sfm-floating-buttons i.sfm-fx.sfm-tada {
    animation-name: sfm-fx-tada;
    animation-duration: 1.5s;
}
@keyframes sfm-fx-tada {
    0%   { transform: scaleX(1); }
    10%, 20% { transform: scale3d(.9,.9,.9) rotate(-3deg); }
    30%, 50%, 70%, 90% { transform: scale3d(1.1,1.1,1.1) rotate(3deg); }
    40%, 60%, 80% { transform: scale3d(1.1,1.1,1.1) rotate(-3deg); }
    100% { transform: scaleX(1); }
}

/* Spin */
.sfm-floating-buttons i.sfm-fx.sfm-spin {
    animation-name: sfm-fx-spin;
    animation-duration: 2s;
    animation-timing-function: linear;
}
@keyframes sfm-fx-spin {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Jello */
.sfm-floating-buttons i.sfm-fx.sfm-jello {
    animation-name: sfm-fx-jello;
    animation-duration: 1.3s;
}
@keyframes sfm-fx-jello {
    0%, 11%, 100% { transform: none; }
    22% { transform: skewX(-12deg) skewY(-12deg); }
    33% { transform: skewX(6deg) skewY(6deg); }
    44% { transform: skewX(-3deg) skewY(-3deg); }
    55% { transform: skewX(1.5deg) skewY(1.5deg); }
    67% { transform: skewX(-0.8deg) skewY(-0.8deg); }
    78% { transform: skewX(0.4deg) skewY(0.4deg); }
    89% { transform: skewX(-0.2deg) skewY(-0.2deg); }
}

/* ── Xóa tap-highlight mobile ── */
.sfm-floating-buttons .sfm-fb-item,
.sfm-floating-buttons .sfm-fb-item * {
    -webkit-tap-highlight-color: transparent;
}