/* Town vendor dialogs (armorer, weaponsmith, peddler) and the bank: parchment rows, same tile look as the inventory window. */
.vd-list { display: flex; flex-direction: column; gap: 4px; max-height: 430px; overflow-y: auto; padding: 5px; background: var(--gf-paper-dark); border: 1px solid #a88a58; border-radius: 6px; }
.vd-h { margin: 6px 2px 0; padding-bottom: 2px; font-size: 13px; color: #6a3a12; border-bottom: 1px solid #a88a58; }
.vd-h:first-child { margin-top: 0; }
.vd-row { display: flex; align-items: center; gap: 8px; padding: 3px 6px; background: #efe4c8; border: 2px solid transparent; border-radius: 6px; }
.vd-row:hover { border-color: #b88c58; }
.vd-ico { display: flex; flex: none; }
.vd-ico img { border-radius: 6px; }
.vd-txt { display: flex; flex-direction: column; flex: 1; min-width: 0; line-height: 1.2; }
.vd-txt b { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vd-act { display: flex; align-items: center; gap: 4px; flex: none; }
.vd-qty { display: flex; align-items: center; gap: 4px; }
.vd-qty .gf-btn { padding: 1px 8px; font-size: 12px; }
.vd-row.set { flex-wrap: wrap; row-gap: 2px; }
.vd-row.set .vd-txt { flex: 1 1 150px; }
.vd-pieces { display: flex; gap: 3px; flex: none; }
.vd-foot, .bk-foot { margin-top: 6px; padding: 4px 10px; font-size: 12px; font-weight: 700; color: #4a2f14; text-align: center; background: #c9b78f; border: 1px solid #a88a58; border-radius: 16px; }
.bk-grid { display: grid; gap: 3px; justify-content: center; padding: 6px; background: var(--gf-paper-dark); border: 1px solid #a88a58; border-radius: 6px; }
.bk-grid .gf-tile { width: 42px; height: 42px; }
.bk-grid .gf-tile img { width: 36px; height: 36px; }
.bk-hint { margin: 5px 2px 0; text-align: center; }
@media (max-width: 700px) { .vd-row { flex-wrap: wrap; } .bk-grid { grid-template-columns: repeat(10, minmax(0, 1fr)) !important; } .bk-grid .gf-tile { width: auto; } }
/* Auction house, buy tab: category tree + rarity boxes on the left, filters / table / pager on the right. */
.ahb { display: flex; gap: 8px; align-items: flex-start; }
.ahb-left { flex: none; width: 170px; display: flex; flex-direction: column; gap: 4px; }
.ahb-h { font-size: 12px; font-weight: 700; color: #f3d08b; }
.ahb-boxes { display: grid; grid-template-columns: 1fr 1fr; gap: 1px 6px; font-size: 11px; font-weight: 700; padding: 3px; background: rgba(20, 12, 6, 0.4); border-radius: 4px; }
.ahb-box { display: flex; align-items: center; gap: 3px; text-shadow: var(--outline); }
.ahb-tree { display: flex; flex-direction: column; gap: 1px; max-height: 300px; overflow-y: auto; }
.ahb-cat, .ahb-sub { display: flex; justify-content: space-between; gap: 6px; padding: 2px 8px; border: 0; border-radius: 3px; font-size: 12px; text-align: left; color: #fff6dc; background: rgba(60, 40, 20, 0.55); cursor: pointer; }
.ahb-sub { padding-left: 20px; background: rgba(40, 26, 12, 0.4); }
.ahb-cat.on, .ahb-sub.on { background: rgba(214, 170, 90, 0.55); font-weight: 700; }
.ahb i { font-style: normal; color: #e8dcc0; }
.ahb-right { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ahb-bar { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.ahb-level { width: 56px; }
.ahb-count { margin-left: auto; font-size: 12px; font-weight: 700; color: #f3d08b; }
.ahb-head, .ahb-row { display: grid; grid-template-columns: 1fr 44px 190px; gap: 6px; align-items: center; }
.ahb-head { font-size: 12px; font-weight: 700; color: #f3d08b; padding: 2px 6px; background: rgba(20, 12, 6, 0.55); border-radius: 3px; }
.ahb-rows { min-height: 250px; display: flex; flex-direction: column; gap: 2px; }
.ahb-row { padding: 2px 6px; font-size: 13px; background: rgba(60, 40, 20, 0.35); border-radius: 3px; cursor: pointer; }
.ahb-row.on { background: rgba(214, 170, 90, 0.45); }
.ahb-row.mine { box-shadow: inset 3px 0 0 #6fbf6f; } .ahb-row.mine small { color: #8fd48f; }
.ahb-mine-h { font-weight: 600; font-size: 13px; padding: 2px 6px 4px; color: #e8d6a8; }
.ahb-name { display: flex; align-items: center; gap: 6px; font-weight: 700; text-shadow: var(--outline); }
.ahb-price { display: flex; flex-direction: column; align-items: flex-end; }
.ahb-unit { display: flex; align-items: center; gap: 4px; font-size: 11px; color: #5a3a14; }
.ahb-empty { text-align: center; margin: 90px 0; }
.ahb-pager { display: flex; justify-content: center; align-items: center; gap: 10px; }
.ahb-foot { display: flex; justify-content: flex-end; }
/* Auction house, sell tab: the form on the left, the objects of the bag on the right. */
.ahs { display: flex; gap: 8px; align-items: flex-start; }
.ahs-left { flex: none; width: 224px; } .ahs-right { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ahs-title { padding: 3px 8px; font-size: 13px; font-weight: 700; color: #f3d08b; background: rgba(20, 12, 6, 0.6); border-radius: 3px; margin-bottom: 4px; }
.ahs-box { display: flex; flex-direction: column; gap: 4px; padding: 6px; background: rgba(60, 40, 20, 0.35); border-radius: 4px; }
.ahs-sub { font-size: 12px; color: #5a3a14; font-weight: 700; }
.ahs-item { display: flex; gap: 6px; align-items: center; min-height: 46px; }
.ahs-slot { width: 46px; height: 46px; flex: none; } .ahs-slot.over { outline: 2px solid #f3d08b; }
.ahs-name { font-size: 12px; font-weight: 700; }
.ahs-line { font-size: 12px; display: flex; gap: 6px; align-items: center; } .ahs-qty { width: 56px; }
.ahs-price { display: flex; align-items: center; gap: 3px; font-size: 11px; } .ahs-num { width: 38px; padding: 1px 2px; } .ahs-price i { font-style: normal; color: #5a3a14; }
.ahs-days { font-size: 13px; font-weight: 700; padding: 1px 12px; background: rgba(20, 12, 6, 0.25); border-radius: 3px; width: fit-content; }
.ahs-fee { min-height: 22px; }
.ahs-head { grid-template-columns: 1fr 44px 190px; }
.ahs-rows { display: flex; flex-direction: column; gap: 2px; min-height: 290px; }
.ahs-row { display: grid; grid-template-columns: 1fr 44px 190px; gap: 6px; align-items: center; min-height: 34px; padding: 1px 6px; font-size: 13px; background: rgba(60, 40, 20, 0.35); border-radius: 3px; cursor: pointer; }
.ahs-row.empty { cursor: default; opacity: 0.4; } .ahs-row.on { background: rgba(214, 170, 90, 0.45); }
.ahs-ico { width: 34px; height: 34px; flex: none; } .ahs-pu { font-size: 11px; display: flex; gap: 4px; align-items: center; }