/* wcrg.css  —  WCWS Safe 301 Redirect Generator
 * Class prefix: wcrg-
 * Focus-visible, reduced motion friendly, dark-mode aware, print optimized
 */

/* Layout wrapper */
.wcrg-wrap {
  max-width: 880px;
  margin: 24px auto;
  padding: 16px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #ffffff;
  color: #111827;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", sans-serif;
  box-sizing: border-box;
}

/* Title */
.wcrg-title {
  margin: 0 0 10px 0;
  font-size: 22px;
  line-height: 1.3;
}

/* Grid */
.wcrg-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.wcrg-col {
  flex: 1 1 260px;
  min-width: 260px;
}

/* Labels & Inputs */
.wcrg-label {
  display: block;
  font-weight: 600;
  margin-bottom: 6px;
}
.wcrg-input,
.wcrg-select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background: #fff;
  color: #111827;
  box-sizing: border-box;
}
.wcrg-input:focus,
.wcrg-select:focus {
  outline: 2px solid transparent;
  box-shadow: 0 0 0 3px rgba(59,130,246,.45);
  border-color: #93c5fd;
}

/* Checkboxes block */
.wcrg-checks {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin: 8px 0 16px;
}
.wcrg-small {
  font-size: 12px;
  line-height: 1.35;
  color: #374151;
}
.wcrg-small input[type="checkbox"] {
  margin-right: 6px;
  vertical-align: middle;
}

/* Buttons */
.wcrg-btn {
  display: inline-block;
  padding: 12px 16px;
  border: 0;
  background: #111827;
  color: #ffffff;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 600;
  transition: filter .15s ease, transform .02s ease;
}
.wcrg-btn:hover { filter: brightness(0.95); }
.wcrg-btn:active { transform: translateY(1px); }
.wcrg-btn:focus-visible {
  outline: 2px solid transparent;
  box-shadow: 0 0 0 3px rgba(59,130,246,.55);
}
.wcrg-btn[disabled] {
  opacity: .6;
  cursor: not-allowed;
}

/* Alerts */
.wcrg-bad,
.wcrg-warn,
.wcrg-good {
  padding: 10px 12px;
  border-radius: 8px;
  margin: 10px 0;
  border: 1px solid transparent;
}
.wcrg-bad  { background:#fef2f2; color:#991b1b; border-color:#fecaca; }
.wcrg-warn { background:#fffbeb; color:#92400e; border-color:#fde68a; }
.wcrg-good { background:#ecfdf5; color:#065f46; border-color:#a7f3d0; }

/* Output block */
.wcrg-pre {
  background: #0b1020;
  color: #e6edf3;
  padding: 14px;
  border-radius: 10px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  border: 1px solid #111827;
}

/* Helper text */
.wcrg-help {
  font-size: 12px;
  color: #6b7280;
  margin-top: 4px;
}

/* Client-side error box (JS may inject) */
#wcrg-client-errors { scroll-margin: 80px; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .wcrg-btn { transition: none; }
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
  .wcrg-wrap  { background:#0b0f17; color:#e5e7eb; border-color:#1f2937; }
  .wcrg-input,
  .wcrg-select { background:#111827; color:#e5e7eb; border-color:#374151; }
  .wcrg-pre   { background:#0b1020; color:#e6edf3; border-color:#1f2937; }
  .wcrg-btn   { background:#1f2937; color:#e5e7eb; }
  .wcrg-small { color:#9ca3af; }
  .wcrg-help  { color:#9ca3af; }
}

/* Print only the snippet */
@media print {
  body * { visibility: hidden !important; }
  .wcrg-pre, .wcrg-pre * { visibility: visible !important; }
  .wcrg-pre { border: none; background: #fff; color: #000; }
}