/* ============================================================
   BLERDINOMICS — support / troubleshooting form styles.
   Depends on assets/css/main.css.
   ============================================================ */

body { background: var(--gray-100); }

/* ===== URGENCY SELECTOR ===== */
.urgency-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.urgency-option { position: relative; }
.urgency-option input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; }
.urgency-label {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; padding: 14px 8px; min-height: 44px;
  border: 1.5px solid var(--gray-300); cursor: pointer;
  transition: border-color 0.2s, background 0.2s; text-align: center;
}
.urgency-label .u-icon { font-size: 1.3rem; }
.urgency-label .u-text { font-size: 0.8rem; font-weight: 600; color: var(--gray-700); }
.urgency-label .u-sub { font-size: 0.68rem; color: var(--gray-500); }
.urgency-option:nth-child(1) input:checked ~ .urgency-label { border-color: var(--green-500); background: var(--green-100); }
.urgency-option:nth-child(2) input:checked ~ .urgency-label { border-color: var(--yellow-500); background: var(--yellow-100); }
.urgency-option:nth-child(3) input:checked ~ .urgency-label { border-color: var(--gold-500); background: var(--gold-100); }
.urgency-option:nth-child(4) input:checked ~ .urgency-label { border-color: var(--red-500); background: var(--red-100); }
.urgency-label:hover { border-color: var(--purple-500); background: var(--purple-100); }
.urgency-option input:focus-visible ~ .urgency-label { outline: 3px solid var(--purple-700); outline-offset: 2px; }

/* ===== CONTACT METHOD ===== */
.contact-method-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.contact-method-option { position: relative; }
.contact-method-option input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; }
.contact-method-label {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 10px; min-height: 44px;
  border: 1.5px solid var(--gray-300); cursor: pointer;
  font-size: 0.85rem; font-weight: 600; color: var(--gray-700);
  transition: border-color 0.2s, background 0.2s, color 0.2s;
}
.contact-method-label svg { width: 16px; height: 16px; flex-shrink: 0; }
.contact-method-option input:checked ~ .contact-method-label {
  border-color: var(--purple-700); background: var(--purple-100); color: var(--purple-800);
}
.contact-method-label:hover { border-color: var(--purple-500); background: var(--purple-100); }
.contact-method-option input:focus-visible ~ .contact-method-label { outline: 3px solid var(--purple-700); outline-offset: 2px; }

/* ===== AVAILABILITY CHECKBOXES ===== */
.avail-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.avail-option { position: relative; }
.avail-option input[type="checkbox"] { position: absolute; opacity: 0; width: 0; height: 0; }
.avail-label {
  display: flex; align-items: center; gap: 8px;
  padding: 12px; min-height: 44px;
  border: 1.5px solid var(--gray-300); cursor: pointer;
  font-size: 0.8rem; font-weight: 500; color: var(--gray-700);
  transition: border-color 0.2s, background 0.2s, color 0.2s;
}
.avail-label .check-box {
  width: 16px; height: 16px; border: 1.5px solid var(--gray-300); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s, border-color 0.2s;
}
.avail-option input:checked ~ .avail-label {
  border-color: var(--purple-700); background: var(--purple-100); color: var(--purple-800);
}
.avail-option input:checked ~ .avail-label .check-box { background: var(--purple-700); border-color: var(--purple-700); }
.avail-option input:checked ~ .avail-label .check-box::after {
  content: ''; width: 7px; height: 4px;
  border-left: 2px solid white; border-bottom: 2px solid white;
  transform: rotate(-45deg) translateY(-1px); display: block;
}
.avail-label:hover { border-color: var(--purple-500); background: var(--purple-100); }
.avail-option input:focus-visible ~ .avail-label { outline: 3px solid var(--purple-700); outline-offset: 2px; }

/* ===== FILE UPLOAD ===== */
.file-upload-zone {
  border: 2px dashed var(--gray-300);
  padding: 28px 20px; text-align: center;
  transition: border-color 0.2s, background 0.2s; cursor: pointer; position: relative;
  background: var(--gray-100);
}
.file-upload-zone:hover { border-color: var(--purple-500); background: var(--purple-100); }
.file-upload-zone:focus-within { outline: 3px solid var(--purple-700); outline-offset: 2px; }
.file-upload-zone input[type="file"] {
  position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer;
}
.file-upload-icon { font-size: 1.8rem; margin-bottom: 8px; }
.file-upload-text { font-size: 0.875rem; font-weight: 600; color: var(--gray-700); }
.file-upload-sub { font-size: 0.75rem; color: var(--gray-500); margin-top: 4px; }

/* ===== RESPONSIVE ===== */
@media (max-width: 640px) {
  .form-card { padding: 28px 20px; }
  .form-row { grid-template-columns: 1fr; }
  .urgency-grid { grid-template-columns: 1fr 1fr; }
  .contact-method-grid { grid-template-columns: 1fr; }
  .avail-grid { grid-template-columns: 1fr 1fr; }
}