/* Add custom Js code below */ 
const body = document.querySelector('body');
if(body.classList.contains('index')){
const sec = document.querySelectorAll('section.s-block.s-block--banners')[0];
sec.innerHTML=`
<style>.boxsalla {width: 98%;margin: auto;display: block;}.boxsalla .boxing {display: flex;width: 100%;}.boxing a {width: 33.3%;margin: 8px;}.boxing a img {width: 100%;}section.s-block.s-block--photos-slider + section.s-block.s-block--banners + section.s-block.s-block--banners {display: none;}
.boxsalla .boxing .linkstop:before {
    content:"";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    display: block;
    border-radius: 8px;
    background-color: #000000b8;
    opacity: 0;
    z-index: 10;
}a.linkstop {
    position: relative;
    overflow: hidden;
    border-radius: 20px;
}.boxsalla .boxing .linkstop:hover:before{
    transition: all 0.4s;
    opacity: 1;} .linkstop:hover img{
    transform:scale(1.2);
    transition: all 0.3s;
}salla-slider.photos-slider .swiper-slide {
    width: 100%;
    margin: auto 11px;
    padding: 0;
}@media (max-width:710px) {
    a.linkstop {
        border-radius: 8px;
    }
    .boxing a {margin: 4px;}
}</style>
<div class="boxsalla">
<div class="boxing">
  <a class="linkstop" href="https://salla.sa/purple-cards/%D8%A7%D9%84%D8%A7%D9%84%D8%B9%D8%A7%D8%A8/c1104331095">
  <img src="https://i.ibb.co/48rfyQT/Layer-25.png">
  </a>
   <a class="linkstop" href="https://salla.sa/purple-cards/%D8%A7%D8%AA%D8%B5%D8%A7%D9%84%D8%A7%D8%AA-%D9%88%D8%A7%D9%86%D8%AA%D8%B1%D9%86%D8%AA/c1044890133">
  <img src="https://cdn.salla.sa/form-builder/5ooUzsTs3h8yMcT1wE0WA5DEket4IW0kLbzzIpw1.png">
   </a>
   <a class="linkstop" href="https://salla.sa/purple-cards/%D8%AA%D9%88%D8%B5%D9%8A%D9%84/c1124585543">
  <img src="https://i.ibb.co/yVyXp89/image.png">
   </a>
  </div>
  <div class="boxing">
   <a class="linkstop" href="https://salla.sa/purple-cards/%D8%AA%D8%B3%D9%88%D9%82/c875383891">
  <img src="https://cdn.salla.sa/form-builder/2HAqSLde7885im9LjN429h0iVqvIxCXHlsvUo5N2.png">
   </a>
   <a class="linkstop" href="https://salla.sa/purple-cards/%D8%A7%D8%B4%D8%AA%D8%B1%D8%A7%D9%83%D8%A7%D8%AA-%D8%A7%D9%84%D9%85%D8%B4%D8%A7%D9%87%D8%AF%D8%A9/c1621107627">
  <img src="https://i.ibb.co/h83MXsh/Layer-26.png">
   </a>
   <a class="linkstop" href="https://salla.sa/purple-cards/%D8%A8%D8%B7%D8%A7%D9%82%D8%A7%D8%AA-%D9%87%D8%AF%D8%A7%D9%8A%D8%A7/c1406175837">
  <img src="https://cdn.salla.sa/form-builder/MXlsWDTQJUMdPnjIP1H8M8sdkDSMGOATtgDqEmqo.png"></a></div><style>
.cont {
    display: flex;
    flex-direction: column;
}.section[data-type=banner] {
    padding: 0 !important;
    margin: 0 !important;
}.cont div img {
    width: 100%;
    border-radius: 8px;
}.cont div {
    width: 95%;
    margin: auto;
    margin-top: 15px;
    margin-bottom: 10px;
    overflow: hidden;
    border-radius: 10px;
}.cont div:hover img {
    transform: scale(1.2) rotate(1deg) translateY(10px);
    transition: all 0.8s;
}.masseg {
/* position: relative; */
    width: 90%;
    background: #fff;
    height: fit-content;
    padding: 20px 0px;
    border-radius: 20px;
    box-shadow: 0px 0px 5px #1f050536;
    z-index: 9999999999;
    max-width: 530px;
    height:70% !important;
    overflow-y: scroll !important;
}.links {
    padding: 8px;
}
.flexcont {
    display: flex;
    width: 100%;
    justify-content: center;
}
.flexcont a img {width: 100%;border-radius: 0px;}.flexcont a {
    margin: 1%;
}
.masseg > div > a:last-child {
    border-bottom: 1px solid #eee;
}
.bg {
    position: fixed;
    background: #14161e9e;
    width: 100%;
    top: 0;
    height: 100vh;
    backdrop-filter: blur(5px);
    left: 0;
    z-index: 99999999;
    transform: scale(0);
    transition: all 0.5s ease-in;
    display: flex;
    justify-content: center;
    align-items: center;
}
.bg .masseg img {
    width: 200px;
    margin: auto;
    display: flex;
    margin-bottom: 10px;
}.masseg h3 {
    text-align: center;
}.masseg span.close img {
    width: 20px;
    margin: 10px;
}

.masseg .close {
    width: 30px;
    height: 30px;
    background: #f5a665;
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    display: flex;
    position: absolute;
    top: 5px;
    right: 10px;
}
/* الصور */
.tousbox section img {
    width: 100%;

}.tousbox section {
    margin-top: -5px;
}
</style>

<div class="bg">
   <div class="masseg">
    <span class="close" onclick="closee();"><img src="https://www5.0zz0.com/2022/11/24/12/337868815.png" alt=""></span>
    <h3>
        اختر من بين التصنيفات
    </h3>
    <div class="links">
        
    </div>
</div> 
</div></div>
`;
}
/* comment start from her 
const bannerEntryLinks = document.querySelectorAll('.banner-entry a');
const popupSquareImgs = document.createElement('div');
popupSquareImgs.classList.add('popup-square-images');

const xbox = {
  imgs :['https://i.ibb.co/QFT1DvZ/1000-1000-33.png', 'https://i.ibb.co/HdFh8bS/1000-1000-35.png', 'https://i.ibb.co/z81SSn0/1000-1000-34.png','https://i.ibb.co/b193DgY/1000-1000-38.png','https://i.ibb.co/rx6Ddjk/1000-1000-37.png','https://i.ibb.co/BGhR7xz/1000-1000-36.png'],
  parentLink:'https://salla.sa/purple-cards/redirect/categories/243865790',
  links:['https://salla.sa/purple-cards/إكس-بوكس-اﻷوروبي/c2020419093', 'https://salla.sa/purple-cards/شحن-إكس-بوكس-السعودي/c1528561516', 'https://salla.sa/purple-cards/إكس-بوكس-المتجر-الخليجي/c887103085','https://salla.sa/purple-cards/فيفا-23-المتجر-اﻹماراتي-اكس-بوكس/c1836356193','https://salla.sa/purple-cards/فيفا-23-المتجر-السعودي-اكس-بوكس/c330199904','https://salla.sa/purple-cards/شحن-إكس-بوكس-الأمريكى/c149402400'],
}

const createImgs = (el) => {
  const {imgs, links} = el;
  imgs.forEach((src, i)=> {
    const image = `<a href=${links[i]}><img src=${src} /></a>`;
  })
}

bannerEntryLinks.forEach((link,index)=> {
    if(link.href.slice(-7)== xbox.parentLink.slice(-7)){
      link.preventDefault();
    }
});
comment end her*/


