/**
 * @version 1.0 Consolidado
 */

/* ========================================
   PREVENÇÃO DE DRAG E SELEÇÃO DE TEXTO - APENAS DESKTOP
   ======================================== */

/* Aplicar proteções apenas em desktop (dispositivos com mouse) */
@media (hover: hover) and (pointer: fine) {
    /* Prevenir seleção de texto em todos os elementos do carrossel */
    .carousel,
    .carousel *,
    .flickity-viewport,
    .flickity-viewport *,
    .carousel-cell,
    .carousel-cell *,
    .category-btn,
    .category-btn * {
        -webkit-user-select: none !important;
        -moz-user-select: none !important;
        -ms-user-select: none !important;
        user-select: none !important;
        
        /* Prevenir drag padrão do navegador */
        -webkit-user-drag: none !important;
        -khtml-user-drag: none !important;
        -moz-user-drag: none !important;
        -o-user-drag: none !important;
    }

    /* Estilos específicos para links dentro do carrossel */
    .carousel a,
    .carousel-cell a,
    .category-btn {
        -webkit-user-select: none !important;
        -moz-user-select: none !important;
        -ms-user-select: none !important;
        user-select: none !important;
        
        -webkit-user-drag: none !important;
        -khtml-user-drag: none !important;
        -moz-user-drag: none !important;
        -o-user-drag: none !important;
        
        -webkit-touch-callout: none !important;
        -webkit-tap-highlight-color: transparent !important;
    }

    /* Estados visuais para indicar interação durante drag - Desktop */
    .category-btn.is-pressed {
        transform: scale(0.98) !important;
        transition: transform 0.1s ease !important;
    }

    .category-btn.is-dragging {
        opacity: 0.8 !important;
        pointer-events: none !important;
    }

    /* Cursor apropriado para o carrossel - Desktop */
    .carousel,
    .flickity-viewport {
        cursor: grab !important;
        cursor: -webkit-grab !important;
    }

    .carousel:active,
    .carousel.is-dragging,
    .flickity-viewport:active,
    .flickity-viewport.is-dragging {
        cursor: grabbing !important;
        cursor: -webkit-grabbing !important;
    }

    /* Quando estiver arrastando, desabilitar pointer events nos botões - Desktop */
    .carousel.is-dragging .category-btn,
    .flickity-viewport.is-dragging .category-btn {
        pointer-events: none !important;
        cursor: grabbing !important;
        cursor: -webkit-grabbing !important;
    }

    /* Prevenir seleção de texto durante mousedown - Desktop */
    .category-btn::selection,
    .category-btn *::selection {
        background: transparent !important;
    }

    .category-btn::-moz-selection,
    .category-btn *::-moz-selection {
        background: transparent !important;
    }
}

/* Mobile: manter comportamento normal de toque */
@media (max-width: 768px) {
    /* Permitir interação normal em mobile */
    .carousel,
    .flickity-viewport {
        cursor: default;
        /* Melhorar responsividade do toque */
        touch-action: pan-x pinch-zoom;
    }
    
    /* Otimizar botões para mobile - clique instantâneo */
    .category-btn {
        -webkit-touch-callout: none !important;
        -webkit-tap-highlight-color: transparent !important;
        /* Melhorar área de toque */
        min-height: 44px !important;
        padding: 12px 26px !important;
        /* Tornar clique mais responsivo */
        touch-action: manipulation !important;
        user-select: none !important;
        -webkit-user-select: none !important;
        /* Reduzir delay de clique no iOS */
        -webkit-tap-highlight-color: transparent !important;
        cursor: pointer !important;
    }
    
    /* Remover menu de contexto dos links especificamente */
    .carousel a,
    .carousel-cell a,
    .category-btn {
        -webkit-touch-callout: none !important;
        -webkit-context-menu: none !important;
        /* Melhorar responsividade */
        touch-action: manipulation !important;
    }
    
    /* Garantir que botões tenham prioridade sobre drag */
    .carousel-cell {
        touch-action: pan-x;
    }
    
    /* Quando estiver arrastando, temporariamente desabilitar botões */
    .carousel.is-dragging .category-btn {
        pointer-events: none !important;
        touch-action: none !important;
    }
    
    /* Melhorar feedback visual ao tocar */
    .category-btn:active {
        transform: scale(0.95) !important;
        background-color: #f8f9fa !important;
        transition: all 0.1s ease !important;
    }
    
    .category-btn.active:active {
        background-color: #0056b3 !important;
    }
}

