/*
Custom Css
*/

/** {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.card .img-fit{
    aspect-ratio: 5 / 3;
    object-fit: cover;
}

.card {
    height: 100%;
    margin: 0 .5em;
}

.card-body {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.card-text {
    flex-grow: 1;
}
@media (max-width: 767.98px) {
    .card .img-fit {
        aspect-ratio: 1.45 / 1;
    }
}

.carousel-inner .carousel-item.active,
.carousel-inner .carousel-item-next,
.carousel-inner .carousel-item-prev {
    display: flex;
}

@media(min-width:768px) {
    .carousel-inner .carousel-item-end.active,
    .carousel-inner .carousel-item-next {
        transform: translateX(25%);
    }

    .carousel-inner .carousel-item-start.active,
    .carousel-inner .carousel-item-prev {
        transform: translateX(-25%);
    }
}

.carousel-item-next:hover {
    opacity: 200%;
}

.carousel-item-prev:hover {
    opacity: 200%;
}

.carousel-inner .carousel-item-end,
.carousel-inner .carousel-item-start {
    transform: translateX(0);
}

@media(max-width:767px){
    .carousel-inner .carousel-item >div {
        display:none;
    }
    .carousel-inner .carousel-item > div:first-child {
        display: block;
    }
}

.carousel {
    width:70%;
}

.container {
    width: 70%;
}
*/

.card-body {
    display: flex !important;
    flex-direction: column !important;
    padding: 12px !important;
    width: 100% !important;
}

.category-item i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    margin: 0 auto;
    background-color: #fff9e6; /* Un color de fondo muy suave */
    border-radius: 50%;
    transition: all 0.3s ease;
}

.category-item:hover i {
    background-color: #ffc107; /* El icono se ilumina al pasar el mouse */
    color: white !important;
    transform: scale(1.1);
}

.qty-input {
    width: 50px;
    text-align: center;
    border: none;
    background: transparent;
}

.qty-input-pedido {
    width: 50px;
    text-align: center;
    border: none;
    background: transparent;
}

.carousel-control-prev, .carousel-control-next {
    filter: invert(1); /* Si quieres que las flechas sean negras sin usar clases extra */
    top: 50%;
    transform: translateY(-50%);
    height: 50px;
}

/*.food-img {
    width: 100% !important;*/
    /*height: 180px !important;*/ /* Altura para computadoras */
    /*object-fit: cover;*/ /* Recorta el exceso para que siempre llene el recuadro */
    /*display: block;
}*/

/* Ajustes de las imágenes para que no se deformen con Poppins */
.food-img {
    height: 140px;
    object-fit: cover;
    object-position: center;
}



@media (max-width: 768px) {
    .food-img {
        height: 100px !important; /* Aquí reduces la altura para el celular */
    }
}


/* Ajuste adicional para la Card */
.card {
    display: flex !important;
    flex-direction: column !important;
/*    min-height: 100%;*/
    border-radius: 15px !important;
    overflow: hidden;
}

.card-img-top {
    width: 100% !important;
    /*height: 150px !important;*/ /* Ajusta la altura según tu gusto */
    object-fit: cover !important;
}

.shadow-lg {
    box-shadow: 0 1rem 3rem rgba(0,0,0,.175) !important;
}

#cart-count {
    font-size: 0.8rem;
    padding: 0.5em 0.8em;
}

html {
    scroll-behavior: smooth;
}

/* Evita que el título quede pegado al borde superior al navegar */
[id^="cat-"] {
    scroll-margin-top: 20px;
}


/* Ajustes específicos para celulares */
/*@media (max-width: 576px) {
    .food-img {
        height: 80px;*/ /* Reducimos la altura de la imagen para que no ocupe toda la pantalla */
    /*}

    .card-title {
        font-size: 0.8rem;*/ /* Texto más pequeño para el nombre del plato */
        /*margin-bottom: 2px;
    }

    .card-text {
        display: none;*/ /* OCULTAMOS la descripción en celular para ganar espacio */
    /*}

    .card-body {
        padding: 5px;*/ /* Menos espacio interno */
    /*}

    .qty-input {
        width: 25px;*/ /* Botones de cantidad más compactos */
        /*font-size: 0.7rem;
    }

    .btn-warning {
        font-size: 0.6rem;*/ /* Botón de agregar más pequeño */
        /*padding: 4px 2px;
    }
}*/

