/*shadow*/
.shadowgrad{
    mask-image:linear-gradient(to bottom, rgba(255, 255, 255, 1) 70%, rgba(255, 255, 255, 0));
}

/*Header*/

.gradient-link {
  background: linear-gradient(to right, #e91e63, #f8bbd0); /* rosa oscuro a rosa claro */
  color: white !important;
  padding: 8px 16px;
  border-radius: 4px;
  display: block;
  width: 100%; /* ocupa todo su espacio */
 
  transition: background 0.3s ease;
}

.gradient-link:hover {
  background: linear-gradient(to right, #d81b60, #f48fb1);
  color: white;
}
/**/

.truncline{
  display: -webkit-box;
  -webkit-line-clamp: 2;        /* Number of lines to show */
  -webkit-box-orient: vertical; /* Required for line clamping */
  overflow: hidden;
  text-overflow: ellipsis;
}

.prodtainerindex{
    display:flex;
    flex-direction:row;
}

/* INDEX PRODUCTOS HIGHLIGHT */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.fade-in {
    opacity: 0; /* Oculto al inicio */
    animation: fadeIn 1.0s ease-in-out forwards;
}

.SIMPLE{
    background-color:#f9f9f9;
    border-radius: 5px;
    border: 2px solid #e1e1e1;
    padding:20px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

body{
    background-color: #ffffff;
    font-family: "Overpass", sans-serif;
    font-optical-sizing: auto;
    font-weight: <weight>;
    font-style: normal;
}

/* Estado normal */
.accordion-button {
    background-color: rgb(235, 72, 33);  /* Un tono claro */
    color: white;  /* Texto en blanco */
}

/* Estado hover (cuando el cursor pasa por encima) */
.accordion-button:hover {
    background-color: rgb(203, 56, 25);  /* Tono más oscuro en hover */
    color: white;
}

/* Estado focus (cuando se hace clic o se enfoca el botón) */
.accordion-button:focus {
    background-color: rgb(189, 50, 18);  /* Tono aún más oscuro */
    color: white;
    box-shadow: 0 0 0 0.25rem rgba(189, 50, 18, 0.5); /* Resaltado de borde */
}

/* Estado colapsado (cuando el acordeón está cerrado) */
.accordion-button.collapsed {
    background-color: rgb(241, 105, 52);  /* Un tono suave cuando está cerrado */
    color: white;
}


header {
    background-color: #343a40; /* Color de fondo oscuro */
  }
  
.flex1 {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    padding: 50px;
    gap:15px;
}

.grid1 {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Se adapta automáticamente */
    gap: 15px; /* Espaciado entre elementos */
    justify-items: center; /* Centra los elementos horizontalmente */
    align-items: stretch; /* Hace que todos los elementos ocupen el mismo alto */
    width: 90%; /* Reduce el ancho en pantallas grandes para más espacio */
    max-width: 1200px; /* Evita que se extienda demasiado en monitores grandes */
    margin: 20px auto; /* Espaciado arriba/abajo y centrado horizontalmente */ /* Espacio interno */
}

.Filters {
    display: flex;
    flex-direction: column; /* Asegura que los elementos se apilen */
    align-items: center; /* Centra horizontalmente */
    text-align: center; /* Asegura que el texto dentro esté centrado */
    width: 100%;
    max-width 500px/* Ocupa todo el ancho disponible */
}

.formulario{
    display: flex;
    flex-direction: column;
    gap:20px;
}

.servicebox {
    background: linear-gradient(135deg, rgb(236, 44, 44), rgb(255, 208, 100)); /* Gradient background */
    box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.5); /* Shadow effect */
    border: 2px solid black;
    border-radius: 50%;
    padding: 50px;
    width: 500px;
    height: auto;
}

.box1 {
    text-align: none;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    text-align: center;
    padding: 20px;
    box-sizing: border-box;
    background: linear-gradient(to bottom, rgb(243, 243, 243), #dcdcdc);
    border: 2px solid #dbdbdb;
    box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.5);
    max-width: 400px; /* Tamaño mínimo */
    height: auto;
    border-radius: 8px;
    width: 300px;
    min-height: 400px; /* Altura fija para uniformidad */
    max-height:400px;
    gap: 10px;
    /* Card Flip Animation */
    transform-style: preserve-3d;
    animation: flipIn 1s forwards; /* Apply flipIn animation */
    opacity: 0; /* Initially hide the products */
    transform: rotateY(180deg); /* Start flipped */
    perspective: 1000px; /* Add perspective to each card for 3D effect */
    backface-visibility: hidden;
    transition: box-shadow 0.3s ease, transform 0.3s ease; /* Smooth transition for shadow and transform */
}

.flip-anim{
    transform-style: preserve-3d;
    animation: flipIn 1s forwards; /* Apply flipIn animation */
    opacity: 0; /* Initially hide the products */
    transform: rotateY(180deg); /* Start flipped */
    perspective: 1000px; /* Add perspective to each card for 3D effect */
    backface-visibility: hidden;
    transition: box-shadow 0.3s ease, transform 0.3s ease; /* Smooth transition for shadow and transform */
}

.box1 img {
    width: 100%;
    height: 200px; /* Tamaño uniforme */
    object-fit: cover; /* Mantiene la relación de aspecto */
    border-radius: 8px;
}

.box1:hover {
    transform: scale(1.05) rotateY(0deg) translateZ(50px); /* Scale and move closer on hover */
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.7), 0 0 25px rgba(255, 53, 17, 0.7); /* Add a glowing shadow */
}

/* Puedes agregar estilos aquí para mejorar la apariencia de los botones de paginación */
    .pagination-buttons {
        display: flex;
        justify-content: center;
        margin-top: 20px;
    }
    .pagination-buttons button {
        margin: 0 10px;
        padding: 10px 20px;
        cursor: pointer;
    }


.TextBox{
    text-align: center;
    padding: 10px;
    
}


.custom-carousel {
    position: relative;
    width: 100%;
    max-height: 700px; /* Establece un límite de altura */
    height: auto; /* Permite que se ajuste dinámicamente */
    overflow: hidden;
}

.custom-carousel::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 25%; /* Adjust the size of the gradient */
    background: linear-gradient(to bottom, transparent, rgb(255, 255, 255)); /* Gradient effect */
    pointer-events: none; /* Ensure the gradient doesn't interfere with user interactions */
    z-index: 2; /* Ensure it appears above the images */
}

