/* ═══════════════════════════════════════════════════════════
   العرب الماسي — ملف CSS النهائي الموحّد
   يُلصق كاملاً في خانة CSS المخصص (احذف القديم كله أولاً)
   ───────────────────────────────────────────────────────────
   المحتوى:
   1) شبكة التصنيفات (جوال 2 / تابلت 3 / سطح المكتب 4) + منع التداخل
   2) تحسين أداء الجوال (Rendering)
   3) زر السلة 3D — بطاقات المنتجات (الرئيسية/التصنيفات)
   4) زر السلة 3D — صفحة المنتج (.btn-add-to-cart المؤكد)
   ═══════════════════════════════════════════════════════════ */


/* ═══════════════ 1) شبكة التصنيفات ═══════════════ */

/* احتواء القسم — يمنع تسرب الأيقونات للأقسام الأخرى */
.home-categories-section {
position: relative !important;
z-index: 1 !important;
overflow: hidden !important;
padding-bottom: 10px !important;
}

/* تحويل السلايدر لشبكة ثابتة */
.home-categories-section .categories-slider,
.home-categories-section .slick-track,
.home-categories-section .slick-list {
display: flex !important;
flex-wrap: wrap !important;
width: 100% !important;
transform: none !important;
height: auto !important;
justify-content: center !important;
gap: 0 !important;
}

/* ⛔ الإصلاح الجوهري: إخفاء الشرائح المستنسخة (سبب الصور المتداخلة) */
.home-categories-section .slick-cloned {
display: none !important;
}

/* الشرائح — جوال: تصنيفين بالصف */
.home-categories-section .slick-slide,
.home-categories-section .cat-col {
width: 50% !important;
max-width: 50% !important;
flex: 0 0 50% !important;
float: none !important;
display: block !important;
position: relative !important;
height: auto !important;
padding: 6px !important;
box-sizing: border-box !important;
margin: 0 0 12px 0 !important;
}

.home-categories-section .slick-slide > div {
width: 100% !important;
height: auto !important;
}

/* إخفاء أسهم ونقاط السلايدر */
.home-categories-section .slick-arrow,
.home-categories-section .slick-prev,
.home-categories-section .slick-next,
.home-categories-section .slick-dots {
display: none !important;
}

/* الأيقونة البيضاوية */
.home-categories-section .category-item {
text-align: center !important;
margin: 0 auto !important;
position: relative !important;
}

.home-categories-section .category-item a {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
text-decoration: none !important;
}

.home-categories-section .category-item img {
width: 150px !important;
height: 200px !important;
max-width: 100% !important;
object-fit: cover !important;
border-radius: 50% / 40% !important;
box-shadow: 0 6px 18px rgba(0,0,0,0.18) !important;
background: #fff !important;
display: block !important;
margin: 0 auto 12px auto !important;
transition: transform .25s ease !important;
}

.home-categories-section .category-item a:hover img {
transform: scale(1.04) !important;
}

/* اسم التصنيف */
.home-categories-section .category-item h3 {
font-size: 17px !important;
font-weight: 800 !important;
line-height: 1.4 !important;
color: #222 !important;
margin: 6px auto 0 auto !important;
padding: 0 4px !important;
text-align: center !important;
max-width: 170px !important;
min-height: 48px !important;
display: -webkit-box !important;
-webkit-line-clamp: 2 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
background: transparent !important;
border: none !important;
letter-spacing: 0.2px !important;
word-wrap: break-word !important;
white-space: normal !important;
}

/* تابلت: 3 تصنيفات بالصف */
@media (min-width: 768px) and (max-width: 991px) {
.home-categories-section .slick-slide,
.home-categories-section .cat-col {
width: 33.333% !important;
max-width: 33.333% !important;
flex: 0 0 33.333% !important;
padding: 8px !important;
}
.home-categories-section .category-item img {
width: 160px !important;
height: 210px !important;
}
}

/* سطح المكتب: 4 تصنيفات بالصف */
@media (min-width: 992px) {
.home-categories-section .slick-slide,
.home-categories-section .cat-col {
width: 25% !important;
max-width: 25% !important;
flex: 0 0 25% !important;
padding: 10px !important;
}
.home-categories-section .category-item img {
width: 170px !important;
height: 225px !important;
}
.home-categories-section .category-item h3 {
font-size: 18px !important;
max-width: 210px !important;
}
}


