/* Estilos básicos para dispositivos móveis */
/* Arquivo recriado sem os estilos de exibição específicos para mobile */

/* Ajustes gerais de tamanho */
.mobile-device .max-w-6xl,
.mobile-device .max-w-5xl,
.mobile-device .max-w-4xl,
.mobile-device .max-w-3xl,
.mobile-device .max-w-2xl {
    width: 100% !important;
    max-width: 100% !important;
}

/* Ajustes de bordas */
.mobile-device .rounded-3xl,
.mobile-device .rounded-2xl {
    border-radius: 1rem !important;
}

/* Ajustes de padding */
.mobile-device .p-8,
.mobile-device .p-7,
.mobile-device .p-6 {
    padding: 1rem !important;
}

/* Ajustes de tamanho de fonte */
.mobile-device .text-4xl {
    font-size: 1.5rem !important;
}

.mobile-device .text-3xl {
    font-size: 1.25rem !important;
}

.mobile-device .text-2xl {
    font-size: 1.1rem !important;
}

.mobile-device .text-xl {
    font-size: 1rem !important;
}

/* Ajustes de margens */
.mobile-device .mb-8,
.mobile-device .mb-10,
.mobile-device .mb-12 {
    margin-bottom: 1.5rem !important;
}

/* Ajustes de espaçamento */
.mobile-device .gap-10,
.mobile-device .gap-8 {
    gap: 1rem !important;
}

/* Melhorar áreas de toque para dispositivos móveis */
.mobile-device a,
.mobile-device button {
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Ajustar tamanho de fonte para leitura em telas pequenas */
.mobile-device p {
    font-size: 1rem !important;
    line-height: 1.5 !important;
}

/* Ajustes para o grid em dispositivos móveis */
.mobile-device .grid {
    gap: 0.75rem !important; /* Reduzir o espaçamento entre os cards */
}


/* Estilos para carrossel em dispositivos móveis com suporte a deslize */
.mobile-device #extensoes-carrossel-container .grid {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
    padding: 10px 0;
    text-align: center; /* Centralizar o conteúdo */
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
}

.mobile-device #extensoes-carrossel-container .grid::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Edge */
}

.mobile-device .carousel-wrapper {
    display: inline-block;
    width: 90%; /* Ajustado para ocupar mais espaço na tela */
    max-width: 400px; /* Limita a largura máxima em telas maiores */
    white-space: normal;
    vertical-align: top;
    margin: 0 auto 20px auto; /* Centralizar os cards */
    scroll-snap-align: center; /* Alinhar ao centro ao deslizar */
    padding: 0;
    transform: scale(0.95); /* Reduzir ligeiramente o tamanho para melhor visualização */
    transition: transform 0.3s ease;
}

/* Remover o padding-left específico que estava causando desalinhamento */
.mobile-device #extensoes-carrossel-container {
    padding-left: 0;
    padding-right: 0;
    text-align: center;
}

.mobile-device .carousel {
    height: 380px !important;
    margin: 0 auto; /* Centralizar o carousel */
    border-radius: 16px !important; /* Bordas mais arredondadas como nos apps recomendados */
    border-width: 2px !important; /* Borda mais grossa como nos apps recomendados */
    box-shadow: 0 8px 32px 0 rgba(0,0,0,0.25) !important; /* Sombra similar aos apps recomendados */
    transition: all 0.3s ease;
}

/* Melhorar as bordas coloridas baseadas na classe de cor */
.mobile-device .carousel.purple-extension {
    border: 3px solid rgba(139, 92, 246, 0.6) !important;
}

.mobile-device .carousel.yellow-extension {
    border: 3px solid rgba(245, 158, 11, 0.6) !important;
}

.mobile-device .carousel.blue-extension {
    border: 3px solid rgba(59, 130, 246, 0.6) !important;
}

.mobile-device .carousel.gray-extension {
    border: 3px solid rgba(107, 114, 128, 0.6) !important;
}

/* Efeito de hover/active para melhorar a experiência de toque */
.mobile-device .carousel:active {
    transform: scale(0.98);
}

.mobile-device .carousel-nav-button {
    display: none; /* Esconder botões de navegação em mobile */
}

.mobile-device .carousel-inner {
    transition: transform 0.3s ease;
}

.mobile-device .carousel-item {
    margin-right: 0; /* Remover margem entre slides */
}

/* Remover o indicador de deslize duplicado */
.mobile-device .swipe-indicator {
    display: none !important;
}

.mobile-device .swipe-dot {
    width: 8px;
    height: 8px;
    background-color: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    transition: all 0.3s ease;
}

.mobile-device .swipe-dot.active {
    background-color: white;
    transform: scale(1.2);
}


/* Ocultar barras de rolagem em dispositivos móveis */
.mobile-device .carousel-item.with-scroll {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    overflow: auto !important;
}

.mobile-device .carousel-item.with-scroll::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

/* Garantir que todos os elementos dentro do carrossel não mostrem barras de rolagem */
.mobile-device .carousel * {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}

.mobile-device .carousel *::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}