/* =================================================================
   هوية "ثيرما" السعودية - الكود الأساسي (الوضع الفاتح الفخم)
   Therma Identity: Light Pearl + Maroon + Gold
   ================================================================= */

/* 1. استيراد الخط المعتمد (تجوال) */
@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;800&display=swap');

/* -----------------------------------------------------------------
   2. تعريف الألوان الأساسية (الجذور)
   ----------------------------------------------------------------- */
:root {
    /* العنابي (الأساسي) */
    --s-color-primary: #682136 !important;
    --color-primary: #682136 !important;
    
    /* الذهبي (الثانوي) */
    --s-color-secondary: #C5A065 !important;
    --color-secondary: #C5A065 !important;
    
    /* اللؤلؤي (الخلفية) */
    --s-color-bg: #FDFBF7 !important;
    --body-bg: #FDFBF7 !important;
    
    /* لون النصوص العامة */
    --s-color-text: #333333 !important;
}

/* -----------------------------------------------------------------
   3. إعدادات الصفحة والخلفيات والخطوط
   ----------------------------------------------------------------- */
body, html, .s-layout, main, .store-wrapper, .bg-white {
    background-color: #FDFBF7 !important;
    background: #FDFBF7 !important;
    font-family: 'Tajawal', sans-serif !important;
}

/* -----------------------------------------------------------------
   4. الأزرار (Buttons) - عنابي بحواف دائرية
   ----------------------------------------------------------------- */
button, 
.btn, 
.s-button-element, 
[class*="btn-primary"], 
.product-cart-submit {
    background-color: #682136 !important; /* عنابي */
    border-color: #682136 !important;
    color: #ffffff !important;
    border-radius: 50px !important; /* حواف دائرية ناعمة */
    transition: all 0.3s ease-in-out !important;
}

/* عند تمرير الماوس (يتحول للذهبي) */
button:hover, .btn:hover, .s-button-element:hover {
    background-color: #C5A065 !important;
    border-color: #C5A065 !important;
    transform: translateY(-2px); /* رفعة بسيطة */
}

/* -----------------------------------------------------------------
   5. المنتجات: العناوين والأسعار
   ----------------------------------------------------------------- */
h1, h2, h3, h4, .product-title, .s-product-card-content-title {
    color: #682136 !important; /* العناوين عنابي */
}

.product-price, .s-product-card-content-price {
    color: #C5A065 !important; /* السعر ذهبي */
    font-weight: bold !important;
}

/* إظهار التصنيفات بشكل واضح */
.category-name, .store-category-name {
    color: #682136 !important;
    display: block !important;
}

/* -----------------------------------------------------------------
   6. الهيدر (رأس الصفحة) وتوسيط الشعار
   ----------------------------------------------------------------- */
/* خلفية الهيدر */
.site-header, .s-header {
    background-color: #FDFBF7 !important;
    border-bottom: 1px solid rgba(197, 160, 101, 0.2) !important;
}

/* توسيط المحتوى والشعار */
.header-row, .site-header .container, .header-wrapper, .s-header__content {
    justify-content: center !important;
    text-align: center !important;
}

.store-logo, .site-logo, .header-logo {
    margin: 0 auto !important;
    float: none !important;
    display: inline-block !important;
}

/* روابط القائمة العلوية (عنابي) */
.site-header a, .nav-link, .s-menu-item a, .header-menu a {
    color: #682136 !important;
    font-weight: bold !important;
}

/* إزالة أي عناصر جانبية قد تخرب التوسيط */
.header-right, .header-left {
    margin: 0 !important;
    flex: 0 0 auto !important;
}

/* -----------------------------------------------------------------
   7. الفوتر (ذيل الصفحة) - عنابي بنصوص فاتحة
   ----------------------------------------------------------------- */
footer, .s-footer, .footer-wrapper, .store-footer {
    background-color: #682136 !important; /* خلفية عنابي */
    color: #FDFBF7 !important; /* نص لؤلؤي */
    border-top: 5px solid #C5A065 !important; /* خط ذهبي عريض */
    padding-top: 40px !important;
}

/* العناوين في الفوتر (ذهبي) */
.s-footer h3, .s-footer h4, .footer-title {
    color: #C5A065 !important;
    border-bottom: 1px solid rgba(197, 160, 101, 0.3);
    padding-bottom: 10px;
    margin-bottom: 20px !important;
}

/* الروابط والنصوص (لؤلؤي) */
.s-footer p, .s-footer li, .s-footer span, .s-footer a, .footer-links a {
    color: #FDFBF7 !important;
}
.s-footer a:hover {
    color: #C5A065 !important; /* ذهبي عند اللمس */
}

/* حقوق النشر (غامق) */
.copyrights, .s-footer-copyrights {
    background-color: #50192a !important;
    color: #FDFBF7 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* توسيط وتبييض الشعار في الفوتر */
.footer-logo, .footer-main .footer-logo {
    display: block !important;
    text-align: center !important;
    width: 100% !important;
    margin-bottom: 20px !important;
}
.footer-logo img {
    margin: 0 auto !important;
    filter: brightness(0) invert(1) !important; /* قلب الشعار للأبيض */
}

/* -----------------------------------------------------------------
   8. شاشة التحميل (Loader)
   ----------------------------------------------------------------- */
.s-loader-wrapper, #loader-wrapper, .s-loader, .pace-running .pace {
    background-color: #FDFBF7 !important; /* خلفية لؤلؤي */
}

/* تلوين الدائرة والعناصر */
.s-loader svg circle, .loader svg circle, .spinner-border {
    stroke: #682136 !important; /* عنابي */
    border-color: #C5A065 !important;
    border-top-color: #682136 !important;
}
.pace .pace-progress {
    background: #682136 !important;
    box-shadow: 0 0 10px #C5A065 !important;
}
/* =======================================================
   تلوين نصوص شاشة التحميل (Loader Text) للعنابي
   ======================================================= */

/* 1. استهداف جميع النصوص داخل اللودر */
.s-loader, 
.s-loader-wrapper, 
.loader-text, 
.s-loader__text, 
.preloader-text {
    color: #682136 !important; /* العنابي */
    fill: #682136 !important; /* إذا كان النص من نوع SVG */
}

/* 2. استهداف العناوين والفقرات داخل اللودر */
.s-loader p, 
.s-loader span, 
.s-loader h3, 
.s-loader h4,
.s-loader strong {
    color: #682136 !important;
    font-family: 'Tajawal', sans-serif !important;
    font-weight: bold !important;
}

/* 3. (احتياط) إذا كان النص عبارة عن عنصر زائف */
.s-loader::before, 
.s-loader::after {
    color: #682136 !important;
}