﻿.floating-input {
  position: relative;
  margin-bottom: 2rem;
}

.floating-input input.input-text {
  border: none;
  border-bottom: 1px solid #ccc;
  background: transparent;
  padding: 12px 0 6px;
  font-size: 16px;
  color: #000;
  width: 100%;
  box-sizing: border-box;
  outline: none;
}

.floating-input label {
  position: absolute;
  top: 12px;
  left: 0;
  font-size: 16px;
  color: #aaa;
  pointer-events: none;
  transition: 0.2s ease all;
}

/* สำหรับฟิลด์ทั่วไป */
.floating-input input.input-text:focus + label,
.floating-input input.input-text:not(:placeholder-shown) + label,
/* สำหรับฟิลด์ password ที่มีปุ่ม 👁 คั่นกลาง */
.floating-input input.input-text:focus + button + label,
.floating-input input.input-text:not(:placeholder-shown) + button + label {
  top: -10px;
  font-size: 12px;
  color: #000;
}

/* ปุ่ม 👁 */
.floating-input .show-password-input {
  position: absolute;
  right: 0;
  top: 12px;
  background: transparent;
  border: none;
  cursor: pointer;
  z-index: 2;
}
