body {
  background-color: #000 !important;
}

@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%;
    }
}

/* Exibe apenas em telas largas (desktop) */
@media (min-width: 1024px) {
  .banners-desktop-only {
    display: block;
  }
}

/* === SLIDER GERAL === */
.banner-slider {
  position: relative;
  overflow: hidden;
  max-width: 100%;
}

/* === CONTAINER DOS SLIDES === */
.slides-container {
  display: flex;
  transition: transform 0.5s ease-in-out;
  width: 100%; /* 3 slides */
}

/* === CADA SLIDE === */
.slide {
  min-width: 100%;
  height: 380px;
  background-size: cover;
  background-position: center;
  cursor: pointer;
}

/* === IMAGENS DOS SLIDES - DESKTOP === */
.banner-desktop .slide-1 {
  background-image: url('https://i.postimg.cc/NFzVR9N7/banner-01.png);');
}
.banner-desktop .slide-2 {
  background-image: url('https://i.postimg.cc/5NGdCGTd/zap-zap.png');
}
.banner-desktop .slide-3 {
  background-image: url(https://i.postimg.cc/4NjnwWqV/banner-3.png);
}

/* === IMAGENS DOS SLIDES - MOBILE === */
.banner-mobile .slide-1 {
  background-image: url('https://i.postimg.cc/CxZLqbK5/banner-mob-2.png');
}
.banner-mobile .slide-2 {
  background-image: url(https://i.postimg.cc/m2XSmWyk/banner-mob.png);
}
.banner-mobile .slide-3 {
  background-image: url('https://i.postimg.cc/pLP3NHwH/siga-a-gente.png');
}

/* === SETAS === */
.slider-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 2rem;
  color: white;
  padding: 0.5rem;
  cursor: pointer;
  border-radius: 50%;
  z-index: 10;
}

.arrow-prev {
  left: 12px;
}

.arrow-next {
  right: 12px;
}

/* === DOTS DE NAVEGAÇÃO === */
.slider-nav {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
  z-index: 5;
}

.nav-dot {
  width: 10px;
  height: 10px;
  background-color: rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.3s;
}

.nav-dot.active {
  background-color: white;
}

/* === BARRA DE PROGRESSO === */
.progress-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 4px;
  background-color: #fff;
  width: 0%;
  transition: width 5s linear;
}

/* === RESPONSIVIDADE === */
.banner-desktop {
  display: block;
}

.banner-mobile {
  display: none;
}

@media screen and (max-width: 768px) {
  .banner-desktop {
    display: none;
  }
  .banner-mobile {
    display: block;
  }

  .slide {
    height: 200px; /* Altura menor no mobile */
  }

  .slider-arrow {
    font-size: 1.5rem;
    padding: 0.4rem;
  }
}


/* Container principal do slider */
.testimonials-wrapper {
    width: 100%;
    background-color: #000; /* Fundo preto para todo o wrapper */
    padding: 40px 0; /* Espaçamento interno */
    box-sizing: border-box;
}

/* Título das avaliações */
.testimonials-header {
    text-align: center;
    margin-bottom: 30px;
    color: #fff; /* Cor do texto do título */
    font-size: 2em;
    font-weight: bold;
}

/* Contêiner que permite a rolagem horizontal */
.testimonials-container {
    width: 90%; /* Ajuste a largura do contêiner visível */
    margin: 0 auto;
    overflow-x: scroll; /* Mantém a barra de rolagem para o efeito de desvanecer */
    overflow-y: hidden;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    cursor: grab;
    position: relative;

    /* Efeito de Desvanecer nas bordas */
    mask-image: linear-gradient(to right,
        transparent 0%,
        black 5%,
        black 95%,
        transparent 100%);
    -webkit-mask-image: linear-gradient(to right,
        transparent 0%,
        black 5%,
        black 95%,
        transparent 100%);
}

/* Ocultar barra de rolagem (WebKit - Chrome, Safari) */
.testimonials-container::-webkit-scrollbar {
    display: none;
}
/* Ocultar barra de rolagem (Firefox) */
.testimonials-container {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}


/* Trilha dos cards de avaliação */
.testimonials-track {
    display: flex;
    gap: 20px;
    padding-bottom: 20px;
    padding-left: 20px; /* Adiciona espaço para garantir que o efeito de desvanecer tenha "fundo" */
    padding-right: 20px;
}

/* Estilo individual de cada card de avaliação - NOVO ESTILO CLEAN/MODERNO COM EFEITO VIDRO */
.testimonial-card {
    flex: 0 0 300px;
    /* Degradê de branco transparente */
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
    /* Efeito de vidro */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px); /* Para compatibilidade com Safari */
    border: 1px solid rgba(255, 255, 255, 0.18); /* Borda sutil */
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37); /* Sombra mais destacada e suave */
    
    color: #f0f0f0; /* Cor do texto principal do card - MUDEI PARA UM CINZA CLARO */
    padding: 25px;
    border-radius: 12px; /* Aumentei um pouco o border-radius para ser mais suave */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 200px;
    transition: opacity 0.3s ease-in-out, transform 0.2s ease-out; /* Adicionado transição para hover */
}

/* Efeito de hover nos cards (opcional) */
.testimonial-card:hover {
    transform: translateY(-5px); /* Leve levantamento ao passar o mouse */
    box-shadow: 0 12px 40px 0 rgba(0, 0, 0, 0.45); /* Sombra mais intensa no hover */
}

/* Ajustes de cor de texto para os elementos internos do card */
.testimonial-info {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}

/* A cor de fundo das iniciais pode continuar sendo definida no HTML para variar */
.author-initials {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #007bff; /* Cor padrão, ajustada no HTML para variar */
    color: #fff; /* Cor do texto das iniciais */
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    font-size: 1.1em;
    margin-right: 10px;
}

.author-name {
    font-weight: bold;
    font-size: 1.1em;
    color: #fff; /* Nome do autor branco para contraste */
}

.rating {
    color: #ffd700; /* Cor das estrelas (amarelo ouro) */
    font-size: 1.3em;
    margin-bottom: 10px;
}

.testimonial-text {
    font-size: 1em;
    line-height: 1.5;
    margin-bottom: 15px;
    flex-grow: 1;
    color: #e0e0e0; /* Texto da avaliação cinza claro */
}

.testimonial-date {
    font-size: 0.85em;
    color: #aaaaaa; /* Data em cinza um pouco mais escuro */
    text-align: right;
}

/* Responsividade */
@media (max-width: 768px) {
    .testimonials-container {
        width: 95%;
    }
    .testimonial-card {
        flex: 0 0 280px;
    }
    .testimonials-header {
        font-size: 1.6em;
    }
}

@media (max-width: 480px) {
    .testimonial-card {
        flex: 0 0 90%;
    }
}