.custom-carousel .carousel-inner {
    height: 100%; /* Ensures images fit within the container */
}

.custom-carousel img {
    width: 100%;
    height: auto; /* Ajusta la altura proporcionalmente */
    object-fit: cover; /* Mantiene la relación de aspecto */
    z-index: 1;
}

.logo-navbar {
    height: 80px; /* Asegura que la imagen ocupe toda la altura del contenedor */
    width: auto; /* Mantiene la relación de aspecto */

}

.productoflexcontainer {
    cursor: pointer; 
    display:flex; 
    flex-direction:column;
    gap:20px;
}

.highlight {
    background: linear-gradient(to left, transparent, #e23816 30%, transparent), 
                linear-gradient(to right, transparent, #e23816 30%, transparent);
    padding: 5px;
}
.prodtainer{
    height:150px;
    width:100%;
    max-width:700px;
    display:flex;
    flex-direction: row;
    margin: auto;
    padding:0;
}

.prodtainer img{
    max-width:150px;
    width: 100%;  /* Make the image take up 100% of the column width */
    height: 100%; /* Make the image take up 100% of the column height */
    object-fit: cover;  /* Ensure the image fills the container while maintaining aspect ratio */
    display: block;  /* Ensures the image behaves like a block element (removes any unwanted space below the image) */
    border-radius: 5px;
}


.flex2 {
    background-color:#f9f9f9;
    border-radius: 5px;
    border: 2px solid #e1e1e1;
    padding:20px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
    gap:15px;
    margin-left: 20%;
    margin-right: 20%;
}

.prod_det{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    padding: 25px;
    height: 400px;
}

.titlebar{
    display: flex;
    flex-direction: row;
    justify-content:space-around;
    padding: 10px;
    gap: 15px;
}


.prod_pic {
    width: 70vw;         /* Usamos un porcentaje del ancho de la ventana */
    height: 70vw;        /* El mismo porcentaje para la altura, manteniendo la proporción cuadrada */
    max-width: 500px;    /* Un máximo de 500px para evitar que crezca demasiado en pantallas grandes */
    max-height: 500px;   /* Un máximo de 500px para la altura */
    overflow: hidden;    /* Ocultamos cualquier contenido que se desborde */
    display: flex;
    justify-content: center;  /* Centramos la imagen horizontalmente */
    align-items: center;      /* Centramos la imagen verticalmente */
    background-color: #f0f0f0; /* Opcional: color de fondo en caso de que no haya imagen */
    border-radius: 10%;
}

.prod_pic img {
    width: 100%;
    height: 100%;
    object-fit: cover;        /* Asegura que la imagen cubra completamente el espacio sin distorsión */
    object-position: center;  /* Centra la imagen en su contenedor */
}
.commentbox{
    display: flex;
    flex-direction: row;
    gap: 10px;
    margin: 20px;
    background-color:#f9f9f9;
    border-radius: 5px;
    border: 2px solid #e1e1e1;
    padding:20px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.detalprod{
    width: 100%;
    height: auto;
    
}

.infoprod{
    display: flex;
    flex-direction: column;
    margin: 20px;
    gap: 20px;
    background-color:#f9f9f9;
    border-radius: 5px;
    border: 2px solid #e1e1e1;
    padding:20px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

footer.bg-dark {
    background-color: #242424 !important;  /* Color de fondo oscuro */
}

/* About us */

.aboutus{
    display: flex;
    flex-direction: column;
    background-color: #ff9797;
    align-items: center;

}

.aboutus img{
    padding: 20px;
    height: 100%;
    width: 70%;
}

.presentation{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px
}

.picture img{
    width: auto;
    height: 300px;
}

.showcase {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Ajusta el tamaño mínimo y flexible */
    gap: 10px; /* Espacio entre imágenes */
    padding: 20px;
    justify-content: center;
}

.showcase img {
    width: 100%; /* Para que se adapten al grid */
    height: auto; /* Mantiene la proporción original */
    object-fit: cover;
    border-radius: 8px; /* Opcional: bordes redondeados */
}

/* pop up */

/* Estilos del popup */


.popup {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.popup-content {
    max-width: 90%;
    max-height: 90%;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(255, 255, 255, 0.2);
}

.close {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 30px;
    color: white;
    cursor: pointer;
}

/* Bootstrap */
.servflex{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.servicio {
    max-width: 400px;
    width: 100%;
    height: 400px;
    color: white; 
    margin: 20px;
    align-items: center;
    justify-content: end;
    display: flex;
    flex-direction: column;
    border-radius: 8px;
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

/* Efecto de levantarse al pasar el mouse */
.servicio:hover {
    transform: translateY(-10px);
    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.3);
}

.tour{
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.7) 100%), url('/static/KyomaruStore/img/viaje1.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.musica{
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.7) 100%), url('/static/KyomaruStore/img/musica.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.jap{
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.7) 100%), url('/static/KyomaruStore/img/servjap.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.plchldr{
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.7) 100%), url('/static/KyomaruStore/img/Placeholder.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.te{
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.7) 100%), url('/static/KyomaruStore/img/experiencia_te.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.pprinc{
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.7) 100%), url('/static/KyomaruStore/img/kyomain.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.formulario input[type="text"] {
    width: 100%; /* Ajusta el ancho al 100% del contenedor */
    padding: 20px; /* Aumenta el padding para hacerlo más grande */
    font-size: 16px; /* Aumenta el tamaño de la fuente */
    border-radius: 5px; /* Bordes redondeados */
    border: 1px solid #ccc; /* Color del borde */
    margin-bottom: 10px; /* Espaciado inferior */
}

