/* ==========================================================================
   CATEGORIAS
   ========================================================================== */

.categories{

    padding:32px 0;

}

/* ==========================================================================
   LISTA
   ========================================================================== */

.categories-list{

    display:flex;

    gap:18px;

    overflow-x:auto;

    overflow-y:hidden;

    padding:6px 4px 12px;

    scroll-behavior:smooth;

    scroll-snap-type:x proximity;

    -webkit-overflow-scrolling:touch;

    scrollbar-width:none;

}

.categories-list::-webkit-scrollbar{

    display:none;

}

/* ==========================================================================
   ITEM
   ========================================================================== */

.category-item{

    flex-shrink:0;

    width:96px;

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:12px;

    cursor:pointer;

    user-select:none;

    /* 🚀 MELHORIA 1: Adiciona um preenchimento invisível que expande a área de clique
       (o usuário não precisa acertar exatamente o centro do círculo para clicar) */
    padding: 10px 6px;
    border-radius: var(--radius-md, 12px);

    /* 🚀 MELHORIA 2: Evita o atraso de toque de 300ms que alguns navegadores móveis dão */
    touch-action: manipulation;

    transition: 
        transform .2s var(--animation-easing-smooth, ease),
        background-color .2s;

    scroll-snap-align: start;


}

/* Efeito sutil ao passar o mouse (Desktop) */
@media (hover: hover) {
    .category-item:hover {
        transform: translateY(-3px);
    }
}
.category-item:active {
    transform: scale(0.92) !important;
    transition: transform 0.08s ease; /* Resposta ultrarrápida no toque */
}
.category-item:hover{

    transform:translateY(-4px);

}

/* ==========================================================================
   ÍCONE
   ========================================================================== */

.category-icon{

    width:76px;

    height:76px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:var(--surface);

    border:2px solid var(--border);

    box-shadow:var(--shadow-xs);

    transition:
        transform .2s,
        background .2s,
        border-color .2s,
        box-shadow .2s;

}

.category-icon img{

    width:36px;

    height:36px;

    object-fit:contain;

    transition:transform .25s;

}

.category-item:hover .category-icon{

    transform:translateY(-3px);

    box-shadow:var(--shadow-md);

}

.category-item:hover .category-icon img{

    transform:scale(1.08);

}

/* ==========================================================================
   TEXTO
   ========================================================================== */

.category-name{

    font-size:.86rem;

    font-weight:600;

    color:var(--text);

    text-align:center;

    line-height:1.35;

    transition:color .2s;

}

/* ==========================================================================
   ATIVO
   ========================================================================== */

.category-item.active .category-icon{

    background:var(--primary);

    border-color:var(--primary);

    box-shadow:0 10px 25px rgba(0,0,0,.12);

}

.category-item.active .category-icon img{

    transform:scale(1.08);

}

.category-item.active .category-name{

    color:var(--primary);

    font-weight:700;

}

/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width:768px){

    .categories{

        padding:24px 0;

    }

    .categories-list{

        gap:14px;

    }

    .category-item{

        width:84px;

    }

    .category-icon{

        width:68px;

        height:68px;

    }

    .category-icon img{

        width:32px;

        height:32px;

    }

    .category-name{

        font-size:.8rem;

    }

}