/* Add custom CSS styles below */ 
/* ==========================================================
   نجم الألياف للحوم – ثيم رائد
   النسخة النهائية

   عنابي      : #64031C
   أخضر هادئ  : #68705A
   بيج        : #E8DCC8
   نص داكن    : #2B211C
   أبيض       : #FFFFFF
========================================================== */


/* ==========================================================
   1. ألوان الهوية
========================================================== */

:root {
    --najm-burgundy: #64031C;
    --najm-green: #68705A;
    --najm-beige: #E8DCC8;
    --najm-dark: #2B211C;
    --najm-white: #FFFFFF;
}


/* ==========================================================
   2. النصوص العامة
========================================================== */

body {
    color: var(--najm-dark) !important;
}


/* ==========================================================
   الهيدر – أخضر نجم الألياف
========================================================== */

header,
.main-header,
.store-header {
    position: relative !important;

    background: #68705A !important;
    background-color: #68705A !important;

    border-top: none !important;

    border-bottom:
        1px solid rgba(232, 220, 200, 0.30) !important;
}


/* ==========================================================
   نصوص وروابط الهيدر – بيج
========================================================== */

header a,
header span,
header button,
header nav a,
.main-header a,
.main-header span,
.main-header button,
.store-header a,
.store-header span,
.store-header button,
.main-menu a,
.navbar a {
    color: #E8DCC8 !important;
}


/* عند المرور */

header a:hover,
header nav a:hover,
.main-header a:hover,
.store-header a:hover,
.main-menu a:hover,
.navbar a:hover {
    color: #FFFFFF !important;
}


/* الرابط النشط */

header a.active,
header nav a.active,
.main-menu a.active,
.navbar a.active {
    color: #FFFFFF !important;
    border-bottom-color: #E8DCC8 !important;
}


/* ==========================================================
   أيقونات الهيدر
========================================================== */

header svg,
.main-header svg,
.store-header svg {
    color: #E8DCC8 !important;
    fill: currentColor !important;
}


/* الأيقونات التي تعتمد على Stroke */

header svg *,
.main-header svg *,
.store-header svg * {
    stroke: currentColor !important;
}


/* ==========================================================
   القائمة الرئيسية
========================================================== */

.main-menu a,
.navbar a,
header nav a {
    color: #E8DCC8 !important;
    font-weight: 500 !important;
    transition: color 0.25s ease !important;
}


/* ==========================================================
   شريط البحث
========================================================== */

header input[type="search"],
header .search-input,
.main-header input[type="search"] {
    background: rgba(255,255,255,0.12) !important;

    color: #FFFFFF !important;

    border:
        1px solid rgba(232,220,200,0.45) !important;

    border-radius: 30px !important;
}


header input[type="search"]::placeholder,
.main-header input[type="search"]::placeholder {
    color: rgba(255,255,255,0.75) !important;
}


/* ==========================================================
   الجوال
========================================================== */

@media (max-width: 768px) {

    header,
    .main-header,
    .store-header {
        background: #68705A !important;
        background-color: #68705A !important;
    }


    header a,
    header span,
    header button,
    header nav a,
    .main-header a,
    .store-header a {
        color: #E8DCC8 !important;
    }
}
/* ==========================================================
   4. روابط ونصوص الهيدر – عنابي
========================================================== */

header a,
header span,
header button,
header nav a,
.main-header a,
.main-header span,
.main-header button,
.store-header a,
.store-header span,
.store-header button,
.main-menu a,
.navbar a {
    color: var(--najm-burgundy) !important;
}


/* Hover */

header a:hover,
header nav a:hover,
.main-header a:hover,
.store-header a:hover,
.main-menu a:hover,
.navbar a:hover {
    color: var(--najm-green) !important;
}


/* الرابط النشط */

header a.active,
header nav a.active,
.main-menu a.active,
.navbar a.active {
    color: var(--najm-burgundy) !important;

    border-bottom-color:
        var(--najm-burgundy) !important;
}


