/* ========================================================== */
/* تخصيص عن طريق الـ CSS - (الشكل، الألوان، والحركات) */
/* اللون الرسمي للمتجر المستخدم: #4f1642 (الأرجواني الداكن) */
/* ========================================================== */

/* ---------------------------------------------------------- */
/* 1. تنسيق شريط التنقل العلوي (Header Styling) */
/* (ملاحظة: تم استخدام محددات قوية لفرض التغيير على ثيم سلة) */
/* ---------------------------------------------------------- */

/* استهداف الهيكل الأساسي للهيدر في وضع سطح المكتب والجوال */
.st-desktop-header, .st-mobile-header {
    /* التأكيد على ظهور الهيدر فوق باقي العناصر */
    z-index: 1000 !important;
    /* التأكيد على الخلفية البيضاء لتجنب الشفافية غير المرغوبة */
    background-color: #ffffff !important; 
}

/* تطبيق الظل والحافة السفلية على شريط الهيدر الداخلي (Header Wrapper) */
.site-header-wrapper {
    /* إضافة ظل خفيف لجعل الشريط يبدو عائماً ومرفوعاً (جمالي) */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important; 
    /* إضافة حافة سفلية سميكة بلون المتجر الرسمي (#4f1642) */
    border-bottom: 2px solid #4f1642 !important; 
}

/* تخصيص لون أيقونات الهيدر (مثل السلة، البحث، القائمة) */
.site-header .menu-icon svg path, .site-header .icon svg path, 
.site-header .search-icon svg path, .site-header .shopping-cart-icon svg path, 
.site-header .user-icon svg path {
    /* تعبئة الأيقونات باللون الأرجواني الرسمي للمتجر */
    fill: #4f1642 !important; 
}

/* ---------------------------------------------------------- */
/* 2. تنسيق بطاقات المنتجات (Product Card Styling) */
/* ---------------------------------------------------------- */
.product-card {
    border-radius: 10px !important; /* حواف دائرية للبطاقة */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); /* ظل أنيق ونظيف */
    transition: transform 0.3s ease; /* حركة سلسة عند التفاعل */
}

.product-card:hover {
    transform: translateY(-5px); /* رفع البطاقة قليلاً عند مرور الماوس (تأثير جذاب) */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15); /* تظليل أكبر عند الرفع */
}

/* تنسيق زر "أضف للسلة" داخل بطاقات المنتجات */
.product-card .btn-add-to-cart {
    background-color: #4f1642 !important; /* لون زر الشراء أرجواني رسمي */
    border-color: #4f1642 !important;
    color: #ffffff !important; /* لون النص داخل الزر أبيض */
    border-radius: 6px !important;
}

.product-card .btn-add-to-cart:hover {
    background-color: #3e1233 !important; /* لون أغمق عند التفاعل بالماوس */
}

/* ---------------------------------------------------------- */
/* 3. أكواد النافذة المنبثقة (POP-UP STYLING) والحركات */
/* ---------------------------------------------------------- */

/* تعريف حركة التراقص (Shake/Wiggle) - لجذب الانتباه */
@keyframes shake-wiggle {
    0% { transform: rotate(0deg); } 20% { transform: rotate(-5deg); } 40% { transform: rotate(5deg); }
    60% { transform: rotate(-5deg); } 80% { transform: rotate(5deg); } 100% { transform: rotate(0deg); }
}

/* حركة الاهتزاز الخفيف للنافذة ككل (Pulse) */
@keyframes pulse {
    from { transform: scale(1) translateY(0); }
    to { transform: scale(1.005) translateY(-2px); } 
}

