/* =========================================
   1. الهوية اللونية الأساسية للمتجر (Variables)
========================================= */
:root, body {
    --color-primary: #1d3756 !important;
    --color-primary-dark: #1a5078 !important;
    --color-primary-light: #ede8dc !important;
    --color-primary-reverse: #ffffff !important;
}

/* توحيد خلفية الموقع باللون الأبيض الدافئ (الفلورال) */
body {
    background-color: #fffaf0 !important;
}

/* تخصيص لون تظليل النصوص عند النسخ */
::selection {
    background-color: #1a5078 !important;
    color: #ffffff !important;
}
::-moz-selection {
    background-color: #1a5078 !important;
    color: #ffffff !important;
}

/* تخصيص شريط التمرير (Scrollbar) ليتوافق مع الهوية */
::-webkit-scrollbar {
    width: 10px !important;
}
::-webkit-scrollbar-track {
    background-color: #fffaf0 !important; 
}
::-webkit-scrollbar-thumb {
    background-color: #1a5078 !important; 
    border-radius: 10px !important;
    border: 2px solid #fffaf0 !important;
}
::-webkit-scrollbar-thumb:hover {
    background-color: #1d3756 !important; 
}

/* =======================================================
   2. رأس الصفحة (الهيدر) والقوائم العلوية
======================================================= */
/* الشريط المتحرك العلوي (Marquee) */
.s-block--bundle-marquee salla-custom-component {
    --bg-color: #ede8dc !important; 
    --text-color: #1d3756 !important; 
}

/* تلوين الخلفية وإضافة ظل ناعم */
.store-header, header, .top-navbar, .main-nav-container, #mainnav, .main-nav-container .inner {
    background-color: #fffaf0 !important; 
}

/* إضافة خط فاصل وإطار سفلي للهيدر */
.top-navbar {
    border-bottom: 1px solid rgba(237, 232, 220, 0.8) !important; 
}
.store-header {
    border-bottom: 2px solid #ede8dc !important;
    box-shadow: 0 4px 15px rgba(29, 55, 86, 0.05) !important;
}

/* توحيد ألوان النصوص والأيقونات في الهيدر */
header a, header i, header span, header button, header p,
.store-header a, .store-header i, .store-header span,
.main-nav-container a, .top-navbar span {
    color: #1d3756 !important;
    font-weight: bold !important;
}
a:hover {
    color: #1a5078 !important;
}

/* شكل جديد لروابط القائمة العلوية */
.main-nav-container a {
    border-radius: 8px !important; 
    padding: 6px 14px !important;
    transition: all 0.3s ease !important;
}
.main-nav-container a:hover {
    background-color: #ede8dc !important; 
    color: #1a5078 !important; 
}

/* تصميم شريط البحث بحواف بيضاوية */
header input[type="text"], header input[type="search"], .s-site-header input {
    background-color: #ffffff !important; 
    color: #1d3756 !important;
    border: 1px solid #ede8dc !important; 
    border-radius: 20px !important; 
    padding: 8px 18px !important;
    transition: border-color 0.3s ease !important;
}
header input[type="text"]:focus, header input[type="search"]:focus {
    border-color: #1a5078 !important; 
    outline: none !important;
}
header .search-wrap i, .s-site-header form i {
    color: #1a5078 !important;
}

/* =========================================
   تلوين شريط الهيدر العلوي (مربع البحث) باللون الأزرق
========================================= */
/* تغيير لون خلفية الشريط إلى الكحلي */
.top-navbar {
    background-color: #1d3756 !important; 
    border-bottom: none !important; 
}

/* تلوين النصوص والأيقونات (رقم الجوال، الإيميل، اللغة) باللون الأبيض لتناسب الخلفية الزرقاء */
.top-navbar a, 
.top-navbar i, 
.top-navbar span, 
.top-navbar p {
    color: #ffffff !important;
}

/* التأكد من بقاء مربع البحث باللون الأبيض مع نص كحلي ليبرز بشكل جميل */
.top-navbar input[type="text"], 
.top-navbar input[type="search"], 
header input[type="search"] {
    background-color: #ffffff !important;
    color: #1d3756 !important;
}

/* تغيير لون النص في شريط البحث (Placeholder) ليكون واضحاً */
.top-navbar input::placeholder,
header input[type="search"]::placeholder {
    color: #1a5078 !important;
    opacity: 0.7 !important;
}

