/* Estilos básicos para o wrapper e slider */
.meu-carousel-slider-wrapper {
    position: relative; /* Necessário para posicionamento absoluto de controles/nav se precisar */
    width: 100%;
    overflow: hidden; /* Garante que nada vaze */
}

/* Tiny Slider ajusta a maioria dos estilos do container, mas podemos adicionar margens, etc. */
.meu-carousel-slider {
    /* Adicione margens ou outros estilos se necessário */
}

.meu-carousel-slide-item {
    width: 100%; /* Garante que cada slide ocupe a largura total */
    position: relative; /* Para garantir que as imagens se sobreponham corretamente se necessário */
    line-height: 0; /* Remove espaço extra abaixo das imagens */
}

.meu-carousel-slide-item img {
    width: 100%; /* Faz a imagem ocupar toda a largura do slide */
    height: auto; /* Mantém a proporção */
    display: block; /* Remove espaço extra abaixo da imagem */
}

/* Esconder a imagem mobile por padrão (Desktop First) */
.meu-carousel-slide-item .carousel-img-mobile {
    display: none;
}
.meu-carousel-slide-item .carousel-img-desktop {
    display: block;
}

/* Media Query para Telas Menores (Ex: <= 768px) */
@media (max-width: 768px) {
    .meu-carousel-slide-item .carousel-img-desktop {
        display: none; /* Esconde a imagem desktop */
    }
    .meu-carousel-slide-item .carousel-img-mobile {
        display: block; /* Mostra a imagem mobile */
    }
}

/* Estilização básica para os botões de navegação (se usados) */
.meu-carousel-nav button {
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    padding: 10px 15px;
    cursor: pointer;
    font-size: 14px;
    margin: 0 5px;
    border-radius: 4px;
    transition: background-color 0.3s ease;
}

.meu-carousel-nav button:hover {
    background-color: rgba(0, 0, 0, 0.8);
}

.meu-carousel-nav button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}


/* Container da paginação (os pontos) */
.tns-nav {
    position: absolute; /* Remove do fluxo normal e permite posicionar sobre */
    bottom: 15px;       /* Distância da borda inferior do wrapper (ajuste conforme necessário) */
    left: 0;            /* Alinha à esquerda do wrapper */
    right: 0;           /* Alinha à direita do wrapper */
    text-align: center; /* Centraliza os pontos dentro do container */
    z-index: 10;        /* Garante que fique acima das imagens do slider */
    line-height: 1;     /* Evita espaçamento vertical indesejado */
}

/* Estilo individual dos pontos de paginação */
.tns-nav button {
    width: 12px;                /* Tamanho do ponto */
    height: 12px;               /* Tamanho do ponto */
    background-color: rgba(255, 255, 255, 0.5); /* Branco semi-transparente (bom para a maioria das imagens) */
    border: 1px solid rgba(0, 0, 0, 0.2); /* Borda sutil opcional */
    border-radius: 50%;         /* Deixa redondo */
    padding: 0;
    margin: 0 5px;              /* Espaçamento entre os pontos */
    cursor: pointer;
    transition: background-color 0.3s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2); /* Sombra sutil para destacar */
}

/* Estilo do ponto ativo */
.tns-nav button.tns-nav-active {
    background-color: rgba(255, 255, 255, 1); /* Branco sólido (ou outra cor de destaque) */
    border-color: rgba(0, 0, 0, 0.4);
}

/* Esconder os controles padrão de seta se não quiser mais (opcional) */
/* .meu-carousel-nav {
    display: none;
} */

/* --- Fim da Estilização da Paginação Sobre a Imagem --- */

/* Exemplo: Estilos das imagens e media queries */
.meu-carousel-slide-item img {
    width: 100%;
    height: auto;
    display: block;
}

.meu-carousel-slide-item .carousel-img-mobile {
    display: none;
}
.meu-carousel-slide-item .carousel-img-desktop {
    display: block;
}

@media (max-width: 768px) {
    .meu-carousel-slide-item .carousel-img-desktop {
        display: none;
    }
    .meu-carousel-slide-item .carousel-img-mobile {
        display: block;
    }

    /* Opcional: Ajustar a posição da paginação no mobile se necessário */
    /* .tns-nav {
        bottom: 10px;
    } */
}

/* --- Estilos SVG para Setas --- */

/* URLs dos SVGs (codificados para CSS) - você pode encontrar SVGs de setas online */
/* Exemplo: Ícones simples de chevron */
:root {
    --svg-icon-chevron-left: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2.5' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M15.75 19.5L8.25 12l7.5-7.5' /%3E%3C/svg%3E");
    --svg-icon-chevron-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2.5' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M8.25 4.5l7.5 7.5-7.5 7.5' /%3E%3C/svg%3E");
}

