/* =========================================
   تعديل الهيدر العلوي (فريم عائم دون المساس باللون الأصلي نهائياً)
   ========================================= */

/* جعل الهيدر بحواف دائرية وعائم فقط، دون تعديل الألوان */
html body .nav-header,
html body div.nav-header.da-bgg,
#app .nav-header {
  border-radius: 25px !important; /* حواف دائرية */
  margin: 25px auto !important; /* إبعاده عن الأطراف */
  width: 95% !important; 
  border: none !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25) !important; 
  
  /* تم إزالة أي كود يخص الخلفية (Background) ليأخذ لون المتجر الأصلي تلقائياً */
}

/* تمييز عنوان القسم (كيرنل أندرويد) ليكون بارزاً داخل الهيدر */
html body .nav-header h1,
html body .nav-header .category_title {
  color: #ffffff !important;
  background-color: rgba(0, 0, 0, 0.25) !important; /* ظل أسود شفاف خلف النص فقط للتمييز */
  padding: 10px 25px !important; 
  border-radius: 12px !important; 
  border: 1px solid rgba(255, 255, 255, 0.2) !important; 
  display: inline-block !important; 
  text-shadow: 0 2px 5px rgba(0,0,0,0.3) !important;
}

/* تلوين الروابط (الرئيسية > أكواد الأندرويد) لتبدو واضحة */
html body .s-breadcrumb-wrapper a,
html body .s-breadcrumb-item {
  color: rgba(255, 255, 255, 0.9) !important;
}

html body .s-breadcrumb-wrapper a:hover {
  color: #ffffff !important;
  font-weight: bold !important;
}

html body .s-breadcrumb-arrow svg {
  fill: rgba(255, 255, 255, 0.8) !important;
}
/* 1. إعداد الكروت لتأثير حركة التكبير الناعمة */
a[href*="/c1307319737"], a[href*="/c391239607"], a[href*="/c1771461563"],
a[href*="/c358193541"], a[href*="/c533281978"], a[href*="/c1730590854"],
a[href*="/c1555367297"], a[href*="/c781329538"], a[href*="/c53686865"],
a[href*="/c686327856"], a[href*="/c1739774789"], a[href*="/c583507482"],
a[href*="/c259368291"], a[href*="/c1533678110"], a[href*="/c366328900"],
a[href*="/c1001418808"], a[href*="/c1067504668"], a[href*="/c1142438247"] {
  display: block !important;
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

/* تجهيز الصورة الداخلية لتتغير ألوانها بنعومة */
a[href*="/c1307319737"] img, a[href*="/c391239607"] img, a[href*="/c1771461563"] img,
a[href*="/c358193541"] img, a[href*="/c533281978"] img, a[href*="/c1730590854"] img,
a[href*="/c1555367297"] img, a[href*="/c781329538"] img, a[href*="/c53686865"] img,
a[href*="/c686327856"] img, a[href*="/c1739774789"] img, a[href*="/c583507482"] img,
a[href*="/c259368291"] img, a[href*="/c1533678110"] img, a[href*="/c366328900"] img,
a[href*="/c1001418808"] img, a[href*="/c1067504668"] img, a[href*="/c1142438247"] img {
  transition: filter 0.3s ease !important;
}

/* 2. تكبير الكارت عند تمرير الماوس (Hover) */
a[href*="/c1307319737"]:hover, a[href*="/c391239607"]:hover, a[href*="/c1771461563"]:hover,
a[href*="/c358193541"]:hover, a[href*="/c533281978"]:hover, a[href*="/c1730590854"]:hover,
a[href*="/c1555367297"]:hover, a[href*="/c781329538"]:hover, a[href*="/c53686865"]:hover,
a[href*="/c686327856"]:hover, a[href*="/c1739774789"]:hover, a[href*="/c583507482"]:hover,
a[href*="/c259368291"]:hover, a[href*="/c1533678110"]:hover, a[href*="/c366328900"]:hover,
a[href*="/c1001418808"]:hover, a[href*="/c1067504668"]:hover, a[href*="/c1142438247"]:hover {
  transform: scale(1.06) !important;
  z-index: 10;
}

/* 3. تغيير لون الصورة (إضاءة وتشبع) وإضافة ظل يحترم حواف الصورة المقصوصة */
a[href*="/c1307319737"]:hover img, a[href*="/c391239607"]:hover img, a[href*="/c1771461563"]:hover img,
a[href*="/c358193541"]:hover img, a[href*="/c533281978"]:hover img, a[href*="/c1730590854"]:hover img,
a[href*="/c1555367297"]:hover img, a[href*="/c781329538"]:hover img, a[href*="/c53686865"]:hover img,
a[href*="/c686327856"]:hover img, a[href*="/c1739774789"]:hover img, a[href*="/c583507482"]:hover img,
a[href*="/c259368291"]:hover img, a[href*="/c1533678110"]:hover img, a[href*="/c366328900"]:hover img,
a[href*="/c1001418808"]:hover img, a[href*="/c1067504668"]:hover img, a[href*="/c1142438247"]:hover img {
  /* تأثير الفلتر: يزيد السطوع ويقوي الألوان ويضع ظلًا دقيقًا على حواف الصورة الشفافة */
  filter: drop-shadow(0 15px 25px rgba(249, 115, 22, 0.4)) brightness(1.2) saturate(1.4) !important;
}
/* ===== زر أضف للسلة - داكن وحركة خفيفة وارتفاع أعلى ===== */

@keyframes orangeShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.s-button-primary-outline,
.s-button-element.s-button-primary-outline {
  background: linear-gradient(270deg, #a33a00, #7a2800, #c45010, #8b3200);
  background-size: 300% 300%;
  animation: orangeShift 6s ease infinite;
  border: none !important;
  color: #ffffff !important;
  min-height: 42px !important;
  padding-top: 14px !important;
  padding-bottom: 14px !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.s-button-primary-outline:hover,
.s-button-element.s-button-primary-outline:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(163, 58, 0, 0.45);
}