/* حركة الظهور عند فتح النافذة (FadeIn) */
@keyframes fadeIn {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

/* خلفية النافذة المنبثقة (التعتيم على الصفحة) */
.custom-modal-overlay {
    position: fixed; /* تثبيت النافذة في مكانها */
    z-index: 9999 !important; /* التأكد من ظهورها فوق كل شيء */
    background-color: rgba(0, 0, 0, 0.7); /* لون تعتيم رمادي شفاف */
    display: none; /* يتم إخفاؤها في البداية */
    width: 100%; height: 100%; top: 0; left: 0;
    justify-content: center; align-items: center;
}

/* صندوق المحتوى الفعلي للنافذة */
.custom-modal-content {
    background-color: #ffffff; padding: 30px; border-radius: 15px; text-align: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); /* ظل كبير لجعلها عائمة */
    max-width: 90%; width: 400px; position: relative;
    /* تطبيق حركتي الظهور والاهتزاز الخفيف */
    animation: fadeIn 0.3s ease-out, pulse 2s infinite alternate; 
}

/* زر إغلاق النافذة (X) */
.custom-modal-close {
    position: absolute; top: 10px; left: 10px;
    font-size: 24px; font-weight: bold;
    color: #4f1642 !important; /* اللون الأرجواني الرسمي */
    cursor: pointer;
}

/* أيقونة الهدية (لتطبيق حركة التراقص عليها) */
.gift-icon-shake {
    display: inline-block; 
    animation: shake-wiggle 1s ease-in-out infinite; /* تطبيق حركة التراقص */
    transform-origin: center;
}

/* زر كود الخصم (START3) */
.discount-code {
    background-color: #4f1642 !important; /* 💥 تأكيد اللون الأرجواني */
    color: #ffffff !important; /* تأكيد اللون الأبيض للنص */
    padding: 10px 15px; border-radius: 8px; margin: 15px 0;
    font-size: 1.2em; font-weight: bold; display: inline-block; cursor: pointer; user-select: all;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); 
    /* تطبيق حركة التراقص على الزر بتأخير بسيط */
    animation: shake-wiggle 1.5s ease-in-out infinite 0.5s; 
}

.discount-code:hover {
    background-color: #3e1233 !important; /* لون أغمق عند التفاعل */
}

/* تنسيقات الألوان للنصوص والخطوط الداخلية للتأكيد */
.custom-modal-content h2, .custom-modal-content span.custom-modal-close, .custom-modal-content hr {
    color: #4f1642 !important;
    border-color: #4f1642 !important; 
}

.welcome-text { font-size: 1.1em; margin-bottom: 20px; font-weight: 500; }
.discount-details { font-size: 0.9em; color: #666; }



/* هذا الكود النهائي لـ "بلكات انسكاب الابداع" في متجر سلة */
/* التوزيع: 3 أعمدة (كمبيوتر) / 3 أعمدة (أفقي) / 2 عمود (عمودي) */

/* 1. تنسيق أساسي لكل بطاقة بنر وتأثير التحويم والظل الأزرق */
.banner-entry {
    position: relative; 
    border-radius: 12px;
    overflow: hidden; 
    /* 💥 الإضافة الجديدة: خلفية بلون قاعدة التصميم */
    background-color: #d6d1d5 !important; 
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    transition: all 0.4s cubic-bezier(0.25, 0.1, 0.35, 1.77); 
    height: 0; 
}

.banner-entry:hover {
    transform: translateY(-5px) scale(1.02); 
    /* 💙 الظل الأزرق المتوهج */
    box-shadow: 0 10px 30px rgba(71, 169, 237, 0.7); 
}

/* تكبير الصورة عند التحويم */
.banner-entry .lazy__bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover; 
    background-position: center; 
    transition: transform 0.5s ease;
}

.banner-entry:hover .lazy__bg {
    transform: scale(1.1); 
}

/* ---------------------------------------------------- */
/* --- التحكم في عدد الأعمدة وضمان تناسب الارتفاع --- */
/* ---------------------------------------------------- */

/* 1. الجوال العمودي (أقل من 768px) - (عمودين) */
@media (max-width: 768px) {
    .s-block--banners .grid {
        display: grid !important; 
        grid-template-columns: repeat(2, 1fr) !important; 
        gap: 1rem; 
    }
    .banner-entry {
        padding-top: 50% !important; 
    }
}

/* 2. الجوال الأفقي والشاشات المتوسطة (بين 500px و 900px) - (3 أعمدة) */
@media (min-width: 500px) and (max-width: 900px) {
    .s-block--banners .grid {
        display: grid !important; 
        grid-template-columns: repeat(3, 1fr) !important;
        /* نسبة الارتفاع الصحيحة للمحتوى الفعلي (1982x1070) */
        padding-top: 54.5% !important; 
        gap: 1.5rem; 
    }
}

