/* Announce window controls: item picker (itemPicker.js), refine + amount,
   price with z / บาท (priceInput.js). The window itself is in announce.css. */
.picker { position: relative; }
.picker [hidden] { display: none; }
.picker-input { width: 100%; }
.picker-list {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 5;
  max-height: 264px; overflow-y: auto; margin: 0; padding: 4px; list-style: none;
  background: #15171c; border: 1px solid var(--line); border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}
.picker-row {
  display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 6px;
  color: var(--fg); font-size: 15px; cursor: pointer;
}
.picker-row:hover, .picker-row.is-active { background: var(--card); color: var(--gold); }
.picker-none { padding: 8px; font-size: 14px; }
.picker-icon { flex: none; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; }
.picker-icon img, .picker-icon svg { width: 24px; height: 24px; image-rendering: pixelated; }
.picker-chip {
  display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 4px 6px 4px 10px;
  background: var(--card); border: 1px solid var(--gold); border-radius: 8px; color: var(--fg); font-size: 15px;
}
.picker-chip strong { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.picker-change {
  height: 32px; padding: 0 12px; background: none; border: 1px solid var(--line); border-radius: 6px;
  color: var(--muted); font-size: 13px;
}
.picker-change:hover { border-color: var(--gold); color: var(--gold); }

.form-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.modal-label > .field { width: 100%; min-width: 0; }

.price-box { display: flex; flex-direction: column; gap: 4px; }
.price-row { display: flex; gap: 8px; }
.price-input { flex: 1; min-width: 0; }
.unit-row { display: flex; gap: 6px; }
.unit-btn {
  height: 44px; min-width: 56px; padding: 0 12px;
  background: var(--card); border: 1px solid var(--line); border-radius: 8px; color: var(--muted);
}
.unit-btn.is-active { border-color: var(--gold); color: var(--gold); }

/* card boxes (cardPickers.js): one per slot of the picked item, or "+ ใส่การ์ด" */
.card-box[hidden], .card-add[hidden] { display: none; }
.card-slots { display: flex; flex-direction: column; gap: 8px; }
.card-slots:empty { display: none; }
.card-slots .picker-chip { border-color: var(--card-slot); }
.card-add {
  align-self: flex-start; height: 34px; padding: 0 14px;
  background: none; border: 1px dashed var(--line); border-radius: 8px; color: var(--muted); font-size: 13px;
}
.card-add:hover { border-color: var(--card-slot); color: var(--card-slot); }