/* الحاوي الرئيسي */
.algo-steps__flow {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    gap: 0px !important;
    padding-top: 40px !important;
    max-width: 1280px;
    margin: 0 auto;
}

/* بطاقة الخطوة */
.algo-step {
    background: linear-gradient(160deg, #fff 0%, #f8fafc 55%, #f1f5f9 100%) !important;
    border-radius: 28px !important;
    padding: 48px 28px 32px !important;
    border-top: 1.5px solid rgba(14,182,210,.22) !important;
    border-right: 1px solid rgba(15,23,42,.07) !important;
    border-bottom: 1px solid rgba(15,23,42,.07) !important;
    border-left: 1px solid rgba(15,23,42,.07) !important;
    box-shadow: 0 16px 48px rgba(15,23,42,.07), inset 0 1px 0 rgba(255,255,255,.95) !important;
    transition: all 0.3s ease !important;
    text-align: center !important;
    position: relative !important;
    flex: 1 1 0 !important;
    min-width: 200px !important;
    display: flex !important;
    flex-direction: column !important;
    margin: 0 10px !important;
}
.algo-step:hover {
    transform: translateY(-8px) !important;
    box-shadow: 0 28px 64px rgba(14,182,210,.13), 0 8px 24px rgba(15,23,42,.07) !important;
}

/* الرقم (Badge) */
.algo-step__badge {
    top: -28px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 54px !important;
    height: 54px !important;
    background: linear-gradient(140deg, #7dd8eb 0%, #29b8d4 50%, #0e9cbd 100%) !important;
    border-radius: 999px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 3 !important;
    box-shadow: 0 8px 22px rgba(14,182,210,.22) !important;
}
.algo-step__badge .elementor-heading-title {
    color: #fff !important;
    font-size: 20px !important;
    font-weight: 800 !important;
    margin: 0 !important;
    line-height: 1 !important;
}

/* الصورة */
.algo-step__image {
    width: 100% !important;
    height: 200px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 22px !important;
    background: #fff !important;
    border: 1px solid rgba(15,23,42,.07) !important;
    margin-bottom: 20px !important;
    overflow: hidden !important;
}
.algo-step__image img {
    max-width: 86% !important;
    max-height: 86% !important;
    object-fit: contain !important;
    transition: opacity 0.3s ease, transform 0.3s ease !important;
}

/* العنوان */
.algo-step__title .elementor-heading-title {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    margin: 0 0 12px 0 !important;
    line-height: 1.2 !important;
}

/* الوصف */
.algo-step__desc {
    font-size: 14px !important;
    color: #475569 !important;
    line-height: 1.65 !important;
}
.algo-step__desc p { margin: 0 !important; }

/* الـ Connector (الخط والكرة المتحركة) */
.algo-steps__connector {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 60px !important;
    position: relative;
    z-index: 1;
}
.algo-steps__connInner { position: relative; width: 100%; height: 28px; display: flex; align-items: center; }
.algo-steps__connTrack {
    position: absolute; left: 0; right: 18px; top: 50%; transform: translateY(-50%);
    height: 2px; border-radius: 999px;
    background: linear-gradient(90deg, rgba(14,182,210,0) 0%, rgba(14,182,210,.55) 50%, rgba(14,182,210,0) 100%);
    background-size: 200% 100%; animation: algoTrackShimmer 2.4s linear infinite;
}
@keyframes algoTrackShimmer { 0% {background-position: -100% 0} 100% {background-position: 200% 0} }
.algo-steps__connOrb {
    position: absolute; left: 0; top: 50%; transform: translateY(-50%) translateX(-50%);
    width: 10px; height: 10px; border-radius: 999px; background: #0eb6d2;
    box-shadow: 0 0 10px 3px rgba(14,182,210,.45);
    animation: algoOrbTravel 2.2s cubic-bezier(.4,0,.6,1) infinite;
}
@keyframes algoOrbTravel { 0% {left: 0%; opacity: 0} 10% {left: 5%; opacity: 1} 90% {left: 85%; opacity: 1} 100% {left: 90%; opacity: 0} }
.algo-steps__connHead { position: absolute; right: 0; top: 50%; transform: translateY(-50%); }
.algo-steps__connHead svg { width: 12px; height: 16px; stroke: rgba(14,182,210,.7); }

/* الجوال */
@media (max-width: 1080px) {
    .algo-steps__flow { flex-direction: column !important; gap: 30px !important; }
    .algo-steps__connector { flex: 0 0 30px !important; transform: rotate(90deg); }
}