/*******************************************/
const popup = document.createElement('div');
popup.classList.add('popup');
popup.style.transform = 'scale(0)';

const createPopup = (ul) => {
  popup.innerHTML = `
    <div class="masseg" style="top: 20%;">
    <span class="close">
      <img src="https://www5.0zz0.com/2022/11/24/12/337868815.png" alt="">
    </span>
    <h3>اختر من بين التصنيفات</h3>
    ${ul}
`;
  document.body.insertAdjacentElement('afterbegin', popup);
  popup.style.transform = 'scale(1)';
  
  const closeBtn = document.querySelector('.close');
  closeBtn.addEventListener('click', ()=> {
      popup.style.transform = 'scale(0)';
  });
}
const boxings = document.querySelectorAll('.boxing');
const sideNavlinks = document.querySelectorAll('.side-panel .main-menu li a');
boxings.forEach(boxing => {
  boxing.addEventListener('click', e => {
    e.preventDefault();
    
    const element = e.target;
    if (element.classList.contains('linkstop')) {

      sideNavlinks.forEach(sideNavLink => {
      
        if (
          element.href.slice(-7) == sideNavLink.href.slice(-7) &&
          sideNavLink.classList.contains('collapsible-title')
        ) {
          const liParent = sideNavLink.closest('li.root-level');
          const ulChild = liParent.querySelector('.sub-menu');
          createPopup(ulChild.innerHTML);
        }
      });
    }
  });
});

