/* ===========================
   Base Styles
=========================== */
body {
    font-family: 'Cairo', sans-serif;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    background-color: #f9fafb;
    color: #1f2937;
    transition: background-color 0.4s ease, color 0.4s ease;
}

html, body {
    width: 100%;
    overflow-x: hidden;
    position: relative;
}

img, iframe, video {
    max-width: 100%;
    height: auto;
    display: block;
}


/* ===========================
   Logo & Brand Animations
=========================== */
.logo {
    width: 90px;
    height: 90px;
    border-radius: 18px;
    background: linear-gradient(135deg, #ffd1e6, #dfe8ff);
    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-size: 36px;
    margin-bottom: 12px;
    animation: logoPulse 1.6s infinite alternate;
}

@keyframes logoPulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.12); }
    100% { transform: scale(1); }
}

.brand {
    font-weight: 700;
    font-size: 22px;
    margin-bottom: 10px;
    color: #333;
    letter-spacing: 0.6px;
    animation: textFade 1.5s infinite alternate;
}

@keyframes textFade {
    0%, 100% { opacity: .7; }
    50% { opacity: 1; }
}

/* ===========================
   Progress Bars & Spinner
=========================== */
.progress {
    width: 220px;
    max-width: 90%;
    height: 10px;
    background: #e9eef8;
    border-radius: 999px;
    margin: 12px auto;
    overflow: hidden;
}

.progress span {
    display: block;
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #7dd3fc, #7c3aed);
    border-radius: 999px;
    transition: width 0.3s ease;
}

.percent {
    font-size: 14px;
    color: #374151;
    margin-top: 6px;
}

.spinner {
    margin-top: 16px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 4px solid rgba(0,0,0,0.08);
    border-top-color: #7c3aed;
    animation: spin 1s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* ===========================
   Icon & Stat Animations
=========================== */
@keyframes bounceScale {
    0% { transform: scale(1) translateY(0); }
    30% { transform: scale(1.2) translateY(-5px); }
    50% { transform: scale(.95) translateY(2px); }
    70% { transform: scale(1.05) translateY(-2px); }
    100% { transform: scale(1) translateY(0); }
}

.stat-card:hover .icon-animate { animation: bounceScale 0.6s ease-in-out; }

/* ===========================
   Animations for Elements
=========================== */
.animate-fadeIn { animation: fadeInUp 0.4s ease forwards; }

@keyframes fadeIn { from { opacity:0; transform:translateY(-10px); } to { opacity:1; transform:translateY(0); } }

.animate-slideDown { animation: slideDown 0.4s ease forwards; }

@keyframes slideDown { from { opacity:0; max-height:0; } to { opacity:1; max-height:500px; } }

/* ===========================
   Back To Top Button
=========================== */
#backToTop {
    transition: opacity 0.4s ease, transform 0.3s ease;
}

#backToTop:hover { transform: translateY(-3px) scale(1.05); }

/* ===========================
   Dropdown & Menu
=========================== */
.dropdown:hover > .dropdown-menu { display: block; }
.dropdown-menu a { display: block; padding: .5rem 1rem; }

/* ===========================
   Responsive Styles
=========================== */
@media (max-width: 480px) {
    .logo { width: 70px; height: 70px; font-size: 28px; }
    .brand { font-size: 18px; }
    .progress { width: 160px; height: 8px; }
    .spinner { width: 28px; height: 28px; border-width: 3px; }
}

/* ===========================
   Dark Mode - كامل الموقع
=========================== */
body.dark-mode {
    background-color: #121826 !important;
    color: #f5f5f5 !important;
    transition: background-color 0.4s ease, color 0.4s ease;
}

/* ===========================
   العناصر الأساسية
=========================== */
body.dark-mode .bg-white,
body.dark-mode .bg-gray-50,
body.dark-mode .bg-gray-100,
body.dark-mode .bg-gray-200,
body.dark-mode .card,
body.dark-mode .container,
body.dark-mode section,
body.dark-mode footer,
body.dark-mode header,
body.dark-mode nav,
body.dark-mode .gallery-item,
body.dark-mode .video-item,
body.dark-mode .owner-card,
body.dark-mode .about-card {
    background-color: #121826 !important;
    color: #f5f5f5 !important;
    border-color: #2d3748 !important;
    box-shadow: none !important;
}

