/* =========================================================================
   Background remover. Uses the image converter's layout (image-converter.css)
   and adds the color swatches, the disabled JPEG button, and a warning
   state for images where no clear subject was found.
   ========================================================================= */

/* Color swatches: eight presets and a ninth that opens any color. */
.br-sw { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 5px; }
.br-sw button, .br-custom {
  position: relative; aspect-ratio: 1; min-width: 0; padding: 0; cursor: pointer;
  border: 1px solid rgba(255,255,255,.18); border-radius: 5px;
}
.br-sw button.on, .br-custom.on { box-shadow: 0 0 0 2px var(--ch-panel), 0 0 0 3px var(--gold); }
.br-custom {
  display: grid; place-items: center; overflow: hidden;
  border-style: dashed; border-color: rgba(255,255,255,.3); background: none;
}
.br-custom::before { content: "+"; font: 600 15px var(--body); color: rgba(255,255,255,.7); }
.br-custom:hover { border-color: var(--gold); }
.br-custom:hover::before { color: var(--gold); }
.br-custom.on { border-style: solid; background: var(--c, #FFFFFF); }
.br-custom.on::before { content: none; }
.br-custom input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: 0; padding: 0; }

.ic-seg button:disabled { opacity: .35; cursor: default; }
.ic-seg button:disabled:hover { border-color: rgba(255,255,255,.1); color: rgba(255,255,255,.82); }

.ic-q-row.warn { border-color: rgba(242,193,78,.45); }
.ic-q-row.warn .ic-q-size { color: #F2C14E; }

.br-retry { margin-left: 4px; font-weight: 600; }

/* Remove Background, under the preview of an image not yet started; the
   preview draws the image in the room above it. */
.br-go {
  position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  max-width: calc(100% - 40px); padding: 14px 18px; text-align: center;
  background: rgba(16,17,20,.92); border: 1px solid rgba(255,255,255,.14); border-radius: 10px;
}
.br-go .ws-btn { padding: 11px 24px; font-size: 13.5px; }
.br-go span { font: 400 13px/1.45 var(--body); color: rgba(255,255,255,.62); }