.formulario select {
    width: 100%; /* Ajusta el ancho del select al 100% del contenedor */
    padding: 10px; /* Aumenta el padding */
    font-size: 16px; /* Aumenta el tamaño de la fuente */
    border-radius: 5px; /* Bordes redondeados */
    border: 1px solid #ccc; /* Color del borde */
    margin-bottom: 10px; /* Espaciado inferior */
}

.formulario button {
    padding: 12px 20px; /* Aumenta el tamaño del botón */
    font-size: 16px; /* Aumenta el tamaño de la fuente */
    background-color: rgb(226, 56, 22); /* Color de fondo */
    color: white; /* Color del texto */
    border: none;
    border-radius: 5px; /* Bordes redondeados */
    cursor: pointer;
}

.formulario button:hover {
    background-color: rgb(203, 56, 25);  /* Tono más oscuro en hover */
    color: white;
}

/* Estado normal del botón */
.accordion-button {
    background-color: rgb(235, 72, 33);  /* Tono claro cuando está cerrado */
    color: white;
    border: none;
    padding: 10px 20px;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

/* Estado del acordeón abierto */
.accordion-button:not(.collapsed) {
    background-color: rgb(203, 56, 25);  /* Tono más oscuro cuando está abierto */
    color: white;
}

/* Estado hover (cuando el cursor pasa por encima del botón) */
.accordion-button:hover {
    background-color: rgb(190, 60, 30);  /* Tono más oscuro en hover */
    color: white;
}

/* Estado focus (cuando el botón recibe foco) */
.accordion-button:focus {
    background-color: rgb(189, 50, 18);  /* Tono aún más oscuro cuando tiene foco */
    color: white;
    box-shadow: 0 0 0 0.25rem rgba(189, 50, 18, 0.5); /* Resaltado de borde */
}

/* Estado cuando el acordeón está colapsado */
.accordion-button.collapsed {
    background-color: rgb(241, 105, 52);  /* Tono más suave cuando está cerrado */
    color: white;
}


.formulario button:hover {
    background-color: #0056b3; /* Color del botón cuando se pasa el mouse */
}

.box-link{
    border-radius: 5px;
}

.box-link:hover {
    transform: translateY(-10px);
    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.3);
    transition: transform 0.2s ease-in-out, box-shadow 0.3s ease-in-out;
}


