/* =========================================================
   تخصيصات دروب المستقبل (اهتزاز + زووم للصورة)
   ========================================================= */

/* 1. الإطار البنفسجي العلوي (كما طلبت) */
body {
    border-top: 5px solid #703083 !important;
}

/* 2. تعريف حركة الاهتزاز (Wiggle Animation) */
@keyframes soft-wiggle {
    0% { transform: rotate(0deg); }
    25% { transform: rotate(1deg); }
    50% { transform: rotate(-1deg); }
    75% { transform: rotate(0.5deg); }
    100% { transform: rotate(0deg); }
}

/* 3. تنسيق كرت المنتج (تجهيزه للحركة) */
.product-entry, .s-product-card-entry, .product-block, .product-item {
    border-radius: 16px !important;
    overflow: hidden !important; /* مهم جداً عشان الصورة ما تخرج برة الكرت لما تكبر */
    border: 1px solid #f4f4f4 !important; 
    transition: all 0.3s ease-in-out !important;
}

/* 4. تطبيق الاهتزاز والظل عند مرور الماوس */
.product-entry:hover, .s-product-card-entry:hover, .product-block:hover {
    animation: soft-wiggle 0.4s ease-in-out !important; /* تشغيل الاهتزاز */
    box-shadow: 0 15px 30px rgba(0,0,0,0.1) !important; /* ظل ناعم */
    border-color: #703083 !important;
}

/* 5. اللمسة الاحترافية: تكبير الصورة (Zoom) عند مرور الماوس */
.product-entry:hover img, .s-product-card-entry:hover img {
    transform: scale(1.08) !important; /* تكبير الصورة بنسبة بسيطة */
    transition: transform 0.5s ease !important; /* نعومة التكبير */
}

/* 6. تحسينات عامة (أزرار دائرية + صور ناعمة + حقول إدخال) */
.btn, .s-button-element, button, .s-add-to-cart-button {
    border-radius: 50px !important;
}

img {
    border-radius: 8px !important;
    transition: transform 0.3s ease; /* تجهيز الصورة للحركة */
}

input, select, textarea, .form-control {
    border-radius: 10px !important;
    border: 1px solid #e1e1e1 !important;
}

/* 7. شريط التمرير (Scrollbar) */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: #fff; }
::-webkit-scrollbar-thumb { background: #703083; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: #F37022; }