#orders_main{
  display: grid;
  gap: var(--space-5);
  padding: var(--space-5) 0}

/* orders list */
#orders_list{
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fill, minmax(360px,1fr));
  grid-auto-rows: min-content}

/* Order card (3 rows) */
#orders_list .card{
  display: grid;
  grid-auto-rows: min-content}

#orders_list .card .row-2{
  display: grid;
  grid-template-columns: min-content 1fr; 
  gap: var(--space-2);
  align-items: center}
/* Row 3: Pills + options */
#orders_list .card .row-3{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3)}
.pills{
  display: flex;
  flex-wrap: wrap;
  gap: 8px}
.status{
  font-weight: 500;
  padding: 4px 8px;
  border-radius: var(--radius-md);
  font-size: var(--fs-sm);
  text-transform: capitalize}
.status.pending { background: var(--yellow-100); color: var(--yellow-400); }
.status.accepted{ background: var(--green-100);  color: var(--green-700); }
.status.declined{ background: var(--red-100);    color: var(--red-500); }

/* Small screens: allow slightly narrower min width */
@media (max-width: 700px){
  #orders_list{
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  }
}