/* ============================================================ */
/* mint.css — Mint.exe: Paint → Zora NFT mint (Feature 8)        */
/* Win98 chrome: Tahoma 11px, #d4d0c8, inset/outset borders.     */
/* ============================================================ */

.mint-overlay {
  position: fixed;
  inset: 0;
  z-index: 3200;
  background: rgba(0, 0, 0, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
}

.window-mintmodal {
  position: relative;
  width: 440px;
  max-width: calc(100vw - 24px);
  max-height: calc(100vh - 24px);
  overflow: auto;
  font-family: Tahoma, sans-serif;
  font-size: 11px;
}

.mint-modal-body {
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mint-preamble { color: #333; }

.mint-preview-row { display: flex; gap: 10px; }

.mint-preview {
  width: 120px;
  height: 90px;
  object-fit: contain;
  background: #fff;
  border: 1px solid;
  border-color: #808080 #fff #fff #808080;
  image-rendering: pixelated;
  flex-shrink: 0;
}

.mint-fields { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.mint-label { font-size: 10px; color: #333; margin-top: 3px; }

.mint-input {
  font-family: Tahoma, sans-serif;
  font-size: 11px;
  padding: 2px 4px;
  border: 1px solid;
  border-color: #808080 #fff #fff #808080;
  background: #fff;
  width: 100%;
  box-sizing: border-box;
  resize: vertical;
}

.mint-inline-fields { display: flex; gap: 10px; }
.mint-inline-fields > span { display: flex; flex-direction: column; gap: 2px; }
.mint-input.mint-short { width: 110px; }

.mint-fee-line {
  padding: 4px 6px;
  background: #fff;
  border: 1px inset #d4d0c8;
  color: #444;
  font-size: 10px;
}

.mint-status { min-height: 14px; font-size: 10px; color: #444; }
.mint-status.is-error   { color: #990000; }
.mint-status.is-success { color: #006600; }
.mint-status.is-busy    { color: #666; }
.mint-status a { color: #0000cc; word-break: break-all; }

.mint-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  justify-content: flex-end;
}
.mint-wallet-state {
  margin-right: auto;
  font-family: 'Courier New', monospace;
  font-size: 10px;
  color: #444;
}

/* ── Toast ── */
.mint-toast {
  position: fixed;
  left: 50%;
  bottom: 48px;
  transform: translateX(-50%);
  z-index: 3300;
  font-family: Tahoma, sans-serif;
  font-size: 11px;
  color: #000;
  background: #d4d0c8;
  border: 1px solid;
  border-color: #fff #808080 #808080 #fff;
  box-shadow: 1px 1px 0 #000;
  padding: 5px 14px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
}
.mint-toast.is-visible { opacity: 1; }

/* ── Win98 error dialog ── */
.window-mint-error {
  position: relative;
  width: 320px;
  max-width: calc(100vw - 24px);
  font-family: Tahoma, sans-serif;
  font-size: 11px;
}
.mint-error-body {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px;
}
.mint-error-icon {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #c00;
  color: #fff;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.mint-error-msg { word-break: break-word; }
.mint-error-actions {
  display: flex;
  justify-content: center;
  padding: 0 12px 10px;
}

/* ── Paint File menu dropdown ── */
.mint-file-menu-trigger { cursor: pointer; }
.mint-file-menu {
  position: absolute;
  top: 100%;
  left: 2px;
  z-index: 50;
  background: #d4d0c8;
  border: 1px solid;
  border-color: #fff #808080 #808080 #fff;
  box-shadow: 1px 1px 0 #000;
  min-width: 130px;
}
.mint-file-menu-item {
  padding: 3px 16px 3px 10px;
  cursor: pointer;
  white-space: nowrap;
}
.mint-file-menu-item:hover { background: #000080; color: #fff; }

/* ── Gallery badge ── */
.mint-badge {
  display: inline-block;
  margin-top: 2px;
  font-size: 9px;
  font-weight: bold;
  color: #000080;
  text-decoration: none;
  border: 1px solid #000080;
  padding: 0 3px;
  background: #fff;
}
.mint-badge:hover { background: #000080; color: #fff; }

.mint-locked-btn { margin-left: 4px; }

/* ── Mobile (375px checklist item) ── */
@media (max-width: 480px) {
  .mint-preview-row { flex-direction: column; }
  .mint-preview { width: 160px; height: 120px; }
  .mint-inline-fields { flex-wrap: wrap; }
}