/* ==============================================================
   Makhluot Sports — Floating Action Button (site-wide)
   Premium, mobile-first, thumb-reachable, respects safe-area.
   ============================================================== */
.msfab {
    position: fixed;
    z-index: 99990;
    inset-inline-end: 18px;
    bottom: calc(20px + env(safe-area-inset-bottom, 0px));
    display: flex;
    align-items: center;
    gap: 0;
    text-decoration: none;
    font-family: 'Cairo', 'Tajawal', system-ui, sans-serif;
    transform: translateY(28px) scale(.6);
    opacity: 0;
    transition: transform .45s cubic-bezier(.34,1.56,.64,1), opacity .35s, bottom .3s;
    will-change: transform, opacity;
}
.msfab.in { transform: translateY(0) scale(1); opacity: 1; }
.msfab.hide { transform: translateY(90px) scale(.85); opacity: 0; pointer-events: none; }

/* the round ball */
.msfab-ball {
    position: relative;
    width: 60px; height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, #00d2a8 0%, #00a8ff 55%, #6c5ce7 100%);
    background-size: 200% 200%;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 10px 26px rgba(0,168,255,.5), 0 2px 6px rgba(0,0,0,.3);
    animation: msfab-grad 6s ease infinite;
}
@keyframes msfab-grad { 0%,100%{background-position:0% 50%;} 50%{background-position:100% 50%;} }

.msfab-ico { font-size: 28px; line-height: 1; filter: drop-shadow(0 1px 2px rgba(0,0,0,.3)); animation: msfab-bob 3s ease-in-out infinite; }
@keyframes msfab-bob { 0%,100%{transform:translateY(0) rotate(0);} 50%{transform:translateY(-2px) rotate(-8deg);} }

/* pulsing ring when live */
.msfab-ball.live::before {
    content: '';
    position: absolute; inset: -4px;
    border-radius: 50%;
    border: 2px solid #ff3b30;
    animation: msfab-ring 1.6s ease-out infinite;
}
@keyframes msfab-ring {
    0%   { transform: scale(.85); opacity: .9; }
    100% { transform: scale(1.45); opacity: 0; }
}

/* live count badge */
.msfab-badge {
    position: absolute;
    top: -4px; inset-inline-start: -4px;
    min-width: 22px; height: 22px; padding: 0 5px;
    border-radius: 999px;
    background: #ff3b30;
    color: #fff; font-size: 12px; font-weight: 800;
    display: flex; align-items: center; justify-content: center;
    border: 2px solid #0b0a1a;
    box-shadow: 0 2px 8px rgba(255,59,48,.6);
    animation: msfab-pop .3s ease;
}
@keyframes msfab-pop { from { transform: scale(0); } to { transform: scale(1); } }

/* label pill (collapses on small screens to keep it light) */
.msfab-tip {
    background: rgba(12,11,26,.92);
    color: #fff;
    font-size: 13px; font-weight: 700;
    padding: 8px 14px;
    border-radius: 999px;
    margin-inline-end: -14px;       /* tuck behind the ball */
    padding-inline-end: 26px;
    transform: scaleX(0);
    transform-origin: inline-end;
    opacity: 0;
    transition: transform .3s, opacity .3s;
    white-space: nowrap;
    order: -1;                       /* sits before the ball in RTL flow */
    box-shadow: 0 6px 18px rgba(0,0,0,.3);
    pointer-events: none;
}
/* show the label on hover (desktop) */
@media (hover: hover) {
    .msfab:hover .msfab-tip { transform: scaleX(1); opacity: 1; }
    .msfab:hover .msfab-ball { transform: scale(1.06); }
}

/* on touch devices, briefly reveal the label on first load then collapse */
.msfab.peek .msfab-tip { transform: scaleX(1); opacity: 1; }

@media (max-width: 600px) {
    .msfab-ball { width: 56px; height: 56px; }
    .msfab-ico { font-size: 26px; }
    .msfab { inset-inline-end: 14px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
}

/* respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    .msfab, .msfab-ico, .msfab-ball, .msfab-ball.live::before { animation: none !important; transition: opacity .2s !important; }
}