/* Character Bazaar — SOE layout match */
.bazaar-container,
.bazaar-detail-container,
.bazaar-create-container {
  font-family: var(--m-font, 'Source Sans 3', system-ui, sans-serif);
  color: var(--m-text, #ffffff);
  margin: 0 0 24px;
}

.bazaar-header-title,
.bazaar-top-title,
.bazaar-title {
  text-align: center;
  font-family: var(--m-display, 'Outfit', system-ui, sans-serif);
  color: var(--m-text, #ffffff);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0.02em;
  margin: 4px 0 18px;
  text-shadow: none;
}

.bazaar-nav-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  background: var(--m-panel, rgba(18,18,18,.92));
  border: 1px solid var(--m-border, rgba(255,255,255,.10));
  border-radius: var(--m-radius-sm, 7px);
  padding: 8px 10px;
  margin-bottom: 14px;
}

.bazaar-tabs { display: flex; flex-wrap: wrap; gap: 6px; }

.bazaar-tab {
  color: var(--m-text2, #f2f2f2);
  text-decoration: none;
  padding: 7px 12px;
  font-size: 12px;
  font-weight: 600;
  border-radius: var(--m-radius-sm, 7px);
  background: var(--m-bg3, #1c1c1c);
  border: 1px solid var(--m-border, rgba(255,255,255,.10));
  transition: background .15s, border-color .15s, color .15s;
}
.bazaar-tab:hover,
.bazaar-tab.active {
  color: var(--m-text, #ffffff);
  background: var(--m-bg4, #262626);
  border-color: var(--m-border-hi, rgba(255,255,255,.18));
  text-shadow: none;
}

.bazaar-btn-sell,
.bazaar-btn-show,
.bazaar-btn-search,
.bazaar-btn-buy,
.bazaar-btn-bid,
.bazaar-btn-cancel,
.bazaar-btn-submit,
.bazaar-btn-copy,
.bazaar-type-btn {
  display: inline-block;
  color: var(--m-text, #ffffff) !important;
  background: var(--m-bg4, #262626);
  border: 1px solid var(--m-border-hi, rgba(255,255,255,.18));
  padding: 7px 14px;
  font-size: 12px;
  font-weight: 600;
  border-radius: var(--m-radius-sm, 7px);
  text-decoration: none;
  text-transform: none;
  letter-spacing: 0.02em;
  box-shadow: none;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.bazaar-btn-sell:hover,
.bazaar-btn-show:hover,
.bazaar-btn-search:hover,
.bazaar-btn-buy:hover,
.bazaar-btn-bid:hover,
.bazaar-btn-submit:hover,
.bazaar-btn-copy:hover,
.bazaar-type-btn:hover,
.bazaar-type-btn.active {
  background: #303030;
  border-color: var(--m-accent, #ffffff);
  color: #fff !important;
}

.bazaar-btn-sell,
.bazaar-btn-buy,
.bazaar-btn-submit {
  background: linear-gradient(180deg, #2f2f2f 0%, #222 100%);
  border-color: var(--m-accent-2, #a8a8a8);
}

.bazaar-btn-cancel {
  background: transparent;
  border-color: var(--m-red, #e86a6a);
  color: var(--m-red, #e86a6a) !important;
}
.bazaar-btn-cancel:hover {
  background: rgba(232,106,106,.12);
}

.bazaar-filter-box,
.bazaar-card,
.bazaar-empty-notice,
.bazaar-form-card,
.bazaar-rules-box,
.bazaar-notice-box,
.bazaar-action-box,
.bazaar-info-section,
.bazaar-trade-msg-box {
  background: var(--m-panel, rgba(18,18,18,.92));
  border: 1px solid var(--m-border, rgba(255,255,255,.10));
  border-radius: var(--m-radius, 10px);
  box-shadow: var(--m-shadow, 0 14px 36px rgba(0,0,0,.35));
}

.bazaar-filter-box { padding: 14px; margin-bottom: 16px; }
.bazaar-filter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)) 1.5fr auto;
  gap: 12px;
  align-items: flex-end;
}
.bazaar-field label,
.bazaar-form-group label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--m-text3, #d8d8d8);
  margin-bottom: 5px;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.bazaar-field select,
.bazaar-field input[type="text"],
.bazaar-field input[type="number"],
.bazaar-form-group select,
.bazaar-form-group input[type="number"],
.bazaar-form-group input[type="password"],
.bazaar-form-row input[type="number"],
.bazaar-form-row input[type="password"] {
  width: 100%;
  background: var(--m-bg, #101010);
  border: 1px solid var(--m-border, rgba(255,255,255,.10));
  color: var(--m-text, #ffffff);
  padding: 8px 10px;
  font-size: 13px;
  border-radius: var(--m-radius-sm, 7px);
  box-sizing: border-box;
}
.bazaar-range-inputs { display: flex; gap: 6px; }

.bazaar-alert {
  padding: 12px 14px;
  border-radius: var(--m-radius-sm, 7px);
  margin-bottom: 14px;
  font-size: 13px;
}
.bazaar-alert-success {
  background: rgba(93,204,138,.08);
  border: 1px solid rgba(93,204,138,.35);
  color: var(--m-green, #5dcc8a);
}
.bazaar-alert-error {
  background: rgba(232,106,106,.08);
  border: 1px solid rgba(232,106,106,.35);
  color: var(--m-red, #e86a6a);
}

.bazaar-card {
  margin-bottom: 14px;
  overflow: hidden;
}
.bazaar-card-header {
  background: var(--m-header, linear-gradient(180deg,#2a2a2a 0%,#1a1a1a 100%));
  border-bottom: 1px solid var(--m-border, rgba(255,255,255,.10));
  padding: 10px 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
.bazaar-card-name {
  color: var(--m-accent, #ffffff);
  font-family: var(--m-display, Outfit, system-ui, sans-serif);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
}
.bazaar-card-name:hover { color: #fff; text-decoration: underline; }
.bazaar-card-meta { font-size: 11px; color: var(--m-text3, #d8d8d8); margin-top: 2px; }
.bazaar-card-body {
  padding: 12px 14px;
  display: grid;
  grid-template-columns: 88px 120px 1fr;
  gap: 14px;
  align-items: center;
}
@media (max-width: 700px) {
  .bazaar-card-body { grid-template-columns: 1fr; }
  .bazaar-nav-bar { flex-direction: column; align-items: stretch; }
}

.bazaar-outfit-box,
.bazaar-eq-grid,
.bazaar-slot,
.bazaar-item-icon {
  background: var(--m-bg, #101010);
  border: 1px solid var(--m-border, rgba(255,255,255,.10));
  border-radius: var(--m-radius-sm, 7px);
}
.bazaar-outfit-box {
  width: 84px; height: 84px;
  display: flex; justify-content: center; align-items: center;
  overflow: hidden;
}
.bazaar-outfit-img {
  max-width: 64px; max-height: 64px;
  image-rendering: pixelated;
}
.bazaar-eq-grid {
  width: 106px;
  display: grid;
  grid-template-columns: repeat(3, 32px);
  grid-template-rows: repeat(4, 32px);
  gap: 3px;
  padding: 4px;
}
.bazaar-slot {
  width: 32px; height: 32px;
  display: flex; justify-content: center; align-items: center;
  position: relative;
  border-radius: 4px;
}
.bazaar-slot-amulet{grid-column:1;grid-row:1}
.bazaar-slot-helmet{grid-column:2;grid-row:1}
.bazaar-slot-backpack{grid-column:3;grid-row:1}
.bazaar-slot-weapon{grid-column:1;grid-row:2}
.bazaar-slot-armor{grid-column:2;grid-row:2}
.bazaar-slot-shield{grid-column:3;grid-row:2}
.bazaar-slot-ring{grid-column:1;grid-row:3}
.bazaar-slot-legs{grid-column:2;grid-row:3}
.bazaar-slot-ammo{grid-column:3;grid-row:3}
.bazaar-slot-boots{grid-column:2;grid-row:4}
.bazaar-slot img,
.bazaar-item-icon img {
  width: 30px; height: 30px;
  object-fit: contain;
  image-rendering: pixelated;
}
.bazaar-slot .item-count,
.bazaar-item-icon .count-badge {
  position: absolute; right: 1px; bottom: 0;
  font-size: 9px; font-weight: 700;
  color: #fff; text-shadow: 1px 1px 0 #000;
}

.bazaar-info-table,
.bazaar-skills-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  background: var(--m-bg2, #161616);
  border: 1px solid var(--m-border, rgba(255,255,255,.10));
  border-radius: var(--m-radius-sm, 7px);
  overflow: hidden;
  margin-bottom: 14px;
}
.bazaar-info-table td,
.bazaar-skills-table td,
.bazaar-skills-table th {
  padding: 7px 10px;
  border-bottom: 1px solid var(--m-border, rgba(255,255,255,.08));
}
.bazaar-info-table td:first-child,
.bazaar-skills-table th {
  color: var(--m-text3, #d8d8d8);
  font-weight: 600;
}
.bazaar-info-table td:last-child {
  color: var(--m-text, #ffffff);
  font-weight: 600;
  text-align: right;
}
.bazaar-time-end { color: var(--m-red, #e86a6a) !important; }
.bazaar-points-val,
.bazaar-action-left .points-big,
.date-highlight {
  color: var(--m-accent, #ffffff) !important;
}

.bazaar-empty-notice {
  text-align: center;
  padding: 36px 20px;
  color: var(--m-text2, #f2f2f2);
}

.bazaar-create-container .bazaar-form-card,
.bazaar-rules-box { max-width: 640px; margin: 0 auto 16px; padding: 16px; }
.bazaar-form-group { margin-bottom: 14px; }
.bazaar-help-text { font-size: 12px; color: var(--m-text3, #d8d8d8); margin-top: 4px; }
.bazaar-type-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.bazaar-type-btn { background: var(--m-bg3, #1c1c1c); }
.bazaar-type-btn.active {
  background: var(--m-bg4, #262626);
  border-color: var(--m-accent, #ffffff);
}
.bazaar-rules-box h4,
.bazaar-info-section h4 {
  margin: 0 0 8px;
  font-family: var(--m-display, Outfit, system-ui, sans-serif);
  font-size: 14px;
  color: var(--m-accent, #ffffff);
  font-weight: 600;
}

.bazaar-notice-box,
.bazaar-action-box,
.bazaar-info-section,
.bazaar-trade-msg-box { padding: 14px; margin-bottom: 14px; }
.bazaar-action-box {
  display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-start;
  justify-content: space-between;
}
.bazaar-action-left .points-big { font-size: 20px; font-weight: 700; }
.bazaar-form-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; }
.bazaar-form-row input { max-width: 160px; }

.bazaar-items-grid {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.bazaar-item-icon {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  position: relative;
}

/* Fit inside SOE xContainer */
.xContainer_inner .bazaar-container,
.xContainer_inner .bazaar-detail-container,
.xContainer_inner .bazaar-create-container {
  max-width: 100%;
  box-sizing: border-box;
}

.bazaar-back-link {
  color: var(--m-text3, #d8d8d8);
  font-size: 12px;
  text-decoration: none;
}
.bazaar-back-link:hover { color: var(--m-accent, #ffffff); }