/* Asegurar offcanvas y backdrop encima del carrusel */
.offcanvas,
.offcanvas-start {
z-index: 1100; /* más alto que los controles del carrusel */
}
.offcanvas-backdrop {
z-index: 1095; /* backdrop detrás del panel pero delante del carrusel */
}
```// filepath: /home/erick/Software/Web Ap-Games/Web-ApGames/app/templates/base.html
/* Asegurar offcanvas y backdrop encima del carrusel */
.offcanvas,
.offcanvas-start {
z-index: 1100; /* más alto que los controles del carrusel */
}
.offcanvas-backdrop {
z-index: 1095; /* backdrop detrás del panel pero delante del carrusel */
}

#floatingCart {
    width: 140px;
    right: 20px;
    bottom: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #28a745; /* Fondo verde */
    color: #fff;
    padding: 15px;
    border-radius: 10px 10px 0 0; /* Bordes redondeados en la parte superior */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Sombra */
}

.carrito-img {
    width: 120px;
    height: 120px;
    position: relative;
    z-index: 2; /* Asegura que el carrito esté por encima de los paquetes */
}

.package-container {
    position: absolute;
    bottom: 20%; /* Ajusta la posición vertical de los paquetes */
    right: -5%; /* Ajusta la posición horizontal de los paquetes */
    width: 70%; /* Limita el ancho del contenedor de paquetes */
    height: 75%; /* Limita la altura del contenedor de paquetes */
    display: grid; /* Cambia a un diseño de cuadrícula */
    grid-template-areas: 
        "top-left top-center top-right"
        "middle-left middle-center middle-right"
        "bottom-left bottom-center bottom-right"; /* Define las áreas de la cuadrícula */
    grid-template-columns: repeat(3, 1fr); /* 3 columnas */
    grid-template-rows: repeat(3, 1fr); /* 3 filas */
    gap: -5px; /* Espaciado entre las imágenes */
    overflow: hidden; /* Asegura que los paquetes no se salgan del contenedor */
    z-index: 1; /* Asegura que los paquetes estén detrás del carrito */
    pointer-events: none; /* Evita que los paquetes interfieran con los clics */
}

.package-img:nth-child(1) {
    grid-area: bottom-center; /* Primera imagen en la parte inferior derecha */
}

.package-img:nth-child(2) {
    grid-area: bottom-right; /* Segunda imagen en la parte inferior central */
}

.package-img:nth-child(3) {
    grid-area: bottom-left; /* Tercera imagen en la parte inferior izquierda */
}

.package-img:nth-child(4) {
    grid-area: middle-center; /* Cuarta imagen en la parte central derecha */
}

.package-img:nth-child(5) {
    grid-area: middle-right; /* Quinta imagen en la parte central media */
}

.package-img:nth-child(6) {
    grid-area: middle-left; /* Sexta imagen en la parte central izquierda */
}

.package-img:nth-child(7) {
    grid-area: top-center; /* Séptima imagen en la parte superior derecha */
}

.package-img:nth-child(8) {
    grid-area: top-right; /* Octava imagen en la parte superior central */
}

.package-img:nth-child(9) {
    grid-area: top-left; /* Novena imagen en la parte superior izquierda */
}

.package-img {
    width: 23px;
    height: 23px;
    object-fit: contain; /* Asegura que las imágenes mantengan su proporción */
    z-index: 1; /* Asegura que los paquetes estén detrás del carrito */
}

.category-card {
    background-color: #0b1523 !important; /* Color de fondo oscuro */
    color: #ffffff !important; /* Color de texto claro */
    font-family: 'Arial', sans-serif; /* Fuente legible */
    width: 100%; /* Ancho completo en dispositivos pequeños */
    max-width: 300px; /* Ancho máximo para pantallas más grandes */
}
.carousel-item{
    padding: 15px;
}
.carousel-control-prev,
.carousel-control-next {
    width: 50px !important; /* Forzar el ancho del botón */
    height: 50px !important; /* Forzar el alto del botón */
    background-color: rgba(0, 0, 0, 0.5) !important; /* Fondo semitransparente */
    border-radius: 50% !important; /* Forma circular */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 1050 !important; /* Asegúrate de que esté por encima del contenido */
    position: absolute !important; /* Posición absoluta dentro del carrusel */
    top: 50% !important; /* Centrado vertical */
    transform: translateY(-50%) !important; /* Ajuste para centrar completamente */
    z-index: 1000;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
    width: 20px !important; /* Ajusta el tamaño del ícono */
    height: 20px !important;
}

.carousel-control-prev {
    left: 10px !important; /* Ajusta la posición horizontal */
}

.carousel-control-next {
    right: 10px !important; /* Ajusta la posición horizontal */
}

.carousel-control-prev:hover,
.carousel-control-next:hover {
    background-color: rgba(0, 0, 0, 0.8) !important; /* Cambia el fondo al pasar el mouse */
}

.product-card .card-body {
    flex-grow: 1; /* Permitir que el cuerpo de la tarjeta crezca */
    background-color: #0b1523 !important; /* Color de fondo claro */
    color: #ffffff !important; /* Color de texto oscuro */
    font-family: 'Arial', sans-serif; /* Fuente legible */

    .btn-success {
        background-color: #7339FF !important; /* Color de botón personalizado */
        hover:rgb(57, 6, 177) !important; /* Color de botón al pasar el mouse */
        border: none;
    }

    .btn-ver-mas {
        background-color: #4C6FAF !important; /* Color de botón personalizado */
        hover:rgb(43, 76, 146) !important; /* Color de botón al pasar el mouse */
        border: none;
    }
}

/* group btn modal */