/* =============================================
   FYLR INPUT SYSTEM — Quiet Luxury Edition
   All inputs site-wide inherit from this file.
   DO NOT define input styles anywhere else.
   ============================================= */

/* ── Base tokens ── */
:root {
  --input-bg: #111113;
  --input-border: rgba(255, 255, 255, 0.08);
  --input-border-focus: #FF6B00;
  --input-text: #ffffff;
  --input-label: rgba(255, 255, 255, 0.45);
  --input-placeholder: rgba(255, 255, 255, 0.18);
  --input-prefix: rgba(255, 255, 255, 0.35);
  --input-prefix-focus: #FF6B00;
  --input-height: 52px;
  --input-padding-x: 16px;
  --input-font: 'Inter', sans-serif;
  --input-font-size: 15px;
  --input-font-weight: 400;
  --input-transition: border-color 0.18s ease, box-shadow 0.18s ease;
  --input-focus-shadow: 0 0 0 1px rgba(255, 107, 0, 0.25);
  --input-autofill-badge: #00f5d4;
}

/* ── Field wrapper (always required — wraps label + input) ── */
.fylr-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

/* ── Label ── */
.fylr-label {
  font-family: var(--input-font);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--input-label);
  user-select: none;
}

/* ── Base input (applies to text, email, tel, number, password, date) ── */
.fylr-input {
  font-family: var(--input-font);
  font-size: var(--input-font-size);
  font-weight: var(--input-font-weight);
  color: var(--input-text);
  background: var(--input-bg);
  border: none;
  border-bottom: 1px solid var(--input-border);
  border-radius: 0;
  height: var(--input-height);
  padding: 0 var(--input-padding-x);
  width: 100%;
  outline: none;
  transition: var(--input-transition);
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
}

.fylr-input::placeholder {
  color: var(--input-placeholder);
  font-weight: 300;
}

.fylr-input:focus {
  border-bottom-color: var(--input-border-focus);
  box-shadow: var(--input-focus-shadow);
  background: #141416;
}

.fylr-input:focus::placeholder {
  opacity: 0.4;
}

/* Remove number spinners */
.fylr-input[type="number"]::-webkit-inner-spin-button,
.fylr-input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.fylr-input[type="number"] { -moz-appearance: textfield; }

/* ── Currency input wrapper ── */
/* The $ is a CSS ::before pseudo-element — NEVER injected via JS */
.fylr-currency-wrap {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
}

.fylr-currency-wrap::before {
  content: '$';
  position: absolute;
  left: var(--input-padding-x);
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--input-font);
  font-size: var(--input-font-size);
  font-weight: 500;
  color: var(--input-prefix);
  pointer-events: none;
  z-index: 2;
  transition: color 0.18s ease;
  line-height: 1;
}

/* When the wrapped input is focused, $ turns orange */
.fylr-currency-wrap:focus-within::before {
  color: var(--input-prefix-focus);
}

/* Currency input itself gets left padding to clear the $ */
.fylr-currency-wrap .fylr-input {
  padding-left: 32px;
}

/* ── Percentage input wrapper ── */
.fylr-percent-wrap {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
}

.fylr-percent-wrap::after {
  content: '%';
  position: absolute;
  right: var(--input-padding-x);
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--input-font);
  font-size: var(--input-font-size);
  font-weight: 500;
  color: var(--input-prefix);
  pointer-events: none;
  transition: color 0.18s ease;
}

.fylr-percent-wrap:focus-within::after {
  color: var(--input-prefix-focus);
}

.fylr-percent-wrap .fylr-input {
  padding-right: 36px;
}

/* ── Textarea ── */
.fylr-textarea {
  font-family: var(--input-font);
  font-size: var(--input-font-size);
  font-weight: var(--input-font-weight);
  color: var(--input-text);
  background: var(--input-bg);
  border: none;
  border-bottom: 1px solid var(--input-border);
  border-radius: 0;
  padding: 14px var(--input-padding-x);
  width: 100%;
  min-height: 100px;
  outline: none;
  resize: vertical;
  transition: var(--input-transition);
  box-sizing: border-box;
}

.fylr-textarea::placeholder { color: var(--input-placeholder); font-weight: 300; }
.fylr-textarea:focus { border-bottom-color: var(--input-border-focus); box-shadow: var(--input-focus-shadow); }

/* ── Select ── */
.fylr-select {
  font-family: var(--input-font);
  font-size: var(--input-font-size);
  font-weight: var(--input-font-weight);
  color: var(--input-text);
  background: var(--input-bg);
  border: none;
  border-bottom: 1px solid var(--input-border);
  border-radius: 0;
  height: var(--input-height);
  padding: 0 40px 0 var(--input-padding-x);
  width: 100%;
  outline: none;
  cursor: pointer;
  transition: var(--input-transition);
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.3)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  box-sizing: border-box;
}

.fylr-select:focus { border-bottom-color: var(--input-border-focus); box-shadow: var(--input-focus-shadow); }
.fylr-select option { background: #1a1a1c; color: #fff; }

/* ── Radio / checkbox group ── */
.fylr-choice-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.fylr-choice-group.horizontal {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 8px;
}

.fylr-choice {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 48px;
  padding: 0 var(--input-padding-x);
  background: var(--input-bg);
  border-bottom: 1px solid var(--input-border);
  cursor: pointer;
  transition: background 0.15s ease;
  user-select: none;
}

.fylr-choice:hover { background: #18181a; }

.fylr-choice input[type="radio"],
.fylr-choice input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: #FF6B00;
  cursor: pointer;
  flex-shrink: 0;
  margin: 0;
}

.fylr-choice-label {
  font-family: var(--input-font);
  font-size: 14px;
  font-weight: 400;
  color: rgba(255,255,255,0.75);
  cursor: pointer;
}

/* ── Auto-fill source badge ── */
.fylr-source-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--input-font);
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--input-autofill-badge);
  margin-top: 4px;
}

/* ── Error state ── */
.fylr-field.has-error .fylr-input,
.fylr-field.has-error .fylr-select,
.fylr-field.has-error .fylr-textarea {
  border-bottom-color: #ff4444;
}

.fylr-error-msg {
  font-family: var(--input-font);
  font-size: 11px;
  color: #ff4444;
  margin-top: 4px;
}

/* ── EIN masked input (XX-XXXXXXX) ── */
.fylr-input.fylr-ein { letter-spacing: 0.05em; }

/* ── Section divider for grouped fields ── */
.fylr-field-group {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.fylr-field-group + .fylr-field-group {
  margin-top: 40px;
  padding-top: 40px;
  border-top: 1px solid rgba(255,255,255,0.05);
}