/* الخلفية والألوان الأساسية */
* {
    background-color: #1c142c !important;
    color: #ffffff !important;
}

body::before { content: ""; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #1c142c; z-index: 999998; animation: fadeOutLoader 0.5s forwards 2.5s; /* يختفي بعد 2.5 ثانية */ } body::after { content: ""; position: fixed; top: 50%; left: 50%; width: 150px; /* حجم الشعار */ height: 150px; background-image: url('https://cdn.salla.sa/cdn-cgi/image/fit=scale-down,width=400,height=400,onerror=redirect,format=auto/OqBRvY/9KgjZy3eAVK0bYdLGSHsBs0QxHNx8zGdJzpQ52eD.png'); background-size: contain; background-repeat: no-repeat; background-position: center; transform: translate(-50%, -50%); z-index: 999999; /* حركة النبض + حركة الاختفاء النهائي */ animation: oniPulse 2s infinite ease-in-out, fadeOutLoader 0.5s forwards 2.5s; } /* 3. حركة النبض (Pulse) */ @keyframes oniPulse { 0% { transform: translate(-50%, -50%) scale(0.9); opacity: 0.7; } 50% { transform: translate(-50%, -50%) scale(1.1); opacity: 1; } 100% { transform: translate(-50%, -50%) scale(0.9); opacity: 0.7; } } /* 4. حركة اختفاء شاشة التحميل بالكامل */ @keyframes fadeOutLoader { from { opacity: 1; visibility: visible; } to { opacity: 0; visibility: hidden; } }
/* منع التمرير أثناء ظهور شاشة التحميل */
body {
    overflow: hidden;
    animation: enableScroll 0s forwards 2.5s;
}

@keyframes enableScroll {
    to { overflow: auto; }
}


/* 2. تعديل البطاقة: إلغاء المربعات وجعلها خلفية شفافة تماماً */
.slide--cat-entry {
    background: transparent !important; 
    border: none !important;            
    box-shadow: none !important;       
    padding: 10px !important; 
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: all 0.4s ease-in-out;
}

/* 3. تكبير الصورة وتعديل شكلها */
.slide--cat-entry img {
    width: 100px !important;    /* تكبير العرض - تحكم بالرقم كما تحب */
    height: 100px !important;   /* تكبير الطول */
    object-fit: cover;
    border-radius: 20px !important; 
    border: 3px solid #00ffc8;
    box-shadow: 0 0 20px rgba(0, 255, 200, 0.4);
}

/* 4. تكبير النص ليناسب الحجم الجديد */
.slide--cat-entry h2 {
    font-size: 14px !important; /* تكبير الخط */
    margin-top: 10px !important;
}

/* 5. تعديل تأثير الحوم (Hover) */
.slide--cat-entry:hover {
    transform: scale(1.1); /* تكبير التصنيف بالكامل بدلاً من مجرد رفعه */
    background: transparent !important;
}



/* أزرار السلايدر */
[class*="s-slider-"] *,
.s-slider-button-icon svg,
.s-slider-button-icon path {
    background-color: transparent !important;
    fill: #00ffc8 !important;
}

button.s-slider-nav-arrow {
    background-color: rgba(0, 255, 200, 0.1) !important;
    border: 2px solid #00ffc8 !important;
    border-radius: 50% !important;
}

button.s-slider-nav-arrow:hover {
    background-color: #00ffc8 !important;
}

/* عداد السلة */
.s-cart-summary-count,
.badge,
[data-cart-count] {
    background-color: #00ffc8 !important;
    color: #1c142c !important;
    font-weight: bold !important;
}

/* أزرار الكمية */
.s-product-card-quantity-editor button,
.s-quantity-input__button {
    color: #00ffc8 !important;
    background-color: transparent !important;
    border: 1px solid #00ffc8 !important;
}

/* بطاقات المنتجات */
.s-product-card {
    background: #241a3e !important;
    border: 1px solid rgba(0, 255, 200, 0.2) !important;
    border-radius: 10px !important;
}

.s-product-card:hover {
    border-color: #00ffc8 !important;
}

.s-product-card-price {
    color: #00ffc8 !important;
    font-weight: bold !important;
}

/* الأزرار */
.s-button-primary,
.btn-primary,
button[type="submit"] {
    background: #00ffc8 !important;
    color: #00ffc8 !important;
    border: none !important;
    border-radius: 8px !important;
    font-weight: bold !important;
}

/* الهيدر */
.s-header {
    background-color: rgba(28, 20, 44, 0.95) !important;
    border-bottom: 1px solid rgba(0, 255, 200, 0.3) !important;
}

.s-header-menu a:hover {
    color: #00ffc8 !important;
}

/* حقول الإدخال */
input,
textarea,
select {
    background-color: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(0, 255, 200, 0.3) !important;
    border-radius: 6px !important;
}

input:focus,
textarea:focus,
select:focus {
    border-color: #00ffc8 !important;
    outline: none !important;
}

/* الروابط */
a {
    color: #00ffc8 !important;
    text-decoration: none !important;
}

/* الأيقونات */
svg,
i {
    color: #00ffc8 !important;
    fill: #00ffc8 !important;
}


/* أزرار السلايدر */
[class*="s-slider-"] *,
.s-slider-button-icon svg,
.s-slider-button-icon path {
    background-color: transparent !important;
    fill: #00ffc8 !important;
}

button.s-slider-nav-arrow {
    background-color: rgba(0, 255, 200, 0.1) !important;
    border: 2px solid #00ffc8 !important;
    border-radius: 50% !important;
}

button.s-slider-nav-arrow:hover {
    background-color: #00ffc8 !important;
}

/* عداد السلة */
.s-cart-summary-count,
.badge,
[data-cart-count] {
    color: #1c142c !important;
    font-weight: bold !important;
}

/* أزرار الكمية */
.s-product-card-quantity-editor button,
.s-quantity-input__button {
    color: #00ffc8 !important;
    background-color: transparent !important;
    border: 1px solid #00ffc8 !important;
}

/* بطاقات المنتجات */
.s-product-card {
    background: #241a3e !important;
    border: 1px solid rgba(0, 255, 200, 0.2) !important;
    border-radius: 10px !important;
}

.s-product-card:hover {
    border-color: #00ffc8 !important;
}

.s-product-card-price {
    color: #00ffc8 !important;
    font-weight: bold !important;
}

/* الأزرار */
.s-button-primary,
.btn-primary,
button[type="submit"] {
    background: #00ffc8 !important;
    color: #00ffc8 !important;
    border: none !important;
    border-radius: 8px !important;
    font-weight: bold !important;
}

/* الهيدر */
.s-header {
    background-color: rgba(28, 20, 44, 0.95) !important;
    border-bottom: 1px solid rgba(0, 255, 200, 0.3) !important;
}

.s-header-menu a:hover {
    color: #00ffc8 !important;
}

/* حقول الإدخال */
input,
textarea,
select {
    background-color: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(0, 255, 200, 0.3) !important;
    border-radius: 6px !important;
}

input:focus,
textarea:focus,
select:focus {
    border-color: #00ffc8 !important;
    outline: none !important;
}

/* الروابط */
a {
    color: #00ffc8 !important;
    text-decoration: none !important;
}

/* الأيقونات */
svg,
i {
    color: #00ffc8 !important;
    fill: #00ffc8 !important;
}


/* توحيد توزيع الأعمدة */
.grid.grid-cols-2, 
.md\:grid-cols-4 {
    display: grid !important;
    align-items: stretch !important; /* إجبار كل العناصر على نفس الطول */
    grid-auto-rows: 1fr !important; /* إجبار كل الصفوف على نفس الارتفاع */
}

/* للجوال: عمودين متساويين */
@media (max-width: 767px) {
    .grid.grid-cols-2 {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }
}

/* للكمبيوتر: 4 أعمدة متساوية */
@media (min-width: 768px) {
    .grid.grid-cols-2, .md\:grid-cols-4 {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 20px !important;
    }
}
/* توحيد مقاس الصندوق */
.brand-item {
    grid-row: span 1 !important; /* إلغاء تمدد الصناديق الطولية */
    grid-column: span 1 !important; /* إلغاء تمدد الصناديق العرضية */
    width: 100% !important;
    aspect-ratio: 16 / 9 !important; /* نسبة ثابتة تجعل الكل متشابه */
    height: auto !important;
    position: relative !important;
    overflow: hidden !important;
    border-radius: 12px !important;
    background: #1c142c !important;
    border: 2px solid rgba(0, 255, 200, 0.2) !important;
}

/* إجبار الصورة على مطابقة الصندوق */
.brand-item img {
    position: absolute !important; /* لتتحرك بحرية داخل الصندوق */
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important; /* توسيط الصورة بدقة */
    width: 101% !important; /* زيادة طفيفة لضمان عدم وجود حواف بيضاء */
    height: 101% !important;
    object-fit: cover !important; /* ملء الفراغ مع الحفاظ على النسبة */
    display: block !important;
    max-width: none !important; /* إلغاء قيود سلة الافتراضية */
}