@font-face {
    font-family: 'Normalbai';
    src: url('../fonts/Bai Jamjuree/BaiJamjuree-Medium.ttf') format('truetype');
}

@font-face {
    font-family: 'Blodbai';
    src: url('../fonts/Bai Jamjuree/BaiJamjuree-Bold.ttf') format('truetype');
}

@font-face {
    font-family: 'Regularlbai';
    src: url('../fonts/Bai Jamjuree/BaiJamjuree-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'normalsora';
    src: url('../fonts/Sora/Sora-Variable.ttf') format('truetype');
}

@font-face {
    font-family: 'Blodsora';
    src: url('../fonts/Sora/Sora-Bold.ttf') format('truetype');
}



.fuenteNormalbai{
    font-family: 'Normalbai';
}

.fuenteBlodbai{
    font-family: 'Blodbai';
}

.fuenteRegularlbai{
    font-family: 'Regularlbai';
}

.fuenteNormalsora{
    font-family: 'normalsora';
}

.fuenteBlodsora {
    font-family: 'Blodsora';
}


.colorprimario{
    color: #7C5142;
}

.coloroter{
    color: #D8827D;
}


#navpc{
    display: block;
}

#navmovil{
    display: none;
}


nav{
    background-color: #D8827D ;
}

nav a{
    color: white !important;
    font-family: 'Blodsora';
}

.navbar-nav .nav-link.active {
    position: relative;
}

.navbar-nav .nav-link.active::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0px; /* Ajusta la posición de la línea */
    width: 100%;
    height: 2px; /* Grosor de la línea */
    background-color: #7C5142; /* Color de la línea */
}

.bottom-navbar {
  display: none;
}


.menu{
    display: none;
}


@media screen and (max-width: 768px) {

    .navbar-nav .nav-link.active::after {
        height: 0px; /* Grosor de la línea */
        background-color: #7c514200; /* Color de la línea */
    }

    #navpc{
        display: none;
    }
    
    #navmovil{
        display: block;
    }



    }


    .alert-custom {
        background: white;
        color: black;
        padding: 10px 15px;
        border-radius: 8px;
        box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
        transform: translateY(100px);
        opacity: 0;
        transition: transform 0.5s ease, opacity 0.5s ease;
    }

    .show-alert {
        transform: translateY(0);
        opacity: 1;
    }

    .check-icon {
        font-size: 20px;
    }


.principal{
    margin-top: -85px;
}


@media screen and (max-width: 768px) {
    .principal{
        margin-top: 0px;
    }
    
}

.cardcategori{
    border-radius: 15px 15px 15px 15px;
}

#categoriadiv a{
    text-decoration: none;
    color: black;
}

#categorySidebar a{
    text-decoration: none;
    color: black;
}

#productsWrapper{
    min-height: 520px;
}

.cardcategori .imgproducto{
    width: 100%; 
    height: 200px; 
    object-fit: cover; 
    border-radius: 15px 15px 0 0;
}


.btn-primary{
    background-color: #D9847E;
    border-color: #D9847E;
    --bs-btn-active-bg: #aa6964;
    --bs-btn-active-border-color: #aa6964;
}

.btn-primary:hover{
    background-color: #aa6964;
    border-color: #aa6964;
}


#nosotros {
    position: relative;
    background-image: url('../imagenes/nosotros.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

#nosotros::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Opacidad del fondo */
    z-index: 1; /* Se queda detrás del contenido */
}

#nosotros .contenido {
    position: relative;
    z-index: 2; /* Asegura que el texto esté por encima de la capa oscura */
    color: white !important; /* Mantiene el texto blanco */
}

#nosotros .contenido h1 {
    font-family: 'Blodbai';
}

#nosotros .contenido p {
    font-family: 'Normalbai';
    text-align: justify;
}


.accordion-button::after {
    background-image: url(../imagenes/mas.svg) !important;
}


.accordion-button:not(.collapsed) {
color: black !important;
background: white;

}

.accordion-button:focus{
    --bs-btn-active-bg: #7C504D !important;
    box-shadow: var(--bs-btn-active-bg) !important;
   
}



