/* =============================================
   📦 متغيرات الألوان (خالية تماماً من الأبيض)
   ============================================= */
:root {
    --color-primary: #c3451c;    /* البرتقالي الأساسي - الأسعار والأزرار */
    --color-secondary: #9a4c28;  /* البني - الأسعار قبل الخصم والعناوين */
    --color-border: #e1ac88;     /* شريط البحث وحدود العناصر */
    --color-cream: #f7edd9;      /* كروت المنتجات وبوكسات الشراء والهيدر والفوتر */
    --bg-store: #F3DEC9;         /* خلفية المتجر بالكامل */
    --color-dark: #9a4c28;       /* النصوص الأساسية */
    --shadow-sm: 0 2px 8px rgba(154, 76, 40, 0.08);
    --radius-md: 8px;
    --radius-lg: 14px;
    --transition: all .25s ease;
}

/* =============================================
   1️⃣ خلفية المتجر بالكامل
   ============================================= */
html,
body,
.app-inner,
main,
main#main-content,
.site-wrapper {
    background-color: var(--bg-store) !important;
}

/* =============================================
   2️⃣ الهيدر وشريط البحث
   ============================================= */
.store-header .main-nav-container,
.store-header .top-navbar,
header.store-header {
    background-color: var(--color-cream) !important;
}

/* شريط البحث */
.s-search-container {
    background: transparent !important;
}
.s-search-input,
.s-search-container.s-search-inline {
    background-color: var(--color-border) !important;
    border: 1px solid var(--color-secondary) !important;
    border-radius: 30px !important;
    color: var(--color-dark) !important;
}
.s-search-input::placeholder {
    color: var(--color-dark) !important;
    opacity: 0.8;
}
.s-search-icon-wrap .s-search-icon svg,
.s-search-icon-wrap i {
    fill: var(--color-dark) !important;
    color: var(--color-dark) !important;
}

/* زر الحساب والسلة في الهيدر */
.s-user-menu-login-btn {
    background-color: var(--color-cream) !important;
    border-color: var(--color-cream) !important;
    color: var(--color-cream) !important;
}
.s-user-menu-login-btn svg { fill: var(--color-primary) !important; }
.s-cart-summary-icon svg { fill: var(--color-primary) !important; }
.s-cart-summary-count {
    background-color: var(--color-primary) !important;
    color: var(--color-cream) !important;
}

/* =============================================
   3️⃣ إخفاء زر وأيقونة المفضلة (Wishlist)
   ============================================= */
.s-product-card-wishlist-btn,
salla-button[aria-label*="wishlist"],
salla-button[aria-label*="Wishlist"],
.sicon-heart,
.btn--wishlist,
[id*="card-wishlist-btn"] {
    display: none !important;
}

/* =============================================
   4️⃣ كروت المنتجات والأسعار
   ============================================= */
.s-block__title .right-side h2,
.s-block__title h2 {
    color: var(--color-dark) !important;
    font-weight: 800 !important;
}

.s-product-card {
    background-color: var(--color-cream) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-sm) !important;
    transition: var(--transition) !important;
}
.s-product-card:hover {
    border-color: var(--color-primary) !important;
}
.s-product-card-content-title a {
    color: var(--color-dark) !important;
    font-weight: 700 !important;
}

/* ألوان الأسعار في الكروت */
.s-product-card-sale-price h4,
.s-product-card-sale-price .price-after,
.s-product-card-price h4 {
    color: var(--color-primary) !important;
    font-weight: 800 !important;
}
.s-product-card-sale-price span,
.s-product-card-sale-price .price-before {
    color: var(--color-secondary) !important;
    text-decoration: line-through !important;
    opacity: 0.85 !important;
}

/* أزرار الكروت */
salla-add-product-button .s-button-outline {
    border: 2px solid var(--color-primary) !important;
    color: var(--color-primary) !important;
    fill: var(--color-primary) !important;
    background-color: transparent !important;
}
salla-add-product-button .s-button-outline:hover {
    background-color: var(--color-primary) !important;
    color: var(--color-cream) !important;
    fill: var(--color-cream) !important;
}

/* =============================================
   5️⃣ صفحة المنتج الفردية
   ============================================= */
[data-testid="store-product-title"],
.product-details__title,
h1.product-title {
    color: var(--color-dark) !important;
    font-weight: 800 !important;
}

.product__description,
.product__description p,
.product__description strong,
.product__description span,
.product__description li {
    color: var(--color-dark) !important;
}

/* نصوص الأسعار في صفحة المنتج */
[data-testid="store-product-price"] .text-red-800,
.total-price,
.price-after {
    color: var(--color-primary) !important;
    font-weight: 800 !important;
}
[data-testid="store-product-price"] .text-gray-500,
.before-price,
.price-before {
    color: var(--color-secondary) !important;
    text-decoration: line-through !important;
    opacity: 0.85 !important;
}

/* بوكس الشراء والخيارات */
form.product-form {
    background-color: var(--color-cream) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-lg) !important;
    padding: 20px !important;
}
form.product-form .form-label,
form.product-form .form-label b {
    color: var(--color-dark) !important;
    font-weight: 700 !important;
}

/* عداد الكمية */
salla-quantity-input.s-quantity-input,
.s-quantity-input-container {
    border: 1px solid var(--color-border) !important;
    background-color: var(--color-border) !important;
    border-radius: var(--radius-md) !important;
}
.s-quantity-input-button {
    background-color: var(--color-border) !important;
    color: var(--color-dark) !important;
}
.s-quantity-input-button:hover {
    background-color: var(--color-primary) !important;
    color: var(--color-cream) !important;
}
.s-quantity-input-input {
    background-color: var(--color-cream) !important;
    color: var(--color-dark) !important;
    font-weight: 700 !important;
}

