/**
 * Version Badge Styles - Complete Edition
 * التنسيقات الكاملة لشارة الإصدار مع جميع الأنماط والتأثيرات
 */

/* ============================================
   النمط الأساسي الافتراضي
   ============================================ */

.version-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 25px;
  padding: 12px 20px;
  background: linear-gradient(135deg, #f5f7fa 0%, #e8ecf1 100%);
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  font-family: "Inter", "Poppins", sans-serif;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

/* Subtle animated background */
.version-badge::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    45deg,
    transparent 30%,
    rgba(255, 255, 255, 0.3) 50%,
    transparent 70%
  );
  animation: shimmer 3s infinite;
  pointer-events: none;
}

@keyframes shimmer {
  0% {
    transform: translateX(-100%) translateY(-100%) rotate(45deg);
  }
  100% {
    transform: translateX(100%) translateY(100%) rotate(45deg);
  }
}

/* Hover effect */
.version-badge:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(76, 175, 80, 0.15);
  border-color: rgba(76, 175, 80, 0.2);
}

/* Icon */
.version-badge i {
  font-size: 0.95rem;
  color: #4caf50;
  z-index: 1;
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.6;
  }
}

/* Label */
.version-label {
  font-size: 0.85rem;
  font-weight: 500;
  color: #666;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  z-index: 1;
}

