/* Background Remover — additive to utility.css. */

.br-workspace { border: 1px solid var(--line); border-radius: 20px; padding: 22px; box-shadow: var(--shadow); }
.br-workspace[hidden], .drop-zone[hidden], .result-actions[hidden], #brAfter[hidden], .br-placeholder[hidden] { display: none; }

.br-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.br-pane { margin: 0; display: grid; gap: 8px; min-width: 0; }
.br-pane figcaption { font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.br-pane img { width: 100%; height: auto; max-height: 46vh; object-fit: contain; border: 1px solid var(--line); border-radius: 12px; background: #fff; }

/* The chequerboard is the point of the After pane — it is how someone can
   see that the background is genuinely transparent rather than white. */
.br-pane-after img, .br-after-slot { background: #fff repeating-conic-gradient(#eef1f6 0% 25%, #fff 0% 50%) 50% / 18px 18px; }
.br-after-slot { border: 1px solid var(--line); border-radius: 12px; min-height: 180px; display: grid; place-items: center; overflow: hidden; }
.br-after-slot img { border: 0; border-radius: 0; }
.br-placeholder { margin: 0; padding: 20px; color: var(--muted); font-size: 13px; text-align: center; }

.br-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 18px; }
/* Comfortably past 44px so the primary action is easy to hit on a phone. */
.br-actions .button, .result-actions .button { min-height: 46px; }
.result-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 12px; border-top: 1px solid var(--line); padding-top: 16px; }

#brStatus { margin: 16px 0 0; min-height: 1.4em; }
#brStatus.error { color: #991b1b; }
#brStatus.success { color: var(--purple); }
#brStatus.busy { color: var(--muted); }

@media (max-width: 700px) {
  .br-compare { grid-template-columns: 1fr; }
  .br-pane img { max-height: 34vh; }
  .br-actions .button, .result-actions .button { flex: 1 1 100%; }
}