/* ==========================================================
   5. أيقونات الهيدر
========================================================== */

header svg,
.main-header svg,
.store-header svg {
    color: var(--najm-burgundy) !important;
}


/* ==========================================================
   6. شعار الهيدر – في المنتصف
========================================================== */

header .logo,
.main-header .logo,
.store-header .logo,
header .navbar-brand {
    position: absolute !important;

    left: 50% !important;

    transform:
        translateX(-50%) !important;

    z-index: 50 !important;
}


/* صورة شعار الهيدر */

header .logo img,
.main-header .logo img,
.store-header .logo img,
header .navbar-brand img {
    display: block !important;

    width: auto !important;

    max-width: 115px !important;
    max-height: 105px !important;

    object-fit: contain !important;

    margin: auto !important;
}


/* ==========================================================
   7. القائمة الرئيسية
========================================================== */

.main-menu a,
.navbar a,
header nav a {
    color: var(--najm-burgundy) !important;

    font-weight: 500 !important;

    transition:
        color 0.25s ease !important;
}


.main-menu a:hover,
.navbar a:hover,
header nav a:hover {
    color: var(--najm-green) !important;
}


/* ==========================================================
   8. شريط البحث
========================================================== */

header input[type="search"],
header .search-input,
.main-header input[type="search"] {
    background:
        #F8F5F0 !important;

    color:
        var(--najm-dark) !important;

    border:
        1px solid rgba(100, 3, 28, 0.20) !important;

    border-radius:
        30px !important;
}


header input[type="search"]::placeholder,
.main-header input[type="search"]::placeholder {
    color:
        rgba(43, 33, 28, 0.60) !important;
}


/* ==========================================================
   9. الأزرار الرئيسية
========================================================== */

.btn-primary,
button.btn-primary,
.s-button-primary {
    background:
        var(--najm-burgundy) !important;

    border-color:
        var(--najm-burgundy) !important;

    color:
        var(--najm-white) !important;

    border-radius:
        30px !important;

    transition:
        background 0.25s ease,
        border-color 0.25s ease,
        transform 0.25s ease !important;
}


.btn-primary:hover,
button.btn-primary:hover,
.s-button-primary:hover {
    background:
        var(--najm-green) !important;

    border-color:
        var(--najm-green) !important;

    color:
        var(--najm-white) !important;

    transform:
        translateY(-2px) !important;
}


/* ==========================================================
   10. الأزرار الثانوية
========================================================== */

.btn-secondary {
    background:
        transparent !important;

    border:
        1.5px solid var(--najm-green) !important;

    color:
        var(--najm-green) !important;

    border-radius:
        30px !important;

    transition:
        all 0.25s ease !important;
}


.btn-secondary:hover {
    background:
        var(--najm-green) !important;

    color:
        var(--najm-white) !important;
}


/* ==========================================================
   11. بطاقات المنتجات
========================================================== */

.product-entry,
.product-card,
.s-product-card-entry {
    background:
        var(--najm-white) !important;

    border:
        1px solid rgba(100, 3, 28, 0.12) !important;

    border-radius:
        18px !important;

    overflow:
        hidden !important;

    transition:
        transform 0.30s ease,
        box-shadow 0.30s ease !important;
}


.product-entry:hover,
.product-card:hover,
.s-product-card-entry:hover {
    transform:
        translateY(-5px) !important;

    box-shadow:
        0 10px 25px rgba(43, 33, 28, 0.12) !important;
}


/* اسم المنتج */

.product-entry h3,
.product-card h3,
.s-product-card-entry h3 {
    color:
        var(--najm-dark) !important;
}


/* السعر */

.product-entry .price,
.product-card .price,
.s-product-card-entry .price {
    color:
        var(--najm-burgundy) !important;

    font-weight:
        700 !important;
}


