/* Arquivo: estilo_carrossel.css */

:root {
  --swiper-navigation-color: #C9A33A; /* Define a cor dourada para as setas */
  --swiper-pagination-color: #C9A33A;
  --swiper-navigation-size: 22px; /* Tamanho da fonte para os ícones das setas */
}

.swiper {
  width: 95%;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 25px;
  border-radius: 12px;
  overflow: hidden; 
}

.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #f1f1f1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.swiper-slide img {
  display: block;
  width: 100%;
  height: auto; 
  object-fit: cover;
}

/* --- ESTILOS ADICIONADOS APENAS PARA AS SETAS --- */

/* Estilo geral para ambos os botões (próximo e anterior) */
.swiper-button-next, .swiper-button-prev {
    width: 38px;
    height: 38px;
    background-color: rgba(255, 255, 255, 0.6);
    border-radius: 50%;
    transition: background-color 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    top: 50%;
    transform: translateY(-50%);
}

.swiper-button-next:hover, .swiper-button-prev:hover {
    background-color: rgba(255, 255, 255, 0.9);
}

/* Remove o ícone padrão do Swiper */
.swiper-button-next:after, .swiper-button-prev:after {
  content: '';
}

/* Cria as novas setas personalizadas */
.swiper-button-next::before, .swiper-button-prev::before {
    font-family: sans-serif;
    font-size: var(--swiper-navigation-size);
    font-weight: bold;
    color: var(--swiper-navigation-color);
}

.swiper-button-prev::before {
  content: '<';
}

.swiper-button-next::before {
  content: '>';
}

/* Estilos para a paginação (as "bolinhas") */
.swiper-pagination-bullet {
    background-color: #FFFFFF;
    opacity: 0.8;
}

.swiper-pagination-bullet-active {
    background-color: #C9A33A;
}