@keyframes fade-in {
    from {
        background-color: rgba(0, 0, 0, 0);
    }
    to {
        background-color: rgba(0, 0, 0, 0.8);
    }
}

@keyframes fade-out {
    from {
        background-color: rgba(0, 0, 0, 0.8);
    }
    to {
        background-color: rgba(0, 0, 0, 0);
    }
}

@keyframes slide-in {
    from {
        transform: translateX(500px);
    }
    to {
        transform: translateX(0px);
    }
}

@keyframes slide-out {
    from {
        transform: translateX(0px);
    }
    to {
        transform: translateX(500px);
    }
}

@layer base {
}

#cart-drawer[data-state="open"] {
    animation: fade-in 0.4s forwards;
}

#cart-drawer[data-state="closed"] {
    animation: fade-out 0.4s forwards;
}

#cart-drawer[data-state="open"] > div {
    animation: slide-in 0.4s forwards;
}

#cart-drawer[data-state="closed"] > div {
    animation: slide-out 0.4s forwards;
}

.dialog[data-state="open"] {
    animation: fade-in 0.4s forwards;
}

.dialog[data-state="closed"] {
    animation: fade-out 0.4s forwards;
}

.dialog[data-state="open"] > div {
    animation: dialog-in 0.2s forwards;
}

.dialog[data-state="closed"] > div {
    animation: dialog-out 0.2s forwards;
}

@keyframes dialog-in {
    from {
        opacity: 0;
        scale: 50%;
    }
    to {
        opacity: 1;
        scale: 100%;
    }
}

@keyframes dialog-out {
    from {
        opacity: 1;
        scale: 100%;
    }
    to {
        opacity: 0;
        scale: 50%;
    }
}

#category-section,
#category #products-list {
    scroll-margin-top: 100px;
    transition:
        opacity 0.5s ease-out,
        transform 0.5s ease-out;
    opacity: 0;
    transform: translateY(20px);
}

#category-section.visible,
#category #products-list.visible {
    opacity: 1;
    transform: translateY(0);
}

@keyframes loading {
    0% {
        left: -50%;
    }

    to {
        left: 100%;
    }
}

/* navbar */

  .custom-navbar {
      background-color: #000000;
    padding-top: 0.5rem; /* Ajuste este valor para aumentar ou diminuir a espessura */
    padding-bottom: 0.5rem; /* Ajuste este valor para aumentar ou diminuir a espessura */
  }

   /* Estilos personalizados para a notificação */
        body {
            font-family: 'Inter', sans-serif;
        }

        #sales-notification {
            /* Posicionamento e transições */
            position: fixed;
            bottom: 2rem;
            left: 2rem;
            z-index: 1000;
            opacity: 0;
            transform: translateY(20px);
            visibility: hidden;
            transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out, visibility 0.5s;
            /* Garante que a barra de tempo não saia das bordas arredondadas */
            overflow: hidden;
        }

        #sales-notification.show {
            opacity: 1;
            transform: translateY(0);
            visibility: visible;
        }

        /* Animação da barra de tempo */
        @keyframes countdown {
            from { width: 100%; }
            to { width: 0%; }
        }
        
        /* Aplica a animação na barra de tempo quando a notificação está visível */
        #sales-notification.show #timer-bar {
            animation: countdown 5s linear forwards;
        }

        /* Estilo para o texto (ainda menor) */
        #notification-text {
            font-size: 0.65rem; /* ~10.5px */
            line-height: 0.9rem; /* Ajuste de altura da linha */
        }
        
        /* Ícone de presente em SVG (micro) */
        .gift-icon {
            width: 1rem; /* 12px */
            height: 1rem; /* 12px */
            color: white;
        }

    

        /* --- Estilos do Botão WhatsApp --- */
        #whatsapp-button {
            position: fixed;
            bottom: 2rem;
            right: 2rem;
            z-index: 1000;
            animation: pulse 2s infinite;
        }

        @keyframes pulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.05); }
            100% { transform: scale(1); }
        }

        /* --- Estilos do Modal WhatsApp --- */
        #whatsapp-modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.6);
            z-index: 1010;
            display: flex;
            justify-content: center;
            align-items: center;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.3s ease, visibility 0.3s;
        }

        #whatsapp-modal-overlay.show {
            opacity: 1;
            visibility: visible;
        }

        #whatsapp-modal-content {
            position: relative; /* Necessário para posicionar o botão de fechar */
            background-color: white;
            padding: 2rem;
            border-radius: 0.75rem;
            width: 90%;
            max-width: 400px;
            text-align: center;
            transform: scale(0.95);
            transition: transform 0.3s ease;
        }
        #whatsapp-modal-overlay.show #whatsapp-modal-content {
             transform: scale(1);
        }




  /* --- Animações --- */
        @keyframes slideInLeft {
            from { opacity: 0; transform: translateX(-30px); }
            to { opacity: 1; transform: translateX(0); }
        }
        @keyframes slideInRight {
            from { opacity: 0; transform: translateX(30px); }
            to { opacity: 1; transform: translateX(0); }
        }
        @keyframes progress {
            from { width: 0%; }
            to { width: 100%; }
        }

        /* --- Estilo Principal do Componente --- */
        .banner-container {
            font-family: 'Inter', sans-serif;
            background-size: auto, cover;
            padding: 2rem 0; /* Adiciona espaçamento vertical */
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .banner-card {
            width: 100%;
            max-width: 92rem; /* 1440px - Aumentado para ocupar mais espaço lateral */
            position: relative;
            /* Efeito "Glassmorphism" com tom neutro */

            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border-radius: 1.5rem; /* 24px */
            border: 1px solid rgba(255, 255, 255, 0.1);
            padding: 2.5rem; /* 40px */
            overflow: hidden; /* Garante que a barra de progresso não saia das bordas */
            box-shadow: 0 20px 50px rgba(0,0,0,0.3);
        }

        /* --- Estrutura do Slider --- */
        .slider-wrapper {
            display: grid;
        }
        
        .banner-slide {
            grid-area: 1 / 1 / 2 / 2; /* Coloca todos os slides na mesma célula do grid */
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.6s ease-in-out, visibility 0.6s ease-in-out;
        }

        .banner-slide.active {
            opacity: 1;
            visibility: visible;
        }

        /* Animações de entrada para os elementos do slide ativo */
        .banner-slide.active .slide-text {
            animation: slideInLeft 0.8s ease-out forwards;
        }
        .banner-slide.active .slide-image-wrapper {
            animation: slideInRight 0.8s ease-out forwards;
        }

        .promo-image {
             border-radius: 1rem; /* 16px */
             box-shadow: 0 10px 30px rgba(28, 146, 58, 0.616);
             transform: perspective(1000px) rotateY(-5deg) rotateX(2deg) scale(1.05);
             transition: transform 0.4s ease;
        }
        .promo-image:hover {
            transform: perspective(1000px) rotateY(0) rotateX(0) scale(1);
        }

        .btn-catalog {
            background: linear-gradient(90deg, #08923d, #1d6e3f); /* Gradiente azul */
            transition: all 0.3s ease;
        }
        .btn-catalog:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 15px rgba(255, 0, 0, 0); /* Sombra azul */
        }
        
        /* Barra de Progresso */
        .progress-bar {
            position: absolute;
            bottom: 0;
            left: 0;
            height: 4px;
            background-color: rgba(255,255,255,0.2);
            width: 100%;
        }
        .progress-bar-inner {
            height: 100%;
            background: linear-gradient(90deg, #15a328ad, #0c5528); /* Gradiente azul */
            border-radius: 0 2px 2px 0;
            animation: progress 5s linear forwards;
        }