#acordeon h2{
    color:  #D9847E !important;
}



       
        /* BOTÓN FLOTANTE PARA CATEGORÍAS */
        .category-toggle {
            position: fixed;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            background-color: black;
            color: white;
            padding: 7px;
            border-radius: 0 5px 5px 0;
            cursor: pointer;
            transition: all 0.3s ease-in-out;
            font-size: 18px;
            display: flex;
            align-items: center;
            z-index: 1000;
            display: none;
        }

  

        .category-toggle span {
            display: none;
        }

        .category-toggle:hover span {
            display: inline;
        }


        

        /* SIDEBAR DE CATEGORÍAS */
        .category-sidebar {
            position: fixed;
            left: -250px;
            top: 0;
            width: 250px;
            height: 100vh;
            background: white;
            padding: 20px;
            box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
            transition: left 0.3s ease-in-out;
            z-index: 999;
        }

        .category-sidebar.active {
            left: 0;
        }

        .category-list {
            list-style: none;
            padding: 0;
        }

        .category-list li {
            padding: 10px;
            cursor: pointer;
            font-family: 'normalsora';
        }


        .category-list li i {
            float: right;
        }
        .category-list li:hover {
            background: #ddd;
        }

        .categoryclick i {
            transition: opacity 0.3s ease;
          }


          #categoriadiv h4{
            font-family: 'Blodbai';
          }

          #categorySidebar i{
            color: #7C504D;
          }

          #categoriadiv i{
            color: #7C504D;
          }

          #categoriadiv hr{
            border: 0; /* Elimina el borde por defecto */
            border-color: #7C504D !important;  /* Color sólido */
            background-color: #7C504D !important; /* Color sólido */
            height: 2px !important;   
          }

          .produt hr{
            border-color: #7c504dbd !important;
          }

          .buscador{
            width: 50%;
        }


        @media screen and (max-width: 768px) {

        /* BOTÓN FLOTANTE PARA CATEGORÍAS */
        .category-toggle {
            display: block;
        }

        #categoriadiv{
            display: none;
        }

        .buscador{
            width: 100%;
        }


        }


        /* PRODUCTOS */
        .product-card {
            border-radius: 10px;
            padding: 15px;
            background: white;
            text-align: center;
            
        }

        .product-card img {
            transition: transform 0.3s ease; /* Transición suave */
            width: 100%; /* La imagen ocupa el 100% del ancho del contenedor */
            height: 100%; /* La imagen ocupa el 100% de la altura del contenedor */
            
        }
        
        .cardimg{
            width: 100%;
            overflow: hidden; /* Oculta la parte que sobresale */
            position: relative;
        }

        .cardimg img:hover {
            transform: scale(1.2); /* Zoom suave */
        }
 


        .old-price {
            text-decoration: line-through;
            color: gray;
        }

        .new-price {
            color: #D8827D;
            font-weight: bold;
        }

        .product-card{
            animation: fadeInScale 0.5s ease-out forwards; /* Agrega la animación */
        }

    
        .hidden {
            animation: fadeOutScale 0.5s ease-out forwards; /* Agrega la animación */
        }

        /* Animación de entrada más avanzada */
        @keyframes fadeInScale {
            0% {
                opacity: 0;
                transform: scale(0.8); /* Más pequeño y transparente */
            }
            50% {
                opacity: 0.5;
                transform: scale(1.05); /* Crecer un poco más del tamaño final */
            }
            100% {
                opacity: 1;
                transform: scale(1); /* Volver al tamaño original */
            }
        }

        /* Animación de entrada más avanzada */
        @keyframes fadeOutScale {
            0% {
                opacity: 1;
                transform: scale(1); /* Más pequeño y transparente */
            }
            50% {
                opacity: 0.5;
                transform: scale(1.05); /* Crecer un poco más del tamaño final */
            }
            100% {
                opacity: 0;
                transform: scale(0.8); /* Volver al tamaño original */
            }
        }


.btnicon .btn{
    border-radius: 0px;
    margin-right: 10px;
}

.btnicon i {
    position: relative; /* Necesario para posicionar el pseudo-elemento en el centro */
    transition: transform 0.3s ease; /* Transición para el pop */
}

/* Efecto de 'pop' al pasar el cursor */
.btnicon i:hover {
    transform: scale(1.2); /* Aumenta el tamaño del ícono */
}

/* Efecto de ondas al hacer clic */
.btnicon i.clicked::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 50px;
    height: 50px;
    background: rgba(255, 0, 0, 0.3); /* Color de la onda (rojo en este caso) */
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(1);
    animation: wave 0.6s ease-out; /* Animación de la onda */
    pointer-events: none; /* Para que no interfiera con el clic */
}