/*@media (max-width: 576px) {*/
    /* Ajustamos la altura de la imagen para que la tarjeta no sea gigante */
    /*.food-img {
        height: 120px;
        object-fit: cover;
    }*/

    /* Ocultamos la descripción en móvil para mantener la fila alineada */
    /*.card-text {
        display: none;
    }*/

    /* Hacemos que el título no ocupe más de 2 líneas */
    /*.card-title {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        height: 2.4rem;*/ /* Altura fija para que todas las cards midan lo mismo */
    /*}*/

    /* Botón de agregar circular para ahorrar espacio */
    /*.btn-warning {
        border-radius: 50%;
        width: 32px;
        height: 32px;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}*/

body {
    /* Margen global para toda la página */
    font-family: 'Poppins', sans-serif;
    color: #333;
    padding: 15px;
}

/*@media (min-width: 992px) {
    body {*/
        /* Margen mucho más grande en pantallas de escritorio */
        /*padding: 50px 100px;
    }
}

@media (max-width: 767px) {*/
    /* Si quieres que el botón no sea tan ancho en móvil al solo tener un icono */
    /*.btn-warning .fa-cart-plus {
        font-size: 1.2rem;
    }
    .food-img {
        height: 140px;*/ /* Un poco más pequeña en celular para que quepan dos por fila */
    /*}*/
    /* Opcional: Si prefieres que el botón sea cuadrado/circular en móvil en vez de ocupar todo el ancho */
    /*
    .d-md-none.btn {
        width: 40px !important;
        height: 40px;
        border-radius: 50%;
        margin: 0 auto;
    }
    */
/*}*/


/* Contenedor principal para ocultar el scrollbar si se desea */
.category-scroll-container {
    overflow: hidden;
    padding: 10px 0;
}

/* El envoltorio que permite el scroll horizontal */
.category-scroll-wrapper {
    display: flex;
    overflow-x: auto;
    scroll-behavior: smooth;
    gap: 15px;
    padding: 5px 15px;
    -webkit-overflow-scrolling: touch; /* Scroll suave en iOS */
}

    /* Ocultar la barra de scroll visualmente para un look más limpio */
    .category-scroll-wrapper::-webkit-scrollbar {
        display: none;
    }

/* Estilo de cada tarjeta de categoría */
.category-card {
    flex: 0 0 auto;
    width: 110px; /* Aumentamos de 90px a 110px */
    text-align: center;
    text-decoration: none;
    color: #333;
}

.category-icon-bg {
    width: 85px; /* Aumentamos de 60px a 85px */
    height: 85px; /* Aumentamos de 60px a 85px */
    border-radius: 22px; /* Un redondeado más moderno (tipo Squircle) */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.2rem; /* El icono ahora es mucho más grande */
    margin: 0 auto 10px auto;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Efecto de rebote */
    box-shadow: 0 4px 15px rgba(0,0,0,0.05); /* Sombra suave para dar profundidad */
}

/* Colores de fondo suaves para los iconos */
.bg-warning-light {
    background-color: #fff4e6;
    color: #ff922b;
}

.bg-danger-light {
    background-color: #fff5f5;
    color: #fa5252;
}

.bg-success-light {
    background-color: #ebfbee;
    color: #40c057;
}

.bg-primary-light {
    background-color: #e7f5ff;
    color: #228be6;
}

.bg-info-light {
    background-color: #f3f0ff;
    color: #7950f2;
}

/* Efecto al presionar */
.category-card:active .category-icon-bg {
    transform: scale(0.9);
    background-color: #ffc107;
    color: white;
}