/* أزرار الشراء */
.s-sticky-product-bar .s-button-solid,
.sticky-product-bar__btn .s-button-solid,
.s-button-element.s-button-primary,
.s-add-product-button-main .s-button-element {
    background-color: var(--color-primary) !important;
    border: 2px solid var(--color-primary) !important;
    color: var(--color-cream) !important;
    border-radius: var(--radius-md) !important;
    font-weight: 700 !important;
}
.s-sticky-product-bar .s-button-solid:hover,
.sticky-product-bar__btn .s-button-solid:hover,
.s-button-element.s-button-primary:hover,
.s-add-product-button-main .s-button-element:hover {
    background-color: var(--color-secondary) !important;
    border-color: var(--color-secondary) !important;
}

/* =============================================
   6️⃣ الفوتر
   (تم دمج جميع تعريفات الفوتر المكررة في مكان واحد)
   ============================================= */
footer[data-testid="store-footer"],
.store-footer,
.store-footer__inner {
    background-color: var(--color-cream) !important;
}
.store-footer {
    border-top: 2px solid var(--color-border) !important;
}
.store-footer h3 {
    color: var(--color-secondary) !important;
    font-weight: 700 !important;
}
.store-footer a,
.store-footer p,
.store-footer span,
.store-footer .s-contacts-item {
    color: var(--color-dark) !important;
}
.store-footer a:hover {
    color: var(--color-primary) !important;
}
.store-footer .container.grid > div:nth-child(2),
.store-footer .copyright-text {
    display: none !important;
}

/* ستارة تغطية مؤقتة أثناء تحميل صف الأيقونات/الروابط بالفوتر لمنع "وميض" الأبيض */
.store-footer .flex.gap-4 {
    position: relative !important;
    overflow: hidden !important;
    min-height: 55px !important;
}
.store-footer .flex.gap-4::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background: var(--color-cream) !important;
    z-index: 10 !important;
    border-radius: 4px !important;
}

/* =============================================
   7️⃣ مسار التنقل وواتساب
   ============================================= */
.s-breadcrumb-wrapper,
.s-breadcrumb-wrapper a,
.s-breadcrumb-item {
    color: var(--color-secondary) !important;
}
.s-breadcrumb-arrow svg {
    fill: var(--color-secondary) !important;
}

.wa-s-n {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%) !important;
    color: var(--color-cream) !important;
}


/* =============================================
   8️⃣ مربع Tabby و Tamara
   ============================================= */
tamara-widget, #tabbyPromo {
    display: block !important;
    background: var(--color-cream) !important; /* كان #fff، تم تصحيحه ليطابق باقي التصميم */
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: var(--shadow-sm) !important;
    padding: 12px 16px !important;
    margin: 8px 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
}
tamara-widget *, #tabbyPromo * { color: var(--color-dark) !important; }
tamara-widget .tamara-widget__number-of-installments-node,
tamara-widget .tamara-summary-widget__amount,
#tabbyPromo strong, #tabbyPromo b { color: var(--color-primary) !important; font-weight: 700 !important; }
tamara-widget svg { fill: var(--color-primary) !important; }
tamara-widget .tamara-inline-badge, tamara-widget img { filter: none !important; }
tamara-widget .tamara-inline-learn-more-link, tamara-widget a, #tabbyPromo a {
    color: var(--color-primary) !important;
    font-weight: 700 !important;
    text-decoration: underline !important;
}
tamara-widget .tamara-inline-learn-more-link:hover, tamara-widget a:hover, #tabbyPromo a:hover { color: var(--color-secondary) !important; }
------------------------------------------
------------------------------------------

/* =========================================
   MIX D - CUSTOM CSS
   ========================================= */


/* -----------------------------------------
   1. وصف "من نحن" في الفوتر - أسود
   ----------------------------------------- */

.store-footer .max-w-sm p,
.store-footer .max-w-sm p strong {
    color: #000000 !important;
}


/* -----------------------------------------
   2. مربع البحث - كريمي
   ----------------------------------------- */

.header-search .s-search-input {
    background-color: #F5EFE3 !important;
    color: #000000 !important;
    border: none !important;
}

.header-search .s-search-input::placeholder {
    color: #555555 !important;
    opacity: 1 !important;
}

.header-search .s-search-icon svg {
    fill: #000000 !important;
}


/* -----------------------------------------
   3. الفوتر على الموبايل
   تقليل المسافات بين الأقسام
   ----------------------------------------- */

@media (max-width: 767px) {

    /* المسافة الأساسية بين أقسام الفوتر */
    .store-footer__inner .container {
        row-gap: 8px !important;
    }

    /* إلغاء الـ margins الكبيرة */
    .store-footer__inner .container > div {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    /* عناوين الفوتر */
    .store-footer__inner h3 {
        margin-bottom: 5px !important;
    }

    /* وصف من نحن */
    .store-footer__inner .max-w-sm {
        margin-bottom: 8px !important;
    }

    /* قسم التواصل */
    .store-footer__inner .s-contacts {
        margin-top: 0 !important;
        margin-bottom: 5px !important;
    }

    /* السوشيال ميديا */
    .store-footer__inner .contact-social {
        margin-top: 5px !important;
    }

    /* تقليل المسافة داخل قائمة التواصل */
    .store-footer__inner .s-contacts-list {
        margin-top: 0 !important;
    }

    /* الجزء السفلي من الفوتر */
    .store-footer > .container {
        margin-top: 0 !important;
        padding-top: 8px !important;
        padding-bottom: 8px !important;
    }

}