@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');

        /* Basic font setup */
        body {
            font-family: "Playfair Display", serif;
            background-color: #0a0a14; /* Dark background */
            color: #e0e0e0;
        }

        /* Custom gradient text for titles */
        .gradient-text {
            background: linear-gradient(90deg, #c084fc, #9333ea);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        /* Custom hero background */
        .hero-bg {
            background-image: linear-gradient(rgba(10, 10, 20, 0.85), rgba(10, 10, 20, 0.85)), url('https://rankerspace.com/wp-content/uploads/2024/01/Longevity-Future-Proofing.webp');
            background-size: cover;
            background-position: center;
        }
        
        /* Card hover effect */
        .product-card {
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        .product-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 20px 25px -5px rgba(147, 51, 234, 0.1), 0 10px 10px -5px rgba(126, 34, 206, 0.08);
        }

        /* Toast notification */
        #toast-notification {
            position: fixed;
            bottom: -100px; /* Start off-screen */
            left: 50%;
            transform: translateX(-50%);
            transition: bottom 0.5s ease-in-out;
            z-index: 1000;
        }
        #toast-notification.show {
            bottom: 30px; /* Slide in */
        }

        /* Cart & Checkout Modal Styles */
        .modal-container {
            transition: transform 0.3s ease-in-out;
        }

        /* Payment Tabs */
        .payment-tab.active {
             background-color: #9333ea; /* Purple-600 */
             color: #ffffff;
             border-color: #9333ea;
        }
        
        /* Barcode font */
        @font-face {
            font-family: 'LibreBarcode39';
            src: url('https://fonts.gstatic.com/s/librebarcode39/v11/sJoI3KhViA_aIDw-a_Gta5CEp7if-A.woff2') format('woff2');
        }

        .barcode {
            font-family: 'LibreBarcode39', cursive;
            font-size: 4rem;
            color: #000;
        }

        #boleto-barcode {
            display: flex;
            font-size: 2rem;
            font-weight: bold;
            justify-content: center;
            align-items: center;    
        }