/* 3. الشاشات الكبيرة/الكمبيوتر (أكبر من 901px) - (3 أعمدة ثابتة) */
@media (min-width: 901px) {
    .s-block--banners .grid {
        display: grid !important; 
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 1.5rem; 
    }
    
    .banner-entry {
        /* نسبة الارتفاع الصحيحة للمحتوى الفعلي (1982x1070) */
        padding-top: 54.5% !important; 
        height: 0 !important; 
    }
}




/* 2. تصحيح لون النص الداخلي إذا لم يقم المتغير بتغطيته (للتأكد) */
.styles__tabbyPromoSnippetText--b30d0, 
.styles__tabbyPromoSnippetText--b30d0 * {
    color: #c2a5b6 !important;
}

/* --- 1. تعريف حركة النبض (CSS Keyframes) --- */
@keyframes tabbyPulse {
    0% {
        box-shadow: 0 0 5px rgba(255, 255, 255, 0.3);
    }
    50% {
        box-shadow: 0 0 10px rgba(255, 255, 255, 0.7);
    }
    100% {
        box-shadow: 0 0 5px rgba(255, 255, 255, 0.3);
    }
}

/* --- 2. تطبيق الحركة على بلوك Tabby --- */
.styles__snippetWrapper--d68e9 {
    background-color: #793168 !important; 
    transition: all 0.3s ease; 
    
    /* 💥 تطبيق حركة النبض: 2 ثانية، تكرار لانهائي */
    animation: tabbyPulse 2s infinite; 
}

.styles__snippetWrapper--d68e9:hover {
    /* تغيير خفيف للون عند التحويم */
    background-color: #9A4384 !important;
}



/* --- الكود المدمج: النص والخلفية وتأثير النبض لـ Tabby/Tamara --- */

/* 1. تصحيح لون النص: نجعل النص أبيض (#FFFFFF) ليتناقض مع الخلفية الغامقة */
/* هذا يستهدف المتغيرات التي تتحكم في اللون Dark Mode */
.dark #tabbyPromoWrapper #tabbyPromo *,
.dark .s-installment-emkan-content-text,
.styles__tabbySnippet--c10e5 {
    color:  #c2a5b6 !important; /* فرض اللون الأبيض */
    --snippetTextColor:  #c2a5b6 !important; 
    --snippetLinkTextColor:  #c2a5b6 !important;
   */ 
}

/* 2. تصحيح لون "ريال" في Tamra (العملة) */
.product-payments-section .currency-symbol,
.product-payments-section .s-price__currency,
.product-payments-section .tamara-snippet .s-text-xs,
.product-payments-section span {
    color: #c5a5b6 !important; /* نستخدم لونك المخصص للعملة */
}

/* 3. تثبيت لون خلفية Tabby وتطبيق تأثير النبض */
.styles__snippetWrapper--d68e9 {
    background-color: #793168 !important; /* لون الخلفية الذي اخترته */
    transition: all 0.3s ease; 
    animation: tabbyPulse 2s infinite; /* تطبيق حركة النبض */
}

.styles__snippetWrapper--d68e9:hover {
    background-color: #9A4384 !important; /* لون أفتح عند التحويم */
}

/* 4. تعريف حركة النبض (Keyframes) */
@keyframes tabbyPulse {
    0% { box-shadow: 0 0 5px rgba(255, 255, 255, 0.3); }
    50% { box-shadow: 0 0 10px rgba(255, 255, 255, 0.7); }
    100% { box-shadow: 0 0 5px rgba(255, 255, 255, 0.3); }
}
/* --- تثبيت لون خلفية Tamara (للمطابقة مع Tabby) --- */

.tamara-summary-widget--inline-outlined {
    /* تطبيق نفس لون الخلفية الذي اخترته لـ Tabby */
    background-color: #793168 !important; 
    
    /* إلغاء أو تغيير لون الحدود (إذا كنت لا تريد الحدود البيضاء) */
    border-color: #793168 !important; 
}