/* ========================================
   CONFIGURAÇÕES CONSOLIDADAS - ARQUIVO ÚNICO
   ======================================== */

/* Garantir que containers pais não limitem o carrossel */
.groups-container {
    overflow: visible !important;
    position: relative;
}

.categories-header {
    overflow: visible !important;
}

/* Correções específicas para o carrossel de categorias */
.carousel#categoriesScroll {
    /* Quebrar fora do container pai */
    width: 100vw !important;
    max-width: none !important;
    padding-left: 0 !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    left: 50% !important;
    right: 50% !important;
    position: relative !important;
    z-index: 10 !important;
}

/* Garantir que o viewport tenha padding para alinhamento */
.carousel#categoriesScroll .flickity-viewport {
    width: 100% !important;
    overflow: hidden !important;
    padding-left: 60px !important;
    padding-right: 35px !important;
    box-sizing: border-box !important;
}

/* Garantir que o slider tenha margin negativo */
.carousel#categoriesScroll .flickity-slider {
    margin-left: -12px !important;
}

/* Garantir espaçamento correto das células */
.carousel#categoriesScroll .carousel-cell {
    padding-left: 12px !important;
    margin-right: 0 !important;
}

/* Espaço extra para o primeiro botão - alinhamento com ícone */
.carousel#categoriesScroll .carousel-cell:first-child {
    padding-left: 75px !important;
}

/* Botões sempre visíveis - sem loading */
.carousel#categoriesScroll {
    visibility: visible !important;
    opacity: 1 !important;
    /* Layout horizontal antes do Flickity ser inicializado */
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
}

/* Botões sempre visíveis - sem loading */
.carousel {
    overflow: hidden;
    padding: 10px 0;
    padding-left: 0;
    margin-bottom: 15px;
    width: 100vw;
    max-width: none;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    background: transparent;
    cursor: grab;
    -webkit-tap-highlight-color: transparent;
    /* Sempre visível */
    visibility: visible;
    opacity: 1;
    /* Layout horizontal padrão antes do Flickity */
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    /* Performance otimizations */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    will-change: scroll-position;
    /* Melhorar a suavidade do scroll */
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

.carousel:active {
    cursor: grabbing;
}

.carousel.is-dragging {
    cursor: grabbing;
}

.carousel.is-dragging .carousel-cell {
    pointer-events: none;
}

/* Viewport do Flickity com padding lateral - versão única */
.flickity-viewport {
    overflow: hidden;
    position: relative;
    padding-left: 60px;
    padding-right: 35px;
}

/* Slider do Flickity */
.flickity-slider {
    position: absolute;
    width: 100%;
    height: 100%;
    margin-left: -12px;
    /* Performance otimizations */
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    /* Corrigir o bug de layout inicial */
    visibility: visible;
}

/* Botões sempre visíveis desde o início */
.carousel-cell {
    flex: 0 0 auto;
    min-width: 0;
    padding-left: 12px;
    display: flex;
    align-items: center;
    /* Garantir que não quebra linha */
    flex-shrink: 0;
    white-space: nowrap;
    /* Performance otimizations */
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    /* Sempre visível */
    opacity: 1;
    visibility: visible;
}

/* Botões de categoria - mantendo estilo original do Embla */
.carousel-cell .category-btn {
    display: inline-flex;
    align-items: center;
    padding: 11px 26px;
    background: white;
    color: #374151;
    text-decoration: none;
    border-radius: 20px;
    font-weight: bold;
    font-family: 'Inter', sans-serif;
    font-size: 1.05rem;
    border: none;
    border-bottom: 2px solid rgba(55, 65, 81, 0.08);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
    min-width: fit-content;
    max-width: 200px;
    width: auto;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(55, 65, 81, 0.05);
    flex-shrink: 0;
    user-select: none;
    cursor: pointer;
    position: relative;
    z-index: 100;
}

.carousel-cell .category-btn:hover {
    /* Hover removido para manter visual limpo */
    text-decoration: none;
}

.carousel-cell .category-btn:active {
    transform: translateZ(1px) scale(1.005);
    -webkit-transform: translateZ(1px) scale(1.005);
    -ms-transform: scale(1.005);
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.06);
}

