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

/* Layout */
.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 (image container) */
.shabraa-bubble .bubble-inner {
    width:100%;
    height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    overflow:hidden; /* Keeps image inside the circle */
}

/* Image inside bubble (VERY IMPORTANT) */
.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:#333;
    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 */
.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; }
}

/* Hide orbit on mobile */
@media (max-width:768px) {
    .radial-child { display:none !important; }
}
@media (max-width:768px) {

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

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

    /* ضبط النص تحت الأيقونة */
    .shabraa-label {
        font-size: 11px;
    }
}
/* حاوية رئيسية ثابتة بعرض أقصى 1240px */
#shabraa-main-cats,
#shabraa-sub-cats {
    max-width: 1240px;
    margin-left: auto;
    margin-right: auto;
}

/* توزيع الأيقونات بشكل كامل على مساحة الجهاز */
@media (max-width: 1240px) {
    .shabraa-flex {
        justify-content: space-between !important; /* توزيع كامل */
        gap: 25px; /* بإمكانك تغييره */
        padding-left: 15px;
        padding-right: 15px;
    }
}

/* على الشاشات الكبيرة، رجّعها بالوسط */
@media (min-width: 1241px) {
    .shabraa-flex {
        justify-content: center !important;
        gap: 50px;
    }
}