/* Floating Buttons - Julyem */

/* === Shared === */
#jl-crystal-wrap, .jl-float-wrap {
    position: fixed;
    bottom: 24px;
    z-index: 99999;
}
#jl-crystal-wrap {
    left: 24px;
    cursor: grab;
    will-change: transform;
    animation: jl-idle-bounce 3s ease-in-out infinite;
}
@keyframes jl-idle-bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-12px); }
}
#jl-crystal-wrap:active { cursor: grabbing; }
.jl-phone-wrap { right: 24px; }
.jl-address-wrap { right: 24px; bottom: 92px; }

#jl-crystal-btn, .jl-float-btn {
    width: 60px; height: 60px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(0,0,0,.2);
    transition: transform .2s, box-shadow .2s;
    position: relative;
    text-decoration: none;
}
#jl-crystal-btn:hover, .jl-float-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(0,0,0,.3);
}

/* === Gemstone Button === */
#jl-crystal-btn {
    background: linear-gradient(135deg, #f3e5f5, #e1bee7, #ce93d8);
    animation: jl-sparkle 2s ease-in-out infinite;
    overflow: visible;
}

/* SVG Gem - xoay quanh trục dọc */
.jl-gem {
    animation: jl-spin3d 4s ease-in-out infinite;
    filter: drop-shadow(0 2px 6px rgba(156,39,176,.4));
}
@keyframes jl-spin3d {
    0%   { transform: rotateY(0deg); }
    100% { transform: rotateY(360deg); }
}

/* === Star blink (shared) === */
.jl-stars {
    position: absolute;
    inset: -6px;
    pointer-events: none;
    z-index: 1;
}
.jl-star {
    position: absolute;
    width: 8px; height: 8px;
    animation: jl-blink 2.4s ease-in-out infinite;
}
.jl-star::before, .jl-star::after {
    content: '';
    position: absolute;
    background: #fff;
    border-radius: 2px;
}
.jl-star::before {
    width: 8px; height: 2px;
    top: 3px; left: 0;
}
.jl-star::after {
    width: 2px; height: 8px;
    top: 0; left: 3px;
}
@keyframes jl-blink {
    0%, 100% { opacity: 0; transform: scale(.3); }
    50% { opacity: 1; transform: scale(1); }
}

@keyframes jl-sparkle {
    0%, 100% { box-shadow: 0 4px 15px rgba(180,130,255,.3), 0 0 8px rgba(200,160,255,.2); }
    50% { box-shadow: 0 4px 20px rgba(180,130,255,.6), 0 0 20px rgba(200,160,255,.5), 0 0 40px rgba(220,180,255,.2); }
}

/* === Phone Button === */
.jl-phone-btn {
    background: linear-gradient(135deg, #E8F5E9, #A5D6A7, #66BB6A);
    animation: jl-phone-glow 2s ease-in-out infinite;
    overflow: visible;
}
@keyframes jl-phone-glow {
    0%, 100% { box-shadow: 0 4px 15px rgba(76,175,80,.3), 0 0 8px rgba(76,175,80,.2); }
    50% { box-shadow: 0 4px 20px rgba(76,175,80,.6), 0 0 20px rgba(76,175,80,.4), 0 0 40px rgba(76,175,80,.2); }
}

/* === Address Button === */
.jl-address-btn {
    background: linear-gradient(135deg, #FBE9E7, #FFAB91, #FF8A65);
    animation: jl-address-glow 2s ease-in-out infinite;
    overflow: visible;
}
@keyframes jl-address-glow {
    0%, 100% { box-shadow: 0 4px 15px rgba(255,112,67,.3), 0 0 8px rgba(255,112,67,.2); }
    50% { box-shadow: 0 4px 20px rgba(255,112,67,.6), 0 0 20px rgba(255,112,67,.4), 0 0 40px rgba(255,112,67,.2); }
}

/* === Message Popup === */
#jl-crystal-msg {
    opacity: 0;
    transform: translateY(-8px) scale(.95);
    filter: blur(4px);
    pointer-events: none;
    transition: opacity .3s cubic-bezier(.4,0,1,1),
                transform .3s cubic-bezier(.4,0,1,1),
                filter .3s cubic-bezier(.4,0,1,1);
    position: absolute;
    bottom: 90px;
    left: 0;
    background: linear-gradient(135deg, #f5e6ff, #fff);
    border: 1px solid #e0d0f0;
    border-radius: 16px;
    padding: 14px 18px;
    width: max-content;
    font-size: 15px;
    line-height: 1.5;
    color: #4a3060;
    box-shadow: 0 8px 30px rgba(150,100,200,.2);
}
#jl-crystal-msg.jl-show {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
    pointer-events: auto;
    transition: opacity .4s cubic-bezier(0,0,.2,1),
                transform .4s cubic-bezier(.175,.885,.32,1.2),
                filter .4s cubic-bezier(0,0,.2,1);
}

/* === Mobile === */
@media (max-width: 480px) {
    #jl-crystal-wrap { left: 16px; bottom: 16px; }
    .jl-phone-wrap { right: 16px; bottom: 16px; }
    .jl-address-wrap { right: 16px; bottom: 76px; }
    #jl-crystal-btn, .jl-float-btn { width: 48px; height: 48px; }
    .jl-gem { width: 30px; height: 30px; }
    #jl-crystal-msg { font-size: 13px; bottom: 60px; }
}