/* ==========================
   Floating Action Bar
========================== */

.floating-bar{

    position: fixed;

    left: 50%;

    bottom: 35px;

    transform: translateX(-50%) translateY(100px);

    width: 88%;
    max-width: 380px;

    display: flex;

    gap: 12px;

    padding: 10px;

    background: rgba(18,18,18,.75);

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    border: 1px solid rgba(255,255,255,.08);

    border-radius: 22px;

    box-shadow: 0 12px 35px rgba(0,0,0,.35);

    z-index: 9999;

    opacity: 0;
    visibility: hidden;

    transition:
        opacity .4s ease,
        transform .4s ease,
        visibility .4s ease;

}

/* يظهر بعد النزول */

.floating-bar.show{

    opacity: 1;

    visibility: visible;

    transform: translateX(-50%) translateY(0);

}

/* ==========================
   Buttons
========================== */

.bar-btn{

    flex: 1;

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 10px;

    padding: 15px 10px;

    border-radius: 16px;

    color: #fff;

    text-decoration: none;

    font-weight: 700;

    transition: .3s;

}

.call-btn{

    background: linear-gradient(135deg,#e00000,#b00000);

}

.whatsapp-btn{

    background: linear-gradient(135deg,#25D366,#128C4A);

}

.bar-btn i{

    font-size: 20px;

}

.bar-btn:hover{

    transform: translateY(-3px);

    color: #fff;

}

.bar-btn:focus-visible{

    outline:2px solid #fff;

    outline-offset:3px;

}

/* ==========================
   Mobile
========================== */

@media (max-width:768px){

    .floating-bar{

        width: 88%;

        max-width: 380px;

        bottom: 35px;

        gap: 12px;

        padding: 10px;

    }

    .bar-btn{

        padding: 14px 8px;

        font-size: 15px;

    }

}

/* ==========================
   Hide On Desktop
========================== */

@media (min-width:992px){

    .floating-bar{

        display: none;

    }

}

@media (prefers-reduced-motion: reduce){

    .floating-bar,
    .bar-btn{

        transition:none;

    }

}