/* Fresh Remove Bg — small helpers that complement the Tailwind CDN page.
   The bulk of the design lives in template classes; this file only
   provides the few patterns Tailwind utilities can't express cleanly:
   the checker pattern + the radio-pill swatch styling. */

.preview-checker {
  background-image:
    linear-gradient(45deg, #e2e8f0 25%, transparent 25%),
    linear-gradient(-45deg, #e2e8f0 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #e2e8f0 75%),
    linear-gradient(-45deg, transparent 75%, #e2e8f0 75%);
  background-size: 18px 18px;
  background-position: 0 0, 0 9px, 9px -9px, -9px 0;
}

/* Background-color radio pills used in the editor */
.swatch {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 13px;
  border: 1px solid #e2e8f0;
  cursor: pointer;
  user-select: none;
  transition: box-shadow 120ms, border-color 120ms, transform 120ms;
}
.swatch:hover { transform: translateY(-1px); }
.swatch input { display: none; }
.swatch:has(input:checked) {
  box-shadow: 0 0 0 2px #10b981;
  border-color: #10b981;
}
.swatch.swatch-checker {
  background-image:
    linear-gradient(45deg, #cbd5e1 25%, transparent 25%),
    linear-gradient(-45deg, #cbd5e1 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #cbd5e1 75%),
    linear-gradient(-45deg, transparent 75%, #cbd5e1 75%);
  background-size: 12px 12px;
  background-position: 0 0, 0 6px, 6px -6px, -6px 0;
  color: #0f172a;
}
.swatch.swatch-custom { padding: 4px 8px 4px 4px; }
.swatch.swatch-custom input[type="color"] {
  width: 28px;
  height: 28px;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  display: inline-block;
}