.carousel-cell .category-btn.active {
    background: #007bff;
    border-color: #007bff;
    border-bottom: 2px solid #0056b3;
    color: #ffffff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06), 0 2px 4px rgba(0, 123, 255, 0.25);
}

.carousel-cell .category-btn.active:hover {
    background: #0056b3;
    border-color: #0056b3;
    /* Mantém apenas o hover do botão ativo */
}

/* Ícones nos botões */
.carousel-cell .category-btn i {
    margin-right: 6px;
    font-size: 16px;
}

.carousel-cell .category-btn:only-child i {
    margin-right: 0;
}

/* Código duplicado removido */

/* ========================================
   CORREÇÕES FINAIS E CONTAINERS
   ======================================== */

/* Garantir que não há scroll horizontal indesejado */
body {
    overflow-x: hidden;
}

/* Correção para containers que podem interferir */
.main-content,
.container,
.groups-grid-wrapper {
    overflow: visible !important;
}

/* Garantir que o carrossel apareça acima de outros elementos */
.carousel#categoriesScroll {
    z-index: 10 !important;
}

/* Hover específico para o carrossel */
.carousel#categoriesScroll .carousel-cell .category-btn:hover {
    /* Hover removido para manter visual limpo */
    text-decoration: none !important;
}

/* Garantir estilos corretos dos botões no carrossel */
.carousel#categoriesScroll .carousel-cell .category-btn {
    padding: 11px 26px !important;
    background: white !important;
    color: #374151 !important;
    border-radius: 20px !important;
    font-weight: bold !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 1.05rem !important;
    border: none !important;
    border-bottom: 2px solid rgba(55, 65, 81, 0.08) !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(55, 65, 81, 0.05) !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Estilos para mobile */
@media (max-width: 768px) {    .carousel {
        padding: 15px 0 20px 0;
        width: 100vw;
        left: 50%;
        right: 50%;
        margin-left: -50vw;
        margin-right: -50vw;
        margin-bottom: 20px;
        z-index: 15;
    }
      /* Configurações específicas para mobile */
    .carousel#categoriesScroll {
        width: 100vw !important;
        left: 50% !important;
        right: 50% !important;
        margin-left: -50vw !important;
        margin-right: -50vw !important;
        padding: 15px 0 20px 0 !important;
        padding-left: 0 !important;
        margin-bottom: 20px !important;
        z-index: 20 !important;
        position: relative !important;
    }
    
    .flickity-viewport {
        padding-left: 20px;
        padding-right: 20px;
        padding-bottom: 5px;
    }
    
    /* Viewport específico mobile */
    .carousel#categoriesScroll .flickity-viewport {
        padding-left: 20px !important;
        padding-right: 20px !important;
        padding-bottom: 10px !important;
        overflow: visible !important;
    }
      .carousel-cell {
        padding-left: 12px;
        margin-bottom: 5px;
    }
    
    /* Células específicas mobile */
    .carousel#categoriesScroll .carousel-cell {
        padding-left: 12px !important;
        margin-bottom: 5px !important;
    }
    
    /* Espaço extra para o primeiro botão no mobile */
    .carousel-cell:first-child,
    .carousel#categoriesScroll .carousel-cell:first-child {
        padding-left: 40px !important;
    }      .carousel-cell .category-btn {
        padding: 10px 24px;
        font-size: 1rem;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
        border: 1px solid rgba(0, 0, 0, 0.03);
        border-bottom: 1px solid rgba(55, 65, 81, 0.05) !important;
        min-height: 40px;
        margin-right: 4px;
    }
    
    /* Botões específicos mobile */
    .carousel#categoriesScroll .carousel-cell .category-btn {
        padding: 10px 24px !important;
        font-size: 1rem !important;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04) !important;
        border: 1px solid rgba(0, 0, 0, 0.03) !important;
        border-bottom: 1px solid rgba(55, 65, 81, 0.05) !important;
        min-height: 40px !important;
        display: flex !important;
        align-items: center !important;
        margin-right: 4px !important;
    }
    
    /* Adicionar espaço extra para o último botão para poder arrastar até o meio */
    .carousel-cell:last-child,
    .carousel#categoriesScroll .carousel-cell:last-child {
        padding-right: 50vw !important;
    }
    
    /* Garantir que containers pais não cortem o carrossel no mobile */
    .groups-container,
    .categories-header,
    .main-content {
        overflow: visible !important;
        position: relative !important;
        z-index: 1 !important;
    }
}