.meu-carousel-nav button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    background-color: white; /* Cor do ÍCONE SVG será esta! */
    border: none;
    border-radius: 50%;
    width: 40px; /* Ajuste conforme necessário */
    height: 40px;
    padding: 0;
    cursor: pointer;
    transition: background-color 0.3s ease, opacity 0.3s ease; /* Adicione opacity à transição */

    /* Aplica o SVG como máscara */
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: 50%; /* Ajusta o tamanho do ícone dentro do botão */
    mask-size: 50%; /* Ajusta o tamanho do ícone dentro do botão */

    /* Fundo do botão (opcional, pode ser transparente ou uma cor diferente) */
    /* Se quiser um círculo atrás da seta */
     background-clip: padding-box; /* Garante que o fundo não vaze para a borda */
     background-origin: padding-box;
     background-color: rgba(0, 0, 0, 0.4); /* Cor do CÍRCULO do botão */

     /* Cor da SETA (via máscara) */
     /* Usaremos background-color para a seta e um pseudo-elemento para o círculo, ou vice-versa */
     /* Abordagem mais simples: Botão tem cor da seta, círculo é outro elemento ou fundo */
}

 /* Abordagem Alternativa: Fundo do botão é a cor do círculo, cor da máscara é a cor da seta */
 .meu-carousel-nav button {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
     z-index: 10;
     border: none;
     border-radius: 50%;
     width: 45px;
     height: 45px;
     padding: 0;
     cursor: pointer;
     transition: background-color 0.3s ease, opacity 0.3s ease;

     background-color: rgba(0, 0, 0, 0.4); /* Cor do círculo de fundo */

     /* A Máscara (o SVG) */
     -webkit-mask-repeat: no-repeat;
     mask-repeat: no-repeat;
     -webkit-mask-position: center;
     mask-position: center;
     -webkit-mask-size: 50%; /* Tamanho da seta dentro do círculo */
     mask-size: 50%;

     /* A Cor da Máscara (cor da seta) - Usando um background secundário que será mascarado */
     /* É um pouco truque, pode precisar de prefixos */
     /* Uma forma mais compatível é usar background-image com o SVG e controlar a cor no SVG */
}

 /* *** ABORDAGEM RECOMENDADA COM MASK *** */
 .meu-carousel-nav button {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
     z-index: 10;
     background-color: rgba(0, 0, 0, 0.4); /* COR DO CÍRCULO */
     color: white; /* Cor Padrão (não usada diretamente aqui) */
     border: none;
     border-radius: 50%;
     width: 45px;
     height: 45px;
     padding: 0;
     cursor: pointer;
     transition: background-color 0.3s ease, opacity 0.3s ease;
     overflow: hidden; /* Garante que a máscara não vaze */
 }

 .meu-carousel-nav button::before { /* Usaremos o ::before para conter o ícone mascarado */
     content: '';
     display: block;
     width: 100%;
     height: 100%;
     background-color: white; /* COR DA SETA */

     -webkit-mask-repeat: no-repeat;
     mask-repeat: no-repeat;
     -webkit-mask-position: center;
     mask-position: center;
     -webkit-mask-size: 50%; /* Tamanho do ícone */
     mask-size: 50%;
 }

/* Aplica a máscara específica para cada botão */
.meu-carousel-nav button.prev::before {
    -webkit-mask-image: var(--svg-icon-chevron-left);
    mask-image: var(--svg-icon-chevron-left);
}

.meu-carousel-nav button.next::before {
    -webkit-mask-image: var(--svg-icon-chevron-right);
    mask-image: var(--svg-icon-chevron-right);
}

/* Posicionamento dos botões */
.meu-carousel-nav button.prev {
    left: 15px;
}
.meu-carousel-nav button.next {
    right: 15px;
}

/* Hover: Muda a cor de fundo do CÍRCULO */
.meu-carousel-nav button:hover {
    background-color: rgba(0, 0, 0, 0.7);
}
/* Hover: Opcional - mudar a cor da SETA */
/* .meu-carousel-nav button:hover::before {
    background-color: #ddd;
} */

/* Disabled */
.meu-carousel-nav button:disabled {
    opacity: 0.3;
    cursor: not-allowed;
     background-color: rgba(0, 0, 0, 0.2); /* Fundo do círculo mais claro */
}
 /* Opcional: Mudar cor da seta quando desabilitado */
/* .meu-carousel-nav button:disabled::before {
    background-color: #aaa;
} */

/* --- Fim Estilos SVG --- */