/*!
 * WaBanja 2027 — Google / WhatsApp Outlined Floating-Label Input System
 * Unifies external labels + inner placeholders into a single notched-border floating label.
 */

:root {
  --wb-fl-accent: #ff3d77;
  --wb-fl-notch-bg: #141126;
  --wb-fl-label-idle: rgba(255, 255, 255, 0.62);
  --wb-fl-label-floated: rgba(255, 255, 255, 0.78);
}

html[data-theme="light"],
body.light-theme,
body.day-mode {
  --wb-fl-notch-bg: #ffffff;
  --wb-fl-label-idle: rgba(18, 19, 26, 0.58);
  --wb-fl-label-floated: rgba(18, 19, 26, 0.78);
}

.wb-fl-box {
  position: relative !important;
  display: block;
  width: 100%;
  margin-top: 6px;
}

/* Ensure consistent vertical padding & border radius on upgraded inputs */
.wb-fl-box > input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not([type="submit"]):not([type="button"]),
.wb-fl-box > select,
.wb-fl-box > textarea {
  width: 100%;
  box-sizing: border-box;
  padding-top: 13px !important;
  padding-bottom: 11px !important;
  transition: border-color 0.18s cubic-bezier(0.2, 0, 0, 1),
              box-shadow 0.18s cubic-bezier(0.2, 0, 0, 1),
              background-color 0.18s ease !important;
}

/* Hide duplicate inner placeholder when resting (unfocused & empty) */
.wb-fl-box:not(.is-focused):not(.has-value) > input::placeholder,
.wb-fl-box:not(.is-focused):not(.has-value) > textarea::placeholder {
  color: transparent !important;
  opacity: 0 !important;
  -webkit-text-fill-color: transparent !important;
}

/* Password Visibility Toggle */
.wb-pwd-toggle {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--wb-fl-label-idle, rgba(255, 255, 255, 0.6));
  cursor: pointer;
  padding: 8px;
  font-size: 1rem;
  z-index: 5;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s ease;
}
.wb-pwd-toggle:hover {
  color: var(--wb-fl-accent, #ff5f6d);
}
.wb-fl-box > input[type="password"],
.wb-fl-box > input[data-wb-pwd-field="1"] {
  padding-right: 44px !important;
}

/* When focused, also hide placeholder if it duplicates the floating label */
.wb-fl-box.hide-dup-placeholder > input::placeholder,
.wb-fl-box.hide-dup-placeholder > textarea::placeholder {
  color: transparent !important;
  opacity: 0 !important;
  -webkit-text-fill-color: transparent !important;
}

/* The Single Floating Label */
.wb-fl-box > label.wb-fl-label {
  position: absolute !important;
  left: 12px !important;
  top: 50% !important;
  transform: translateY(-50%) scale(1) !important;
  transform-origin: left center !important;
  padding: 0 6px !important;
  margin: 0 !important;
  font-size: 0.9rem !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  letter-spacing: 0.01em !important;
  text-transform: none !important;
  color: var(--wb-fl-label-idle) !important;
  background: transparent !important;
  pointer-events: none !important;
  user-select: none;
  white-space: nowrap;
  max-width: calc(100% - 28px);
  overflow: hidden;
  text-overflow: ellipsis;
  z-index: 4 !important;
  display: inline-flex !important;
  width: auto !important;
  align-items: center;
  gap: 5px;
  transition: top 0.18s cubic-bezier(0.2, 0, 0, 1),
              left 0.18s cubic-bezier(0.2, 0, 0, 1),
              transform 0.18s cubic-bezier(0.2, 0, 0, 1),
              color 0.18s cubic-bezier(0.2, 0, 0, 1),
              background-color 0.12s ease !important;
}

/* Offset resting label cleanly to the right when input has a leading icon inside the box */
.wb-fl-box.has-lead-icon:not(.is-focused):not(.has-value):not(.always-floated) > label.wb-fl-label {
  left: 44px !important;
  max-width: calc(100% - 68px);
}

.wb-fl-helper-hint {
  font-size: 0.76rem;
  color: var(--wb-fl-label-idle, rgba(255, 255, 255, 0.55));
  margin-top: 4px;
  padding-left: 6px;
  font-weight: 500;
}

/* Multiline Textarea resting position */
.wb-fl-box.is-textarea > label.wb-fl-label {
  top: 22px !important;
}

/* Active / Floated onto the Top Border Line (Notched Border Effect) */
.wb-fl-box.is-focused > label.wb-fl-label,
.wb-fl-box.has-value > label.wb-fl-label,
.wb-fl-box.always-floated > label.wb-fl-label {
  top: 0 !important;
  transform: translateY(-50%) scale(0.82) !important;
  font-weight: 600 !important;
  color: var(--wb-fl-label-floated) !important;
  background-color: var(--wb-fl-notch-bg, #141126) !important;
  border-radius: 4px;
}

/* Brand Focus Highlight on Label & Border */
.wb-fl-box.is-focused > label.wb-fl-label {
  color: var(--wb-fl-accent, #ff3d77) !important;
}

.wb-fl-box.is-focused > input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.wb-fl-box.is-focused > select,
.wb-fl-box.is-focused > textarea {
  border-color: var(--wb-fl-accent, #ff3d77) !important;
}

.wb-fl-box > label.wb-fl-label i {
  font-size: 0.78em !important;
}