/* Order form panel */

.order-panel {
  border: 1px solid var(--shop-border);
  border-radius: 1rem;
  background: var(--shop-card);
  color: var(--bs-body-color);
  overflow: hidden;
}

.order-panel-header {
  background: var(--shop-order-header-bg);
  border-bottom: 1px solid var(--shop-border);
}

.order-panel h2,
.order-panel h3 {
  color: var(--bs-heading-color);
}

/* Order form table layout */

.order-table-wrap {
  overflow-x: visible;
  background: var(--shop-card);
}

.order-table-wrap .table {
  table-layout: fixed;
  width: 100%;
}

.order-table-wrap th,
.order-table-wrap td {
  padding: 0.45rem;
}

.order-table-wrap .form-select {
  width: 100%;
  min-width: 0;
}

.weapon-type-column,
.class-column,
.armor-type-column,
.quality-column {
  width: 16%;
}

.level-column {
  width: 10%;
}

.item-name-column {
  width: 24%;
}

.controls-cell {
  width: 5.5rem;
  min-width: 5.5rem;
  text-align: center;
  white-space: nowrap;
}

.controls-cell .btn {
  padding-inline: 0.45rem;
}

.price-cell {
  width: 6rem;
  min-width: 6rem;
  font-weight: 700;
  text-align: end;
  white-space: nowrap;
  color: var(--bs-body-color);
}

.item-name-cell {
  min-width: 0;
}

/* Order totals */

.total-strip {
  background: var(--shop-total-bg);
  border-top: 1px solid var(--shop-border);
}

.total-price {
  font-size: 1.35rem;
  font-weight: 800;
  color: #60a5fa;
}

/* Order table empty states */

#weapon-order-body tr.empty-row > td.empty-state,
#armor-order-body tr.empty-row > td.empty-state {
  background-color: var(--bs-table-bg) !important;
  color: var(--bs-body-color);
  border-color: var(--bs-border-color);
}

/* Responsive order form tables */

@media (max-width: 767.98px) {
  .price-cell {
    text-align: left;
  }

  .order-table-wrap {
    border: 0 !important;
  }

  .order-table-wrap table,
  .order-table-wrap thead,
  .order-table-wrap tbody,
  .order-table-wrap tr,
  .order-table-wrap th,
  .order-table-wrap td {
    display: block;
    width: 100%;
  }

  .order-table-wrap thead {
    display: none;
  }

  .order-table-wrap tr[data-line-kind] {
    border: 1px solid var(--shop-border);
    border-radius: 0.75rem;
    padding: 0.75rem;
    margin-bottom: 0.75rem;
    background: var(--shop-card);
  }

  .order-table-wrap tr[data-line-kind] td {
    border: 0;
    padding: 0.35rem 0;
  }

  .order-table-wrap tr[data-line-kind] td::before {
    display: block;
    margin-bottom: 0.2rem;
    color: var(--shop-muted);
    font-size: 0.8rem;
    font-weight: 700;
  }

  #weapon-order-body tr[data-line-kind] td:nth-child(1)::before {
    content: "Type";
  }

  #weapon-order-body tr[data-line-kind] td:nth-child(2)::before {
    content: "Quality";
  }

  #weapon-order-body tr[data-line-kind] td:nth-child(3)::before {
    content: "Level";
  }

  #weapon-order-body tr[data-line-kind] td:nth-child(4)::before {
    content: "Name";
  }

  #weapon-order-body tr[data-line-kind] td:nth-child(5)::before {
    content: "Controls";
  }

  #weapon-order-body tr[data-line-kind] td:nth-child(6)::before {
    content: "Price";
  }

  #armor-order-body tr[data-line-kind] td:nth-child(1)::before {
    content: "Class";
  }

  #armor-order-body tr[data-line-kind] td:nth-child(2)::before {
    content: "Type";
  }

  #armor-order-body tr[data-line-kind] td:nth-child(3)::before {
    content: "Quality";
  }

  #armor-order-body tr[data-line-kind] td:nth-child(4)::before {
    content: "Level";
  }

  #armor-order-body tr[data-line-kind] td:nth-child(5)::before {
    content: "Name";
  }

  #armor-order-body tr[data-line-kind] td:nth-child(6)::before {
    content: "Controls";
  }

  #armor-order-body tr[data-line-kind] td:nth-child(7)::before {
    content: "Price";
  }

  .controls-cell,
  .price-cell {
    width: 100%;
    min-width: 0;
    text-align: left;
  }

  .controls-cell .btn-group {
    width: 100%;
  }

  .controls-cell .btn {
    flex: 1 1 auto;
  }
}