.order-wrapper{
  display:flex;
  justify-content:center;
  gap:20px;
  flex-wrap:wrap; /* biar aman kalau layar kecil */
}

.order-number,
.order-table{
  text-align:center;
}

.order-label{
  color:var(--muted);
  font-size:14px;
  margin-bottom:6px;
}

.code{
  display:inline-flex;
  border-radius:8px;
  overflow:hidden;
  border:1px solid var(--border);
}

.code span{
  padding:8px 14px;
  font-weight:600;
}

.code .order-app{
  background:#eee;
  color:#777;
  text-transform: uppercase;
}

.code .order-order{
  background:white;
}

.qr{
  text-align:center;
  margin:5px 0;
}

.qr img{
  width:220px;
}

.info{
  background:#fff3cd;
  padding:12px;
  border-radius:8px;
  font-size:14px;
  color:#8a6d3b;
  margin: 1rem;
}

.payment-card-cashier{
  margin-bottom: 2rem !important;
}


.tab-payment{
  display:flex;
  gap:20px;
  margin-bottom:15px;
  text-align: center;
  justify-content: center;
  align-items: center;
}

.tab-payment span{
  font-size:14px;
  color:#888;
  cursor: pointer;
}

.tab-payment .active{
  color:black;
  font-weight:bold;
}

.divider{
  width:1px;
  height:25px;
  background:#ddd;
}

.payment-tutorial{
  margin-top: 10px;
}

.tutorial-list{
  padding-left: 20px;
  margin: 0;
}

.tutorial-list li{
  margin-bottom: 10px;
  line-height: 1.6;
  color: #444;
  font-size: 14px;
}