/* ============================================================
   EID AL-FITR THEME - ثيم عيد الفطر المبارك
   Professional Edition V1.0 - Clean & Compatible
   الخضري ميديا - Elkhodary Media
   
   ✅ Features:
   - Homepage compatibility
   - Admin panel compatibility
   - No design conflicts
   - Responsive design
   - Performance optimized
   ============================================================ */

/* ============================================================
   HOMEPAGE ENHANCEMENTS - تحسينات الصفحة الرئيسية
   ============================================================ */

/* Header - تحسين خفيف للهيدر */
body:not(.admin-panel) #header {
    border-bottom: 3px solid rgba(139, 92, 246, 0.25);
}

/* Hero Section - تأثيرات خفيفة جداً */
body:not(.admin-panel) .hero .badge {
    border: 2px solid rgba(139, 92, 246, 0.2);
}

body:not(.admin-panel) .hero .badge .pulse {
    background: rgba(139, 92, 246, 0.7);
}

/* Buttons - تحسين الأزرار عند hover فقط */
body:not(.admin-panel) .btn-primary:hover,
body:not(.admin-panel) .btn-package-tiktok:hover {
    box-shadow: 0 6px 20px rgba(139, 92, 246, 0.25);
}

/* Pricing Cards - تحسين البطاقات */
body:not(.admin-panel) .package-card-tiktok {
    transition: all 0.3s ease;
}

body:not(.admin-panel) .package-card-tiktok:hover {
    border-color: rgba(139, 92, 246, 0.35);
    box-shadow: 0 8px 25px rgba(139, 92, 246, 0.12);
}

body:not(.admin-panel) .package-card-tiktok.popular {
    border-color: rgba(251, 191, 36, 0.4);
}

/* TikTok Badge */
body:not(.admin-panel) .tiktok-badge {
    border: 2px solid rgba(139, 92, 246, 0.15);
}

/* Coin Icon */
body:not(.admin-panel) .tiktok-coin-icon .coin-outer {
    box-shadow: 0 0 15px rgba(139, 92, 246, 0.15);
}

/* Features Section */
body:not(.admin-panel) .feature-card {
    transition: all 0.3s ease;
}

body:not(.admin-panel) .feature-card:hover {
    border-color: rgba(139, 92, 246, 0.25);
    box-shadow: 0 6px 20px rgba(139, 92, 246, 0.08);
}

body:not(.admin-panel) .feature-card .icon-box {
    box-shadow: 0 4px 15px rgba(139, 92, 246, 0.15);
}

/* Timeline */
body:not(.admin-panel) .timeline-item {
    border-left-color: rgba(139, 92, 246, 0.3);
}

body:not(.admin-panel) .timeline-number {
    box-shadow: 0 4px 15px rgba(139, 92, 246, 0.25);
}

/* Reviews */
body:not(.admin-panel) .review-card {
    transition: all 0.3s ease;
}

body:not(.admin-panel) .review-card:hover {
    border-color: rgba(139, 92, 246, 0.25);
    box-shadow: 0 6px 20px rgba(139, 92, 246, 0.08);
}

body:not(.admin-panel) .review-card .stars {
    color: #fbbf24 !important;
}

/* FAQ */
body:not(.admin-panel) .faq-item {
    transition: all 0.3s ease;
}

body:not(.admin-panel) .faq-item.active {
    border-color: rgba(139, 92, 246, 0.25);
    box-shadow: 0 4px 15px rgba(139, 92, 246, 0.08);
}

/* Footer */
body:not(.admin-panel) footer {
    border-top: 3px solid rgba(139, 92, 246, 0.25);
}

body:not(.admin-panel) .social-links a:hover {
    box-shadow: 0 4px 15px rgba(139, 92, 246, 0.25);
}

/* Floating WhatsApp */
body:not(.admin-panel) .floating-wa:hover {
    box-shadow: 0 6px 25px rgba(139, 92, 246, 0.35);
}

body:not(.admin-panel) .pulse-ring {
    border-color: rgba(139, 92, 246, 0.4);
}

/* Payment Strip */
body:not(.admin-panel) .payment-strip {
    border-top: 2px solid rgba(139, 92, 246, 0.15);
    border-bottom: 2px solid rgba(139, 92, 246, 0.15);
}

