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

body{
  background-color: #ffb327;
}
#mainCarousel{
  margin-top: 5rem;
  min-height: 20vh;
  max-height: 85vh;
}

#mainCarousel img{
  border-radius: 0.8rem;
}

/* css menu sections */
#comidas-title-bar,
#bebidas-title-bar,
.subtitle,
.contenedor-importe-total {
  font-size: clamp(1rem, 0.3869rem + 2.6025vw, 3rem);
  margin-top: 4rem;
  background-color: rgba(0, 0, 0, 0.752);
  padding: 1rem;
  border-radius: 0.8rem;
  box-shadow: 10px 10px 10px 0 rgba(0, 0, 0, 0.1);
  color: #e2f364;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.title{
  margin-left: 10%;
}
.search-bar{
  font-size: clamp(0.875rem, 0.7679rem + 0.5714vw, 1rem);
  width: 40%;
  text-align: center;
  border: 2px solid #ffe54f;
  border-radius: 0.6rem;
  background-color: #ffb327;
  background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/5/55/Magnifying_glass_icon.svg/490px-Magnifying_glass_icon.svg.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: right;
  background-blend-mode:overlay;
}
.search-bar::placeholder{
  color: #414141fc;
  text-align: center;
}

#menu-comidas, #menu-bebidas{
  margin-top: 2rem;
  padding-top: 1rem;
}

/* css menu options */
.menu-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 250px));
  gap: 20px;
  justify-content: center;
}

.menu-card {
  display: flex;
  flex-direction: column;
  background-color: #ffe54f;
  border-radius: 0.8rem;
  overflow: hidden;
}

.menu-card img {
  width: 100%;
  height: 150px;
  border-radius: 0.8rem 0.8rem 0 0;
  object-fit:cover;
}
.menu-card img:hover{
  transform: scale(1.1,1.1);
  transition: 0.2s ease-in-out;
} 

.menu-card-info {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
  color: #191919;
  background-color: rgba(255, 254, 246, 0.329);
  padding: 20px;
  margin-bottom: 0.8rem;
}

.menu-card-info h3{
  height: 50px;
  font-size: clamp(1.3rem, 0.6167rem + 1.2vw, 1.4rem);
}

.menu-card-info p{
  height: 90px;
  font-size: clamp(1rem, 1rem + 0vw, 1rem);
}

.menu-card-info button, .eliminar-orden {
  font-size: clamp(0.2rem, 0.8rem + 0vw, 1rem);
  padding: 7px 3px;
  border: 1px solid #191919;
  border-radius: 0.8rem;
  color: #191919;
  background-color: transparent;
  cursor: pointer;
  transition: 0.3s;
  width: 40%;
}

.menu-card-info button:hover {
  background-color: #191919;
  color: #eee;
  box-shadow: 1px 1px 5px #474747;
}

.menu-options .price-button {
  display: inline-flex;
  width: 100%;
  align-items: center!important;
  justify-content: space-around;
}

/* css headings & carrito */
#seccion-carrito {
  padding-top: 15px;
}
#contenedor-pedidos, #orders-history {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  padding: 2rem;
  justify-content: center;
}

#contenedor-pedidos .lista-pedido, #orders-history .lista-pedido {
  background-color: rgb(255, 245, 167);
  list-style-type: none;
  padding: 1rem;
  max-width: 100%;
  border-radius: 0.8rem;
  box-shadow: 10px 10px 10px 0 rgba(0, 0, 0, 0.1);
  color: black;
}
#contenedor-pedidos .lista-pedido:hover{
  background-color: rgb(245, 226, 84);
}

.item-pedido {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.item-pedido p{
  margin: 0;
  width: 15%;
  text-align: center;
}
.item-pedido p:first-of-type{
  font-weight: 700;
  width: 40%;
}
.item-pedido p:nth-of-type(2){
  width: 5%;
}

#contenedor-pedidos .price-button {
  display: inline-flex;
  width: 20%;
  align-items: center!important;
  justify-content: space-between;
}

.contenedor-importe-total{
  margin-bottom: 4rem;
}
.contenedor-importe-total p{
  margin: 0;
}
.contenedor-importe-total a{
  line-height: 50%;
}
.contenedor-importe-total button{
  border-radius: 0.8rem;
}
.eliminar-orden{
  min-width: 25%
}
.eliminar-orden:hover{
  background-color: #f12626;
  color: #eee;
  box-shadow: 1px 1px 5px #6f1414;
}
.subtitle {
  background-color: rgba(246, 223, 49, 0.809);
  color: rgb(5, 5, 5);
}

.hidden-box {
  visibility: hidden;
  height:100px;
}


@media (max-width:660px) {
  #comidas-title-bar, #bebidas-title-bar {
    flex-wrap:wrap;
    justify-content: center;
  }
  .title{
    margin-left: 0;
  }
  .search-bar{
    width: 90%;
    margin:0
  }
  #contenedor-pedidos{
    padding: 0.5rem;
  }
  #contenedor-pedidos .lista-pedido{
    padding-left: 0.3rem;
    padding-right: 0.3rem;
  }
  #contenedor-pedidos .item-pedido{
    justify-content: space-between;
  }
  #contenedor-pedidos .price-button {
    width: 40%;
    justify-content: space-around;
  }
  #contenedor-pedidos .price-button button {
    width: 20%;
  }
} 

.cart-button-container{
  position: fixed;
  right: 3%;
  bottom: 12%;
}

.cart-button-container button{
  background-color: rgba(255, 245, 167, 0.819);
  padding: 0.8rem 1rem;
  border-radius: 50%;
  cursor: pointer;
  border: 0.5px solid #191919;
}

.cart-button-container button:hover{
  background-color: rgba(246, 225, 62, 0.752);
  transition: 0.3s;
}

/* css footer */

footer a, footer h3{
  color: rgb(244, 192, 24);
}

footer i{
  font-size: x-large;
}

footer a:hover{
  color: rgb(226, 243, 100);
}

/* dark mode css */
body {
  transition: background-color 0.3s, color 0.3s;
}

body.dark-mode {
  background-color: #50390d;
}

/* pestaña historial */
.history-title-container{
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  height: 55%;
}

.history-title-container button{
  margin: 12px;
  padding: 5px 20px;
  border-radius: 0.6rem;
  font-size: clamp(0.2rem, 0.4869rem + 0.8025vw, 1rem);
}