/* =========================================================
   ORDER VIEW
   depends on account.css + orders.css
   ========================================================= */

.ov-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

@media (min-width: 960px){
  .ov-grid{
    grid-template-columns: 1.15fr .85fr;
    align-items: start;
  }
}

.ov-right{
  display: grid;
  gap: 12px;
}

/* "table" */
.ov-table{
  display: grid;
  gap: 0;
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 14px;
  overflow: hidden;
}

.ov-tr{
  display: grid;
  grid-template-columns: 1fr 70px 110px 110px;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(0,0,0,.06);
  background: #fff;
}

.ov-tr:last-child{ border-bottom: 0; }

.ov-th{
  background: rgba(0,0,0,.02);
  font-size: 12px;
  font-weight: 800;
  color: rgba(0,0,0,.70);
}

.ov-td{
  font-size: 13px;
  color: rgba(0,0,0,.90);
}

.ov-name{
  word-break: break-word;
}

.r{ text-align: right; }

.ov-total{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-top: 12px;
  font-size: 14px;
}

.ov-pay{
  margin-top: 14px;
}

.ov-pay__hint{
  margin-top: 8px;
  font-size: 12px;
  color: rgba(0,0,0,.62);
}

@media (max-width: 520px){
  .ov-tr{
    grid-template-columns: 1fr 56px 90px 90px;
  }
}