/* ══════════════════════════════════════════════════════════
   eid.css — تنسيق قسم فعالية العيد بالكامل
   (متجر الحلوى: العناصر الموسمية، السكنات، البانرات، الإيموجي،
   عجلة الحظ، وأنيميشن تبويب الحلوى بالقائمة الجانبية)
═══════════════════════════════════════════════════════════ */

/* ──────────────────────────────────────────────────────────
   1) زر "!" وبادج الندرة على كروت السكن/البانر/الإيموجي
────────────────────────────────────────────────────────── */
.skin-info-btn {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
  transition: background 0.2s, transform 0.2s;
}
.skin-info-btn:hover {
  background: rgba(255, 255, 255, 0.25);
  transform: scale(1.15);
}
.skin-rarity-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  font-size: 9px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 20px;
  letter-spacing: 0.3px;
  z-index: 2;
  direction: ltr;
  white-space: nowrap;
}

/* ──────────────────────────────────────────────────────────
   2) قائمة البانرات (Seasonal Banners)
────────────────────────────────────────────────────────── */
.sweet-banners-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sweet-banner-item {
  list-style: none;
  padding: 8px;
  border-radius: 14px;
  text-align: center;
}
.sweet-banner-item p {
  margin: 6px 0 8px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.85);
}

/* ──────────────────────────────────────────────────────────
   3) بادج "Owned" (سكن/بانر/إيموجي مملوك)
────────────────────────────────────────────────────────── */
.sweet-owned-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 14px;
  border-radius: 20px;
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e;
  border: 1px solid rgba(34, 197, 94, 0.4);
  font-size: 12px;
  font-weight: 800;
  direction: ltr;
  animation: sweetOwnedPop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.6);
}
@keyframes sweetOwnedPop {
  0% {
    transform: scale(0.7);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* ──────────────────────────────────────────────────────────
   4) لمسات بصرية: عناوين الأقسام + hover على الكروت + الأزرار
────────────────────────────────────────────────────────── */
.sweet-section-title {
  position: relative;
  padding-right: 12px;
  margin: 18px 0 12px;
  letter-spacing: 0.3px;
}
.sweet-section-title::before {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 70%;
  border-radius: 4px;
  background: linear-gradient(180deg, #f97316, #ec4899);
}
.sweet-shop-card,
.sweet-skin-item,
.sweet-banner-item {
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease, border-color 0.25s ease;
}
.sweet-shop-card:hover,
.sweet-skin-item:hover,
.sweet-banner-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.35);
}
.sweet-buy-btn {
  transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}
.sweet-buy-btn:hover {
  transform: translateY(-1px) scale(1.03);
  filter: brightness(1.08);
  box-shadow: 0 6px 16px rgba(236, 72, 153, 0.35);
}

/* ──────────────────────────────────────────────────────────
   5) (حُذف عمدًا) — تنسيق مقاس/تخطيط كرت السكن (#sweetSkinsList
   و .sweet-skin-item) موجود ومضبوط مسبقًا بـ Style.css بنظام
   float + زر بموضع absolute بالأسفل. أي تكرار هنا يكسر ذاك
   التصميم (تراكب الزر فوق الاسم، تغيّر العرض، إلخ). لا تُضِف شي
   هنا يلمس نفس السيلكتورات إلا لو قررت تنقل الملكية كاملة من
   Style.css وتحذفها هناك بالمقابل.
────────────────────────────────────────────────────────── */

/* ──────────────────────────────────────────────────────────
   6) زر "إغلاق" بنوافذ الوصف (سكن/بانر/إيموجي): حواف سوداء
      وبيضاء عند الضغط
────────────────────────────────────────────────────────── */
.sweet-popup-close-btn {
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}
.sweet-popup-close-btn:active {
  transform: scale(0.97);
  border: 2px solid #000 !important;
  box-shadow: 0 0 0 2px #fff;
}

/* ──────────────────────────────────────────────────────────
   7) أنيميشن "جديد" على تبويب الحلوى بالقائمة الجانبية
   (النبضة تُضاف فقط على <a> الداخلي، أبدًا على <li> نفسه -
   <li> هو العنصر المُراقَب لكلاس active بالـ JS، فلا يجوز تعديل
   كلاسه من نفس مكان المراقبة، تجنبًا لحلقة مراقبة↔تعديل لا نهائية)
────────────────────────────────────────────────────────── */
#shopNavSweet {
  position: relative;
}
#shopNavSweet a.sweet-nav-pulse {
  animation: sweetNavPulse 1.6s ease-in-out infinite;
  border-radius: 50%;
}
@keyframes sweetNavPulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(249, 115, 22, 0.55);
  }
  50% {
    box-shadow: 0 0 0 9px rgba(249, 115, 22, 0);
  }
}
.sweet-nav-badge {
  position: absolute;
  top: -7px;
  left: -10px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: linear-gradient(135deg, #f97316, #ec4899);
  color: #fff;
  font-size: 9px;
  font-weight: 900;
  padding: 3px 7px;
  border-radius: 20px;
  box-shadow: 0 2px 10px rgba(236, 72, 153, 0.6), 0 0 0 2px rgba(15, 23, 34, 0.9);
  letter-spacing: 0.2px;
  z-index: 5;
  pointer-events: none;
  white-space: nowrap;
  text-transform: uppercase;
}
/* البادج لازم يكون بعد <a> بترتيب الـ DOM عشان يصطاد السيلكتور التالي */
#shopNavSweet a.sweet-nav-pulse ~ .sweet-nav-badge {
  animation: sweetNavBadgeBounce 1.8s ease-in-out infinite;
}
@keyframes sweetNavBadgeBounce {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-2px);
  }
}

/* ──────────────────────────────────────────────────────────
   8) زر عجلة الحظ
────────────────────────────────────────────────────────── */
.wheel-spin-btn {
  width: 200px;
  padding: 13px 20px;
  border: none;
  border-radius: 50px;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.5px;
  cursor: pointer;
  color: #fff;
  background: linear-gradient(135deg, #f97316, #ec4899);
  transition: transform 0.2s, box-shadow 0.2s, opacity 0.2s;
  position: relative;
  overflow: hidden;
}
.wheel-spin-btn:not(:disabled):hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 8px 28px rgba(249, 115, 22, 0.5), 0 0 0 0 rgba(249, 115, 22, 0.3);
}
.wheel-spin-btn:not(:disabled):active {
  transform: scale(0.97);
}
.wheel-spin-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.wheel-spin-btn::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -60%;
  width: 40%;
  height: 200%;
  background: rgba(255, 255, 255, 0.25);
  transform: skewX(-20deg);
  transition: left 0.5s;
}
.wheel-spin-btn:not(:disabled):hover::before {
  left: 140%;
}
@keyframes wheelGlowPulse {
  0%,
  100% {
    opacity: 0.15;
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    opacity: 0.28;
    transform: translate(-50%, -50%) scale(1.04);
  }
}
@keyframes wheelWinBounce {
  0% {
    transform: scale(1);
  }
  30% {
    transform: scale(1.06);
  }
  60% {
    transform: scale(0.97);
  }
  100% {
    transform: scale(1);
  }
}
/* ── Lucky wheel spin button: tappable & contained on mobile ── */
@media (max-width: 480px) {
  .wheel-spin-btn {
    width: min(220px, 80%);
    font-size: 13px;
    padding: 12px 18px;
  }
}