/* ======================================================
   CART PANEL GLOBAL
====================================================== */

.cart-panel-global{

  position:fixed;
  top:0;
  right:0;

  width:300px;
  max-width:25%;
  max-height:70vh;

  background:#fff;

  box-shadow:-8px 0 25px rgba(0,0,0,.15);

  display:flex;
  flex-direction:column;

  z-index:9999;

  transform:translateX(100%);
  transition:transform .3s ease;

  border-radius:18px 0 0 18px;

  overflow-y:auto;

}

.cart-panel-global.active{
  transform:translateX(0);
}

/* ======================================================
   HEADER CARRITO
====================================================== */

.cart-panel-header{

  padding:18px;
  border-bottom:1px solid #eee;

  display:flex;
  justify-content:space-between;
  align-items:center;

}

.cart-panel-header h3{
  font-size:10px;
  margin:0;
}

.cart-panel-header button{
  background:none;
  border:none;
  font-size:18px;
  cursor:pointer;
}

/* ======================================================
   ITEMS CARRITO
====================================================== */

#cartPanelItems{
  flex:1;
  overflow-y:auto;
  padding:15px;
}

.cart-item{

  display:grid;

  grid-template-columns:1fr auto;

  gap:5px;

  padding:2px 0;

  border-bottom:1px solid #e5e5e5;

}

.cart-item__info{
  display:flex;
  flex-direction:column;
}

.cart-item__name{
  font-size:5px;
  font-weight:100;
}

.cart-item__meta{
  font-size:5px;
  opacity:.7;
}

.cart-item__price{
  font-size:5px;
  font-weight:100;
}

.cart-item__actions{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
}

.cart-item__remove{

  background:#7A0B12;
  color:#fff;

  border:none;

  padding:2px 5px;

  border-radius:14px;

  font-size:4px;

  cursor:pointer;

}

.cart-item__remove:hover{
  background:#a3121b;
}

/* ======================================================
   FOOTER CARRITO
====================================================== */

.cart-panel-footer{

  padding:15px;

  border-top:1px solid #eee;

  background:#fff;

}

.cart-panel-footer button{

  width:100%;

  margin-top:10px;

  padding:10px;

  border-radius:10px;

  font-size:5px;

}

/* ======================================================
   CONTROL CANTIDAD
====================================================== */

.modal-card .qty-row{
  display:flex;
  justify-content:center;
  margin-top:8px;
}

.modal-card .qty-control{
  position:relative;
  width:110px;
}

.modal-card .qty-input{

  width:100%;

  text-align:center;

  border-radius:18px;

  border:2px solid #ccc;

  padding:8px 40px 8px 10px;

  font-size:10px;

  height:40px;

  font-weight:600;

}

.modal-card .qty-arrows{

  position:absolute;

  right:15px;

  top:50%;

  transform:translateY(-50%);

  display:flex;
  flex-direction:column;

  gap:4px;

}

.modal-card .qty-btn{

  width:10px;
  height:15px;

  border-radius:6px;

  border:1px solid #ccc;

  background:#fff;

  cursor:pointer;

  font-size:3px;

}

/* ======================================================
   CARRITO GLOBAL SOLO MOVIL
====================================================== */

@media (max-width:768px){

.cart-panel-global{

  width:210px;      /* ancho carrito */
  max-width:none;

  max-height:90vh;

  top:10px;         /* mover arriba */
  right:0;          /* mover izquierda/derecha */

  border-radius:20px 0 0 20px;

}

/* TITULO */

.cart-panel-header h3{
  font-size:14px;
}

/* PRODUCTOS */

.cart-item__name{
  font-size:12px;
}

.cart-item__meta{
  font-size:11px;
}

.cart-item__price{
  font-size:12px;
}

/* BOTON ELIMINAR */

.cart-item__remove{
  font-size:10px;
  padding:4px 8px;
}

/* TOTAL */

.cart-panel-footer strong{
  font-size:14px;
}

/* BOTON FINALIZAR */

.cart-panel-footer button{
  font-size:13px;
  padding:12px;
}

}