/* تعديل لون الروابط عند تمرير الماوس عليها (Hover) في هذا الشريط */
.top-navbar a:hover,
.top-navbar span:hover {
    color: #ede8dc !important; 
}

/* إخفاء زر البحث بالكامل من الهيدر */
salla-search button,
.s-search-input-wrapper button,
.top-navbar .search-btn,
header form button[type="submit"],
header .search-wrap button,
.s-site-header form button.btn--search {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* إخفاء أي أيقونات (SVG أو i) مرتبطة بالبحث */
salla-search i,
salla-search svg,
.s-search-input-wrapper i,
.s-search-input-wrapper svg,
header form i,
header form svg,
.search-icon {
    display: none !important;
}

/* حواف مستديرة للهيدر من الأسفل */
.store-header, header, .main-nav-container, .main-nav-container .inner {
    border-radius: 0 0 25px 25px !important; 
}

/* توسيع الهيدر (زيادة العرض) */
.store-header, header, .main-nav-container, .s-site-header {
    padding-top: 0px !important;    
    padding-bottom: 0px !important; 
}
.store-header .inner, .main-nav-container .inner {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}
header .logo, .store-header .logo {
    max-height: 80px !important; 
}

/* =======================================================
   3. ذيل الصفحة (الفوتر)
======================================================= */
footer, .store-footer, .store-footer__inner {
    background-color: #fffaf0 !important;
    border-top: 1px solid #ede8dc !important; 
}
footer a, footer p, footer span, footer li, footer i, footer b,
.store-footer a, .store-footer p, .store-footer span,
.copyright-text, .copyright-text p, .copyright-text a {
    color: #1d3756 !important; 
}
footer h3, .store-footer h3 {
    color: #1a5078 !important;
    font-weight: bold;
}
footer a:hover, .store-footer a:hover, .copyright-text a:hover {
    color: #1a5078 !important;
}

/* =======================================================
   4. تصميم بطاقات المنتجات
======================================================= */
/* الهيكل العام للبطاقة */
salla-product-card, .s-product-card, .s-product-card-entry, .product-box, .product-item {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    height: 100% !important;
    background-color: #ffffff !important; 
    border: 1px solid #ede8dc !important; 
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: 0 4px 10px rgba(29, 55, 86, 0.05) !important; 
    transition: transform 0.4s ease, box-shadow 0.4s ease, background-color 0.4s ease, border-color 0.4s ease !important;
    will-change: transform;
}

/* ضبط صورة المنتج وتأثير التقريب (Zoom) */
.s-product-card-image, salla-product-card .s-product-card-image-wrap,
.s-product-card-entry .s-product-card-image, .s-product-card-image > a {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    position: relative !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background-color: transparent !important;
    display: block !important;
}
.s-product-card-image img, salla-product-card .s-product-card-image-wrap img,
.s-product-card-entry .s-product-card-image img {
    width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    border-radius: 12px 12px 0 0 !important;
    transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

/* ألوان نصوص البطاقة الأساسية */
.product-title, .product-title a, .product-item h3, .s-product-title, .s-product-card-title, .s-product-card-title a {
    color: #1d3756 !important; 
    font-weight: bold;
}
.product-price, .price, .s-product-price, .s-product-card-price {
    color: #1a5078 !important; 
    font-weight: 900;
}

/* ملصقات التخفيضات الأنيقة */
.s-badge, .s-product-card-promotion-title, .promotion-title {
    background-color: #1d3756 !important; 
    color: #ede8dc !important; 
    border-radius: 20px !important;
    padding: 6px 12px !important;
    font-weight: bold !important;
    font-size: 13px !important;
    box-shadow: 0 4px 10px rgba(29, 55, 86, 0.2) !important;
    border: 1px solid #ede8dc !important;
}

/* تأثيرات التمرير (Hover) لبطاقات المنتجات - مفعلة فقط على أجهزة الكمبيوتر */
@media (hover: hover) and (pointer: fine) {
    salla-product-card:hover, .s-product-card:hover, .product-box:hover, .product-item:hover, .s-product-card-entry:hover {
        background-color: #fffaf0 !important; 
        border-color: #1a5078 !important; 
        transform: translateY(-5px) !important;
        box-shadow: 0 10px 20px rgba(29, 55, 86, 0.12) !important;
    }
    salla-product-card:hover .s-product-card-image img, 
    .s-product-card:hover .s-product-card-image img,
    .s-product-card-entry:hover .s-product-card-image img {
        transform: scale(1.08) !important; 
    }
    salla-product-card:hover .s-product-card-content,
    .s-product-card:hover .s-product-card-content,
    .s-product-card-entry:hover .s-product-card-content {
        background-color: #fffaf0 !important; 
    }
    salla-product-card:hover .s-product-card-title,
    salla-product-card:hover .s-product-card-title a,
    salla-product-card:hover .s-product-card-price,
    .s-product-card:hover h3 {
        color: #1d3756 !important; 
    }
}

/* أزرار إضافة للسلة داخل البطاقة */
.product-box .btn, .product-item .btn-add-to-cart, .s-button-wrap button, .s-button-element,
.s-product-card-content-footer button, .s-product-card-content-footer .s-button-wrap .s-button-btn {
    background-color: #ede8dc !important;
    color: #1d3756 !important;
    border: none !important;
    border-radius: 8px !important;
    font-weight: bold !important;
    transition: all 0.3s ease !important;
}
@media (hover: hover) and (pointer: fine) {
    .product-box .btn:hover, .product-item .btn-add-to-cart:hover, .s-button-wrap button:hover, .s-button-element:hover,
    .s-product-card-content-footer button:hover, .s-product-card-content-footer .s-button-wrap .s-button-btn:hover,
    salla-product-card:hover .s-product-card-content-footer button,
    salla-product-card:hover .s-product-card-content-footer .s-button-btn {
        background-color: #1d3756 !important;
        color: #ffffff !important; 
    }
}

/* =======================================================
   5. تصميم قسم مميزات المتجر (Store Features)
======================================================= */
.s-block--features__item {
    background-color: #ffffff !important; 
    border: 1px solid #ede8dc !important; 
    border-radius: 12px !important; 
    padding: 20px !important;
    box-shadow: 0 4px 10px rgba(29, 55, 86, 0.03) !important; 
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease !important;
}
@media (hover: hover) and (pointer: fine) {
    .s-block--features__item:hover {
        border-color: #1a5078 !important; 
        transform: translateY(-4px) !important; 
        box-shadow: 0 8px 15px rgba(29, 55, 86, 0.08) !important; 
    }
}
.s-block--features__item .feature-icon {
    background-color: #fffaf0 !important; 
    border: 1px solid #ede8dc !important; 
}
.s-block--features__item .feature-icon i,
.s-block--features__item .feature-icon svg {
    color: #1a5078 !important; 
}
.s-block--features__item h2 {
    color: #1d3756 !important; 
    font-weight: bold !important;
}
.s-block--features__item p {
    color: #1a5078 !important; 
}

/* =======================================================
   6. التأثيرات العامة (الظهور الناعم والخطوط)
======================================================= */
.s-block {
    animation: fadeIn 0.5s ease-in-out; /* تم تقليل المدة لظهور أسرع */
    margin-bottom: 60px !important; 
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}
h1, h2, h3, .product-title {
    line-height: 1.4 !important;
}

/* =======================================================
   7. زر الواتساب العائم
======================================================= */
a[href*="wa.me"] {
    position: fixed !important;
    bottom: 25px !important;
    right: 25px !important;
    z-index: 99999 !important;
    width: 48px !important;  /* تم التصحيح ليكون مناسباً للنقر باللمس */
    height: 48px !important; /* تم التصحيح ليكون مناسباً للنقر باللمس */
    background-color: #25d366 !important; 
    border-radius: 50% !important;
    box-shadow: 0 4px 12px rgba(37, 211, 102, 0.25) !important;
    opacity: 0.85 !important; 
    transition: transform 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease !important;
    color: transparent !important;
    font-size: 0 !important;
    background-size: 28px !important; 
    background-repeat: no-repeat !important;
    background-position: center !important;
    animation: whatsappPulse 2s infinite;
}
@media (hover: hover) and (pointer: fine) {
    a[href*="wa.me"]:hover {
        transform: scale(1.1) translateY(-3px) !important;
        background-color: #1ebe5d !important; 
        box-shadow: 0 6px 15px rgba(37, 211, 102, 0.5) !important;
        animation: none; 
        opacity: 1 !important; 
    }
}
@keyframes whatsappPulse {
    0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.4); }
    70% { box-shadow: 0 0 0 12px rgba(37, 211, 102, 0); }
    100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}