/* ==========================================================
   12. عناوين الأقسام
========================================================== */

section h2,
section h3,
.section-title {
    color:
        var(--najm-burgundy) !important;
}


/* ==========================================================
   13. الفوتر الرئيسي – بيج بالكامل
========================================================== */

footer,
.main-footer,
.store-footer,
.footer-main {
    position:
        relative !important;

    background:
        var(--najm-beige) !important;

    background-color:
        var(--najm-beige) !important;

    color:
        var(--najm-dark) !important;

    border-top:
        3px solid var(--najm-burgundy) !important;

    border-radius:
        70px 70px 0 0 !important;

    margin-top:
        50px !important;

    padding-top:
        35px !important;

    overflow:
        hidden !important;
}


/* ==========================================================
   14. إزالة الخلفية البيضاء من جميع طبقات الفوتر الداخلية
========================================================== */

footer > div,
footer section,
footer article,
footer .container,
footer .container-fluid,
footer .footer-content,
footer .footer-top,
footer .footer-main,
footer .footer-bottom,
footer .footer-menu,
footer .footer-links,

.main-footer > div,
.main-footer section,
.main-footer .container,
.main-footer .container-fluid,

.store-footer > div,
.store-footer section,
.store-footer .container,
.store-footer .container-fluid {
    background:
        transparent !important;

    background-color:
        transparent !important;

    box-shadow:
        none !important;
}


/* ==========================================================
   15. إجبار منطقة معلومات المتجر على نفس البيج
========================================================== */

footer div,
footer section,
footer article,
.main-footer div,
.main-footer section,
.store-footer div,
.store-footer section {
    box-shadow:
        none !important;
}


/* ==========================================================
   16. شعار المتجر المضاف في الفوتر
========================================================== */

.najm-custom-footer-logo {
    position:
        relative !important;

    width:
        100% !important;

    display:
        flex !important;

    flex-direction:
        column !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    text-align:
        center !important;

    direction:
        rtl !important;

    background:
        transparent !important;

    padding:
        10px 20px 30px !important;

    margin:
        0 auto 25px !important;
}


/* ==========================================================
   17. صورة شعار الفوتر
========================================================== */

.najm-custom-footer-logo img {
    position:
        static !important;

    display:
        block !important;

    width:
        auto !important;

    max-width:
        140px !important;

    max-height:
        130px !important;

    object-fit:
        contain !important;

    transform:
        none !important;

    margin:
        0 auto 15px !important;
}


/* ==========================================================
   18. اسم المتجر تحت الشعار
========================================================== */

.najm-custom-footer-logo h3 {
    color:
        var(--najm-burgundy) !important;

    font-size:
        22px !important;

    font-weight:
        700 !important;

    line-height:
        1.5 !important;

    text-align:
        center !important;

    margin:
        5px 0 8px !important;
}


/* ==========================================================
   19. عبارة المتجر
========================================================== */

.najm-custom-footer-logo p {
    width:
        100% !important;

    max-width:
        650px !important;

    color:
        var(--najm-dark) !important;

    font-size:
        16px !important;

    font-weight:
        500 !important;

    line-height:
        1.9 !important;

    text-align:
        center !important;

    margin:
        0 auto !important;

    padding:
        0 15px !important;
}


/* ==========================================================
   20. الخط الأخضر أسفل العبارة
========================================================== */

.najm-custom-footer-logo::after {
    content:
        "";

    display:
        block !important;

    width:
        70px !important;

    height:
        2px !important;

    background:
        var(--najm-green) !important;

    border-radius:
        20px !important;

    margin:
        20px auto 0 !important;
}


/* ==========================================================
   21. عناوين الفوتر
========================================================== */

footer h1,
footer h2,
footer h3,
footer h4,
footer h5,
footer h6,

.main-footer h1,
.main-footer h2,
.main-footer h3,
.main-footer h4,
.main-footer h5,

