/* ============================================================
   style.css
   Custom styles that go beyond Tailwind's utility classes:
   fonts, price strikethrough, pulse dot, fade-in animation,
   and the mobile off-canvas sidebar transform.
   ============================================================ */

        @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght=300;400;500;600;700&display=swap');
        body { font-family: 'Plus Jakarta Sans', sans-serif; }
        
        .price-strikethrough {
            position: relative;
            text-decoration: line-through;
            color: #94a3b8;
        }
        
        .pulse-dot {
            display: inline-block;
            width: 8px;
            height: 8px;
            background: #22c55e;
            border-radius: 50%;
            animation: pulse 2s infinite;
        }
        
        @keyframes pulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.5; }
        }
        
        .fade-in {
            animation: fadeIn 0.3s ease-in;
        }
        
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        /* Mobile off-canvas sidebar */
        #sidebar {
            transform: translateX(-100%);
        }
        #sidebar.sidebar-open {
            transform: translateX(0);
        }
        @media (min-width: 768px) {
            #sidebar {
                transform: translateX(0);
            }
        }