/* Barra del carrito fija en la parte superior */
.cart-bar {
    position: fixed;
    top: 0;
    right: 0; /* Mantén el carrito a la derecha */
    left: auto; /* Evita que se superponga a la izquierda */
    width: 7%; /* Ajusta el ancho a tu preferencia */
    max-width: 150px;
    height: 40px; /* Ajusta la altura si es necesario */
    background-color: #c0392b; /* Fondo naranja oscuro */
    color: white; /* Texto blanco */
    padding: 5px; /* Ajusta el padding si es necesario */
    display: flex;
    justify-content: flex-end; /* Alinea el contenido a la derecha */
    align-items: center;
    border-radius: 10px; /* Bordes redondeados */
    z-index: 1000; /* Asegúrate de que esté encima de otros elementos */
    transition: width 0.3s ease; /* Suave animación */
}

/* Efecto hover en el icono del carrito */
.icon {
    font-size: 18px; /* Tamaño del icono */
    margin-left: 5px; /* Espacio entre el contador y el icono */
    transition: background-color 0.3s ease, box-shadow 0.3s ease; /* Suaviza el cambio de fondo y sombra */
    border-radius: 50%; /* Hacer que el icono tenga forma de círculo */
    padding: 5px; /* Espacio interno para el efecto del círculo */
}

/* Efecto hover */
.icon:hover {
    background-color: #ff4d4d; /* Color rojizo vivo */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2); /* Sombra en la parte inferior */
}


/* Contenido dentro de la barra del carrito */
.cart-content {
    display: flex;
    align-items: center; /* Alinea verticalmente los elementos */
    justify-content: space-between; /* Asegura que los elementos se separen */
    flex-direction: row-reverse; /* Cambia el orden visual: icono primero */
    width: 100%;
}

/* Estilo del icono del carrito */
.cart-icon {
    margin-left: 50px; /* Espacio entre el texto y el icono */
}

/* Estilo del número de productos en el carrito */
#cart-count {
    font-size: 20px;
    margin-right: 6px; /* Espacio entre el número y el icono */
    font-weight: bold; /* Hace el número más visible */
}

/* Ocultar la barra del carrito al inicio */
.hidden {
    display: none;
}

.visible {
    display: block;
}


/* Sidebar para detalles del carrito */
.cart-menu {
    display: none;
    position: fixed;
    right: 0;
    top: 0;
    width: 300px; /* Ajusta el ancho según sea necesario */
    height: 95vh;
    background-color: aliceblue; /* Color naranja oscuro */
    box-shadow: -6px 0 5px rgba(0, 0, 0, 6.3);
    transform: translateX(100%);
    transition: transform 0.3s ease-in-out;
    z-index: 1000;
}
/* Cabecera del carrito */
.cart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    background-color: darkred;
    border-bottom: 2px solid white; /* Línea blanca debajo del header */
}
/* Título "COMPRAR" */
.cart-title {
    font-size: 20px;
    font-weight: bold;
    color: white;
	
}

.cart-menu.open {
    display: block;
    transform: translateX(0); /* Muestra el carrito */
}

/* Botón para cerrar el carrito */
.close-cart {
    font-size: 20px;
    color: white;
    cursor: pointer;
    transition: color 0.3s ease; /* Efecto hover */
}
/* Efecto hover para la "X" */
.close-cart:hover {
    color: red; /* Cambia el color a rojo al hacer hover */
	
}

/* Resumen del carrito */
.cart-summary {
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 15px;
    background-color:darkkhaki;
    box-shadow: 0 -4px 5px rgba(0, 0, 0, 6.1);
	font-weight:510;
	
}

/* Lista de productos en el carrito */
.cart-items-list {
    max-height: 360px;
    overflow-y: auto;
    padding: 15px;
	
}
.cart-items-list div {
margin-bottom: 5px; /* Ajusta este valor según sea necesario */
}

/* Botónes reniciar carrito, ver carrito */
.cart-button {
    width: 100%;
    padding: 10px;
    background-color: #3498db;
    color:aliceblue;
    border: none;
    cursor: pointer;
    margin-top: 10px;
    text-align: center;
}

.cart-button:hover {
    background-color: #2120b9;
}

/* Overlay */
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
    display: none; /* Oculto por defecto */
}

.overlay.active {
    display: block;
}

/* Responsivo: Ajustes para pantallas pequeñas */
@media (max-width: 1024px) {
    .cart-bar {
        width: 10%;
        max-width: 120px;
    }

    #cart-count {
        font-size: 19px;
    }

    .icon {
        width: 30px;
        height: 30px;
    }

    .icon i {
        font-size: 14px;
    }
}

@media (max-width: 768px) {
    .cart-bar {
        width: 15%;
        max-width: 100px;
    }

    #cart-count {
        font-size: 19px;
    }

    .icon {
        width: 28px;
        height: 28px;
    }

    .icon i {
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    .cart-bar {
        width: 20%;
        max-width: 80px;
    }

    #cart-count {
        font-size: 10px;
    }

    .icon {
        width: 25px;
        height: 25px;
    }

    .icon i {
        font-size: 10px;
    }
}


/* precio a la derecha*/
/* Estilo para los elementos de la lista del carrito */
.cart-item {
  display: flex;
  justify-content: space-between; /* Distribuye el nombre del producto y el precio */
  align-items: center; /* Alinea el contenido verticalmente al centro */
  padding: 2px 0; /* Añade espacio entre los elementos */
  border-bottom: 7px solid #e0e0e0; /* Línea divisoria entre los productos */
  font-size: 14px; /* Ajusta el tamaño del texto en toda la fila del carrito */
}

.cart-item .product-name {
  flex: 1; /* Ocupa todo el espacio disponible a la izquierda */
  font-size: 16px; /* Ajusta el tamaño del texto para el nombre del producto */
}

.cart-item .product-price {
  flex: 0; /* El precio ocupa solo el espacio necesario */
  color: red; /* Cambia el color del precio a rojo */
  font-weight: bold; /* Resalta el precio */
  font-size: 16px; /* Ajusta el tamaño del texto para el precio */
}

.precio-rojo {
    color: red;
    font-weight: bold; /* Para hacer que el precio sea más oscuro (negrita) */
    margin-left: 10px; /* Añade espacio entre el texto y el precio */
}