/* =======================================================
   8. استجابة شاشات الجوال (Responsive)
======================================================= */
@media (max-width: 768px) {
    .s-product-card-content { padding: 10px 8px !important; }
    .s-product-card-title, .s-product-card-title a { font-size: 13px !important; }
    .s-product-card-price { font-size: 14px !important; }
    .s-product-card-content-footer { padding: 0 8px 10px 8px !important; }
    .s-product-card-content-footer button,
    .s-product-card-content-footer .s-button-wrap .s-button-btn {
        font-size: 13px !important;
        padding: 8px 5px !important;
    }
    /* إزالة تأثير النقر الخفيف لعدم تعليق البطاقة */
    salla-product-card:active, .s-product-card:active {
        transform: none !important;
    }
    a[href*="wa.me"] {
        width: 48px !important;  
        height: 48px !important;
        background-size: 28px !important;
        bottom: 20px !important;
        right: 20px !important;
        opacity: 0.90 !important;
    }
}
/* =======================================================
   9. تصميم وتلوين فلتر المنتجات (Product Filters)
======================================================= */

/* الهيكل الأساسي لقائمة الفلترة وإضافة الظل والحدود */
salla-filters, .s-filters, .filters-wrapper, .s-filter {
    background-color: #1d3756 !important;
    border: 1px solid #ede8dc !important;
    border-radius: 12px !important;
    padding: 15px !important;
    box-shadow: 0 4px 10px rgba(29, 55, 86, 0.05) !important;
    margin-bottom: 20px !important;
}

