/* ============================================================================
   OFFIQA — Support form page stylesheet
   Loads AFTER offiqa-design-v2.css via extra_css. For /support/ only.
   Extends contact.css patterns with ticket-specific additions.
   ============================================================================ */

/* Issue category selector */
.issue-category {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.issue-option input[type="radio"] { display: none; }
.issue-option label {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  background: var(--surface);
  cursor: pointer;
  font-weight: 600;
  font-size: 0.93rem;
  color: var(--ink-2);
  transition: border-color 0.16s ease, background 0.16s ease;
}
.issue-option input[type="radio"]:checked + label {
  border-color: var(--green-400);
  background: var(--green-tint);
  color: var(--green-700);
}
.issue-option label:hover { border-color: var(--green-300); background: var(--surface-2); }
.issue-icon {
  width: 2rem; height: 2rem;
  border-radius: var(--r-xs);
  background: var(--paper);
  display: grid; place-items: center;
  font-size: 1rem;
  flex-shrink: 0;
}

/* Priority indicator */
.priority-selector {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.priority-option input[type="radio"] { display: none; }
.priority-option label {
  padding: 0.3rem 0.85rem;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  background: var(--surface);
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 600;
  cursor: pointer;
  color: var(--muted);
  transition: 0.15s ease;
}
.priority-option.low input:checked + label    { border-color: var(--green-soft); background: var(--green-tint); color: var(--green-700); }
.priority-option.medium input:checked + label { border-color: var(--ochre-soft); background: var(--ochre-tint); color: var(--ochre-700); }
.priority-option.high input:checked + label   { border-color: #f3c5be; background: #fdf0ee; color: #b84a3e; }

/* Response time note */
.response-time {
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  font-family: var(--font-mono);
  font-size: 0.76rem;
  color: var(--muted);
}
.response-time strong { color: var(--ink-2); }

/* Reuse contact.css form-field, input, textarea, submit styles */

@media (max-width: 720px) {
  .issue-category { grid-template-columns: 1fr; }
}