/* ═══════════════ 2) تحسين أداء الجوال ═══════════════ */
@media (max-width: 767px) {

/* المتصفح ما يرسم الأقسام تحت الطية إلا عند الوصول لها */
.home-products-section,
.products-slider-section,
.home-banner-section,
footer,
.footer {
content-visibility: auto;
contain-intrinsic-size: auto 500px;
}

/* ظلال أخف على الجوال = رسم أسرع وتمرير أنعم */
.home-categories-section .category-item img {
box-shadow: 0 3px 10px rgba(0,0,0,0.12) !important;
}

/* تعطيل تأثير التكبير على اللمس */
.home-categories-section .category-item a:hover img {
transform: none !important;
}

/* إزالة وميض اللمس الافتراضي */
a, button {
-webkit-tap-highlight-color: transparent;
}
}


/* ═══════════════ 3) زر السلة 3D — بطاقات المنتجات ═══════════════ */

/* جسم الزر */
html body .product-card .btn:not([href*="auth"]),
html body .product-card a.btn:not([href*="auth"]),
html body .product-card button:not([class*="wish"]):not([class*="heart"]),
html body .product-card [class*="add-to-cart"],
html body [class*="card-product"] .btn:not([href*="auth"]),
html body [class*="product-card"] a[class*="btn"]:not([href*="auth"]) {
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 8px !important;
width: 100% !important;
min-height: 46px !important;
padding: 12px 14px !important;
background: linear-gradient(180deg, #4A2020 0%, #2C1010 55%, #1B0707 100%) !important;
color: #FFFFFF !important;
-webkit-text-fill-color: #FFFFFF !important;
border: none !important;
border-radius: 10px !important;
font-size: 16.5px !important;
font-weight: 800 !important;
opacity: 1 !important;
box-shadow: 0 4px 0 #140404,
0 7px 14px rgba(44,16,16,0.35),
inset 0 1px 0 rgba(255,255,255,0.18) !important;
text-shadow: 0 1px 2px rgba(0,0,0,0.35) !important;
transition: transform 0.12s ease, box-shadow 0.12s ease !important;
}

/* النص داخل الزر */
html body .product-card .btn *:not(img),
html body .product-card a.btn *:not(img),
html body .product-card button *:not(img),
html body .product-card [class*="add-to-cart"] *:not(img) {
color: #FFFFFF !important;
-webkit-text-fill-color: #FFFFFF !important;
opacity: 1 !important;
font-weight: 800 !important;
}

/* أيقونة السلة البيضاء */
html body .product-card .btn:not([href*="auth"])::before,
html body .product-card a.btn:not([href*="auth"])::before,
html body .product-card button:not([class*="wish"]):not([class*="heart"])::before {
content: "" !important;
width: 19px !important;
height: 19px !important;
flex: 0 0 19px !important;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23FFFFFF'%3E%3Cpath d='M7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zM1 2v2h2l3.6 7.59-1.35 2.45c-.16.28-.25.61-.25.96 0 1.1.9 2 2 2h12v-2H7.42c-.14 0-.25-.11-.25-.25l.03-.12.9-1.63h7.45c.75 0 1.41-.41 1.75-1.03l3.58-6.49c.08-.14.12-.31.12-.48 0-.55-.45-1-1-1H5.21l-.94-2H1zm16 16c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2z'/%3E%3C/svg%3E") center/contain no-repeat !important;
}

/* الانغراز عند الضغط */
html body .product-card .btn:active,
html body .product-card a.btn:active,
html body .product-card button:active {
transform: translateY(3px) !important;
box-shadow: 0 1px 0 #140404,
0 3px 6px rgba(44,16,16,0.3) !important;
}

/* اللمس — لمعة ذهبية */
html body .product-card .btn:hover,
html body .product-card .btn:focus,
html body .product-card a.btn:hover,
html body .product-card a.btn:focus {
color: #FFFFFF !important;
-webkit-text-fill-color: #FFFFFF !important;
box-shadow: 0 4px 0 #140404,
0 8px 18px rgba(184,146,42,0.35) !important;
}


/* ═══════════════ 4) زر السلة 3D — صفحة المنتج ═══════════════ */
/* الكلاس الحقيقي المؤكد عبر Inspect: .btn-add-to-cart */

html body .btn-add-to-cart {
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 8px !important;
width: 100% !important;
min-height: 52px !important;
padding: 13px 16px !important;
background: linear-gradient(180deg, #4A2020 0%, #2C1010 55%, #1B0707 100%) !important;
background-color: #2C1010 !important;
color: #FFFFFF !important;
-webkit-text-fill-color: #FFFFFF !important;
border: none !important;
border-radius: 10px !important;
font-size: 17px !important;
font-weight: 800 !important;
opacity: 1 !important;
visibility: visible !important;
box-shadow: 0 4px 0 #140404,
0 7px 14px rgba(44,16,16,0.35),
inset 0 1px 0 rgba(255,255,255,0.18) !important;
text-shadow: 0 1px 2px rgba(0,0,0,0.35) !important;
transition: transform 0.12s ease, box-shadow 0.12s ease !important;
}

/* النص وكل ما بداخله — أبيض ناصع (يتغلب على متغير الثيم الباهت) */
html body .btn-add-to-cart,
html body .btn-add-to-cart * {
color: #FFFFFF !important;
-webkit-text-fill-color: #FFFFFF !important;
opacity: 1 !important;
font-weight: 800 !important;
}

/* أيقونة الثيم (صورة أو SVG) → أبيض */
html body .btn-add-to-cart img,
html body .btn-add-to-cart svg {
filter: brightness(0) invert(1) !important;
opacity: 1 !important;
width: 20px !important;
height: 20px !important;
}
html body .btn-add-to-cart svg path {
fill: #FFFFFF !important;
}

/* حالة المعطّل — مرئية وواضحة */
html body .btn-add-to-cart:disabled,
html body .btn-add-to-cart.disabled,
html body .btn-add-to-cart[disabled] {
opacity: 0.8 !important;
background: linear-gradient(180deg, #5A3535 0%, #3C2020 100%) !important;
color: #FFFFFF !important;
-webkit-text-fill-color: #FFFFFF !important;
cursor: not-allowed !important;
box-shadow: 0 2px 0 #140404 !important;
}

/* الانغراز عند الضغط */
html body .btn-add-to-cart:active {
transform: translateY(3px) !important;
box-shadow: 0 1px 0 #140404,
0 3px 6px rgba(44,16,16,0.3) !important;
}

/* اللمعة الذهبية */
html body .btn-add-to-cart:hover,
html body .btn-add-to-cart:focus {
color: #FFFFFF !important;
-webkit-text-fill-color: #FFFFFF !important;
box-shadow: 0 4px 0 #140404,
0 8px 18px rgba(184,146,42,0.4) !important;
}
/* ═══════════════════════════════════════════════════
   إصلاح زر تسجيل الدخول — القائمة الجانبية للجوال
   يُلصق في نهاية ملف CSS بعد الكود السابق للزر
   ═══════════════════════════════════════════════════ */

/* السلطة القصوى: نستهدف الزر داخل كل حاويات القائمة المحتملة */
html body .ic-menu #login-btn,
html body .slide-menu #login-btn,
html body .side-menu #login-btn,
html body [class*="menu-wrapper"] #login-btn,
html body [class*="mobile-menu"] #login-btn,
html body #login-btn.btn.btn-dark.account-btn {
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 10px !important;
width: calc(100% - 30px) !important;
max-width: 320px !important;
min-height: 48px !important;
padding: 12px 20px !important;
margin: 12px auto !important;

background: rgba(245, 240, 232, 0.98) !important;
background-color: #F5F0E8 !important;
border: 1.5px solid #B8922A !important;
border-radius: 10px !important;

color: #2C1010 !important;
-webkit-text-fill-color: #2C1010 !important;
font-size: 15.5px !important;
font-weight: 700 !important;
letter-spacing: 0.3px !important;

opacity: 1 !important;
visibility: visible !important;
box-shadow: 0 2px 8px rgba(44,16,16,0.1),
inset 0 1px 0 rgba(255,255,255,0.6) !important;
}

/* النص داخل الزر — سلطة قصوى ضد متغيرات الثيم */
html body .ic-menu #login-btn *,
html body .slide-menu #login-btn *,
html body .side-menu #login-btn *,
html body [class*="menu-wrapper"] #login-btn *,
html body [class*="mobile-menu"] #login-btn *,
html body #login-btn.btn.btn-dark.account-btn * {
color: #2C1010 !important;
-webkit-text-fill-color: #2C1010 !important;
opacity: 1 !important;
font-weight: 700 !important;
}

/* أيقونة الحساب — عنابي غامق واضح */
html body .ic-menu #login-btn [class*="icon-account"],
html body .slide-menu #login-btn [class*="icon-account"],
html body [class*="menu-wrapper"] #login-btn [class*="icon-account"],
html body #login-btn.account-btn [class*="icon-account"],
html body #login-btn .icon-account-circle_black_24dp {
color: #2C1010 !important;
fill: #2C1010 !important;
opacity: 1 !important;
font-size: 20px !important;
width: 20px !important;
height: 20px !important;
filter: brightness(0) saturate(100%) invert(9%) sepia(41%) saturate(2618%) hue-rotate(340deg) brightness(94%) contrast(94%) !important;
}

