/* ===================== 
   Floating Order & Socials (LTR version)
   ===================== */

.floating-order {
    position: fixed;
    width: 48px;
    height: 80px;
    left: 0; /* تغییر از right به left */
    bottom: 105px;
    text-align: center;
    z-index: 100;
    direction: ltr; /* همه‌چیز از چپ به راست */
}

.floating-socials {
    position: fixed;
    top: 0;
    width: 36px;
    height: 140px;
    right: 6px; /* تغییر از left:6px به right:6px */
    background: #FFF;
    top: 50%;
    text-align: center;
    margin-top: -132px;
}

    .floating-socials a,
    .floating-order a {
        padding: 5px;
        display: block;
    }

        .floating-socials a > i,
        .floating-order a > i {
            transition: 0.3s;
            color: #848685;
            font-size: 1.7em;
        }

.floating-order a {
    width: 250px;
    background: rgba(0,0,0,0.5);
    cursor: pointer;
    border-radius: 0 30px 30px 0; /* گردی سمت چپ */
    overflow: hidden;
    transform: translate(-180px, 0); /* باز شدن از سمت چپ */
    transition: 1s;
}

.floating-order > a:first-child {
    margin-bottom: 7px !important;
}

.floating-order a > i {
    float: right; /* آیکون سمت راست */
    background: #FFF;
    color: #16a45d;
    padding: 5px;
    border-radius: 100%;
    transition: 1s;
}

.floating-order a > span {
    display: block;
    text-align: left; /* متن سمت چپ */
    color: #FFF;
    transition: 1s;
    opacity: 0;
    line-height: 16px !important;
}

.floating-order a span:nth-child(3) {
    font-size: 12px;
    margin-top: 5px;
}

.floating-order a.of,
.floating-order a.ow {
    display: none;
}

.floating-socials a:hover i {
    color: #000;
    transform: translate(-6px,0); /* معکوس شد چون الان سمت راست */
}

.floating-order a:hover,
.floating-order a.show {
    background: rgba(0,0,0,0.8);
    transform: translate(0, 0);
}

    .floating-order a:hover i,
    .floating-order a.show i {
        color: #000;
        transform: rotate(-360deg);
    }

    .floating-order a:hover span,
    .floating-order a.show span {
        opacity: 1;
    }

.floating-logotype {
    position: fixed;
    top: 0;
    width: 36px;
    height: 130px;
    left: 4px; /* تغییر از right به left */
    background: #FFF;
    top: 50%;
    text-align: center;
    margin-top: -65px;
    z-index: 100;
}

    .floating-logotype img {
        width: 100%
    }

/* =====================
   Animation
   ===================== */