/* Animación para las ondas */
@keyframes wave {
    0% {
        width: 50px;
        height: 50px;
        opacity: 0.6;
    }
    100% {
        width: 150px;
        height: 150px;
        opacity: 0;
    }
}






.img-thumbnail {
background-color: #00000000 !important;

}

.owl-carousel .owl-item {
    display: flex !important;
    justify-content: center;
    align-items: center;
    width: 100px !important;
    margin: 5px; /* Espacio entre miniaturas */
}

.owl-theme .item {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100px !important;
    height: 100px; /* Asegura un tamaño uniforme */
    margin: 5px;
}

.owl-theme .item img {
    max-width: 100%;
    max-height: 100%;
    object-fit: cover; /* Ajusta la imagen sin deformarla */
    border-radius: 8px; /* Opcional: Bordes redondeados */
}

.owl-item .selected {
    
    border: 2px solid #000000; /* Borde alrededor de la miniatura seleccionada */
}

.fondo-producto .colorwhite h2{
    color: white;
}

.fondo-producto .colorwhite h3{
    color: white;
}

.fondo-producto .colorwhite p{
    color: white;
}

.fondo-producto .colorwhite input {
    width: 5ch; /* Se ajusta a 5 caracteres */
    min-width: 50px;
}

.fondo-producto .colorwhite .btn-dark {
    background-color: #00000000;
    border: 2px, solid, white;
    height: 55px;
}


.fondo-producto .colorwhite input, #decrease, #increase{
    font-family: 'normalsora';
    font-size: 25px;
    color: white;
    background-color: rgba(255, 255, 255, 0);
    border: 2px, solid, white;
}



/* CSS DEL LOGIN*/


#login{
    overflow-y: hidden;
    overflow-x: hidden;
}

.contenedortotdo{
    height: 100vh;
}

.divizquierda{
    background: #D8827D !important;
}

.txtprimario3{
    color: white;
}

#login img{
   width: 200px;
}

.txtregistrar{
    color: #D8827D !important;
    text-decoration: none;
}

@media (max-width: 768px) {
    #login{
        overflow-y: auto;
    }
}


.perfil li a{
    color: #bebebe !important;

}

.perfil li  .active{
    color: #D8827D !important;

}

.ubicacion h5{
    color: #7C504D !important;
}


.seguridad .btn.disabled, .btn:disabled, fieldset:disabled .btn {
    background-color: #7C504D !important;
    border-color: #7C504D !important;
}


.carrucelsegiomiento{
    width: 80px !important;
}

.pedidos li a{
    cursor: pointer;
    color: #000000 !important;
    --bs-dropdown-link-active-bg: #D8827D;
}

.pedidos .btn-outline-dark {
    --bs-btn-color: #D8827D !important; 
    --bs-btn-border-color: #83242400; 
    --bs-btn-hover-color: #D8827D;
    --bs-btn-hover-bg: #f3f3f300 !important;
    --bs-btn-hover-border-color: #ffffff00;
    --bs-btn-focus-shadow-rgb: 33, 37, 41;
    --bs-btn-active-color: #D8827D;
    --bs-btn-active-bg: #05040400;
    --bs-btn-active-border-color: #d8827d00;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #D8827D;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #D8827D;
    --bs-gradient: none;
}

#checkoutbody{
    overflow-x: hidden;
    
}

.checkout img{
    width: 90px;
}

.formnon{
    display: flex;
    width: 100%;
}

#loadingModal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.822); /* Fondo oscuro con opacidad */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999; /* Asegura que el modal esté por encima de todo */
}

#loadingModal .modal-dialog {
    margin: 0;
    max-width: 400px; /* Puedes cambiar este valor para el tamaño del modal */
    width: 100%;
}

#loadingModal .modal-content {
    background-color: transparent; /* Sin color de fondo */
    border: none; /* Eliminar el borde */
}

#loadingModal .modal-body {
    padding: 20px;
    color: white; /* Puedes cambiar el color del texto si es necesario */
}



/* CSS DEL FOOTER*/
footer{
    background-color: #7C504D;
    color: white;
    font-family: 'normalsora';
    padding: 20px;
}

footer img {
    width: 200px; /* Ajusta el tamaño de la imagen */
    height: 200px !important; /* Ajusta el tamaño de la imagen */
    justify-content: center; /* Centrar horizontalmente */
    align-items: center; /* Centrar verticalmente */
}

.footerc{
    background-color: white;
    width: 100%;
}

footer a{
    text-decoration: none;
}

.colortecno{
    color:  #D9847E;
}