.text-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Trunca o texto após 2 linhas */
.text-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Estilos do Modal de Carrinho */
#modalCarrinho .modal-content {
    border: none;
    border-radius: 12px;
    overflow: hidden;
}

#modalCarrinho .table-hover tbody tr:hover {
    background-color: #f8f9fa;
    transition: background-color 0.2s ease;
}

#modalCarrinho .btn-remover-item {
    transition: all 0.2s ease;
}

#modalCarrinho .btn-remover-item:hover {
    transform: scale(1.1);
}

#modalCarrinho .item-carrinho {
    transition: all 0.3s ease;
}

#modalCarrinho .item-carrinho:hover {
    box-shadow: 0 4px 8px rgba(139, 24, 116, 0.15);
}

/* Spinner customizado */
#modalCarrinho .spinner-border {
    width: 3rem;
    height: 3rem;
    border-width: 0.3rem;
    color: #8B1874;
}

/* Animação suave para imagens */
#modalCarrinho img {
    transition: transform 0.2s ease;
}

#modalCarrinho img:hover {
    transform: scale(1.05);
}

/* Estilo do badge de quantidade */
#modalCarrinho .badge {
    padding: 0.5rem 0.75rem;
}

/* Controles de quantidade no carrinho */
#modalCarrinho .carrinho-qtd-control .btn {
    border-color: #8B1874;
    color: #8B1874;
    transition: all 0.2s ease;
}

#modalCarrinho .carrinho-qtd-control .btn:hover {
    background-color: #8B1874;
    color: white;
    border-color: #8B1874;
}

#modalCarrinho .carrinho-qtd-control .btn:active {
    background-color: #694169 !important;
    border-color: #694169 !important;
}

#modalCarrinho .carrinho-qtd-control .input-qtd-carrinho {
    border-color: #8B1874;
    font-weight: 600;
    color: #694169;
    pointer-events: none;
}

#modalCarrinho .carrinho-qtd-control .input-qtd-carrinho:focus {
    border-color: #8B1874;
    box-shadow: 0 0 0 0.2rem rgba(139, 24, 116, 0.25);
}

/* Responsividade - ajustes mobile */
@media (max-width: 767px) {
    #modalCarrinho .modal-dialog {
        margin: 0.5rem;
    }

    #modalCarrinho .modal-body {
        padding: 1rem !important;
    }

    #modalCarrinho .card-body {
        padding: 0.75rem;
    }

    #modalCarrinho .carrinho-qtd-control {
        max-width: 100%;
    }
}