/* ============================================================================
   v3 FORMS — element-level styling so existing Livewire components inherit
   v3 dark-cinema look without rewriting their markup.
   ============================================================================ */

/* Inputs / textareas / selects */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="url"],
input[type="search"],
input[type="password"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
textarea,
select {
  width: 100%;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line, rgba(255, 255, 255, 0.12));
  border-radius: 10px;
  color: var(--text, #f3f5f7);
  font-family: var(--body, "Manrope"), system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  transition: border-color .2s, background .2s, box-shadow .2s;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}

input[type="text"]::placeholder,
input[type="email"]::placeholder,
input[type="tel"]::placeholder,
input[type="number"]::placeholder,
input[type="search"]::placeholder,
input[type="password"]::placeholder,
textarea::placeholder {
  color: rgba(255, 255, 255, 0.34);
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--accent, #00C2FF);
  background: rgba(0, 224, 255, 0.06);
  box-shadow: 0 0 0 3px rgba(0, 224, 255, 0.16);
}

textarea {
  resize: vertical;
  min-height: 110px;
}

select {
  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 12 8' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23f3f5f7' stroke-width='1.6' stroke-linecap='round'><path d='M1 1l5 5 5-5'/></svg>");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 12px;
  padding-right: 40px;
  cursor: pointer;
}

/* Labels */
label {
  display: block;
  font-family: var(--mono, "JetBrains Mono"), monospace;
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-mute, #8a9099);
  margin-bottom: 8px;
}

label.inline,
label.checkbox,
label.radio {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--body, "Manrope"), system-ui, sans-serif;
  font-size: 14px;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text, #f3f5f7);
  margin-bottom: 0;
  cursor: pointer;
}

input[type="checkbox"],
input[type="radio"] {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--accent, #00C2FF);
  cursor: pointer;
}

/* File upload */
input[type="file"] {
  font-family: var(--body), system-ui, sans-serif;
  font-size: 13px;
  color: var(--text);
  padding: 12px 16px;
}

/* Form spacing — every direct form child gets vertical rhythm */
form > * + * { margin-top: 14px; }

/* Form fieldsets / sections */
fieldset {
  border: 1px solid var(--line, rgba(255,255,255,.12));
  border-radius: 14px;
  padding: 20px;
  margin: 0;
}
fieldset legend {
  padding: 0 10px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-mute);
}

/* Validation messages */
.error, .invalid-feedback, [class*="text-red"] {
  color: #ff6b8a !important;
  font-size: 12px;
  margin-top: 6px;
  font-family: var(--body);
}

/* Submitted / success boxes */
.text-emerald-500, .text-emerald-600, .text-emerald-700 { color: var(--accent) !important; }
.bg-emerald-50  { background: rgba(0, 224, 255, .12) !important; }

/* Surface containers that the Livewire forms wrap in */
.bg-white, .bg-surface-soft {
  background: rgba(255, 255, 255, 0.03) !important;
  color: var(--text) !important;
}
.text-brand-navy, .text-brand-navy\/80, .text-brand-navy\/70 { color: var(--text) !important; }
.text-surface-text, .text-slate-500, .text-slate-600 { color: var(--text-mute) !important; }
.border-slate-100, .border-slate-200, .border-slate-300 { border-color: var(--line) !important; }
.bg-slate-50, .bg-slate-100 { background: rgba(255,255,255,.04) !important; }

/* Rounded utilities used by Livewire — fall through normally
   Sizing/grid utilities (grid, grid-cols-*, gap-*, space-y-*) we can't replicate
   here without rewriting markup. The forms will be single-column on those rows
   but every input is still styled and functional. */

/* Primary button — Livewire uses .btn-primary; we already define it in site.css
   but make sure it overrides any Tailwind w-full + colors */
button.btn-primary, .btn-primary {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
}

/* Spinners / wire:loading text */
[wire\:loading] { color: var(--accent); }

/* Headings inside Livewire forms — were Plus Jakarta Sans h3s; force Anton */
form h3, form h4,
[wire\:id] h3, [wire\:id] h4 {
  font-family: var(--display, "Anton"), sans-serif;
  text-transform: uppercase;
  letter-spacing: -.01em;
  color: var(--text);
  line-height: 1.05;
}
form h3, [wire\:id] h3 { font-size: 28px; margin-bottom: 6px; }
form h4, [wire\:id] h4 { font-size: 20px; margin-bottom: 6px; }
form p, [wire\:id] p { color: var(--text-mute); font-size: 14px; line-height: 1.55; }