input:focus { border-color: black !important; box-shadow: none !important; }
select:focus { border-color: black !important; box-shadow: none !important; }
textarea:focus { border-color: black !important; box-shadow: none !important; }
button:focus { box-shadow: none !important; }

label::after { position: relative !important; }

.login {
    border-radius: 0.50rem;
    background-color: #00000070;
    padding: 16px;
    box-shadow: 0px 0px 10px 0px #999;
}

.login input:hover {
    outline: 0;
    box-shadow: none;
}

.pos-eye {
    position: absolute;
    top: 15px;
    right: 15px;
    cursor: pointer;
    z-index: 999;
}

.bg-vs-code { background-color: #282a36 !important; }

.w-100vh { width: 100vw !important; }
.h-100vh { height: 100vh !important; }

.bg-ccc { background-color: #CCC !important; }

.bg-e9 { background-color: #e9ecef !important; }

.bg-f2 { background-color: #f2f2f2 !important; }

.right-14 { right: 14px; }

.item-menu:hover div {
    color: black !important;
    background-color: white !important;
    border-radius: 20px;
}

.item-menu-active div {
    color: black !important;
    background-color: white !important;
    border-radius: 20px;
}

.logout-hover:hover { color: #ff283c !important; }
.logout-hover:hover img:nth-child(1) { display: none !important; }
.logout-hover:hover img:nth-child(2) { display: block !important; }

.user-hover:hover { color: orange !important; }
.user-hover:hover img:nth-child(1) { display: none !important; }
.user-hover:hover img:nth-child(2) { display: block !important; }

.border-radius-25rem { border-radius: 0.25rem !important; }

.border-radius-375rem { border-radius: 0.375rem !important; }

.border-radius-50rem { border-radius: 0.50rem !important; }

.border-radius-75rem { border-radius: 0.75rem !important; }

.menu {
    width: 60px;
    height: 60px;
    cursor: pointer;
}

.hamburguer {
    position: relative;
    display: block;
    background: #ffffff80;
    width: 40px;
    height: 2px;
    top: 20px;
    left: 10px;
    transition: 0.5s ease-in-out;
}

.hamburguer:before,
.hamburguer:after {
    background: #ffffff80;
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    transition: 0.5s ease-in-out;
}

.hamburguer:before {
    top: -10px;
}

.hamburguer:after {
    bottom: -10px;
}

input:checked ~ label .hamburguer {
    transform: rotate(45deg);
}

input:checked ~ label .hamburguer:before {
    transform: rotate(90deg);
    top: 0;
}

input:checked ~ label .hamburguer:after {
    transform: rotate(90deg);
    bottom: 0;
}

.tr-hover:hover td {
    cursor: pointer;
    background-color: #0d6efd !important;
    color: #fff !important;
}

.tr-selected td {
    cursor: pointer;
    background-color: #0d6efd !important;
    color: #fff !important;
}

.box-shadow-999 { box-shadow: 0px 0px 8px 1px #999 !important; }

.box-shadow-none { box-shadow: none; }

.btn-buscar:hover { background-color: #0d6efd !important; }

.border-ccc { border: 1px solid #ccc !important; }

.b-b-ccc { border-bottom: 1px solid #E3E5E7 !important; }

.option:hover {
    background-color: #999;
    color: white;
    border-radius: 0.375rem;
    cursor: pointer;
}

.min-w-10 { width: 10% !important; }

.btn-pct:hover { background-color: #0db5fd !important; }

.cart-modal {
    position: fixed;
    top: 0;
    right: -100%; /* Escondido por padrão */
    width: 100%;
    max-width: 509px;
    height: 100%;
    background-color: white;
    box-shadow: -4px 0 10px rgba(0, 0, 0, 0.1);
    transition: right 0.3s ease-in-out;
    z-index: 1030;
}

.cart-modal.open {
    right: 0;
}
.toast {
    position: fixed;
    bottom: 16px;
    left: 16px;
    background-color: #198754; /* Cor verde do Bootstrap */
    color: white;
    padding: 12px 20px;
    border-radius: 50rem; /* rounded-pill */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease-in-out;
    transform: translateX(200%);
    z-index: 1000;
}
.toast.show {
    transform: translateX(0);
}
.cart-item-image {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: 0.25rem;
}
.desc {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

.image-viewer {
    position: relative;
    width: 100%;
    height: 400px;
    overflow: hidden;
    background-color: #ccc;
}

.image-slide {
    width: 100%;
    height: 100%;
    
    /* Posição absoluta para empilhar as imagens */
    position: absolute;
    top: 0;
    left: 0;

    /* Opacidade inicial para esconder as imagens */
    opacity: 0;

    /* Transição suave de opacidade e movimento */
    transition: opacity 0.6s ease-in-out;
}

.image-slide.active {
    /* Opacidade 1 para a imagem ativa */
    opacity: 1;
}

/* Mantenha o estilo dos contadores e indicadores */
.image-counter {
    position: absolute;
    top: 10px;
    left: 10px;
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    padding: 5px 10px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: bold;
    z-index: 10; /* Garante que o contador fica por cima */
}

.slide-indicators {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    z-index: 10; /* Garante que os pontos ficam por cima */
}

.dot {
    height: 10px;
    width: 10px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.dot.active {
    background-color: #333;
}

.thumbnail {
    width: 70px;
    height: 70px;
    border: 2px solid transparent;
    border-radius: 4px;
    overflow: hidden;
    cursor: pointer;
    transition: border-color 0.2s ease-in-out;
    box-sizing: border-box; /* Garante que a borda não adicione largura */
}

.thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.thumbnail.active {
    border-color: #007bff; /* Borda azul para a miniatura ativa */
}

.thumbnail.counter {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f0f0f0;
    border-color: #ccc;
}

.thumbnail.counter span {
    font-weight: bold;
    color: #555;
    font-size: 16px;
}

#main-product-image {
    width: 100%;
    height: 600px;
}

.mes-hover:hover {
    background-color: #e2e3e5 !important;
}