:root {
    --deep-purple: #1C0770;
    --neon-blue: #3A9AFF;
    --neon-pink: #F1FF5E; /* استخدمت الأصفر الفاتح المبهج اللي في البالتة كأكشن */
    --white: #ffffff;
    --glass: rgba(255, 255, 255, 0.1);
}

/* Dark Mode (Your Palette) */
body.dark-mode {
    background-color: var(--deep-purple);
    color: var(--white);
    transition: 0.5s;
}

body.light-mode {
    background-color: #f1f4f9; /* خلفية فاتحة هادية */
    color: #1c0770; /* نصوص غامقة من نفس البالتة */
}

body.light-mode .book-card {
    background: #ffffff; /* كارت أبيض صريح */
    border: 1px solid rgba(58, 154, 255, 0.1);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05); /* ظل خفيف جداً */
}

/* Glass Card Style */
.book-card {
    background: var(--glass);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    transition: 0.4s ease;
    height: 100%;
    overflow: hidden;
}

.book-card:hover {
    transform: translateY(-10px) rotate(2deg);
    border-color: var(--neon-blue);
  box-shadow: 0 15px 30px rgba(58, 154, 255, 0.15);
}

.navbar {
    background: rgba(28, 7, 112, 0.8);
    backdrop-filter: blur(15px);
}
body.light-mode .navbar {
    background: rgba(255, 255, 255, 0.9);
    border-bottom: 2px solid var(--neon-blue);
}
.navbar-brand span { color: var(--neon-pink); }
body.light-mode .navbar-brand {
    color: var(--deep-purple) !important;
}
.btn-primary {
    background-color: var(--neon-blue);
    border: none;
    transition: 0.3s;
}

.btn-primary:hover { background-color: #2e7cd1; transform: scale(1.05); }

.btn-filter {
    color: var(--white);
    border: 1px solid var(--neon-blue);
    border-radius: 50px;
    padding: 8px 20px;
}

.btn-filter.active, .btn-filter:hover {
    background-color: var(--neon-blue);
    color: white;
}

/* Stars Rating */
.star-rating { color: var(--neon-pink); font-size: 0.9rem; }

/* Side Drawer Fix */
.offcanvas { background-color: #fdfdfd; color: #333; }
body.dark-mode .offcanvas { background-color: #11054d; color: white; }

.cart-item-img { width: 50px; height: 70px; object-fit: cover; border-radius: 5px; }

body.light-mode .btn-filter {
    color: var(--deep-purple);
    border-color: var(--neon-blue);
}

body.light-mode .btn-filter.active {
    color: white;
    background-color: var(--neon-blue);
}

/* السلة الجانبية في اللايت مود */
body.light-mode .offcanvas {
    background-color: #ffffff;
    color: #1c0770;
}

body.light-mode .search-box input {
    background-color: #ffffff;
    border: 1px solid var(--neon-blue);
    color: #333;
}

/* الهيدر في اللايت مود */
body.light-mode .bg-gradient-header {
    background: linear-gradient(135deg, #ffffff, #e7f1ff);
    padding: 60px 0;
}