.store-footer h1,
.store-footer h2,
.store-footer h3,
.store-footer h4,
.store-footer h5 {
    color:
        var(--najm-burgundy) !important;

    font-weight:
        700 !important;
}


/* ==========================================================
   22. نصوص وروابط الفوتر
========================================================== */

footer p,
footer span,
footer li,
footer a,
footer label,

.main-footer p,
.main-footer span,
.main-footer li,
.main-footer a,

.store-footer p,
.store-footer span,
.store-footer li,
.store-footer a {
    color:
        var(--najm-dark) !important;
}


/* ==========================================================
   23. روابط الفوتر
========================================================== */

footer a,
.main-footer a,
.store-footer a {
    display:
        inline-block !important;

    text-decoration:
        none !important;

    transition:
        color 0.25s ease,
        transform 0.25s ease !important;
}


footer a:hover,
.main-footer a:hover,
.store-footer a:hover {
    color:
        var(--najm-burgundy) !important;

    transform:
        translateX(-4px) !important;
}


/* ==========================================================
   24. أيقونات التواصل
========================================================== */

footer .social-icons a,
.main-footer .social-icons a,
.store-footer .social-icons a {
    color:
        var(--najm-burgundy) !important;
}


footer .social-icons a:hover,
.main-footer .social-icons a:hover,
.store-footer .social-icons a:hover {
    color:
        var(--najm-green) !important;

    transform:
        translateY(-3px) !important;
}


/* ==========================================================
   25. صفحات المحتوى
========================================================== */

.page-content,
.content-page,
.s-content,
.article-content {
    background:
        var(--najm-white) !important;

    color:
        var(--najm-dark) !important;

    border:
        1px solid rgba(100, 3, 28, 0.12) !important;

    border-radius:
        20px !important;

    padding:
        30px !important;
}


/* عناوين صفحات المحتوى */

.page-content h1,
.page-content h2,
.page-content h3,

.content-page h1,
.content-page h2,
.content-page h3,

.article-content h1,
.article-content h2,
.article-content h3 {
    color:
        var(--najm-burgundy) !important;
}


/* نصوص الصفحات */

.page-content p,
.page-content a,
.content-page p,
.content-page a,
.article-content p,
.article-content a {
    color:
        var(--najm-dark) !important;
}


/* ==========================================================
   26. الجوال
========================================================== */

@media (max-width: 768px) {

    /* الهيدر */

    header,
    .main-header,
    .store-header {
        border-top:
            3px solid var(--najm-green) !important;
    }


    /* نصوص الهيدر */

    header a,
    header span,
    header button,
    header nav a,
    .main-header a,
    .store-header a {
        color:
            var(--najm-burgundy) !important;
    }


    /* شعار الهيدر */

    header .logo img,
    .main-header .logo img,
    .store-header .logo img,
    header .navbar-brand img {
        max-width:
            85px !important;

        max-height:
            80px !important;
    }


    /* الفوتر */

    footer,
    .main-footer,
    .store-footer,
    .footer-main {
        border-radius:
            35px 35px 0 0 !important;

        padding-top:
            25px !important;
    }


    /* شعار الفوتر */

    .najm-custom-footer-logo {
        padding:
            5px 15px 25px !important;

        margin-bottom:
            15px !important;
    }


    .najm-custom-footer-logo img {
        max-width:
            110px !important;

        max-height:
            105px !important;
    }


    /* اسم المتجر */

    .najm-custom-footer-logo h3 {
        font-size:
            19px !important;
    }


    /* وصف المتجر */

    .najm-custom-footer-logo p {
        max-width:
            92% !important;

        font-size:
            14px !important;

        line-height:
            1.8 !important;
    }


    /* صفحات المحتوى */

    .page-content,
    .content-page,
    .s-content,
    .article-content {
        padding:
            20px !important;

        border-radius:
            15px !important;
    }
}