<style>
    .whatsapp-icon {
      position: fixed;
      bottom: 20px;
      right: 20px;
      z-index: 1;
    }

    .whatsapp-icon img {
      width: 60px; /* حجم الصورة حسب الحاجة */
      height: auto;
    }
    .jZhHEW {
        flex-shrink: 0;
        opacity: 1;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        display: block;
        order: 2;
        padding: 5px;
        box-sizing: border-box;
        cursor: pointer;
        overflow: hidden;
        box-shadow: rgba(0, 0, 0, 0.2) 2px 2px 8px;
        transition: all 0.5s ease 0s;
        position: relative;
        z-index: 200;
        text-decoration: none !important;
        background-color: rgb(77, 194, 71) !important;
    }
  </style>

<footer class="store-footer">
    <div aria-label="footer" class="store-footer__top py-11 lg:pt-22 space-y-8" style="background-color: <?= $color_footer1 ?>;">
        <div class="container space-y-8 sm:space-y-0 sm:grid grid-cols-12 gap-8 lg:gap-6">
            <div class="col-span-12 sm:col-span-6 lg:col-span-3 flex flex-col flex-1 space-y-6">
                <a href="../ar/" class="footer-logo">
                    <img src="../BEqq/<?= $logo ?>" alt class="img-fluid max-h-[70px]">
                </a>
                <p class="max-w-[75%] leading-6 mb-4" style="color: <?= $color_footer2 ?>;">
                    <?= $des_website; ?>
                </p>
            </div>
            <div class="col-span-6 sm:col-span-3 lg:col-span-3">
                <h3 class="footer-title" style="color: <?= $color_footer2 ?>;">روابط مهمة</h3>
                <div class="footer-list store-links-items">
                    <a href="../ar/PrivacyPolicyTermsConditions.php" style="color: <?= $color_footer2 ?>;">سياسة الخصوصية والشروط والاحكام</a>
                    <a href="../ar/PaymentMethodsInstallments.php" style="color: <?= $color_footer2 ?>;">طرق الدفع والأقساط</a>
                    <a href="../ar/Shipping&Delivery.php" style="color: <?= $color_footer2 ?>;">الشحن والتوصيل</a>
                    <a href="../ar/WarrantyMechanism.php" style="color: <?= $color_footer2 ?>;">ألية الضمان</a>
                    <a href="../ar/TermsAndConditionsForExchangeAndReturn.php" style="color: <?= $color_footer2 ?>;">شروط و سياسة الاستبدال والاسترجاع</a>
                    <a href="../ar/ContactUs.php" style="color: <?= $color_footer2 ?>;">تواصل معنا</a>
                </div>
            </div>
            <div class="col-span-12 sm:col-span-6 lg:col-span-3">
                <h3 class="footer-title" style="color: <?= $color_footer2 ?>;">تواصل معنا</h3>
                <a href="https://api.whatsapp.com/send/?phone=<?php echo $Whatsapp; ?>" style="color: <?= $color_footer2 ?>;" class="mb-2.5 last:mb-0 flex items-center text-sm leading-none hover:opacity-70 transition duration-300">
                    <i class="contact-icon sicon-whatsapp2" style="border: 1px solid <?= $color_footer2 ?>25;"></i>
                    <span class="text-unicode unicode"><?php echo $Whatsapp; ?></span>
                </a>
                <a href="tel:<?php echo $Whatsapp; ?>" style="color: <?= $color_footer2 ?>;" class="mb-2.5 last:mb-0 flex items-center text-sm leading-none hover:opacity-70 transition duration-300">
                    <i class="contact-icon sicon-iphone" style="border: 1px solid <?= $color_footer2 ?>25;"></i>
                    <span class="text-unicode unicode"><?php echo $Whatsapp; ?></span>
                </a>
                <a href="tel:<?php echo $Whatsapp; ?>" style="color: <?= $color_footer2 ?>;" class="mb-2.5 last:mb-0 flex items-center text-sm leading-none hover:opacity-70 transition duration-300">
                    <i class="contact-icon sicon-phone" style="border: 1px solid <?= $color_footer2 ?>25;"></i>
                    <span class="text-unicode unicode"><?php echo $Whatsapp; ?></span>
                </a>
                <a href="mailto:<?= $email ?>" style="color: <?= $color_footer2 ?>;" class="mb-2.5 last:mb-0 flex items-center text-sm leading-none hover:opacity-70 transition duration-300">
                    <i class="contact-icon sicon-mail" style="border: 1px solid <?= $color_footer2 ?>25;"></i>
                    <span class="text-unicode unicode"><span class="__cf_email__" data-cfemail="adeefeedc8c1c8ced9dfc2c2c383decc"><?= $email ?></span></span>
                </a>
            </div>
            <div class="col-span-12 sm:col-span-6 lg:col-span-3">
                <h3 class="footer-title" style="color: <?= $color_footer2 ?>;">تابعنا على</h3>
                <ul class="flex -mx-1">
                    <li class="mx-1">
                        <a href="<?php echo $instagram; ?>" style="color: <?= $color_footer2 ?>;border: 1px solid <?= $color_footer2 ?>25;" rel="noopener" target="_blank" title="انستقرام" aria-label="انستقرام" class="social-link">
                            <i class="sicon-instagram"></i>
                        </a>
                    </li>
                    <li class="mx-1">
                        <a href="<?php echo $telegram; ?>" style="color: <?= $color_footer2 ?>;border: 1px solid <?= $color_footer2 ?>25;" rel="noopener" target="_blank" title="تلجرام" aria-label="تلجرام" class="social-link">
                            <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="20" height="20" viewBox="0,0,256,256">
                            <g fill="<?= $color_footer2 ?>" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><g transform="scale(10.66667,10.66667)"><path d="M20.57227,3.01172c-0.33237,-0.03525 -0.69364,0.01666 -1.05664,0.16016c-0.45,0.177 -7.50122,3.14316 -14.07422,5.91016l-2.17188,0.91406c-0.841,0.341 -1.26562,0.89558 -1.26562,1.64258c0,0.523 0.22134,1.23239 1.27734,1.65039l3.66602,1.46875c0.317,0.951 1.05328,3.15909 1.23828,3.74609c0.11,0.348 0.38784,1.22469 1.08984,1.42969c0.144,0.049 0.29427,0.07422 0.44727,0.07422c0.443,0 0.76197,-0.20617 0.91797,-0.32617l2.33008,-1.9707l2.83008,2.61719c0.109,0.111 0.68594,0.67188 1.46094,0.67188c0.967,0 1.70051,-0.80498 1.85352,-1.58398c0.083,-0.427 2.8125,-14.12895 2.8125,-14.12695c0.245,-1.099 -0.19552,-1.66911 -0.47852,-1.91211c-0.2425,-0.2075 -0.54458,-0.32998 -0.87695,-0.36523zM19.91016,5.17188c-0.377,1.89 -2.43214,12.20636 -2.74414,13.69336l-4.13672,-3.82617l-2.80664,2.37695l0.77734,-3.04102c0,0 5.36255,-5.42814 5.68555,-5.74414c0.26,-0.253 0.31445,-0.34169 0.31445,-0.42969c0,-0.117 -0.06022,-0.20117 -0.19922,-0.20117c-0.125,0 -0.29477,0.11978 -0.38477,0.17578c-1.14335,0.71282 -6.01192,3.48646 -8.4082,4.84961l-3.47656,-1.38867l1.6875,-0.70899c4.299,-1.81 11.95541,-5.03386 13.69141,-5.75586z"></path></g></g>
                            </svg>
                        </a>
                    </li>
                    <li class="mx-1">
                        <a href="<?php echo $snapchat; ?>" style="color: <?= $color_footer2 ?>;border: 1px solid <?= $color_footer2 ?>25;" rel="noopener" target="_blank" title="سناب شات" aria-label="سناب شات" class="social-link">
                            <i class="sicon-snapchat"></i>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div class="bg-darker text-white" style="background-color: <?= $color_footer3 ?>">
        <div class="flex flex-col-reverse lg:flex-row items-center justify-between py-3 container text-center">
            <div class="text-sm">
                <p class="text-gray-400 mb-2.5 md:mb-0" style="color: <?= $color_footer4 ?>">الحقوق محفوظة | 2016
                    <a href="../ar" class="hover:text-primary" target="_blank" rel="noreferrer" class="underline"><?= $webname ?></a>
                </p>
            </div>
            <div class="flex flex-col-reverse lg:flex-row">
                <div class="flex items-center justify-center rtl:lg:ml-2 ltr:lg:mr-2 mb-5 lg:mb-0">
                    <p class="text-sm" style="color: <?= $color_footer4 ?>">الرقم الضريبي : <?php echo $aldariba_num; ?></p>
                </div>
                <ul class="flex flex-wrap justify-center items-stretch space-x-2 rtl:space-x-reverse mb-5 lg:mb-0" style="<?= $box_footer == 1 ? '' : 'display: none'; ?>">
                    <li class="w-14 bg-white rounded p-1 my-1 flex-center" style="background-color: <?= $color_footer4 ?>">
                        <img class="object-contain max-h-[24px]" src="https://cdn.salla.network/images/payment/mada_mini.png?v=2.0.3" alt="mada">
                    </li>
                    <li class="w-14 bg-white rounded p-1 my-1 flex-center" style="background-color: <?= $color_footer4 ?>">
                        <img class="object-contain max-h-[24px]" src="https://cdn.salla.network/images/payment/credit_card_mini.png?v=2.0.3" alt="credit_card">
                    </li>
                    <li class="w-14 bg-white rounded p-1 my-1 flex-center" style="background-color: <?= $color_footer4 ?>">
                        <img class="object-contain max-h-[24px]" src="https://cdn.salla.network/images/payment/apple_pay_mini.png?v=2.0.3" alt="apple_pay">
                    </li>
                    <li class="w-14 bg-white rounded p-1 my-1 flex-center" style="background-color: <?= $color_footer4 ?>">
                        <img class="object-contain max-h-[24px]" src="https://cdn.salla.network/images/payment/tabby_installment_mini.png?v=2.0.3" alt="tabby_installment">
                    </li>
                    <li class="w-14 bg-white rounded p-1 my-1" style="background-color: <?= $color_footer4 ?>">
                        <a href="../pdf_file/<?= $aldariba; ?>" download class="flex-center h-full" rel="noreferrer">
                            <img class="object-contain" src="../images/vat.webp" alt="maroof" style="height: 24px;">
                        </a>
                    </li>
                    <li class="w-14 bg-white rounded p-1 my-1" style="background-color: <?= $color_footer4 ?>">
                        <a href="../pdf_file/<?= $commerce; ?>" download class="flex-center h-full" rel="noreferrer">
                            <img class="object-contain" src="../images/qr-code.webp" alt="maroof" style="height: 24px;">
                        </a>
                    </li>
                    <li class="w-14 bg-white rounded p-1 my-1" style="background-color: <?= $color_footer4 ?>">
                        <a href="<?php echo $maeruf; ?>" class="flex-center h-full" target="_blank" rel="noreferrer">
                            <img class="object-contain" src="https://cdn.salla.network/images/sbc.png?v=2.0.3" alt="business" style="width: 30px;">
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</footer>
<div class="whatsapp-icon">
    <a size="50" href="https://wa.me/<?php echo $Whatsapp; ?>" target="_blank" color="#4dc247" id="" class="q8c6tt-0 jZhHEW">
        <svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="width: 100%; height: 100%; fill: rgb(255, 255, 255); stroke: none;">
            <path d="M19.11 17.205c-.372 0-1.088 1.39-1.518 1.39a.63.63 0 0 1-.315-.1c-.802-.402-1.504-.817-2.163-1.447-.545-.516-1.146-1.29-1.46-1.963a.426.426 0 0 1-.073-.215c0-.33.99-.945.99-1.49 0-.143-.73-2.09-.832-2.335-.143-.372-.214-.487-.6-.487-.187 0-.36-.043-.53-.043-.302 0-.53.115-.746.315-.688.645-1.032 1.318-1.06 2.264v.114c-.015.99.472 1.977 1.017 2.78 1.23 1.82 2.506 3.41 4.554 4.34.616.287 2.035.888 2.722.888.817 0 2.15-.515 2.478-1.318.13-.33.244-.73.244-1.088 0-.058 0-.144-.03-.215-.1-.172-2.434-1.39-2.678-1.39zm-2.908 7.593c-1.747 0-3.48-.53-4.942-1.49L7.793 24.41l1.132-3.337a8.955 8.955 0 0 1-1.72-5.272c0-4.955 4.04-8.995 8.997-8.995S25.2 10.845 25.2 15.8c0 4.958-4.04 8.998-8.998 8.998zm0-19.798c-5.96 0-10.8 4.842-10.8 10.8 0 1.964.53 3.898 1.546 5.574L5 27.176l5.974-1.92a10.807 10.807 0 0 0 16.03-9.455c0-5.958-4.842-10.8-10.802-10.8z"></path>
        </svg>
    </a>
</div>