/* =========================
   COMPONENT: AUTH FORM
========================= */

.form-group {
  width: 100%;
  margin-bottom: 16px;
}

/* =========================
   INPUT WRAPPER
========================= */

.input-wrapper {
  position: relative;

  display: flex;
  flex-direction: column;

  width: 100%;
}

.input-wrapper input {
  width: 100%;

  padding: 22px 18px 9px;

  border: 2px solid transparent;
  border-radius: 16px;

  background: #f8f8f5;
  color: #2b2b2b;

  font-size: 15px;

  outline: none;
  transition: 0.25s ease;
}

.input-wrapper input::placeholder {
  color: transparent;
}

/* =========================
   FLOATING LABEL
========================= */

.input-wrapper label {
  position: absolute;
  top: 14px;
  left: 18px;

  color: #676F54;

  font-size: 15px;

  pointer-events: none;
  transform-origin: left top;
  transition: 0.25s ease;
}

.input-wrapper input:focus,
.input-wrapper input:valid,
.input-wrapper input.has-value {
  border-color: #d7e4cf;
  background: #f8f8f5;
  transform: translateY(-2px);
}

.input-wrapper input:focus + label,
.input-wrapper input:valid + label,
.input-wrapper input.has-value + label {
  transform: translateY(-9px) scale(0.85);
  color: #79B4A9;
  font-weight: 600;
}

/* =========================
   PASSWORD FIELD
========================= */

.password-wrapper {
  position: relative;
}

.password-wrapper input {
  padding-right: 50px;
}

.password-toggle {
  position: absolute;
  top: 50%;
  right: 14px;

  padding: 8px;

  border: none;
  background: none;
  color: #676F54;

  cursor: pointer;
  transform: translateY(-50%);
  transition: 0.2s ease;
}

.password-toggle:hover {
  color: #79B4A9;
}

.eye-icon {
  display: block;

  width: 20px;
  height: 20px;

  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* =========================
   ERROR MESSAGE
========================= */

.error-message {
  display: block;

  min-height: 18px;
  margin-top: 6px;
  margin-left: 12px;

  color: #c0392b;

  font-size: 13px;
  font-weight: 500;

  opacity: 1;
  transform: translateY(0);
}

.form-group.error .input-wrapper input {
  border-color: #b91c1c;
}

.form-group .error-message {
  display: block !important;

  min-height: 17px;
  margin-top: 7px;
  margin-left: 18px;

  position: relative;
  z-index: 10;

  color: #c0392b !important;

  font-size: 13px !important;
  line-height: 1.3 !important;
}

/* =========================
   FORM OPTIONS
========================= */

.form-options {
  display: flex;
  align-items: center;
  justify-content: space-between;

  flex-wrap: wrap;
  gap: 12px;

  margin-bottom: 26px;
}

/* =========================
   CHECKBOX
========================= */

.remember-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;

  cursor: pointer;
}

.remember-wrapper input[type="checkbox"] {
  display: none;
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;

  color: #4f5f57;

  font-size: 0.875rem;

  cursor: pointer;
  user-select: none;
}

.checkmark {
  width: 17px;
  height: 17px;

  display: flex;
  align-items: center;
  justify-content: center;

  flex-shrink: 0;

  border: 2px solid #9CC69B;
  border-radius: 5px;

  background: #ffffff;

  transition: 0.2s ease;
}

.remember-wrapper input[type="checkbox"]:checked ~ .checkbox-label .checkmark {
  background: #79B4A9;
  border-color: #79B4A9;
}

.remember-wrapper input[type="checkbox"]:checked ~ .checkbox-label .checkmark::after {
  content: "✓";

  color: #ffffff;

  font-size: 10px;
  font-weight: 700;
}

/* =========================
   FORGOT PASSWORD
========================= */

.forgot-password {
  color: #676F54;

  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;

  transition: 0.2s ease;
}

.forgot-password:hover {
  color: #79B4A9;
}