/* عناوين أقسام الفلتر (مثل: السعر، الماركة، التصنيف) */
salla-filters h3, .s-filter-title, .filter-title, .s-filter > header h3 {
    color: #1d3756 !important;
    font-weight: bold !important;
    border-bottom: 1px dashed #ede8dc !important;
    padding-bottom: 10px !important;
    margin-bottom: 15px !important;
    font-size: 16px !important;
}

/* نصوص خيارات الفلترة */
salla-filters label, .s-filters label, .filter-item label, .s-checkbox__label {
    color: #1a5078 !important;
    font-size: 14px !important;
    transition: color 0.3s ease, font-weight 0.3s ease !important;
    cursor: pointer !important;
}

/* تأثير التمرير (Hover) على خيارات الفلتر - لأجهزة الكمبيوتر */
@media (hover: hover) and (pointer: fine) {
    salla-filters label:hover, .s-filters label:hover, .s-checkbox:hover .s-checkbox__label {
        color: #1d3756 !important;
        font-weight: bold !important;
    }
}

/* تخصيص مربعات الاختيار (Checkboxes) لتأخذ اللون الكحلي عند التحديد */
salla-filters input[type="checkbox"], .s-filters input[type="checkbox"], .s-checkbox__input {
    accent-color: #1d3756 !important; 
    width: 18px !important;
    height: 18px !important;
    border: 1px solid #ede8dc !important;
    border-radius: 4px !important;
    cursor: pointer !important;
}

/* =========================================
   تخصيص شريط تمرير السعر (Price Range Slider)
========================================= */
/* لون الشريط الأساسي (الخلفية) */
.noUi-target, .s-price-range .noUi-target {
    background-color: #ede8dc !important;
    border: none !important;
    border-radius: 8px !important;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.05) !important;
}

/* لون الجزء النشط من الشريط (المسافة المحددة) */
.noUi-connect, .s-price-range .noUi-connect {
    background-color: #1d3756 !important;
}

/* أزرار السحب (المقابض) في شريط السعر */
.noUi-handle, .s-price-range .noUi-handle {
    border: 3px solid #1d3756 !important;
    background-color: #ffffff !important;
    box-shadow: 0 2px 5px rgba(29, 55, 86, 0.2) !important;
    border-radius: 50% !important;
    cursor: grab !important;
}
.noUi-handle:active {
    cursor: grabbing !important;
    background-color: #fffaf0 !important;
    transform: scale(1.1) !important;
}

