/* ===================================================
   Floating Action Buttons (Call & WhatsApp)
   =================================================== */

/* Floating WhatsApp Button */
.float-whatsapp,
.float {
    position: fixed;
    width: 54px;
    height: 54px;
    bottom: 25px;
    right: 25px;
    background-color: #25d366;
    color: #ffffff !important;
    border-radius: 50%;
    text-align: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.22), 0 0 0 7px rgba(37, 211, 102, 0.25);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.25s ease, background-color 0.2s ease;
}

.float-whatsapp:hover,
.float:hover {
    background-color: #20ba5a;
    color: #ffffff !important;
    transform: scale(1.1);
    box-shadow: 0 6px 16px rgba(37, 211, 102, 0.45);
}

.float-whatsapp svg,
.float svg {
    width: 26px;
    height: 26px;
    fill: #ffffff;
    display: block;
}

/* Floating Call Button */
.float-call,
.call-now {
    position: fixed;
    width: 54px;
    height: 54px;
    bottom: 92px;
    right: 25px;
    background: linear-gradient(135deg, #ff992c 0%, #ff6b00 100%);
    color: #ffffff !important;
    border-radius: 50%;
    text-align: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.22), 0 0 0 7px rgba(37, 211, 102, 0.25);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.25s ease;
}

.float-call:hover,
.call-now:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 16px rgba(255, 107, 0, 0.45);
    color: #ffffff !important;
}

.float-call svg,
.call-now svg {
    width: 20px;
    height: 20px;
    fill: #ffffff;
    display: block;
    animation: phone-shake 2.4s infinite ease-in-out;
}

/* Subtle Animated Call Wave */
.call-pulse-ring {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    border-radius: 50%;
    background-color: rgba(255, 153, 44, 0.55);
    z-index: -1;
    animation: call-pulse 1.8s infinite ease-out;
    pointer-events: none;
}

@keyframes call-pulse {
    0% {
        transform: scale(1);
        opacity: 0.8;
    }
    100% {
        transform: scale(1.35);
        opacity: 0;
    }
}

@keyframes phone-shake {
    0%, 100% {
        transform: rotate(0deg);
    }
    10%, 30% {
        transform: rotate(-16deg);
    }
    20%, 40% {
        transform: rotate(16deg);
    }
    50% {
        transform: rotate(0deg);
    }
}

/* Fallback Font Awesome styling if used */
.float-whatsapp i,
.float i,
.float .my-float {
    font-size: 26px;
    line-height: 1;
    color: #ffffff;
}

.float-call i,
.call-now i {
    font-size: 20px;
    line-height: 1;
    color: #ffffff;
    animation: phone-shake 2.4s infinite ease-in-out;
}

/* Backward compatibility for legacy alo-phone markup if used */
.mypage-alo-phone {
    position: fixed;
    right: 20px;
    bottom: 92px;
    width: 60px;
    height: 60px;
    cursor: pointer;
    z-index: 99999 !important;
}

.mypage-alo-ph-circle-fill {
    width: 48px;
    height: 48px;
    top: 6px;
    left: 6px;
    position: absolute;
    border-radius: 100%;
    background-color: rgba(241, 168, 5, 0.5);
    animation: call-pulse 1.8s infinite ease-out;
}

.mypage-alo-ph-img-circle {
    width: 38px;
    height: 38px;
    top: 11px;
    left: 11px;
    position: absolute;
    border-radius: 100%;
    background: #ff992c url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' fill='white'><path d='M493.4 24.6l-104-24c-11.3-2.6-22.9 3.3-27.5 13.9l-48 112c-4.2 9.8-1.4 21.3 6.9 28l60.6 49.6c-36 76.7-98.9 139.6-175.6 175.6l-49.6-60.6c-6.8-8.3-18.2-11.1-28-6.9l-112 48C3.3 366.8-2.6 378.4.8 389.7l24 104C27.6 505.7 38.3 512 50 512c255.1 0 462-206.9 462-462 0-11.7-6.3-22.4-18.6-25.4z'/></svg>") no-repeat center center;
    background-size: 55%;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
    animation: phone-shake 2.4s infinite ease-in-out;
}

/* Mobile Responsiveness */
@media (max-width: 576px) {
    .float-whatsapp,
    .float {
        width: 44px;
        height: 44px;
        bottom: 20px;
        right: 20px;
    }
    .float-whatsapp svg,
    .float svg {
        width: 22px;
        height: 22px;
    }

    .float-call,
    .call-now {
        width: 44px;
        height: 44px;
        bottom: 74px;
        right: 20px;
    }
    .float-call svg,
    .call-now svg {
        width: 18px;
        height: 18px;
    }
}