.market-window {
  background: #444 url("../png/bg.png") repeat;
  border: 1px solid #111;
  box-shadow: inset 0 0 0 1px #777, 0 4px 18px #000;
  color: #dedede;
  flex-direction: column;
  font-family: Verdana, Arial, sans-serif;
  font-size: 10px;
  height: min(540px, calc(100% - 20px));
  left: 50%;
  min-height: 470px;
  min-width: 620px;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(750px, calc(100% - 24px));
  z-index: 40000;
}

.market-window button,
.market-window input {
  box-sizing: border-box;
  font: inherit;
}

.market-window button {
  appearance: none;
  -webkit-appearance: none;
  background: linear-gradient(#5e5e5e, #343434);
  border: 1px solid #181818;
  border-radius: 0;
  box-shadow: inset 0 0 0 1px #777;
  color: #ddd;
  min-height: 20px;
}

.market-window button:hover:not(:disabled),
.market-window button.active,
.market-window button.selected {
  background: linear-gradient(#747474, #484848);
  color: #fff;
}

.market-window button:disabled {
  color: #858585;
}

.market-title {
  color: #e2e2e2;
  flex: 0 0 20px;
  font-weight: bold;
  line-height: 20px;
  text-align: center;
  text-shadow: 1px 1px #111;
}

.market-content {
  display: grid;
  flex: 1;
  gap: 10px;
  grid-template-columns: 160px minmax(0, 1fr);
  min-height: 0;
  padding: 0 15px 8px;
}

.market-sidebar,
.market-main {
  min-height: 0;
}

.market-sidebar {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Wrapped by TibiaScrollbar (see tibia-scrollbar.js, shared with the NPC trade window): only
   the wrapper half keeps the box (background/border/sizing), so it does not also apply,
   doubled up, to the scrolling content pane living inside it. */
.market-categories.tibia-scroll-wrapper {
  background: url("../png/bg2.png") repeat;
  border: 1px inset #777;
  flex: 0 0 130px;
}

.market-categories button {
  background: transparent;
  border: 0;
  box-shadow: none;
  display: block;
  min-height: 15px;
  padding: 0 3px;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}

.market-categories > *:nth-child(odd):not(.selected) {
  background: rgba(0, 0, 0, 0.18);
}

.market-categories > *:nth-child(even):not(.selected) {
  background: rgba(255, 255, 255, 0.05);
}

.market-categories button.market-category-child {
  padding-left: 14px;
}

/* Heading rows (Cards, Weapons) look exactly like a plain category row -- only the small
   +/- toggle on the right sets them apart -- so the list reads as one consistent list */
.market-category-heading {
  align-items: center;
  display: flex;
  min-height: 15px;
  padding: 0 0 0 3px;
}

.market-category-heading-label {
  color: #dedede;
  cursor: pointer;
  flex: 1;
  overflow: hidden;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.market-category-heading-label.selected {
  color: #fff;
}

/* Selected category row uses the same "selected tab" texture as the chat window's own tabs
   (bg3.png, vs. the plain bg2.png used everywhere else in this list) instead of the generic
   gray button gradient every other button in the window uses */
.market-categories button.selected,
.market-category-heading.selected {
  background: url("../png/bg3.png") repeat !important;
  color: #fff;
}

/* Hovering a row (without clicking it) gets its own, lighter texture -- bg.png -- so it reads
   as a third, distinct state from the plain bg2.png rows and the bg3.png selected row. The
   +/- toggle button is excluded: it is a small icon button with its own hover/press artwork
   (see .market-category-toggle below), not a row that should get the bg.png row texture. */
.market-categories button:hover:not(.selected):not(:disabled):not(.market-category-toggle),
.market-category-heading:hover:not(.selected) {
  background: url("../png/bg.png") repeat !important;
  color: #fff;
}

/* max_button_small.png/min_button_small.png are each a 2-frame horizontal sprite (12x12 per
   frame, same "left normal / right pressed" convention as button_gray.png elsewhere in this
   file) -- show only the left frame at rest and shift to the right frame on hover/press for
   the click feedback */
.market-category-toggle {
  background: url("../png/window/max_button_small.png") no-repeat left center / 24px 12px !important;
  border: 0 !important;
  box-shadow: none !important;
  flex: 0 0 12px;
  height: 12px !important;
  image-rendering: pixelated;
  min-height: 12px !important;
  padding: 0;
  width: 12px;
}

.market-category-toggle:active {
  background-position: right center !important;
}

.market-category-toggle.expanded {
  background-image: url("../png/window/min_button_small.png") !important;
}

.market-check {
  line-height: 18px;
}

.market-check input,
.market-create input[type="radio"],
.market-create input[type="checkbox"] {
  margin: 0 3px 0 0;
  vertical-align: middle;
}

.tibia-radio-round {
  -webkit-appearance: none;
  appearance: none;
  background: url("../png/window/checkbox_round.png") no-repeat 0 0 / 12px 24px !important;
  border: 0 !important;
  box-shadow: none !important;
  cursor: pointer;
  height: 12px;
  image-rendering: pixelated;
  width: 12px;
}

.tibia-radio-round:checked {
  background-position: 0 -12px !important;
}

.market-label {
  font-weight: bold;
}

.market-items.tibia-scroll-wrapper {
  background: url("../png/bg2.png") repeat;
  border: 1px inset #777;
  flex: 1;
  min-height: 100px;
}

.market-item {
  align-items: center;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 25px;
  min-height: 34px !important;
  padding: 1px 2px;
  text-align: left;
  width: 100%;
}

.market-item.missing {
  color: #909090;
}

.market-item.missing canvas,
.market-item.missing span,
.market-item.missing small {
  opacity: 0.35;
}

.market-item canvas {
  background: url("../png/item.png") center/32px 32px no-repeat;
}

.market-item span {
  overflow-wrap: anywhere;
}

.market-item small {
  align-self: end;
  text-align: right;
}

.market-search {
  column-gap: 4px;
  display: grid;
  grid-template-columns: 32px 1fr 14px;
  grid-template-rows: auto auto;
  row-gap: 2px;
}

.market-search-preview {
  grid-column: 1;
  grid-row: 1 / 3;
}

.market-search-preview canvas {
  display: block;
}

.market-search-label {
  align-self: end;
  color: #ccc;
  grid-column: 2 / 4;
  grid-row: 1;
}

.market-search input {
  grid-column: 2;
  grid-row: 2;
}

.market-search-clear {
  grid-column: 3;
  grid-row: 2;
  justify-self: end;
  margin: 0;
}

.market-search input,
.market-window input[type="number"],
.market-window input[type="text"] {
  background: #272727;
  border: 1px inset #666;
  color: #eee;
  height: 18px;
  min-width: 0;
}

.market-window input[type="number"] {
  appearance: textfield;
  -moz-appearance: textfield;
}

.market-window input[type="number"]::-webkit-inner-spin-button,
.market-window input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.market-search button {
  min-height: 18px;
  padding: 0;
}

.market-search-clear {
  background: url("../png/window/erase-small.png") no-repeat center top / 14px 28px !important;
  border: 0 !important;
  box-shadow: none !important;
  height: 14px !important;
  image-rendering: pixelated;
  min-height: 14px !important;
  width: 14px;
}

.market-search-clear:active {
  background-position: center bottom !important;
}

.market-main {
  display: flex;
  flex-direction: column;
  gap: 5px;
  overflow: hidden;
}

.market-main h3,
.market-selected-name {
  color: #e8e8e8;
  font-size: 11px;
  font-weight: bold;
  margin: 0;
  min-height: 17px;
}

.market-offer-section {
  display: flex;
  flex: 0 0 168px;
  flex-direction: column;
  min-height: 168px;
}

.market-section-head {
  align-items: center;
  display: grid;
  gap: 7px;
  grid-template-columns: 1fr auto auto 48px;
  min-height: 23px;
}

.market-section-head input {
  width: 58px;
}

.market-create-grid input[type="text"] {
  width: 95px;
}

.market-table,
.market-wide-table {
  background: url("../png/bg2.png") repeat;
  border: 1px inset #777;
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
}

.market-table-head,
.market-table-row {
  display: grid;
  grid-template-columns: 1.2fr .55fr .75fr .85fr 1.1fr;
}

.market-table-head {
  background: #5b5b5b;
  border-bottom: 1px solid #1e1e1e;
  color: #eee;
  font-weight: bold;
}

.market-table-head span,
.market-table-row > span,
.market-table-row > button {
  border-right: 1px solid #292929;
  min-width: 0;
  overflow: hidden;
  padding: 2px 5px;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.market-table-body.tibia-scroll-wrapper {
  flex: 1;
  min-height: 90px;
}

button.market-table-row {
  background: transparent;
  border: 0;
  box-shadow: none;
  display: grid;
  min-height: 18px;
  padding: 0;
  width: 100%;
}

/* Same alternating overlay as the category list on the left (also sitting on bg2.png), so
   both offer tables read with the same "stripe" look */
.market-table-row:nth-child(odd):not(.selected) {
  background: rgba(0, 0, 0, 0.18);
}

.market-table-row:nth-child(even):not(.selected) {
  background: rgba(255, 255, 255, 0.05);
}

.market-table-row.selected {
  background: #676767;
}

/* History and My Offers use the actual bg2/bg3 textures (not the plain rgba overlay above)
   for their stripes, and each needs its own column layout since they don't share the offer
   table's 5-column Name/Amount/Piece Price/Total Price/Ends At shape */
.market-history-table .market-table-head,
.market-history-table .market-table-row {
  grid-template-columns: 1fr .5fr .55fr .65fr .9fr .6fr;
}

.market-mine-table .market-table-head,
.market-mine-table .market-table-row {
  grid-template-columns: 1.3fr .6fr .8fr .9fr .5fr;
}

.market-history-table .market-table-row:nth-child(odd):not(.selected),
.market-mine-table .market-table-row:nth-child(odd):not(.selected) {
  background: url("../png/bg2.png") repeat;
}

.market-history-table .market-table-row:nth-child(even):not(.selected),
.market-mine-table .market-table-row:nth-child(even):not(.selected) {
  background: url("../png/bg3.png") repeat;
}

.market-type-buy {
  color: #5fd15f;
  font-weight: bold;
}

.market-type-sell {
  color: #e05a5a;
  font-weight: bold;
}

.market-mine-section {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
}

.market-create {
  border-top: 1px solid #777;
  flex: 1 1 100px;
  min-height: 96px;
  padding-top: 4px;
}

.market-create-grid {
  align-items: center;
  display: grid;
  gap: 3px 13px;
  grid-template-columns: 110px minmax(150px, 1fr) minmax(145px, .8fr);
  padding-top: 4px;
}

.market-create-grid label {
  margin-right: 10px;
}

.market-create-grid > label,
.market-create-grid > span {
  text-align: right;
}

.market-create-grid input[type="number"] {
  width: 110px;
}

.market-create .create-button {
  min-width: 55px;
}

/* Primary actions (Accept an offer, Create a new one) get the same gray button graphic as the
   NPC trade window's Ok/Cancel and Buy/Sell tabs, for a consistent look across both windows */
.market-section-head button,
.market-create .create-button {
  background: url("../png/button_gray.png") no-repeat left center / 200% 100% !important;
  border: 0 !important;
  box-shadow: none !important;
  color: #ddd !important;
}

.market-section-head button:hover:not(:disabled),
.market-create .create-button:hover {
  background: url("../png/button_gray.png") no-repeat left center / 200% 100% !important;
}

.market-section-head button:active,
.market-create .create-button:active {
  background: url("../png/button_gray.png") no-repeat right center / 200% 100% !important;
}

.market-wide-table {
  flex: 1;
}

.market-empty {
  color: #aaa;
  padding: 8px;
  text-align: center;
}

.market-footer {
  align-items: center;
  border-top: 1px solid #262626;
  display: flex;
  flex: 0 0 34px;
  justify-content: flex-start;
  gap: 15px;
  padding: 0 15px;
}

.market-wallet {
  align-items: center;
  display: flex;
  gap: 6px;
}

.market-wallet-box {
  align-items: center;
  background: #313131;
  border: 1px inset #777;
  display: flex;
  gap: 4px;
  height: 19px;
  justify-content: flex-end;
  min-width: 90px;
  padding: 0 8px;
}

.market-window button.market-get {
  background-image: url("../png/store/get.png");
  background-position: center top;
  background-repeat: no-repeat;
  background-size: 64px 40px;
  border: 0;
  box-shadow: none;
  height: 20px;
  image-rendering: pixelated;
  margin: 0;
  padding: 0;
  width: 64px;
}

.market-window button.market-get:hover {
  background-image: url("../png/store/get.png");
  background-position: center top;
  background-repeat: no-repeat;
  background-size: 64px 40px;
}

.market-window button.market-get:active {
  background-position: center bottom;
}

.market-footer nav {
  display: flex;
  gap: 5px;
}

.market-window .market-footer nav button,
.market-window .market-footer nav button:hover,
.market-window .market-footer nav button:focus,
.market-window .market-footer nav button.active {
  background: url("../png/button_gray.png") no-repeat left center / 200% 100% !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  filter: none !important;
  transform: none !important;
  transition: none !important;
  color: #ddd !important;
  min-width: 75px;
}

.market-window .market-footer nav button:active {
  background: url("../png/button_gray.png") no-repeat right center / 200% 100% !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  filter: none !important;
  transform: none !important;
  transition: none !important;
  color: #ddd !important;
}

.market-coin {
  display: inline-block;
  margin-left: 3px;
  vertical-align: middle;
}

.market-coin.tibia,
.market-coin.wallet-gold {
  background-repeat: no-repeat;
  background-size: contain;
  image-rendering: pixelated;
}

.market-coin.tibia {
  background-image: url("../png/store/icon-tibiacointransferable.png");
  height: 12px;
  width: 12px;
}

.market-coin.wallet-gold {
  background-image: url("../png/store/icon-goldcoin.png");
  height: 9px;
  width: 9px;
}

@media (max-width: 760px), (max-height: 430px) {
  .market-window {
    font-size: 9px;
    height: calc(100% - 8px);
    min-height: 330px;
    min-width: 560px;
    width: calc(100% - 8px);
  }

  .market-content {
    gap: 6px;
    grid-template-columns: 135px minmax(0, 1fr);
    padding: 0 7px 5px;
  }

  .market-offer-section {
    flex: 0 0 132px;
    min-height: 132px;
  }

  .market-create {
    flex-basis: 86px;
  }

  .market-create-grid {
    gap: 2px 5px;
    grid-template-columns: 90px minmax(125px, 1fr) minmax(120px, .8fr);
  }
}