/* =========================================================
   تحسين كروت الإحصائيات الرئيسية
   نظام عربي RTL - خط Cairo
   ========================================================= */

.stats{
    position:relative;
    overflow:hidden;
    padding:86px 0;
    background:
        radial-gradient(circle at 12% 18%, rgba(15,143,138,.42), transparent 30%),
        radial-gradient(circle at 85% 12%, rgba(255,255,255,.12), transparent 28%),
        linear-gradient(135deg, #06172f 0%, var(--primary) 54%, #08264c 100%);
    color:#fff;
    isolation:isolate;
}

.stats::before{
    content:"";
    position:absolute;
    inset:-120px;
    background:
        linear-gradient(120deg, transparent 0 40%, rgba(255,255,255,.10) 47%, transparent 55% 100%);
    transform:translateX(40%);
    animation:stats-section-shine 8s ease-in-out infinite;
    pointer-events:none;
    z-index:-1;
}

.stats::after{
    content:"";
    position:absolute;
    inset:0;
    background-image:
        linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
    background-size:46px 46px;
    mask-image:linear-gradient(to bottom, transparent, #000 20%, #000 80%, transparent);
    pointer-events:none;
    z-index:-1;
}

.stats .grid4{
    gap:26px;
    perspective:1200px;
}

.stats article{
    position:relative;
    min-height:190px;
    display:grid;
    place-items:center;
    align-content:center;
    gap:12px;
    padding:28px 22px;
    border:1px solid rgba(255,255,255,.22);
    border-radius:28px;
    background:
        linear-gradient(145deg, rgba(255,255,255,.18), rgba(255,255,255,.055)),
        linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.02));
    box-shadow:
        0 26px 60px rgba(0,0,0,.30),
        inset 0 1px 0 rgba(255,255,255,.24),
        inset 0 -22px 34px rgba(0,0,0,.10);
    backdrop-filter:blur(12px);
    transform-style:preserve-3d;
    transform:translateY(0) rotateX(0deg) rotateY(0deg);
    transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
    overflow:hidden;
    will-change:transform;
}

.stats article::before{
    content:"";
    position:absolute;
    width:125px;
    height:125px;
    top:-42px;
    right:-36px;
    border-radius:50%;
    background:radial-gradient(circle, rgba(255,255,255,.22), transparent 68%);
    transform:translateZ(18px);
    pointer-events:none;
}

.stats article::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(120deg, transparent 0 35%, rgba(255,255,255,.20) 45%, transparent 58% 100%);
    transform:translateX(110%);
    transition:transform .55s ease;
    pointer-events:none;
}

.stats article:hover{
    border-color:rgba(255,255,255,.42);
    box-shadow:
        0 34px 84px rgba(0,0,0,.40),
        0 0 0 1px rgba(255,255,255,.16),
        inset 0 1px 0 rgba(255,255,255,.35);
}

.stats article:hover::after{
    transform:translateX(-115%);
}

.stats i{
    position:relative;
    z-index:1;
    width:56px;
    height:56px;
    display:grid;
    place-items:center;
    border-radius:20px;
    background:linear-gradient(135deg, rgba(255,255,255,.24), rgba(255,255,255,.08));
    box-shadow:inset 0 1px 0 rgba(255,255,255,.28), 0 12px 28px rgba(0,0,0,.20);
    color:#fff;
    font-style:normal;
    font-size:1.55rem;
    transform:translateZ(34px);
}

.stats strong{
    position:relative;
    z-index:1;
    color:#fff;
    font-family:Cairo,Tahoma,sans-serif;
    font-size:clamp(2.65rem, 4vw, 4.35rem);
    font-weight:900;
    line-height:1;
    letter-spacing:.5px;
    text-shadow:0 10px 24px rgba(0,0,0,.32);
    transform:translateZ(46px);
}

.stats span{
    position:relative;
    z-index:1;
    color:rgba(255,255,255,.88);
    font-size:1.04rem;
    font-weight:800;
    text-align:center;
    transform:translateZ(30px);
}

.stats .empty.dark{
    background:rgba(255,255,255,.10);
    border-color:rgba(255,255,255,.25);
    color:#fff;
}

@keyframes stats-section-shine{
    0%, 42%{transform:translateX(42%)}
    58%, 100%{transform:translateX(-42%)}
}

@media (prefers-reduced-motion: reduce){
    .stats::before{animation:none}
    .stats article,
    .stats article::after{transition:none}
}

@media(max-width:950px){
    .stats{padding:70px 0}
    .stats .grid4{grid-template-columns:repeat(2,1fr)}
}

@media(max-width:650px){
    .stats .grid4{grid-template-columns:1fr}
    .stats article{min-height:175px}
}