/* Add custom CSS styles below */ 
/* ضبط طريقة عرض البنرات في ثيم رائد */
.raed-slider .swiper-slide img, 
.main-slider img, 
.banner-image img {
    object-fit: cover !important; /* ملء المساحة بمرونة وبأبعاد طبيعية */
    object-position: center !important; /* إبقاء وسط الصورة والنصوص بالمنتصف دائماً */
    width: 100% !important;
    height: 100% !important;
}
/* تحسين مظهر البنرات على شاشات الهواتف الذكية */
@media (max-width: 767px) {
    .raed-slider .swiper-container,
    .main-slider,
    .hero-slider {
        height: 280px !important; /* ارتفاع متناسق للبنر العريض على الجوال */
    }
    .raed-slider .swiper-slide img,
    .main-slider img {
        object-fit: fill !important; /* لضمان ظهور كامل تفاصيل التصميم على الجوال */
    }
}
/* إضافة انحناء عصري لأطراف البنرات */
.raed-slider, .main-slider, .banner-box {
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05) !important; /* ظل خفيف يعطي عمقاً فخماً */
}/* إجبار قالب رائد على إظهار البنر كاملاً بنسبة 100% دون قص أي جزء */
.raed-slider, 
.main-slider, 
.hero-slider,
.raed-slider .swiper-container {
    height: auto !important; /* إلغاء الارتفاع الثابت المفروض من القالب */
}

.raed-slider .swiper-slide img, 
.main-slider img, 
.banner-image img,
.slider-wrapper img {
    object-fit: contain !important; /* إجبار الصورة على الظهور كاملة بكافة أبعادها */
    width: 100% !important;
    height: auto !important; /* جعل الارتفاع مرناً ومتناسباً طردياً مع العرض */
}

/* ضبط استجابة البنر الكامل على شاشات الجوال */
@media (max-width: 767px) {
    .raed-slider .swiper-slide img, 
    .main-slider img {
        object-fit: contain !important; /* يضمن عدم قص أطراف الكنب أو الخزائن على الهاتف */
        width: 100% !important;
        height: auto !important;
    }
}/* 1. جعل صورة الشعار دائرية بشكل متناسق مع حماية أبعادها */
.store-header .header-logo img, 
.raed-header .logo img,
.header-wrapper .logo img {
    border-radius: 50% !important; /* تحويل الإطار إلى دائري بالكامل */
    object-fit: cover !important;  /* حماية الشعار من التمدد أو التمطيط */
    width: 75px !important;        /* ضبط العرض المناسب للهيدر */
    height: 75px !important;       /* ضبط الارتفاع ليكون متطابقاً مع العرض */
    border: 2px solid #e2e8f0 !important; /* إضافة إطار خفيف ناعم يبرز الشعار */
    background-color: #ffffff !important; /* تعبئة خلفية بيضاء للشعار ليظهر بوضوح */
}

/* 2. تخصيص ألوان رأس الصفحة (Header) لتتناسب مع ألوان الهوية المبهجة */
.store-header, 
.raed-header,
.main-header {
    background-color: #f8fafc !important; /* تغيير خلفية الهيدر للون مبهج مريح (أوف وايت ناعم) */
    border-bottom: 2px solid #f1f5f9 !important; /* خط سفلي دقيق يفصل الهيدر عن البنر */
}

/* 3. تنسيق ألوان نصوص القوائم العلوية والأيقونات لتسهيل القراءة */
.store-header .main-menu a, 
.raed-header .nav-link,
.store-header .header-icon {
    color: #334155 !important; /* تحويل لون النصوص إلى الرمادي الداكن المودرن المتناسق */
    font-weight: 600 !important; /* زيادة سماكة الخط لتسهيل القراءة */
    transition: color 0.3s ease !important;
}

/* تفتيح لون الروابط عند مرور الماوس لمنح العميل تجربة تفاعلية مبهجة */
.store-header .main-menu a:hover, 
.raed-header .nav-link:hover {
    color: #475569 !important; 
}/* إجبار قالب رائد على تحويل الشعار إلى شكل دائري متناسق */
.store-header-logo, 
.header-logo, 
.logo-wrapper,
[class*="logo"] img,
.store-header .logo img {
    border-radius: 50% !important; /* تحويل الإطار إلى دائري */
    clip-path: circle(50%) !important; /* قطع أطراف الصورة الزائدة بشكل دائري حاد */
    object-fit: contain !important; /* حماية الشعار من التمدد والتشويه */
    border: 2px solid #f1f5f9 !important; /* إطار ناعم لحماية حواف اللوجو */
    background-color: #ffffff !important; /* تعبئة خلفية بيضاء للشعار ليظهر بوضوح */
    max-height: 80px !important; /* ضبط الارتفاع المناسب للهيدر */
    max-width: 80px !important; /* ضبط العرض ليكون متطابقاً */
}

/* ضبط ألوان رأس الصفحة لتتناسب مع ألوان الهوية المبهجة للمتجر */
.main-header, 
.store-header, 
.site-header {
    background: #f8fafc !important; /* لون هيدر مبهج ومريح (أوف وايت ناعم) */
    border-bottom: 2px solid #f1f5f9 !important;
}/* 1. إبراز وتكبير أيقونات التواصل الاجتماعي في ذيل الصفحة */
.store-footer .social-links a,
.footer-social-links a,
.site-footer .social-icons a,
[class*="social"] a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 24px !important; /* تكبير حجم الأيقونة لتكون واضحة جداً للعميل */
    width: 44px !important;    /* إعطاء مساحة دائرية مريحة حول الأيقونة */
    height: 44px !important;
    border-radius: 50% !important; /* جعل خلفية الأيقونات دائرية مودرن */
    background-color: #f1f5f9 !important; /* لون خلفية خفيف ومبهج يبرز الشعار */
    color: #334155 !important; /* لون الأيقونة الأساسي (رمادي داكن فاخر) */
    margin: 0 8px !important;  /* إعطاء تباعد متناسق بين الأيقونات لمنع تداخلها */
    transition: all 0.3s ease !important; /* حركة ناعمة عند مرور الماوس */
}

/* 2. إضافة تأثير تفاعلي مبهج وألوان المنصات الرسمية عند مرور الماوس (Hover) */
.store-footer .social-links a:hover,
.footer-social-links a:hover,
[class*="social"] a:hover {
    transform: translateY(-4px) !important; /* رفع الأيقونة قليلاً للأعلى عند لمسها */
    background-color: #334155 !important; /* تحول الخلفية للرمادي الداكن */
    color: #ffffff !important; /* تحول لون الأيقونة للأبيض الناصع */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1) !important; /* ظل خفيف يمنحها عمقاً بصرياً */
}

/* 3. تنسيق الخطوط وتوزيع الروابط بذيل الصفحة ليكون مريحاً للقراءة */
.store-footer .footer-links a,
.site-footer a {
    font-weight: 500 !important;
    font-size: 15px !important;
    color: #475569 !important; /* لون نصوص الروابط لتتناسب مع ألوان متجرك الجديدة */
}