@keyframes shake-rotate {
    2% {
        transform: translate(0, 0) rotate(.5deg)
    }

    4% {
        transform: translate(0, 0) rotate(5.5deg)
    }

    6% {
        transform: translate(0, 0) rotate(.5deg)
    }

    8% {
        transform: translate(0, 0) rotate(-5.5deg)
    }

    10% {
        transform: translate(0, 0) rotate(.5deg)
    }

    12% {
        transform: translate(0, 0) rotate(2.5deg)
    }

    14% {
        transform: translate(0, 0) rotate(5.5deg)
    }

    16% {
        transform: translate(0, 0) rotate(-5.5deg)
    }

    18% {
        transform: translate(0, 0) rotate(-1.5deg)
    }

    20% {
        transform: translate(0, 0) rotate(4.5deg)
    }

    22% {
        transform: translate(0, 0) rotate(-6.5deg)
    }

    24% {
        transform: translate(0, 0) rotate(1.5deg)
    }

    26% {
        transform: translate(0, 0) rotate(1.5deg)
    }

    28% {
        transform: translate(0, 0) rotate(-4.5deg)
    }

    30% {
        transform: translate(0, 0) rotate(5.5deg)
    }

    32% {
        transform: translate(0, 0) rotate(2.5deg)
    }

    34% {
        transform: translate(0, 0) rotate(3.5deg)
    }

    36% {
        transform: translate(0, 0) rotate(-3.5deg)
    }

    38% {
        transform: translate(0, 0) rotate(-4.5deg)
    }

    40% {
        transform: translate(0, 0) rotate(2.5deg)
    }

    42% {
        transform: translate(0, 0) rotate(.5deg)
    }

    44% {
        transform: translate(0, 0) rotate(-3.5deg)
    }

    46% {
        transform: translate(0, 0) rotate(-4.5deg)
    }

    48% {
        transform: translate(0, 0) rotate(-1.5deg)
    }

    50% {
        transform: translate(0, 0) rotate(-3.5deg)
    }

    52% {
        transform: translate(0, 0) rotate(-2.5deg)
    }

    54% {
        transform: translate(0, 0) rotate(3.5deg)
    }

    56% {
        transform: translate(0, 0) rotate(.5deg)
    }

    58% {
        transform: translate(0, 0) rotate(-6.5deg)
    }

    60% {
        transform: translate(0, 0) rotate(-3.5deg)
    }

    62% {
        transform: translate(0, 0) rotate(-1.5deg)
    }

    64% {
        transform: translate(0, 0) rotate(3.5deg)
    }

    66% {
        transform: translate(0, 0) rotate(.5deg)
    }

    68% {
        transform: translate(0, 0) rotate(4.5deg)
    }

    70% {
        transform: translate(0, 0) rotate(1.5deg)
    }

    72% {
        transform: translate(0, 0) rotate(-3.5deg)
    }

    74% {
        transform: translate(0, 0) rotate(-3.5deg)
    }

    76% {
        transform: translate(0, 0) rotate(2.5deg)
    }

    78% {
        transform: translate(0, 0) rotate(-1.5deg)
    }

    80% {
        transform: translate(0, 0) rotate(-5.5deg)
    }

    82% {
        transform: translate(0, 0) rotate(7.5deg)
    }

    84% {
        transform: translate(0, 0) rotate(.5deg)
    }

    86% {
        transform: translate(0, 0) rotate(5.5deg)
    }

    88% {
        transform: translate(0, 0) rotate(4.5deg)
    }

    90% {
        transform: translate(0, 0) rotate(-2.5deg)
    }

    92% {
        transform: translate(0, 0) rotate(1.5deg)
    }

    94% {
        transform: translate(0, 0) rotate(-5.5deg)
    }

    96% {
        transform: translate(0, 0) rotate(7.5deg)
    }

    98% {
        transform: translate(0, 0) rotate(-3.5deg)
    }

    0%,100% {
        transform: translate(0, 0) rotate(0)
    }
}

.shake-rotate {
    animation-name: shake-rotate;
    animation-duration: 3s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

    .shake-rotate:hover {
        animation-name: shake-rotate;
        animation-duration: 100ms;
        animation-timing-function: ease-in-out;
        animation-iteration-count: infinite;
    }

/* =====================
   Tab Bar
   ===================== */
.tab-bar {
    display: flex;
    flex-wrap: nowrap;
    position: fixed;
    bottom: 0;
    display: none;
    align-items: center;
    width: 100%;
    background-color: #eae9e9;
    padding-top: 10px;
    z-index: 98;
    border-top: 1px solid #CCC;
    direction: ltr; /* منوها از چپ به راست */
}

    .tab-bar > a {
        width: 25%;
        text-align: center;
        line-height: 30px;
    }

        .tab-bar > a:active *,
        .tab-bar > a:hover * {
            color: #cf9c00 !important;
        }

        .tab-bar > a i {
            font-size: 26px;
            display: block;
            color: #848685;
        }

        .tab-bar > a span {
            font-size: 13px;
            display: block;
            color: #848685;
        }

/* =====================
   Media Queries
   ===================== */

@media only screen and (max-width: 767px) {
    .tab-bar {
        display: flex !important;
    }

    .floating-order {
        width: 148px;
        height: 41px;
        left: 10px; /* تغییر از right به left */
        right: unset;
        top: 17px;
        display: none !important;
        direction: ltr;
        text-align: left;
    }

        .floating-order a {
            display: inline-block !important;
        }

            .floating-order a > i {
                font-size: 1.2em;
                line-height: 1.5;
            }

            .floating-order a.of,
            .floating-order a.ow {
                display: none;
            }

    .floating-socials,
    .floating-logotype {
        display: none;
    }

    button.scroltop {
        bottom: 65px;
    }

    .btn-filter-wrap li {
        font-size: 14px;
    }
}

@media only screen and (max-width: 480px) {
    .btn-filter-wrap li {
        display: block !important;
        margin: 5px;
        border: 1px solid #315178;
        transition: .4s;
        border-radius: 3px;
    }
}