/* ===========================
   النصوص والعناوين
=========================== */
body.dark-mode h1, body.dark-mode h2, body.dark-mode h3, body.dark-mode h4,
body.dark-mode h5, body.dark-mode h6,
body.dark-mode p, body.dark-mode a,
body.dark-mode span, body.dark-mode strong,
body.dark-mode li {
    color: #f5f5f5 !important;
}

/* ===========================
   الأزرار
=========================== */
body.dark-mode button, 
body.dark-mode .btn, 
body.dark-mode a.btn {
    background-color: #bfa14a !important;
    color: #121826 !important;
    border: none !important;
    transition: background 0.3s, color 0.3s;
}

body.dark-mode button:hover, 
body.dark-mode .btn:hover, 
body.dark-mode a.btn:hover {
    background-color: #a7893d !important;
    color: #fff !important;
}

/* ===========================
   حقول الإدخال
=========================== */
body.dark-mode input, 
body.dark-mode textarea, 
body.dark-mode select {
    background-color: #1e293b !important;
    color: #f5f5f5 !important;
    border: 1px solid #374151 !important;
}

/* ===========================
   القوائم المنسدلة ووسائط الإعلام
=========================== */
body.dark-mode .dropdown-menu { 
    background-color: #1e293b !important; 
    color: #f5f5f5 !important; 
    border-color: #374151 !important; 
}
body.dark-mode img, 
body.dark-mode video { 
    filter: brightness(.95) contrast(1.05); 
}

/* ===========================
   Scrollbars
=========================== */
body.dark-mode ::-webkit-scrollbar { width: 10px; }
body.dark-mode ::-webkit-scrollbar-track { background: #0f172a; }
body.dark-mode ::-webkit-scrollbar-thumb { 
    background-color: #bfa14a; 
    border-radius: 10px; 
}

/* ===========================
   Dark Mode Toggle Button
=========================== */
#darkModeToggle {
    background-color: #bfa14a !important;
    color: #121826 !important;
    border: none;
    padding: 8px 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.3s, color 0.3s;
}
#darkModeToggle:hover { 
    background-color: #a7893d !important; 
    color: #fff !important; 
}

/* ===========================
   عناصر إضافية (اختيارية)
=========================== */
body.dark-mode .progress,
body.dark-mode .progress span {
    background: #2d3748 !important;
}

body.dark-mode .loader-inner {
    color: #f5f5f5 !important;
}

body.dark-mode #backToTop {
    background-color: #bfa14a !important;
    color: #121826 !important;
}
body.dark-mode #backToTop:hover {
    background-color: #a7893d !important;
    color: #fff !important;
}

/* ===========================
   Animations Adjustments
=========================== */
body.dark-mode .animate-fadeIn,
body.dark-mode .animate-slideDown {
    transition: all 0.6s ease !important;
}

/* ===========================
   Mobile Navigation & Cart Badge
=========================== */
#mobile-bar { transition: bottom 300ms cubic-bezier(.2,.8,.2,1), transform 180ms ease, box-shadow 200ms ease; }

.nav-item {
    color: inherit;
    text-decoration: none;
    border-radius: 8px;
    transition: transform 120ms ease;
}

.nav-item:active { transform: translateY(1px) scale(.98); }
.nav-item:focus { outline: 2px solid rgba(37,99,235,.15); outline-offset: 2px; }

.nav-item .text-xs { line-height: 1; }

.nav-item-active { color: #2563EB !important; font-weight: 600; }
.nav-item-active i { filter: drop-shadow(0 2px 6px rgba(37,99,235,.12)); }

#mobile-bar.above-footer { box-shadow: 0 -8px 24px rgba(15,23,42,.08); transform: translateY(-6px); }

#cart-badge.show { display: inline-block; }

.highlight {
    display: block;
    height: 4px;
    width: 24px;
    border-radius: 9999px;
    margin-top: 6px;
    opacity: 0;
}

/* Reduce Motion */
@media (prefers-reduced-motion: reduce) {
    #mobile-bar { transition: none; }
}