/* ============================================================
   TIDAL UI KIT · FORMS
   Inputs, textareas, selects, checkboxes, radios, toggles, sliders, file.
   ============================================================ */

.tdl-field { display: flex; flex-direction: column; gap: 6px; }
.tdl-field-label {
  font-family: var(--tdl-font-display); font-weight: 900; font-size: var(--tdl-fs-2xs);
  letter-spacing: var(--tdl-tracking-label); text-transform: uppercase; color: var(--tdl-fg-3);
}
.tdl-field-hint { font-family: var(--tdl-font-body); font-size: var(--tdl-fs-xs); color: var(--tdl-fg-4); }
.tdl-field-error { font-family: var(--tdl-font-body); font-size: var(--tdl-fs-xs); color: var(--tdl-neg); }

.tdl-input, .tdl-textarea, .tdl-select {
  background: var(--tdl-surf-1); border: 1px solid var(--tdl-hairline-2); color: var(--tdl-fg);
  font-family: var(--tdl-font-body); font-size: var(--tdl-fs-sm);
  padding: 10px 12px; border-radius: var(--tdl-radius-md);
  transition: border-color var(--tdl-dur-fast), background var(--tdl-dur-fast);
  width: 100%;
}
.tdl-input:hover, .tdl-textarea:hover, .tdl-select:hover { border-color: var(--tdl-hairline-3); }
.tdl-input:focus, .tdl-textarea:focus, .tdl-select:focus {
  outline: 0; border-color: var(--tdl-accent); background: var(--tdl-surf-2);
}
.tdl-input::placeholder, .tdl-textarea::placeholder { color: var(--tdl-fg-5); }
.tdl-textarea { min-height: 96px; resize: vertical; line-height: var(--tdl-lh-body); }

.tdl-input-prefix, .tdl-input-suffix { position: relative; display: flex; align-items: center; }
.tdl-input-prefix .tdl-input { padding-left: 36px; }
.tdl-input-suffix .tdl-input { padding-right: 36px; }
.tdl-input-prefix > .icon, .tdl-input-suffix > .icon {
  position: absolute; top: 50%; transform: translateY(-50%); color: var(--tdl-fg-4);
  font-size: 14px; pointer-events: none;
}
.tdl-input-prefix > .icon { left: 12px; }
.tdl-input-suffix > .icon { right: 12px; }

.tdl-select { appearance: none; padding-right: 32px;
  background-image: linear-gradient(45deg, transparent 50%, var(--tdl-fg-3) 50%),
                    linear-gradient(135deg, var(--tdl-fg-3) 50%, transparent 50%);
  background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}

.tdl-input.is-invalid, .tdl-textarea.is-invalid, .tdl-select.is-invalid { border-color: var(--tdl-neg); }
.tdl-input:disabled, .tdl-textarea:disabled, .tdl-select:disabled { opacity: 0.5; cursor: not-allowed; }

/* —— Checkbox ————————————————————————— */
.tdl-check { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; font-size: var(--tdl-fs-sm); }
.tdl-check input { position: absolute; opacity: 0; pointer-events: none; }
.tdl-check .box {
  width: 16px; height: 16px; border-radius: 3px; border: 1px solid var(--tdl-hairline-3);
  background: var(--tdl-surf-1); display: inline-flex; align-items: center; justify-content: center;
  transition: background var(--tdl-dur-fast), border-color var(--tdl-dur-fast);
}
.tdl-check .box::after { content: ""; width: 8px; height: 8px; background: var(--tdl-accent-fg); transform: scale(0); transition: transform var(--tdl-dur-fast); clip-path: polygon(20% 50%, 0 70%, 40% 100%, 100% 25%, 80% 5%, 40% 60%); }
.tdl-check input:checked + .box { background: var(--tdl-accent); border-color: var(--tdl-accent); }
.tdl-check input:checked + .box::after { transform: scale(1); }
.tdl-check input:focus-visible + .box { outline: 2px solid var(--tdl-accent); outline-offset: 2px; }

/* —— Radio ——————————————————————————— */
.tdl-radio { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; font-size: var(--tdl-fs-sm); }
.tdl-radio input { position: absolute; opacity: 0; pointer-events: none; }
.tdl-radio .dot {
  width: 16px; height: 16px; border-radius: 50%; border: 1px solid var(--tdl-hairline-3);
  background: var(--tdl-surf-1); display: inline-flex; align-items: center; justify-content: center;
  transition: border-color var(--tdl-dur-fast);
}
.tdl-radio .dot::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--tdl-accent); transform: scale(0); transition: transform var(--tdl-dur-fast); }
.tdl-radio input:checked + .dot { border-color: var(--tdl-accent); }
.tdl-radio input:checked + .dot::after { transform: scale(1); }

/* —— Toggle (switch) —————————————————— */
.tdl-toggle { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; font-size: var(--tdl-fs-sm); }
.tdl-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.tdl-toggle .track {
  width: 32px; height: 18px; border-radius: 999px; background: var(--tdl-surf-3);
  border: 1px solid var(--tdl-hairline-2); position: relative;
  transition: background var(--tdl-dur-fast), border-color var(--tdl-dur-fast);
}
.tdl-toggle .track::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 12px; height: 12px; border-radius: 50%; background: var(--tdl-fg);
  transition: transform var(--tdl-dur-fast);
}
.tdl-toggle input:checked + .track { background: var(--tdl-accent); border-color: var(--tdl-accent); }
.tdl-toggle input:checked + .track::after { transform: translateX(14px); background: var(--tdl-accent-fg); }

/* —— Range slider ————————————————————— */
.tdl-range { -webkit-appearance: none; appearance: none; width: 100%; height: 4px; background: var(--tdl-surf-3); border-radius: 999px; outline: 0; }
.tdl-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 14px; height: 14px; border-radius: 50%; background: var(--tdl-accent); cursor: pointer; border: 2px solid var(--tdl-bg); }
.tdl-range::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--tdl-accent); cursor: pointer; border: 2px solid var(--tdl-bg); }

/* —— File upload ——————————————————————— */
.tdl-file {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  border: 1px dashed var(--tdl-hairline-3); border-radius: var(--tdl-radius-md);
  padding: var(--tdl-space-8); text-align: center; cursor: pointer;
  transition: border-color var(--tdl-dur-fast), background var(--tdl-dur-fast);
}
.tdl-file:hover, .tdl-file.is-drag { border-color: var(--tdl-accent); background: rgba(255,64,0,0.04); }
.tdl-file input { display: none; }
.tdl-file .title { font-family: var(--tdl-font-display); font-weight: 900; font-size: var(--tdl-fs-2xs); letter-spacing: var(--tdl-tracking-label); text-transform: uppercase; color: var(--tdl-fg); }
.tdl-file .sub { color: var(--tdl-fg-4); font-size: var(--tdl-fs-xs); margin-top: 4px; }


/* Native dropdown option styling — browsers vary, but most respect
   background-color/color on <option> elements. Firefox especially. */
.tdl-select option,
.tdl-input  option,
select       option {
  background-color: var(--tdl-surf-2, #141414);
  color: var(--tdl-fg, #f0f0f0);
  font-family: var(--tdl-font-body);
}