/* Para dispositivos que suportam hover (desktop) */
@media (hover: hover) and (pointer: fine) {
    .carousel {
        width: 100vw;
        left: 50%;
        right: 50%;
        margin-left: -50vw;
        margin-right: -50vw;
        max-width: none;
        margin-bottom: 10px;
    }
    
    /* Configurações específicas desktop */
    .carousel#categoriesScroll {
        width: 100vw !important;
        max-width: none !important;
        padding-left: 0 !important;
        left: 50% !important;
        right: 50% !important;
        margin-left: -50vw !important;
        margin-right: -50vw !important;
    }
    
    .carousel-cell {
        padding-left: 12px;
    }
    
    /* Células específicas desktop */
    .carousel#categoriesScroll .carousel-cell {
        padding-left: 12px !important;
    }
    
    /* Espaço extra para o primeiro botão no desktop */
    .carousel-cell:first-child,
    .carousel#categoriesScroll .carousel-cell:first-child {
        padding-left: 75px !important;
    }    /* Bordas mais visíveis no desktop */
    .carousel-cell .category-btn {
        cursor: pointer;
    }
    
    .carousel-cell .category-btn:hover {
        cursor: pointer;
        /* Hover removido para manter visual limpo */
    }
    
    .carousel-cell .category-btn.active {
        border-bottom: 2px solid #0056b3 !important;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06), 0 2px 4px rgba(0, 123, 255, 0.25) !important;
    }
    
    /* Espaço extra para o último botão no desktop */
    .carousel-cell:last-child,
    .carousel#categoriesScroll .carousel-cell:last-child {
        padding-right: 200px !important;
    }
}

/* Estilos específicos para desktop */
@media (min-width: 769px) {
    .carousel {
        overflow-x: hidden;
        overflow-y: hidden;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
    }
    
    .flickity-viewport {
        cursor: grab;
        -webkit-cursor: grab;
    }
    
    .flickity-viewport:active {
        cursor: grabbing;
        -webkit-cursor: grabbing;
    }
    
    .flickity-viewport.is-dragging {
        cursor: grabbing !important;
        -webkit-cursor: grabbing !important;
    }
    
    .carousel-cell .category-btn {
        cursor: pointer;
    }
}

/* Estilos específicos para mobile (drag habilitado) */
@media (max-width: 768px) {
    .carousel {
        overflow: hidden;
    }
    
    .flickity-viewport {
        cursor: default;
        touch-action: pan-x pinch-zoom;
    }
    
    .carousel-cell .category-btn {
        cursor: default;
        user-select: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
    }
}

/* Estados de drag específicos para mobile */
@media (max-width: 768px) {
    .carousel.is-dragging .carousel-cell .category-btn {
        pointer-events: none;
    }
    
    .carousel.is-dragging .flickity-viewport {
        cursor: grabbing;
    }
}