.category-card span {
    font-size: 0.95rem; /* Texto un poquito más grande */
    font-weight: 700;
    color: #2d3436;
}
.category-card:hover .category-icon-bg {
    transform: scale(1.1); /* Crece al pasar el mouse o tocar */
    box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}

#btn-back-to-top {
    position: fixed;
    bottom: 90px; /* Lo ponemos un poco más arriba para que no tape al carrito */
    right: 25px;
    display: none; /* Se oculta por defecto */
    height: 50px;
    width: 50px;
    border-radius: 50%;
    z-index: 1000;
    transition: all 0.3s ease;
}

    #btn-back-to-top:hover {
        transform: scale(1.1);
        background-color: #ff922b;
    }






.no-scrollbar::-webkit-scrollbar {
    display: none;
}

.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.category-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 120px; /* Un poco más ancho para iconos grandes */
    transition: all 0.3s ease;
}

/* Tamaño del círculo del icono */
.category-icon {
    width: 120px; /* Icono más grande */
    height: 120px; /* Icono más grande */
    background-color: #ffffff;
    border-radius: 20px; /* Bordes ligeramente redondeados (estilo moderno) */
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
    font-size: 42px; /* Tamaño del dibujo interno */
    border: 2px solid #f8f9fa;
}

/* Efecto al tocar/hacer clic */
.category-item:active .category-icon {
    transform: scale(0.9);
    background-color: #fff3cd; /* Color de realce al tocar */
}

.category-text {
    font-family: 'Poppins', sans-serif;
    font-weight: 600; /* Un poco más gruesa */
    font-size: 0.95rem;
}

/* Colores temáticos para los iconos */
.text-coffee {
    color: #6F4E37;
}

.text-dessert {
    color: #d63384;
}


/* Clase base de la tarjeta */
/*.card-pedido {
    transition: all 0.3s ease;*/ /* Hace que el efecto sea suave */
    /*cursor: pointer;
    border: 1px solid transparent;*/ /* Evita saltos al aparecer el borde */
/*}*/

    /* Efecto al pasar el mouse (Resaltado) */
/*.card-pedido:hover {
    transform: translateY(-5px);*/ /* La tarjeta sube un poquito */
    /*background-color: #fff5e6;*/ /* Un color crema muy suave (estilo Tanta/Baguette) */
    /*border-color: #ffc107;*/ /* El borde se pinta del color de tu marca (amarillo/naranja) */
    /*box-shadow: 0 10px 20px rgba(0,0,0,0.12) !important;*/ /* Sombra más marcada */
/*}*/


/* El efecto hover que creamos antes */
.card-pedido {
    transition: all 0.25s ease-in-out;
    cursor: pointer;
}

.card-pedido:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 15px rgba(0,0,0,0.1) !important;
}


/* Opcional: Resaltar la imagen cuando el mouse está sobre la card */
.card-pedido:hover .food-img {
    filter: brightness(1.05); /* Brillo ligero en la foto */
}








/* Configuración de la fila con scroll horizontal */
.fila-productos-scroll {
    scrollbar-width: none; /* Oculta el scroll en Firefox */
    -webkit-overflow-scrolling: touch; /* Scroll suave en iOS (Safari) */
}

/* Oculta la barra de scroll en Chrome, Edge y Safari */
.fila-productos-scroll::-webkit-scrollbar {
    display: none;
}

/* --- CONTROL DE CATEGORÍAS --- */
.scroll-categorias {
    scrollbar-width: none; /* Oculta barra en Firefox */
    -webkit-overflow-scrolling: touch; /* Scroll fluido e independiente en iOS */
    overflow-x: auto;
    white-space: nowrap; /* Fuerza a los elementos a quedarse en una línea */
}

    .scroll-categorias::-webkit-scrollbar {
        display: none; /* Oculta barra en Chrome/Safari */
    }

/* --- CONTROL DE PRODUCTOS --- */
.scroll-productos {
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    overflow-x: auto;
}

    .scroll-productos::-webkit-scrollbar {
        display: none;
    }