/* ==========================================================================
   النسخة المتكاملة والمتناسقة لمتجر (دفتر الحكايات) - الجوال واللابتوب معاً
   ========================================================================== */

/* 1. الخلفية السحرية الناعمة (تدرج بلوري هادئ مريح للعين) */
body {
    background: linear-gradient(-45deg, #f4fbf7, #effdff, #faf6ff, #fff8f2) !important;
    background-size: 400% 400% !important;
    animation: magicalGradientMove 16s ease infinite !important;
    background-attachment: fixed !important;
}

@keyframes magicalGradientMove {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* 2. الهيدر الزجاجي الأبيض الصافي */
header, .main-header, .site-header, [class*="header"], .nav-wrapper {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(248, 253, 250, 0.96)) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    border-bottom: 3px dashed #10b981 !important; /* إطار منقط طفولي أخضر */
    box-shadow: 0 8px 30px rgba(16, 185, 129, 0.05) !important;
}

/* 3. الفوتر الكحلي الاحترافي العميق */
footer, .site-footer, [class*="footer"] {
    background: linear-gradient(180deg, #091224 0%, #030712 100%) !important;
    position: relative;
    border-top: 5px solid #10b981 !important; 
    padding-top: 50px !important;
    padding-bottom: 30px !important;
    border-radius: 40px 40px 0 0 !important; 
}

/* 4. تفعيل خط "تجوال" العريض الشامل وتلوين النصوص بكحلي حاد فائق التوضيح */
@import url('https://googleapis.com');

body, html, p, span, a, label, input, select, textarea, div,
.product-title, .category-title, .product-single__title,
[class*="salla"], [class*="product"], [class*="category"], [class*="title"], [class*="text"] {
    font-family: 'Tajawal', sans-serif !important;
    color: #0c152b !important; /* لون كحلي حبري حاد وغامق لضمان ظهور كامل الكلام */
    font-weight: 700 !important; /* خط سميك وعريض لسهولة القراءة */
    -webkit-font-smoothing: antialiased !important;
    text-shadow: none !important; /* إلغاء أي ظلال قديمة لتنظيف الحروف */
}

/* العناوين الرئيسية الكبيرة */
h1, h2, h3, h4, h5, h6, .section-title, .product-title, .category-title, [class*="title"], .main-title, .section-header h2 {
    font-weight: 900 !important;
    color: #050b14 !important;
    letter-spacing: -0.3px !important;
    background: none !important;
    -webkit-text-fill-color: #050b14 !important;
}

/* 5. إبراز الأسعار لتعزل عن النصوص وتتضح بلمح البصر (البرتقالي الدافئ) */
.price, .product-price, [class*="price"], .total-price, .product-single__price {
    color: #f97316 !important;
    -webkit-text-fill-color: #f97316 !important;
    font-weight: 900 !important;
}

/* 6. تظبيط بطاقات المنتجات والأقسام (خلفية بيضاء ناصعة وصافية) */
.product-card, .category-card, .store-categories .category-item, [class*="card"], [class*="product-item"] {
    background: #ffffff !important; 
    border: 2px solid rgba(16, 185, 129, 0.18) !important;
    border-radius: 24px !important; 
    box-shadow: 0 8px 0px rgba(16, 185, 129, 0.06) !important; /* ظل سفلي كرتوني ممتع كالألعاب */
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

/* حركة القفز التفاعلية المرنة للبطاقات عند مرور الماوس أو اللمس باليد */
.product-card:hover, .category-card:hover, .store-categories .category-item:hover, [class*="card"]:hover {
    transform: translateY(-6px) scale(1.01) !important;
    border-color: #0ea5e9 !important;
    box-shadow: 0 14px 0px rgba(14, 165, 233, 0.1) !important;
}

/* 7. أزرار الشراء والتفاعل (تدرج طفولي مبهج بنص أبيض ناصع وثابت) */
.btn, button, .s-button, [class*="btn-primary"], [class*="add-to-cart"] {
    background: linear-gradient(135deg, #10b981, #0ea5e9) !important;
    border: none !important;
    border-radius: 50px !important; 
    box-shadow: 0 5px 15px rgba(16, 185, 129, 0.25) !important;
}

.btn *, button *, .s-button *, [class*="btn-primary"] *, [class*="add-to-cart"] *, .s-button-text {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-weight: 800 !important;
}

.btn:hover, button:hover {
    transform: scale(1.02) translateY(-1px) !important;
    box-shadow: 0 6px 18px rgba(14, 165, 233, 0.35) !important;
}

/* 8. نصوص وروابط الهيدر والفوتر */
header a, .main-menu a, .nav-link { 
    color: #0c152b !important;
}
header a:hover { 
    color: #10b981 !important; 
}

footer, footer *, .site-footer, .site-footer * {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}
footer a { color: #cbd5e1 !important; }
footer a:hover { color: #38bdf8 !important; }

/* 9. توضيح وإضاءة وصف وشرح القصص فوق الخلفية السوداء */
.product-single__description, .product-description, .description, .product-detials, [class*="description"], [class*="detials"], .product-single__description *, .product-description *, .description *, .product-single__html-content, .product-single__html-content * {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-weight: 700 !important;
    line-height: 1.9 !important;
    text-shadow: none !important;
}
.product-description a, .description a, .product-description strong, .product-description b {
    color: #facc15 !important;
    -webkit-text-fill-color: #facc15 !important;
    font-weight: 900 !important;
}

/* ==========================================================================
   10. كود الموازنة الذكية بين الجوال والكمبيوتر (Responsive Media Queries)
   ========================================================================== */

/* 📱 إعدادات مخصصة لشاشات الجوال فقط (أقل من 768 بكسل) */
@media (max-width: 767px) {
    *, p, span, a, .product-title, .category-title {
        font-size: 13px !important; /* حجم متناسق جداً ومقروء للأمهات على الهاتف */
    }
    h1, h2, h3, .section-title {
        font-size: 14px !important; /* حجم عناوين الأقسام لطيف ومناسب للجوال */
        text-align: center !important; /* توسيط العناوين لتبدو أرتب على الهاتف */
    }
    .price, .product-price, [class*="price"] {
        font-size: 14px !important; /* حجم سعر مناسب ومحمي داخل بطاقة الجوال */
    }
    .product-card, .category-card, [class*="card"] {
        padding: 12px !important; /* تصغير المسافات الداخلية لتوفير مساحة العرض */
        border-radius: 18px !important; /* انحناء أنعم يناسب شاشة الهاتف الصغيرة */
    }
    .product-single__description, .product-description {
        font-size: 15px !important; /* حجم شرح وقصص ممتاز ومقروء بوضوح على شاشات الجوال */
        padding: 10px !important;
    }
}

/* 💻 إعدادات مخصصة لشاشات اللابتوب والكمبيوتر فقط (أكبر من 768 بكسل) */
@media (min-width: 768px) {
    *, p, span, a, .product-title, .category-title {
        font-size: 16px !important;
    }
    h1, h2, h3, .section-title {
        font-size: 24px !important; /* عناوين عريضة وضخمة وجذابة على الكمبيوتر */
    }
    .price, .product-price, [class*="price"] {
        font-size: 20px !important;
    }
    .product-single__description, .product-description {
        font-size: 17px !important;
    }
}