/* Animações mais suaves e lentas */
.carousel-cell .category-btn {
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

/* Melhorar a física do Flickity com movimento mais suave */
.flickity-slider {
    transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

/* Botões sempre visíveis - removido loading */
.carousel .carousel-cell {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.carousel.flickity-enabled .carousel-cell {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Quando Flickity estiver ativo, resetar flexbox padrão */
.carousel.flickity-enabled {
    display: block !important;
    overflow: hidden !important;
}

.carousel#categoriesScroll.flickity-enabled {
    display: block !important;
    overflow: hidden !important;
}

/* Desabilitar botões padrão do Flickity */
.flickity-button {
    display: none !important;
}

/* Esconder scrollbar nativa do flexbox inicial */
.carousel:not(.flickity-enabled) {
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* Internet Explorer 10+ */
    /* Força layout horizontal desde o início */
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 0 !important;
}

.carousel:not(.flickity-enabled)::-webkit-scrollbar {
    display: none; /* WebKit browsers */
}

.carousel#categoriesScroll:not(.flickity-enabled) {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    /* Força layout horizontal para o carrossel específico */
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 0 !important;
    overflow-x: hidden !important;
    overflow-y: hidden !important;
}

.carousel#categoriesScroll:not(.flickity-enabled)::-webkit-scrollbar {
    display: none !important;
}

/* Células sempre em linha */
.carousel:not(.flickity-enabled) .carousel-cell {
    display: inline-flex !important;
    flex-shrink: 0 !important;
    align-items: center !important;
}

.carousel#categoriesScroll:not(.flickity-enabled) .carousel-cell {
    display: inline-flex !important;
    flex-shrink: 0 !important;
    align-items: center !important;
}

/* ========================================
   OTIMIZAÇÕES ESPECÍFICAS PARA MOBILE - CLIQUES INSTANTÂNEOS
   ======================================== */

/* Configurações globais para melhorar responsividade mobile */
@media (max-width: 768px) {
    /* Remover delay de 300ms do iOS/Android */
    * {
        -webkit-tap-highlight-color: transparent;
        -webkit-touch-callout: none;
    }
    
    /* Configurações específicas do Flickity para mobile */
    .flickity-viewport {
        /* Permitir toque horizontal, bloquear vertical */
        touch-action: pan-x pinch-zoom !important;
        -webkit-touch-callout: none !important;
    }
    
    /* Botões com área de toque otimizada */
    .carousel-cell .category-btn {
        /* Área mínima recomendada para toque (44px) */
        min-height: 44px !important;
        min-width: 44px !important;
        /* Otimizar para toque */
        touch-action: manipulation !important;
        -webkit-touch-callout: none !important;
        -webkit-tap-highlight-color: transparent !important;
        /* Feedback imediato */
        transition: all 0.1s ease !important;
    }
    
    /* Estados de toque para feedback visual */
    .carousel-cell .category-btn:hover {
        /* Desabilitar hover em mobile */
        background: white !important;
        transform: none !important;
    }
    
    .carousel-cell .category-btn:active {
        /* Feedback visual imediato ao tocar */
        transform: scale(0.96) !important;
        background-color: #e9ecef !important;
    }
    
    .carousel-cell .category-btn.active:active {
        background-color: #0056b3 !important;
        transform: scale(0.96) !important;
    }
    
    /* Prevenir interferência do drag com cliques */
    .flickity-slider {
        /* Configurar para não interferir com cliques nos botões */
        pointer-events: auto !important;
    }
    
    /* Durante drag, temporariamente desabilitar botões */
    .carousel.is-pointer-down .category-btn,
    .carousel.is-dragging .category-btn {
        pointer-events: none !important;
        touch-action: none !important;
    }
    
    /* Reset depois do drag */
    .carousel:not(.is-dragging) .category-btn {
        pointer-events: auto !important;
        touch-action: manipulation !important;
    }
}