*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html,
body{

    background:#fff;

    font-family:Arial,Helvetica,sans-serif;
    color:#222;
    padding-top:22px;

}

/*==================================================
NAVBAR
==================================================*/

nav{
    background:#FF9E1E;
    height:45px;
    position:fixed;
    top:0;
    left:0;
    right:0;

    z-index:9999;
}

.nav-wrapper{
    height:45px;
    position:relative;
}

.logo-container{
    display:flex;
    align-items:center;
    height:45px;
    padding-left:15px;
}

.logo{
    width:38px;
    height:38px;
}

.titulo{
    color:white;
    font-size:1.25rem;
    font-weight:bold;
}

.total{
    color:white;
    font-size:1.3rem;
    font-weight:bold;
}

#btn-confirmar{
    display:none;
}

/*==================================================
VISTAS
==================================================*/

#vista-menu{
    padding-bottom:90px;
}

#vista-formulario{
    display:none;
    padding:16px;
    padding-bottom:120px;
}

/*==================================================
LISTADO
==================================================*/

.productos-container{
    width:100%;
}

/*==================================================
PRODUCTO
==================================================*/

.producto-delivery{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:14px;
    padding:16px;
    border-bottom:1px solid #F7F7F7;
}

.producto-info{
    flex:1;
    min-width:0;
    display:flex;
    flex-direction:column;
}

/*==================================================
NOMBRE
==================================================*/

.producto-nombre{
    font-size:1.08rem;
    font-weight:700;
    line-height:1.25;
}

/*==================================================
DESCRIPCION
==================================================*/

.producto-descripcion{
    margin-top:6px;
    color:#666;
    font-size:.82rem;
    line-height:1.35;
}

/*==================================================
BADGE
==================================================*/

.badge-popular{
    display:inline-flex;
    align-self:flex-start;
    margin-top:6px;
    padding:2px 8px;
    border-radius:20px;
    background:#FFF5E6;
    color:#E67E00;
    font-size:.72rem;
    font-weight:bold;
}

/*==================================================
PRECIO
==================================================*/

.producto-precio{
    margin-top:auto;
    padding-top:12px;
    font-size:1.15rem;
    font-weight:bold;
    color:#FF9E1E;
}

/*==================================================
FOTO
==================================================*/

.producto-foto{

    width:115px;

    flex-shrink:0;

    position:relative;

}

.producto-img{

    width:100%;

    aspect-ratio:1;

    object-fit:contain;

    display:block;

}

/*==================================================
BOTON +
==================================================*/

.btn-agregar{

    position:absolute;

    right:-6px;

    bottom:-6px;

    width:42px;

    height:42px;

    border:none;

    border-radius:50%;

    background:#FF9E1E;

    color:white;

    font-size:30px;

    cursor:pointer;

    box-shadow:0 3px 8px rgba(0,0,0,.18);

}

/*==================================================
FORMULARIO
==================================================*/

.card{

    box-shadow:none !important;

    border:none !important;

}

.browser-default{

    height:44px;

}

input,
textarea{

    font-size:16px !important;

}

/*==================================================
BARRA CARRITO
==================================================*/

#barra-carrito{

    position:fixed;

    left:0;

    bottom:0;

    width:100%;

    background:white;

    border-top:1px solid #DDD;

    padding:12px 16px;

    display:none;

    justify-content:space-between;

    align-items:center;

    z-index:999;

}

#carrito-total{

    display:flex;

    flex-direction:column;

}

#carrito-cantidad{

    font-size:.8rem;

    color:#666;

}

#carrito-importe{

    font-size:1.35rem;

    font-weight:bold;

}

#btn-continuar{

    background:#FF9E1E;

    color:white;

    border:none;

    border-radius:25px;

    padding:12px 24px;

    font-size:1rem;

    font-weight:bold;

}

/*==================================================
RESPONSIVE
==================================================*/

@media(min-width:900px){

    .productos-container{

        max-width:700px;

        margin:auto;

    }

    #vista-formulario{

        max-width:700px;

        margin:auto;

    }

}




/*==========================================
CONTROLES CANTIDAD
==========================================*/

.controles{

    margin-top:10px;

    display:flex;

    align-items:center;

    gap:8px;

}

.btn-cantidad{

    width:34px;

    height:34px;

    border:none;

    border-radius:50%;

    background:#FF9E1E;

    color:#fff;

    font-size:22px;

    font-weight:bold;

    cursor:pointer;

    display:flex;

    align-items:center;

    justify-content:center;

    transition:.15s;

    box-shadow:0 2px 6px rgba(0,0,0,.18);

}

.btn-cantidad:active{

    transform:scale(.92);

}

.btn-menos{

    background:#F3F3F3;

    color:#777;

    border:1px solid #DDD;

    box-shadow:none;

}

.btn-menos:hover{

    background:#ECECEC;

}

.btn-mas:hover{

    background:#ff8f00;

}

.cantidad{

    min-width:24px;

    text-align:center;

    font-size:1rem;

    font-weight:700;

    color:#333;

}



.mensaje-pago{

    margin-top:14px;

    padding:12px;

    border-radius:10px;

    background:#FFF8E6;

    color:#8A6D3B;

    font-size:.82rem;

    line-height:1.4;

    text-align:center;

}