/* التمرير/اللمس: عنابي ملكي كامل */
html body .ic-menu #login-btn:hover,
html body .ic-menu #login-btn:focus,
html body .ic-menu #login-btn:active,
html body [class*="menu-wrapper"] #login-btn:hover,
html body [class*="menu-wrapper"] #login-btn:active,
html body #login-btn.btn.btn-dark.account-btn:hover,
html body #login-btn.btn.btn-dark.account-btn:active {
background: linear-gradient(180deg, #4A2020 0%, #2C1010 100%) !important;
background-color: #2C1010 !important;
border-color: #B8922A !important;
color: #FFFFFF !important;
-webkit-text-fill-color: #FFFFFF !important;
box-shadow: 0 4px 12px rgba(184,146,42,0.35) !important;
}

html body .ic-menu #login-btn:hover *,
html body .ic-menu #login-btn:active *,
html body #login-btn.btn.btn-dark.account-btn:hover *,
html body #login-btn.btn.btn-dark.account-btn:active * {
color: #FFFFFF !important;
-webkit-text-fill-color: #FFFFFF !important;
}

html body .ic-menu #login-btn:hover [class*="icon-account"],
html body .ic-menu #login-btn:active [class*="icon-account"] {
filter: brightness(0) saturate(100%) invert(70%) sepia(45%) saturate(614%) hue-rotate(2deg) brightness(88%) contrast(88%) !important;
}
/* ═══════════════════════════════════════════════════
   أزرار السلة الرئيسية — العرب الماسي
   ───────────────────────────────────────────────────
   المؤكد من Inspect:
   - إتمام الطلب: a.btn.btn-primary.btn-lg.btn-block
   - إرسال الكوبون: button.btn.btn-primary داخل .coupon-form
   ───────────────────────────────────────────────────
   الفلسفة:
   • ذهبي 3D لإتمام الطلب = ذروة بصرية عند لحظة الحسم
   • أخضر ثقة لإرسال الكوبون = تفعيل نفسي للتوفير
   • استثناء Apple Pay وأي زر buy-now
   يُلصق في نهاية ملف CSS الحالي
   ═══════════════════════════════════════════════════ */


