/* ==================================================
   TOP REST 2050 - FUTURE EDITION 🚀
   تصميم مستقبلي: زجاجي + نيون + انسيابية
   ================================================== */

/* 1. إصلاح الصور (الحل الجذري) */
/* نحدد ارتفاعاً موحداً للصور داخل الكروت فقط لضمان التناسق */
.s-product-card-image {
    height: 220px !important; /* ارتفاع ثابت للجميع */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 10px !important;
    background: transparent !important; /* خلفية شفافة */
}

.s-product-card-image img {
    max-height: 100% !important;
    width: auto !important;
    max-width: 100% !important;
    object-fit: contain !important; /* يمنع القص والتمطيط */
    filter: drop-shadow(0 5px 10px rgba(0,0,0,0.1)); /* ظل للصورة نفسها لتبدو عائمة */
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

/* حركة الكاميرا عند المرور على الصورة */
.s-product-card-entry:hover .s-product-card-image img {
    transform: scale(1.1) rotate(2deg); /* تكبير مع دوران خفيف جداً */
}

/* 2. كروت المنتجات (تصميم الزجاج المستقبلي) */
.s-product-card-entry, .product-item {
    background: rgba(255, 255, 255, 0.9) !important; /* شبه شفاف */
    backdrop-filter: blur(10px) !important; /* تأثير الزجاج */
    border: 1px solid rgba(27, 58, 126, 0.1) !important;
    border-radius: 20px !important; /* حواف دائرية ناعمة */
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.05) !important;
    transition: all 0.4s ease !important;
    overflow: hidden;
}

/* تأثير التوهج (Neon Glow) عند الهوفر */
.s-product-card-entry:hover {
    transform: translateY(-8px) !important; /* يطفو للأعلى */
    border-color: #ffcf2a !important;
    /* توهج أزرق وذهبي حول الكرت */
    box-shadow: 0 0 20px rgba(27, 58, 126, 0.2), 
                0 0 10px rgba(255, 207, 42, 0.3) !important;
}

/* 3. الأزرار الفضائية (Capsule Buttons) */
.s-add-to-cart-button, .btn--add-to-cart, .product-cart-btn {
    background: linear-gradient(135deg, #1b3a7e, #2b59c3) !important;
    color: #fff !important;
    border-radius: 50px !important; /* شكل كبسولة */
    font-weight: bold !important;
    letter-spacing: 1px !important; /* تباعد أحرف */
    border: none !important;
    box-shadow: 0 4px 15px rgba(27, 58, 126, 0.3);
    position: relative;
    overflow: hidden;
    z-index: 1;
}

/* تأثير الليزر يمر فوق الزر */
.s-add-to-cart-button::after {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    transition: 0.5s;
    z-index: -1;
}

.s-add-to-cart-button:hover::after {
    left: 100%;
}

.s-add-to-cart-button:hover {
    background: linear-gradient(135deg, #ffcf2a, #f1c40f) !important; /* يتحول للذهبي عند اللمس */
    color: #1b3a7e !important; /* النص يصير أزرق */
    box-shadow: 0 0 20px rgba(255, 207, 42, 0.6); /* توهج ذهبي */
}

/* 4. العناوين والأسعار (Cyberpunk Style) */
.s-product-card-price {
    color: #1b3a7e !important;
    font-family: sans-serif; /* خط رقمي */
    font-size: 1.2rem !important;
    text-shadow: 0 0 1px rgba(27, 58, 126, 0.2);
}

.s-product-card-title {
    color: #333 !important;
    font-weight: 700 !important;
    transition: 0.3s;
}

.s-product-card-entry:hover .s-product-card-title {
    color: #1b3a7e !important; /* الاسم يضيء أزرق عند الهوفر */
}

/* 5. شريط التمرير (Scrollbar) المضيء */
::-webkit-scrollbar {
    width: 10px;
}
::-webkit-scrollbar-track {
    background: #0f172a; /* خلفية داكنة للشريط */
}
::-webkit-scrollbar-thumb {
    background: linear-gradient(#1b3a7e, #ffcf2a); /* تدرج لوني */
    border-radius: 10px;
    border: 2px solid #0f172a;
}

/* 6. تحسينات الجوال (عشان ما يخرب التصميم في الشاشات الصغيرة) */
@media (max-width: 768px) {
    .s-product-card-image {
        height: 160px !important; /* تقليل الارتفاع في الجوال */
    }
    .s-product-card-entry {
        margin-bottom: 15px !important;
        box-shadow: 0 4px 10px rgba(0,0,0,0.05) !important;
    }
}

/* 7. العروض الخاصة (Badges) */
.promotion-title, .sale-badge {
    background: #c32026 !important;
    border-radius: 4px !important;
    box-shadow: 0 2px 10px rgba(195, 32, 38, 0.4);
    animation: pulse-red 2s infinite;
}

@keyframes pulse-red {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}