/* =============================================
   DARK MODE THEME — Dưa Hấu Không Hạt
   Night City + Firefly Edition
   ============================================= */

/* === Dark mode body === */
body.dark-mode {
    background-color: #021027 !important;
    color: #e0d6eb !important;
}

/* === Night City Background === */
#darkBackground {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

body.dark-mode #darkBackground {
    display: block;
}

#darkBackground img {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    mask-image: radial-gradient(white 0%, white 30%, transparent 80%, transparent);
    -webkit-mask-image: radial-gradient(white 0%, white 30%, transparent 80%, transparent);
    opacity: 0.35;
}

/* === Firefly Particles (dark mode only) === */
#darkParticles {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
}

body.dark-mode #darkParticles {
    display: block;
}

.firefly {
    position: absolute;
    border-radius: 50%;
    mix-blend-mode: screen;
    pointer-events: none;
}

.firefly-glow {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-image: radial-gradient(hsl(140, 100%, 75%),
            hsl(140, 100%, 70%) 10%,
            hsla(140, 100%, 60%, 0) 56%);
    animation: fireflyPulse 2s infinite ease-in-out;
}

@keyframes fireflyPulse {

    0%,
    100% {
        opacity: 0.8;
        transform: scale3d(0.5, 0.5, 1);
    }

    50% {
        opacity: 0.3;
        transform: scale3d(2, 2, 1);
    }
}

@keyframes fireflyDrift {

    0%,
    100% {
        opacity: 0;
    }

    10% {
        opacity: 0.9;
    }

    90% {
        opacity: 0.4;
    }
}

/* === Header === */
body.dark-mode .glass-header {
    background: rgba(2, 16, 39, 0.85) !important;
    border-bottom-color: rgba(0, 255, 140, 0.1) !important;
    backdrop-filter: blur(20px) !important;
}

body.dark-mode .glass-header a,
body.dark-mode .glass-header span,
body.dark-mode .glass-header button {
    color: #c8e6d4;
}

body.dark-mode .glass-header nav a {
    color: #8eb8a0;
}

body.dark-mode .glass-header nav a:hover,
body.dark-mode .glass-header nav a.text-pink-600 {
    color: #6bffb0 !important;
    background: rgba(107, 255, 176, 0.08) !important;
}

body.dark-mode .glass-header .bg-pink-50 {
    background: rgba(107, 255, 176, 0.08) !important;
}

body.dark-mode .glass-header .text-pink-600 {
    color: #6bffb0 !important;
}

body.dark-mode .glass-header .text-pink-400 {
    color: #4ade80 !important;
}

body.dark-mode .glass-header .border-pink-200 {
    border-color: rgba(74, 222, 128, 0.2) !important;
}

body.dark-mode .glass-header .bg-pink-50\/50 {
    background: rgba(74, 222, 128, 0.06) !important;
}

body.dark-mode #darkModeBtn {
    color: #fbbf24 !important;
}

body.dark-mode #darkModeBtn:hover {
    background: rgba(251, 191, 36, 0.1) !important;
}

/* === Homepage background === */
body.dark-mode .bg-\[\#fff5f7\] {
    background-color: #021027 !important;
}

body.dark-mode .bg-gradient-to-b.from-pink-50 {
    background: linear-gradient(to bottom, #041a3a, #021027) !important;
}

/* === Text colors === */
body.dark-mode .text-gray-800,
body.dark-mode .text-gray-700 {
    color: #e0e8f0 !important;
}

body.dark-mode .text-gray-600,
body.dark-mode .text-gray-500 {
    color: #9ab0c8 !important;
}

body.dark-mode .text-gray-400 {
    color: #6b8aaa !important;
}

/* === Cards & Backgrounds === */
body.dark-mode .bg-white {
    background-color: rgba(4, 20, 50, 0.8) !important;
}

body.dark-mode .border-pink-50 {
    border-color: rgba(74, 222, 128, 0.08) !important;
}

body.dark-mode .border-pink-200 {
    border-color: rgba(74, 222, 128, 0.15) !important;
}

body.dark-mode .border-pink-100 {
    border-color: rgba(74, 222, 128, 0.1) !important;
}

body.dark-mode .bg-pink-50 {
    background-color: rgba(74, 222, 128, 0.06) !important;
}

body.dark-mode .bg-pink-50\/50 {
    background-color: rgba(74, 222, 128, 0.04) !important;
}

body.dark-mode .shadow-sm,
body.dark-mode .shadow-md {
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.4) !important;
}

/* Genre cards */
body.dark-mode a.bg-white.rounded-2xl {
    background-color: rgba(4, 26, 58, 0.9) !important;
    border-color: rgba(74, 222, 128, 0.1) !important;
}

