/* =====================================================
   Custom Float Button — Public Styles
   ===================================================== */

/* CSS Variables (overridden by inline styles from PHP) */
:root {
    --cfb-size:    64px;
    --cfb-bg:      #25D366;
    --cfb-radius:  50%;
    --cfb-shadow:  0 4px 20px rgba(0,0,0,.35);
    --cfb-ox:      24px;
    --cfb-oy:      24px;
    --cfb-z:       9999;
}

/* Base Button */
#cfb-float-btn {
    position:        fixed;
    z-index:         var(--cfb-z);
    width:           var(--cfb-size);
    height:          var(--cfb-size);
    border-radius:   var(--cfb-radius);
    background:      var(--cfb-bg);
    box-shadow:      var(--cfb-shadow);
    display:         flex;
    align-items:     center;
    justify-content: center;
    text-decoration: none;
    overflow:        visible;
    cursor:          pointer;
    transition:      transform .2s ease, box-shadow .2s ease;
}

#cfb-float-btn:hover {
    transform:  scale(1.1);
    box-shadow: 0 6px 28px rgba(0,0,0,.4);
}

#cfb-float-btn:focus {
    outline:        3px solid #fff;
    outline-offset: 3px;
}

/* Image inside button */
#cfb-float-btn .cfb-img {
    width:         80%;
    height:        80%;
    object-fit:    contain;
    border-radius: inherit;
    display:       block;
}

/* Default emoji icon */
#cfb-float-btn .cfb-default-icon {
    font-size: calc( var(--cfb-size) * 0.5 );
    line-height: 1;
}

/* ── POSITIONS ─────────────────────────────────────── */
#cfb-float-btn.cfb-pos-bottom-right {
    bottom: var(--cfb-oy);
    right:  var(--cfb-ox);
}
#cfb-float-btn.cfb-pos-bottom-left {
    bottom: var(--cfb-oy);
    left:   var(--cfb-ox);
}
#cfb-float-btn.cfb-pos-top-right {
    top:   var(--cfb-oy);
    right: var(--cfb-ox);
}
#cfb-float-btn.cfb-pos-top-left {
    top:  var(--cfb-oy);
    left: var(--cfb-ox);
}

/* ── TOOLTIP ───────────────────────────────────────── */
#cfb-float-btn .cfb-tooltip {
    position:      absolute;
    right:         calc( var(--cfb-size) + 10px );
    top:           50%;
    transform:     translateY(-50%);
    background:    #333;
    color:         #fff;
    font-size:     13px;
    font-family:   -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    padding:       6px 12px;
    border-radius: 6px;
    white-space:   nowrap;
    pointer-events:none;
    opacity:       0;
    transition:    opacity .25s ease;
}

#cfb-float-btn .cfb-tooltip::after {
    content:      '';
    position:     absolute;
    left:         100%;
    top:          50%;
    transform:    translateY(-50%);
    border:       6px solid transparent;
    border-left-color: #333;
}

#cfb-float-btn.cfb-pos-bottom-left .cfb-tooltip,
#cfb-float-btn.cfb-pos-top-left .cfb-tooltip {
    right: auto;
    left:  calc( var(--cfb-size) + 10px );
}
#cfb-float-btn.cfb-pos-bottom-left .cfb-tooltip::after,
#cfb-float-btn.cfb-pos-top-left .cfb-tooltip::after {
    left:              auto;
    right:             100%;
    border-left-color: transparent;
    border-right-color:#333;
}

#cfb-float-btn:hover .cfb-tooltip {
    opacity: 1;
}

/* ── ANIMATIONS ────────────────────────────────────── */

/* PULSE */
@keyframes cfb-pulse {
    0%,100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--cfb-bg) 60%, transparent); }
    50%      { box-shadow: 0 0 0 14px color-mix(in srgb, var(--cfb-bg) 0%, transparent); }
}
#cfb-float-btn.cfb-anim-pulse {
    animation: cfb-pulse 2s ease-in-out infinite;
}

/* BOUNCE */
@keyframes cfb-bounce {
    0%,100% { transform: translateY(0); }
    50%      { transform: translateY(-10px); }
}
#cfb-float-btn.cfb-anim-bounce {
    animation: cfb-bounce 1.4s ease-in-out infinite;
}
#cfb-float-btn.cfb-anim-bounce:hover {
    animation: none;
    transform: scale(1.1);
}

/* SHAKE */
@keyframes cfb-shake {
    0%,100% { transform: rotate(0deg); }
    15%      { transform: rotate(-10deg); }
    30%      { transform: rotate(10deg); }
    45%      { transform: rotate(-8deg); }
    60%      { transform: rotate(8deg); }
    75%      { transform: rotate(-4deg); }
    90%      { transform: rotate(4deg); }
}
#cfb-float-btn.cfb-anim-shake {
    animation: cfb-shake 2.5s ease-in-out infinite;
}
#cfb-float-btn.cfb-anim-shake:hover {
    animation: none;
    transform: scale(1.1);
}

/* ROTATE */
@keyframes cfb-rotate {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
#cfb-float-btn.cfb-anim-rotate {
    animation: cfb-rotate 4s linear infinite;
}
#cfb-float-btn.cfb-anim-rotate:hover {
    animation-play-state: paused;
    transform:            scale(1.1);
}

/* NONE - no animation */
#cfb-float-btn.cfb-anim-none {
    animation: none;
}