/* css/style.css - Ultra Premium Cyber-Fitness Theme */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;800;900&display=swap');

html { scroll-behavior: smooth; }
body { 
    font-family: 'Cairo', sans-serif; 
    background-color: #010308; /* أسود عميق جداً */
    color: #ffffff; 
    overflow-x: hidden; 
    display: flex; 
    flex-direction: column; 
    min-height: 100vh; 
}

/* الألوان الأساسية والمتدرجة */
.electric-blue { color: #00d2ff; }
.bg-electric { background-color: #00d2ff; }
.text-gradient {
    background: linear-gradient(135deg, #00d2ff 0%, #3a7bd5 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.text-gradient-fire {
    background: linear-gradient(135deg, #ff416c 0%, #ff4b2b 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* تأثيرات الزجاج الخارقة (Ultra Glassmorphism) */
.glass-effect { 
    background: rgba(1, 3, 8, 0.65); 
    backdrop-filter: blur(24px); 
    -webkit-backdrop-filter: blur(24px); 
    border-bottom: 1px solid rgba(255, 255, 255, 0.08); 
}
.glass-card { 
    background: linear-gradient(145deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.01) 100%); 
    backdrop-filter: blur(16px); 
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.08); 
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
}

/* حركة الكروت الفخمة */
.product-card { 
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1); 
    overflow: hidden; 
    transform: translateZ(0);
}
.product-card:hover { 
    transform: translateY(-10px) scale(1.02); 
    border-color: rgba(0, 210, 255, 0.4) !important; 
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.8), 0 0 30px -5px rgba(0, 210, 255, 0.25); 
    z-index: 10;
}
.product-img-bg { 
    background-size: cover; 
    background-position: center; 
    background-repeat: no-repeat; 
    transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1), filter 0.7s; 
}
.product-card:hover .product-img-bg { 
    transform: scale(1.1); 
    filter: brightness(1.1) contrast(1.1);
}

/* أزرار بمظهر حي (Dynamic Buttons) */
.btn-dynamic {
    position: relative;
    overflow: hidden;
    z-index: 1;
    transition: all 0.3s ease;
}
.btn-dynamic::before {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    transition: left 0.5s ease;
    z-index: -1;
}
.btn-dynamic:hover::before { left: 100%; }
.btn-dynamic:hover { transform: translateY(-2px); box-shadow: 0 10px 20px rgba(0, 210, 255, 0.4); }

/* إضاءات الأورورا المتحركة في الخلفية (Background Blobs) */
@keyframes blob {
    0% { transform: translate(0px, 0px) scale(1); }
    33% { transform: translate(30px, -50px) scale(1.1); }
    66% { transform: translate(-20px, 20px) scale(0.9); }
    100% { transform: translate(0px, 0px) scale(1); }
}
.animate-blob { animation: blob 10s infinite alternate; }
.animation-delay-2000 { animation-delay: 2s; }
.animation-delay-4000 { animation-delay: 4s; }

/* نبض الكابتن الذكي */
@keyframes aiPulseGlow {
    0% { box-shadow: 0 0 0 0 rgba(0, 210, 255, 0.5); }
    70% { box-shadow: 0 0 20px 15px rgba(0, 210, 255, 0); }
    100% { box-shadow: 0 0 0 0 rgba(0, 210, 255, 0); }
}
.ai-pulse { animation: aiPulseGlow 2.5s infinite cubic-bezier(0.66, 0, 0, 1); }

/* السكرول بار */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #010308; }
::-webkit-scrollbar-thumb { background: linear-gradient(to bottom, #00d2ff, #3a7bd5); border-radius: 10px; }
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* التابات */
.tab-active { 
    border-bottom: 3px solid #00d2ff; 
    color: #00d2ff; 
    background: radial-gradient(circle at bottom, rgba(0,210,255,0.15) 0%, transparent 70%); 
}
.tab-inactive { border-bottom: 3px solid transparent; color: #6b7280; }

/* أنيميشن الظهور السلس */
.fade-in { animation: smoothFade 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards; }
@keyframes smoothFade { 
    from { opacity: 0; transform: translateY(20px); filter: blur(5px); } 
    to { opacity: 1; transform: translateY(0); filter: blur(0); } 
}

/* السلايدر */
.carousel-slide { transition: all 1s cubic-bezier(0.4, 0, 0.2, 1); }
.slide-hidden { opacity: 0; transform: scale(1.05); z-index: 0; pointer-events: none; }
.slide-visible { opacity: 1; transform: scale(1); z-index: 10; pointer-events: auto; }

/* تأثير الشحن (Skeleton) */
.skeleton {
    background: linear-gradient(90deg, #0f172a 25%, #1e293b 50%, #0f172a 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite ease-in-out;
}
@keyframes skeleton-loading { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* تعديلات الإدخال (Inputs) */
input:focus, select:focus, textarea:focus { outline: none; border-color: #00d2ff; box-shadow: 0 0 0 3px rgba(0, 210, 255, 0.15); transition: all 0.3s ease; }
input[type="file"]::file-selector-button { background: linear-gradient(135deg, #00d2ff 0%, #3a7bd5 100%); color: #000; font-weight: bold; padding: 0.5rem 1.5rem; border-radius: 999px; border: none; margin-inline-end: 1rem; cursor: pointer; transition: all 0.3s; }
input[type="file"]::file-selector-button:hover { transform: scale(1.05); box-shadow: 0 0 15px rgba(0, 210, 255, 0.4); }

.modal-overlay { background-color: rgba(1, 3, 8, 0.85); backdrop-filter: blur(12px); }