:root {
  --accent-color: #069fe6;
  --light-gray: rgba(0, 0, 0, 0.1);
}
/*--------------BACKDROP---------------*/
.backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 20;
  opacity: 0;
  display: none;
  transition: opacity .1s ease;
}
.backdrop.show{
  display: block;
  opacity: 1;
}

.sidecart{
  position: fixed;
  right: 0;
  height: 100vh;
  top: 0;
  width: 450px;
  background-color: white;
  box-shadow: -10px 0 15px var(--light-gray);
  border-radius: 15px;
  padding-inline: 1rem;
  transform: translateX(110%);
  visibility: hidden;
  transition: transform 0.5s ease-in-out;/*, visibility 0.5s ease-in-out;*/
  z-index: 30;
}

.sidecart.open{
  transform: translateX(0);
  visibility: visible;
  transition: transform 0.5s ease-in-out;
  /* transition-delay: 0s, 0s; */
}



.cart_content{
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* --------------------CART HEADER ------------------------*/
.cart_header{
  padding-top: 2rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid black;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.header_tittle {
  position: relative;
}
.header_tittle h2{
  font-weight: lighter;
  font-family: "encabezado";
}
.header_tittle span{
  position: absolute;
  top: -5px;
  right: -20px;
  width: 20px;
  height: 20px;
  background-color: var(--accent-color);
  border-radius: 50%;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
}
.close_btn{
  font-size: 40px;
  font-weight: lighter;
  cursor: pointer;
  transition: transform 0.3s ease; /* Transición suave */
}
.close_btn:hover{
  transform: scale(1.4);
}

/* -------------------CART ITEMS -------------------------*/
.cart_items{
  flex: 1;
  display: flex;
  flex-direction: column;
}
.empty_message {
  font-family: "parrafo";
  font-size: 15px;
  text-align: center;
  margin-top: 50px;
}
.product_container{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
  padding-right: 10px;
  border-radius: 18px;
  box-shadow: 0 5px 8px rgba(0,0,0,0.4);
}
.product_container.yellow{
  background-color: rgba(255, 235, 174, 0.4);
}
.product_container.green{
  background-color: rgba(139, 155, 129, 0.2);
}
.product_image{
  width: auto;
  height: 100px;
}
.products_container_center{
  flex: 1;
  padding-left: 20px;
}
.products_container_center a{
  text-decoration: none;
}
.product_container h3{
  font-family: "encabezado";
  font-weight: lighter;
  color: black;
}
.delete{
  width: auto;
  height: 25px;
  cursor: pointer;
  transition: transform 0.2s ease; /* Transición suave */
}
.delete:hover{
  transform: scale(1.3); /* Efecto de agrandamiento */
}
.item_price {
  font-size: 18px;
  font-family: "parrafo";
  font-weight: bold;
  margin-right: 20px;
}
/*-----------SELECTOR DE CANTIDAD--------------------*/
.selector{
    width: 100px;
    height: 25px;
    border: 1px solid black;
    display: flex;
    align-items: center;
    justify-content: space-around;
    margin-top: 5px;
    border-radius: 18px;
}
.qty-btn{
    width: 3vh;
    border: none;
    background-color: transparent;
    color: #333;
    font-size: 28px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    transition: transform 0.2s ease;
    border-radius: 40%;
}
.qty-btn:hover {
  transform: scale(1.3);
  background-color: transparent;
}
.selector input[type="number"] {
  width: 25px;
  height: 100%;
  text-align: center;
  font-size: 18px;
  border: none;
  background-color: transparent;
}
.selector input::-webkit-outer-spin-button,
.selector input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.selector input[type="number"] {
  -moz-appearance: textfield;
}

/* -------------------CART FOOTER -------------------------*/
.cart_amount{
  display: flex;
  flex-direction: column;
  gap: 0
}
.breakdown{
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 18px;
  font-family: "parrafo";
  margin: 0;
}
.cart_buttons {
  width: 100%;
  height: 100px;
  display: flex;
  justify-content: center;
  gap: 1rem;
  align-items: center;
  margin-top: 20px;
  margin-bottom: 20px;
}
.cart_buttons button{
  width: 200px;
  height: 70px;
  border-radius: 18px;
  cursor: default;
  color: #9e9e9e;
  transition: transform 0.2s ease; /* Transición suave */
  font-size: 18px;
  font-weight: lighter;
  border: none;
  
}
.cart_buttons button.active{
  cursor: pointer;
}
.cart_buttons button.active:hover{
  transform: scale(1.1);
}
.empty_btn.active{
  color: black;
}
.buy_btn.active{
  background-color: #8B9B81;
  font-weight: bold;
  color: white;
}