/* ====================== */
/* الصفوف القابلة للضغط — درجات الرمادي مع عمق أكبر */
/* ====================== */
.s-orders-table-tbody-tr.s-orders-table-tbody-tr-shadow.animated {
    background-color: #f5f5f5 !important;
    color: #222222 !important;
    border-radius: 8px;
    border: 2px solid #cccccc;
    box-shadow: 0 4px 8px rgba(0,0,0,0.12);
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.25s ease, background-color 0.25s ease, border-color 0.2s ease;
    display: flex;
    align-items: center;
    padding: 10px 12px;
}

.s-orders-table-tbody-tr.s-orders-table-tbody-tr-shadow.animated:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.2);
    background-color: #e0e0e0;
    border-color: #999999;
}

.s-orders-table-tbody-tr.s-orders-table-tbody-tr-shadow.animated:active {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.18);
}
/* ====================== */
/* المحتوى الرقمي — أحمر واضح ووميض سلس + بوكس أحمر */
/* ====================== */
div.flex.space-x-2.rtl\:space-x-reverse.text-start.flex-none.px-2 > a.text-primary {
    color: #FF2D2D !important;
    font-weight: 900 !important;
    font-size: 2em !important;
    padding: 6px 10px !important; /* زيادة البادينغ لإظهار البوكس */
    line-height: 1.1 !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    border: 2px solid #FF2D2D; /* البوكس الأحمر */
    border-radius: 8px; /* حواف مدورة للبوكس */
    box-shadow: 0 2px 6px rgba(255,45,45,0.3); /* ظل خفيف للعمق */
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;

    text-shadow: 0 0 6px rgba(255,45,45,0.6), 0 0 12px rgba(0,0,0,0.4);
    animation: flashRed 1.6s infinite ease-in-out;
}

/* تأثير عند التحويم لإبراز القابلية للضغط */
div.flex.space-x-2.rtl\:space-x-reverse.text-start.flex-none.px-2 > a.text-primary:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(255,45,45,0.4);
    border-color: #FF5555;
}

@keyframes flashRed {
    0%   { opacity: 1; transform: scale(1); text-shadow: 0 0 6px rgba(255,45,45,0.6), 0 0 12px rgba(0,0,0,0.4); }
    50%  { opacity: 0.7; transform: scale(1.03); text-shadow: 0 0 12px rgba(255,45,45,0.8), 0 0 18px rgba(0,0,0,0.5); }
    100% { opacity: 1; transform: scale(1); text-shadow: 0 0 6px rgba(255,45,45,0.6), 0 0 12px rgba(0,0,0,0.4); }
}


/* ====================== */
/* زر التقييم — أبيض مع Glow ذهبي احترافي */
/* ====================== */
.btn--rounded-full.s-button-element.s-button-btn.s-button-solid.s-button-light.s-button-loader-after {
    color: #FFD700 !important;
    font-weight: 700 !important;
    background-color: #000000 !important;
    border: 2px solid #FFD700 !important;
    border-radius: 50% !important;
    box-shadow: 0 0 8px #FFD700, 0 0 14px rgba(255,215,0,0.45);
    animation: yellowGlow 1.6s infinite alternate ease-in-out;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.btn--rounded-full.s-button-element.s-button-btn.s-button-solid.s-button-light.s-button-loader-after:hover {
    transform: scale(1.08);
    box-shadow: 0 0 14px #FFD700, 0 0 24px rgba(255,215,0,0.6);
}

@keyframes yellowGlow {
    0% { 
        opacity: 1;
        box-shadow: 0 0 6px #FFD700, 0 0 12px rgba(255,215,0,0.4);
    }
    50% { 
        opacity: 0.7;
        box-shadow: 0 0 10px #FFD700, 0 0 18px rgba(255,215,0,0.5);
    }
    100% { 
        opacity: 1;
        box-shadow: 0 0 8px #FFD700, 0 0 14px rgba(255,215,0,0.45);
    }
}

/* ====================== */
/* rating-header أكثر وضوحًا واحترافية */
/* ====================== */
.rating-header.gradient-bg.center-between {
    background-color: #ffffff !important;
    border: 1px solid #FFD700 !important;
    color: #FFD700 !important;
    border-radius: 12px;
    padding: 8px 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(255,215,0,0.25);
    font-weight: 600;
    font-size: 1.25em;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.rating-header.gradient-bg.center-between:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(255,215,0,0.35);
}

.rating-header {
    border-radius: .375rem;
    position: relative;
    padding: 1.25rem;
    color: #ff6767;
}


/* ========================================== */
/* إصلاح اهتزاز الصور (CLS Fix) - مفاتيحي */
/* ========================================== */

/* 1. تثبيت أبعاد صور المنتجات في الرئيسية والتصنيفات */
.product-entry__image {
    position: relative;
    overflow: hidden;
    /* حجز مساحة مربعة للصورة مسبقاً لمنع القفز */
    aspect-ratio: 1 / 1; 
    background-color: #f9f9f9; /* لون خلفية خفيف يظهر قبل الصورة */
}

.product-entry__image img {
    object-fit: contain; /* ضمان ظهور كامل المنتج داخل المربع */
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

/* 2. تثبيت صورة المنتج في صفحة المنتج الداخلية */
.product-detials__slider .swiper-slide img {
    width: 100%;
    height: auto;
    /* افتراض أن صورك مربعة، عدل الرقم لو كانت مستطيلة */
    aspect-ratio: 1 / 1; 
}

/* 3. منع اهتزاز النصوص */
body {
    overflow-x: hidden; /* منع الحركة الأفقية المفاجئة */
}