.btn:hover {
    transform: translateY(-3px);
}

/*-----------------------ESTILOS CARRITO---------------------*/

 /* Contenedor principal */
        .checkout-container {
            max-width: 1200px;
            margin: auto;
            display: grid;
            grid-template-columns: 2fr 1fr;
            gap: 20px;
            background: #fff;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }

        /* Sección izquierda: Lista de productos */
        .cart-items {
            display: flex;
            flex-direction: column;
            gap: 15px;
        }

        /* Tarjeta de producto */
        .cart-item {
            display: flex;
            align-items: center;
            background: #fff;
            padding: 10px;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }

        /* Imagen del producto */
        .cart-item img {
            width: 80px;
            height: 80px;
            object-fit: cover;
            border-radius: 10px;
            margin-right: 15px;
        }

        /* Información del producto */
        .cart-item-details {
            flex-grow: 1;
        }

        .cart-item h3 {
            margin: 0;
            font-size: 1.2em;
            color: #333;
        }

        .cart-item .quantity {
            font-size: 0.9em;
            color: #777;
        }

        .cart-item .price {
            font-size: 1em;
            font-weight: bold;
            color: #27ae60;
        }

        /* Botón de eliminar */
        .remove-btn {
            background: #e74c3c;
            color: white;
            border: none;
            padding: 8px 12px;
            border-radius: 5px;
            cursor: pointer;
            transition: 0.3s;
        }

        .remove-btn:hover {
            background: #c0392b;
        }

        /* Sección derecha: Resumen de compra */
        .cart-summary {
            background: #fff;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            text-align: center;
            
        }

        .cart-summary h2 {
            margin-bottom: 15px;
            color: #333;
        }

        .total-price {
            font-size: 1.5em;
            font-weight: bold;
            color: #27ae60;
            margin-bottom: 20px;
        }

        /* Botón de pagar */
        .checkout-btn {
            background: #2ecc71;
            color: white;
            border: none;
            padding: 15px;
            width: 100%;
            font-size: 1.2em;
            border-radius: 5px;
            cursor: pointer;
            transition: 0.3s;
            margin-top: 20px;
        }
        
        .delivery-btn {
            background: #2ecc71;
            color: white;
            border: none;
            padding: 15px;
            width: 100%;
            font-size: 1.2em;
            border-radius: 5px;
            cursor: pointer;
            transition: 0.3s;
            margin-bottom: 10px;
        }

        .checkout-btn:hover {
            background: #27ae60;
        }

        /* Responsividad */
        @media (max-width: 768px) {
            .checkout-container {
                grid-template-columns: 1fr;
            }
        }

@media (max-width: 1000px) {
    .FlexContainer1{
        display: flex;
        flex-direction: column;
    }

    .flex1 {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
    }

    .flex2 {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        padding: 15px;
        gap:15px;
        margin-left: 5%;
        margin-right: 5%;
    }
    
    .servflex{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
    
    .grid1 {
        grid-template-columns: repeat(2, 1fr); /* Se adapta automáticamente */
        gap: 10px; /* Espaciado menor en móviles */
        width: 95%; /* Ocupa casi toda la pantalla sin tocar los bordes */
    }  
}

@media (max-width: 600px) {
    .TextBox{
        text-align: center;
        padding: 10px;
        margin-right: 50px;
        margin-left: 50px;
    }
    

    
    .grid1 {
        grid-template-columns: repeat(1, 1fr); /* Se adapta automáticamente */
        gap: 10px; /* Espaciado menor en móviles */
        width: 95%; /* Ocupa casi toda la pantalla sin tocar los bordes */
    }  
}