body.dark-mode a.bg-white.rounded-2xl:hover {
    border-color: rgba(107, 255, 176, 0.3) !important;
    box-shadow: 0 0 20px rgba(74, 222, 128, 0.1) !important;
}

/* === Pink → Neon Green accent in dark mode === */
body.dark-mode .text-pink-500,
body.dark-mode .text-pink-600,
body.dark-mode .group-hover\:text-pink-500:hover,
body.dark-mode .group:hover .group-hover\:text-pink-500,
body.dark-mode .group:hover .group-hover\:text-pink-600 {
    color: #4ade80 !important;
}

body.dark-mode .bg-pink-500,
body.dark-mode .bg-pink-400 {
    background-color: #059669 !important;
}

body.dark-mode .bg-gradient-to-r.from-pink-400.to-rose-400 {
    background: linear-gradient(to right, #059669, #10b981) !important;
}

body.dark-mode .bg-gradient-to-r.from-pink-400.to-rose-400:hover {
    background: linear-gradient(to right, #047857, #059669) !important;
}

body.dark-mode .text-pink-300 {
    color: #6ee7b7 !important;
}

/* === Text gradient (dark mode) === */
body.dark-mode .text-gradient {
    background: linear-gradient(135deg, #4ade80, #22d3ee) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

/* === Slider dots === */
body.dark-mode .slider-dot {
    background: rgba(74, 222, 128, 0.2) !important;
}

body.dark-mode .slider-dot.active-dot {
    background: linear-gradient(to right, #4ade80, #22d3ee) !important;
}

/* === Footer === */
body.dark-mode footer {
    background: linear-gradient(to bottom, rgba(4, 26, 58, 0.95), rgba(2, 16, 39, 0.98)) !important;
    border-top-color: rgba(74, 222, 128, 0.1) !important;
}

/* === Search Modal Dark === */
body.dark-mode .search-modal-content {
    background: rgba(4, 20, 50, 0.97) !important;
    border-color: rgba(74, 222, 128, 0.15) !important;
    box-shadow: 0 0 60px rgba(74, 222, 128, 0.08), 0 25px 50px rgba(0, 0, 0, 0.5) !important;
}

body.dark-mode .search-modal-content input {
    background: rgba(2, 16, 39, 0.8) !important;
    border-color: rgba(74, 222, 128, 0.2) !important;
    color: #e0e8f0 !important;
}

body.dark-mode .search-modal-content input::placeholder {
    color: #6b8aaa !important;
}

body.dark-mode .search-result-item {
    background: rgba(4, 26, 58, 0.8) !important;
    border-color: rgba(74, 222, 128, 0.08) !important;
}

body.dark-mode .search-result-item:hover {
    background: rgba(10, 40, 80, 0.9) !important;
    border-color: rgba(74, 222, 128, 0.25) !important;
    box-shadow: 0 0 15px rgba(74, 222, 128, 0.05) !important;
}

/* === Mobile menu === */
body.dark-mode #mobileMenu {
    background: rgba(2, 16, 39, 0.97) !important;
    border-color: rgba(74, 222, 128, 0.1) !important;
}

/* === Book page in dark mode === */
body.dark-mode .book__page {
    background-color: #ffffff;
    background-image: linear-gradient(to bottom, #0a1e3a 9px, #14305a 1px);
    background-size: 100% 10px;
}

/* === Truyện vừa đăng cards === */
body.dark-mode .flex.gap-4.bg-white.rounded-2xl {
    background-color: rgba(4, 26, 58, 0.85) !important;
    border-color: rgba(74, 222, 128, 0.08) !important;
}

body.dark-mode .flex.gap-4.bg-white.rounded-2xl:hover {
    background-color: rgba(10, 40, 80, 0.9) !important;
    border-color: rgba(74, 222, 128, 0.2) !important;
}

/* === Glow effect on section icons in dark === */
body.dark-mode .bg-gradient-to-br.from-pink-400.to-rose-400 {
    background: linear-gradient(to bottom right, #059669, #10b981) !important;
    box-shadow: 0 0 15px rgba(74, 222, 128, 0.3) !important;
}

body.dark-mode .bg-gradient-to-br.from-orange-400.to-red-400 {
    box-shadow: 0 0 15px rgba(251, 146, 60, 0.3) !important;
}

body.dark-mode .bg-gradient-to-br.from-violet-400.to-purple-400 {
    box-shadow: 0 0 15px rgba(167, 139, 250, 0.3) !important;
}

body.dark-mode .bg-gradient-to-br.from-teal-400.to-emerald-400 {
    box-shadow: 0 0 15px rgba(45, 212, 191, 0.3) !important;
}

/* === Petal visibility in dark mode (hide or dim) === */
body.dark-mode .petal {
    opacity: 0.15 !important;
    filter: hue-rotate(120deg) brightness(0.4);
}