/* =========================================================
   Arcendium Floating Fields
   - floating placeholder labels
   - focus highlight
   - active label when field has text
   - no top / left / right border
========================================================= */

.arc-floating-field{
  position:relative;
  width:100%;
  margin:14px 0 18px;
}

.arc-floating-field input,
.arc-floating-field textarea,
.arc-floating-field select{
  width:100% !important;
  min-height:48px;
  border-top:0 !important;
  border-left:0 !important;
  border-right:0 !important;
  border-bottom:1.5px solid var(--border2, rgba(15,23,42,.16)) !important;
  border-radius:0 !important;
  background:transparent !important;
  color:var(--text, #0f172a) !important;
  padding:18px 2px 8px !important;
  font-size:14px !important;
  font-weight:600;
  outline:none !important;
  box-shadow:none !important;
  transition:border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.arc-floating-field textarea{
  min-height:96px;
  resize:vertical;
  line-height:1.55;
}

.arc-floating-field select{
  appearance:auto;
  cursor:pointer;
}

.arc-floating-field input::placeholder,
.arc-floating-field textarea::placeholder{
  color:transparent !important;
}

.arc-floating-field label.arc-floating-label{
  position:absolute;
  left:2px;
  top:15px;
  z-index:2;
  max-width:calc(100% - 8px);
  color:var(--text3, #64748b);
  font-size:14px;
  font-weight:650;
  line-height:1;
  pointer-events:none;
  transform-origin:left top;
  transition:transform .18s ease, top .18s ease, color .18s ease, opacity .18s ease;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.arc-floating-field:focus-within input,
.arc-floating-field:focus-within textarea,
.arc-floating-field:focus-within select{
  border-bottom-color:var(--accent, #00d4a9) !important;
  box-shadow:0 8px 0 -7px rgba(0,212,170,.8) !important;
}

.arc-floating-field:focus-within label.arc-floating-label,
.arc-floating-field.is-active label.arc-floating-label{
  top:-3px;
  transform:scale(.78);
  color:var(--accent, #00d4a9);
}

.arc-floating-field.is-invalid input,
.arc-floating-field.is-invalid textarea,
.arc-floating-field.is-invalid select{
  border-bottom-color:var(--red, #ef4444) !important;
  box-shadow:0 8px 0 -7px rgba(239,68,68,.8) !important;
}

.arc-floating-field.is-invalid label.arc-floating-label{
  color:var(--red, #ef4444);
}

.arc-floating-field .field-help,
.arc-floating-field .form-help,
.arc-floating-field .error-message{
  margin-top:7px;
  font-size:12px;
  color:var(--text3, #64748b);
}

.arc-floating-field input:-webkit-autofill,
.arc-floating-field input:-webkit-autofill:hover,
.arc-floating-field input:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--text, #0f172a) !important;
  transition:background-color 9999s ease-in-out 0s;
  box-shadow:0 0 0 1000px transparent inset !important;
}

html[data-theme="dark"] .arc-floating-field input:-webkit-autofill,
html[data-theme="dark"] .arc-floating-field input:-webkit-autofill:hover,
html[data-theme="dark"] .arc-floating-field input:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--text, #f0f4ff) !important;
}

/* hide original duplicated labels only after JS has safely copied them */
.arc-floating-original-label{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip:rect(0,0,0,0) !important;
  white-space:nowrap !important;
  border:0 !important;
}

/* prevent old theme/input styles from forcing boxed borders */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
textarea,
select{
  border-top-color:transparent;
  border-left-color:transparent;
  border-right-color:transparent;
}

/* Auth pages usually have form-group wrappers */
.form-group .arc-floating-field,
.field .arc-floating-field,
.input-group .arc-floating-field{
  margin-top:4px;
}

/* Do not break checkbox/radio rows */
.checkbox,
.checkbox-row,
.remember-row,
.terms-row,
.form-check{
  position:relative;
}

.checkbox input,
.checkbox-row input,
.remember-row input,
.terms-row input,
.form-check input{
  border:initial !important;
  min-height:auto !important;
}