/* Global Z-index Fix */
.shabraa-bubble,
.shabraa-bubble-wrapper,
.radial-child,
.sub-bubble,
.sub-bubble-wrapper{
  z-index: 999999 !important;
}

/* =========================
   Layout (Desktop default)
   ========================= */
.shabraa-flex{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:18px;
  margin:20px 0;
  position:relative;
}

/* Wrapper */
.shabraa-bubble-wrapper,
.sub-bubble-wrapper{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
}

/* Main bubble */
.shabraa-bubble{
  width:90px;
  height:90px;
  background:#fff;
  border-radius:50%;
  border:2px solid #ddd;
  display:flex;
  justify-content:center;
  align-items:center;
  box-shadow:0 5px 15px rgba(0,0,0,0.08);
  cursor:pointer;
  position:relative;
  transition:
    transform .18s cubic-bezier(.25,1.55,.47,1.19),
    border-color .18s ease;
}

/* Bubble inner */
.shabraa-bubble .bubble-inner{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  overflow:hidden;
}

/* Image inside bubble */
.shabraa-bubble .bubble-inner img{
  width:70%;
  height:70%;
  object-fit:contain;
  display:block;
}

/* When bubble is open */
.shabraa-bubble.open{
  border-color:#ff4a4a;
  transform:scale(1.12);
}

/* Close button */
.bubble-close{
  display:none;
  position:absolute;
  top:-10px;
  right:-10px;
  width:26px;
  height:26px;
  text-align:center;
  line-height:26px;
  background:#ff4a4a;
  color:#fff;
  border-radius:50%;
  font-size:16px;
}
.shabraa-bubble.open .bubble-close{ display:block; }

/* Parent labels */
.shabraa-label{
  font-size:12px;
  text-align:center;
  color:#fff !important;
  max-width:100px;
}

/* Expand parents (push away) */
#shabraa-main-cats.expanded{
  padding-bottom:220px;
  transition:padding-bottom .18s ease-out;
}
#shabraa-main-cats.expanded .shabraa-bubble-wrapper:not(.open-parent){
  transform:translateY(50px) scale(0.82);
  opacity:0.45;
  transition:
    transform .18s cubic-bezier(.18,1.8,.22,1.01),
    opacity .16s ease-out;
}

/* =========================
   Radial children orbit
   ========================= */
.radial-child{
  width:78px;
  height:78px;
  background:#fff;
  border-radius:50%;
  border:2px solid #eee;
  position:absolute !important;
  transform:translate(-50%,-50%) scale(0.2);
  opacity:0;

  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;

  box-shadow:0 5px 15px rgba(0,0,0,0.08);
  cursor:pointer;

  animation:orbitEnter .35s cubic-bezier(.25,1.55,.47,1.19) forwards;
}

/* Children images */
.radial-inner img{
  width:40px;
  height:40px;
  object-fit:contain;
}

/* Children labels */
.shabraa-label-sub{
  font-size:11px;
  margin-top:4px;
  text-align:center;
}

/* Spring Orbit Animation */
@keyframes orbitEnter{
  0%   { transform:translate(-50%,-50%) scale(.2); opacity:0; }
  65%  { transform:translate(-50%,-50%) scale(1.1); opacity:1; }
  100% { transform:translate(-50%,-50%) scale(1); opacity:1; }
}

/* Hover pop for children */
.radial-child:hover{
  transform:translate(-50%,-50%) scale(1.08) !important;
}

/* =========================
   Mobile list
   ========================= */
.sub-bubble{
  width:75px;
  height:75px;
  background:#fff;
  border-radius:50%;
  border:2px solid #eee;

  display:flex;
  justify-content:center;
  align-items:center;

  opacity:0;
  transform:scale(0.6);

  animation:slideUp .28s cubic-bezier(.25,1.55,.47,1.19) forwards;
  box-shadow:0 4px 10px rgba(0,0,0,0.06);
}

.sub-bubble img{
  width:45px;
  height:45px;
}

/* Mobile label (sub) */
.shabraa-label-sub{
  font-size:11px;
  text-align:center;
}

@keyframes slideUp{
  0%   { transform:translateY(20px) scale(.6); opacity:0; }
  80%  { transform:translateY(-3px) scale(1.05); opacity:1; }
  100% { transform:translateY(0px) scale(1); opacity:1; }
}

/* =========================
   Main containers width
   ========================= */
#shabraa-main-cats,
#shabraa-sub-cats{
  max-width:1240px;
  margin-left:auto;
  margin-right:auto;
}

/* =========================
   ✅ Tablet + Mobile: GRID RTL (4 أعمدة) + يبدأ من اليمين
   الصف الثاني (3) يضل على نفس العمود الأول، والصف الأخير يصف يمين
   ========================= */
@media (max-width:1240px){

  /* اخفاء المدار على الشاشات الأصغر */
  .radial-child{ display:none !important; }

  #shabraa-main-cats .shabraa-flex,
  #shabraa-sub-cats  .shabraa-flex{
    display:grid !important;
    grid-template-columns:repeat(4, minmax(0, 1fr)) !important;
    gap:18px !important;
    padding:0 15px !important;

    /* RTL grid start from right (hack) */
    transform:scaleX(-1);
    justify-items:center !important;
    align-items:start !important;
  }

  /* رجع العناصر لطبيعتها (حتى لا تنعكس الأيقونات/النص) */
  #shabraa-main-cats .shabraa-flex > *,
  #shabraa-sub-cats  .shabraa-flex > *{
    transform:scaleX(-1);
  }
}

/* =========================
   ✅ Mobile: 3 أعمدة + تصغير الفقاعات
   ========================= */
@media (max-width:768px){

  #shabraa-main-cats .shabraa-flex,
  #shabraa-sub-cats  .shabraa-flex{
    grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
    gap:14px !important;
  }

  /* حجم دائرة الأب على الجوال */
  .shabraa-bubble{
    width:50px;
    height:50px;
  }

  /* حجم الصورة داخل الدائرة */
  .shabraa-bubble .bubble-inner img{
    width:60%;
    height:60%;
  }

  /* ضبط النص تحت الأيقونة */
  .shabraa-label{
    font-size:11px;
    color:#fff !important;
  }
}

/* =========================
   Desktop spacing (Large)
   ========================= */
@media (min-width:1241px){
  .shabraa-flex{
    justify-content:center !important;
    gap:50px;
  }
}