﻿.btn-round-categoria.collapsed {
    background-color: #ff9c1b;
}

.btn-round-categoria.active {
    background-color: #f24122;
}

.btn-round-categoria:not(.active) {
    color: #fff;
    background-color: #ff9c1b;
}

.navbar {
    background-color: #ff9c1b;
    color: white;
    border-bottom-color: #ff9c1b !important;
}

body {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    background-attachment: fixed;
    background-color: #ff9c1b;
    margin-bottom: 80px;
}

.header {
    border-bottom-color: transparent !important;
    background-color: #ff9c1b;
}

.footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    white-space: nowrap;
    line-height: 40px; /* Vertically center the text there */
    background-color: #ff9c1b;
    overflow: hidden;
    border-top-color: transparent !important;
    height: 10vh !important;
}

nav > div a.nav-item.nav-link,
nav > div a.nav-item.nav-link.active {
    border: none;
    /*padding: 18px 25px;*/
    color: #fff;
    background: #ff9c1b;
    border-radius: 0;
}

#loader {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background-color: rgb(249,249,249);
    color: #ff9c1b;
    flex: 0 0 120px;
}

.load-item {
    font-size: 20px;
    margin-top: 20px;
    margin-bottom: 20px;
    color: #ff9c1b;
}

#btnAcima, #btnAbaixo {
    display: none;
    position: fixed;
    right: 10px;
    z-index: 99;
    border: none;
    outline: none;
    background-color: red;
    color: white;
    cursor: pointer;
    bottom: 75px;
    height: 42px;
}

    #btnAcima:hover, #btnAbaixo:hover {
        background-color: #555;
    }

#valTotalMercadoria {
    display: none;
    position: fixed;
    right: 50px;
    border: none;
    outline: none;
    background-color: red;
    color: white;
    cursor: pointer;
    bottom: 75px;
    padding: 9px;
}

/* Animação de fade-in */
@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.fade-in {
    animation: fadeIn 0.5s ease-in-out;
}

/* Estilo do esqueleto de carregamento */
.skeleton-loading {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.skeleton-item {
    background-color: #e0e0e0;
    border-radius: 4px;
    height: 50px; /* Ajuste conforme necessário */
    animation: pulse 1.5s infinite ease-in-out;
}

/* Animação de pulsação */
@keyframes pulse {
    0% {
        opacity: 0.2;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0.2;
    }
}

/* Transição suave para o collapse */
.collapse-categoria {
    transition: all 0.5s ease-in-out;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
}

    .collapse-categoria.show {
        max-height: 1000px; /* Ajuste conforme necessário */
        opacity: 1;
    }


.text-body.text-wrap {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.card-conteudo{
    min-height: 150px;
}