const categ = (img,link,index)=>{
    const categoryId = {
'img':img,'link':link,
}
/* get the category*/
const sections = document.querySelectorAll('.banner-entry')[index+2];
//remove the default url
sections.children[0].href='#';
/* her popup */
const makepopup=()=>{
  //create thepopup parent
  const theNewPop = document.createElement('div');
  theNewPop.classList.add('the-new-popup');
  theNewPop.innerHTML=img.map((src)=>{
    return `<a href=${link[img.indexOf(src)]}><img src=${src}/></a>`
  })+'<button class="closepopup">X</button>';
  document.body.appendChild(theNewPop);
  //remove popup
  document.querySelector('button.closepopup').onclick=()=>{
    theNewPop.remove();
  }
}
sections.onclick=()=>{makepopup()};
return categoryId ;
};
//const varName = categ([imgs],[lnks],ترتيب الصوره ف العرض)
//لاحظ لازم يكون ترتيب اللينكات متوافق مع ترتيب الصور
//xbox 
const xbox = categ(['https://i.ibb.co/wwNcxvb/1000-1000-33.png','https://i.ibb.co/VMB54fN/1000-1000-34.png','https://i.ibb.co/CwY6Lgn/1000-1000-35.png','https://i.ibb.co/jMV2PGq/1000-1000-36.png','https://i.ibb.co/PzwXStd/1000-1000-37.png','https://i.ibb.co/nwNS10J/1000-1000-38.png'],['https://salla.sa/purple-cards/%D8%A5%D9%83%D8%B3-%D8%A8%D9%88%D9%83%D8%B3-%D8%A7%EF%BB%B7%D9%88%D8%B1%D9%88%D8%A8%D9%8A/c2020419093','https://salla.sa/purple-cards/%D8%A5%D9%83%D8%B3-%D8%A8%D9%88%D9%83%D8%B3-%D8%A7%D9%84%D9%85%D8%AA%D8%AC%D8%B1-%D8%A7%D9%84%D8%AE%D9%84%D9%8A%D8%AC%D9%8A/c887103085','https://salla.sa/purple-cards/%D8%B4%D8%AD%D9%86-%D8%A5%D9%83%D8%B3-%D8%A8%D9%88%D9%83%D8%B3-%D8%A7%D9%84%D8%B3%D8%B9%D9%88%D8%AF%D9%8A/c1528561516','https://salla.sa/purple-cards/%D8%B4%D8%AD%D9%86-%D8%A5%D9%83%D8%B3-%D8%A8%D9%88%D9%83%D8%B3-%D8%A7%D9%84%D8%A3%D9%85%D8%B1%D9%8A%D9%83%D9%89/c149402400','https://salla.sa/purple-cards/%D9%81%D9%8A%D9%81%D8%A7-23-%D8%A7%D9%84%D9%85%D8%AA%D8%AC%D8%B1-%D8%A7%D9%84%D8%B3%D8%B9%D9%88%D8%AF%D9%8A-%D8%A7%D9%83%D8%B3-%D8%A8%D9%88%D9%83%D8%B3/c330199904','https://salla.sa/purple-cards/%D9%81%D9%8A%D9%81%D8%A7-23-%D8%A7%D9%84%D9%85%D8%AA%D8%AC%D8%B1-%D8%A7%EF%BB%B9%D9%85%D8%A7%D8%B1%D8%A7%D8%AA%D9%8A-%D8%A7%D9%83%D8%B3-%D8%A8%D9%88%D9%83%D8%B3/c1836356193'],15);
//itonz 
const itonz =  categ(['https://i.ibb.co/xXc1v1s/1000-1000-27.png','https://i.ibb.co/d24zYhv/1000-1000-28.png','https://i.ibb.co/1fTrNwj/1000-1000-29.png'],['https://salla.sa/purple-cards/%D8%A7%D9%8A%D8%AA%D9%88%D9%86%D8%B2-%D8%A7%D9%84%D9%85%D8%AA%D8%AC%D8%B1-%D8%A7%D9%84%D8%B3%D8%B9%D9%88%D8%AF%D9%8A/c1884094029','https://salla.sa/purple-cards/%D8%A3%D9%8A%D8%AA%D9%88%D9%86%D8%B2-%D8%A7%D9%84%D9%85%D8%AA%D8%AC%D8%B1-%D8%A7%D9%84%D8%A3%D9%85%D8%B1%D9%8A%D9%83%D9%89/c2008975421','https://salla.sa/purple-cards/%D8%A7%D9%8A%D8%AA%D9%88%D9%86%D8%B2-%D8%A7%D9%84%D9%85%D8%AA%D8%AC%D8%B1-%D8%A7%EF%BB%B9%D9%85%D8%A7%D8%B1%D8%A7%D8%AA%D9%8A/c536230991'],9);
//rayzar
const rayzar=  categ(['https://i.ibb.co/svHHCLk/1000-1000-8.png','https://i.ibb.co/tsqQ15x/1000-1000-9.png'],['https://salla.sa/purple-cards/%D8%B1%D9%8A%D8%B2%D8%B1-%D8%AC%D9%88%D9%84%D8%AF-%D8%A7%D9%85%D8%B1%D9%8A%D9%83%D9%8A/c1679875778','https://salla.sa/purple-cards/%D8%B1%D9%8A%D8%B2%D8%B1-%D8%AC%D9%88%D9%84%D8%AF-%D8%B9%D8%A7%D9%84%D9%85%D9%8A/c313722068'],5);
//lodo 
const lodo =  categ(['https://i.ibb.co/0jyTMsK/1000-1000-32.png','https://i.ibb.co/Nj8qKKR/1000-1000-31.png','https://i.ibb.co/3Sp4PFD/1000-1000-30.png'],['https://salla.sa/purple-cards/%D9%82%D9%86%D8%A7%D8%A9-%D8%A7%D9%84%D8%AD%D8%B3%D8%A7%D8%A8%D8%A7%D8%AA/c2017309313','https://salla.sa/purple-cards/%D8%B0%D9%87%D8%A8/c777032576','https://salla.sa/purple-cards/%D9%85%D8%AC%D9%88%D9%87%D8%B1%D8%A7%D8%AA/c1552577671'],1);
//googleplay 
const googleplay =  categ(['https://i.ibb.co/4YR8sp4/1000-1000-22.png','https://i.ibb.co/StfJZNx/1000-1000-23.png','https://i.ibb.co/T2gZ7hR/1000-1000-24.png','https://i.ibb.co/J5NPFzr/1000-1000-25.png','https://i.ibb.co/W6Q77Zz/1000-1000-26.png'],['https://salla.sa/purple-cards/%D8%AC%D9%88%D8%AC%D9%84-%D8%A8%D9%84%D8%A7%D9%8A-%D8%A7%D9%84%D9%85%D8%AA%D8%AC%D8%B1-%D8%A7%D9%84%D8%B3%D8%B9%D9%88%D8%AF%D9%8A/c1701472857','https://salla.sa/purple-cards/%D8%AC%D9%88%D8%AC%D9%84-%D8%A8%D9%84%D8%A7%D9%8A-%D8%A7%D9%84%D9%85%D8%AA%D8%AC%D8%B1-%D8%A7%D9%84%D8%A3%D9%85%D8%B1%D9%8A%D9%83%D9%8A/c193809240','https://salla.sa/purple-cards/%D8%AC%D9%88%D8%AC%D9%84-%D8%A8%D9%84%D8%A7%D9%8A-%D8%A7%D9%84%D9%85%D8%AA%D8%AC%D8%B1-%D8%A7%EF%BB%B9%D9%85%D8%A7%D8%B1%D8%A7%D8%AA%D9%8A/c925927770','https://salla.sa/purple-cards/%D8%AC%D9%88%D8%AC%D9%84-%D8%A8%D9%84%D8%A7%D9%8A-%D8%A7%D9%84%D9%85%D8%AA%D8%AC%D8%B1-%D8%A7%D9%84%D8%A8%D8%B1%D9%8A%D8%B7%D8%A7%D9%86%D9%8A/c18720859','https://salla.sa/purple-cards/%D8%AC%D9%88%D8%AC%D9%84-%D8%A8%D9%84%D8%A7%D9%8A-%D8%A7%D9%84%D9%85%D8%AA%D8%AC%D8%B1-%D8%A7%D9%84%D9%81%D8%B1%D9%86%D8%B3%D9%8A/c751293861'],8);
//playstation
const playstation=  categ(['https://i.ibb.co/RNhsyL8/1000-1000-10.png','https://i.ibb.co/PwGfQGY/1000-1000-11.png','https://i.ibb.co/Z2QHnPC/1000-1000-12.png','https://i.ibb.co/MRntbGv/1000-1000-13.png','https://i.ibb.co/WyRNnm7/1000-1000-14.png','https://i.ibb.co/5rJ7ccQ/1000-1000-15.png','https://i.ibb.co/tmHdxMt/1000-1000-16.png','https://i.ibb.co/JdqgGF7/1000-1000-17.png','https://i.ibb.co/Qk5hY8J/1000-1000-18.png','https://i.ibb.co/vcR2Tdr/1000-1000-19.png','https://i.ibb.co/cCfGFms/1000-1000-20.png','https://i.ibb.co/4WSHVCd/1000-1000-21.png'],['https://salla.sa/purple-cards/%D8%A8%D9%84%D8%A7%D9%8A%D8%B3%D8%AA%D9%8A%D8%B4%D9%86-%D8%B3%D8%AA%D9%88%D8%B1-%D8%B3%D8%B9%D9%88%D8%AF%D9%8A/c948746571','https://salla.sa/purple-cards/%D8%A8%D9%84%D8%A7%D9%8A%D8%B3%D8%AA%D9%8A%D8%B4%D9%86-%D8%B3%D8%AA%D9%88%D8%B1-%D8%A8%D8%B1%D9%8A%D8%B7%D8%A7%D9%86%D9%8A/c174708820','https://salla.sa/purple-cards/%D8%A8%D9%84%D8%A7%D9%8A%D8%B3%D8%AA%D9%8A%D8%B4%D9%86-%D8%B3%D8%AA%D9%88%D8%B1-%D8%A3%D9%85%D8%B1%D9%8A%D9%83%D9%8A/c1573209168','https://salla.sa/purple-cards/%D8%A8%D9%84%D8%A7%D9%8A%D8%B3%D8%AA%D9%8A%D8%B4%D9%86-%D8%B3%D8%AA%D9%88%D8%B1-%D8%B9%D9%85%D8%A7%D9%86%D9%8A/c2038989394','https://salla.sa/purple-cards/%D8%A8%D9%84%D8%A7%D9%8A%D8%B3%D8%AA%D9%8A%D8%B4%D9%86-%D8%B3%D8%AA%D9%88%D8%B1-%D9%82%D8%B7%D8%B1%D9%8A/c1514056027','https://salla.sa/purple-cards/%D8%A8%D9%84%D8%A7%D9%8A%D8%B3%D8%AA%D9%8A%D8%B4%D9%86-%D8%B3%D8%AA%D9%88%D8%B1-%D8%A5%D9%85%D8%A7%D8%B1%D8%A7%D8%AA%D9%8A/c31512229','https://salla.sa/purple-cards/%D8%A8%D9%84%D8%A7%D9%8A%D8%B3%D8%AA%D9%8A%D8%B4%D9%86-%D8%B3%D8%AA%D9%88%D8%B1-%D8%A8%D8%AD%D8%B1%D9%8A%D9%86%D9%8A/c766121127','https://salla.sa/purple-cards/%D8%A8%D9%84%D8%A7%D9%8A%D8%B3%D8%AA%D9%8A%D8%B4%D9%86-%D8%B3%D8%AA%D9%88%D8%B1-%D9%83%D9%88%D9%8A%D8%AA%D9%8A/c2138518432','https://salla.sa/purple-cards/%D8%A8%D9%84%D8%A7%D9%8A%D8%B3%D8%AA%D9%8A%D8%B4%D9%86-%D8%B3%D8%AA%D9%88%D8%B1-%D9%84%D8%A8%D9%86%D8%A7%D9%86%D9%8A/c456749474','https://salla.sa/purple-cards/%D8%A8%D9%84%D8%A7%D9%8A%D8%B3%D8%AA%D9%8A%D8%B4%D9%86-%D8%B3%D8%AA%D9%88%D8%B1-%D9%81%D8%B1%D9%86%D8%B3%D9%8A/c281665197','https://salla.sa/purple-cards/%D8%A8%D9%84%D8%A7%D9%8A%D8%B3%D8%AA%D9%8A%D8%B4%D9%86-%D8%B3%D8%AA%D9%88%D8%B1-%D9%83%D9%86%D8%AF%D9%8A/c1156276658','https://salla.sa/purple-cards/%D8%A8%D9%84%D8%A7%D9%8A%D8%B3%D8%AA%D9%8A%D8%B4%D9%86-%D8%B3%D8%AA%D9%88%D8%B1-%D8%A3%D9%84%D9%85%D8%A7%D9%86%D9%8A/c1370859444'],16);