/* Version Number */
.version-number {
  font-size: 0.95rem;
  font-weight: 700;
  color: #2e7d32;
  background: linear-gradient(135deg, #4caf50, #2e7d32);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: 0.5px;
  z-index: 1;
  font-family: "Courier New", monospace;
}

/* Dark Mode Support للنمط الأساسي */
.dark-mode .version-badge {
  background: linear-gradient(135deg, #2a2a2a 0%, #1f1f1f 100%);
  border-color: rgba(255, 255, 255, 0.08);
}

.dark-mode .version-badge:hover {
  box-shadow: 0 4px 12px rgba(76, 175, 80, 0.25);
  border-color: rgba(76, 175, 80, 0.3);
}

.dark-mode .version-label {
  color: #aaa;
}

.dark-mode .version-number {
  color: #66bb6a;
  background: linear-gradient(135deg, #81c784, #66bb6a);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.dark-mode .version-badge i {
  color: #66bb6a;
}

/* ============================================
   النمط 1: بسيط وشفاف (موصى به)
   ============================================ */

.version-badge.simple {
  background: transparent !important;
  border: none !important;
  padding: 10px 0 !important;
  gap: 8px;
}

.version-badge.simple::before {
  display: none !important;
}

.version-badge.simple:hover {
  transform: none !important;
  box-shadow: none !important;
}

.version-badge.simple i {
  color: #4caf50;
  font-size: 1rem;
  animation: none;
}

.version-badge.simple .version-label {
  font-size: 0.75rem;
  color: #999;
  text-transform: uppercase;
  font-weight: 500;
}

.version-badge.simple .version-number {
  font-size: 0.9rem;
  font-weight: 700;
  color: #4caf50;
  background: none !important;
  -webkit-text-fill-color: #4caf50 !important;
  font-family: "Courier New", monospace;
}

.dark-mode .version-badge.simple i {
  color: #66bb6a;
}

.dark-mode .version-badge.simple .version-label {
  color: #aaa;
}

.dark-mode .version-badge.simple .version-number {
  color: #66bb6a;
  -webkit-text-fill-color: #66bb6a !important;
}

/* ============================================
   النمط 2: مع إطار ملون
   ============================================ */

.version-badge.bordered {
  background: transparent;
  border: 2px solid #4caf50 !important;
  padding: 8px 16px;
  border-radius: 20px;
}

.version-badge.bordered::before {
  display: none;
}

.version-badge.bordered:hover {
  background: rgba(76, 175, 80, 0.05);
  border-color: #2e7d32 !important;
  box-shadow: 0 0 10px rgba(76, 175, 80, 0.2);
}

.version-badge.bordered i {
  color: #4caf50;
}

.version-badge.bordered .version-number {
  color: #4caf50;
  background: none !important;
  -webkit-text-fill-color: #4caf50 !important;
}

.dark-mode .version-badge.bordered {
  border-color: #66bb6a !important;
}

.dark-mode .version-badge.bordered:hover {
  background: rgba(102, 187, 106, 0.1);
  border-color: #81c784 !important;
}

/* ============================================
   النمط 3: حبة دواء ملونة
   ============================================ */

.version-badge.pill-colored {
  background: linear-gradient(135deg, #4caf50, #45a049) !important;
  border-radius: 50px;
  padding: 10px 20px;
  border: none !important;
  box-shadow: 0 4px 15px rgba(76, 175, 80, 0.3);
}

.version-badge.pill-colored::before {
  display: none;
}

.version-badge.pill-colored:hover {
  box-shadow: 0 6px 20px rgba(76, 175, 80, 0.4);
  transform: translateY(-2px);
}

.version-badge.pill-colored i,
.version-badge.pill-colored .version-label,
.version-badge.pill-colored .version-number {
  color: white !important;
  background: none !important;
  -webkit-text-fill-color: white !important;
}

/* ============================================
   النمط 4: ذهبي فاخر
   ============================================ */

.version-badge.gold {
  background: linear-gradient(135deg, #ffd700, #ffa500) !important;
  border: 2px solid #b8860b !important;
  padding: 12px 24px;
  border-radius: 10px;
  box-shadow: 0 5px 20px rgba(255, 215, 0, 0.4);
}

.version-badge.gold::before {
  background: linear-gradient(
    45deg,
    transparent 30%,
    rgba(255, 255, 255, 0.6) 50%,
    transparent 70%
  );
}

.version-badge.gold:hover {
  box-shadow: 0 8px 25px rgba(255, 215, 0, 0.5);
}

.version-badge.gold i,
.version-badge.gold .version-label,
.version-badge.gold .version-number {
  color: #4a2c00 !important;
  background: none !important;
  -webkit-text-fill-color: #4a2c00 !important;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.5);
}

/* ============================================
   النمط 5: أزرق احترافي
   ============================================ */

.version-badge.blue-pro {
  background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%) !important;
  border: 1px solid #2196f3 !important;
  border-radius: 12px;
  padding: 10px 18px;
}

.version-badge.blue-pro i {
  color: #2196f3 !important;
}

.version-badge.blue-pro .version-label {
  color: #1976d2;
}

.version-badge.blue-pro .version-number {
  background: linear-gradient(135deg, #2196f3, #1976d2) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

.dark-mode .version-badge.blue-pro {
  background: linear-gradient(135deg, #1a237e 0%, #283593 100%) !important;
  border-color: #64b5f6 !important;
}

.dark-mode .version-badge.blue-pro i {
  color: #64b5f6 !important;
}

/* ============================================
   النمط 6: بنفسجي ملكي
   ============================================ */

.version-badge.purple-royal {
  background: linear-gradient(135deg, #f3e5f5 0%, #e1bee7 100%) !important;
  border: 1px solid #9c27b0 !important;
  border-radius: 12px;
  padding: 10px 18px;
}

.version-badge.purple-royal i {
  color: #9c27b0 !important;
}

.version-badge.purple-royal .version-number {
  background: linear-gradient(135deg, #9c27b0, #7b1fa2) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

.dark-mode .version-badge.purple-royal {
  background: linear-gradient(135deg, #4a148c 0%, #6a1b9a 100%) !important;
  border-color: #ba68c8 !important;
}

/* ============================================
   النمط 7: رمادي أنيق
   ============================================ */

.version-badge.gray-elegant {
  background: linear-gradient(135deg, #fafafa 0%, #eeeeee 100%) !important;
  border: 1px solid #bdbdbd !important;
  border-radius: 10px;
  padding: 10px 18px;
}

.version-badge.gray-elegant i {
  color: #616161 !important;
}

.version-badge.gray-elegant .version-label {
  color: #757575;
}

.version-badge.gray-elegant .version-number {
  background: linear-gradient(135deg, #616161, #424242) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

.dark-mode .version-badge.gray-elegant {
  background: linear-gradient(135deg, #424242 0%, #212121 100%) !important;
  border-color: #757575 !important;
}

/* ============================================
   النمط 8: زجاجي شفاف
   ============================================ */

.version-badge.glass-transparent {
  background: rgba(255, 255, 255, 0.15) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  border-radius: 15px;
  padding: 12px 20px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.version-badge.glass-transparent::before {
  display: none;
}

.version-badge.glass-transparent:hover {
  background: rgba(255, 255, 255, 0.25) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}

.dark-mode .version-badge.glass-transparent {
  background: rgba(0, 0, 0, 0.2) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* ============================================
   النمط 9: قوس قزح متحرك
   ============================================ */

.version-badge.rainbow {
  background: linear-gradient(
    135deg,
    #667eea 0%,
    #764ba2 25%,
    #f093fb 50%,
    #4facfe 75%,
    #00f2fe 100%
  ) !important;
  background-size: 200% 200%;
  border: none !important;
  padding: 12px 20px;
  border-radius: 15px;
  animation: rainbowShift 5s linear infinite;
}

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

.version-badge.rainbow::before {
  display: none;
}

.version-badge.rainbow i,
.version-badge.rainbow .version-label,
.version-badge.rainbow .version-number {
  color: white !important;
  background: none !important;
  -webkit-text-fill-color: white !important;
}

/* ============================================
   النمط 10: نيون متوهج
   ============================================ */

.version-badge.neon {
  background: #1a1a1a !important;
  border: 2px solid #00ff00 !important;
  padding: 10px 20px;
  border-radius: 10px;
  box-shadow:
    0 0 10px rgba(0, 255, 0, 0.5),
    0 0 20px rgba(0, 255, 0, 0.3),
    inset 0 0 10px rgba(0, 255, 0, 0.2);
  animation: neonPulse 2s ease-in-out infinite;
}

@keyframes neonPulse {
  0%,
  100% {
    box-shadow:
      0 0 10px rgba(0, 255, 0, 0.5),
      0 0 20px rgba(0, 255, 0, 0.3),
      inset 0 0 10px rgba(0, 255, 0, 0.2);
  }
  50% {
    box-shadow:
      0 0 20px rgba(0, 255, 0, 0.8),
      0 0 30px rgba(0, 255, 0, 0.5),
      inset 0 0 15px rgba(0, 255, 0, 0.3);
  }
}

.version-badge.neon::before {
  display: none;
}

.version-badge.neon i,
.version-badge.neon .version-label,
.version-badge.neon .version-number {
  color: #00ff00 !important;
  background: none !important;
  -webkit-text-fill-color: #00ff00 !important;
  text-shadow: 0 0 10px rgba(0, 255, 0, 0.8);
}

/* ============================================
   النمط 11: مدمج مع نافذة الاعتمادات
   ============================================ */

.version-badge.integrated,
.credits-modal .version-badge.integrated {
  background: var(--bg-tertiary) !important;
  border: 1px solid var(--border-color) !important;
  padding: 10px 16px;
  border-radius: 10px;
  margin-top: 20px;
}

.version-badge.integrated::before {
  display: none;
}

.version-badge.integrated i {
  color: var(--primary-color);
  animation: none;
}

.version-badge.integrated .version-label {
  color: var(--text-secondary);
}

.version-badge.integrated .version-number {
  color: var(--primary-color);
  background: none !important;
  -webkit-text-fill-color: var(--primary-color) !important;
  font-weight: 700;
}

.dark-mode .version-badge.integrated {
  background: var(--bg-elevated) !important;
  border-color: var(--border-color) !important;
}

/* ============================================
   تأثيرات إضافية
   ============================================ */

/* تأثير التوهج */
.version-badge.with-glow {
  animation: glowEffect 2s ease-in-out infinite;
}

@keyframes glowEffect {
  0%,
  100% {
    box-shadow: 0 0 10px rgba(76, 175, 80, 0.3);
  }
  50% {
    box-shadow:
      0 0 20px rgba(76, 175, 80, 0.6),
      0 0 30px rgba(76, 175, 80, 0.4);
  }
}

/* تأثير الارتداد */
.version-badge.with-bounce {
  animation: bounceEffect 2s ease-in-out infinite;
}

@keyframes bounceEffect {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
}

/* تأثير دوران الأيقونة */
.version-badge .icon-rotate {
  animation: iconRotate 10s linear infinite;
}

@keyframes iconRotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* إيقاف جميع التأثيرات */
.version-badge.no-effects,
.version-badge.no-effects * {
  animation: none !important;
  transition: none !important;
}

.version-badge.no-effects::before {
  display: none !important;
}

.version-badge.no-effects:hover {
  transform: none !important;
  box-shadow: none !important;
}

/* ============================================
   أنماط مدمجة ومضغوطة
   ============================================ */

.version-badge.compact {
  padding: 8px 16px;
  gap: 6px;
}

.version-badge.compact i {
  font-size: 0.8rem;
}

.version-badge.compact .version-label {
  font-size: 0.75rem;
}

.version-badge.compact .version-number {
  font-size: 0.85rem;
}

.version-badge.pill {
  border-radius: 50px;
  padding: 10px 18px;
}

/* ============================================
   Responsive Design
   ============================================ */

@media (max-width: 480px) {
  .version-badge {
    padding: 10px 16px;
    gap: 6px;
    margin-top: 20px;
  }

  .version-badge i {
    font-size: 0.85rem;
  }

  .version-label {
    font-size: 0.8rem;
  }

  .version-number {
    font-size: 0.9rem;
  }
}

/* ============================================
   حالات خاصة
   ============================================ */

/* حالة التحميل */
.version-badge.loading .version-number {
  background: linear-gradient(90deg, #e0e0e0 25%, #f0f0f0 50%, #e0e0e0 75%);
  background-size: 200% 100%;
  animation: loadingShimmer 1.5s infinite;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

@keyframes loadingShimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

.dark-mode .version-badge.loading .version-number {
  background: linear-gradient(90deg, #333 25%, #444 50%, #333 75%);
  background-size: 200% 100%;
}

/* حالة التحديث */
.version-badge.updated {
  animation: versionUpdate 0.6s ease-out;
}

@keyframes versionUpdate {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
    box-shadow: 0 0 20px rgba(76, 175, 80, 0.4);
  }
  100% {
    transform: scale(1);
  }
}