/*seccion del carrito*/
@media (min-width: 768px) {
    .offcanvas-end.w-md-75 {
        width: 75% !important;
    }
}

@media (min-width: 992px) {
    
    .offcanvas-cart {
        width: 450px !important;
    }
}

.offcanvas-cart {
    width: 100%;
    z-index: 99999;
}

/* Contenedor alineado a la izquierda en pantallas grandes */
.align-left-container {
    max-width: 900px;
    margin-left: 40px;
    margin-right: auto;
}

.truncate-multiline {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
}

#listCartSiderbarTotal {
    position: fixed !important;
    bottom: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 400px !important;
    box-sizing: border-box !important;
    padding: 1rem 1.5rem;
    background-color: white !important;
    border-top: 1px solid #dee2e6 !important;
    z-index: 1055 !important;
    display: none;
}

#burgerIconMenu {
    min-width: 30px !important;
}

    #burgerIconMenu svg {
        height: 30px!important;
        width: 25px!important;
    }

    .btn.btn-square:not(.btn-sm):not(.btn-lg) {
        min-width: 25px !important;
    }

    .btn.btn-square:not(.btn-sm):not(.btn-lg) i, .btn.btn-square:not(.btn-sm):not(.btn-lg) svg {
        font-size: 22px !important;
    }

#cartCount {
    width: 25px;
    right: -7px !important;
}

/* En móviles, centramos automáticamente */
@media (max-width: 768px) {
    .align-left-container {
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* Para pantallas menores o iguales a 990px */
@media (max-width: 990px) {
    #listCartSiderbarTotal {
        max-width: 400px !important;
    }
}

/* Para pantallas mayores a 990px */
@media (min-width: 991px) {
    #listCartSiderbarTotal {
        max-width: 450px !important;
    }
}

.menu-icon.bi-tag-fill.text-danger {
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(1);
    }
}

a.nav-link:hover .menu-icon.bi-tag-fill {
    animation-play-state: running;
}

.menu-icon.bi-tag-fill {
    animation-play-state: paused;
}

.badge-bg-orange {
    background-color: #fd7e14;
    color: white;
}

/* Badge personalizado más grande */
.badge-bg-orange-pink {
    font-size: 0.85em; /* ligeramente más grande que 0.65em */
    padding: 0.35em 0.6em; /* un poco más de espacio */
    border-radius: 9999px; /* badge pill */
    color: white;
    background: linear-gradient(90deg, #fd7e14, #e75480); /* naranja a rosado */
    background-size: 200% 100%; /* el doble del ancho para animar */
    animation: colorShiftHorizontal 8s ease-in-out infinite alternate;
    display: inline-block;
    white-space: nowrap;
}

/* Animación de transición horizontal de fondo */
@keyframes colorShiftHorizontal {
    0% {
        background-position: 0% 0%;
    }

    100% {
        background-position: 100% 0%;
    }
}

/* Estilos generales para el contenedor */
.div-contacto {
    margin-left: 1rem;
    margin-right: 1rem;
}

/* Para pantallas medianas en adelante */
@media (min-width: 768px) {
    .div-contacto {
        margin-left: 3rem;
        margin-right: 3rem;
        max-width: 960px;
    }
}

/* Opcional: para pantallas grandes */
@media (min-width: 1200px) {
    .div-contacto {
        max-width: 1140px;
    }
}