body:not(.admin-panel) .pay-logo-card:hover {
    border-color: rgba(139, 92, 246, 0.25);
    box-shadow: 0 4px 15px rgba(139, 92, 246, 0.08);
}

/* Ticker */
body:not(.admin-panel) .ticker-wrap {
    box-shadow: 0 2px 10px rgba(139, 92, 246, 0.15);
}

/* Section Headers */
body:not(.admin-panel) .section-header h2 {
    position: relative;
}

body:not(.admin-panel) .section-header h2::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, transparent, rgba(139, 92, 246, 0.6), transparent);
}

/* Mobile Sidebar */
body:not(.admin-panel) .mobile-sidebar {
    border-left: 3px solid rgba(139, 92, 246, 0.25);
}

body:not(.admin-panel) .sidebar-link.active {
    border-right: 3px solid rgba(139, 92, 246, 0.6);
}

body:not(.admin-panel) .sidebar-link:hover {
    background: rgba(139, 92, 246, 0.04);
}

/* Category Tabs */
body:not(.admin-panel) .cat-tab.active {
    border-bottom: 3px solid rgba(139, 92, 246, 0.6);
}

body:not(.admin-panel) .cat-tab:hover {
    background: rgba(139, 92, 246, 0.04);
}

/* Info Banner */
body:not(.admin-panel) .tiktok-info-banner {
    border-left: 4px solid rgba(139, 92, 246, 0.5);
}

/* ============================================================
   ADMIN PANEL ENHANCEMENTS - تحسينات لوحة التحكم
   ============================================================ */

/* Sidebar - تحسينات خفيفة جداً */
.admin-panel .sidebar {
    border-left: 2px solid rgba(139, 92, 246, 0.15);
}

/* Topbar */
.admin-panel .topbar {
    border-bottom: 2px solid rgba(139, 92, 246, 0.15);
}

/* Navigation Items */
.admin-panel .nav-item.active {
    border-right: 3px solid rgba(139, 92, 246, 0.6);
}

.admin-panel .nav-item:hover {
    background: rgba(139, 92, 246, 0.04);
}

/* Cards */
.admin-panel .card,
.admin-panel .stat-card {
    transition: all 0.3s ease;
}

.admin-panel .card:hover,
.admin-panel .stat-card:hover {
    border-color: rgba(139, 92, 246, 0.2);
    box-shadow: 0 4px 15px rgba(139, 92, 246, 0.08);
}

/* Buttons */
.admin-panel .btn-primary:hover {
    box-shadow: 0 4px 15px rgba(139, 92, 246, 0.25);
}

/* Page Header */
.admin-panel .page-header {
    border-bottom: 2px solid rgba(139, 92, 246, 0.15);
}

/* Notification Badge */
.admin-panel .notification-badge {
    box-shadow: 0 2px 8px rgba(139, 92, 246, 0.3);
}

/* Status Badges */
.admin-panel .badge-success,
.admin-panel .status-active {
    box-shadow: 0 2px 8px rgba(139, 92, 246, 0.2);
}

/* Scrollbar */
.admin-panel .scrollbar::-webkit-scrollbar-thumb {
    background: rgba(139, 92, 246, 0.3);
}

.admin-panel .scrollbar::-webkit-scrollbar-thumb:hover {
    background: rgba(139, 92, 246, 0.5);
}

/* ============================================================
   SUBTLE ANIMATIONS - أنيميشن خفيف
   ============================================================ */

@keyframes gentlePulse {
    0%, 100% { 
        transform: scale(1);
        opacity: 1;
    }
    50% { 
        transform: scale(1.015);
        opacity: 0.97;
    }
}

body:not(.admin-panel) .hero .badge .pulse {
    animation: gentlePulse 2.5s ease-in-out infinite;
}

/* ============================================================
   RESPONSIVE DESIGN - التصميم المتجاوب
   ============================================================ */

@media (max-width: 768px) {
    body:not(.admin-panel) .section-header h2::after {
        width: 40px;
    }
}

/* ============================================================
   PERFORMANCE OPTIMIZATION - تحسين الأداء
   ============================================================ */

/* تقليل الأنيميشن للأجهزة الضعيفة */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ============================================================
   PRINT STYLES - أنماط الطباعة
   ============================================================ */

@media print {
    .eid-fitr-decorations,
    .eid-fitr-message,
    .eid-fitr-top-banner {
        display: none !important;
    }
}