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

html, body {
    width: 100%;
    overflow-x: hidden;
    margin: 0;
    padding: 0;
    position: relative;
    left: 0;
    right: 0;
}

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

/* ===========================
   Preloader
=========================== */
#preloader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: #fff;
    transition: opacity 0.8s ease, visibility 0.8s ease;
    pointer-events: auto;
}

#preloader.done {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: scale(1.02);
}

.loader-inner {
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    animation: fadeInUp 0.8s ease forwards;
    max-width: 90%;
}

/* Preloader Animations */
@keyframes fadeInUp {
    0% { opacity: 0; transform: translateY(20px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* ===========================
   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% { opacity: .7; }
    50% { opacity: 1; }
    100% { opacity: .7; }
}

/* ===========================
   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;
}

/* Dark Mode Elements */
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;
}

/* Dark Mode Text & Buttons */
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;
}

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

/* Inputs Dark Mode */
body.dark-mode input, body.dark-mode textarea, body.dark-mode select {
    background-color: #1e293b !important;
    color: #f5f5f5 !important;
    border: 1px solid #374151 !important;
}

/* Dropdown & Media Dark Mode */
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 Dark Mode */
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;
}

#darkModeToggle:hover { background-color: #a7893d !important; color: #fff !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;
}

.nav-item:active { transform: translateY(1px) scale(.98); transition: transform 120ms ease; }

.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; }
}