/* Wrapper container - define position context for arrows */
.mobile-promo-container {
    position: relative; /* Setas posicionadas absolutamente em relação a este */
    /* Removido: overflow-x, overflow-y, white-space, scroll-behavior */
    padding: 15px 0; /* Padding vertical */
    margin-bottom: 20px; /* Espaço abaixo */
    width: 100%;
    box-sizing: border-box; /* Inclui padding e border na largura total */

    /* Adicionado padding lateral para dar espaço às setas em desktop */
    /* Este padding será removido em mobile via media query */
    padding-left: 45px; /* Espaço para a seta esquerda + margem */
    padding-right: 45px; /* Espaço para a seta direita + margem */
}

/* O contêiner que realmente rola horizontalmente */
.mobile-promo-scroll {
    display: flex; /* Coloca as imagens em linha */
    gap: 10px; /* Espaço entre as imagens */

    /* Adicionado: Propriedades de scroll */
    overflow-x: auto; /* HABILITA O SCROLL HORIZONTAL AQUI */
    overflow-y: hidden; /* Esconde o scroll vertical */
    white-space: nowrap; /* Impede que as imagens quebrem a linha */
    scroll-behavior: smooth; /* Scroll suave */

    /* Opcional: Esconder a barra de scroll nativa */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;  /* Internet Explorer 10+ */

    /* Removido: padding lateral que estava aqui */
    /* padding: 0 15px; */
}

/* Esconder a barra de scroll padrão no Chrome, Edge, Safari */
.mobile-promo-scroll::-webkit-scrollbar {
    display: none;
}

/* Estilos para as imagens dentro do scroll (mantidos) */
.mobile-promo-scroll img {
    height: auto;
    width: 250px; /* Largura fixa, ajuste se necessário */
    max-width: 100%;
    border-radius: 8px;
    cursor: pointer;
    object-fit: cover;
    flex-shrink: 0;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease-in-out;
}

/* Efeito de hover nas imagens (mantido) */
.mobile-promo-scroll img:hover {
    transform: scale(1.03);
}

/* Estilos para as setas de navegação (posicionadas absolutamente no .mobile-promo-container) */
.scroll-arrow {
    position: absolute;
    top: 50%; /* Centraliza verticalmente */
    transform: translateY(-50%); /* Ajuste fino para centralização */
    background-color: rgba(255, 255, 255, 0.8); /* Fundo semi-transparente */
    border: none;
    border-radius: 50%; /* Botão redondo */
    width: 40px; /* Largura do botão */
    height: 40px; /* Altura do botão */
    display: none; /* Esconde por padrão, será mostrado em desktop via media query */
    justify-content: center; /* Centraliza o ícone (usado com display: flex) */
    align-items: center; /* Centraliza o ícone (usado com display: flex) */
    cursor: pointer;
    z-index: 10; /* Garante que fique acima das imagens */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Sombra */
    transition: background-color 0.3s ease; /* Transição suave no hover */
}

.scroll-arrow:hover {
    background-color: rgba(255, 255, 255, 1); /* Fundo opaco no hover */
}

.scroll-arrow.left {
    left: 5px; /* Posição da seta esquerda em relação ao .mobile-promo-container */
}

.scroll-arrow.right {
    right: 5px; /* Posição da seta direita em relação ao .mobile-promo-container */
}

.scroll-arrow i {
    color: #333; /* Cor do ícone */
    font-size: 1.2em; /* Tamanho do ícone */
}

/* Media query para mostrar as setas e ajustar padding em desktop */
@media (min-width: 768px) { /* Breakpoint md do Bootstrap */
    .scroll-arrow.d-md-flex {
        display: flex !important; /* Mostra as setas como flex */
    }

    /* O padding já está no .mobile-promo-container para desktop, nada a fazer aqui */
}

/* Media query para mobile: remover padding do container e adicionar ao scrollable */
@media (max-width: 767.98px) { /* Telas menores que o breakpoint md */
    .mobile-promo-container {
        padding-left: 0; /* Remove padding lateral do wrapper */
        padding-right: 0;
    }
    .mobile-promo-scroll {
        padding: 0 15px; /* Adiciona padding lateral ao elemento que rola em mobile */
    }
}