/* ═══════════════ 1) زر إتمام الطلب — ذهبي 3D ═══════════════ */

html body a.btn-primary.btn-lg.btn-block,
html body .btn-primary.btn-lg.btn-block:not(.btn-buy-now):not([class*="apple"]),
html body a[href*="/auth/login"][href*="checkout"].btn-primary,
html body a[onclick*="checkout"].btn-primary {
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 10px !important;
width: 100% !important;
min-height: 56px !important;
padding: 16px 20px !important;

/* تدرج ذهبي فاخر — من فاتح لغامق يعطي عمق 3D */
background: linear-gradient(180deg, #D4AF37 0%, #B8922A 55%, #8B6D1F 100%) !important;
background-color: #B8922A !important;

/* نص عنابي غامق على الذهبي = تباين ملكي */
color: #2C1010 !important;
-webkit-text-fill-color: #2C1010 !important;

border: 1.5px solid #8B6D1F !important;
border-radius: 12px !important;
font-size: 18px !important;
font-weight: 900 !important;
letter-spacing: 0.5px !important;

opacity: 1 !important;
visibility: visible !important;

/* ظلال 3D: قاعدة غامقة + توهج ذهبي + لمعة داخلية */
box-shadow: 0 4px 0 #6B5418,
0 8px 20px rgba(184,146,42,0.45),
inset 0 1px 0 rgba(255,255,255,0.4),
inset 0 -2px 0 rgba(107,84,24,0.3) !important;
text-shadow: 0 1px 0 rgba(255,255,255,0.35) !important;

transition: transform 0.15s ease, box-shadow 0.15s ease !important;
cursor: pointer !important;
text-decoration: none !important;
}

/* النص وكل ما بداخله — عنابي غامق ناصع */
html body a.btn-primary.btn-lg.btn-block,
html body a.btn-primary.btn-lg.btn-block *,
html body .btn-primary.btn-lg.btn-block:not(.btn-buy-now) *,
html body a[onclick*="checkout"].btn-primary * {
color: #2C1010 !important;
-webkit-text-fill-color: #2C1010 !important;
opacity: 1 !important;
font-weight: 900 !important;
}

/* اللمس/التمرير — توهج ذهبي أقوى + رفعة خفيفة */
html body a.btn-primary.btn-lg.btn-block:hover,
html body a.btn-primary.btn-lg.btn-block:focus,
html body .btn-primary.btn-lg.btn-block:not(.btn-buy-now):hover,
html body a[onclick*="checkout"].btn-primary:hover {
background: linear-gradient(180deg, #E5C047 0%, #C9A032 55%, #9C7822 100%) !important;
color: #2C1010 !important;
-webkit-text-fill-color: #2C1010 !important;
transform: translateY(-1px) !important;
box-shadow: 0 5px 0 #6B5418,
0 12px 28px rgba(184,146,42,0.6),
inset 0 1px 0 rgba(255,255,255,0.5) !important;
}

/* الانغراز عند الضغط — لحظة "الحسم" النفسية */
html body a.btn-primary.btn-lg.btn-block:active,
html body .btn-primary.btn-lg.btn-block:not(.btn-buy-now):active {
transform: translateY(3px) !important;
box-shadow: 0 1px 0 #6B5418,
0 3px 8px rgba(184,146,42,0.4),
inset 0 1px 3px rgba(107,84,24,0.2) !important;
}


/* ═══════════════ 2) زر إرسال الكوبون — أخضر ثقة ═══════════════ */

html body .coupon-form button.btn-primary,
html body .coupon-form button[onclick*="sendCoupon"],
html body .coupon-form .btn.btn-primary,
html body form .coupon-form button[type="button"].btn-primary {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 6px !important;
min-width: 90px !important;
min-height: 36px !important;
padding: 8px 18px !important;

/* تدرج أخضر ثقة — لون النجاح والتوفير في CRO */
background: linear-gradient(180deg, #2E9E5C 0%, #1F7A44 55%, #155A32 100%) !important;
background-color: #1F7A44 !important;

color: #FFFFFF !important;
-webkit-text-fill-color: #FFFFFF !important;

border: 1px solid #155A32 !important;
border-radius: 8px !important;
font-size: 14.5px !important;
font-weight: 800 !important;
letter-spacing: 0.3px !important;

opacity: 1 !important;
visibility: visible !important;
height: auto !important;

box-shadow: 0 3px 0 #0F4023,
0 5px 12px rgba(31,122,68,0.35),
inset 0 1px 0 rgba(255,255,255,0.25) !important;
text-shadow: 0 1px 1px rgba(0,0,0,0.25) !important;

transition: transform 0.12s ease, box-shadow 0.12s ease !important;
cursor: pointer !important;
}

/* نص الزر — أبيض ناصع */
html body .coupon-form button.btn-primary,
html body .coupon-form button.btn-primary *,
html body .coupon-form .btn.btn-primary *,
html body form .coupon-form button[type="button"].btn-primary * {
color: #FFFFFF !important;
-webkit-text-fill-color: #FFFFFF !important;
opacity: 1 !important;
font-weight: 800 !important;
}

/* التمرير — أخضر أفتح + توهج */
html body .coupon-form button.btn-primary:hover,
html body .coupon-form button.btn-primary:focus,
html body .coupon-form .btn.btn-primary:hover {
background: linear-gradient(180deg, #38B26B 0%, #248A4E 55%, #196938 100%) !important;
color: #FFFFFF !important;
-webkit-text-fill-color: #FFFFFF !important;
box-shadow: 0 3px 0 #0F4023,
0 7px 16px rgba(46,158,92,0.5),
inset 0 1px 0 rgba(255,255,255,0.3) !important;
}

/* الضغط */
html body .coupon-form button.btn-primary:active,
html body .coupon-form .btn.btn-primary:active {
transform: translateY(2px) !important;
box-shadow: 0 1px 0 #0F4023,
0 2px 5px rgba(31,122,68,0.3) !important;
}


/* ═══════════════ 3) استثناءات حماية ═══════════════ */

/* Apple Pay — لا يُلمس مطلقاً */
html body .btn-buy-now,
html body [class*="apple-pay"],
html body [id*="apple-pay"] {
background: initial !important;
}