/* =========================================
   أزرار الفلتر (تطبيق / مسح الفرز)
========================================= */
/* زر "تطبيق" أو "عرض النتائج" */
salla-filters .btn--apply, .s-filters .btn-primary, .s-button-btn {
    background-color: #1d3756 !important;
    color: #ffffff !important;
    border-radius: 8px !important;
    border: none !important;
    font-weight: bold !important;
    transition: all 0.3s ease !important;
}

/* زر "مسح" أو "إلغاء" */
salla-filters .btn--clear, .s-filters .btn-outline {
    background-color: #fffaf0 !important;
    color: #1a5078 !important;
    border: 1px solid #ede8dc !important;
    border-radius: 8px !important;
    font-weight: bold !important;
    transition: all 0.3s ease !important;
}

@media (hover: hover) and (pointer: fine) {
    salla-filters .btn--apply:hover, .s-filters .btn-primary:hover {
        background-color: #1a5078 !important;
        box-shadow: 0 4px 10px rgba(26, 80, 120, 0.3) !important;
    }
    salla-filters .btn--clear:hover, .s-filters .btn-outline:hover {
        background-color: #ede8dc !important;
        color: #1d3756 !important;
        border-color: #1a5078 !important;
    }
}

/* =========================================
   إخفاء مربع البحث من داخل الفلاتر
========================================= */
salla-filters input[type="search"],
salla-filters input[type="text"][placeholder*="بحث"],
.s-filter-search,
.s-filters-search,
salla-filters .s-input-wrapper {
    display: none !important;
}

/* =======================================================
   1. الهوية اللونية والأساسيات
======================================================= */
:root {
    --color-primary: #1d3756 !important;
    --color-primary-dark: #1a5078 !important;
    --color-primary-light: #ede8dc !important;
}
body { background-color: #fffaf0 !important; }

/* =======================================================
   2. إضافة ميزة: زر الإضافة للسلة النبضي (Pulse Effect)
======================================================= */
.btn-add-to-cart, .s-button-btn {
    position: relative !important;
    overflow: hidden !important;
}
.btn-add-to-cart:not(:hover) {
    animation: pulse-soft 3s infinite !important;
}
@keyframes pulse-soft {
    0% { box-shadow: 0 0 0 0 rgba(29, 55, 86, 0.2); }
    70% { box-shadow: 0 0 0 6px rgba(29, 55, 86, 0); }
    100% { box-shadow: 0 0 0 0 rgba(29, 55, 86, 0); }
}

/* =======================================================
   3. إضافة ميزة: تعتيم الخلفية عند فتح القوائم الجانبية
======================================================= */
/* عند فتح القائمة الجانبية أو السلة، يتم تعتيم المحتوى خلفها */
.s-sidebar-is-open::after, .s-cart-is-open::after {
    content: '' !important;
    position: fixed !important;
    top: 0 !important; left: 0 !important;
    width: 100% !important; height: 100% !important;
    background: rgba(29, 55, 86, 0.4) !important;
    backdrop-filter: blur(3px) !important;
    z-index: 998 !important;
}

/* =======================================================
   4. إضافة ميزة: توحيد أيقونات طرق الدفع (Grayscale Style)
======================================================= */
.payment-methods img, .footer-payment-icons img {
    filter: grayscale(1) opacity(0.7) !important;
    transition: all 0.3s ease !important;
}
.payment-methods img:hover {
    filter: grayscale(0) opacity(1) !important;
}

/* =======================================================
   5. تحسينات عامة (تطبيق ما تم إنجازه سابقاً)
======================================================= */
/* زر الواتساب */
a[href*="wa.me"] {
    width: 32px !important; height: 30px !important;
    background-color: #ede8dc !important;
    border-radius: 50% !important;
    box-shadow: 0 4px 12px rgba(37, 211, 102, 0.25) !important;
    animation: whatsappPulse 2s infinite;
}

/* فلتر المنتجات */
salla-filters {
    background-color: #ffffff !important;
    border-radius: 12px !important;
    border: 1px solid #ede8dc !important;
}

/* إخفاء مربع البحث من الفلتر */
salla-filters .s-input-wrapper, 
salla-filters input[type="search"] {
    display: none !important;
}

/* التأثيرات الحركية للبطاقات */
@media (hover: hover) and (pointer: fine) {
    salla-product-card:hover {
        transform: translateY(-5px) !important;
        border-color: #1a5078 !important;
    }
}